Merge branch 'column-editing'

* column-editing:
  Added basic unit_boundaries view
  Fixed section page
  More updates for column builder

Author: davenquinn

packages/column-builder/package.json

@@ -1,11 +1,5 @@
 {
   "name": "@macrostrat-web/column-builder",
-  "scripts": {
-    "dev": "next dev -p 1234",
-    "build": "next build",
-    "start": "next start -p 1234",
-    "lint": "next lint"
-  },
   "module": "src/index.ts",
   "dependencies": {
     "@blueprintjs/core": "^5.10.5",

packages/column-builder/src/components/comp.module.sass

@@ -2,79 +2,100 @@
   a
     color: inherit
     text-decoration: none
+
   *
     box-sizing: border-box
+
   .table-container
     margin: 10px
     height: 100%
     padding: 0px
     border-radius: 3px
+
   .col-group-name
     display: flex
     justify-content: center
     align-items: center
+
   .bp5-menu
     max-height: 400px
     max-width: 400px
     overflow: auto
+
 .mySuggest
   overflow: scroll
   max-height: 200px
+
 .itemSelectPopover
   padding: 5px
   background-color: var(--panel-background-color)
   -ms-overflow-style: none
   /* Internet Explorer 10+ */
   scrollbar-width: none
   /* Firefox */
+
   ::-webkit-scrollbar
     display: none
-  /* Safari and Chrome */
+/* Safari and Chrome */
 .interval-row
   display: flex
   justify-content: space-between
+
 .row
   display: flex
   align-items: baseline
+
 .color-block
   border-style: solid
   //border-color: black
   border-width: 0.5px
   height: 30px
   width: 30px
+
 .page
   margin: 10px
+
 .bread-crumbs
   display: flex
+
 .strat-name-con
   display: flex
   align-items: baseline
+
 .strat-name
   margin: 0
+
 .tag-container,
 .tag-popover
   flex-wrap: wrap
   display: flex
   align-items: baseline
+
 .tag-popover
   padding: 10px
   height: 300px
   width: 900px
   overflow-y: scroll
+
 .tag
   margin: 1px
+
 .interval-cell-min-editor
   display: flex
   flex-direction: column
   height: 8em
   justify-content: space-between
+
 .nomargin
   margin-bottom: 0px
+
 .margin-bottom-spacing
   margin-bottom: 20px
+
 .map-container
   height: 200px
   width: 100%
+
 .header,
 .header-drag
   min-height: 15px
@@ -84,53 +105,66 @@
   font-size: 15px
   //background: rgb(211, 216, 222)
   font-weight: bold
+
 .header-drag
   cursor: grab
+
   &:active
     cursor: grabbing
+
 .lng-lat-inputs
   margin: 5px
   display: flex
   justify-content: space-around
+
 .col-editor-container
   display: flex
   justify-content: space-between
-.unit-section-tables
-  width: 75%
+
 .unit-section-container
   display: flex
   justify-content: center
   margin-top: 10px
+
 .unit-moved
   box-shadow: -6px 0px 0px 0px #10b146
+
 .btwn-row-btn
   height: 10px
   width: 100%
   margin: -10px 0%
   padding-top: 5px
+
   &:hover
     cursor: pointer
+
 .base-table
   border: solid 1px
   //border-color: #c5cbd3
   margin: 10px
   //background-color: white
   border-radius: 5px
+
 .full-width
   width: 100%
   table-layout: fixed
+
 .ellipse
   text-overflow: ellipsis
   overflow: hidden
   max-width: 80px
   white-space: nowrap
+
 .strat-name-tooltip
   h4
     margin: 0
+
   .underline
     text-decoration: underline
+
   i
     color: rgb(166, 170, 174)
+
     a
       text-decoration: underline
       color: rgb(108, 138, 175)
@@ -144,11 +178,13 @@
   h4
     margin: 0
     font-size: 15px
+
   .geologic-age
     font-style: italic
-    //color: #7b7b7b
+  //color: #7b7b7b
   p
     margin: 0
+
     a
       text-decoration: underline
 
@@ -157,22 +193,28 @@
     margin: 0
   display: flex
   justify-content: space-between
+
 .related-strat-card
   h3
     margin: 0
+
 .strat-name-dialog-container
   display: flex
   padding: 10px
+
   .left,
   .right
     margin: 5px
+
 .strat-dialog-bottom
   margin: 10px
 /////////////// ref list item //////////////////
 .ref-author
   font-style: italic
+
   &::before
     content: "-"
+
 .doi
   &::before
     content: "DOI: "

packages/column-builder/src/components/lith/renderer.ts

@@ -1,7 +1,7 @@
 import { hyperStyled } from "@macrostrat/hyper";
 import { Lith, LithUnit } from "~/types";
-import { mergeRefs, Tag, Dialog } from "@blueprintjs/core";
-import { Tooltip2, Popover2 } from "@blueprintjs/popover2";
+import { Tag } from "@blueprintjs/core";
+import { Tooltip2 } from "@blueprintjs/popover2";
 import styles from "./lith.module.scss";
 import classNames from "classnames";
 
@@ -98,7 +98,6 @@ function LithSegment(props: {
           style: {
             borderRadius: 0,
           },
-          elementRef: mergeRefs(),
           onRemove: (evt) => {
             props.onRemove?.(props.lith);
             evt?.stopPropagation();

packages/column-builder/src/components/table.ts

@@ -10,6 +10,7 @@ import {
 } from "react-beautiful-dnd";
 import { Card, Icon } from "@blueprintjs/core";
 import { useNavigate } from "../components";
+import classNames from "classnames";
 
 interface RowProps {
   children: ReactChild;
@@ -164,7 +165,7 @@ interface DnDTableProps {
   headers?: any[];
   droppableId?: string;
   draggableId?: string;
-  title?: string;
+  title?: React.ReactNode;
   index: number;
   widths?: number[];
 }
@@ -177,10 +178,7 @@ function DnDTable(props: DnDTableProps) {
     droppableId = "table-drop-zone",
   } = props;
   const baseClass =
-    "bp5-html-table .bp5-html-table-condensed .bp5-html-table-bordered .base-table .full-width";
-  let tableClassName = props.interactive
-    ? `${baseClass} .bp5-interactive`
-    : baseClass;
+    "bp5-html-table bp5-html-table-condensed bp5-html-table-bordered base-table full-width";
 
   return h(
     Draggable,
@@ -192,11 +190,16 @@ function DnDTable(props: DnDTableProps) {
     },
     [
       (provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
+        const className = classNames(baseClass, {
+          "bp5-interactive": props.interactive,
+        });
+
         return h(
-          `table.${tableClassName}`,
+          `table`,
           {
             ref: provided.innerRef,
             ...provided.draggableProps,
+            className,
           },
           [
             h.if(headers.length > 0)(TableHeader, {
@@ -252,7 +255,7 @@ function TableHeader(props: {
             ...props.dragProps,
             colSpan: props.headers.length,
           },
-          [props.title]
+          props.title
         ),
       ]),
     ]),

packages/column-builder/src/components/unit-section-table/helpers.ts

@@ -37,7 +37,7 @@ function MergeDivideBtn(props: {
       disabled: props.disabled,
       onClick: props.onClick,
     },
-    [props.text]
+    props.text
   );
 }
 
@@ -70,7 +70,7 @@ function ColumnPageBtnMenu(props: ColBtnMenuI) {
           intent: unitsView ? "primary" : "none",
           disabled: unitsView,
         },
-        ["Unit view"]
+        "Unit view"
       ),
       h.if(!props.noSectionView)(
         Button,
@@ -79,12 +79,12 @@ function ColumnPageBtnMenu(props: ColBtnMenuI) {
           intent: !unitsView ? "primary" : "none",
           disabled: !unitsView,
         },
-        ["Section View"]
+        "Section view"
       ),
       h.if(!unitsView)(MergeDivideBtn, {
         onClick: props.mergeSections,
         disabled: mergeIds.length < 2,
-        text: "Merge Sections",
+        text: "Merge sections",
       }),
     ]),
     h.if(unitsView)(ReorderUnitsBtnGrp, {
@@ -142,7 +142,7 @@ export interface UnitRowContextMenuI {
 function UnitRowContextMenu(props: UnitRowContextMenuI) {
   const { state, runAction } = useUnitSectionContext();
   const SubMenu = ({ pos }: { pos: UNIT_ADD_POISITON }) => {
-    return h(React.Fragment, [
+    return h([
       h(MenuItem, {
         text: `Copy unit #${props.unit.id}`,
         icon: "duplicate",
@@ -208,7 +208,7 @@ function UnitRowContextMenu(props: UnitRowContextMenuI) {
       minimal: true,
       position: "left-top",
     },
-    [h(Button, { minimal: true, icon: "more" })]
+    h(Button, { minimal: true, icon: "more" })
   );
 }
 
@@ -227,28 +227,26 @@ function AddBtnBetweenRows(props: {
           position: "right",
           intent: "success",
         },
-        [
-          h(
-            "div.btwn-row-btn",
-            {
-              onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
-                setStyle({ display: "flex" });
-              },
-              onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
-                setStyle({ display: "none" });
-              },
-              onClick: props.onClick,
+        h(
+          "div.btwn-row-btn",
+          {
+            onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
+              setStyle({ display: "flex" });
+            },
+            onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
+              setStyle({ display: "none" });
             },
-            [
-              h(Button, {
-                intent: "success",
-                fill: true,
-                onClick: props.onClick,
-                style: { ...style, minHeight: "5px" },
-              }),
-            ]
-          ),
-        ]
+            onClick: props.onClick,
+          },
+          [
+            h(Button, {
+              intent: "success",
+              fill: true,
+              onClick: props.onClick,
+              style: { ...style, minHeight: "5px" },
+            }),
+          ]
+        )
       ),
     ]),
   ]);