@macrostrat/column-views 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+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).
+
+## [1.0.0] - 2025-02-14
+
+- First full release of the `@macrostrat/column-views` library
+- Centralize column rendering components
+- Create storybook examples
+- Improve Typescript coverage
+- Start process of simplifying React components
+- Switch to `zustand` for some state management

package/README.md

@@ -0,0 +1,3 @@
+# Column views
+
+Viewers for Macrostrat stratigraphic columns and correlation diagrams.

package/dist/age-axis.7ce58d66.js

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

package/dist/age-axis.7ce58d66.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAOA,qDAAqD;AACrD,EAAE;AACF,MAAM,oCAAc,CAAC,SAAE,KAAK,eAAE,cAAc,gBAAI,aAAa,OAAO;IAClE,MAAM,eAAE,WAAW,EAAE,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,oBAAY;IAC/C,iCAAiC;IACjC,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,cAAc,cAAc;IAExD,OAAO,CAAA,GAAA,sBAAA,EAAE,UAAU;QAAE,WAAW;IAAkB,GAAG;QACnD,CAAA,GAAA,sBAAA,EAAE,CAAA,GAAA,iBAAS,GAAG;YACZ,OAAO;wBACP;QACF;KACD;AACH;AAEO,SAAS,0CAAQ,KAAK;IAC3B,MAAM,SACJ,KAAK,eACL,WAAW,aACX,YAAY,gBACZ,WAAW,gBACX,UAAU,EACV,GAAG,MACJ,GAAG;IAEJ,4CAA4C;IAC5C,OAAO,CAAA,GAAA,sBAAA,EAAE,uBAAuB;QAC9B,CAAA,GAAA,sBAAA,EAAE,EAAE,CAAC,WAAW,sBAAsB;QACtC,CAAA,GAAA,sBAAA,EACE,CAAA,GAAA,gBAAQ,GACR;sBAAE;YAAU,GAAG,IAAI;QAAC,GACpB,CAAA,GAAA,sBAAA,EAAE,mCAAa;mBAAE;yBAAO;wBAAa;QAAW;KAEnD;AACH","sources":["packages/column-views/src/age-axis.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  ColumnSVG,\n  ColumnAxis,\n  ColumnContext,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\n// import \"@macrostrat/timescale/dist/timescale.css\";\n//\nconst AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {\n  const { pixelHeight } = useContext(ColumnContext);\n  // A tick roughly every 40 pixels\n  let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);\n\n  return h(\"g.axis\", { transform: \"translate(20 0)\" }, [\n    h(ColumnAxis, {\n      ticks: v,\n      showDomain,\n    }),\n  ]);\n};\n\nexport function AgeAxis(props) {\n  const {\n    ticks,\n    tickSpacing,\n    showLabel = true,\n    paddingV = 10,\n    showDomain,\n    ...rest\n  } = props;\n\n  // Not sure where this extra 5px comes from.\n  return h(\"div.column.age-axis\", [\n    h.if(showLabel)(\"div.age-axis-label\", \"Age (Ma)\"),\n    h(\n      ColumnSVG,\n      { paddingV, ...rest },\n      h(AgeAxisCore, { ticks, tickSpacing, showDomain })\n    ),\n  ]);\n}\n"],"names":[],"version":3,"file":"age-axis.7ce58d66.js.map"}

package/dist/boxes.6d3192e6.js

@@ -0,0 +1,164 @@
+import {resolveID as $d3e69bd163d41f63$export$7be7d732f3de9464, scalePattern as $d3e69bd163d41f63$export$e8deec7b02ce51eb} from "./resolvers.2949c4c0.js";
+import {useSelectedUnit as $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da, useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309} from "./selection.add9f8b0.js";
+import {transformAxisType as $faf1eba02aecac6a$export$ab2a19f8a72df19b} from "./types.ff938b22.js";
+import "./boxes.module.dd631fe3.css";
+import $5edqH$boxesmodule998ff312js from "./boxes.module.998ff312.js";
+import {ColumnAxisType as $5edqH$ColumnAxisType, ColumnContext as $5edqH$ColumnContext, ColumnLayoutContext as $5edqH$ColumnLayoutContext, useColumn as $5edqH$useColumn, useGeologicPattern as $5edqH$useGeologicPattern, ForeignObject as $5edqH$ForeignObject, PatternDefsProvider as $5edqH$PatternDefsProvider} from "@macrostrat/column-components";
+import {SizeAwareLabel as $5edqH$SizeAwareLabel} from "@macrostrat/ui-components";
+import $5edqH$macrostrathyper from "@macrostrat/hyper";
+import {useContext as $5edqH$useContext, useRef as $5edqH$useRef, useCallback as $5edqH$useCallback, useEffect as $5edqH$useEffect, useMemo as $5edqH$useMemo} from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+const $d254716a820e9c85$var$h = (0, $5edqH$macrostrathyper).styled((0, ($parcel$interopDefault($5edqH$boxesmodule998ff312js))));
+function $d254716a820e9c85$var$useUnitRect(division, options = {}) {
+    const { widthFraction: widthFraction = 1, axisType: axisType = (0, $5edqH$ColumnAxisType).AGE } = options;
+    const { scale: scale } = (0, $5edqH$useContext)((0, $5edqH$ColumnContext));
+    const { width: width } = (0, $5edqH$useContext)((0, $5edqH$ColumnLayoutContext));
+    const macrostratAxisKey = (0, $faf1eba02aecac6a$export$ab2a19f8a72df19b)(axisType);
+    const t_key = "t_" + macrostratAxisKey;
+    const b_key = "b_" + macrostratAxisKey;
+    const topHeight = division[t_key];
+    const bottomHeight = division[b_key];
+    if (topHeight == null && bottomHeight == null) console.warn(`Missing keys ${t_key} and ${b_key} for ${division.unit_id} (${division.unit_name})`);
+    const y = scale(topHeight);
+    const height = Math.abs(scale(bottomHeight) - y);
+    return {
+        x: width * (1 - widthFraction),
+        y: y,
+        height: height,
+        width: widthFraction * width
+    };
+}
+function $d254716a820e9c85$export$1d8b9ae22d404866(props) {
+    const { division: d, children: children, defaultFill: defaultFill = "transparent", className: className, widthFraction: widthFraction = 1, ...baseBounds } = props;
+    const { axisType: axisType } = (0, $5edqH$useColumn)();
+    const bounds = {
+        ...$d254716a820e9c85$var$useUnitRect(d, {
+            widthFraction: widthFraction,
+            axisType: axisType
+        }),
+        ...baseBounds
+    };
+    const patternID = (0, $d3e69bd163d41f63$export$7be7d732f3de9464)(d);
+    const fill = (0, $5edqH$useGeologicPattern)(patternID, defaultFill);
+    // Allow us to select this unit if in the proper context
+    const ref = (0, $5edqH$useRef)();
+    const [selected, onClick] = $d254716a820e9c85$var$useUnitSelectionManager(ref, d);
+    return $d254716a820e9c85$var$h("g.unit", {
+        className: className
+    }, [
+        $d254716a820e9c85$var$h("rect.unit", {
+            ref: ref,
+            ...bounds,
+            fill: fill,
+            onClick: onClick
+        }),
+        $d254716a820e9c85$var$h.if(selected)("rect.selection-overlay", bounds),
+        children
+    ]);
+}
+function $d254716a820e9c85$var$useUnitSelectionManager(ref, unit) {
+    const selectedUnit = (0, $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da)();
+    const selected = selectedUnit?.unit_id == unit.unit_id;
+    const dispatch = (0, $4d5d1c15f39f6a14$export$77a278d5ca56e309)();
+    const onClick = (0, $5edqH$useCallback)((evt)=>{
+        dispatch(unit, ref.current, evt);
+        evt.stopPropagation();
+    }, [
+        unit,
+        ref,
+        dispatch
+    ]);
+    (0, $5edqH$useEffect)(()=>{
+        if (!selected) return;
+        // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
+        dispatch(unit, ref.current, null);
+        // Scroll the unit into view
+        ref.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest"
+        });
+    }, [
+        selected
+    ]);
+    return [
+        selected,
+        onClick
+    ];
+}
+function $d254716a820e9c85$export$b4f0ca233b98f9af(props) {
+    const { division: division, label: label, onLabelUpdated: onLabelUpdated, widthFraction: widthFraction, ...baseBounds } = props;
+    const { axisType: axisType } = (0, $5edqH$useColumn)();
+    const bounds = {
+        ...$d254716a820e9c85$var$useUnitRect(division, {
+            widthFraction: widthFraction,
+            axisType: axisType
+        }),
+        ...baseBounds
+    };
+    const { width: width, height: height } = bounds;
+    return $d254716a820e9c85$var$h($d254716a820e9c85$export$1d8b9ae22d404866, {
+        className: "labeled-unit",
+        division: division,
+        ...bounds
+    }, [
+        $d254716a820e9c85$var$h((0, $5edqH$ForeignObject), {
+            ...bounds,
+            className: "unit-label-container"
+        }, $d254716a820e9c85$var$h((0, $5edqH$SizeAwareLabel), {
+            className: "unit-overlay",
+            labelClassName: "unit-label",
+            style: {
+                width: width,
+                height: height
+            },
+            label: label,
+            onVisibilityChanged (viz) {
+                onLabelUpdated(label, viz);
+            }
+        }))
+    ]);
+}
+function $d254716a820e9c85$export$5d1cdfabe8dc8085(props) {
+    const { unitComponent: unitComponent = $d254716a820e9c85$export$1d8b9ae22d404866, unitComponentProps: unitComponentProps = {} } = props;
+    const { divisions: divisions } = (0, $5edqH$useContext)((0, $5edqH$ColumnContext));
+    if (divisions.length == 0) {
+        console.warn("No divisions found in column context");
+        return null;
+    }
+    const children = (0, $5edqH$useMemo)(()=>{
+        return divisions.map((division, i)=>{
+            // @ts-ignore
+            return $d254716a820e9c85$var$h(unitComponent, {
+                division: division,
+                key: division.unit_id,
+                axisType: (0, $5edqH$ColumnAxisType).HEIGHT,
+                ...unitComponentProps
+            });
+        });
+    }, [
+        divisions,
+        unitComponent,
+        unitComponentProps
+    ]);
+    return $d254716a820e9c85$var$h((0, $5edqH$PatternDefsProvider), {
+        resolveID: $d3e69bd163d41f63$export$7be7d732f3de9464,
+        scalePattern: $d3e69bd163d41f63$export$e8deec7b02ce51eb
+    }, $d254716a820e9c85$var$h("g.divisions", children));
+}
+
+
+export {$d254716a820e9c85$export$1d8b9ae22d404866 as Unit, $d254716a820e9c85$export$b4f0ca233b98f9af as LabeledUnit, $d254716a820e9c85$export$5d1cdfabe8dc8085 as UnitBoxes};
+//# sourceMappingURL=boxes.6d3192e6.js.map

package/dist/boxes.6d3192e6.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/column-views/src/units/boxes.ts"],"sourcesContent":["import {\n  ColumnAxisType,\n  ColumnContext,\n  ColumnLayoutContext,\n  ForeignObject,\n  PatternDefsProvider,\n  useColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { SizeAwareLabel, Clickable } from \"@macrostrat/ui-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { resolveID, scalePattern } from \"./resolvers\";\nimport { useSelectedUnit, useUnitSelectionDispatch } from \"./selection\";\nimport { IUnit, transformAxisType } from \"./types\";\nimport styles from \"./boxes.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport interface RectBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface UnitRectOptions {\n  widthFraction?: number;\n  axisType?: ColumnAxisType;\n}\n\ninterface UnitProps extends Clickable, Partial<RectBounds>, UnitRectOptions {\n  division: IUnit;\n  resolveID?(IUnit): string;\n  UUID?: string;\n  defaultFill?: string;\n  widthFraction?: number;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface LabeledUnitProps\n  extends UnitRectOptions,\n    Clickable,\n    Partial<RectBounds> {\n  division: IUnit;\n  label: string;\n  onLabelUpdated?(label: string, shown: boolean);\n  halfWidth?: boolean;\n}\n\nfunction useUnitRect(\n  division: IUnit,\n  options: UnitRectOptions = {}\n): RectBounds {\n  const { widthFraction = 1, axisType = ColumnAxisType.AGE } = options;\n  const { scale } = useContext(ColumnContext);\n  const { width } = useContext(ColumnLayoutContext);\n  const macrostratAxisKey = transformAxisType(axisType);\n  const t_key = \"t_\" + macrostratAxisKey;\n  const b_key = \"b_\" + macrostratAxisKey;\n\n  const topHeight = division[t_key];\n  const bottomHeight = division[b_key];\n  if (topHeight == null && bottomHeight == null) {\n    console.warn(\n      `Missing keys ${t_key} and ${b_key} for ${division.unit_id} (${division.unit_name})`\n    );\n  }\n\n  const y = scale(topHeight);\n  const height = Math.abs(scale(bottomHeight) - y);\n\n  return {\n    x: width * (1 - widthFraction),\n    y,\n    height,\n    width: widthFraction * width,\n  };\n}\n\nfunction Unit(props: UnitProps) {\n  const {\n    division: d,\n    children,\n    defaultFill = \"transparent\",\n    className,\n    widthFraction = 1,\n    ...baseBounds\n  } = props;\n\n  const { axisType } = useColumn();\n  const bounds = {\n    ...useUnitRect(d, { widthFraction, axisType }),\n    ...baseBounds,\n  };\n  const patternID = resolveID(d);\n  const fill = useGeologicPattern(patternID, defaultFill);\n  // Allow us to select this unit if in the proper context\n\n  const ref = useRef<HTMLElement>();\n\n  const [selected, onClick] = useUnitSelectionManager(ref, d);\n\n  return h(\"g.unit\", { className }, [\n    h(\"rect.unit\", {\n      ref,\n      ...bounds,\n      fill,\n      onClick,\n    }),\n    h.if(selected)(\"rect.selection-overlay\", bounds),\n    children,\n  ]);\n}\n\nfunction useUnitSelectionManager(\n  ref: React.RefObject<HTMLElement>,\n  unit: IUnit\n): [boolean, (evt: Event) => void] {\n  const selectedUnit = useSelectedUnit();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n\n  const dispatch = useUnitSelectionDispatch();\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      dispatch(unit, ref.current, evt);\n      evt.stopPropagation();\n    },\n    [unit, ref, dispatch]\n  );\n\n  useEffect(() => {\n    if (!selected) return;\n    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit\n    dispatch(unit, ref.current, null);\n\n    // Scroll the unit into view\n    ref.current?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selected]);\n\n  return [selected, onClick];\n}\n\nfunction LabeledUnit(props: LabeledUnitProps) {\n  const { division, label, onLabelUpdated, widthFraction, ...baseBounds } =\n    props;\n\n  const { axisType } = useColumn();\n  const bounds = {\n    ...useUnitRect(division, { widthFraction, axisType }),\n    ...baseBounds,\n  };\n  const { width, height } = bounds;\n  return h(Unit, { className: \"labeled-unit\", division, ...bounds }, [\n    h(\n      ForeignObject,\n      { ...bounds, className: \"unit-label-container\" },\n      h(SizeAwareLabel, {\n        className: \"unit-overlay\",\n        labelClassName: \"unit-label\",\n        style: { width, height },\n        label,\n        onVisibilityChanged(viz) {\n          onLabelUpdated(label, viz);\n        },\n      })\n    ),\n  ]);\n}\n\nfunction UnitBoxes<T>(props: {\n  unitComponent: React.FunctionComponent<{ division: T }>;\n  unitComponentProps?: any;\n  transformDivisions?(divisions: T[]): T[];\n  transformDivision?: (\n    division: any,\n    index: number,\n    divisions: any[]\n  ) => T | null;\n}) {\n  const { unitComponent = Unit, unitComponentProps = {} } = props;\n  const { divisions } = useContext(ColumnContext);\n\n  if (divisions.length == 0) {\n    console.warn(\"No divisions found in column context\");\n    return null;\n  }\n\n  const children = useMemo(() => {\n    return divisions.map((division: any, i) => {\n      // @ts-ignore\n      return h(unitComponent, {\n        division,\n        key: division.unit_id,\n        axisType: ColumnAxisType.HEIGHT,\n        ...unitComponentProps,\n      });\n    });\n  }, [divisions, unitComponent, unitComponentProps]);\n\n  return h(\n    PatternDefsProvider,\n    { resolveID, scalePattern },\n    h(\"g.divisions\", children)\n  );\n}\n\nexport { LabeledUnit, Unit, UnitBoxes, UnitProps };\n"],"names":[],"version":3,"file":"boxes.6d3192e6.js.map"}

package/dist/boxes.module.998ff312.js

@@ -0,0 +1,13 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $b9031ec72fd2f651$exports = {};
+
+$parcel$export($b9031ec72fd2f651$exports, "unit-label-container", () => $b9031ec72fd2f651$export$7756584041496870, (v) => $b9031ec72fd2f651$export$7756584041496870 = v);
+var $b9031ec72fd2f651$export$7756584041496870;
+$b9031ec72fd2f651$export$7756584041496870 = `WkKD8q_unit-label-container`;
+
+
+export {$b9031ec72fd2f651$exports as default};
+//# sourceMappingURL=boxes.module.998ff312.js.map

package/dist/boxes.module.998ff312.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;AAAA,IAAA;AAAA,4CAAyC,CAAC,2BAA2B,CAAC","sources":["packages/column-views/src/units/boxes.module.sass"],"sourcesContent":[".unit-label-container\n  pointer-events: none\n\n"],"names":[],"version":3,"file":"boxes.module.998ff312.js.map"}

package/dist/boxes.module.dd631fe3.css

@@ -0,0 +1,4 @@
+.WkKD8q_unit-label-container {
+  pointer-events: none;
+}
+/*# sourceMappingURL=boxes.module.dd631fe3.css.map */

package/dist/boxes.module.dd631fe3.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA","sources":["packages/column-views/src/units/boxes.module.sass"],"sourcesContent":[".unit-label-container\n  pointer-events: none\n\n"],"names":[],"version":3,"file":"boxes.module.dd631fe3.css.map"}

package/dist/carbon-isotopes.6d9bddcf.js

@@ -0,0 +1,11 @@
+import {MeasurementDataContext as $8adf39b8c41fe3cc$export$c644ef985ce7a4c4, MeasurementDataProvider as $8adf39b8c41fe3cc$export$5f01d5b342a89841, useMeasurementData as $8adf39b8c41fe3cc$export$8a0335fd9ff72150} from "./data-provider.61ef7f9a.js";
+import {IsotopesDataset as $d5a3eba6c540ff58$export$c69bd0285aa5d775, IsotopesColumn as $d5a3eba6c540ff58$export$5d8aa8022c284748} from "./isotopes-column.b5442b4d.js";
+import {CarbonIsotopesColumn as $5cc70deb5088007a$export$883edafebdc6d87e, CarbonIsotopesApp as $5cc70deb5088007a$export$e2beef9ae524c9d5} from "./core.f3824dd8.js";
+
+
+
+
+
+
+export {$8adf39b8c41fe3cc$export$c644ef985ce7a4c4 as MeasurementDataContext, $8adf39b8c41fe3cc$export$5f01d5b342a89841 as MeasurementDataProvider, $8adf39b8c41fe3cc$export$8a0335fd9ff72150 as useMeasurementData, $d5a3eba6c540ff58$export$c69bd0285aa5d775 as IsotopesDataset, $d5a3eba6c540ff58$export$5d8aa8022c284748 as IsotopesColumn, $5cc70deb5088007a$export$883edafebdc6d87e as CarbonIsotopesColumn, $5cc70deb5088007a$export$e2beef9ae524c9d5 as CarbonIsotopesApp};
+//# sourceMappingURL=carbon-isotopes.6d9bddcf.js.map

package/dist/carbon-isotopes.6d9bddcf.js.map

@@ -0,0 +1 @@
+{"mappings":"","sources":["packages/column-views/src/carbon-isotopes/index.ts"],"sourcesContent":["export * from \"./isotopes-column\";\nexport * from \"./data-provider\";\nexport * from \"./core\";\n"],"names":[],"version":3,"file":"carbon-isotopes.6d9bddcf.js.map"}

package/dist/column.e35a471f.js

@@ -0,0 +1,149 @@
+import $hAtH0$columnmodule2e29259cjs from "./column.module.2e29259c.js";
+import "./column.module.c9df6edf.css";
+import {TrackedLabeledUnit as $8c8238faa5cde49c$export$f613830566442374} from "./composite.494beffc.js";
+import {UnitSelectionProvider as $4d5d1c15f39f6a14$export$f19d75b1d4b676a4, useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309, UnitKeyboardNavigation as $4d5d1c15f39f6a14$export$70f5ee19650fc7d1} from "./selection.add9f8b0.js";
+import {UnitSelectionPopover as $80d4db83aa9ba807$export$db1115efab13710d} from "./selection-popover.7e008544.js";
+import {MacrostratUnitsProvider as $1fcb9b8d7da394a3$export$e5fe24ae4f287040} from "./store.c5271371.js";
+import {Section as $7d0f52717c0de7e1$export$6e2c8f0811a474ce} from "./section.6f6fc929.js";
+import {ensureArray as $2c60de495788ce61$export$d0c8ecbd4ed8940c, groupUnitsIntoSections as $2c60de495788ce61$export$dfbd00399d639b4c, _mergeOverlappingSections as $2c60de495788ce61$export$ec445c47b6e5d2d} from "./helpers.2af05ee4.js";
+import {ColumnLayoutContext as $hAtH0$ColumnLayoutContext} from "@macrostrat/column-components";
+import {hyperStyled as $hAtH0$hyperStyled} from "@macrostrat/hyper";
+import {useDarkMode as $hAtH0$useDarkMode} from "@macrostrat/ui-components";
+import $hAtH0$classnames from "classnames";
+import {useContext as $hAtH0$useContext, createRef as $hAtH0$createRef, useState as $hAtH0$useState, useMemo as $hAtH0$useMemo} from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+
+
+
+const $2118f0266dc7e955$var$h = (0, $hAtH0$hyperStyled)((0, ($parcel$interopDefault($hAtH0$columnmodule2e29259cjs))));
+function $2118f0266dc7e955$export$48a4cacf2b7a4441({ division: division, nColumns: nColumns = 2, ...rest }) {
+    const { width: width } = (0, $hAtH0$useContext)((0, $hAtH0$ColumnLayoutContext));
+    //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)
+    //console.log(division);
+    return $2118f0266dc7e955$var$h((0, $8c8238faa5cde49c$export$f613830566442374), {
+        division: division,
+        ...rest,
+        width: division.overlappingUnits.length > 0 ? width / nColumns : width,
+        x: division.column * width / nColumns
+    });
+}
+function $2118f0266dc7e955$var$Unconformity({ upperUnits: upperUnits = [], lowerUnits: lowerUnits = [], style: style }) {
+    if (upperUnits.length == 0 || lowerUnits.length == 0) return null;
+    const ageGap = lowerUnits[0].t_age - upperUnits[upperUnits.length - 1].b_age;
+    return $2118f0266dc7e955$var$h("div.unconformity", {
+        style: style
+    }, [
+        $2118f0266dc7e955$var$h("div.unconformity-text", `${ageGap.toFixed(1)} Ma`)
+    ]);
+}
+function $2118f0266dc7e955$var$sectionClassName(section) {
+    return `section-${(0, $2c60de495788ce61$export$d0c8ecbd4ed8940c)(section.section_id).join("-")}`;
+}
+function $2118f0266dc7e955$export$816b5d811295e6bc(props) {
+    const { showUnitPopover: showUnitPopover = false, ...rest } = props;
+    const ref = (0, $hAtH0$createRef)();
+    // Selected item position
+    const [position, setPosition] = (0, $hAtH0$useState)(null);
+    if (!showUnitPopover) return $2118f0266dc7e955$var$h($2118f0266dc7e955$var$_Column, rest);
+    return $2118f0266dc7e955$var$h((0, $4d5d1c15f39f6a14$export$f19d75b1d4b676a4), {
+        onUnitSelected: (unit, target)=>{
+            if (!showUnitPopover) return;
+            if (unit == null) {
+                setPosition(null);
+                return;
+            }
+            const el = ref.current;
+            if (el == null || target == null) return;
+            const rect = el.getBoundingClientRect();
+            const targetRect = target.getBoundingClientRect();
+            setPosition({
+                x: targetRect.left - rect.left,
+                y: targetRect.top - rect.top,
+                width: targetRect.width,
+                height: targetRect.height
+            });
+        }
+    }, $2118f0266dc7e955$var$h($2118f0266dc7e955$var$_Column, {
+        ...rest,
+        columnRef: ref
+    }, $2118f0266dc7e955$var$h((0, $80d4db83aa9ba807$export$db1115efab13710d), {
+        position: position
+    })));
+}
+function $2118f0266dc7e955$var$_Column(props) {
+    const { data: data, unitComponent: unitComponent = $2118f0266dc7e955$export$48a4cacf2b7a4441, unconformityLabels: unconformityLabels = true, showLabels: showLabels = true, width: width = 300, columnWidth: columnWidth = 150, className: baseClassName, showLabelColumn: showLabelColumn = true, mergeOverlappingSections: mergeOverlappingSections = true, keyboardNavigation: keyboardNavigation = false, columnRef: columnRef, children: children, ...rest } = props;
+    const darkMode = (0, $hAtH0$useDarkMode)();
+    const sectionGroups = (0, $hAtH0$useMemo)(()=>{
+        let res = (0, $2c60de495788ce61$export$dfbd00399d639b4c)(data);
+        if (mergeOverlappingSections) res = (0, $2c60de495788ce61$export$ec445c47b6e5d2d)(res);
+        return res;
+    }, [
+        data,
+        mergeOverlappingSections
+    ]);
+    const className = (0, $hAtH0$classnames)(baseClassName, {
+        "dark-mode": darkMode?.isEnabled ?? false
+    });
+    // Clear unit selection on click outside of units, if we have a dispatch function
+    const dispatch = (0, $4d5d1c15f39f6a14$export$77a278d5ca56e309)();
+    return $2118f0266dc7e955$var$h("div.column-container", {
+        className: className,
+        onClick (evt) {
+            dispatch?.(null, null, evt);
+        }
+    }, $2118f0266dc7e955$var$h((0, $1fcb9b8d7da394a3$export$e5fe24ae4f287040), {
+        units: data
+    }, [
+        $2118f0266dc7e955$var$h("div.column", {
+            ref: columnRef
+        }, [
+            $2118f0266dc7e955$var$h("div.age-axis-label", "Age (Ma)"),
+            $2118f0266dc7e955$var$h("div.main-column", sectionGroups.map((group, i)=>{
+                const { section_id: id, units: data } = group;
+                const lastGroup = sectionGroups[i - 1];
+                return $2118f0266dc7e955$var$h([
+                    $2118f0266dc7e955$var$h.if(unconformityLabels)($2118f0266dc7e955$var$Unconformity, {
+                        upperUnits: lastGroup?.units,
+                        lowerUnits: data,
+                        style: {
+                            width: showLabels ? columnWidth : width
+                        }
+                    }),
+                    $2118f0266dc7e955$var$h(`div.section`, {
+                        className: $2118f0266dc7e955$var$sectionClassName(group)
+                    }, [
+                        $2118f0266dc7e955$var$h((0, $7d0f52717c0de7e1$export$6e2c8f0811a474ce), {
+                            data: data,
+                            unitComponent: unitComponent,
+                            showLabels: showLabels,
+                            width: width,
+                            columnWidth: columnWidth,
+                            showLabelColumn: showLabelColumn,
+                            ...rest
+                        })
+                    ])
+                ]);
+            })),
+            $2118f0266dc7e955$var$h.if(keyboardNavigation)((0, $4d5d1c15f39f6a14$export$70f5ee19650fc7d1), {
+                units: data
+            }),
+            children
+        ])
+    ]));
+}
+
+
+export {$2118f0266dc7e955$export$48a4cacf2b7a4441 as UnitComponent, $2118f0266dc7e955$export$816b5d811295e6bc as Column};
+//# sourceMappingURL=column.e35a471f.js.map

package/dist/column.e35a471f.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/column-views/src/column.ts"],"sourcesContent":["import {\n  ColumnAxisType,\n  ColumnLayoutContext,\n  ColumnProvider,\n} from \"@macrostrat/column-components\";\nimport { hyperStyled } from \"@macrostrat/hyper\";\nimport { useDarkMode } from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport { createRef, RefObject, useContext, useMemo, useState } from \"react\";\nimport styles from \"./column.module.sass\";\nimport {\n  TrackedLabeledUnit,\n  UnitKeyboardNavigation,\n  UnitSelectionProvider,\n  useUnitSelectionDispatch,\n} from \"./units\";\nimport { SectionInfo } from \"./section\";\nimport { RectBounds } from \"./units/boxes\";\nimport { UnitSelectionPopover } from \"./selection-popover\";\nimport { MacrostratUnitsProvider } from \"./store\";\nimport { IColumnProps, Section } from \"./section\";\nimport {\n  _mergeOverlappingSections,\n  ensureArray,\n  groupUnitsIntoSections,\n} from \"./helpers\";\n\nconst h = hyperStyled(styles);\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const { width } = useContext(ColumnLayoutContext);\n\n  //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)\n  //console.log(division);\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: division.overlappingUnits.length > 0 ? width / nColumns : width,\n    x: (division.column * width) / nColumns,\n  });\n}\n\nfunction Unconformity({ upperUnits = [], lowerUnits = [], style }) {\n  if (upperUnits.length == 0 || lowerUnits.length == 0) {\n    return null;\n  }\n\n  const ageGap = lowerUnits[0].t_age - upperUnits[upperUnits.length - 1].b_age;\n\n  return h(\"div.unconformity\", { style }, [\n    h(\"div.unconformity-text\", `${ageGap.toFixed(1)} Ma`),\n  ]);\n}\n\nfunction sectionClassName(section: SectionInfo) {\n  return `section-${ensureArray(section.section_id).join(\"-\")}`;\n}\n\nexport interface ColumnProps extends IColumnProps {\n  unconformityLabels?: boolean;\n  className?: string;\n  mergeOverlappingSections?: boolean;\n  showLabelColumn?: boolean;\n  columnRef?: RefObject<HTMLElement>;\n  keyboardNavigation?: boolean;\n  showUnitPopover?: boolean;\n  t_age?: number;\n  b_age?: number;\n}\n\nexport function Column(props: ColumnProps) {\n  const { showUnitPopover = false, ...rest } = props;\n  const ref = createRef<HTMLElement>();\n  // Selected item position\n  const [position, setPosition] = useState<RectBounds | null>(null);\n\n  if (!showUnitPopover) {\n    return h(_Column, rest);\n  }\n\n  return h(\n    UnitSelectionProvider,\n    {\n      onUnitSelected: (unit, target: SVGElement | HTMLElement | null) => {\n        if (!showUnitPopover) return;\n\n        if (unit == null) {\n          setPosition(null);\n          return;\n        }\n        const el: HTMLElement = ref.current;\n        if (el == null || target == null) return;\n        const rect = el.getBoundingClientRect();\n        const targetRect = target.getBoundingClientRect();\n        setPosition({\n          x: targetRect.left - rect.left,\n          y: targetRect.top - rect.top,\n          width: targetRect.width,\n          height: targetRect.height,\n        });\n      },\n    },\n    h(\n      _Column,\n      { ...rest, columnRef: ref },\n      h(UnitSelectionPopover, { position })\n    )\n  );\n}\n\nfunction _Column(props: Omit<ColumnProps, \"showUnitPopover\">) {\n  const {\n    data,\n    unitComponent = UnitComponent,\n    unconformityLabels = true,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    className: baseClassName,\n    showLabelColumn = true,\n    mergeOverlappingSections = true,\n    keyboardNavigation = false,\n    columnRef,\n    children,\n    ...rest\n  } = props;\n\n  const darkMode = useDarkMode();\n  const sectionGroups = useMemo(() => {\n    let res = groupUnitsIntoSections(data);\n    if (mergeOverlappingSections) {\n      res = _mergeOverlappingSections(res);\n    }\n    return res;\n  }, [data, mergeOverlappingSections]);\n\n  const className = classNames(baseClassName, {\n    \"dark-mode\": darkMode?.isEnabled ?? false,\n  });\n\n  // Clear unit selection on click outside of units, if we have a dispatch function\n  const dispatch = useUnitSelectionDispatch();\n\n  return h(\n    \"div.column-container\",\n    {\n      className,\n      onClick(evt) {\n        dispatch?.(null, null, evt as any);\n      },\n    },\n    h(MacrostratUnitsProvider, { units: data }, [\n      h(\"div.column\", { ref: columnRef }, [\n        h(\"div.age-axis-label\", \"Age (Ma)\"),\n        h(\n          \"div.main-column\",\n          sectionGroups.map((group, i) => {\n            const { section_id: id, units: data } = group;\n            const lastGroup = sectionGroups[i - 1];\n            return h([\n              h.if(unconformityLabels)(Unconformity, {\n                upperUnits: lastGroup?.units,\n                lowerUnits: data,\n                style: { width: showLabels ? columnWidth : width },\n              }),\n              h(`div.section`, { className: sectionClassName(group) }, [\n                h(Section, {\n                  data,\n                  unitComponent,\n                  showLabels,\n                  width,\n                  columnWidth,\n                  showLabelColumn,\n                  ...rest,\n                }),\n              ]),\n            ]);\n          })\n        ),\n        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units: data }),\n        children,\n      ]),\n    ])\n  );\n}\n"],"names":[],"version":3,"file":"column.e35a471f.js.map"}

package/dist/column.e901b5d4.js

@@ -0,0 +1,117 @@
+import {SimpleUnitsColumn as $4c8184c4a7317749$export$2006342ddaa547c6} from "./units.5ec6a44c.js";
+import {IsotopesColumn as $d5a3eba6c540ff58$export$5d8aa8022c284748} from "./isotopes-column.b5442b4d.js";
+import {MacrostratColumnProvider as $29bf41d89292aad4$export$9e42f9b6e0d67c7d} from "./providers.abcb2cbe.js";
+import $k4S0v$columnmodule35ba04e7js from "./column.module.35ba04e7.js";
+import "./column.module.35184ea7.css";
+import $k4S0v$macrostrathyper from "@macrostrat/hyper";
+import {group as $k4S0v$group} from "d3-array";
+import {useAPIResult as $k4S0v$useAPIResult} from "@macrostrat/ui-components";
+import {ColumnContext as $k4S0v$ColumnContext, ColumnAxis as $k4S0v$ColumnAxis, ColumnSVG as $k4S0v$ColumnSVG} from "@macrostrat/column-components";
+import {useContext as $k4S0v$useContext} from "react";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+
+const $132b1b0fb905c489$var$h = (0, $k4S0v$macrostrathyper).styled((0, ($parcel$interopDefault($k4S0v$columnmodule35ba04e7js))));
+const $132b1b0fb905c489$var$AgeAxis = ({ ticks: ticks })=>{
+    const { pixelHeight: pixelHeight } = (0, $k4S0v$useContext)((0, $k4S0v$ColumnContext));
+    // A tick roughly every 40 pixels
+    let v = Math.max(Math.round(pixelHeight / 40), 1);
+    return $132b1b0fb905c489$var$h((0, $k4S0v$ColumnAxis), {
+        ticks: v,
+        showDomain: false
+    });
+};
+const $132b1b0fb905c489$export$6e2c8f0811a474ce = (props)=>{
+    // Section with "squishy" time scale
+    const { data: data, isOldestColumn: isOldestColumn = true, range: range = [
+        data[data.length - 1].b_age,
+        data[0].t_age
+    ] } = props;
+    let { pixelScale: pixelScale } = props;
+    const notesOffset = 100;
+    if (!pixelScale) {
+        // Make up a pixel scale
+        const dAge = range[0] - range[1];
+        const targetHeight = 50 * data.length;
+        pixelScale = Math.ceil(targetHeight / dAge);
+    }
+    return $132b1b0fb905c489$var$h((0, $29bf41d89292aad4$export$9e42f9b6e0d67c7d), {
+        divisions: data,
+        range: range,
+        pixelsPerMeter: pixelScale
+    }, [
+        $132b1b0fb905c489$var$h((0, $k4S0v$ColumnSVG), {
+            width: 650,
+            padding: 20,
+            paddingTop: 5,
+            paddingBottom: 25
+        }, [
+            $132b1b0fb905c489$var$h($132b1b0fb905c489$var$AgeAxis),
+            $132b1b0fb905c489$var$h((0, $4c8184c4a7317749$export$2006342ddaa547c6), {
+                width: 400,
+                columnWidth: 90
+            }),
+            $132b1b0fb905c489$var$h((0, $d5a3eba6c540ff58$export$5d8aa8022c284748), {
+                parameter: "D13C",
+                label: "\u03B4\xb9\xb3C",
+                width: 100,
+                // @ts-ignore
+                nTicks: 4,
+                showAxis: isOldestColumn,
+                transform: "translate(250,0)"
+            }),
+            $132b1b0fb905c489$var$h((0, $d5a3eba6c540ff58$export$5d8aa8022c284748), {
+                parameter: "D18O",
+                label: "\u03B4\xb9\u2078O",
+                color: "red",
+                domain: [
+                    -40,
+                    0
+                ],
+                width: 100,
+                // @ts-ignore
+                nTicks: 4,
+                showAxis: isOldestColumn,
+                transform: "translate(370,0)"
+            })
+        ])
+    ]);
+};
+function $132b1b0fb905c489$var$Column(props) {
+    const { params: params } = props;
+    const data = (0, $k4S0v$useAPIResult)("/units", {
+        all: true,
+        ...params,
+        response: "long"
+    });
+    if (data == null) return null;
+    let sectionGroups = Array.from((0, $k4S0v$group)(data, (d)=>d.section_id));
+    //sectionGroups.sort((a, b) => a.t_age - b.t_age);
+    return $132b1b0fb905c489$var$h("div.column", [
+        $132b1b0fb905c489$var$h("div.age-axis-label", "Age (Ma)"),
+        $132b1b0fb905c489$var$h("div.main-column", sectionGroups.map(([id, values], i)=>{
+            return $132b1b0fb905c489$var$h(`div.section-${id}`, [
+                $132b1b0fb905c489$var$h($132b1b0fb905c489$export$6e2c8f0811a474ce, {
+                    data: values,
+                    isOldestColumn: i == sectionGroups.length - 1
+                })
+            ]);
+        }))
+    ]);
+}
+var $132b1b0fb905c489$export$2e2bcd8739ae039 = $132b1b0fb905c489$var$Column;
+
+
+export {$132b1b0fb905c489$export$6e2c8f0811a474ce as Section, $132b1b0fb905c489$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=column.e901b5d4.js.map

package/dist/column.e901b5d4.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,wEAAK;AAS5B,MAAM,gCAAU,CAAC,SAAE,KAAK,EAAE;IACxB,MAAM,eAAE,WAAW,EAAE,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,oBAAY;IAC/C,iCAAiC;IACjC,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,cAAc,KAAK;IAE/C,OAAO,wBAAE,CAAA,GAAA,iBAAS,GAAG;QACnB,OAAO;QACP,YAAY;IACd;AACF;AAEA,MAAM,4CAAU,CAAC;IACf,oCAAoC;IACpC,MAAM,QACJ,IAAI,kBACJ,iBAAiB,aACjB,QAAQ;QAAC,IAAI,CAAC,KAAK,MAAM,GAAG,EAAE,CAAC,KAAK;QAAE,IAAI,CAAC,EAAE,CAAC,KAAK;KAAC,EACrD,GAAG;IACJ,IAAI,cAAE,UAAU,EAAE,GAAG;IAErB,MAAM,cAAc;IAEpB,IAAI,CAAC,YAAY;QACf,wBAAwB;QACxB,MAAM,OAAO,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE;QAChC,MAAM,eAAe,KAAK,KAAK,MAAM;QACrC,aAAa,KAAK,IAAI,CAAC,eAAe;IACxC;IAEA,OAAO,wBACL,CAAA,GAAA,yCAAuB,GACvB;QACE,WAAW;eACX;QACA,gBAAgB;IAClB,GACA;QACE,wBACE,CAAA,GAAA,gBAAQ,GACR;YACE,OAAO;YACP,SAAS;YACT,YAAY;YACZ,eAAe;QACjB,GACA;YACE,wBAAE;YACF,wBAAE,CAAA,GAAA,yCAAgB,GAAG;gBACnB,OAAO;gBACP,aAAa;YACf;YACA,wBAAE,CAAA,GAAA,yCAAa,GAAG;gBAChB,WAAW;gBACX,OAAO;gBACP,OAAO;gBACP,aAAa;gBACb,QAAQ;gBACR,UAAU;gBACV,WAAW;YACb;YACA,wBAAE,CAAA,GAAA,yCAAa,GAAG;gBAChB,WAAW;gBACX,OAAO;gBACP,OAAO;gBACP,QAAQ;oBAAC;oBAAK;iBAAE;gBAChB,OAAO;gBACP,aAAa;gBACb,QAAQ;gBACR,UAAU;gBACV,WAAW;YACb;SACD;KAEJ;AAEL;AAEA,SAAS,6BAAO,KAA0D;IACxE,MAAM,UAAE,MAAM,EAAE,GAAG;IACnB,MAAM,OAAgB,CAAA,GAAA,mBAAW,EAAE,UAAU;QAC3C,KAAK;QACL,GAAG,MAAM;QACT,UAAU;IACZ;IACA,IAAI,QAAQ,MAAM,OAAO;IAEzB,IAAI,gBAAgB,MAAM,IAAI,CAAC,CAAA,GAAA,YAAI,EAAE,MAAM,CAAC,IAAM,EAAE,UAAU;IAE9D,kDAAkD;IAElD,OAAO,wBAAE,cAAc;QACrB,wBAAE,sBAAsB;QACxB,wBACE,mBACA,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE;YAC/B,OAAO,wBAAE,CAAC,YAAY,EAAE,IAAI,EAAE;gBAC5B,wBAAE,2CAAS;oBACT,MAAM;oBACN,gBAAgB,KAAK,cAAc,MAAM,GAAG;gBAC9C;aACD;QACH;KAEH;AACH;IAGA,2CAAe","sources":["packages/column-views/src/carbon-isotopes/column.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { group } from \"d3-array\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport {\n  ColumnSVG,\n  ColumnAxis,\n  ColumnContext,\n} from \"@macrostrat/column-components\";\nimport { SimpleUnitsColumn, IUnit, ColumnArgs } from \"../units\";\nimport { useContext } from \"react\";\nimport { IsotopesColumn } from \"./isotopes-column\";\nimport { MacrostratColumnProvider } from \"../providers\";\nimport styles from \"./column.module.sass\";\n\nconst h = hyper.styled(styles);\n\ninterface IColumnProps {\n  data: IUnit[];\n  pixelScale?: number;\n  isOldestColumn: boolean;\n  range?: [number, number];\n}\n\nconst AgeAxis = ({ ticks }) => {\n  const { pixelHeight } = useContext(ColumnContext);\n  // A tick roughly every 40 pixels\n  let v = Math.max(Math.round(pixelHeight / 40), 1);\n\n  return h(ColumnAxis, {\n    ticks: v,\n    showDomain: false,\n  });\n};\n\nconst Section = (props: IColumnProps) => {\n  // Section with \"squishy\" time scale\n  const {\n    data,\n    isOldestColumn = true,\n    range = [data[data.length - 1].b_age, data[0].t_age],\n  } = props;\n  let { pixelScale } = props;\n\n  const notesOffset = 100;\n\n  if (!pixelScale) {\n    // Make up a pixel scale\n    const dAge = range[0] - range[1];\n    const targetHeight = 50 * data.length;\n    pixelScale = Math.ceil(targetHeight / dAge);\n  }\n\n  return h(\n    MacrostratColumnProvider,\n    {\n      divisions: data,\n      range,\n      pixelsPerMeter: pixelScale, // Actually pixels per myr\n    },\n    [\n      h(\n        ColumnSVG,\n        {\n          width: 650,\n          padding: 20,\n          paddingTop: 5,\n          paddingBottom: 25,\n        },\n        [\n          h(AgeAxis),\n          h(SimpleUnitsColumn, {\n            width: 400,\n            columnWidth: 90,\n          }),\n          h(IsotopesColumn, {\n            parameter: \"D13C\",\n            label: \"δ¹³C\",\n            width: 100,\n            // @ts-ignore\n            nTicks: 4,\n            showAxis: isOldestColumn,\n            transform: \"translate(250,0)\",\n          }),\n          h(IsotopesColumn, {\n            parameter: \"D18O\",\n            label: \"δ¹⁸O\",\n            color: \"red\",\n            domain: [-40, 0],\n            width: 100,\n            // @ts-ignore\n            nTicks: 4,\n            showAxis: isOldestColumn,\n            transform: \"translate(370,0)\",\n          }),\n        ]\n      ),\n    ]\n  );\n};\n\nfunction Column(props: Omit<IColumnProps, \"data\"> & { params: ColumnArgs }) {\n  const { params } = props;\n  const data: IUnit[] = useAPIResult(\"/units\", {\n    all: true,\n    ...params,\n    response: \"long\",\n  });\n  if (data == null) return null;\n\n  let sectionGroups = Array.from(group(data, (d) => d.section_id));\n\n  //sectionGroups.sort((a, b) => a.t_age - b.t_age);\n\n  return h(\"div.column\", [\n    h(\"div.age-axis-label\", \"Age (Ma)\"),\n    h(\n      \"div.main-column\",\n      sectionGroups.map(([id, values], i) => {\n        return h(`div.section-${id}`, [\n          h(Section, {\n            data: values,\n            isOldestColumn: i == sectionGroups.length - 1,\n          }),\n        ]);\n      })\n    ),\n  ]);\n}\n\nexport { Section, IColumnProps };\nexport default Column;\n"],"names":[],"version":3,"file":"column.e901b5d4.js.map"}

package/dist/column.module.2e29259c.js

@@ -0,0 +1,22 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $6cbea5de739af804$exports = {};
+
+$parcel$export($6cbea5de739af804$exports, "column-container", () => $6cbea5de739af804$export$e908cef0cccb98df, (v) => $6cbea5de739af804$export$e908cef0cccb98df = v);
+$parcel$export($6cbea5de739af804$exports, "unconformity", () => $6cbea5de739af804$export$7b4a6d978979c0fa, (v) => $6cbea5de739af804$export$7b4a6d978979c0fa = v);
+$parcel$export($6cbea5de739af804$exports, "unconformity-text", () => $6cbea5de739af804$export$925235908943319a, (v) => $6cbea5de739af804$export$925235908943319a = v);
+$parcel$export($6cbea5de739af804$exports, "dark-mode", () => $6cbea5de739af804$export$b02d999b8f804328, (v) => $6cbea5de739af804$export$b02d999b8f804328 = v);
+var $6cbea5de739af804$export$e908cef0cccb98df;
+var $6cbea5de739af804$export$7b4a6d978979c0fa;
+var $6cbea5de739af804$export$925235908943319a;
+var $6cbea5de739af804$export$b02d999b8f804328;
+$6cbea5de739af804$export$e908cef0cccb98df = "column-container_afc440";
+$6cbea5de739af804$export$7b4a6d978979c0fa = "unconformity_afc440";
+$6cbea5de739af804$export$925235908943319a = "unconformity-text_afc440";
+$6cbea5de739af804$export$b02d999b8f804328 = "dark-mode_afc440";
+
+
+export {$6cbea5de739af804$exports as default};
+//# sourceMappingURL=column.module.2e29259c.js.map

package/dist/column.module.2e29259c.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAHA,4CAAqC;AACrC,4CAAiC;AACjC,4CAAsC;AACtC,4CAA8B","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container\n  --column-background-color: var(--background-color, #fff)\n  --column-stroke-color: var(--text-color, #000)\n  --column-text-color: var(--text-color, #000)\n\n@media (prefers-color-scheme: dark)\n  .column-container\n    --column-background-color: var(--background-color, #000)\n    --column-stroke-color: var(--text-color, #fff)\n    --column-text-color: var(--text-color, #fff)\n    color-scheme: dark\n\n.column-container :global\n  .column\n    display: flex\n    flex-direction: row\n    position: relative\n\n    .age-axis-label\n      writing-mode: vertical-lr\n      transform: rotate(180deg)\n      font-size: 12px\n      text-align: center\n      position: sticky\n      top: 0\n      max-height: 100vh\n\n    .tick text\n      text-anchor: middle\n      font-weight: 400 !important\n      transform: rotate(-90deg) translate(8px, -12px)\n\n  rect.unit\n    stroke: var(--column-stroke-color)\n    stroke-width: 1px\n\n  g.lithology-column use.frame\n    stroke: var(--column-stroke-color)\n    stroke-width: 1.5px !important\n    pointer-events: none\n\n.column-container :global .unit-label\n  text-align: center\n\n.column-container :global .col-note-label\n  font-size: 10px\n  margin-top: 3px\n  padding: 2px\n  padding-left: 3px\n  line-height: 9px\n  border-left: none !important\n\n.column-container :global g.height-range\n  display: none\n\n.column-container :global .note-inner\n  border: none\n\n.column-container :global .frame rect\n  fill: transparent\n\n.column-container :global .labeled-unit .unit-overlay\n  font-size: 10px\n  font-style: italic\n  display: flex\n  align-items: center\n  justify-content: center\n\n.column-container :global .labeled-unit .unit-overlay .unit-label\n  display: block\n  text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)\n\n.column-container :global .default-buttons\n  width: 100%\n  margin: 0 -10px\n\n.column-container :global div.section\n  display: flex\n  flex-direction: row\n\n.column-container :global div.section :global(.timescale)\n  transform: translateY(0.5)\n\n.column-container :global .section .divisions .unit\n  cursor: pointer\n\n.column-container :global rect.selection-overlay\n  fill: rgba(255,0,0,0.5)\n\n.column-container :global div.timescale\n  width: calc(6em + 4px)\n  --timescale-level-size: 1.5em\n\n.unconformity\n  height: 0px\n  font-size: 10px\n  font-style: italic\n  text-align: center\n  margin-left: calc(6em + 4px + 40px)\n\n.unconformity-text\n  transform: translateY(-0.5em)\n  width: var(--column-width)\n  color: var(--column-stroke-color)\n\n.column-container.dark-mode :global\n  color: var(--column-text-color)\n\n.column-container.dark-mode :global .timescale\n  color: #000\n\n.column-container.dark-mode :global g.inner pattern image\n  filter: invert(80%)\n\n"],"names":[],"version":3,"file":"column.module.2e29259c.js.map"}