@macrostrat/column-views 2.0.0 → 2.1.0

package/src/age-axis.ts

@@ -1,7 +1,6 @@
 import hyper from "@macrostrat/hyper";
 import {
   SVG,
-  ColumnSVG,
   ColumnAxis,
   ColumnContext,
   ColumnAxisType,
@@ -9,9 +8,10 @@ import {
 } from "@macrostrat/column-components";
 import { useContext } from "react";
 import styles from "./age-axis.module.sass";
-import { useMacrostratColumnData } from "./data-provider";
+import { useCompositeScale, useMacrostratColumnData } from "./data-provider";
 import { Parenthetical } from "@macrostrat/data-components";
 import { PackageScaleLayoutData } from "./prepare-units/composite-scale";
+import { AgeLabel } from "./unit-details";
 
 const h = hyper.styled(styles);
 
@@ -99,7 +99,29 @@ export function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {
           scale,
           tickSizeOuter: 3,
         });
-      })
+      }),
     ),
   ]);
 }
+
+export function AgeCursor({ age }) {
+  /** A cursor that shows the age at a specific point on the age axis. */
+  const scale = useCompositeScale();
+  const heightPx = scale(age);
+
+  console.log(age, heightPx);
+
+  if (age == null || heightPx == null) {
+    return null;
+  }
+
+  return h(
+    "div.age-cursor",
+    {
+      style: {
+        top: heightPx,
+      },
+    },
+    [h("div.line"), h(AgeLabel, { age, className: "label" })],
+  );
+}

package/src/age-model-overlay.ts

@@ -52,7 +52,7 @@ export function BoundaryAgeModelOverlay() {
   const ageModel = useAPIResult(
     "https://macrostrat.org/api/v2/age_model",
     { col_id },
-    (res) => res.success.data
+    (res) => res.success.data,
   );
 
   if (ageModel == null) {
@@ -68,6 +68,6 @@ export function BoundaryAgeModelOverlay() {
         key: surface.boundary_id,
         style: { top: `${height}px` },
       });
-    })
+    }),
   );
 }

package/src/column.module.sass

@@ -38,6 +38,7 @@ body:global(.dark-mode) .column-container
     display: flex
     flex-direction: row
     position: relative
+    height: fit-content
 
   .unit
     stroke: var(--column-stroke-color)
@@ -57,17 +58,16 @@ body:global(.dark-mode) .column-container
 
 .column-container :global .col-note-label
   font-size: 10px
-  margin-top: 3px
-  padding: 2px
-  padding-left: 3px
   line-height: 9px
   border-left: none !important
+  margin: 1px 0
 
 .column-container :global g.height-range
   display: none
 
 .column-container :global .note-inner
   border: none
+  padding: 1px
 
 .column-container :global .frame rect
   fill: transparent

package/src/column.ts

@@ -2,7 +2,7 @@ import { ColumnAxisType } from "@macrostrat/column-components";
 import { hyperStyled } from "@macrostrat/hyper";
 import { useDarkMode } from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { RefObject, useRef, HTMLAttributes } from "react";
+import { RefObject, useRef, HTMLAttributes, useCallback } from "react";
 import styles from "./column.module.sass";
 import {
   UnitSelectionProvider,
@@ -15,6 +15,7 @@ import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
 import { UnitSelectionPopover } from "./unit-details";
 import {
   MacrostratColumnDataProvider,
+  useCompositeScale,
   useMacrostratColumnData,
 } from "./data-provider";
 import {
@@ -38,6 +39,11 @@ interface BaseColumnProps extends SectionSharedProps {
   // Timescale properties
   showTimescale?: boolean;
   timescaleLevels?: number | [number, number];
+  onMouseOver?: (
+    unit: UnitLong | null,
+    height: number | null,
+    evt: MouseEvent,
+  ) => void;
 }
 
 export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
@@ -47,6 +53,7 @@ export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
   b_age?: number;
   mergeSections?: MergeSectionsMode;
   showUnitPopover?: boolean;
+  allowUnitSelection?: boolean;
   selectedUnit?: number | null;
   onUnitSelected?: (unitID: number | null, unit: any) => void;
   // Unconformity height in pixels
@@ -71,6 +78,7 @@ export function Column(props: ColumnProps) {
     minPixelScale = 0.2,
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
+    allowUnitSelection,
     ...rest
   } = props;
   const ref = useRef<HTMLElement>();
@@ -96,22 +104,41 @@ export function Column(props: ColumnProps) {
         title: "Empty column",
         description: "No sections found in this column.",
         icon: "warning-sign",
-      })
+      }),
+    );
+  }
+
+  let main: any = h(ColumnInner, { columnRef: ref, ...rest }, [
+    children,
+    h.if(showUnitPopover)(UnitSelectionPopover),
+    h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
+  ]);
+
+  /* By default, unit selection is disabled. However, if any related props are passed,
+   we enable it.
+   */
+  let _allowUnitSelection = allowUnitSelection ?? false;
+  if (showUnitPopover || selectedUnit != null || onUnitSelected != null) {
+    _allowUnitSelection = true;
+  }
+
+  if (_allowUnitSelection) {
+    main = h(
+      UnitSelectionProvider,
+      {
+        columnRef: ref,
+        onUnitSelected,
+        selectedUnit,
+        units,
+      },
+      main,
     );
   }
 
   return h(
     MacrostratColumnDataProvider,
     { units, sections, totalHeight, axisType },
-    h(
-      UnitSelectionProvider,
-      { columnRef: ref, onUnitSelected, selectedUnit, units },
-      h(ColumnInner, { columnRef: ref, ...rest }, [
-        children,
-        h.if(showUnitPopover)(UnitSelectionPopover),
-        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
-      ])
-    )
+    main,
   );
 }
 
@@ -134,12 +161,11 @@ function ColumnInner(props: ColumnInnerProps) {
     showTimescale,
     timescaleLevels,
     maxInternalColumns,
+    onMouseOver,
   } = props;
 
   const { axisType } = useMacrostratColumnData();
 
-  const dispatch = useUnitSelectionDispatch();
-
   let width = _width;
   let columnWidth = _columnWidth;
   if (columnWidth > width) {
@@ -150,8 +176,8 @@ function ColumnInner(props: ColumnInnerProps) {
     showLabelColumn = false;
   }
 
-  let _showTimescale = showTimescale;
-  if (timescaleLevels !== null) {
+  let _showTimescale = showTimescale ?? true;
+  if (timescaleLevels != null) {
     _showTimescale = true;
   }
   _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;
@@ -159,9 +185,7 @@ function ColumnInner(props: ColumnInnerProps) {
   return h(
     ColumnContainer,
     {
-      onClick(evt) {
-        dispatch?.(null, null, evt as any);
-      },
+      ...useMouseEventHandlers(onMouseOver),
       className,
     },
     h("div.column", { ref: columnRef }, [
@@ -178,10 +202,59 @@ function ColumnInner(props: ColumnInnerProps) {
         maxInternalColumns,
       }),
       children,
-    ])
+    ]),
   );
 }
 
+type ColumnMouseOverHandler = (
+  unit: UnitLong | null,
+  height: number | null,
+  evt: MouseEvent,
+) => void;
+
+function useMouseEventHandlers(
+  _onMouseOver: ColumnMouseOverHandler | null = null,
+) {
+  /** Click event handler */
+
+  // Click handler for unit selection
+  const dispatch = useUnitSelectionDispatch();
+  const onClick = useCallback(
+    (evt) => {
+      dispatch?.(null, null, evt as any);
+    },
+    [dispatch],
+  );
+
+  /** Hover event handlers */
+  const scale = useCompositeScale();
+
+  const onMouseOver = useCallback(
+    (evt) => {
+      const height = scale.invert(
+        evt.clientY - evt.currentTarget.getBoundingClientRect().top,
+      );
+      _onMouseOver?.(null, height, evt);
+    },
+    [scale, _onMouseOver],
+  );
+
+  const onMouseOut = useCallback(() => {
+    _onMouseOver?.(null, null, null);
+  }, [_onMouseOver]);
+
+  if (_onMouseOver == null) {
+    return {
+      onClick,
+      onMouseOver: undefined,
+      onMouseMove: undefined,
+      onMouseOut: undefined,
+    };
+  }
+
+  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };
+}
+
 export interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }

package/src/correlation-chart/main.ts

@@ -44,6 +44,7 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   unconformityLabels?: boolean;
   selectedUnit?: number | null;
   showUnitPopover?: boolean;
+  unitComponent?: any;
   onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
 }
 
@@ -55,6 +56,7 @@ export function CorrelationChart({
   showUnitPopover = true,
   selectedUnit,
   onUnitSelected,
+  unitComponent,
   ...scaleProps
 }: CorrelationChartProps) {
   const defaultScaleProps = {
@@ -124,15 +126,16 @@ export function CorrelationChart({
                 offset,
                 domain,
                 pixelScale,
+                unitComponent,
               });
-            })
+            }),
           ),
           h.if(showUnitPopover)(UnitSelectionPopover),
           // Navigation only works within a column for now...
           h(UnitKeyboardNavigation, { units }),
         ]),
-      ])
-    )
+      ]),
+    ),
   );
 }
 
@@ -140,6 +143,7 @@ function Package({
   columnData,
   columnSpacing,
   columnWidth,
+  unitComponent,
   offset,
   domain,
   pixelScale,
@@ -151,6 +155,7 @@ function Package({
       columnData.map((data, i) => {
         return h(Column, {
           units: data.units,
+          unitComponent,
           width: columnWidth,
           key: i,
           domain,
@@ -177,7 +182,14 @@ interface ColumnProps {
 }
 
 function Column(props: ColumnProps) {
-  const { units, width = 150, offsetLeft, domain, pixelScale } = props;
+  const {
+    units,
+    width = 150,
+    offsetLeft,
+    domain,
+    pixelScale,
+    unitComponent = ColoredUnitComponent,
+  } = props;
 
   const columnWidth = width;
 
@@ -200,13 +212,14 @@ function Column(props: ColumnProps) {
         axisType: ColumnAxisType.AGE,
       },
       h(UnitBoxes, {
-        unitComponent: ColoredUnitComponent,
+        unitComponent,
         unitComponentProps: {
           nColumns: 2,
           width: columnWidth,
+          showLabel: false,
         },
-      })
-    )
+      }),
+    ),
   );
 }
 
@@ -232,7 +245,7 @@ function PackageSVGOverlay({ data, columnWidth = 100, columnSpacing = 0 }) {
         pixelScale: bestPixelScale,
         columnSpacing,
       });
-    })
+    }),
   );
 }
 
@@ -251,7 +264,7 @@ function LaterallyExtensiveUnit({ data, scale, pixelScale, columnSpacing }) {
         key: i,
         columnSpacing,
       });
-    })
+    }),
   );
 }
 
@@ -270,13 +283,13 @@ function StratColSpan({
   return h(
     "div.strat-col-span",
     { style: { top, height, width, left } },
-    strat_name_long
+    strat_name_long,
   );
 }
 
 function ChartArea({ children }) {
   const setSelectedUnit = useUnitSelectionStore(
-    (state) => state.setSelectedUnit
+    (state) => state.setSelectedUnit,
   );
 
   return h(
@@ -286,7 +299,7 @@ function ChartArea({ children }) {
         setSelectedUnit(null);
       },
     },
-    children
+    children,
   );
 }
 

package/src/correlation-chart/prepare-data.ts

@@ -40,7 +40,7 @@ export interface ColumnIdentifier {
 
 export function buildCorrelationChartData(
   columns: ColumnData[],
-  settings: CorrelationChartSettings
+  settings: CorrelationChartSettings,
 ): CorrelationChartData {
   console.log(settings);
   const {
@@ -108,7 +108,7 @@ interface MultiColumnPackageData {
 }
 
 export function findLaterallyExtensiveUnits(
-  pkg: MultiColumnPackageData
+  pkg: MultiColumnPackageData,
 ): UnitGroup[] {
   const { columnData, b_age, t_age } = pkg;
   // Group units by strat_name_id
@@ -130,7 +130,7 @@ export function findLaterallyExtensiveUnits(
     const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);
     const filteredUnits = units.filter((d) => d != null);
     const [t_age, b_age] = mergeAgeRanges(
-      filteredUnits.map((d) => [d.t_age, d.b_age])
+      filteredUnits.map((d) => [d.t_age, d.b_age]),
     );
     if (filteredUnits.length <= 1) continue;
 
@@ -179,7 +179,7 @@ export function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {
 
 function separateColumns(
   pkg: PackageLayoutData,
-  columnIDs: number[]
+  columnIDs: number[],
 ): MultiColumnPackageData {
   /** Separate columns by col_id */
   const { units, t_age, b_age } = pkg;
@@ -196,7 +196,7 @@ function separateColumns(
             ...pkg,
             units: u1,
           },
-          ColumnAxisType.AGE
+          ColumnAxisType.AGE,
         ),
       };
     }),
@@ -207,7 +207,7 @@ function separateColumns(
 }
 
 export function columnGeoJSONRecordToColumnIdentifier(
-  col: ColumnGeoJSONRecord
+  col: ColumnGeoJSONRecord,
 ): ColumnIdentifier {
   return {
     col_id: col.properties.col_id,

package/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import "@macrostrat/style-system";
-import { useArgs } from "@storybook/preview-api";
+import { useArgs } from "storybook/preview-api";
 import { useCallback } from "react";
 import {
   ColumnCorrelationMap,
@@ -15,6 +15,7 @@ import { CorrelationChart, CorrelationChartProps } from "../main";
 import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { parseLineFromString, stringifyLine } from "../hash-string";
+import { EnvironmentColoredUnitComponent } from "../../units";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
@@ -49,7 +50,7 @@ function CorrelationStoryUI({
           //showLogo: false,
         }),
       ]),
-    ])
+    ]),
   );
 }
 
@@ -58,7 +59,7 @@ function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
 
   // Sync focused columns with map
   const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns
+    (state) => state.focusedColumns,
   );
 
   const columnUnits = useAsyncMemo(async () => {
@@ -71,7 +72,7 @@ function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
       ErrorBoundary,
       h(OverlaysProvider, [
         h(CorrelationChart, { data: columnUnits, ...props }),
-      ])
+      ]),
     ),
   ]);
 }
@@ -171,7 +172,7 @@ function useCorrelationLine() {
     (selectedUnit) => {
       updateArgs({ selectedUnit });
     },
-    [updateArgs]
+    [updateArgs],
   );
 
   return {
@@ -190,3 +191,8 @@ function Template(args) {
 }
 
 export const Primary = Template.bind({});
+
+export const ColoredByEnvironment = Template.bind({});
+ColoredByEnvironment.args = {
+  unitComponent: EnvironmentColoredUnitComponent,
+};

package/src/data-provider/base.ts

@@ -53,12 +53,12 @@ interface MacrostratStore extends RefsSlice {
   columnFootprints: Map<number, ColumnFootprintsStorage>;
   getColumns(
     projectID: number | null,
-    inProcess: boolean
+    inProcess: boolean,
   ): Promise<ColumnGeoJSONRecord[]>;
 }
 
 function createMacrostratStore(
-  baseURL: string = "https://macrostrat.org/api/v2"
+  baseURL: string = "https://macrostrat.org/api/v2",
 ) {
   return create<MacrostratStore>((set, get): MacrostratStore => {
     return {
@@ -221,7 +221,7 @@ function createIntervalsSlice(set, get) {
         return Array.from(_intervals.values());
       if (timescaleID != null) {
         return Array.from(_intervals.values() as any[]).filter(
-          (d) => d.timescale_id == timescaleID
+          (d) => d.timescale_id == timescaleID,
         );
       }
       return ids.map((id) => intervals.get(id));
@@ -233,7 +233,7 @@ function includesTimescale(intervals: Map<number, any>, timescaleID: number) {
   if (intervals == null) return false;
   if (timescaleID == null) return true;
   return Array.from(intervals.values()).some(
-    (d) => d.timescale_id == timescaleID
+    (d) => d.timescale_id == timescaleID,
   );
 }
 
@@ -272,7 +272,7 @@ export function useMacrostratDefs(dataType: string): Map<number, any> | null {
 
 export function useMacrostratColumns(
   projectID: number | null,
-  inProcess: boolean
+  inProcess: boolean,
 ) {
   const getColumns = useMacrostratStore((s) => s.getColumns);
   const columnsMap = useMacrostratStore((s) => s.columnFootprints);
@@ -292,7 +292,7 @@ export function useMacrostratColumns(
     if (!inProcess && colData.inProcess) {
       // Our available set of columns includes 'in process' columns, but we don't want them
       columns.features = columns.features?.filter(
-        (d) => d.properties.status != "in process"
+        (d) => d.properties.status != "in process",
       );
     }
     return columns;
@@ -323,7 +323,7 @@ export function MacrostratDataProvider(props: MacrostratDataProviderProps) {
   return h(
     MacrostratAPIProvider,
     { baseURL },
-    h(MacrostratDataProviderContext.Provider, { value: store }, children)
+    h(MacrostratDataProviderContext.Provider, { value: store }, children),
   );
 }
 
@@ -341,7 +341,7 @@ export function MacrostratAPIProvider({
   baseURL,
 }: APIProviderProps) {
   baseURL ??= useDev
-    ? "https://dev2.macrostrat.org/api/v2"
+    ? "https://dev.macrostrat.org/api/v2"
     : "https://macrostrat.org/api/v2";
 
   return h(
@@ -350,7 +350,7 @@ export function MacrostratAPIProvider({
       baseURL,
       unwrapResponse: (res) => res.success.data,
     },
-    children
+    children,
   );
 }
 
@@ -364,7 +364,7 @@ export function MacrostratColumnProvider(props) {
   return h(
     ColumnProvider,
     { axisType, divisions: units, range: domain, pixelsPerMeter: pixelScale },
-    children
+    children,
   );
 }
 
@@ -372,7 +372,7 @@ export function MacrostratColumnProvider(props) {
 export function LithologiesProvider({ children }) {
   useEffect(() => {
     console.warn(
-      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider"
+      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider",
     );
   }, []);
   return children;
@@ -386,3 +386,12 @@ export function useLithologies() {
   }, [lithologies, getLithologies]);
   return lithologies;
 }
+
+export function useEnvironments() {
+  const getEnvironments = useMacrostratStore((s) => s.getEnvironments);
+  const environments = useMacrostratStore((s) => s.environments);
+  useEffect(() => {
+    if (environments == null) getEnvironments();
+  }, [environments, getEnvironments]);
+  return environments;
+}

package/src/data-provider/column-nav.ts

@@ -14,13 +14,13 @@ type ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];
 const ColumnNavCtx = createContext<ColumnManagerData | null>(null);
 
 export function useColumnNav(
-  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null }
+  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null },
 ): ColumnManagerData {
   const ctx = useContext(ColumnNavCtx);
   if (ctx != null) return ctx;
 
   const [columnArgs, setColumnArgs] = useState<ColumnArgs>(
-    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs
+    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs,
   );
 
   useEffect(() => setQueryString(columnArgs), [columnArgs]);