@macrostrat/column-views 2.3.3 → 2.4.1

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

@@ -1,55 +1,27 @@
-import { BaseUnit } from "@macrostrat/api-types";
-import h from "@macrostrat/hyper";
+import { BaseUnit, UnitLong } from "@macrostrat/api-types";
 import { useKeyHandler } from "@macrostrat/ui-components";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  ReactNode,
-  RefObject,
-  useRef,
-  useCallback,
-} from "react";
-import { createStore, StoreApi, useStore } from "zustand";
+import { useEffect, useRef, useCallback, useMemo } from "react";
 import type { RectBounds, IUnit } from "../units/types";
+import { atom } from "jotai";
+import { columnUnitsMapAtom, scope } from "./core";
+import { ColumnData } from "@macrostrat/column-views";
+import {
+  AgeRangeQuantifiedDifference,
+  ageRangeQuantifiedDifference,
+  AgeRangeRelationship,
+} from "@macrostrat/stratigraphy-utils";
 
 type UnitSelectDispatch = (
   unit: number | BaseUnit | null,
   target: HTMLElement | null,
-  event: Event | null,
 ) => void;
 
-const UnitSelectionContext = createContext<StoreApi<UnitSelectionStore>>(null);
-
 export function useUnitSelectionDispatch(): UnitSelectDispatch {
-  const store = useContext(UnitSelectionContext);
-  if (store == null) {
-    return () => {};
-  }
-  return useStore(store, (state) => state.onUnitSelected);
-}
-
-export function useUnitSelectionStore<T>(
-  selector: (state: UnitSelectionStore) => T,
-): T {
-  const store = useContext(UnitSelectionContext);
-  if (store == null) {
-    return null;
-  }
-  return useStore(store, selector);
+  return scope.useSetAtom(selectedUnitAtom);
 }
 
 export function useSelectedUnit() {
-  return useUnitSelectionStore((state) => state.selectedUnitData);
-}
-
-interface UnitSelectionStore {
-  selectedUnit: number | null;
-  selectedUnitData: BaseUnit | null;
-  overlayPosition: RectBounds | null;
-  onUnitSelected: UnitSelectDispatch;
-  setSelectedUnit: (unit: number | null) => void;
+  return scope.useAtomValue(selectedUnitAtom);
 }
 
 export interface ColumnClickData {
@@ -60,134 +32,141 @@ export interface ColumnClickData {
   // Room for boundary IDs eventually
 }
 
-export function UnitSelectionProvider<T extends BaseUnit>(props: {
-  children: ReactNode;
-  columnRef?: RefObject<HTMLElement>;
-  units: T[];
-  selectedUnit: number | null;
+export interface UnitSelectionCallbacks {
+  // It's sort of unfortunate that we need to pass in the column ref here
   onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;
-  onUnitSelected?: (unitID: number | null, unit: T | null) => void;
-}) {
-  const [store] = useState(() =>
-    createStore<UnitSelectionStore>((set) => ({
-      selectedUnit: null,
-      selectedUnitData: null,
-      overlayPosition: null,
-      setSelectedUnit(selectedUnit: number | null | BaseUnit) {
-        if (selectedUnit == null) {
-          set({ selectedUnit: null, selectedUnitData: null });
-          return;
-          // If it's a number, set the selected unit
-        } else if (typeof selectedUnit === "number") {
-          set({ selectedUnit, selectedUnitData: null });
-        } else if ("unit_id" in selectedUnit) {
-          set({
-            selectedUnit: selectedUnit.unit_id,
-            selectedUnitData: selectedUnit,
-          });
-        }
-      },
-      onUnitSelected: (
-        input: number | T | null,
-        target: HTMLElement = null,
-        event: PointerEvent = null,
-      ) => {
-        if (input == null) {
-          props.onUnitSelected?.(null, null);
-          return set({
-            selectedUnit: null,
-            selectedUnitData: null,
-            overlayPosition: null,
-          });
-        }
-
-        let unit: T | null = null;
-        if (typeof input === "number") {
-          unit = props.units.find((u) => u.unit_id === input) || null;
-        } else {
-          unit = input;
-        }
-
-        const el = props.columnRef?.current;
-        let overlayPosition = null;
-
-        /** This is not the natural place to get positions within the column,
-         * but it will work for now.
-         */
-        if (props.onClickedColumn) {
-          // Infer height from top and bottom height of unit (because that's passed back with the call)
-          //const py = event.y;
-          //const [bottom, top] = getUnitHeightRange(unit, axisType);
-          //const height = Math.abs(bottom - top);
-
-          /** Ideally this would be defined at the column level */
-          const columnClickData: ColumnClickData = {
-            unitID: unit?.unit_id,
-            unit,
-            target,
-            height: el?.getBoundingClientRect().height || 0,
-          };
-          props.onClickedColumn(columnClickData, event);
-        }
-
-        if (unit != null && el != null && target != null) {
-          const rect = el.getBoundingClientRect();
-          const targetRect = target.getBoundingClientRect();
-
-          overlayPosition = {
-            x: targetRect.left - rect.left,
-            y: targetRect.top - rect.top,
-            width: targetRect.width,
-            height: targetRect.height,
-          };
-        }
-        props.onUnitSelected?.(unit?.unit_id, unit);
-
-        return set({
-          selectedUnit: unit?.unit_id,
-          selectedUnitData: unit,
-          overlayPosition,
-        });
-      },
-    })),
-  );
+  onUnitSelected?: <T extends BaseUnit>(
+    unitID: number | null,
+    unit: T | null,
+  ) => void;
+}
 
-  const { units, selectedUnit } = props;
+export const allowUnitSelectionAtom = atom<boolean>(true);
 
-  useEffect(() => {
-    // Synchronize store with provided props
-    if (selectedUnit != null) {
-      const unitData = units?.find((u) => u.unit_id === selectedUnit);
-      store.setState({ selectedUnit, selectedUnitData: unitData });
-    } else {
-      store.setState({ selectedUnit: null, selectedUnitData: null });
+export const selectedUnitIDAtom = atom<number | null>();
+
+const overlayPositionAtom = atom<RectBounds | null>();
+
+const columnRefAtom = atom<{ current: HTMLElement | null }>({ current: null });
+
+export function useColumnRef() {
+  return scope.useAtomValue(columnRefAtom);
+}
+
+const selectedUnitAtom = atom(
+  (get) => {
+    if (!get(allowUnitSelectionAtom)) return null;
+
+    const unitID = get(selectedUnitIDAtom);
+    if (unitID == null) return null;
+    const unitsMap = get(columnUnitsMapAtom);
+    return unitsMap?.get(unitID) || null;
+  },
+  (
+    get,
+    set,
+    selectedUnit: number | BaseUnit | null,
+    target: HTMLElement | null = null,
+  ): BaseUnit | null => {
+    if (!get(allowUnitSelectionAtom)) {
+      throw new Error("Unit selection is disabled.");
     }
-  }, [selectedUnit, units]);
 
-  return h(UnitSelectionContext.Provider, { value: store }, props.children);
+    let unitID: number | null;
+    let unit: BaseUnit | null = null;
+    if (selectedUnit == null) {
+      unitID = null;
+    } else if (typeof selectedUnit === "number") {
+      unitID = selectedUnit;
+    } else if ("unit_id" in selectedUnit) {
+      unitID = selectedUnit.unit_id;
+    }
+
+    if (unitID != null) {
+      // Verify that the unit exists in the current colum, else throw
+      const unitsMap = get(columnUnitsMapAtom);
+      if (!unitsMap?.has(unitID)) {
+        throw new Error(
+          `Unit with ID ${unitID} not found in current column units.`,
+        );
+      }
+      unit = unitsMap.get(unitID) ?? null;
+    }
+
+    let overlayPosition: RectBounds | null = null;
+
+    const columnEl = get(columnRefAtom)?.current;
+
+    if (unit != null && columnEl != null && target != null) {
+      const rect = columnEl.getBoundingClientRect();
+      const targetRect = target.getBoundingClientRect();
+      overlayPosition = {
+        x: targetRect.left - rect.left,
+        y: targetRect.top - rect.top,
+        width: targetRect.width,
+        height: targetRect.height,
+      };
+    }
+
+    set(selectedUnitIDAtom, unitID);
+    set(overlayPositionAtom, overlayPosition);
+
+    return unit;
+  },
+);
+
+export function useAtomOverlayPosition() {
+  return scope.useAtomValue(overlayPositionAtom);
 }
 
+export function UnitSelectionCallbackManager({
+  onUnitSelected,
+}: UnitSelectionCallbacks) {
+  const selectedUnit = scope.useAtomValue(selectedUnitAtom);
+  useEffect(() => {
+    onUnitSelected?.(selectedUnit?.unit_id ?? null, selectedUnit ?? null);
+  }, [selectedUnit?.unit_id]);
+  return null;
+}
+
+/** TODO: figure out if onClickedColumn is still needed
+ /** This is not the natural place to get positions within the column,
+ * but it will work for now.
+if (props.onClickedColumn) {
+  // Infer height from top and bottom height of unit (because that's passed back with the call)
+  //const py = event.y;
+  //const [bottom, top] = getUnitHeightRange(unit, axisType);
+  //const height = Math.abs(bottom - top);
+
+  const columnClickData: ColumnClickData = {
+    unitID: unit?.unit_id,
+    unit,
+    target,
+    height: el?.getBoundingClientRect().height || 0,
+  };
+  props.onClickedColumn(columnClickData, event);
+}*/
+
 export function useUnitSelectionTarget(
   unit: IUnit,
 ): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
   const ref = useRef<HTMLElement>();
   const selectedUnit = useSelectedUnit();
-  const onSelectUnit = useUnitSelectionStore((state) => state.onUnitSelected);
+  const selectUnit = useUnitSelectionDispatch();
   const selected = selectedUnit?.unit_id == unit.unit_id;
 
   const onClick = useCallback(
     (evt: Event) => {
-      if (onSelectUnit == null) return;
-      onSelectUnit(unit, ref.current, evt);
+      selectUnit?.(unit, ref.current);
       evt.stopPropagation();
     },
-    [unit, onSelectUnit],
+    [unit, selectUnit],
   );
 
   useEffect(() => {
-    if (!selected || onSelectUnit == null) return;
+    if (!selected || selectUnit == null) return;
     // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
-    onSelectUnit(unit, ref.current, null);
+    selectUnit(unit, ref.current);
 
     // Scroll the unit into view
     ref.current?.scrollIntoView({
@@ -195,34 +174,161 @@ export function useUnitSelectionTarget(
       block: "center",
       inline: "nearest",
     });
-  }, [selected, onSelectUnit]);
+  }, [selected, selectUnit]);
 
   return [ref, selected, onClick];
 }
 
-export function UnitKeyboardNavigation<T extends BaseUnit>({
+export function UnitKeyboardNavigation({
+  columnData,
   units,
+  allowHorizontalNavigation,
 }: {
-  units: T[];
+  columnData?: ColumnData[];
+  units?: UnitLong[];
+  allowHorizontalNavigation?: boolean;
 }) {
-  const selectedUnit = useSelectedUnit();
-  const selectUnit = useUnitSelectionDispatch();
+  if (units == null && columnData == null) {
+    throw new Error("Either units or columnData must be provided.");
+  }
+
+  let _columnData: ColumnData[] = useMemo(() => {
+    if (columnData != null) return columnData;
+    // Build column data from units
+    const colMap = new Map<number, UnitLong[]>();
+    for (const unit of units!) {
+      if (!colMap.has(unit.col_id)) {
+        colMap.set(unit.col_id, []);
+      }
+      colMap.get(unit.col_id)!.push(unit);
+    }
+    const cols: ColumnData[] = [];
+    for (const [colID, units] of colMap) {
+      cols.push({ columnID: colID, units });
+    }
+    // Sort columns by columnID
+    cols.sort((a, b) => a.columnID - b.columnID);
+    return cols;
+  }, [columnData, units]);
 
-  const ix = units.findIndex((unit) => unit.unit_id === selectedUnit?.unit_id);
+  // Default to allowing horizontal navigation only if columnData is provided
+  const _allowHorizontalNavigation =
+    allowHorizontalNavigation ?? columnData != null;
 
-  const keyMap = {
-    38: ix - 1,
-    40: ix + 1,
+  const selectedUnit = useSelectedUnit() as UnitLong | null;
+  const selectUnit = useUnitSelectionDispatch();
+
+  const keyMap: Record<number, Direction> = {
+    38: "up",
+    40: "down",
   };
+  if (_allowHorizontalNavigation) {
+    keyMap[37] = "left";
+    keyMap[39] = "right";
+  }
 
   useKeyHandler(
     (event) => {
-      const nextIx = keyMap[event.keyCode];
-      if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;
-      selectUnit(units[nextIx], null, null);
+      const direction = keyMap[event.keyCode];
+      if (direction == null) return;
+      const nextUnit = getBestUnit(_columnData, selectedUnit, direction);
+      if (nextUnit == null) return;
+      selectUnit(nextUnit, null);
       event.stopPropagation();
     },
-    [units, ix],
+    [_columnData, selectedUnit],
+  );
+  return null;
+}
+
+type Direction = "up" | "down" | "left" | "right";
+
+function getBestUnit(
+  columnData: ColumnData[],
+  targetUnit: UnitLong,
+  direction: Direction,
+): UnitLong | null {
+  const thisColIndex = columnData.findIndex(
+    (col) => col.columnID === targetUnit.col_id,
   );
+  if (thisColIndex === -1) return null;
+
+  // If up or down, stay in the same column
+  if (direction === "up" || direction === "down") {
+    const units = columnData[thisColIndex].units;
+    const ix = units.findIndex((unit) => unit.unit_id === targetUnit.unit_id);
+    if (ix === -1) return null;
+    if (direction === "up") {
+      return units[ix - 1] || null;
+    } else {
+      return units[ix + 1] || null;
+    }
+  }
+
+  // If left or right, move to adjacent column
+  let adjacentColIndex: number;
+  if (direction === "left") {
+    adjacentColIndex =
+      (thisColIndex - 1 + columnData.length) % columnData.length;
+  } else {
+    adjacentColIndex = (thisColIndex + 1) % columnData.length;
+  }
+
+  const adjacentColUnits = columnData[adjacentColIndex].units;
+  return getMostOverlappingUnit(targetUnit, adjacentColUnits);
+}
+
+type UnitAgeRangeRelationship = AgeRangeQuantifiedDifference & {
+  unit: UnitLong;
+};
+
+function getMostOverlappingUnit(
+  targetUnit: UnitLong,
+  candidateUnits: UnitLong[],
+): UnitLong | null {
+  const targetAgeRange = [targetUnit.b_age, targetUnit.t_age];
+
+  const overlaps: UnitAgeRangeRelationship[] = [];
+  for (const candidate of candidateUnits) {
+    const candidateAgeRange = [candidate.b_age, candidate.t_age];
+
+    const rel = ageRangeQuantifiedDifference(targetAgeRange, candidateAgeRange);
+    if (rel.type === AgeRangeRelationship.Identical) {
+      return candidate;
+    }
+    overlaps.push({ ...rel, unit: candidate });
+  }
+
+  let bestOverlaps = overlaps.filter(
+    (d) => d.type === AgeRangeRelationship.Containing,
+  );
+  bestOverlaps.sort((a, b) => b.overlap - a.overlap);
+  if (bestOverlaps.length > 0) {
+    return bestOverlaps[0].unit;
+  }
+
+  bestOverlaps = overlaps.filter(
+    (d) => d.type === AgeRangeRelationship.Contained,
+  );
+  bestOverlaps.sort((a, b) => b.overlap - a.overlap);
+  if (bestOverlaps.length > 0) {
+    return bestOverlaps[0].unit;
+  }
+
+  bestOverlaps = overlaps.filter(
+    (d) => d.type === AgeRangeRelationship.PartialOverlap,
+  );
+  bestOverlaps.sort((a, b) => b.overlap - a.overlap);
+  if (bestOverlaps.length > 0) {
+    return bestOverlaps[0].unit;
+  }
+
+  bestOverlaps = overlaps.filter(
+    (d) => d.type === AgeRangeRelationship.Disjoint,
+  );
+  bestOverlaps.sort((a, b) => a.distance - b.distance);
+  if (bestOverlaps.length > 0) {
+    return bestOverlaps[0].unit;
+  }
   return null;
 }

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

@@ -21,7 +21,7 @@ export interface CorrelationMapProps extends InsetMapProps {
 }
 
 export function ColumnCorrelationMap(props: CorrelationMapProps) {
-  const { padding = 50, children, columnColor, ...rest } = props;
+  const { padding = 50, children, columnColor, projectID, ...rest } = props;
 
   const overlayStyles: Partial<Style>[] = useMemo(() => {
     return [

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

@@ -16,6 +16,8 @@ import {
 import h from "@macrostrat/hyper";
 import { createComputed } from "zustand-computed";
 import { useMacrostratColumns } from "../../data-provider/base";
+import { buffer } from "@turf/buffer";
+import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
 
 export interface CorrelationMapInput {
   columns: ColumnGeoJSONRecord[];
@@ -65,6 +67,7 @@ export function ColumnCorrelationProvider({
       computed((set, get): CorrelationMapStore => {
         return {
           focusedLine,
+          projectID,
           columns: null,
           onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {
             const state = get();
@@ -139,7 +142,17 @@ function computeIntersectingColumns(
     return [];
   }
 
-  return columns.filter((col) => {
+  /** eODP-focused process. Find buffers around line and then find columns intersecting that buffer */
+  const bufferedLine = buffer(line, 1, { units: "degrees" });
+
+  const nearbyPoints = columns.filter((col) => {
+    if (col.geometry?.type != "Point") {
+      return false;
+    }
+    return booleanPointInPolygon(col.geometry, bufferedLine);
+  });
+
+  const intersectingPolygons = columns.filter((col) => {
     const poly = col.geometry;
 
     // Some in-process datasets seem to have null geometries
@@ -149,6 +162,8 @@ function computeIntersectingColumns(
     const intersection = lineIntersect(line, poly);
     return intersection.features.length > 0;
   });
+
+  return [...intersectingPolygons, ...nearbyPoints];
 }
 
 interface FocusedColumnGeoJSONRecord extends ColumnGeoJSONRecord {

package/src/unit-details/panel.ts

@@ -16,6 +16,7 @@ import {
 } from "@macrostrat/data-components";
 import {
   useColumnUnitsMap,
+  useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
 } from "../data-provider";
@@ -25,13 +26,24 @@ import type {
   UnitLongFull,
   Lithology,
   Interval,
-  StratUnit,
 } from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
 
 const h = hyper.styled(styles);
 
+export interface UnitDetailsPanelProps {
+  unit: any;
+  onClose?: any;
+  className?: string;
+  actions?: ReactNode;
+  hiddenActions?: ReactNode;
+  features?: Set<UnitDetailsFeature>;
+  lithologyFeatures?: Set<LithologyTagFeature>;
+  onSelectUnit?: (unitID: number) => void;
+  onClickItem?: MacrostratItemClickHandler;
+}
+
 export function UnitDetailsPanel({
   unit,
   onClose,
@@ -46,21 +58,8 @@ export function UnitDetailsPanel({
   actions,
   hiddenActions = null,
   onSelectUnit,
-  columnUnits,
   onClickItem,
-}: {
-  unit: any;
-  onClose?: any;
-  showLithologyProportions?: boolean;
-  className?: string;
-  actions?: ReactNode;
-  hiddenActions?: ReactNode;
-  features?: Set<UnitDetailsFeature>;
-  lithologyFeatures?: Set<LithologyTagFeature>;
-  columnUnits?: UnitLong[];
-  onSelectUnit?: (unitID: number) => void;
-  onClickItem?: MacrostratItemClickHandler;
-}) {
+}: UnitDetailsPanelProps) {
   const [showJSON, setShowJSON] = useState(false);
 
   let content = null;
@@ -148,6 +147,7 @@ export enum UnitDetailsFeature {
   OutcropType = "outcrop-type",
   JSONToggle = "json-toggle",
   DepthRange = "depth-range",
+  ColumnName = "column-name",
 }
 
 export type MacrostratItemClickHandler = (
@@ -163,7 +163,6 @@ export type MacrostratItemClickHandler = (
 function UnitDetailsContent({
   unit,
   onSelectUnit,
-  columnUnits,
   lithologyFeatures = new Set([
     LithologyTagFeature.Proportion,
     LithologyTagFeature.Attributes,
@@ -177,7 +176,6 @@ function UnitDetailsContent({
 }: {
   unit: UnitLong;
   onSelectUnit?: (unitID: number) => void;
-  columnUnits?: UnitLong[];
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
   onClickItem?: MacrostratItemClickHandler;
@@ -189,15 +187,6 @@ function UnitDetailsContent({
   const environments = enhanceEnvironments(unit.environ, envMap);
   const lithologies = enhanceLithologies(unit.lith ?? [], lithMap);
 
-  // Create a lookup table of units if provided
-  const columnUnitsMap = useMemo(() => {
-    const map = new Map<number, UnitLong>();
-    for (const colUnit of columnUnits ?? []) {
-      map.set(colUnit.unit_id, colUnit);
-    }
-    return map;
-  }, [columnUnits]);
-
   let outcropField = null;
   if (features.has(UnitDetailsFeature.OutcropType)) {
     // Determine outcrop type
@@ -250,6 +239,9 @@ function UnitDetailsContent({
   }
 
   return h("div.unit-details-content", [
+    h.if(features.has(UnitDetailsFeature.ColumnName))(ColumnNameField, {
+      col_id: unit.col_id,
+    }),
     thicknessOrHeightRange,
     h(LithologyList, {
       label: "Lithology",
@@ -299,6 +291,32 @@ function UnitDetailsContent({
   ]);
 }
 
+function ColumnNameField({
+  col_id,
+  showIdentifier = false,
+}: {
+  col_id: number;
+  showIdentifier?: boolean;
+}) {
+  const colData = useMacrostratColumnInfo(col_id);
+  let inner: any = h(Identifier, { id: col_id });
+  const name = colData?.col_name;
+  if (name != null) {
+    inner = h("span.value", [
+      h("span.col-name", name),
+      h.if(showIdentifier)([" ", h(Parenthetical, inner)]),
+    ]);
+  }
+
+  return h(
+    DataField,
+    {
+      label: "Column",
+    },
+    inner,
+  );
+}
+
 export function ReferencesField({ refs, className = null, ...rest }) {
   if (refs == null || refs.length === 0) {
     return null;