@macrostrat/column-views 3.6.1 → 3.8.0

package/src/correlation-chart/main.ts

@@ -6,8 +6,7 @@ import {
   useColumnRef,
 } from "../data-provider";
 import { UnitDetailsFeature, UnitSelectionPopover } from "../unit-details";
-import hyper from "@macrostrat/hyper";
-import styles from "./main.module.sass";
+import h from "./main.module.sass";
 import { useMemo } from "react";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { CompositeTimescaleCore } from "../section";
@@ -31,12 +30,30 @@ import {
 import { ColoredUnitComponent } from "../units";
 import { UnitBoxes } from "../units/boxes";
 import { ColumnContainer } from "../column";
-import { ColumnData } from "../data-provider";
+import type { ColumnData } from "@macrostrat/data-provider";
 import { BaseUnit } from "@macrostrat/api-types";
 import { ScaleContinuousNumeric } from "d3-scale";
 import { ExtUnit } from "../prepare-units/types";
+import type { TimescaleClickHandler } from "@macrostrat/timescale";
+import { useMacrostratColumnInfo } from "@macrostrat/data-provider";
 
-const h = hyper.styled(styles);
+/** Standard props passed to a `columnHeaderComponent`. Everything a header
+ * needs is provided here, so the component can be a pure function of its props
+ * (no hooks required). Column-level hover/click are handled by the chart. */
+export interface ColumnHeaderProps {
+  /** The column data (units + identifier) for this column */
+  column: ColumnData;
+  /** The column's ID (col_id) */
+  columnID: number;
+  /** The column's index (left-to-right) within the chart */
+  columnIndex: number;
+  /** The units within the column */
+  units: ExtUnit[];
+  /** The rendered width of the column, in pixels */
+  width: number;
+  /** The column's name, resolved from column metadata when available */
+  columnName?: string | null;
+}
 
 export interface CorrelationChartProps extends CorrelationChartSettings {
   data: ColumnData[];
@@ -47,9 +64,25 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   selectedUnit?: number | null;
   showUnitPopover?: boolean;
   unitComponent?: any;
+  /** Arbitrary content (e.g. column title and/or ID) rendered above each column */
+  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;
+  /** Content rendered above the timescale axis (top-left), beside the column
+   * headers — e.g. a zoom/filter indicator. */
+  axisTopContent?: React.ReactNode;
   onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
+  /** Called when a timescale interval is clicked (e.g. to zoom the age range) */
+  onClickTimescaleInterval?: TimescaleClickHandler;
+  /** Called when the pointer enters/leaves a column (header or body). Passes
+   * the column ID, or null on leave. */
+  onColumnMouseOver?: (columnID: number | null) => void;
+  /** Called when a column header is clicked (e.g. to frame it on a map) */
+  onColumnClick?: (columnID: number) => void;
 }
 
+/** Horizontal padding of the main chart SVG. Column headers are aligned to
+ * this so that they line up with the columns beneath them. */
+const chartPaddingH = 4;
+
 function MainChartArea({ children }) {
   const columnRef = useColumnRef();
   return h("div.main-chart", { ref: columnRef }, children);
@@ -71,6 +104,11 @@ export function CorrelationChart({
   selectedUnit,
   onUnitSelected,
   unitComponent,
+  columnHeaderComponent,
+  axisTopContent,
+  onClickTimescaleInterval,
+  onColumnMouseOver,
+  onColumnClick,
   ...scaleProps
 }: CorrelationChartProps) {
   const defaultScaleProps = {
@@ -115,9 +153,9 @@ export function CorrelationChart({
       { selectedUnit, onUnitSelected, units },
       h(ChartArea, [
         h(TimescaleColumn, {
-          key: "timescale",
           scaleInfo,
           unconformityLabels,
+          onClickInterval: onClickTimescaleInterval,
         }),
         h(MainChartArea, [
           h(
@@ -126,7 +164,7 @@ export function CorrelationChart({
               className,
               innerWidth: mainWidth,
               height: scaleInfo.totalHeight,
-              paddingH: 4,
+              paddingH: chartPaddingH,
             },
             packages.map((pkg, i) => {
               const { offset, domain, pixelScale, scale, key } =
@@ -141,6 +179,7 @@ export function CorrelationChart({
                 pixelScale,
                 scale,
                 unitComponent,
+                onColumnMouseOver,
               });
             }),
           ),
@@ -150,6 +189,17 @@ export function CorrelationChart({
           // Navigation only works within a column for now...
           h(UnitKeyboardNavigation, { columnData: data }),
         ]),
+        // Rendered last so the sticky header paints above the unit boxes
+        // (positioned siblings paint in document order at the same z-index)
+        h(ColumnHeaderRow, {
+          data,
+          columnWidth,
+          columnSpacing,
+          columnHeaderComponent,
+          axisTopContent,
+          onColumnMouseOver,
+          onColumnClick,
+        }),
       ]),
     ),
   );
@@ -164,6 +214,7 @@ function Package({
   domain,
   pixelScale,
   scale,
+  onColumnMouseOver,
 }) {
   return h("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
@@ -172,6 +223,7 @@ function Package({
       columnData.map((data, i) => {
         return h(Column, {
           units: data.units,
+          columnID: data.columnID,
           unitComponent,
           width: columnWidth,
           key: i,
@@ -179,6 +231,7 @@ function Package({
           pixelScale,
           scale,
           offsetLeft: i * (columnWidth + columnSpacing),
+          onColumnMouseOver,
         });
       }),
     ]),
@@ -187,6 +240,7 @@ function Package({
 
 interface ColumnProps {
   units: ExtUnit[];
+  columnID?: number;
   unitComponent?: React.FunctionComponent<any>;
   unitComponentProps?: any;
   showLabels?: boolean;
@@ -198,17 +252,20 @@ interface ColumnProps {
   domain: [number, number];
   pixelScale: number;
   scale?: ScaleContinuousNumeric<number, number>;
+  onColumnMouseOver?: (columnID: number | null) => void;
 }
 
 function Column(props: ColumnProps) {
   const {
     units,
+    columnID,
     width = 150,
     offsetLeft,
     domain,
     pixelScale,
     scale,
     unitComponent = ColoredUnitComponent,
+    onColumnMouseOver,
   } = props;
 
   const columnWidth = width;
@@ -217,10 +274,19 @@ function Column(props: ColumnProps) {
     return null;
   }
 
+  const hoverHandlers =
+    onColumnMouseOver != null && columnID != null
+      ? {
+          onMouseEnter: () => onColumnMouseOver(columnID),
+          onMouseLeave: () => onColumnMouseOver(null),
+        }
+      : {};
+
   return h(
     "g.section",
     {
       transform: `translate(${offsetLeft} 0)`,
+      ...hoverHandlers,
     },
     h(
       ColumnProvider,
@@ -235,7 +301,6 @@ function Column(props: ColumnProps) {
       h(UnitBoxes, {
         unitComponent,
         unitComponentProps: {
-          nColumns: 2,
           width: columnWidth,
           showLabel: true,
         },
@@ -322,16 +387,122 @@ function ChartArea({ children }) {
   );
 }
 
+interface ColumnHeaderRowProps {
+  data: ColumnData[];
+  columnWidth: number;
+  columnSpacing: number;
+  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;
+  axisTopContent?: React.ReactNode;
+  onColumnMouseOver?: (columnID: number | null) => void;
+  onColumnClick?: (columnID: number) => void;
+}
+
+function ColumnHeaderRow({
+  data,
+  columnWidth,
+  columnSpacing,
+  columnHeaderComponent,
+  axisTopContent,
+  onColumnMouseOver,
+  onColumnClick,
+}: ColumnHeaderRowProps) {
+  /** The top grid row: arbitrary content above the timescale axis (top-left)
+   * and, when a header component is provided, per-column headers aligned with
+   * the columns. Collapses to nothing when neither is present. */
+  const Component = columnHeaderComponent;
+  if (Component == null && axisTopContent == null) {
+    return null;
+  }
+
+  return h([
+    h("div.column-header-spacer", axisTopContent),
+    h.if(Component != null)(
+      "div.column-header-row",
+      {
+        style: {
+          paddingLeft: chartPaddingH,
+          paddingRight: chartPaddingH,
+          gap: columnSpacing,
+        },
+      },
+      data.map((column, i) => {
+        return h(ColumnHeaderCell, {
+          key: column.columnID ?? i,
+          column,
+          columnIndex: i,
+          columnWidth,
+          Component: Component!,
+          onColumnMouseOver,
+          onColumnClick,
+        });
+      }),
+    ),
+  ]);
+}
+
+function ColumnHeaderCell({
+  column,
+  columnIndex,
+  columnWidth,
+  Component,
+  onColumnMouseOver,
+  onColumnClick,
+}: {
+  column: ColumnData;
+  columnIndex: number;
+  columnWidth: number;
+  Component: React.ComponentType<ColumnHeaderProps>;
+  onColumnMouseOver?: (columnID: number | null) => void;
+  onColumnClick?: (columnID: number) => void;
+}) {
+  /** Resolves the column name and wires column-level hover/click so the header
+   * component itself can stay a pure function of props. */
+  const columnID = column.columnID;
+  const info = useMacrostratColumnInfo(columnID);
+
+  return h(
+    "div.column-header-cell",
+    {
+      style: {
+        width: columnWidth,
+        minWidth: columnWidth,
+        maxWidth: columnWidth,
+      },
+      onMouseEnter: () => onColumnMouseOver?.(columnID),
+      onMouseLeave: () => onColumnMouseOver?.(null),
+      onClick: onColumnClick
+        ? (e: React.MouseEvent) => {
+            e.stopPropagation();
+            onColumnClick(columnID);
+          }
+        : undefined,
+    },
+    h(Component, {
+      column,
+      columnID,
+      columnIndex,
+      units: column.units as ExtUnit[],
+      width: columnWidth,
+      columnName: info?.col_name ?? null,
+    }),
+  );
+}
+
 interface TimescaleColumnProps {
   scaleInfo: CompositeStratigraphicScaleInfo;
   showLabels?: boolean;
   unconformityLabels?: boolean;
+  onClickInterval?: TimescaleClickHandler;
 }
 
 function TimescaleColumn(props: TimescaleColumnProps) {
-  const { scaleInfo, unconformityLabels = true } = props;
+  const { scaleInfo, unconformityLabels = true, onClickInterval } = props;
   return h("div.column-container.age-axis-container", [
     h(CompositeAgeAxisCore, { ...scaleInfo }),
-    h(CompositeTimescaleCore, { ...scaleInfo, unconformityLabels }),
+    h(CompositeTimescaleCore, {
+      ...scaleInfo,
+      unconformityLabels,
+      onClickInterval,
+    }),
   ]);
 }

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

@@ -44,7 +44,6 @@ export function buildCorrelationChartData(
   columns: ColumnData[],
   settings: CorrelationChartSettings,
 ): CorrelationChartData {
-  console.log(settings);
   const {
     mergeSections = MergeSectionsMode.OVERLAPPING,
     targetUnitHeight,

package/src/data-provider/unit-selection.ts

@@ -156,12 +156,23 @@ if (props.onClickedColumn) {
 
 export function useUnitSelectionTarget(
   unit: IUnit,
-): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
+): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void, boolean] {
   const ref = useRef<HTMLElement>(null);
   const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
   const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);
 
+  // "Linked" units share a stratigraphic name with the selected unit (e.g.
+  // the same formation correlated across columns), but are not the selection
+  // itself. They receive a subtler highlight.
+  const selectedStratName = (selectedUnit as any)?.strat_name_id;
+  const unitStratName = (unit as any)?.strat_name_id;
+  const linked =
+    !selected &&
+    selectedStratName != null &&
+    unitStratName != null &&
+    unitStratName === selectedStratName;
+
   const onClick = useCallback(
     (evt: Event) => {
       selectUnit?.(unit, ref.current);
@@ -185,7 +196,7 @@ export function useUnitSelectionTarget(
     });
   }, [selectedUnitElement]);
 
-  return [ref, selected, onClick];
+  return [ref, selected, onClick, linked];
 }
 
 export function UnitKeyboardNavigation({

package/src/maps/column-correlation/column-correlation-map.stories.ts

@@ -15,6 +15,7 @@ function ColumnCorrelationMapExt(
 ) {
   const {
     focusedLine,
+    manualColumns,
     columns,
     onSelectColumns,
     projectID,
@@ -26,6 +27,7 @@ function ColumnCorrelationMapExt(
     ColumnCorrelationProvider,
     {
       focusedLine,
+      manualColumns,
       columns,
       onSelectColumns,
       projectID,
@@ -63,6 +65,16 @@ export const withPreloadedCrossSection = {
   },
 };
 
+// Manual selection: click columns to add/remove them (no line of section).
+// Hovering highlights a column; the dashed line shows the selection order.
+export const manualColumnSelection = {
+  args: {
+    style: { width: "800px", height: "600px" },
+    padding: 100,
+    manualColumns: [432, 490],
+  },
+};
+
 export const nonStandardProject = {
   args: {
     style: { width: "800px", height: "600px" },

package/src/maps/column-correlation/core.ts

@@ -7,7 +7,7 @@ import {
 import { LngLatBounds, Style } from "mapbox-gl";
 import h from "@macrostrat/hyper";
 import { Feature, FeatureCollection } from "geojson";
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useMemo, useRef } from "react";
 import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 
 import { useCorrelationMapStore } from "./state";
@@ -36,12 +36,48 @@ export function ColumnCorrelationMap(props: CorrelationMapProps) {
       h(ColumnsLayer, { color: columnColor }),
       h(SelectedColumnsLayer),
       h(MapClickHandler),
+      h(ColumnInteractionHandler),
+      h(HoveredColumnHighlight),
+      h(ColumnZoomer, { padding }),
       h(SectionLine, { padding }),
       children,
     ],
   );
 }
 
+function ColumnZoomer({ padding }: { padding: number }) {
+  /** Frame a single column when `zoomColumn` is set (e.g. header click). */
+  const zoomColumn = useCorrelationMapStore((state) => state.zoomColumn);
+  const zoomNonce = useCorrelationMapStore((state) => state.zoomNonce);
+  const columns = useCorrelationMapStore((state) => state.columns);
+
+  const bounds = useMemo(() => {
+    if (zoomColumn == null || columns == null) return null;
+    const col = columns.find((c) => c.properties?.col_id === zoomColumn);
+    if (col?.geometry == null) return null;
+    const b = new LngLatBounds();
+    forEachCoordinate(col.geometry, (coord) => b.extend(coord as [number, number]));
+    return b.isEmpty() ? null : b;
+    // zoomNonce forces a fresh bounds object so repeat clicks re-frame
+  }, [zoomColumn, zoomNonce, columns]);
+
+  useMapEaseTo({ bounds, padding: padding * 2 });
+  return null;
+}
+
+function forEachCoordinate(geometry: any, fn: (coord: number[]) => void) {
+  const walk = (coords: any) => {
+    if (typeof coords[0] === "number") {
+      fn(coords);
+    } else {
+      for (const c of coords) walk(c);
+    }
+  };
+  if (geometry?.coordinates != null) walk(geometry.coordinates);
+}
+
+const columnLayers = ["columns-fill", "columns-points"];
+
 function MapClickHandler() {
   const onClickMap = useCorrelationMapStore((state) => state.onClickMap);
 
@@ -55,6 +91,102 @@ function MapClickHandler() {
   return null;
 }
 
+function ColumnInteractionHandler() {
+  /** Per-column click (manual selection) and hover highlighting. */
+  const toggleColumn = useCorrelationMapStore((state) => state.toggleColumn);
+  const setHoveredColumn = useCorrelationMapStore(
+    (state) => state.setHoveredColumn,
+  );
+  const isManual = useCorrelationMapStore(
+    (state) => state.selectionMode === "manual",
+  );
+  const hoveredRef = useRef<number | string | null>(null);
+
+  // Click a column to toggle it in/out of the selection (manual mode only)
+  useMapStyleOperator(
+    (map) => {
+      if (!isManual) return;
+      const onClick = (e) => {
+        const colID = e.features?.[0]?.properties?.col_id;
+        if (colID != null) toggleColumn(colID);
+      };
+      map.on("click", columnLayers, onClick);
+      return () => map.off("click", columnLayers, onClick);
+    },
+    [isManual, toggleColumn],
+  );
+
+  // Hover highlighting (via the columns layer's `hover` feature-state)
+  useMapStyleOperator(
+    (map) => {
+      const clearHover = () => {
+        if (hoveredRef.current != null) {
+          map.setFeatureState(
+            { source: "columns", id: hoveredRef.current },
+            { hover: false },
+          );
+          hoveredRef.current = null;
+        }
+      };
+      const onMove = (e) => {
+        const f = e.features?.[0];
+        if (f == null) return;
+        if (hoveredRef.current !== f.id) {
+          clearHover();
+          map.setFeatureState({ source: "columns", id: f.id }, { hover: true });
+          hoveredRef.current = f.id;
+        }
+        setHoveredColumn(f.properties?.col_id ?? null);
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const onLeave = () => {
+        clearHover();
+        setHoveredColumn(null);
+        map.getCanvas().style.cursor = "";
+      };
+      map.on("mousemove", columnLayers, onMove);
+      map.on("mouseleave", columnLayers, onLeave);
+      return () => {
+        map.off("mousemove", columnLayers, onMove);
+        map.off("mouseleave", columnLayers, onLeave);
+        clearHover();
+      };
+    },
+    [setHoveredColumn],
+  );
+
+  return null;
+}
+
+function HoveredColumnHighlight() {
+  /** Reflects the store's `hoveredColumn` on the map (e.g. when a column is
+   * hovered elsewhere in the UI) using the `highlighted` feature-state. */
+  const hoveredColumn = useCorrelationMapStore((state) => state.hoveredColumn);
+  const columns = useCorrelationMapStore((state) => state.columns);
+  const appliedRef = useRef<number | string | null>(null);
+
+  useMapStyleOperator(
+    (map) => {
+      if (appliedRef.current != null) {
+        map.setFeatureState(
+          { source: "columns", id: appliedRef.current },
+          { highlighted: false },
+        );
+        appliedRef.current = null;
+      }
+      if (hoveredColumn == null || columns == null) return;
+      const col = columns.find((c) => c.properties?.col_id === hoveredColumn);
+      const id = (col as any)?.id ?? col?.properties?.col_id;
+      if (id == null) return;
+      map.setFeatureState({ source: "columns", id }, { highlighted: true });
+      appliedRef.current = id;
+    },
+    [hoveredColumn, columns],
+  );
+
+  return null;
+}
+
 function SelectedColumnsLayer() {
   useOverlayStyle(() => selectedColumnsStyle, []);
 
@@ -148,11 +280,17 @@ const lineOfSectionStyle: Style = {
 function SectionLine({ padding }: { padding: number }) {
   useOverlayStyle(() => lineOfSectionStyle, []);
   const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
+  const focusedColumns = useCorrelationMapStore(
+    (state) => state.focusedColumns,
+  );
 
-  // Setup focused line
+  // Setup focused line (only drawn in line-of-section mode)
   useMapStyleOperator(
     (map) => {
       if (focusedLine == null) {
+        // Clear any previously-drawn line (e.g. after switching to manual mode)
+        setGeoJSON(map, "crossSectionLine", emptyFeatureCollection);
+        setGeoJSON(map, "crossSectionEndpoints", emptyFeatureCollection);
         return;
       }
       const data: FeatureCollection = {
@@ -180,17 +318,25 @@ function SectionLine({ padding }: { padding: number }) {
   );
 
   const bounds = useMemo(() => {
-    if (focusedLine == null || focusedLine?.coordinates.length < 2) {
-      return null;
-    }
-    let bounds = new LngLatBounds();
-    for (let coord of focusedLine.coordinates) {
-      bounds.extend(coord);
+    // In line mode, frame the line; in manual mode, frame the selected columns
+    const coords: number[][] =
+      focusedLine != null && focusedLine.coordinates.length >= 2
+        ? focusedLine.coordinates
+        : focusedColumns.map((c) => c.properties.centroid.geometry.coordinates);
+    if (coords.length < 2) return null;
+    const bounds = new LngLatBounds();
+    for (const coord of coords) {
+      bounds.extend(coord as [number, number]);
     }
     return bounds;
-  }, [focusedLine]);
+  }, [focusedLine, focusedColumns]);
 
   useMapEaseTo({ bounds, padding, trackResize: true });
 
   return null;
 }
+
+const emptyFeatureCollection: FeatureCollection = {
+  type: "FeatureCollection",
+  features: [],
+};