@macrostrat/column-views 3.0.3 → 3.1.0

package/dist/units/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"../data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { Lithology } from \"@macrostrat/api-types\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;\n  const columnIx = (division.column ?? 0) % _nColumns;\n  const reducedWidth = width / _nColumns;\n  const x = (columnIx * width) / _nColumns;\n\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { Lithology } from \"@macrostrat/api-types\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;\n  const columnIx = (division.column ?? 0) % _nColumns;\n  const reducedWidth = width / _nColumns;\n  const x = (columnIx * width) / _nColumns;\n\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}

package/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",
@@ -49,7 +49,8 @@
     "@macrostrat/api-types": "^1.1.5",
     "@macrostrat/color-utils": "^1.2.1",
     "@macrostrat/column-components": "^2.0.4",
-    "@macrostrat/data-components": "^1.0.1",
+    "@macrostrat/data-components": "^1.1.0",
+    "@macrostrat/data-provider": "^1.0.0",
     "@macrostrat/hyper": "^3.0.6",
     "@macrostrat/map-interface": "^2.0.1",
     "@macrostrat/map-styles": "^2.0.1",

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

@@ -4,14 +4,15 @@ 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";
@@ -19,6 +20,7 @@ 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,
+            }),
+          ]),
         ]),
-      ]),
+      ),
     ),
   );
 }

package/src/data-provider/index.ts

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

package/src/data-provider/store.ts

@@ -4,7 +4,7 @@ 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,
@@ -12,14 +12,23 @@ import {
   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;
+}

package/src/data-provider/unit-selection.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;

package/src/maps/column-correlation/state.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 {

package/src/maps/column-navigation/mapbox/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[];

package/src/maps/column-navigation/svg/column-navigation-svg-map.stories.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 {

package/src/maps/column-navigation/svg/data-fetcher.ts

@@ -0,0 +1,34 @@
+import {
+  ColumnStatusCode,
+  fetchAllColumns,
+  useMacrostratFetch,
+} from "@macrostrat/data-provider";
+import { useAsyncMemo } from "@macrostrat/ui-components";
+
+export function useColumnFeatures({
+  status_code,
+  project_id,
+  format = "geojson",
+}: {
+  apiRoute?: string;
+  status_code?: string;
+  project_id?: number;
+  format?: "geojson" | "topojson" | "geojson_bare";
+}) {
+  /** Legacy fetcher for column features */
+  const fetch = useMacrostratFetch();
+
+  let statusCode: ColumnStatusCode[] = ["active"];
+  if (status_code == "in process") {
+    statusCode.push("in process");
+  }
+
+  return useAsyncMemo(async () => {
+    return await fetchAllColumns({
+      projectID: project_id,
+      statusCode: statusCode,
+      format,
+      fetch,
+    });
+  }, [project_id, status_code, format]);
+}

package/src/maps/column-navigation/svg/layers.ts

@@ -9,7 +9,7 @@ import chroma from "chroma-js";
 import { ExtendedFeature } from "d3-geo";
 import { Polygon } from "geojson";
 import { useContext, useMemo } from "react";
-import { useColumnFeatures } from "../../../data-provider";
+import { useColumnFeatures } from "./data-fetcher";
 import {
   buildKeyMapping,
   buildTriangulation,

package/src/section.ts

@@ -16,8 +16,8 @@ import {
   useMacrostratColumnData,
   useMacrostratUnits,
   MacrostratColumnProvider,
-  useMacrostratBaseURL,
 } from "./data-provider";
+import { useMacrostratBaseURL } from "@macrostrat/data-provider";
 import { Duration } from "./unit-details";
 import { Value } from "@macrostrat/data-components";
 import type { ExtUnit, PackageScaleLayoutData } from "./prepare-units/types";

package/src/unit-details/panel.ts

@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
 import styles from "./panel.module.sass";
 import { JSONView } from "@macrostrat/ui-components";
 import { Button, ButtonGroup } from "@blueprintjs/core";
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
@@ -13,13 +13,21 @@ import {
   LithologyTagFeature,
   Parenthetical,
   Value,
+  MacrostratInteractionManager,
+  useInteractionProps,
+  ItemInteractionProps,
+  useInteractionManager,
+  MacrostratItemIdentifier,
+  MacrostratInteractionProvider,
+  isClickable,
 } from "@macrostrat/data-components";
+import { useColumnUnitsMap } from "../data-provider";
 import {
-  useColumnUnitsMap,
   useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
-} from "../data-provider";
+  useStratNames,
+} from "@macrostrat/data-provider";
 import type {
   Environment,
   UnitLong,
@@ -42,6 +50,7 @@ export interface UnitDetailsPanelProps {
   lithologyFeatures?: Set<LithologyTagFeature>;
   onSelectUnit?: (unitID: number) => void;
   onClickItem?: MacrostratItemClickHandler;
+  interactionManager?: MacrostratInteractionManager;
 }
 
 export function UnitDetailsPanel({
@@ -71,7 +80,6 @@ export function UnitDetailsPanel({
       features,
       lithologyFeatures,
       onClickItem,
-      onSelectUnit,
     });
   }
 
@@ -94,7 +102,7 @@ export function UnitDetailsPanel({
     ]);
   }
 
-  return h("div.unit-details-panel", { className }, [
+  const main = h("div.unit-details-panel", { className }, [
     h(LegendPanelHeader, {
       onClose,
       title,
@@ -104,6 +112,36 @@ export function UnitDetailsPanel({
     }),
     h("div.unit-details-content-holder", content),
   ]);
+
+  /** Handle unit selection clicks */
+  const clickHandlerForItem = useMemo(() => {
+    if (onSelectUnit == null && onClickItem == null) return null;
+    return (item: MacrostratItemIdentifier) => {
+      if ("unit_id" in item && !("col_id" in item)) {
+        // We are selecting a unit within the column
+        return (event: MouseEvent) => {
+          onSelectUnit(item.unit_id);
+          // Don't allow event to propagate further (e.g., to open a link)
+          event.preventDefault();
+        };
+      }
+      return undefined;
+    };
+  }, [onSelectUnit, onClickItem]);
+
+  if (clickHandlerForItem != null) {
+    // We wrap this in a MacrostratInteractionManager to handle unit selection
+    return h(
+      MacrostratInteractionProvider,
+      {
+        clickHandlerForItem,
+        inherit: true,
+      },
+      main,
+    );
+  }
+
+  return main;
 }
 
 export function LegendPanelHeader({
@@ -162,7 +200,6 @@ export type MacrostratItemClickHandler = (
 
 function UnitDetailsContent({
   unit,
-  onSelectUnit,
   lithologyFeatures = new Set([
     LithologyTagFeature.Proportion,
     LithologyTagFeature.Attributes,
@@ -175,7 +212,6 @@ function UnitDetailsContent({
   getItemHref,
 }: {
   unit: UnitLong;
-  onSelectUnit?: (unitID: number) => void;
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
   onClickItem?: MacrostratItemClickHandler;
@@ -243,12 +279,10 @@ function UnitDetailsContent({
       col_id: unit.col_id,
     }),
     thicknessOrHeightRange,
-    h.if(lithologies)(LithologyList, {
+    h.if(lithologies != null)(LithologyList, {
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
-      getItemHref,
-      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
@@ -257,10 +291,8 @@ function UnitDetailsContent({
         onClickItem,
       }),
     ]),
-    h.if(environments)(EnvironmentsList, {
+    h.if(environments != null)(EnvironmentsList, {
       environments,
-      onClickItem,
-      getItemHref,
     }),
     h.if(unit.strat_name_id != null)(StratNameField, {
       strat_name_id: unit.strat_name_id,
@@ -272,7 +304,6 @@ function UnitDetailsContent({
         { label: "Above" },
         h(UnitIDList, {
           units: unit.units_above,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -281,7 +312,6 @@ function UnitDetailsContent({
         { label: "Below" },
         h(UnitIDList, {
           units: unit.units_below,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -333,27 +363,35 @@ export function ReferencesField({ refs, className = null, ...rest }) {
   );
 }
 
-function StratNameField({
-  strat_name_id,
-  onClickItem,
-}: {
-  strat_name_id: number;
-  onClickItem?: (event: MouseEvent, item: { strat_name_id: number }) => void;
-}) {
-  const stratNames = useMemo(() => [strat_name_id], [strat_name_id]);
-  const data = useMacrostratData("strat_names", stratNames);
-  const stratNameData = data?.[0];
+function useStratNameData(strat_name_id: number) {
+  const stratNames = useStratNames([strat_name_id]);
+  return stratNames?.[0];
+}
+
+function StratNameField(
+  props: {
+    strat_name_id: number;
+    className?: string;
+  } & ItemInteractionProps,
+) {
+  /** Handling for stratigraphic name field */
+  const { strat_name_id, className, ...rest } = props;
+  const data = useStratNameData(strat_name_id);
+
+  const baseInteractionProps = useInteractionProps({ strat_name_id });
+
+  const coreProps = {
+    ...baseInteractionProps,
+    ...rest,
+  };
+
   let inner: any = h(Identifier, { id: strat_name_id });
-  const name = stratNameData?.strat_name_long;
+  const name = data?.strat_name_long;
   if (name != null) {
     inner = h("span.strat-name", name);
   }
 
-  const clickable = onClickItem != null;
-
-  const className = classNames({
-    clickable,
-  });
+  const clickable = isClickable(coreProps);
 
   return h(
     DataField,
@@ -363,8 +401,8 @@ function StratNameField({
     h(
       clickable ? "a" : "span",
       {
-        className,
-        onClick: (e) => onClickItem(e, { strat_name_id }),
+        className: classNames({ clickable }, className),
+        ...coreProps,
       },
       inner,
     ),
@@ -566,36 +604,32 @@ function enhanceLithologies(
 }
 
 export function ClickableText({
-  onClick,
   className,
-  children,
+  ...rest
 }: {
-  onClick: () => void;
   className?: string;
   children: ReactNode;
-}) {
+} & ItemInteractionProps) {
   /** An optionally clickable text element */
-  const tag = onClick != null ? "a" : "span";
-  return h(tag, { onClick, className }, children);
+  const clickable = isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return h(tag, { className: classNames(className, { clickable }), ...rest });
 }
 
 export function Identifier({
   id,
-  onClick,
   className,
+  ...rest
 }: {
   id: number | string;
-  onClick?: (id: number | string) => void;
   className?: string;
-}) {
+} & ItemInteractionProps) {
   /** An item that displays a numeric identifier, optionally clickable */
-  const _onClick = onClick != null ? () => onClick(id) : null;
-
   return h(
     ClickableText,
     {
-      onClick: _onClick,
       className: classNames("identifier", className),
+      ...rest,
     },
     id,
   );
@@ -607,9 +641,11 @@ type UnitInfo = {
   name?: string;
 };
 
-function UnitIDList({ units, onSelectUnit, showNames = false }) {
+function UnitIDList({ units, showNames = false }) {
   const unitsMap = useColumnUnitsMap();
 
+  const interactionManager = useInteractionManager();
+
   const extUnits: UnitInfo[] = useMemo(() => {
     const u1 = units.filter((d) => d != 0);
     if (showNames) {
@@ -637,9 +673,17 @@ function UnitIDList({ units, onSelectUnit, showNames = false }) {
   return h(
     ItemList,
     { className: "units-list" },
-    extUnits.map((info) =>
-      h("span.item", h(UnitIdentifier, { ...info, onSelectUnit })),
-    ),
+    extUnits.map((info) => {
+      return h(
+        "span.item",
+        h(UnitIdentifier, {
+          ...info,
+          ...interactionManager?.interactionPropsForItem({
+            unit_id: info.unitID,
+          }),
+        }),
+      );
+    }),
   );
 }
 
@@ -647,21 +691,14 @@ function UnitIdentifier({
   unitID,
   colID,
   name,
-  onSelectUnit,
-}: UnitInfo & { onSelectUnit?: (unitID: number) => void }) {
-  const onClick = useMemo(() => {
-    if (onSelectUnit == null) return null;
-    return () => {
-      onSelectUnit(unitID);
-    };
-  }, [onSelectUnit]);
-
+  ...interactionProps
+}: UnitInfo & ItemInteractionProps) {
   if (name != null) {
     return h(
       ClickableText,
       {
         className: "unit-name",
-        onClick,
+        ...interactionProps,
       },
       name,
     );
@@ -669,9 +706,9 @@ function UnitIdentifier({
 
   return h(Identifier, {
     className: "unit-id",
-    onClick,
     key: unitID,
     id: unitID,
+    ...interactionProps,
   });
 }