@macrostrat/column-views 2.3.3 → 2.4.1

package/src/column.ts

@@ -8,8 +8,6 @@ import {
 } from "@macrostrat/ui-components";
 import classNames from "classnames";
 import {
-  RefObject,
-  useRef,
   HTMLAttributes,
   useCallback,
   CSSProperties,
@@ -18,8 +16,8 @@ import {
 import styles from "./column.module.sass";
 import { UnitComponent } from "./units";
 import {
-  UnitSelectionProvider,
   UnitKeyboardNavigation,
+  useColumnRef,
   useUnitSelectionDispatch,
 } from "./data-provider";
 
@@ -111,14 +109,12 @@ export function Column(props: ColumnProps) {
     minPixelScale = 0.2,
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
-    allowUnitSelection,
+    allowUnitSelection = false,
     hybridScale,
     scale,
     axisType,
     ...rest
   } = props;
-  const ref = useRef<HTMLElement>();
-  // Selected item position
 
   /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies
    * standardization of scales in all sections */
@@ -172,46 +168,26 @@ export function Column(props: ColumnProps) {
     );
   }
 
-  let main: any = h(
-    ColumnInner,
-    { columnRef: ref, ageAxisComponent, ...rest },
-    [
+  return h(
+    MacrostratColumnDataProvider,
+    {
+      units,
+      sections,
+      totalHeight,
+      axisType: _axisType,
+      allowUnitSelection: showUnitPopover || allowUnitSelection,
+      onUnitSelected,
+      selectedUnit,
+    },
+    h(ColumnInner, { ageAxisComponent, ...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: _axisType },
-    main,
+    ]),
   );
 }
 
 interface ColumnInnerProps extends BaseColumnProps {
-  columnRef: RefObject<HTMLElement>;
   ageAxisComponent?: ComponentType;
 }
 
@@ -234,7 +210,6 @@ function ColumnInner(props: ColumnInnerProps) {
     columnWidth: _columnWidth = 150,
     showLabelColumn: _showLabelColumn = true,
     className,
-    columnRef,
     clipUnits = false,
     children,
     showTimescale,
@@ -246,6 +221,8 @@ function ColumnInner(props: ColumnInnerProps) {
 
   const { axisType } = useMacrostratColumnData();
 
+  const columnRef = useColumnRef();
+
   // Coalesce unconformity label setting to a boolean
   let _timescaleUnconformityLabels = false;
   let _sectionUnconformityLabels = false;
@@ -314,7 +291,7 @@ function useMouseEventHandlers(
   const dispatch = useUnitSelectionDispatch();
   const onClick = useCallback(
     (evt) => {
-      dispatch?.(null, null, evt as any);
+      dispatch?.(null, null);
     },
     [dispatch],
   );

package/src/correlation-chart/main.ts

@@ -2,12 +2,13 @@
 import {
   UnitSelectionProvider,
   UnitKeyboardNavigation,
-  useUnitSelectionStore,
+  useUnitSelectionDispatch,
+  useColumnRef,
 } from "../data-provider";
-import { UnitSelectionPopover } from "../unit-details";
+import { UnitDetailsFeature, UnitSelectionPopover } from "../unit-details";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import { useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { CompositeTimescaleCore } from "../section";
 import classNames from "classnames";
@@ -49,6 +50,18 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
 }
 
+function MainChartArea({ children }) {
+  const columnRef = useColumnRef();
+  return h("div.main-chart", { ref: columnRef }, children);
+}
+
+const unitPopoverFeatures = new Set([
+  UnitDetailsFeature.AdjacentUnits,
+  UnitDetailsFeature.OutcropType,
+  UnitDetailsFeature.DepthRange,
+  UnitDetailsFeature.ColumnName,
+]);
+
 export function CorrelationChart({
   data,
   columnSpacing = 0,
@@ -75,8 +88,6 @@ export function CorrelationChart({
     });
   }, [data, ...Object.values(scaleProps)]);
 
-  const columnRef = useRef(null);
-
   // A flattened units array is used to support keyboard navigation
   const units = useMemo(() => {
     return data?.map((d0) => d0.units).flat() ?? [];
@@ -101,14 +112,14 @@ export function CorrelationChart({
     { className: "correlation-diagram" },
     h(
       UnitSelectionProvider,
-      { columnRef, selectedUnit, onUnitSelected, units },
+      { selectedUnit, onUnitSelected, units },
       h(ChartArea, [
         h(TimescaleColumn, {
           key: "timescale",
           scaleInfo,
           unconformityLabels,
         }),
-        h("div.main-chart", { ref: columnRef }, [
+        h(MainChartArea, [
           h(
             SVG,
             {
@@ -133,9 +144,11 @@ export function CorrelationChart({
               });
             }),
           ),
-          h.if(showUnitPopover)(UnitSelectionPopover),
+          h.if(showUnitPopover)(UnitSelectionPopover, {
+            features: unitPopoverFeatures,
+          }),
           // Navigation only works within a column for now...
-          h(UnitKeyboardNavigation, { units }),
+          h(UnitKeyboardNavigation, { columnData: data }),
         ]),
       ]),
     ),
@@ -296,15 +309,13 @@ function StratColSpan({
 }
 
 function ChartArea({ children }) {
-  const setSelectedUnit = useUnitSelectionStore(
-    (state) => state.setSelectedUnit,
-  );
+  const setSelectedUnit = useUnitSelectionDispatch();
 
   return h(
     "div.correlation-chart-inner",
     {
       onClick() {
-        setSelectedUnit(null);
+        setSelectedUnit(null, null);
       },
     },
     children,

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

@@ -6,8 +6,11 @@ import {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
   fetchUnits,
+  MacrostratDataProvider,
   MergeSectionsMode,
   useCorrelationMapStore,
+  useMacrostratBaseURL,
+  useMacrostratFetch,
 } from "../..";
 import { hyperStyled } from "@macrostrat/hyper";
 
@@ -35,30 +38,37 @@ function CorrelationStoryUI({
   ...rest
 }: any) {
   return h(
-    ColumnCorrelationProvider,
-    {
-      focusedLine,
-      columns: null,
-      onSelectColumns(cols, line) {
-        setFocusedLine(line);
+    MacrostratDataProvider,
+    { baseURL: "https://dev.macrostrat.org/api/v2" },
+    h(
+      ColumnCorrelationProvider,
+      {
+        focusedLine,
+        columns: null,
+        projectID,
+        onSelectColumns(cols, line) {
+          setFocusedLine(line);
+        },
       },
-    },
-    h("div.correlation-ui", [
-      h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
-      h("div.right-column", [
-        h(ColumnCorrelationMap, {
-          accessToken: mapboxToken,
-          className: "correlation-map",
-          //showLogo: false,
-        }),
+      h("div.correlation-ui", [
+        h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
+        h("div.right-column", [
+          h(ColumnCorrelationMap, {
+            accessToken: mapboxToken,
+            className: "correlation-map",
+            //showLogo: false,
+          }),
+        ]),
       ]),
-    ]),
+    ),
   );
 }
 
 function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
   /** This state management is a bit too complicated, but it does kinda sorta work */
 
+  const fetch = useMacrostratFetch();
+
   // Sync focused columns with map
   const focusedColumns = useCorrelationMapStore(
     (state) => state.focusedColumns,
@@ -66,7 +76,7 @@ function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
 
   const columnUnits = useAsyncMemo(async () => {
     const col_ids = focusedColumns.map((col) => col.properties.col_id);
-    return await fetchUnits(col_ids);
+    return await fetchUnits(col_ids, fetch);
   }, [focusedColumns]);
 
   return h("div.correlation-diagram", [
@@ -161,6 +171,11 @@ export default {
         type: "number",
       },
     },
+    projectID: {
+      control: {
+        type: "number",
+      },
+    },
   },
 } as Meta<typeof CorrelationStoryUI>;
 
@@ -221,3 +236,9 @@ WithPowerScaleMerged.args = {
   scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
   mergeSections: MergeSectionsMode.ALL,
 };
+
+export const eODPCorrelationChart = Template.bind({});
+eODPCorrelationChart.args = {
+  focusedLine: "-125,38 -120,32",
+  projectID: 3,
+};

package/src/data-provider/base.ts

@@ -288,6 +288,14 @@ export function useMacrostratBaseURL(
   return ctx.getState().baseURL;
 }
 
+export function useMacrostratFetch() {
+  const ctx = useContext(MacrostratDataProviderContext);
+  if (ctx == null) {
+    throw new Error("Missing MacrostratDataProvider");
+  }
+  return ctx.getState().fetch;
+}
+
 type DataTypeKey =
   | "lithologies"
   | "intervals"
@@ -345,6 +353,20 @@ export function useMacrostratColumns(
   }, [colData, inProcess]);
 }
 
+export function useMacrostratColumnInfo(
+  columnID: number,
+): ColumnGeoJSONRecord["properties"] | null {
+  /** Get basic info for a column, without automatically fetching it (assumes the overall set of relevant columns has already been fetched) */
+  const columnsMap = useMacrostratStore((s) => s.columnFootprints);
+  return useMemo(() => {
+    for (const colData of columnsMap.values()) {
+      const col = colData.columns.find((d) => d.properties.col_id === columnID);
+      if (col != null) return col.properties;
+    }
+    return null;
+  }, [columnsMap, columnID]);
+}
+
 export function useMacrostratData(dataType: DataTypeKey, ...args: any[]) {
   const selector = dataTypeMapping[dataType];
   const operator = useMacrostratStore(selector);

package/src/data-provider/core.ts

@@ -0,0 +1,89 @@
+import { atom, type WritableAtom } from "jotai";
+import { createIsolation } from "jotai-scope";
+import { BaseUnit } from "@macrostrat/api-types";
+import { ReactNode, useEffect, useRef } from "react";
+import h from "@macrostrat/hyper";
+
+interface StateIsolation {
+  Provider: (props: {
+    store?: any;
+    initialValues?: AtomMap;
+    children: ReactNode;
+  }) => ReactNode;
+  useStore: () => any;
+  useAtom: any;
+  useAtomValue: any;
+  useSetAtom: any;
+}
+
+export const scope: StateIsolation = createIsolation();
+
+export type AtomMap = [WritableAtom<any, any, any>, any][];
+
+type ProviderProps = {
+  children: ReactNode;
+  atoms?: AtomMap;
+  shouldUpdateAtoms?: boolean;
+};
+
+export function ScopedProvider({
+  children,
+  atoms,
+  shouldUpdateAtoms = true,
+}: ProviderProps) {
+  // Always use the same store instance in this tree
+  let val = null;
+  try {
+    val = scope.useStore();
+    // This store has already been provided
+    return children;
+  } catch {
+    return h(scope.Provider, { store: null, initialValues: atoms }, [
+      h.if(shouldUpdateAtoms)(AtomUpdater, { atoms }),
+      children,
+    ]);
+  }
+}
+
+function AtomUpdater({
+  atoms,
+}: {
+  atoms: [WritableAtom<any, any, any>, any][];
+}) {
+  /**
+   * A generic updater to sync Jotai atoms with state passed as props.
+   * Useful for scoped providers where state needs to be synced outside
+   * the current context.
+   */
+  /** TODO: this is an awkward way to keep atoms updated */
+  // The scoped store
+  const store = scope.useStore();
+
+  // Warn on atoms changing length
+  const prevLengthRef = useRef(atoms.length);
+  useEffect(() => {
+    if (prevLengthRef.current !== atoms.length) {
+      console.error("Error: number of atoms in ScopedAtomUpdater has changed.");
+      prevLengthRef.current = atoms.length;
+    }
+  }, [atoms.length]);
+
+  for (const [atom, value] of atoms) {
+    useEffect(() => {
+      store.set(atom, value);
+    }, [store, value]);
+  }
+  return null;
+}
+
+export const columnUnitsAtom = atom<BaseUnit[]>();
+
+export const columnUnitsMapAtom = atom<Map<number, BaseUnit> | null>((get) => {
+  const units = get(columnUnitsAtom);
+  if (!units) return null;
+  const unitMap = new Map<number, BaseUnit>();
+  units.forEach((unit) => {
+    unitMap.set(unit.unit_id, unit);
+  });
+  return unitMap;
+});

package/src/data-provider/fetch.ts

@@ -3,7 +3,6 @@ import {
   ColumnGeoJSONRecordWithID,
   MacrostratRef,
   StratName,
-  StratUnit,
   UnitLong,
 } from "@macrostrat/api-types";
 import {
@@ -14,16 +13,15 @@ import {
 import crossFetch from "cross-fetch";
 import { feature } from "topojson-client";
 import { geoArea } from "d3-geo";
-import _ from "underscore";
 
-function defaultFetch(
-  url: string,
-  options: RequestInit | undefined = undefined,
-) {
-  const baseURL = "https://macrostrat.org/api/v2";
-  return crossFetch(baseURL + url, options);
+function createScopedFetch(baseURL: string) {
+  return function (url: string, options: RequestInit | undefined = undefined) {
+    return crossFetch(baseURL + url, options);
+  };
 }
 
+const defaultFetch = createScopedFetch("https://macrostrat.org/api/v2");
+
 export type ColumnStatusCode = "in process" | "active" | "obsolete";
 
 export interface ColumnFetchOptions {
@@ -232,8 +230,35 @@ export async function fetchUnits(
   columns: number[],
   fetch = defaultFetch,
 ): Promise<ColumnData[]> {
-  const promises = columns.map((col_id) => fetchColumnUnits(col_id, fetch));
-  return await Promise.all(promises);
+  const params = new URLSearchParams();
+  params.append("response", "long");
+
+  if (columns.length == 0) {
+    return [];
+  }
+
+  const col_string = columns.map((column) => column.toString()).join(",");
+  params.append("col_id", col_string);
+
+  const res = await fetch("/units" + "?" + params.toString());
+  const data = await res.json();
+  if (!data.success) {
+    throw new Error("Failed to fetch column units");
+  }
+  const units = data.success.data;
+  const unitsMap = new Map<number, UnitLong[]>();
+  for (const unit of units) {
+    const colID = unit.col_id;
+    if (!unitsMap.has(colID)) {
+      unitsMap.set(colID, []);
+    }
+    unitsMap.get(colID).push(unit);
+  }
+  const result: ColumnData[] = [];
+  for (const colID of columns) {
+    result.push({ columnID: colID, units: unitsMap.get(colID) || [] });
+  }
+  return result;
 }
 
 export async function fetchColumnUnits(