Merge pull request #213 from UW-Macrostrat/unit-interactions

Improve handling of unit interactions and column data fetching

Author: davenquinn

packages/column-views/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.1.0] - 2026-01-31
+
+- Moved `MacrostratDataProvider` and data fetchers to
+  `@macrostrat/data-provider` for better modularity.
+- Standardize approach to clickable/linkable data items in `UnitDetailsPanel`,
+  using a new `MacrostratInteractionProvider` from
+  `@macrostrat/data-components`.
+
 ## [3.0.3] - 2026-01-29
 
 - Change layout of `package.json`

packages/column-views/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -50,6 +50,7 @@
     "@macrostrat/color-utils": "workspace:^",
     "@macrostrat/column-components": "workspace:^",
     "@macrostrat/data-components": "workspace:^",
+    "@macrostrat/data-provider": "workspace:^",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/map-interface": "workspace:^",
     "@macrostrat/map-styles": "workspace:^",

packages/column-views/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -4,21 +4,23 @@ import { useCorrelationLine } from "./utils";
 import {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
-  fetchUnits,
-  MacrostratDataProvider,
   MergeSectionsMode,
   useCorrelationMapStore,
-  useMacrostratBaseURL,
-  useMacrostratFetch,
 } from "../..";
 import { hyperStyled } from "@macrostrat/hyper";
+import {
+  MacrostratDataProvider,
+  fetchUnits,
+  useMacrostratFetch,
+} from "@macrostrat/data-provider";
 
 import styles from "./stories.module.sass";
 import { CorrelationChart, CorrelationChartProps } from "../main";
 import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { EnvironmentColoredUnitComponent } from "../../units";
 import { scaleLinear, scalePow } from "d3-scale";
+import { MacrostratInteractionProvider } from "@macrostrat/data-components";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
@@ -35,29 +37,34 @@ function CorrelationStoryUI({
   projectID,
   ...rest
 }: any) {
+  const domain = "https://dev.macrostrat.org";
   return h(
     MacrostratDataProvider,
-    { baseURL: "https://dev.macrostrat.org/api/v2" },
+    { baseURL: domain + "/api/v2" },
     h(
-      ColumnCorrelationProvider,
-      {
-        focusedLine,
-        columns: null,
-        projectID,
-        onSelectColumns(cols, line) {
-          setFocusedLine(line);
+      MacrostratInteractionProvider,
+      { linkDomain: domain },
+      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,
+            }),
+          ]),
         ]),
-      ]),
+      ),
     ),
   );
 }

packages/column-views/src/data-provider/core.ts

@@ -1,5 +1,3 @@
-export * from "./fetch";
-export * from "./base";
 export * from "./column-nav";
 export * from "./store";
 export * from "./unit-selection";

packages/column-views/src/data-provider/index.ts

@@ -4,22 +4,31 @@ import {
   CompositeColumnScale,
   createCompositeScale,
 } from "../prepare-units/composite-scale";
-import { ColumnAxisType } from "@macrostrat/column-components";
+import { ColumnAxisType, ColumnProvider } from "@macrostrat/column-components";
 import type { ExtUnit, PackageLayoutData } from "../prepare-units";
 import {
   allowUnitSelectionAtom,
   selectedUnitIDAtom,
   UnitSelectionCallbacks,
   UnitSelectionCallbackManager,
 } from "./unit-selection";
-import { BaseUnit } from "@macrostrat/api-types";
-import {
-  AtomMap,
-  columnUnitsAtom,
-  columnUnitsMapAtom,
-  scope,
-  ScopedProvider,
-} from "./core";
+import type { BaseUnit } from "@macrostrat/api-types";
+import { type AtomMap, createScopedStore } from "@macrostrat/data-components";
+import { atom } from "jotai";
+
+export const scope = createScopedStore();
+
+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;
+});
 
 export interface ColumnStateProviderProps<
   T extends BaseUnit,
@@ -64,9 +73,11 @@ export function MacrostratColumnStateProvider<T extends BaseUnit>({
   }
 
   return h(
-    ScopedProvider,
+    scope.Provider,
     {
       atoms: atomMap,
+      keepUpdated: true,
+      inherit: true,
     },
     [selectionHandlers, children],
   );
@@ -170,3 +181,33 @@ export function useCompositeScale(): CompositeColumnScale {
     [ctx.sections],
   );
 }
+
+export function MacrostratColumnProvider(props) {
+  /** A column provider specialized the Macrostrat API. Maps more
+   * generic concepts to Macrostrat-specific ones.
+   */
+
+  const { axisType } = useMacrostratColumnData();
+  const { units, domain, pixelScale, scale, children } = props;
+  return h(
+    ColumnProvider,
+    {
+      axisType,
+      divisions: units,
+      range: domain,
+      pixelsPerMeter: pixelScale,
+      scale,
+    },
+    children,
+  );
+}
+
+/** This is now a legacy provider */
+export function LithologiesProvider({ children }) {
+  useEffect(() => {
+    console.warn(
+      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider",
+    );
+  }, []);
+  return children;
+}

packages/column-views/src/data-provider/store.ts

@@ -1,15 +1,15 @@
-import { BaseUnit, UnitLong } from "@macrostrat/api-types";
+import type { BaseUnit, UnitLong } from "@macrostrat/api-types";
 import { useKeyHandler } from "@macrostrat/ui-components";
 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 { scope, columnUnitsMapAtom } from "./store";
 import {
   AgeRangeQuantifiedDifference,
   ageRangeQuantifiedDifference,
   AgeRangeRelationship,
 } from "@macrostrat/stratigraphy-utils";
+import type { ColumnData } from "@macrostrat/data-provider";
 
 type UnitSelectDispatch = (
   unit: number | BaseUnit | null,
@@ -69,7 +69,7 @@ const selectedUnitAtom = atom(
     target: HTMLElement | null = null,
   ): BaseUnit | null => {
     if (!get(allowUnitSelectionAtom)) {
-      throw new Error("Unit selection is disabled.");
+      console.error("Unit selection is disabled.");
     }
 
     let unitID: number | null;

packages/column-views/src/data-provider/unit-selection.ts

@@ -15,7 +15,7 @@ import {
 } from "react";
 import h from "@macrostrat/hyper";
 import { createComputed } from "zustand-computed";
-import { useMacrostratColumns } from "../../data-provider/base";
+import { useMacrostratColumns } from "@macrostrat/data-provider";
 import { buffer } from "@turf/buffer";
 import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
 
@@ -26,6 +26,7 @@ export interface CorrelationMapInput {
 
 export interface CorrelationMapStore extends CorrelationMapInput {
   onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;
+  projectID?: number;
 }
 
 export interface CorrelationProviderProps extends CorrelationMapInput {

packages/column-views/src/maps/column-correlation/state.ts

@@ -12,7 +12,7 @@ import h from "@macrostrat/hyper";
 import {
   useMacrostratColumns,
   useMacrostratStore,
-} from "../../../data-provider";
+} from "@macrostrat/data-provider";
 
 export interface NavigationStore {
   columns: ColumnGeoJSONRecordWithID[];

packages/column-views/src/maps/column-navigation/mapbox/state.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 
 import { Meta } from "@storybook/react-vite";
 import { ColumnNavigationSVGMap, ColumnNavigationSVGMapProps } from ".";
-import { MacrostratDataProvider } from "../../../data-provider";
+import { MacrostratDataProvider } from "@macrostrat/data-provider";
 import { useState } from "react";
 
 interface ColumnIndexMapProps extends ColumnNavigationSVGMapProps {