@macrostrat/column-views 3.4.1 → 3.5.0

package/src/data-provider/store.ts

@@ -1,4 +1,10 @@
-import { createContext, ReactNode, useContext, useMemo } from "react";
+import {
+  createContext,
+  ReactNode,
+  RefObject,
+  useContext,
+  useMemo,
+} from "react";
 import h from "@macrostrat/hyper";
 import {
   CompositeColumnScale,
@@ -11,13 +17,18 @@ import {
   selectedUnitIDAtom,
   UnitSelectionCallbacks,
   UnitSelectionCallbackManager,
+  selectedUnitElementAtom,
 } from "./unit-selection";
 import type { BaseUnit } from "@macrostrat/api-types";
-import { type AtomMap, createScopedStore } from "@macrostrat/data-components";
+import {
+  type AtomMap,
+  createScopedStore,
+  StateIsolation,
+} from "@macrostrat/data-components";
 import { atom } from "jotai";
 import { useEffect } from "react";
 
-export const scope = createScopedStore();
+export const scope: StateIsolation = createScopedStore();
 
 export const columnUnitsAtom = atom<BaseUnit[]>();
 
@@ -84,6 +95,13 @@ export function MacrostratColumnStateProvider<T extends BaseUnit>({
   );
 }
 
+/** Interface for imperative handlers that can
+ * be invoked outside of the column's react context
+ */
+export interface ColumnRef {
+  scrollSelectedUnitIntoView(): void;
+}
+
 export interface MacrostratColumnDataContext<T extends BaseUnit> {
   units: T[];
   sections: PackageLayoutData[];
@@ -95,6 +113,7 @@ export interface MacrostratColumnDataContext<T extends BaseUnit> {
 export interface ColumnDataProviderProps<T extends BaseUnit>
   extends MacrostratColumnDataContext<T>, ColumnStateProviderProps<T> {
   children: ReactNode;
+  ref: RefObject<ColumnRef>;
 }
 
 const MacrostratColumnDataContext =
@@ -109,6 +128,7 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
   allowUnitSelection,
   onUnitSelected,
   selectedUnit,
+  ref,
 }: ColumnDataProviderProps<T>) {
   /** Internal provider for Macrostrat column data.
    * As a general rule, we want to provide data and column-axis
@@ -138,11 +158,35 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
       allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      ref,
     },
-    h(MacrostratColumnDataContext.Provider, { value }, children),
+    [
+      h(ColumnRefManager, { ref }),
+      h(MacrostratColumnDataContext.Provider, { value }, children),
+    ],
   );
 }
 
+function ColumnRefManager({ ref }: { ref?: RefObject<ColumnRef> }) {
+  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);
+  useEffect(() => {
+    if (ref == null) return;
+    ref.current = {
+      scrollSelectedUnitIntoView(opts?: ScrollIntoViewOptions) {
+        selectedUnitElement?.scrollIntoView(
+          opts ?? {
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest",
+          },
+        );
+      },
+    };
+  }, [ref, selectedUnitElement]);
+
+  return null;
+}
+
 export function UnitSelectionProvider(props: ColumnStateProviderProps<any>) {
   /* A basic unit selection provider without column data context.
   Mostly for use with the CorrelationChart component.

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

@@ -48,6 +48,7 @@ export interface UnitSelectionCallbacks {
 export const allowUnitSelectionAtom = atom<boolean>(true);
 
 export const selectedUnitIDAtom = atom<number | null>();
+export const selectedUnitElementAtom = atom<HTMLElement | null>();
 
 const overlayPositionAtom = atom<RectBounds | null>();
 
@@ -113,6 +114,7 @@ const selectedUnitAtom = atom(
       };
     }
 
+    set(selectedUnitElementAtom, target);
     set(selectedUnitIDAtom, unitID);
     set(overlayPositionAtom, overlayPosition);
 
@@ -158,6 +160,7 @@ export function useUnitSelectionTarget(
   const ref = useRef<HTMLElement>(null);
   const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
+  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);
 
   const onClick = useCallback(
     (evt: Event) => {
@@ -168,17 +171,19 @@ export function useUnitSelectionTarget(
   );
 
   useEffect(() => {
-    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
-    selectUnit(unit, ref.current);
+    // Sync selection with unit element...
+    if (!selected) return;
+    selectUnit?.(unit, ref.current);
+  }, [ref.current, selected, selectUnit]);
 
+  useEffect(() => {
     // Scroll the unit into view
-    ref.current?.scrollIntoView({
+    selectedUnitElement?.scrollIntoView({
       behavior: "smooth",
       block: "center",
       inline: "nearest",
     });
-  }, [selected, selectUnit]);
+  }, [selectedUnitElement]);
 
   return [ref, selected, onClick];
 }

package/src/section.ts

@@ -17,7 +17,10 @@ import {
   useMacrostratUnits,
   MacrostratColumnProvider,
 } from "./data-provider";
-import { useMacrostratBaseURL } from "@macrostrat/data-provider";
+import {
+  useMacrostratBaseURL,
+  useMacrostratData,
+} from "@macrostrat/data-provider";
 import { Duration } from "./unit-details";
 import { Value } from "@macrostrat/data-components";
 import type { ExtUnit, PackageScaleLayoutData } from "./prepare-units/types";
@@ -222,7 +225,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
 
   // Use intervals from Macrostrat API
   const baseURL = useMacrostratBaseURL();
-  const intervals = useMacrostratIntervals(baseURL);
+  const intervals = useMacrostratIntervals({ baseURL });
 
   let _levels: [number, number];
   if (typeof levels === "number") {