@macrostrat/column-views 1.0.0

package/dist/selection.add9f8b0.js

@@ -0,0 +1,117 @@
+import $ge7AF$macrostrathyper from "@macrostrat/hyper";
+import {getQueryString as $ge7AF$getQueryString, setQueryString as $ge7AF$setQueryString, useKeyHandler as $ge7AF$useKeyHandler} from "@macrostrat/ui-components";
+import {createContext as $ge7AF$createContext, useContext as $ge7AF$useContext, useState as $ge7AF$useState, useMemo as $ge7AF$useMemo, useCallback as $ge7AF$useCallback, useEffect as $ge7AF$useEffect} from "react";
+
+
+
+
+const $4d5d1c15f39f6a14$var$UnitSelectionContext = (0, $ge7AF$createContext)(null);
+const $4d5d1c15f39f6a14$var$DispatchContext = (0, $ge7AF$createContext)(null);
+function $4d5d1c15f39f6a14$export$77a278d5ca56e309() {
+    return (0, $ge7AF$useContext)($4d5d1c15f39f6a14$var$DispatchContext);
+}
+function $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da() {
+    return (0, $ge7AF$useContext)($4d5d1c15f39f6a14$var$UnitSelectionContext);
+}
+function $4d5d1c15f39f6a14$export$f19d75b1d4b676a4(props) {
+    const { unit: unit, setUnit: setUnit, onUnitSelected: onUnitSelected, children: children } = props;
+    if (unit == null && setUnit == null) return (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$StatefulUnitSelectionProvider, props);
+    return (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$BaseUnitSelectionProvider, {
+        unit: unit,
+        setUnit: setUnit,
+        onUnitSelected: onUnitSelected
+    }, children);
+}
+function $4d5d1c15f39f6a14$var$StatefulUnitSelectionProvider(props) {
+    const [unit, setUnit] = (0, $ge7AF$useState)(null);
+    return (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$BaseUnitSelectionProvider, {
+        ...props,
+        unit: unit,
+        setUnit: setUnit
+    });
+}
+function $4d5d1c15f39f6a14$var$BaseUnitSelectionProvider({ children: children, unit: unit, setUnit: setUnit, onUnitSelected: onUnitSelected }) {
+    const value = (0, $ge7AF$useMemo)(()=>unit, [
+        unit?.unit_id
+    ]);
+    const _onUnitSelected = (0, $ge7AF$useCallback)((u, target, event)=>{
+        let newUnit = u;
+        setUnit(newUnit);
+        onUnitSelected?.(newUnit, target, event);
+    }, [
+        setUnit,
+        onUnitSelected
+    ]);
+    return (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$DispatchContext.Provider, {
+        value: _onUnitSelected
+    }, (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$UnitSelectionContext.Provider, {
+        value: value
+    }, children));
+}
+const $4d5d1c15f39f6a14$var$ColumnNavCtx = (0, $ge7AF$createContext)(null);
+function $4d5d1c15f39f6a14$export$91cb5ac808759b34(defaultArgs = {
+    col_id: 495,
+    unit_id: null
+}) {
+    const ctx = (0, $ge7AF$useContext)($4d5d1c15f39f6a14$var$ColumnNavCtx);
+    if (ctx != null) return ctx;
+    const [columnArgs, setColumnArgs] = (0, $ge7AF$useState)($4d5d1c15f39f6a14$var$extractColumnArgs((0, $ge7AF$getQueryString)(window.location.search)) ?? defaultArgs);
+    (0, $ge7AF$useEffect)(()=>(0, $ge7AF$setQueryString)(columnArgs), [
+        columnArgs
+    ]);
+    const { col_id: col_id, project_id: project_id, status_code: status_code } = columnArgs;
+    const setCurrentColumn = (obj)=>{
+        let args = obj;
+        if ("properties" in obj) args = {
+            col_id: obj.properties.col_id,
+            project_id: project_id,
+            status_code: status_code
+        };
+        // Set query string
+        (0, $ge7AF$setQueryString)(args);
+        setColumnArgs(args);
+    };
+    return [
+        columnArgs,
+        setCurrentColumn
+    ];
+}
+function $4d5d1c15f39f6a14$var$extractColumnArgs(search) {
+    const { col_id: col_id, unit_id: unit_id, project_id: project_id, status_code: status_code } = search;
+    if (col_id == null) return null;
+    return {
+        col_id: col_id,
+        unit_id: unit_id,
+        project_id: project_id,
+        status_code: status_code
+    };
+}
+function $4d5d1c15f39f6a14$export$36fed9e0f93a8fde({ children: children, ...defaultArgs }) {
+    const value = $4d5d1c15f39f6a14$export$91cb5ac808759b34(defaultArgs);
+    return (0, $ge7AF$macrostrathyper)($4d5d1c15f39f6a14$var$ColumnNavCtx.Provider, {
+        value: value
+    }, children);
+}
+function $4d5d1c15f39f6a14$export$70f5ee19650fc7d1({ units: units }) {
+    const selectedUnit = $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da();
+    const selectUnit = $4d5d1c15f39f6a14$export$77a278d5ca56e309();
+    const ix = units.findIndex((unit)=>unit.unit_id === selectedUnit?.unit_id);
+    const keyMap = {
+        38: ix - 1,
+        40: ix + 1
+    };
+    (0, $ge7AF$useKeyHandler)((event)=>{
+        const nextIx = keyMap[event.keyCode];
+        if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;
+        selectUnit(units[nextIx], null, null);
+        event.stopPropagation();
+    }, [
+        units,
+        ix
+    ]);
+    return null;
+}
+
+
+export {$4d5d1c15f39f6a14$export$77a278d5ca56e309 as useUnitSelectionDispatch, $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da as useSelectedUnit, $4d5d1c15f39f6a14$export$f19d75b1d4b676a4 as UnitSelectionProvider, $4d5d1c15f39f6a14$export$91cb5ac808759b34 as useColumnNav, $4d5d1c15f39f6a14$export$36fed9e0f93a8fde as ColumnNavProvider, $4d5d1c15f39f6a14$export$70f5ee19650fc7d1 as UnitKeyboardNavigation};
+//# sourceMappingURL=selection.add9f8b0.js.map

package/dist/selection.add9f8b0.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/column-views/src/units/selection.ts"],"sourcesContent":["import { BaseUnit } from \"@macrostrat/api-types\";\nimport h from \"@macrostrat/hyper\";\nimport {\n  getQueryString,\n  setQueryString,\n  useKeyHandler,\n} from \"@macrostrat/ui-components\";\nimport {\n  Dispatch,\n  SetStateAction,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  ReactNode,\n  useCallback,\n} from \"react\";\n\ntype UnitSelectDispatch = (\n  unit: BaseUnit | null,\n  target: HTMLElement | null,\n  event: Event | null\n) => void;\n\nconst UnitSelectionContext = createContext<BaseUnit | null>(null);\nconst DispatchContext = createContext<UnitSelectDispatch | null>(null);\n\nexport function useUnitSelectionDispatch() {\n  return useContext(DispatchContext);\n}\n\nexport function useSelectedUnit() {\n  return useContext(UnitSelectionContext);\n}\n\nexport interface UnitSelectionProps<T extends BaseUnit> {\n  children: React.ReactNode;\n  unit: T | null;\n  setUnit: Dispatch<SetStateAction<T>>;\n  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;\n}\n\nexport function UnitSelectionProvider<T extends BaseUnit>(\n  props: Partial<UnitSelectionProps<T>>\n) {\n  const { unit, setUnit, onUnitSelected, children } = props;\n\n  if (unit == null && setUnit == null) {\n    return h(StatefulUnitSelectionProvider, props);\n  }\n\n  return h(\n    BaseUnitSelectionProvider,\n    { unit, setUnit, onUnitSelected },\n    children\n  );\n}\n\nfunction StatefulUnitSelectionProvider<T extends BaseUnit>(props: {\n  children: ReactNode;\n  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;\n}) {\n  const [unit, setUnit] = useState<T | null>(null);\n\n  return h(BaseUnitSelectionProvider, { ...props, unit, setUnit });\n}\n\nfunction BaseUnitSelectionProvider<T extends BaseUnit>({\n  children,\n  unit,\n  setUnit,\n  onUnitSelected,\n}: UnitSelectionProps<T>) {\n  const value = useMemo(() => unit, [unit?.unit_id]);\n\n  const _onUnitSelected = useCallback(\n    (u: T, target: HTMLElement, event: Event) => {\n      let newUnit = u;\n      setUnit(newUnit);\n      onUnitSelected?.(newUnit, target, event);\n    },\n    [setUnit, onUnitSelected]\n  );\n\n  return h(\n    DispatchContext.Provider,\n    { value: _onUnitSelected },\n    h(UnitSelectionContext.Provider, { value }, children)\n  );\n}\n\nexport interface ColumnArgs {\n  col_id?: number;\n  unit_id?: number;\n  project_id?: number;\n  status_code?: \"in process\";\n}\n\ntype ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];\n\nconst ColumnNavCtx = createContext<ColumnManagerData | null>(null);\n\nexport function useColumnNav(\n  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null }\n): ColumnManagerData {\n  const ctx = useContext(ColumnNavCtx);\n  if (ctx != null) return ctx;\n\n  const [columnArgs, setColumnArgs] = useState<ColumnArgs>(\n    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs\n  );\n\n  useEffect(() => setQueryString(columnArgs), [columnArgs]);\n\n  const { col_id, project_id, status_code } = columnArgs;\n\n  const setCurrentColumn = (obj) => {\n    let args = obj;\n    if (\"properties\" in obj) {\n      args = { col_id: obj.properties.col_id, project_id, status_code };\n    }\n    // Set query string\n    setQueryString(args);\n    setColumnArgs(args);\n  };\n\n  return [columnArgs, setCurrentColumn];\n}\n\nfunction extractColumnArgs(search: any): ColumnArgs | null {\n  const { col_id, unit_id, project_id, status_code } = search;\n  if (col_id == null) return null;\n  return { col_id, unit_id, project_id, status_code };\n}\n\nexport function ColumnNavProvider({ children, ...defaultArgs }) {\n  const value = useColumnNav(defaultArgs as any);\n  return h(ColumnNavCtx.Provider, { value }, children);\n}\n\nexport function UnitKeyboardNavigation<T extends BaseUnit>({\n  units,\n}: {\n  units: T[];\n}) {\n  const selectedUnit = useSelectedUnit();\n  const selectUnit = useUnitSelectionDispatch();\n\n  const ix = units.findIndex((unit) => unit.unit_id === selectedUnit?.unit_id);\n\n  const keyMap = {\n    38: ix - 1,\n    40: ix + 1,\n  };\n\n  useKeyHandler(\n    (event) => {\n      const nextIx = keyMap[event.keyCode];\n      if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;\n      selectUnit(units[nextIx], null, null);\n      event.stopPropagation();\n    },\n    [units, ix]\n  );\n  return null;\n}\n"],"names":[],"version":3,"file":"selection.add9f8b0.js.map"}

package/dist/store.c5271371.js

@@ -0,0 +1,18 @@
+import {createContext as $3Bwds$createContext, useContext as $3Bwds$useContext} from "react";
+import $3Bwds$macrostrathyper from "@macrostrat/hyper";
+
+
+
+const $1fcb9b8d7da394a3$var$MacrostratUnitsContext = (0, $3Bwds$createContext)(null);
+function $1fcb9b8d7da394a3$export$e5fe24ae4f287040({ children: children, units: units }) {
+    return (0, $3Bwds$macrostrathyper)($1fcb9b8d7da394a3$var$MacrostratUnitsContext.Provider, {
+        value: units
+    }, children);
+}
+function $1fcb9b8d7da394a3$export$6fb40844db555b2() {
+    return (0, $3Bwds$useContext)($1fcb9b8d7da394a3$var$MacrostratUnitsContext);
+}
+
+
+export {$1fcb9b8d7da394a3$export$e5fe24ae4f287040 as MacrostratUnitsProvider, $1fcb9b8d7da394a3$export$6fb40844db555b2 as useMacrostratUnits};
+//# sourceMappingURL=store.c5271371.js.map

package/dist/store.c5271371.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAGA,MAAM,+CAAyB,CAAA,GAAA,oBAAY,EAAE;AAEtC,SAAS,0CAAwB,YAAE,QAAQ,SAAE,KAAK,EAAE;IACzD,OAAO,CAAA,GAAA,sBAAA,EAAE,6CAAuB,QAAQ,EAAE;QAAE,OAAO;IAAM,GAAG;AAC9D;AAEO,SAAS;IACd,OAAO,CAAA,GAAA,iBAAS,EAAE;AACpB","sources":["packages/column-views/src/store.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport h from \"@macrostrat/hyper\";\n\nconst MacrostratUnitsContext = createContext(null);\n\nexport function MacrostratUnitsProvider({ children, units }) {\n  return h(MacrostratUnitsContext.Provider, { value: units }, children);\n}\n\nexport function useMacrostratUnits() {\n  return useContext(MacrostratUnitsContext);\n}\n"],"names":[],"version":3,"file":"store.c5271371.js.map"}

package/dist/types.ff938b22.js

@@ -0,0 +1,18 @@
+var $faf1eba02aecac6a$export$6d217bb9de27dba7 = /*#__PURE__*/ function(MacrostratAxisKey) {
+    MacrostratAxisKey["AGE"] = "age";
+    MacrostratAxisKey["POS"] = "pos";
+    return MacrostratAxisKey;
+}($faf1eba02aecac6a$export$6d217bb9de27dba7 || {});
+function $faf1eba02aecac6a$export$ab2a19f8a72df19b(t) {
+    switch(t){
+        case "age":
+            return "age";
+        case "height":
+        case "depth":
+            return "pos";
+    }
+}
+
+
+export {$faf1eba02aecac6a$export$6d217bb9de27dba7 as MacrostratAxisKey, $faf1eba02aecac6a$export$ab2a19f8a72df19b as transformAxisType};
+//# sourceMappingURL=types.ff938b22.js.map

package/dist/types.ff938b22.js.map

@@ -0,0 +1 @@
+{"mappings":"AAUA,IAAA,AAAK,mEAAA;;;WAAA;EAAA;AAKL,SAAS,0CAAkB,CAAiB;IAC1C,OAAQ;QACN,KAAK;YACH;QACF,KAAK;QACL,KAAK;YACH;IACJ;AACF","sources":["packages/column-views/src/units/types.ts"],"sourcesContent":["import { ColumnAxisType } from \"@macrostrat/column-components\";\nexport interface IUnit {\n  unit_id: number;\n  col_id: number;\n  section_id: number;\n  t_age: number;\n  b_age: number;\n  [x: string]: any;\n}\n\nenum MacrostratAxisKey {\n  AGE = \"age\",\n  POS = \"pos\"\n}\n\nfunction transformAxisType(t: ColumnAxisType): MacrostratAxisKey {\n  switch (t) {\n    case \"age\":\n      return MacrostratAxisKey.AGE;\n    case \"height\":\n    case \"depth\":\n      return MacrostratAxisKey.POS;\n  }\n}\n\nexport { MacrostratAxisKey, transformAxisType };\n"],"names":[],"version":3,"file":"types.ff938b22.js.map"}

package/dist/unit-details.0c1edd00.js

@@ -0,0 +1,209 @@
+import "./index.module.de76feb2.css";
+import $33VLW$indexmodule8fad0020js from "./index.module.8fad0020.js";
+import {useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309} from "./selection.add9f8b0.js";
+import {useMacrostratUnits as $1fcb9b8d7da394a3$export$6fb40844db555b2} from "./store.c5271371.js";
+import $33VLW$macrostrathyper from "@macrostrat/hyper";
+import {JSONView as $33VLW$JSONView} from "@macrostrat/ui-components";
+import {Button as $33VLW$Button} from "@blueprintjs/core";
+import {useState as $33VLW$useState} from "react";
+import {DataField as $33VLW$DataField, LithologyList as $33VLW$LithologyList, EnvironmentsList as $33VLW$EnvironmentsList, ItemList as $33VLW$ItemList, Interval as $33VLW$Interval} from "@macrostrat/data-components";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+const $5e9557c2513b08ab$var$h = (0, $33VLW$macrostrathyper).styled((0, ($parcel$interopDefault($33VLW$indexmodule8fad0020js))));
+function $5e9557c2513b08ab$export$fbd245232df17557({ unit: unit, onClose: onClose }) {
+    const [showJSON, setShowJSON] = (0, $33VLW$useState)(false);
+    let content = null;
+    if (showJSON) content = $5e9557c2513b08ab$var$h((0, $33VLW$JSONView), {
+        data: unit,
+        showRoot: false
+    });
+    else content = $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$UnitDetailsContent, {
+        unit: unit
+    });
+    return $5e9557c2513b08ab$var$h("div.unit-details-panel", [
+        $5e9557c2513b08ab$var$h($5e9557c2513b08ab$export$fc503c39cc5cff43, {
+            onClose: onClose,
+            title: unit.unit_name,
+            id: unit.unit_id,
+            actions: [
+                $5e9557c2513b08ab$var$h((0, $33VLW$Button), {
+                    icon: "code",
+                    small: true,
+                    minimal: true,
+                    className: "json-view-toggle",
+                    onClick () {
+                        setShowJSON(!showJSON);
+                    }
+                })
+            ]
+        }),
+        $5e9557c2513b08ab$var$h("div.unit-details-content", [
+            content
+        ])
+    ]);
+}
+function $5e9557c2513b08ab$export$fc503c39cc5cff43({ title: title, id: id, onClose: onClose, actions: actions = null }) {
+    return $5e9557c2513b08ab$var$h("header.legend-panel-header", [
+        $5e9557c2513b08ab$var$h.if(title != null)("h3", title),
+        $5e9557c2513b08ab$var$h("div.spacer"),
+        $5e9557c2513b08ab$var$h.if(id != null)("code", id),
+        actions,
+        $5e9557c2513b08ab$var$h.if(onClose != null)((0, $33VLW$Button), {
+            icon: "cross",
+            minimal: true,
+            small: true,
+            onClick () {
+                onClose();
+            }
+        })
+    ]);
+}
+function $5e9557c2513b08ab$var$UnitDetailsContent({ unit: unit }) {
+    let outcrop = unit.outcrop;
+    if (outcrop == "both") outcrop = "surface and subsurface";
+    return $5e9557c2513b08ab$var$h("div.unit-details-content", [
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Thickness",
+            value: `${unit.min_thick}\u{2013}${unit.max_thick}`,
+            unit: "m"
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$LithologyList), {
+            lithologies: unit.lith
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Age range",
+            value: `${unit.b_age}\u{2013}${unit.t_age}`,
+            unit: "Ma"
+        }),
+        $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$IntervalField, {
+            unit: unit
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$EnvironmentsList), {
+            environments: unit.environ
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Outcrop",
+            value: outcrop
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Stratigraphic name"
+        }, $5e9557c2513b08ab$var$h("span.strat-name-id", unit.strat_name_id)),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Above"
+        }, $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$UnitIDList, {
+            units: unit.units_above
+        })),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Below"
+        }, $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$UnitIDList, {
+            units: unit.units_below
+        })),
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Color"
+        }, $5e9557c2513b08ab$var$h("span.color-swatch", {
+            style: {
+                backgroundColor: unit.color
+            }
+        }))
+    ]);
+}
+function $5e9557c2513b08ab$var$UnitIDList({ units: units }) {
+    const u1 = units.filter((d)=>d != 0);
+    const dispatch = (0, $4d5d1c15f39f6a14$export$77a278d5ca56e309)();
+    const allUnits = (0, $1fcb9b8d7da394a3$export$6fb40844db555b2)();
+    if (u1.length === 0) return $5e9557c2513b08ab$var$h("span.no-units", "None");
+    let onClickHandler = null;
+    let tag = "span";
+    if (dispatch != null) {
+        onClickHandler = (id)=>(evt)=>{
+                console.log(units);
+                const unit = allUnits.find((d)=>d.unit_id == id);
+                dispatch(unit, null, null);
+                evt.stopPropagation();
+            };
+        tag = "a";
+    }
+    return $5e9557c2513b08ab$var$h((0, $33VLW$ItemList), {
+        className: "unit-id-list"
+    }, [
+        u1.map((unit)=>{
+            return $5e9557c2513b08ab$var$h(tag, {
+                className: "unit-id",
+                onClick: onClickHandler?.(unit)
+            }, unit);
+        })
+    ]);
+}
+function $5e9557c2513b08ab$var$IntervalField({ unit: unit }) {
+    return $5e9557c2513b08ab$var$h([
+        $5e9557c2513b08ab$var$h((0, $33VLW$DataField), {
+            label: "Intervals"
+        }, $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$IntervalProportions, {
+            unit: unit
+        }))
+    ]);
+}
+function $5e9557c2513b08ab$var$IntervalProportions({ unit: unit }) {
+    const i0 = unit.b_int_id;
+    const i1 = unit.t_int_id;
+    let b_prop = unit.b_prop ?? 0;
+    let t_prop = unit.t_prop ?? 1;
+    if (i0 === i1 && b_prop === 0 && t_prop === 1) // We have a single interval with undefined proportions
+    return $5e9557c2513b08ab$var$h((0, $33VLW$Interval), {
+        interval: {
+            id: i0,
+            name: unit.b_int_name
+        }
+    });
+    return $5e9557c2513b08ab$var$h((0, $33VLW$ItemList), {
+        className: "interval-proportions"
+    }, [
+        $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$Proportion, {
+            value: b_prop
+        }),
+        $5e9557c2513b08ab$var$h.if(i0 != i1)((0, $33VLW$Interval), {
+            interval: {
+                id: i0,
+                name: unit.b_int_name
+            },
+            proportion: b_prop
+        }),
+        $5e9557c2513b08ab$var$h("span.sep", "to"),
+        $5e9557c2513b08ab$var$h($5e9557c2513b08ab$var$Proportion, {
+            value: t_prop
+        }),
+        $5e9557c2513b08ab$var$h((0, $33VLW$Interval), {
+            interval: {
+                id: i1,
+                name: unit.t_int_name
+            },
+            proportion: t_prop
+        })
+    ]);
+}
+const $5e9557c2513b08ab$var$formatProportion = (d)=>{
+    if (d == null) return null;
+    return d.toFixed(1);
+};
+function $5e9557c2513b08ab$var$Proportion({ value: value }) {
+    let content = null;
+    if (value == 0) content = "base";
+    else if (value == 1) content = "top";
+    else content = $5e9557c2513b08ab$var$formatProportion(value * 100) + "%";
+    return $5e9557c2513b08ab$var$h("span.proportion", content);
+}
+
+
+export {$5e9557c2513b08ab$export$fbd245232df17557 as UnitDetailsPanel, $5e9557c2513b08ab$export$fc503c39cc5cff43 as LegendPanelHeader};
+//# sourceMappingURL=unit-details.0c1edd00.js.map

package/dist/unit-details.0c1edd00.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,uEAAK;AAErB,SAAS,0CAAiB,QAC/B,IAAI,WACJ,OAAO,EAIR;IACC,MAAM,CAAC,UAAU,YAAY,GAAG,CAAA,GAAA,eAAO,EAAE;IAEzC,IAAI,UAAU;IACd,IAAI,UACF,UAAU,wBAAE,CAAA,GAAA,eAAO,GAAG;QAAE,MAAM;QAAM,UAAU;IAAM;SAEpD,UAAU,wBAAE,0CAAoB;cAAE;IAAK;IAGzC,OAAO,wBAAE,0BAA0B;QACjC,wBAAE,2CAAmB;qBACnB;YACA,OAAO,KAAK,SAAS;YACrB,IAAI,KAAK,OAAO;YAChB,SAAS;gBACP,wBAAE,CAAA,GAAA,aAAK,GAAG;oBACR,MAAM;oBACN,OAAO;oBACP,SAAS;oBACT,WAAW;oBACX;wBACE,YAAY,CAAC;oBACf;gBACF;aACD;QACH;QACA,wBAAE,4BAA4B;YAAC;SAAQ;KACxC;AACH;AAEO,SAAS,0CAAkB,SAAE,KAAK,MAAE,EAAE,WAAE,OAAO,WAAE,UAAU,MAAM;IACtE,OAAO,wBAAE,8BAA8B;QACrC,wBAAE,EAAE,CAAC,SAAS,MAAM,MAAM;QAC1B,wBAAE;QACF,wBAAE,EAAE,CAAC,MAAM,MAAM,QAAQ;QACzB;QACA,wBAAE,EAAE,CAAC,WAAW,MAAM,CAAA,GAAA,aAAK,GAAG;YAC5B,MAAM;YACN,SAAS;YACT,OAAO;YACP;gBACE;YACF;QACF;KACD;AACH;AAEA,SAAS,yCAAmB,QAAE,IAAI,EAAE;IAClC,IAAI,UAAU,KAAK,OAAO;IAC1B,IAAI,WAAW,QACb,UAAU;IAGZ,OAAO,wBAAE,4BAA4B;QACnC,wBAAE,CAAA,GAAA,gBAAQ,GAAG;YACX,OAAO;YACP,OAAO,GAAG,KAAK,SAAS,CAAC,QAAC,EAAE,KAAK,SAAS,EAAE;YAC5C,MAAM;QACR;QACA,wBAAE,CAAA,GAAA,oBAAY,GAAG;YAAE,aAAa,KAAK,IAAI;QAAC;QAC1C,wBAAE,CAAA,GAAA,gBAAQ,GAAG;YACX,OAAO;YACP,OAAO,GAAG,KAAK,KAAK,CAAC,QAAC,EAAE,KAAK,KAAK,EAAE;YACpC,MAAM;QACR;QACA,wBAAE,qCAAe;kBAAE;QAAK;QACxB,wBAAE,CAAA,GAAA,uBAAe,GAAG;YAAE,cAAc,KAAK,OAAO;QAAC;QACjD,wBAAE,CAAA,GAAA,gBAAQ,GAAG;YAAE,OAAO;YAAW,OAAO;QAAQ;QAChD,wBACE,CAAA,GAAA,gBAAQ,GACR;YACE,OAAO;QACT,GACA,wBAAE,sBAAsB,KAAK,aAAa;QAE5C,wBACE,CAAA,GAAA,gBAAQ,GACR;YAAE,OAAO;QAAQ,GACjB,wBAAE,kCAAY;YAAE,OAAO,KAAK,WAAW;QAAC;QAE1C,wBACE,CAAA,GAAA,gBAAQ,GACR;YAAE,OAAO;QAAQ,GACjB,wBAAE,kCAAY;YAAE,OAAO,KAAK,WAAW;QAAC;QAE1C,wBACE,CAAA,GAAA,gBAAQ,GACR;YAAE,OAAO;QAAQ,GACjB,wBAAE,qBAAqB;YAAE,OAAO;gBAAE,iBAAiB,KAAK,KAAK;YAAC;QAAE;KAEnE;AACH;AAEA,SAAS,iCAAW,SAAE,KAAK,EAAE;IAC3B,MAAM,KAAK,MAAM,MAAM,CAAC,CAAC,IAAM,KAAK;IACpC,MAAM,WAAW,CAAA,GAAA,yCAAuB;IACxC,MAAM,WAAW,CAAA,GAAA,wCAAiB;IAElC,IAAI,GAAG,MAAM,KAAK,GAChB,OAAO,wBAAE,iBAAiB;IAG5B,IAAI,iBAAiB;IACrB,IAAI,MAAM;IACV,IAAI,YAAY,MAAM;QACpB,iBAAiB,CAAC,KAAe,CAAC;gBAChC,QAAQ,GAAG,CAAC;gBACZ,MAAM,OAAO,SAAS,IAAI,CAAC,CAAC,IAAM,EAAE,OAAO,IAAI;gBAC/C,SAAS,MAAM,MAAM;gBACrB,IAAI,eAAe;YACrB;QACA,MAAM;IACR;IAEA,OAAO,wBAAE,CAAA,GAAA,eAAO,GAAG;QAAE,WAAW;IAAe,GAAG;QAChD,GAAG,GAAG,CAAC,CAAC;YACN,OAAO,wBACL,KACA;gBAAE,WAAW;gBAAW,SAAS,iBAAiB;YAAM,GACxD;QAEJ;KACD;AACH;AAEA,SAAS,oCAAc,QAAE,IAAI,EAAE;IAC7B,OAAO,wBAAE;QACP,wBACE,CAAA,GAAA,gBAAQ,GACR;YACE,OAAO;QACT,GACA,wBAAE,2CAAqB;kBAAE;QAAK;KAEjC;AACH;AAEA,SAAS,0CAAoB,QAAE,IAAI,EAAE;IACnC,MAAM,KAAK,KAAK,QAAQ;IACxB,MAAM,KAAK,KAAK,QAAQ;IACxB,IAAI,SAAS,KAAK,MAAM,IAAI;IAC5B,IAAI,SAAS,KAAK,MAAM,IAAI;IAE5B,IAAI,OAAO,MAAM,WAAW,KAAK,WAAW,GAC1C,uDAAuD;IACvD,OAAO,wBAAE,CAAA,GAAA,eAAO,GAAG;QACjB,UAAU;YACR,IAAI;YACJ,MAAM,KAAK,UAAU;QACvB;IACF;IAGF,OAAO,wBAAE,CAAA,GAAA,eAAO,GAAG;QAAE,WAAW;IAAuB,GAAG;QACxD,wBAAE,kCAAY;YAAE,OAAO;QAAO;QAC9B,wBAAE,EAAE,CAAC,MAAM,IAAI,CAAA,GAAA,eAAO,GAAG;YACvB,UAAU;gBACR,IAAI;gBACJ,MAAM,KAAK,UAAU;YACvB;YACA,YAAY;QACd;QACA,wBAAE,YAAY;QACd,wBAAE,kCAAY;YAAE,OAAO;QAAO;QAC9B,wBAAE,CAAA,GAAA,eAAO,GAAG;YACV,UAAU;gBACR,IAAI;gBACJ,MAAM,KAAK,UAAU;YACvB;YACA,YAAY;QACd;KACD;AACH;AAEA,MAAM,yCAAmB,CAAC;IACxB,IAAI,KAAK,MAAM,OAAO;IACtB,OAAO,EAAE,OAAO,CAAC;AACnB;AAEA,SAAS,iCAAW,SAAE,KAAK,EAAE;IAC3B,IAAI,UAAU;IACd,IAAI,SAAS,GACX,UAAU;SACL,IAAI,SAAS,GAClB,UAAU;SAEV,UAAU,uCAAiB,QAAQ,OAAO;IAG5C,OAAO,wBAAE,mBAAmB;AAC9B","sources":["packages/column-views/src/unit-details/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./index.module.sass\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { Button } from \"@blueprintjs/core\";\nimport { useState } from \"react\";\nimport {\n  DataField,\n  EnvironmentsList,\n  Interval,\n  ItemList,\n  LithologyList,\n} from \"@macrostrat/data-components\";\nimport { useUnitSelectionDispatch } from \"../units/selection\";\nimport { useMacrostratUnits } from \"../store\";\n\nconst h = hyper.styled(styles);\n\nexport function UnitDetailsPanel({\n  unit,\n  onClose,\n}: {\n  unit: any;\n  onClose?: any;\n}) {\n  const [showJSON, setShowJSON] = useState(false);\n\n  let content = null;\n  if (showJSON) {\n    content = h(JSONView, { data: unit, showRoot: false });\n  } else {\n    content = h(UnitDetailsContent, { unit });\n  }\n\n  return h(\"div.unit-details-panel\", [\n    h(LegendPanelHeader, {\n      onClose,\n      title: unit.unit_name,\n      id: unit.unit_id,\n      actions: [\n        h(Button, {\n          icon: \"code\",\n          small: true,\n          minimal: true,\n          className: \"json-view-toggle\",\n          onClick() {\n            setShowJSON(!showJSON);\n          },\n        }),\n      ],\n    }),\n    h(\"div.unit-details-content\", [content]),\n  ]);\n}\n\nexport function LegendPanelHeader({ title, id, onClose, actions = null }) {\n  return h(\"header.legend-panel-header\", [\n    h.if(title != null)(\"h3\", title),\n    h(\"div.spacer\"),\n    h.if(id != null)(\"code\", id),\n    actions,\n    h.if(onClose != null)(Button, {\n      icon: \"cross\",\n      minimal: true,\n      small: true,\n      onClick() {\n        onClose();\n      },\n    }),\n  ]);\n}\n\nfunction UnitDetailsContent({ unit }) {\n  let outcrop = unit.outcrop;\n  if (outcrop == \"both\") {\n    outcrop = \"surface and subsurface\";\n  }\n\n  return h(\"div.unit-details-content\", [\n    h(DataField, {\n      label: \"Thickness\",\n      value: `${unit.min_thick}–${unit.max_thick}`,\n      unit: \"m\",\n    }),\n    h(LithologyList, { lithologies: unit.lith }),\n    h(DataField, {\n      label: \"Age range\",\n      value: `${unit.b_age}–${unit.t_age}`,\n      unit: \"Ma\",\n    }),\n    h(IntervalField, { unit }),\n    h(EnvironmentsList, { environments: unit.environ }),\n    h(DataField, { label: \"Outcrop\", value: outcrop }),\n    h(\n      DataField,\n      {\n        label: \"Stratigraphic name\",\n      },\n      h(\"span.strat-name-id\", unit.strat_name_id)\n    ),\n    h(\n      DataField,\n      { label: \"Above\" },\n      h(UnitIDList, { units: unit.units_above })\n    ),\n    h(\n      DataField,\n      { label: \"Below\" },\n      h(UnitIDList, { units: unit.units_below })\n    ),\n    h(\n      DataField,\n      { label: \"Color\" },\n      h(\"span.color-swatch\", { style: { backgroundColor: unit.color } })\n    ),\n  ]);\n}\n\nfunction UnitIDList({ units }) {\n  const u1 = units.filter((d) => d != 0);\n  const dispatch = useUnitSelectionDispatch();\n  const allUnits = useMacrostratUnits();\n\n  if (u1.length === 0) {\n    return h(\"span.no-units\", \"None\");\n  }\n\n  let onClickHandler = null;\n  let tag = \"span\";\n  if (dispatch != null) {\n    onClickHandler = (id: number) => (evt) => {\n      console.log(units);\n      const unit = allUnits.find((d) => d.unit_id == id);\n      dispatch(unit, null, null);\n      evt.stopPropagation();\n    };\n    tag = \"a\";\n  }\n\n  return h(ItemList, { className: \"unit-id-list\" }, [\n    u1.map((unit) => {\n      return h(\n        tag,\n        { className: \"unit-id\", onClick: onClickHandler?.(unit) },\n        unit\n      );\n    }),\n  ]);\n}\n\nfunction IntervalField({ unit }) {\n  return h([\n    h(\n      DataField,\n      {\n        label: \"Intervals\",\n      },\n      h(IntervalProportions, { unit })\n    ),\n  ]);\n}\n\nfunction IntervalProportions({ unit }) {\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n  let b_prop = unit.b_prop ?? 0;\n  let t_prop = unit.t_prop ?? 1;\n\n  if (i0 === i1 && b_prop === 0 && t_prop === 1) {\n    // We have a single interval with undefined proportions\n    return h(Interval, {\n      interval: {\n        id: i0,\n        name: unit.b_int_name,\n      },\n    });\n  }\n\n  return h(ItemList, { className: \"interval-proportions\" }, [\n    h(Proportion, { value: b_prop }),\n    h.if(i0 != i1)(Interval, {\n      interval: {\n        id: i0,\n        name: unit.b_int_name,\n      },\n      proportion: b_prop,\n    }),\n    h(\"span.sep\", \"to\"),\n    h(Proportion, { value: t_prop }),\n    h(Interval, {\n      interval: {\n        id: i1,\n        name: unit.t_int_name,\n      },\n      proportion: t_prop,\n    }),\n  ]);\n}\n\nconst formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n"],"names":[],"version":3,"file":"unit-details.0c1edd00.js.map"}

package/dist/units.5ec6a44c.js

@@ -0,0 +1,42 @@
+import {UnitNamesColumn as $bc17276da4abb183$export$594d19cdd88f8c16} from "./names.ab14789e.js";
+import {UnitBoxes as $d254716a820e9c85$export$5d1cdfabe8dc8085} from "./boxes.6d3192e6.js";
+import {TrackedLabeledUnit as $8c8238faa5cde49c$export$f613830566442374, AnnotatedUnitsColumn as $8c8238faa5cde49c$export$d8c3f2fdd653a082, CompositeUnitsColumn as $8c8238faa5cde49c$export$a6684360fef0406e, CompositeUnitComponent as $8c8238faa5cde49c$export$1dfa200d57964eee} from "./composite.494beffc.js";
+import {MacrostratAxisKey as $faf1eba02aecac6a$export$6d217bb9de27dba7, transformAxisType as $faf1eba02aecac6a$export$ab2a19f8a72df19b} from "./types.ff938b22.js";
+import {useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309, useSelectedUnit as $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da, UnitSelectionProvider as $4d5d1c15f39f6a14$export$f19d75b1d4b676a4, useColumnNav as $4d5d1c15f39f6a14$export$91cb5ac808759b34, ColumnNavProvider as $4d5d1c15f39f6a14$export$36fed9e0f93a8fde, UnitKeyboardNavigation as $4d5d1c15f39f6a14$export$70f5ee19650fc7d1} from "./selection.add9f8b0.js";
+import $1FQbq$macrostrathyper from "@macrostrat/hyper";
+import {LithologyColumn as $1FQbq$LithologyColumn} from "@macrostrat/column-components";
+
+
+
+
+
+
+
+
+const $4c8184c4a7317749$export$3750278673318c9a = ({ width: width = 100 })=>{
+    /*
+  A column showing units with USGS color fill
+  */ return (0, $1FQbq$macrostrathyper)((0, $1FQbq$LithologyColumn), {
+        width: width
+    }, (0, $1FQbq$macrostrathyper)((0, $d254716a820e9c85$export$5d1cdfabe8dc8085)));
+};
+const $4c8184c4a7317749$export$2006342ddaa547c6 = (props)=>{
+    /*
+  A column with units and names either
+  overlapping or offset to the right
+  */ const { columnWidth: columnWidth, width: width, gutterWidth: gutterWidth = 0, labelOffset: labelOffset = 30 } = props;
+    return (0, $1FQbq$macrostrathyper)([
+        (0, $1FQbq$macrostrathyper)($4c8184c4a7317749$export$3750278673318c9a, {
+            width: columnWidth
+        }),
+        (0, $1FQbq$macrostrathyper)((0, $bc17276da4abb183$export$594d19cdd88f8c16), {
+            transform: `translate(${columnWidth + gutterWidth})`,
+            paddingLeft: labelOffset,
+            width: width - columnWidth - gutterWidth
+        })
+    ]);
+};
+
+
+export {$4c8184c4a7317749$export$3750278673318c9a as UnitsColumn, $4c8184c4a7317749$export$2006342ddaa547c6 as SimpleUnitsColumn, $8c8238faa5cde49c$export$f613830566442374 as TrackedLabeledUnit, $8c8238faa5cde49c$export$d8c3f2fdd653a082 as AnnotatedUnitsColumn, $8c8238faa5cde49c$export$a6684360fef0406e as CompositeUnitsColumn, $8c8238faa5cde49c$export$1dfa200d57964eee as CompositeUnitComponent, $faf1eba02aecac6a$export$6d217bb9de27dba7 as MacrostratAxisKey, $faf1eba02aecac6a$export$ab2a19f8a72df19b as transformAxisType, $4d5d1c15f39f6a14$export$77a278d5ca56e309 as useUnitSelectionDispatch, $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da as useSelectedUnit, $4d5d1c15f39f6a14$export$f19d75b1d4b676a4 as UnitSelectionProvider, $4d5d1c15f39f6a14$export$91cb5ac808759b34 as useColumnNav, $4d5d1c15f39f6a14$export$36fed9e0f93a8fde as ColumnNavProvider, $4d5d1c15f39f6a14$export$70f5ee19650fc7d1 as UnitKeyboardNavigation};
+//# sourceMappingURL=units.5ec6a44c.js.map

package/dist/units.5ec6a44c.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,4CAAc,CAAC,SAAE,QAAQ,KAAK;IAClC;;EAEA,GACA,OAAO,CAAA,GAAA,sBAAA,EAAE,CAAA,GAAA,sBAAc,GAAG;eAAE;IAAM,GAAG,CAAA,GAAA,sBAAA,EAAE,CAAA,GAAA,yCAAQ;AACjD;AAEA,MAAM,4CAAoB,CAAC;IACzB;;;EAGA,GACA,MAAM,eAAE,WAAW,SAAE,KAAK,eAAE,cAAc,gBAAG,cAAc,IAAI,GAAG;IAElE,OAAO,CAAA,GAAA,sBAAA,EAAE;QACP,CAAA,GAAA,sBAAA,EAAE,2CAAa;YACb,OAAO;QACT;QACA,CAAA,GAAA,sBAAA,EAAE,CAAA,GAAA,yCAAc,GAAG;YACjB,WAAW,CAAC,UAAU,EAAE,cAAc,YAAY,CAAC,CAAC;YACpD,aAAa;YACb,OAAO,QAAQ,cAAc;QAC/B;KACD;AACH","sources":["packages/column-views/src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport { LithologyColumn } from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes } from \"./boxes\";\n\nconst UnitsColumn = ({ width = 100 }) => {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n};\n\nconst 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 { UnitsColumn, SimpleUnitsColumn };\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./selection\";\n"],"names":[],"version":3,"file":"units.5ec6a44c.js.map"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@macrostrat/column-views",
+  "version": "1.0.0",
+  "description": "Data views for Macrostrat stratigraphic columns",
+  "main": "dist/index.js",
+  "type": "module",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && parcel build"
+  },
+  "dependencies": {
+    "@macrostrat/api-types": "^1.0.0",
+    "@macrostrat/column-components": "^1.0.0",
+    "@macrostrat/data-components": "^0.0.5",
+    "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/stratigraphy-utils": "^1.0.0",
+    "@macrostrat/svg-map-components": "^1.0.0",
+    "@macrostrat/timescale": "^2.1.0",
+    "@macrostrat/ui-components": "^4.1.0",
+    "@types/chroma-js": "^3",
+    "@types/d3-format": "^3",
+    "@types/d3-geo": "^3",
+    "@types/d3-shape": "^3",
+    "@types/topojson-client": "^3.1.5",
+    "@visx/axis": "^3.12.0",
+    "chroma-js": "^3.1.2",
+    "classnames": "^2.5.1",
+    "d3-array": "^3.2.4",
+    "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
+    "d3-geo-voronoi": "^2.1.0",
+    "d3-shape": "^3.2.0",
+    "react-spring": "^9.7.5",
+    "topojson-client": "^3.1.0",
+    "zustand": "^5.0.3"
+  },
+  "peerDependencies": {
+    "@blueprintjs/core": "^3.43.0 || ^4.3.0 || ^5.0.0",
+    "react": "^16.8.6||^17.0.0||^18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/column-views"
+  },
+  "devDependencies": {
+    "parcel": "^2.13.3",
+    "postcss": "^8.0.0",
+    "postcss-modules": "^6.0.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
+}

package/src/age-axis.ts

@@ -0,0 +1,42 @@
+import h from "@macrostrat/hyper";
+import {
+  ColumnSVG,
+  ColumnAxis,
+  ColumnContext,
+} from "@macrostrat/column-components";
+import { useContext } from "react";
+// import "@macrostrat/timescale/dist/timescale.css";
+//
+const AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {
+  const { pixelHeight } = useContext(ColumnContext);
+  // A tick roughly every 40 pixels
+  let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);
+
+  return h("g.axis", { transform: "translate(20 0)" }, [
+    h(ColumnAxis, {
+      ticks: v,
+      showDomain,
+    }),
+  ]);
+};
+
+export function AgeAxis(props) {
+  const {
+    ticks,
+    tickSpacing,
+    showLabel = true,
+    paddingV = 10,
+    showDomain,
+    ...rest
+  } = props;
+
+  // Not sure where this extra 5px comes from.
+  return h("div.column.age-axis", [
+    h.if(showLabel)("div.age-axis-label", "Age (Ma)"),
+    h(
+      ColumnSVG,
+      { paddingV, ...rest },
+      h(AgeAxisCore, { ticks, tickSpacing, showDomain })
+    ),
+  ]);
+}