Made map page column slightly nicer

Author: davenquinn

package.json

@@ -83,6 +83,7 @@
     "@react-hook/size": "^2.1.2",
     "@supabase/postgrest-js": "^1.18.1",
     "@turf/bbox": "^6.5.0",
+    "@turf/boolean-contains": "^7.2.0",
     "@turf/centroid": "^7.0.0",
     "@turf/distance": "^7.0.0",
     "@types/compression": "^1.7.2",

pages/+Layout.ts

@@ -17,8 +17,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   const pageContext = usePageContext();
   const { exports = {}, config, user } = pageContext;
   const pageStyle = exports?.pageStyle ?? "fullscreen";
-
-  const devTools = exports.devTools ?? [];
+  // const devTools = exports.devTools ?? [];
 
   return h(
     AuthProvider,

pages/columns/@column/column-inspector/modal-panel.ts

@@ -1,14 +1,10 @@
-import { Button, ButtonGroup } from "@blueprintjs/core";
-import {
-  UnitDetailsPanel,
-  useSelectedUnit,
-  useUnitSelectionDispatch,
-} from "@macrostrat/column-views";
-import { JSONView, ModalPanel, useKeyHandler } from "@macrostrat/ui-components";
+import { Button } from "@blueprintjs/core";
+import { UnitDetailsPanel } from "@macrostrat/column-views";
+import { useKeyHandler } from "@macrostrat/ui-components";
 import h from "@macrostrat/hyper";
 
 export function ModalUnitPanel(props) {
-  const { unitData, className, selectedUnit, onSelectUnit } = props;
+  const { unitData, className, selectedUnit, onSelectUnit, features } = props;
 
   const ix = unitData?.findIndex(
     (unit) => unit.unit_id === selectedUnit?.unit_id
@@ -59,5 +55,6 @@ export function ModalUnitPanel(props) {
     showLithologyProportions: true,
     onSelectUnit,
     columnUnits: unitData,
+    features,
   });
 }

pages/map/map-interface/components/info-drawer/strat-column/index.ts

@@ -1,14 +1,19 @@
 import { hyperStyled } from "@macrostrat/hyper";
-import { preprocessUnits, Column } from "@macrostrat/column-views";
+import {
+  Column,
+  ColoredUnitComponent,
+  UnitDetailsFeature,
+} from "@macrostrat/column-views";
 
 import styles from "./strat-column.module.styl";
 import { ColumnSummary } from "#/map/map-interface/app-state/handlers/columns";
 import { NonIdealState } from "@blueprintjs/core";
 import useBreadcrumbs from "use-react-router-breadcrumbs";
 import { LinkButton } from "../../buttons";
-import { InfoPanelSection } from "@macrostrat/map-interface";
+import { ExpansionPanel, InfoPanelSection } from "@macrostrat/map-interface";
 import { PatternProvider } from "~/_providers";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { ModalUnitPanel } from "#/columns/@column/column-inspector/modal-panel";
 
 const h = hyperStyled(styles);
 
@@ -21,13 +26,19 @@ function BackButton() {
 
 function ColumnOverlay({ columnInfo }: { columnInfo: ColumnSummary | null }) {
   const units = columnInfo?.units;
+
+  const [selectedUnitID, setSelectedUnitID] = useState<number>(null);
+
+  const selectedUnit = useMemo(() => {
+    if (selectedUnitID == null || units == null) return null;
+    return units.find((d) => d.unit_id == selectedUnitID);
+  }, [selectedUnitID]);
+
   if (units == null)
     return h(NonIdealState, { title: "No column available", icon: "error" }, [
       h("p", "A stratigraphic column has not been assigned for this location."),
     ]);
 
-  const unitsA = useMemo(() => preprocessUnits(units), []);
-
   const headerElement = h([
     h("div.controls", [h(BackButton)]),
     h("h4", columnInfo.col_name),
@@ -39,20 +50,33 @@ function ColumnOverlay({ columnInfo }: { columnInfo: ColumnSummary | null }) {
     ),
   ]);
 
-  return h(
-    InfoPanelSection,
-    { className: "strat-column-panel", headerElement },
-    h("div.strat-column-container", [
-      h(Column, {
-        data: unitsA,
-        showLabels: true,
-        targetUnitHeight: 25,
-        unconformityLabels: true,
-        width: 280,
-        columnWidth: 180,
-      }),
-    ])
-  );
+  return h([
+    h(InfoPanelSection, { className: "strat-column-panel", headerElement }, [
+      h("div.strat-column-container", [
+        h(Column, {
+          units,
+          unitComponent: ColoredUnitComponent,
+          showLabelColumn: false,
+          targetUnitHeight: 25,
+          unconformityLabels: true,
+          width: 280,
+          columnWidth: 240,
+          selectedUnit: selectedUnitID,
+          onUnitSelected: setSelectedUnitID,
+        }),
+      ]),
+    ]),
+    h(ModalUnitPanel, {
+      unitData: units,
+      className: "unit-details-panel",
+      selectedUnit,
+      onSelectUnit: setSelectedUnitID,
+      features: new Set([
+        UnitDetailsFeature.JSONToggle,
+        UnitDetailsFeature.DepthRange,
+      ]),
+    }),
+  ]);
 }
 
 export function StratColumn(props) {

pages/map/map-interface/components/info-drawer/strat-column/strat-column.module.styl

@@ -1,15 +1,18 @@
 .strat-column-container
-  min-height: 500px
   padding: 0 1em 1em
   --column-background-color: var(--panel-background-color)
   --column-stroke-color: var(--text-color)
   --column-note-color: var(--text-color)
 
-:global
-  .timescale-container .timescale
-    width: calc(6em + 6px)
-    --timescale-level-size: 1.5em
-
 .strat-column-panel h3
   text-overflow: ellipsis
-  overflow: hidden
+  overflow: hidden
+
+.unit-details-panel
+  position: sticky
+  bottom: 0
+  background-color: var(--panel-background-color)
+  max-height: 40vh
+  font-size: 0.9em
+  min-height: 200px
+

pages/map/map-interface/components/transitions/main.module.styl

@@ -15,9 +15,9 @@ transitionable()
   transitionable()
 
 .loading-area
-  position: relative
   .spinner, .data
     transition: height 0.5s ease-in, opacity 0.2s ease-in
+
   .spinner
     position absolute
     top 0
@@ -27,22 +27,28 @@ transitionable()
     min-height: 90px
     background-color: var(--panel-background-color)
     padding: 15px
+
   &.enter
     .spinner
       height: 0
       opacity: 0
+
     .data
       opacity: 1
+
   &.from
     .spinner
       height: 90px
       opacity: 1
+
     .data
       opacity: 0
+
   &.leave
     .spinner
       height: 90px
       opacity: 1
+
     .data
       opacity: 0
 

pages/map/map-interface/map-page/index.ts

@@ -17,9 +17,10 @@ import {
 import Searchbar from "../components/navbar";
 import MapContainer from "./map-view";
 import { MenuPage } from "./menu";
-import h from "./main.module.styl";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 
+import h from "./main.module.styl";
+
 const ElevationChart = loadable(() => import("../components/elevation-chart"));
 const InfoDrawer = loadable(() => import("../components/info-drawer"));
 const Menu = loadable(() => import("./menu"));

yarn.lock

@@ -3465,6 +3465,7 @@ __metadata:
     "@react-hook/size": "npm:^2.1.2"
     "@supabase/postgrest-js": "npm:^1.18.1"
     "@turf/bbox": "npm:^6.5.0"
+    "@turf/boolean-contains": "npm:^7.2.0"
     "@turf/centroid": "npm:^7.0.0"
     "@turf/distance": "npm:^7.0.0"
     "@types/compression": "npm:^1.7.2"
@@ -4992,6 +4993,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/boolean-contains@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "@turf/boolean-contains@npm:7.2.0"
+  dependencies:
+    "@turf/bbox": "npm:^7.2.0"
+    "@turf/boolean-point-in-polygon": "npm:^7.2.0"
+    "@turf/boolean-point-on-line": "npm:^7.2.0"
+    "@turf/helpers": "npm:^7.2.0"
+    "@turf/invariant": "npm:^7.2.0"
+    "@types/geojson": "npm:^7946.0.10"
+    tslib: "npm:^2.8.1"
+  checksum: 10/1648a44269a4d5b185666ef87a9c05d742da1147dd51d48f942eecbd3d249401fec6d1337f4c6fd7e505b4fc2ab4c16f783e2a3d0b06a6a5ab865e6a0277124c
+  languageName: node
+  linkType: hard
+
+"@turf/boolean-point-in-polygon@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "@turf/boolean-point-in-polygon@npm:7.2.0"
+  dependencies:
+    "@turf/helpers": "npm:^7.2.0"
+    "@turf/invariant": "npm:^7.2.0"
+    "@types/geojson": "npm:^7946.0.10"
+    point-in-polygon-hao: "npm:^1.1.0"
+    tslib: "npm:^2.8.1"
+  checksum: 10/37624a62d88e7d8c39a37d774399e3a9322f8b544e708c5f6eb4ad34ed86f57c7ac1ef6fafcc66297eb77b44aa28cccb9c8c583bf317471d142c0fbefc4aeb9c
+  languageName: node
+  linkType: hard
+
+"@turf/boolean-point-on-line@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "@turf/boolean-point-on-line@npm:7.2.0"
+  dependencies:
+    "@turf/helpers": "npm:^7.2.0"
+    "@turf/invariant": "npm:^7.2.0"
+    "@types/geojson": "npm:^7946.0.10"
+    tslib: "npm:^2.8.1"
+  checksum: 10/1f9388b181fc4e02d0106a0fb17a19c397a257691e3fee533fac357eb7e4c07495cffb9a801fad90383e06fb105dc0f07f789e0423bc4c8f9026b243c3204548
+  languageName: node
+  linkType: hard
+
 "@turf/buffer@npm:^7.2.0":
   version: 7.2.0
   resolution: "@turf/buffer@npm:7.2.0"
@@ -15154,6 +15195,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"point-in-polygon-hao@npm:^1.1.0":
+  version: 1.2.4
+  resolution: "point-in-polygon-hao@npm:1.2.4"
+  dependencies:
+    robust-predicates: "npm:^3.0.2"
+  checksum: 10/cba3e1cda20343056797afe18eafbde01da8e3ce5e76f8ae232b22ff502b27471fd55390b5d3cc20ef5e2021cb0a3a80d34c257c49abd0b5231f38f9c35de75e
+  languageName: node
+  linkType: hard
+
 "popper.js@npm:^1.14.4, popper.js@npm:^1.16.1":
   version: 1.16.1
   resolution: "popper.js@npm:1.16.1"
@@ -17046,7 +17096,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"robust-predicates@npm:^3.0.0":
+"robust-predicates@npm:^3.0.0, robust-predicates@npm:^3.0.2":
   version: 3.0.2
   resolution: "robust-predicates@npm:3.0.2"
   checksum: 10/88bd7d45a6b89e88da2631d4c111aaaf0443de4d7078e9ab7f732245790a3645cf79bf91882a9740dbc959cf56ba75d5dced5bf2259410f8b6de19fd240cd08c