Column updates

Author: davenquinn

pages/columns/@column/column-inspector/facets.ts

@@ -1,10 +1,15 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import { useAPIResult } from "@macrostrat/ui-components";
 import {
   BaseMeasurementsColumn,
+  IsotopesColumn,
+  MeasurementDataProvider,
   TruncatedList,
 } from "@macrostrat/column-views";
 import { apiDomain } from "@macrostrat-web/settings";
+import styles from "./index.module.sass";
+
+const h = hyper.styled(styles);
 
 function useSGPData({ col_id }) {
   const res = useAPIResult(
@@ -40,3 +45,27 @@ function SGPSamplesNote(props) {
     itemRenderer: (p) => h("span", p.data.name),
   });
 }
+
+export function StableIsotopesColumn({ columnID }) {
+  return h(
+    "div.isotopes-column",
+    h(MeasurementDataProvider, { col_id: columnID }, [
+      h(IsotopesColumn, {
+        parameter: "D13C",
+        label: "δ¹³C",
+        color: "dodgeblue",
+        domain: [-14, 6],
+        width: 100,
+        nTicks: 4,
+      }),
+      h(IsotopesColumn, {
+        parameter: "D18O",
+        label: "δ¹⁸O",
+        color: "red",
+        domain: [-40, 0],
+        width: 100,
+        nTicks: 4,
+      }),
+    ])
+  );
+}

pages/columns/@column/column-inspector/index.module.sass

@@ -12,6 +12,7 @@
 
   max-width: 80rem
   margin: 0 auto
+  gap: 1em
 
 
 .left-column
@@ -38,7 +39,7 @@
 
 
 .column-view
-  margin: 0 4em 4em
+  margin: 0 0 4em
   padding: 0
 
 .column-header
@@ -116,3 +117,7 @@ rect.selection-overlay
   flex-direction: row
   align-items: baseline
   justify-content: space-between
+
+.isotopes-column
+  display: flex
+  flex-direction: row

pages/columns/@column/column-inspector/index.ts

@@ -3,11 +3,10 @@ import {
   Column,
   DetritalColumn,
   FossilDataType,
+  HybridScaleType,
   Identifier,
-  IsotopesColumn,
   MacrostratColumnStateProvider,
   MacrostratDataProvider,
-  MeasurementDataProvider,
   PBDBFossilsColumn,
   ReferencesField,
 } from "@macrostrat/column-views";
@@ -18,15 +17,15 @@ import { PatternProvider } from "~/_providers";
 import styles from "./index.module.sass";
 import { navigate } from "vike/client/router";
 
-import { SGPMeasurementsColumn } from "./facets";
+import { SGPMeasurementsColumn, StableIsotopesColumn } from "./facets";
 import { ModalUnitPanel } from "./modal-panel";
 
 import { PageBreadcrumbs } from "~/components";
 import { onDemand } from "~/_utils";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 import { DataField } from "@macrostrat/data-components";
 import { ColumnAxisType } from "@macrostrat/column-components";
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atom, useAtom, useAtomValue } from "jotai";
 import { Button, FormGroup, HTMLSelect } from "@blueprintjs/core";
 
 const ColumnMap = onDemand(() => import("./map").then((mod) => mod.ColumnMap));
@@ -45,7 +44,7 @@ const heightAxisTypeAtom = atom<ColumnAxisType>();
 const facetAtom = atom<string | null>();
 
 function inferHeightAxisType(axisType: ColumnAxisType, units): ColumnAxisType {
-  if (axisType == ColumnAxisType.AGE) {
+  if (axisType !== ColumnAxisType.HEIGHT && axisType !== ColumnAxisType.DEPTH) {
     return axisType;
   }
   // Infer axis type from units
@@ -85,6 +84,7 @@ function ColumnPageInner({ columnInfo, linkPrefix = "/", projectID }) {
 
   // Set subsidiary options
 
+  let hybridScale = null;
   let maxInternalColumns = undefined;
   let unconformityLabels = true;
   let showTimescale = true;
@@ -95,6 +95,22 @@ function ColumnPageInner({ columnInfo, linkPrefix = "/", projectID }) {
       unconformityLabels = false;
       showTimescale = false;
     }
+  } else if (
+    axisType == ColumnAxisType.HEIGHT ||
+    axisType == ColumnAxisType.DEPTH
+  ) {
+    // Set up for approximate height column
+    hybridScale = { type: HybridScaleType.ApproximateHeight };
+    // Show ages on secondary axis
+    axisType = ColumnAxisType.HEIGHT;
+  }
+
+  if (axisType == ColumnAxisType.ORDINAL) {
+    // For ordinal columns, use the fancier "equidistant-surfaces" scale
+    axisType = ColumnAxisType.AGE;
+    hybridScale = { type: HybridScaleType.EquidistantSurfaces };
+
+    maxInternalColumns = undefined;
   }
 
   const [selectedUnitID, setSelectedUnitID] = useState<number>(
@@ -169,6 +185,8 @@ function ColumnPageInner({ columnInfo, linkPrefix = "/", projectID }) {
                   selectedUnit: selectedUnitID,
                   maxInternalColumns,
                   showLabelColumn,
+                  hybridScale,
+                  pixelScale: 20,
                 },
                 children
               ),
@@ -225,29 +243,13 @@ function ColumnBasicInfo({ data, showColumnID = true }) {
 let ageAxisOptions = {
   Height: ColumnAxisType.HEIGHT,
   Age: ColumnAxisType.AGE,
+  Ordinal: ColumnAxisType.ORDINAL,
 };
 
 function facetElements(facet: string | null, columnID: number) {
   switch (facet) {
     case "stable-isotopes":
-      return h(MeasurementDataProvider, { col_id: columnID }, [
-        h(IsotopesColumn, {
-          parameter: "D13C",
-          label: "δ¹³C",
-          color: "dodgeblue",
-          domain: [-14, 6],
-          width: 100,
-          nTicks: 4,
-        }),
-        h(IsotopesColumn, {
-          parameter: "D18O",
-          label: "δ¹⁸O",
-          color: "red",
-          domain: [-40, 0],
-          width: 100,
-          nTicks: 4,
-        }),
-      ]);
+      return h(StableIsotopesColumn, { columnID });
     case "sgp-samples":
       return h(SGPMeasurementsColumn, { columnID });
     case "fossil-taxa":