Examples for GBDB integraton

.storybook/preview-head.html

@@ -1,4 +1,11 @@
 <meta name="darkreader-lock" />
+<script>
+  // Forward React DevTools hook to iframe contexts
+  if (window.parent !== window) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ =
+      window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  }
+</script>
 <!--<style>-->
 <!--  .sbdocs.sbdocs-wrapper {-->
 <!--    background-color: var(&#45;&#45;background-color) !important;-->

packages/column-creator/stories/column-creator.stories.ts

@@ -2,7 +2,6 @@ import h from "@macrostrat/hyper";
 
 import { BasicUnitComponent, Column } from "@macrostrat/column-views";
 import { ColumnAxisType } from "@macrostrat/column-components";
-import { FlexRow } from "@macrostrat/ui-components";
 import { ColumnCreator } from "../src";
 
 export default {

packages/column-views/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.3] - 2026-01-06
+
+- Fix error with unit notes for height-based columns
+
 ## [2.4.2] - 2025-12-19
 
 Update minimum versions of dependencies

packages/column-views/package.json

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

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

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/react-vite";
 import "@macrostrat/style-system";
-import { useArgs } from "storybook/preview-api";
-import { useCallback } from "react";
+import { useCorrelationLine } from "./utils";
 import {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
@@ -18,7 +17,6 @@ import styles from "./stories.module.sass";
 import { CorrelationChart, CorrelationChartProps } from "../main";
 import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
 import { OverlaysProvider } from "@blueprintjs/core";
-import { parseLineFromString, stringifyLine } from "../hash-string";
 import { EnvironmentColoredUnitComponent } from "../../units";
 import { scaleLinear, scalePow } from "d3-scale";
 
@@ -179,27 +177,6 @@ export default {
   },
 } as Meta<typeof CorrelationStoryUI>;
 
-function useCorrelationLine() {
-  const [{ focusedLine, selectedUnit }, updateArgs] = useArgs();
-  const setFocusedLine = (line) => {
-    updateArgs({ focusedLine: stringifyLine(line) });
-  };
-
-  const setSelectedUnit = useCallback(
-    (selectedUnit) => {
-      updateArgs({ selectedUnit });
-    },
-    [updateArgs],
-  );
-
-  return {
-    focusedLine: parseLineFromString(focusedLine),
-    setFocusedLine,
-    selectedUnit,
-    setSelectedUnit,
-  };
-}
-
 function Template(args) {
   return h(CorrelationStoryUI, {
     ...args,

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

@@ -0,0 +1,24 @@
+import { useArgs } from "storybook/preview-api";
+import { useCallback } from "react";
+import { parseLineFromString, stringifyLine } from "../hash-string";
+
+export function useCorrelationLine() {
+  const [{ focusedLine, selectedUnit }, updateArgs] = useArgs();
+  const setFocusedLine = (line) => {
+    updateArgs({ focusedLine: stringifyLine(line) });
+  };
+
+  const setSelectedUnit = useCallback(
+    (selectedUnit) => {
+      updateArgs({ selectedUnit });
+    },
+    [updateArgs],
+  );
+
+  return {
+    focusedLine: parseLineFromString(focusedLine),
+    setFocusedLine,
+    selectedUnit,
+    setSelectedUnit,
+  };
+}

packages/column-views/src/maps/_shared/styles.ts

@@ -3,7 +3,12 @@ import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 import type { Style } from "mapbox-gl";
 
 export function buildColumnsStyle(color: string): Style {
-  const columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
+  let columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
+  const columnSelectedColor = getCSSVariable("--selection-color", "purple");
+
+  // If color is in the geojson properties, use that
+  columnColor = ["coalesce", ["get", "color"], columnColor];
+
   return {
     sources: {
       columns: buildGeoJSONSource(),
@@ -42,7 +47,12 @@ export function buildColumnsStyle(color: string): Style {
         source: "columns",
         paint: {
           "circle-radius": 4,
-          "circle-color": columnColor,
+          "circle-color": [
+            "case",
+            ["boolean", ["feature-state", "selected"], false],
+            columnSelectedColor,
+            columnColor,
+          ],
           "circle-opacity": [
             "case",
             ["boolean", ["feature-state", "selected"], false],

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

@@ -210,6 +210,7 @@ function ColumnsLayer({ enabled = true }) {
       const center = geoCentroid(columnGeometry);
 
       const isInitialRender = initialRenderRef.current;
+
       map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });
       if (isInitialRender) {
         initialRenderRef.current = false;

packages/column-views/src/prepare-units/composite-scale.ts

@@ -307,7 +307,15 @@ export function createCompositeScale(
   const scale: CompositeColumnScale = (age) => {
     for (const s of scales) {
       const domain = s.domain();
-      if (age >= domain[0] && age <= domain[domain.length - 1]) {
+      if (
+        domain[0] < domain[domain.length - 1] &&
+        age >= domain[0] &&
+        age <= domain[domain.length - 1]
+      ) {
+        // Age axes
+        return s(age);
+      } else if (age <= domain[0] && age >= domain[domain.length - 1]) {
+        // Normal axes like height
         return s(age);
       }
     }

packages/column-views/src/prepare-units/helpers.ts

@@ -38,7 +38,7 @@ export function preprocessUnits<T extends UnitLong = UnitLong>(
       while (columns.includes(col)) {
         col++;
       }
-      d.column = col;
+      d.column ??= col;
     }
 
     // If unit overlaps the edges of a section, set the clip positions
@@ -102,7 +102,7 @@ function extendDivision(
   return {
     ...unit,
     bottomOverlap,
-    column,
+    column: unit.column ?? column,
     overlappingUnits: overlappingUnits.map((d) => d.unit_id),
   };
 }

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

@@ -243,7 +243,7 @@ function UnitDetailsContent({
       col_id: unit.col_id,
     }),
     thicknessOrHeightRange,
-    h(LithologyList, {
+    h.if(lithologies)(LithologyList, {
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
@@ -257,7 +257,7 @@ function UnitDetailsContent({
         onClickItem,
       }),
     ]),
-    h(EnvironmentsList, {
+    h.if(environments)(EnvironmentsList, {
       environments,
       onClickItem,
       getItemHref,
@@ -267,7 +267,7 @@ function UnitDetailsContent({
     }),
     outcropField,
     h.if(features.has(UnitDetailsFeature.AdjacentUnits))([
-      h(
+      h.if(unit.units_above != null)(
         DataField,
         { label: "Above" },
         h(UnitIDList, {
@@ -276,7 +276,7 @@ function UnitDetailsContent({
           showNames: true,
         }),
       ),
-      h(
+      h.if(unit.units_below != null)(
         DataField,
         { label: "Below" },
         h(UnitIDList, {
@@ -542,10 +542,10 @@ export function Duration({
 }
 
 function enhanceEnvironments(
-  environments: Partial<Environment>[],
+  environments: Partial<Environment>[] | null,
   envMap: Map<number, Environment>,
 ) {
-  return environments.map((env) => {
+  return environments?.map((env) => {
     return {
       ...(envMap?.get(env.environ_id) ?? {}),
       ...env,
@@ -557,7 +557,7 @@ function enhanceLithologies(
   lithologies: Partial<UnitLong["lith"]>,
   lithMap: Map<number, any>,
 ) {
-  return lithologies.map((lith) => {
+  return lithologies?.map((lith) => {
     return {
       ...(lithMap?.get(lith.lith_id) ?? {}), // get lithology details
       ...lith, // override with the unit's specific lithology data
@@ -676,6 +676,14 @@ function UnitIdentifier({
 }
 
 function IntervalProportions({ unit, onClickItem }) {
+  if (
+    unit.b_int_id == null &&
+    unit.t_int_id == null &&
+    unit.b_prop == null &&
+    unit.t_prop == null
+  )
+    return null;
+
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
   let b_prop = unit.b_prop ?? 0;

packages/column-views/stories/.gitignore

@@ -0,0 +1 @@
+gbdb-all.json