Fixes to column visualizations

packages/api-types/CHANGELOG.md

@@ -6,6 +6,10 @@ 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).
 
+## [1.1.2] - 2025-08-22
+
+- Added types for `StratName` and `StratNameConcept`
+
 ## [1.1.1] - 2025-06-25
 
 - Add type for `Interval`

packages/api-types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/api-types",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Type definitions for Macrostrat's API",
   "main": "./src/index.d.ts",
   "types": "./src/index.d.ts",

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

@@ -80,3 +80,45 @@ export interface UnitLongFull extends UnitLong {
   b_pos?: number | string;
   t_pos?: number | string;
 }
+
+export interface StratName {
+  strat_name: string;
+  strat_name_long: string;
+  rank: string;
+  strat_name_id: number;
+  concept_id: number;
+  bed: string;
+  bed_id: number;
+  mbr: string;
+  mbr_id: number;
+  fm: string;
+  fm_id: number;
+  subgp: string;
+  subgp_id: number;
+  gp: string;
+  gp_id: number;
+  sgp: string;
+  sgp_id: number;
+  b_age: string;
+  t_age: string;
+  b_period: string;
+  t_period: string;
+  c_interval: string;
+  t_units: number;
+  ref_id: number;
+}
+
+export interface StratNameConcept {
+  concept_id: number;
+  name: string;
+  geologic_age: string;
+  int_id: string;
+  b_int_id: string;
+  t_int_id: string;
+  usage_notes: string;
+  other: string;
+  province: string;
+  refs: string;
+  url: string;
+  author: string;
+}

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).
 
+## [2.1.3] - 2025-08-22
+
+- Added `UnitDetailsPanelWithNavigation` component
+- Added `ColumnBasicInfo` component
+- Improve styling of `UnitDetailsPanel`
+- Add `ReferencesField` component for bibliographic info
+- Add data fetchers for stratigraphic names
+
 ## [2.1.2] - 2025-06-26
 
 - UnitDetailsPanel strat name and interval now clickable

packages/column-views/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Data views for Macrostrat stratigraphic columns",
   "type": "module",
   "source": "src/index.ts",

packages/column-views/src/age-axis.ts

@@ -29,12 +29,16 @@ const AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {
 };
 
 export function VerticalAxisLabel(props) {
-  const { label = "Age", unit = "Ma", className } = props;
-  return h("div.column-axis-label.age-axis-label", { className }, [
-    label,
-    " ",
-    h.if(unit)(Parenthetical, { className: "age-axis-unit" }, unit),
-  ]);
+  const { label = "Age", unit = "Ma", className, height } = props;
+  return h(
+    "div.column-axis-label.age-axis-label",
+    { className, style: { height } },
+    [
+      label,
+      " ",
+      h.if(unit)(Parenthetical, { className: "age-axis-unit" }, unit),
+    ],
+  );
 }
 
 export function CompositeAgeAxis() {
@@ -81,6 +85,7 @@ export function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {
     h(VerticalAxisLabel, {
       label: axisLabel,
       unit: axisUnit,
+      height: totalHeight,
     }),
     h(
       SVG,

packages/column-views/src/column.module.sass

@@ -134,3 +134,9 @@ body:global(.dark-mode) .column-container
   --unit-font-style: normal
 
 
+.column-title-row
+  display: flex
+  flex-direction: row
+  gap: 1em
+  justify-content: space-between
+  align-items: baseline

packages/column-views/src/column.ts

@@ -12,7 +12,11 @@ import {
 } from "./units";
 
 import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
-import { UnitSelectionPopover } from "./unit-details";
+import {
+  Identifier,
+  ReferencesField,
+  UnitSelectionPopover,
+} from "./unit-details";
 import {
   MacrostratColumnDataProvider,
   useCompositeScale,
@@ -27,6 +31,7 @@ import { CompositeAgeAxis } from "./age-axis";
 import { MergeSectionsMode, usePreparedColumnUnits } from "./prepare-units";
 import { UnitLong } from "@macrostrat/api-types";
 import { NonIdealState } from "@blueprintjs/core";
+import { DataField } from "@macrostrat/data-components";
 
 const h = hyperStyled(styles);
 
@@ -270,3 +275,20 @@ export function ColumnContainer(props: ColumnContainerProps) {
     ...rest,
   });
 }
+
+export function ColumnBasicInfo({ data, showColumnID = true }) {
+  if (data == null) return null;
+  return h("div.column-info", [
+    h("div.column-title-row", [
+      h("h2", data.col_name),
+      h.if(showColumnID)("h4", h(Identifier, { id: data.col_id })),
+    ]),
+    h(DataField, { row: true, label: "Group", value: data.col_group }),
+    h(ReferencesField, {
+      refs: data.refs,
+      inline: false,
+      row: true,
+      className: "column-refs",
+    }),
+  ]);
+}

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

@@ -8,13 +8,15 @@ import {
   ColumnGeoJSONRecordWithID,
   Environment,
   MacrostratRef,
+  StratName,
 } from "@macrostrat/api-types";
 import {
   fetchAllColumns,
   fetchEnvironments,
   fetchIntervals,
   fetchLithologies,
   fetchRefs,
+  fetchStratNames,
 } from "./fetch";
 import { APIProvider } from "@macrostrat/ui-components";
 import { ColumnProvider } from "@macrostrat/column-components";
@@ -55,6 +57,9 @@ interface MacrostratStore extends RefsSlice {
     projectID: number | null,
     inProcess: boolean,
   ): Promise<ColumnGeoJSONRecord[]>;
+  // Strat names unify both "strat names" and "concepts"
+  stratNames: Map<number, StratName> | null;
+  getStratNames(ids: number[] | null): Promise<StratName[]>;
 }
 
 function createMacrostratStore(
@@ -83,6 +88,7 @@ function createMacrostratStore(
       ...createEnvironmentsSlice(set, get),
       ...createColumnsSlice(set, get),
       ...createRefsSlice(set, get),
+      ...createStratNamesSlice(set, get),
     };
   });
 }
@@ -229,6 +235,34 @@ function createIntervalsSlice(set, get) {
   };
 }
 
+function createStratNamesSlice(set, get) {
+  return {
+    stratNames: null,
+    async getStratNames(ids: number[] | null): Promise<StratName[]> {
+      const { stratNames, fetch } = get();
+      let nameMap = stratNames ?? new Map();
+      let stratNamesAlreadyLoaded = [];
+      let stratNamesToLoad = [];
+      for (const id of ids) {
+        if (nameMap.has(id)) {
+          stratNamesAlreadyLoaded.push(nameMap.get(id));
+        } else {
+          stratNamesToLoad.push(id);
+        }
+      }
+      if (stratNamesToLoad.length > 0) {
+        const data = await fetchStratNames(stratNamesToLoad, fetch);
+        if (data == null) return stratNamesAlreadyLoaded;
+        for (const d of data) {
+          nameMap.set(d.strat_name_id, d);
+        }
+        set({ stratNames: nameMap });
+      }
+      return ids.map((id) => nameMap.get(id));
+    },
+  };
+}
+
 function includesTimescale(intervals: Map<number, any>, timescaleID: number) {
   if (intervals == null) return false;
   if (timescaleID == null) return true;
@@ -251,12 +285,21 @@ export function useMacrostratStore(selector: MacrostratSelector | "api") {
   return useStore(ctx, selector);
 }
 
+type DataTypeKey =
+  | "lithologies"
+  | "intervals"
+  | "columns"
+  | "environments"
+  | "refs"
+  | "strat_names";
+
 const dataTypeMapping = {
   lithologies: (store) => store.getLithologies,
   intervals: (store) => store.getIntervals,
   columns: (store) => store.getColumns,
   environments: (store) => store.getEnvironments,
   refs: (store) => store.getRefs,
+  strat_names: (store) => store.getStratNames,
 };
 
 export function useMacrostratDefs(dataType: string): Map<number, any> | null {
@@ -299,14 +342,18 @@ export function useMacrostratColumns(
   }, [colData, inProcess]);
 }
 
-export function useMacrostratData(dataType: string, ...args: any[]) {
+export function useMacrostratData(dataType: DataTypeKey, ...args: any[]) {
   const selector = dataTypeMapping[dataType];
   const operator = useMacrostratStore(selector);
 
   const [value, setValue] = useState(null);
 
   useEffect(() => {
-    operator(...args).then(setValue);
+    try {
+      operator(...args).then(setValue);
+    } catch (e) {
+      console.error(e);
+    }
   }, [operator, ...args]);
 
   return value;

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

@@ -2,6 +2,8 @@ import {
   ColumnGeoJSONRecord,
   ColumnGeoJSONRecordWithID,
   MacrostratRef,
+  StratName,
+  StratUnit,
   UnitLong,
 } from "@macrostrat/api-types";
 import {
@@ -201,6 +203,19 @@ export async function fetchRefs(
   return await unwrapResponse(res);
 }
 
+export async function fetchStratNames(
+  names: number[],
+  fetch = defaultFetch,
+): Promise<StratName[]> {
+  let url = `/defs/strat_names`;
+  if (names.length == 0) {
+    return [];
+  }
+  url += "?strat_name_id=" + names.join(",");
+  const res = await fetch(url);
+  return await unwrapResponse(res);
+}
+
 export type ColumnData = {
   units: UnitLong[];
   columnID: number;

packages/column-views/src/unit-details/index.ts

@@ -1,2 +1,3 @@
 export * from "./panel";
 export * from "./popover";
+export * from "./modal-panel";

packages/column-views/src/unit-details/modal-panel.ts

@@ -0,0 +1,61 @@
+import { Button } from "@blueprintjs/core";
+import { UnitDetailsPanel } from "./panel";
+import { useKeyHandler } from "@macrostrat/ui-components";
+import h from "@macrostrat/hyper";
+
+export function UnitDetailsPanelWithNavigation(props) {
+  const { unitData, className, selectedUnit, onSelectUnit, features, ...rest } =
+    props;
+
+  const ix = unitData?.findIndex(
+    (unit) => unit.unit_id === selectedUnit?.unit_id,
+  );
+
+  const keyMap = {
+    38: ix - 1,
+    40: ix + 1,
+  };
+
+  useKeyHandler(
+    (event) => {
+      const nextIx = keyMap[event.keyCode];
+      if (nextIx == null || nextIx < 0 || nextIx >= unitData.length) return;
+      onSelectUnit(unitData[nextIx].unit_id);
+      event.stopPropagation();
+    },
+    [unitData, ix],
+  );
+
+  if (selectedUnit == null) return null;
+
+  const actions = h([
+    h(Button, {
+      icon: "arrow-up",
+      disabled: ix === 0,
+      onClick() {
+        onSelectUnit(unitData[ix - 1]?.unit_id);
+      },
+    }),
+    h(Button, {
+      icon: "arrow-down",
+      disabled: ix === unitData.length - 1,
+      onClick() {
+        onSelectUnit(unitData[ix + 1]?.unit_id);
+      },
+    }),
+  ]);
+
+  return h(UnitDetailsPanel, {
+    unit: selectedUnit,
+    onClose(event) {
+      onSelectUnit(null);
+    },
+    className,
+    actions,
+    showLithologyProportions: true,
+    selectUnit: onSelectUnit,
+    columnUnits: unitData,
+    features,
+    ...rest,
+  });
+}