@macrostrat/column-views 3.6.1 → 3.9.0

package/src/data-provider/store.ts

@@ -118,6 +118,11 @@ export interface MacrostratColumnDataContext<T extends BaseUnit> {
   totalHeight?: number;
   axisType?: ColumnAxisType;
   allowUnitSelection?: boolean;
+  /** True while the age window is animating; propagated to each section's
+   * `ColumnProvider` so per-frame label/pattern work can be skipped. */
+  isTransitioning?: boolean;
+  /** Hide unit labels while transitioning (perf escape hatch; default false). */
+  hideLabelsWhileTransitioning?: boolean;
 }
 
 export interface ColumnDataProviderProps<T extends BaseUnit>
@@ -138,6 +143,8 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
   allowUnitSelection,
   onUnitSelected,
   selectedUnit,
+  isTransitioning,
+  hideLabelsWhileTransitioning,
   ref,
 }: ColumnDataProviderProps<T>) {
   /** Internal provider for Macrostrat column data.
@@ -158,8 +165,17 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
       sections,
       totalHeight,
       axisType,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
     };
-  }, [units, sections, totalHeight, axisType]);
+  }, [
+    units,
+    sections,
+    totalHeight,
+    axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
+  ]);
 
   return h(
     MacrostratColumnStateProvider,
@@ -242,7 +258,8 @@ export function MacrostratColumnProvider(props) {
    * generic concepts to Macrostrat-specific ones.
    */
 
-  const { axisType } = useMacrostratColumnData();
+  const { axisType, isTransitioning, hideLabelsWhileTransitioning } =
+    useMacrostratColumnData();
   const { units, domain, pixelScale, scale, children } = props;
   return h(
     ColumnProvider,
@@ -252,6 +269,8 @@ export function MacrostratColumnProvider(props) {
       range: domain,
       pixelsPerMeter: pixelScale,
       scale,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
     },
     children,
   );

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/index.ts

@@ -2,6 +2,7 @@ export * from "./units";
 export * from "./data-provider";
 export * from "./age-axis";
 export * from "./prepare-units";
+export * from "./animated-age-window";
 export * from "./column";
 export * from "./unit-details";
 export * from "./maps";

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: [],
+};

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

@@ -19,13 +19,34 @@ import { useMacrostratColumns } from "@macrostrat/data-provider";
 import { buffer } from "@turf/buffer";
 import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
 
+export type CorrelationSelectionMode = "line" | "manual";
+
 export interface CorrelationMapInput {
   columns: ColumnGeoJSONRecord[];
   focusedLine: LineString | null;
+  /** When set, columns are selected manually (by clicking) in this order,
+   * rather than derived from a line of section. */
+  manualColumns?: number[] | null;
 }
 
 export interface CorrelationMapStore extends CorrelationMapInput {
   onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;
+  /** Toggle a column in/out of the manual selection (used in "manual" mode) */
+  toggleColumn: (colID: number) => void;
+  /** Remove a column from the selection. In "line" mode this converts the
+   * current selection to a manual one (a line can't represent an arbitrary
+   * subset), so removing a column switches modes. */
+  removeColumn: (colID: number) => void;
+  /** Replace the manual column selection with an explicit ordered list (used
+   * e.g. for drag-and-drop reordering). Switches to manual mode. */
+  setManualColumns: (colIDs: number[]) => void;
+  setHoveredColumn: (colID: number | null) => void;
+  hoveredColumn: number | null;
+  /** Request the map to frame a particular column (e.g. on header click). */
+  zoomToColumn: (colID: number | null) => void;
+  zoomColumn: number | null;
+  /** Incremented on each zoom request so repeat clicks re-frame the column. */
+  zoomNonce: number;
   projectID?: number;
 }
 
@@ -45,13 +66,19 @@ const CorrelationStoreContext =
 
 type ComputedStore = {
   focusedColumns: FocusedColumnGeoJSONRecord[];
+  selectionMode: CorrelationSelectionMode;
 };
 
 /** A computed store that will automatically update when the state changes */
 const computed = createComputed((state: CorrelationMapStore): ComputedStore => {
+  const manual = state.manualColumns != null;
   return {
-    // We compute the focused columns based on columns and focusedLine
-    focusedColumns: buildCorrelationColumns(state.columns, state.focusedLine),
+    selectionMode: manual ? "manual" : "line",
+    // Focused columns are derived either from an explicit manual selection or
+    // from the columns intersecting the line of section.
+    focusedColumns: manual
+      ? buildManualColumns(state.columns, state.manualColumns)
+      : buildCorrelationColumns(state.columns, state.focusedLine),
   };
 }) as any;
 
@@ -61,6 +88,7 @@ export function ColumnCorrelationProvider({
   projectID,
   inProcess,
   focusedLine,
+  manualColumns = null,
   onSelectColumns,
 }: CorrelationProviderProps) {
   const [store] = useState(() => {
@@ -68,10 +96,16 @@ export function ColumnCorrelationProvider({
       computed((set, get): CorrelationMapStore => {
         return {
           focusedLine,
+          manualColumns,
+          hoveredColumn: null,
+          zoomColumn: null,
+          zoomNonce: 0,
           projectID,
           columns: null,
           onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {
             const state = get();
+            // In manual-selection mode the map click is handled per-column
+            if (state.manualColumns != null) return;
             // Check if shift key is pressed
             const shiftKeyPressed = event.originalEvent.shiftKey;
             let existingCoords = state.focusedLine?.coordinates ?? [];
@@ -87,6 +121,36 @@ export function ColumnCorrelationProvider({
               },
             });
           },
+          toggleColumn(colID: number) {
+            const state = get();
+            const current =
+              state.manualColumns ??
+              state.focusedColumns.map((d) => d.properties.col_id);
+            const next = current.includes(colID)
+              ? current.filter((d) => d !== colID)
+              : [...current, colID];
+            set({ manualColumns: next, focusedLine: null });
+          },
+          removeColumn(colID: number) {
+            const state = get();
+            // Seed from the current selection (line-derived or manual)
+            const current =
+              state.manualColumns ??
+              state.focusedColumns.map((d) => d.properties.col_id);
+            set({
+              manualColumns: current.filter((d) => d !== colID),
+              focusedLine: null,
+            });
+          },
+          setManualColumns(colIDs: number[]) {
+            set({ manualColumns: colIDs, focusedLine: null });
+          },
+          setHoveredColumn(colID: number | null) {
+            set({ hoveredColumn: colID });
+          },
+          zoomToColumn(colID: number | null) {
+            set({ zoomColumn: colID, zoomNonce: get().zoomNonce + 1 });
+          },
         };
       }),
     );
@@ -122,6 +186,24 @@ export function useCorrelationMapStore(
   return useStore(storeApi, selector);
 }
 
+export interface ColumnMapLink {
+  onColumnMouseOver: (colID: number | null) => void;
+  onColumnClick: (colID: number) => void;
+}
+
+/** Wire a correlation chart's column-level events to the correlation map:
+ * hovering a column highlights it on the map, and clicking a column header
+ * frames it. Spread the result into `CorrelationChart`. Must be used within a
+ * `ColumnCorrelationProvider`. */
+export function useColumnMapLink(): ColumnMapLink {
+  const setHoveredColumn = useCorrelationMapStore((s) => s.setHoveredColumn);
+  const zoomToColumn = useCorrelationMapStore((s) => s.zoomToColumn);
+  return {
+    onColumnMouseOver: setHoveredColumn,
+    onColumnClick: zoomToColumn,
+  };
+}
+
 function buildCorrelationColumns(
   columns: ColumnGeoJSONRecord[],
   line: LineString,
@@ -135,6 +217,32 @@ function buildCorrelationColumns(
   );
 }
 
+function buildManualColumns(
+  columns: ColumnGeoJSONRecord[],
+  ids: number[],
+): FocusedColumnGeoJSONRecord[] {
+  /** Build focused columns from an explicit, ordered list of column IDs. The
+   * ordering line simply connects them in the order they were selected. */
+  if (columns == null || ids == null) return [];
+  const byID = new Map(columns.map((c) => [c.properties.col_id, c]));
+  const result: FocusedColumnGeoJSONRecord[] = [];
+  ids.forEach((id, i) => {
+    const col = byID.get(id);
+    if (col == null) return;
+    const c = centroid(col.geometry);
+    result.push({
+      ...col,
+      properties: {
+        ...col.properties,
+        centroid: c,
+        nearestPointOnLine: c,
+        distanceAlongLine: i,
+      },
+    });
+  });
+  return result;
+}
+
 function computeIntersectingColumns(
   columns: ColumnGeoJSONRecord[],
   line: LineString,

package/src/maps/layers/columns.ts

@@ -75,7 +75,13 @@ export function buildColumnsStyle(
     opts.selectedColor ?? getCSSVariable("--selection-color", "purple");
 
   const lineColor = opts.lineColor ?? columnBaseColor;
-  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  // Highlight on either direct map hover or an externally-driven highlight
+  // (e.g. hovering the corresponding column header elsewhere in the UI).
+  const isHovered = [
+    "any",
+    ["boolean", ["feature-state", "hover"], false],
+    ["boolean", ["feature-state", "highlighted"], false],
+  ];
   // If color is in the feature state or geojson properties, use that as second choice
   if (typeof columnColor === "string") {
     columnColor = [