Merge pull request #195 from UW-Macrostrat/eodp-correlation

eODP correlation diagram fixes

Author: davenquinn

packages/api-types/src/columns.d.ts

@@ -1,4 +1,4 @@
-import { Polygon, MultiPolygon } from "geojson";
+import { Polygon, MultiPolygon, Point } from "geojson";
 
 export type ColumnSpec = {
   col_id: number | string;
@@ -18,7 +18,7 @@ export type ColumnProperties = {
 
 export interface ColumnGeoJSONRecord {
   type: "Feature";
-  geometry: Polygon | MultiPolygon;
+  geometry: Polygon | MultiPolygon | Point;
   properties: ColumnProperties;
 }
 

packages/column-views/CHANGELOG.md

@@ -4,6 +4,13 @@ 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).
 
+## [2.4.1] - 2025-12-18
+
+- Improve unit selection
+- Improve unit popover
+- Better unit navigation for correlation diagram
+- Show column name in unit popover
+
 ## [2.4.0] - 2025-12-15
 
 - Remove `UnitSelectionProvider` in favor of `jotai` state management

packages/column-views/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Data views for Macrostrat stratigraphic columns",
   "type": "module",
   "source": "src/index.ts",
@@ -42,6 +42,7 @@
     "@macrostrat/svg-map-components": "workspace:^",
     "@macrostrat/timescale": "workspace:^",
     "@macrostrat/ui-components": "workspace:^",
+    "@turf/boolean-point-in-polygon": "^7.3.1",
     "@turf/buffer": "^7.2.0",
     "@turf/centroid": "^7.2.0",
     "@turf/distance": "^7.2.0",

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

@@ -5,10 +5,10 @@ import {
   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";
@@ -55,6 +55,13 @@ function MainChartArea({ children }) {
   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,
@@ -137,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 }),
         ]),
       ]),
     ),

packages/column-views/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,38 +38,45 @@ 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,
   );
 
   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,
+};

packages/column-views/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);

packages/column-views/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(