@macrostrat/column-views 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+## [3.3.0] - 2026-02-13
+
+- Greatly streamline handling of `InsetMap`, column and unit overlay layers
+- Improve design of age range tags
+
+## [3.2.2] - 2026-02-09
+
+- Move `AgeField` and `AgeRange` to separate exports
+- Improve handling of interval ranges
+
 ## [3.2.1] - 2026-02-08
 
 - Export `ThicknessField` for unit details panels

package/dist/age-axis.cjs

@@ -5,7 +5,7 @@ const columnComponents = require("@macrostrat/column-components");
 require("react");
 const ageAxis_module = require("./age-axis.module.sass.cjs");
 const dataComponents = require("@macrostrat/data-components");
-const panel = require("./unit-details/panel.cjs");
+const ageRange = require("./unit-details/age-range.cjs");
 const store = require("./data-provider/store.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
@@ -114,7 +114,7 @@ function AgeCursor({ age }) {
         top: heightPx
       }
     },
-    [h("div.line"), h(panel.AgeLabel, { age, className: "label" })]
+    [h("div.line"), h(ageRange.AgeLabel, { age, className: "label" })]
   );
 }
 exports.AgeCursor = AgeCursor;

package/dist/age-axis.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"age-axis.cjs","sources":["../src/age-axis.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  SVG,\n  ColumnAxis,\n  ColumnContext,\n  ColumnAxisType,\n  AgeAxis,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\nimport styles from \"./age-axis.module.sass\";\nimport { useCompositeScale, useMacrostratColumnData } from \"./data-provider\";\nimport { Parenthetical } from \"@macrostrat/data-components\";\nimport { AgeLabel } from \"./unit-details\";\nimport { PackageScaleLayoutData } from \"./prepare-units\";\n\nconst h = hyper.styled(styles);\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 VerticalAxisLabel(props) {\n  const { label = \"Age\", unit = \"Ma\", className, height } = props;\n  return h(\n    \"div.column-axis-label.age-axis-label\",\n    { className, style: { height } },\n    [\n      label,\n      \" \",\n      h.if(unit)(Parenthetical, { className: \"age-axis-unit\" }, unit),\n    ],\n  );\n}\n\ninterface CompositeAgeAxisProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function CompositeAgeAxis(rest: CompositeAgeAxisProps) {\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    return {\n      key: `section-${section.section_id}`,\n      ...section.scaleInfo,\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport function ApproximateHeightAxis(rest: CompositeAgeAxisProps) {\n  /** Axis to show approximate height based on dynamic column scales */\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    const { scaleInfo } = section;\n    if (scaleInfo.heightScale == null) {\n      throw new Error(\"No height scale available for section\");\n    }\n    return {\n      key: `section-${section.section_id}`,\n      ...scaleInfo,\n      scale: scaleInfo.heightScale, // Use height scale instead of age scale\n      // This only works with dynamic columns\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    axisLabel: \"Approx. height\",\n    axisUnit: \"m\",\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport interface CompositeStratigraphicScaleInfo extends CompositeAgeAxisProps {\n  axisType: ColumnAxisType;\n  axisLabel?: string;\n  axisUnit?: string;\n  totalHeight: number;\n  packages: PackageScaleLayoutData[];\n}\n\nexport function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {\n  const { axisType, axisLabel, axisUnit, totalHeight, packages, ...rest } =\n    props;\n\n  if (axisType == ColumnAxisType.ORDINAL) {\n    return null;\n  }\n\n  let _axisLabel: string = axisLabel ?? \"Age\";\n  let _axisUnit = axisUnit ?? \"Ma\";\n  if (axisType == ColumnAxisType.DEPTH) {\n    _axisLabel = \"Depth\";\n    _axisUnit = \"m\";\n  } else if (axisType == ColumnAxisType.HEIGHT) {\n    _axisLabel = \"Height\";\n    _axisUnit = \"m\";\n  }\n\n  return h(\"div.composite-age-axis\", rest, [\n    h(VerticalAxisLabel, {\n      label: _axisLabel,\n      unit: _axisUnit,\n      height: totalHeight,\n    }),\n    h(\n      SVG,\n      {\n        className: \"age-axis-column\",\n        style: { width: `22px`, height: `${totalHeight}px` },\n        width: 22,\n        height: totalHeight,\n      },\n      packages.map((group, i) => {\n        const { key, scale } = group;\n\n        return h(AgeAxis, {\n          key,\n          className: \"age-axis\",\n          scale,\n          tickSizeOuter: 3,\n        });\n      }),\n    ),\n  ]);\n}\n\nexport function AgeCursor({ age }) {\n  /** A cursor that shows the age at a specific point on the age axis. */\n  const scale = useCompositeScale();\n  const heightPx = scale(age);\n\n  if (age == null || heightPx == null) {\n    return null;\n  }\n\n  return h(\n    \"div.age-cursor\",\n    {\n      style: {\n        top: heightPx,\n      },\n    },\n    [h(\"div.line\"), h(AgeLabel, { age, className: \"label\" })],\n  );\n}\n"],"names":["hyper","styles","Parenthetical","useMacrostratColumnData","ColumnAxisType","SVG","AgeAxis","useCompositeScale","AgeLabel"],"mappings":"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"}
+{"version":3,"file":"age-axis.cjs","sources":["../src/age-axis.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  SVG,\n  ColumnAxis,\n  ColumnContext,\n  ColumnAxisType,\n  AgeAxis,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\nimport styles from \"./age-axis.module.sass\";\nimport { useCompositeScale, useMacrostratColumnData } from \"./data-provider\";\nimport { Parenthetical } from \"@macrostrat/data-components\";\nimport { AgeLabel } from \"./unit-details\";\nimport { PackageScaleLayoutData } from \"./prepare-units\";\n\nconst h = hyper.styled(styles);\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 VerticalAxisLabel(props) {\n  const { label = \"Age\", unit = \"Ma\", className, height } = props;\n  return h(\n    \"div.column-axis-label.age-axis-label\",\n    { className, style: { height } },\n    [\n      label,\n      \" \",\n      h.if(unit)(Parenthetical, { className: \"age-axis-unit\" }, unit),\n    ],\n  );\n}\n\ninterface CompositeAgeAxisProps {\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function CompositeAgeAxis(rest: CompositeAgeAxisProps) {\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    return {\n      key: `section-${section.section_id}`,\n      ...section.scaleInfo,\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport function ApproximateHeightAxis(rest: CompositeAgeAxisProps) {\n  /** Axis to show approximate height based on dynamic column scales */\n  const { axisType, sections, totalHeight } = useMacrostratColumnData();\n\n  const packages = sections.map((section) => {\n    const { scaleInfo } = section;\n    if (scaleInfo.heightScale == null) {\n      throw new Error(\"No height scale available for section\");\n    }\n    return {\n      key: `section-${section.section_id}`,\n      ...scaleInfo,\n      scale: scaleInfo.heightScale, // Use height scale instead of age scale\n      // This only works with dynamic columns\n    };\n  });\n\n  return h(CompositeAgeAxisCore, {\n    axisType,\n    axisLabel: \"Approx. height\",\n    axisUnit: \"m\",\n    packages,\n    totalHeight,\n    ...rest,\n  });\n}\n\nexport interface CompositeStratigraphicScaleInfo extends CompositeAgeAxisProps {\n  axisType: ColumnAxisType;\n  axisLabel?: string;\n  axisUnit?: string;\n  totalHeight: number;\n  packages: PackageScaleLayoutData[];\n}\n\nexport function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {\n  const { axisType, axisLabel, axisUnit, totalHeight, packages, ...rest } =\n    props;\n\n  if (axisType == ColumnAxisType.ORDINAL) {\n    return null;\n  }\n\n  let _axisLabel: string = axisLabel ?? \"Age\";\n  let _axisUnit = axisUnit ?? \"Ma\";\n  if (axisType == ColumnAxisType.DEPTH) {\n    _axisLabel = \"Depth\";\n    _axisUnit = \"m\";\n  } else if (axisType == ColumnAxisType.HEIGHT) {\n    _axisLabel = \"Height\";\n    _axisUnit = \"m\";\n  }\n\n  return h(\"div.composite-age-axis\", rest, [\n    h(VerticalAxisLabel, {\n      label: _axisLabel,\n      unit: _axisUnit,\n      height: totalHeight,\n    }),\n    h(\n      SVG,\n      {\n        className: \"age-axis-column\",\n        style: { width: `22px`, height: `${totalHeight}px` },\n        width: 22,\n        height: totalHeight,\n      },\n      packages.map((group, i) => {\n        const { key, scale } = group;\n\n        return h(AgeAxis, {\n          key,\n          className: \"age-axis\",\n          scale,\n          tickSizeOuter: 3,\n        });\n      }),\n    ),\n  ]);\n}\n\nexport function AgeCursor({ age }) {\n  /** A cursor that shows the age at a specific point on the age axis. */\n  const scale = useCompositeScale();\n  const heightPx = scale(age);\n\n  if (age == null || heightPx == null) {\n    return null;\n  }\n\n  return h(\n    \"div.age-cursor\",\n    {\n      style: {\n        top: heightPx,\n      },\n    },\n    [h(\"div.line\"), h(AgeLabel, { age, className: \"label\" })],\n  );\n}\n"],"names":["hyper","styles","Parenthetical","useMacrostratColumnData","ColumnAxisType","SVG","AgeAxis","useCompositeScale","AgeLabel"],"mappings":"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"}

package/dist/age-axis.js

@@ -3,7 +3,7 @@ import { ColumnAxisType, SVG, AgeAxis } from "@macrostrat/column-components";
 import "react";
 import h$2 from "./age-axis.module.sass.js";
 import { Parenthetical } from "@macrostrat/data-components";
-import { AgeLabel } from "./unit-details/panel.js";
+import { AgeLabel } from "./unit-details/age-range.js";
 import { useCompositeScale, useMacrostratColumnData } from "./data-provider/store.js";
 const h = h$1.styled(h$2);
 function VerticalAxisLabel(props) {

package/dist/column-views.css

@@ -74,138 +74,23 @@
   position: relative;
   display: flex;
   flex-direction: row;
-}._legend-panel-header_128wy_1 {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5em;
-  border-bottom: 1px solid var(--panel-rule-color);
-  position: sticky;
-  top: 0;
-  background-color: var(--panel-secondary-background-color);
-  padding: 0.5em 1em;
-  z-index: 50;
-  min-height: 45px;
-  overflow: hidden;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 {
+}._interval-proportions_1ibvp_1 {
+  display: inline-flex;
+  flex-flow: row wrap;
   gap: 0.5em;
+  text-align: right;
   align-items: baseline;
-  margin: 0;
-  flex-grow: 1;
-  z-index: 5;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15:hover ._hidden-actions-container_128wy_22 {
-  visibility: visible;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 h1, ._legend-panel-header_128wy_1 ._title-container_128wy_15 h2, ._legend-panel-header_128wy_1 ._title-container_128wy_15 h3 {
-  display: inline;
-  margin: 0;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 ._hidden-actions-container_128wy_22 {
-  visibility: hidden;
-}
-._legend-panel-header_128wy_1 ._title-container_128wy_15 button {
-  transform: translateY(0px);
-}
-._legend-panel-header_128wy_1 code {
-  font-size: 0.9em;
-  color: var(--secondary-color);
-}
-._legend-panel-header_128wy_1 ._unit-id_128wy_39:before {
-  content: "#";
-  color: var(--secondary-color);
-}
-._legend-panel-header_128wy_1 ._spacer_128wy_43 {
-  flex: 1;
-}
-
-._unit-details-panel_128wy_47 {
-  display: flex;
-  flex-direction: column;
-}
-._unit-details-panel_128wy_47 ._unit-details-content-holder_128wy_51 {
-  flex: 1;
-  overflow-y: scroll;
-}
-
-._unit-details-content_128wy_51 {
-  position: relative;
-  margin: 1em;
-}
-
-._units-list_128wy_61 ._item_128wy_61:after {
-  content: ", ";
-}
-._units-list_128wy_61 ._item_128wy_61:last-child:after {
-  content: "";
 }
 
-._proportion_128wy_68, ._sep_128wy_68, ._no-units_128wy_68, ._strat-name-text_128wy_68 {
-  color: var(--secondary-color);
-  font-style: italic;
-}
-
-._strat-name-id_128wy_73, ._identifier_128wy_73 {
-  font-family: var(--monospace-font);
-  color: var(--secondary-color);
-}
-._strat-name-id_128wy_73::before, ._identifier_128wy_73::before {
-  content: "#";
-  color: var(--tertiary-color);
-}
-
-._color-swatch_128wy_82 {
-  width: 1em;
-  height: 1em;
-  border-radius: 0.2em;
-  margin-right: 0.2em;
-  border: 1px solid var(--panel-rule-color);
-  display: inline-block;
-}
-
-._refs_128wy_91 {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-}
-
-._interval-proportions_128wy_97 {
-  flex-grow: 1;
-  width: 100%;
-  text-align: right;
-}
-._interval-proportions_128wy_97 ._discourage-break_128wy_102 {
+._interval-proportions_1ibvp_1, ._discourage-break_1ibvp_9 {
+  align-items: baseline;
   white-space: nowrap;
-}
-._interval-proportions_128wy_97 ._sep_128wy_68 {
-  margin: 0 0.3em;
-}
-
-._clickable_128wy_109 {
-  cursor: pointer;
-}
-
-._hidden-actions-container_128wy_22 {
-  min-width: 0;
-  display: inline-block;
-  width: 0;
-  position: relative;
+  display: inline-flex;
+  gap: 0.5em;
 }
 
-._hidden-actions_128wy_22 {
-  padding-left: 1em;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  background-color: var(--panel-secondary-background-color);
-  z-index: 50;
-  position: relative;
-  bottom: 0;
-}
-._hidden-actions_128wy_22 button {
-  color: var(--secondary-color) !important;
+._sep_1ibvp_16 {
+  color: var(--secondary-color);
 }._column-container_15bga_1, body.light-mode ._column-container_15bga_1 {
   --column-background-color: var(--background-color, #fff);
   --column-stroke-color: var(--text-emphasized-color, #000);
@@ -428,6 +313,126 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
 ._legend-json-view_4jzei_30 {
   padding-left: 0;
   margin-left: -0.5em;
+}._legend-panel-header_ue390_1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+  border-bottom: 1px solid var(--panel-rule-color);
+  position: sticky;
+  top: 0;
+  background-color: var(--panel-secondary-background-color);
+  padding: 0.5em 1em;
+  z-index: 50;
+  min-height: 45px;
+  overflow: hidden;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 {
+  gap: 0.5em;
+  align-items: baseline;
+  margin: 0;
+  flex-grow: 1;
+  z-index: 5;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15:hover ._hidden-actions-container_ue390_22 {
+  visibility: visible;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 h1, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h2, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h3 {
+  display: inline;
+  margin: 0;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 ._hidden-actions-container_ue390_22 {
+  visibility: hidden;
+}
+._legend-panel-header_ue390_1 ._title-container_ue390_15 button {
+  transform: translateY(0px);
+}
+._legend-panel-header_ue390_1 code {
+  font-size: 0.9em;
+  color: var(--secondary-color);
+}
+._legend-panel-header_ue390_1 ._unit-id_ue390_39:before {
+  content: "#";
+  color: var(--secondary-color);
+}
+._legend-panel-header_ue390_1 ._spacer_ue390_43 {
+  flex: 1;
+}
+
+._unit-details-panel_ue390_47 {
+  display: flex;
+  flex-direction: column;
+}
+._unit-details-panel_ue390_47 ._unit-details-content-holder_ue390_51 {
+  flex: 1;
+  overflow-y: scroll;
+}
+
+._unit-details-content_ue390_51 {
+  position: relative;
+  margin: 1em;
+}
+
+._units-list_ue390_61 ._item_ue390_61:after {
+  content: ", ";
+}
+._units-list_ue390_61 ._item_ue390_61:last-child:after {
+  content: "";
+}
+
+._proportion_ue390_68, ._sep_ue390_68, ._no-units_ue390_68, ._strat-name-text_ue390_68 {
+  color: var(--secondary-color);
+  font-style: italic;
+}
+
+._strat-name-id_ue390_73, ._identifier_ue390_73 {
+  font-family: var(--monospace-font);
+  color: var(--secondary-color);
+}
+._strat-name-id_ue390_73::before, ._identifier_ue390_73::before {
+  content: "#";
+  color: var(--tertiary-color);
+}
+
+._color-swatch_ue390_82 {
+  width: 1em;
+  height: 1em;
+  border-radius: 0.2em;
+  margin-right: 0.2em;
+  border: 1px solid var(--panel-rule-color);
+  display: inline-block;
+}
+
+._refs_ue390_91 {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+._clickable_ue390_97 {
+  cursor: pointer;
+}
+
+._hidden-actions-container_ue390_22 {
+  min-width: 0;
+  display: inline-block;
+  width: 0;
+  position: relative;
+}
+
+._hidden-actions_ue390_22 {
+  padding-left: 1em;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  background-color: var(--panel-secondary-background-color);
+  z-index: 50;
+  position: relative;
+  bottom: 0;
+}
+._hidden-actions_ue390_22 button {
+  color: var(--secondary-color) !important;
 }._boundary-age-model_16scl_1 {
   top: 0;
   left: 0;

package/dist/index.cjs

@@ -6,23 +6,25 @@ const index$6 = require("./prepare-units/index.cjs");
 const column = require("./column.cjs");
 const ageModelOverlay = require("./age-model-overlay.cjs");
 const notes = require("./notes.cjs");
-const panel = require("./unit-details/panel.cjs");
+const ageRange = require("./unit-details/age-range.cjs");
 const composite = require("./units/composite.cjs");
+const columns = require("./maps/layers/columns.cjs");
 const base = require("./facets/measurements/base.cjs");
+const panel = require("./unit-details/panel.cjs");
 const layers = require("./maps/column-navigation/svg/layers.cjs");
 const core = require("./maps/column-correlation/core.cjs");
 const state = require("./maps/column-correlation/state.cjs");
-const columnNav = require("./data-provider/column-nav.cjs");
 const index$1 = require("./maps/column-navigation/mapbox/index.cjs");
+const columnNav = require("./data-provider/column-nav.cjs");
 const index$2 = require("./maps/column-navigation/svg/index.cjs");
 const main = require("./correlation-chart/main.cjs");
 const index$3 = require("./facets/detrital-zircon/index.cjs");
 const provider = require("./facets/fossils/provider.cjs");
 const types = require("./prepare-units/types.cjs");
-const insetMap = require("./maps/_shared/inset-map.cjs");
+const index$4 = require("./maps/inset-map/index.cjs");
 const isotopesColumn = require("./facets/carbon-isotopes/isotopes-column.cjs");
 const store = require("./data-provider/store.cjs");
-const index$4 = require("./maps/units-overlay/index.cjs");
+const units = require("./maps/layers/units.cjs");
 const dataProvider = require("./facets/carbon-isotopes/data-provider.cjs");
 const utils = require("./prepare-units/utils.cjs");
 const index$5 = require("./facets/fossils/index.cjs");
@@ -31,7 +33,6 @@ const sgp = require("./facets/measurements/sgp.cjs");
 const modalPanel = require("./unit-details/modal-panel.cjs");
 const popover = require("./unit-details/popover.cjs");
 const unitSelection = require("./data-provider/unit-selection.cjs");
-const styles = require("./maps/_shared/styles.cjs");
 const colors = require("./units/colors.cjs");
 const hashString = require("./correlation-chart/hash-string.cjs");
 const helpers = require("./prepare-units/helpers.cjs");
@@ -56,15 +57,13 @@ exports.ColumnContainer = column.ColumnContainer;
 exports.BoundaryAgeModelOverlay = ageModelOverlay.BoundaryAgeModelOverlay;
 exports.ComputedSurfacesOverlay = ageModelOverlay.ComputedSurfacesOverlay;
 exports.ColumnNotes = notes.ColumnNotes;
-exports.AgeLabel = panel.AgeLabel;
-exports.ClickableText = panel.ClickableText;
-exports.Duration = panel.Duration;
-exports.Identifier = panel.Identifier;
-exports.LegendPanelHeader = panel.LegendPanelHeader;
-exports.ReferencesField = panel.ReferencesField;
-exports.ThicknessField = panel.ThicknessField;
-exports.UnitDetailsFeature = panel.UnitDetailsFeature;
-exports.UnitDetailsPanel = panel.UnitDetailsPanel;
+exports.AgeField = ageRange.AgeField;
+exports.AgeLabel = ageRange.AgeLabel;
+exports.AgeRange = ageRange.AgeRange;
+exports.Duration = ageRange.Duration;
+exports.IntervalProportions = ageRange.IntervalProportions;
+exports.getAge = ageRange.getAge;
+exports.getAgeRange = ageRange.getAgeRange;
 exports.AnnotatedUnitsColumn = composite.AnnotatedUnitsColumn;
 exports.ColumnNotesProvider = composite.ColumnNotesProvider;
 exports.CompositeUnitComponent = composite.CompositeUnitComponent;
@@ -72,11 +71,21 @@ exports.CompositeUnitsColumn = composite.CompositeUnitsColumn;
 exports.LabelTrackerProvider = composite.LabelTrackerProvider;
 exports.SectionLabelsColumn = composite.SectionLabelsColumn;
 exports.TrackedLabeledUnit = composite.TrackedLabeledUnit;
+exports.BaseColumnsLayer = columns.BaseColumnsLayer;
+exports.SelectedColumnOverlay = columns.SelectedColumnOverlay;
+exports.buildColumnsStyle = columns.buildColumnsStyle;
 exports.BaseMeasurementsColumn = base.BaseMeasurementsColumn;
 exports.TruncatedList = base.TruncatedList;
 exports.groupNotesByPixelDistance = base.groupNotesByPixelDistance;
 exports.mergeHeightRanges = base.mergeHeightRanges;
 exports.standardizeMeasurementHeight = base.standardizeMeasurementHeight;
+exports.ClickableText = panel.ClickableText;
+exports.Identifier = panel.Identifier;
+exports.LegendPanelHeader = panel.LegendPanelHeader;
+exports.ReferencesField = panel.ReferencesField;
+exports.ThicknessField = panel.ThicknessField;
+exports.UnitDetailsFeature = panel.UnitDetailsFeature;
+exports.UnitDetailsPanel = panel.UnitDetailsPanel;
 exports.ColumnCenters = layers.ColumnCenters;
 exports.ColumnFeatures = layers.ColumnFeatures;
 exports.ColumnKeyboardNavigation = layers.ColumnKeyboardNavigation;
@@ -86,9 +95,12 @@ exports.MeasurementsLayer = layers.MeasurementsLayer;
 exports.ColumnCorrelationMap = core.ColumnCorrelationMap;
 exports.ColumnCorrelationProvider = state.ColumnCorrelationProvider;
 exports.useCorrelationMapStore = state.useCorrelationMapStore;
+exports.ColumnHoverInteraction = index$1.ColumnHoverInteraction;
+exports.ColumnNavigationMap = index$1.ColumnNavigationMap;
+exports.ColumnSelectionManager = index$1.ColumnSelectionManager;
+exports.ColumnsNavigationLayer = index$1.ColumnsNavigationLayer;
 exports.ColumnNavProvider = columnNav.ColumnNavProvider;
 exports.useColumnNav = columnNav.useColumnNav;
-exports.ColumnNavigationMap = index$1.ColumnNavigationMap;
 exports.ColumnNavigationSVGMap = index$2.ColumnNavigationSVGMap;
 exports.ResizableMapFrame = index$2.ResizableMapFrame;
 exports.CorrelationChart = main.CorrelationChart;
@@ -98,7 +110,7 @@ exports.FossilDataType = provider.FossilDataType;
 exports.useFossilData = provider.useFossilData;
 exports.HeightMethod = types.HeightMethod;
 exports.HybridScaleType = types.HybridScaleType;
-exports.InsetMap = insetMap.InsetMap;
+exports.InsetMap = index$4.InsetMap;
 exports.IsotopesColumn = isotopesColumn.IsotopesColumn;
 exports.IsotopesDataset = isotopesColumn.IsotopesDataset;
 exports.LithologiesProvider = store.LithologiesProvider;
@@ -113,8 +125,8 @@ exports.useColumnUnitsMap = store.useColumnUnitsMap;
 exports.useCompositeScale = store.useCompositeScale;
 exports.useMacrostratColumnData = store.useMacrostratColumnData;
 exports.useMacrostratUnits = store.useMacrostratUnits;
-exports.MacrostratUnitsOverlay = index$4.MacrostratUnitsOverlay;
-exports.buildUnitsStyle = index$4.buildUnitsStyle;
+exports.MacrostratUnitsOverlay = units.MacrostratUnitsOverlay;
+exports.buildUnitsStyle = units.buildUnitsStyle;
 exports.MeasurementDataContext = dataProvider.MeasurementDataContext;
 exports.MeasurementDataProvider = dataProvider.MeasurementDataProvider;
 exports.useMeasurementData = dataProvider.useMeasurementData;
@@ -141,7 +153,6 @@ exports.useColumnRef = unitSelection.useColumnRef;
 exports.useSelectedUnit = unitSelection.useSelectedUnit;
 exports.useUnitSelectionDispatch = unitSelection.useUnitSelectionDispatch;
 exports.useUnitSelectionTarget = unitSelection.useUnitSelectionTarget;
-exports.buildColumnsStyle = styles.buildColumnsStyle;
 exports.flattenLithologies = colors.flattenLithologies;
 exports.getMixedColorForData = colors.getMixedColorForData;
 exports.getMixedUnitColor = colors.getMixedUnitColor;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -4,23 +4,25 @@ import { prepareColumnUnits, usePreparedColumnUnits } from "./prepare-units/inde
 import { Column, ColumnBasicInfo, ColumnContainer } from "./column.js";
 import { BoundaryAgeModelOverlay, ComputedSurfacesOverlay } from "./age-model-overlay.js";
 import { ColumnNotes } from "./notes.js";
-import { AgeLabel, ClickableText, Duration, Identifier, LegendPanelHeader, ReferencesField, ThicknessField, UnitDetailsFeature, UnitDetailsPanel } from "./unit-details/panel.js";
+import { AgeField, AgeLabel, AgeRange, Duration, IntervalProportions, getAge, getAgeRange } from "./unit-details/age-range.js";
 import { AnnotatedUnitsColumn, ColumnNotesProvider, CompositeUnitComponent, CompositeUnitsColumn, LabelTrackerProvider, SectionLabelsColumn, TrackedLabeledUnit } from "./units/composite.js";
+import { BaseColumnsLayer, SelectedColumnOverlay, buildColumnsStyle } from "./maps/layers/columns.js";
 import { BaseMeasurementsColumn, TruncatedList, groupNotesByPixelDistance, mergeHeightRanges, standardizeMeasurementHeight } from "./facets/measurements/base.js";
+import { ClickableText, Identifier, LegendPanelHeader, ReferencesField, ThicknessField, UnitDetailsFeature, UnitDetailsPanel } from "./unit-details/panel.js";
 import { ColumnCenters, ColumnFeatures, ColumnKeyboardNavigation, Columns, CurrentColumn, MeasurementsLayer } from "./maps/column-navigation/svg/layers.js";
 import { ColumnCorrelationMap } from "./maps/column-correlation/core.js";
 import { ColumnCorrelationProvider, useCorrelationMapStore } from "./maps/column-correlation/state.js";
+import { ColumnHoverInteraction, ColumnNavigationMap, ColumnSelectionManager, ColumnsNavigationLayer } from "./maps/column-navigation/mapbox/index.js";
 import { ColumnNavProvider, useColumnNav } from "./data-provider/column-nav.js";
-import { ColumnNavigationMap } from "./maps/column-navigation/mapbox/index.js";
 import { ColumnNavigationSVGMap, ResizableMapFrame } from "./maps/column-navigation/svg/index.js";
 import { CorrelationChart } from "./correlation-chart/main.js";
 import { DetritalColumn, DetritalGroup } from "./facets/detrital-zircon/index.js";
 import { FossilDataType, useFossilData } from "./facets/fossils/provider.js";
 import { HeightMethod, HybridScaleType } from "./prepare-units/types.js";
-import { InsetMap } from "./maps/_shared/inset-map.js";
+import { InsetMap } from "./maps/inset-map/index.js";
 import { IsotopesColumn, IsotopesDataset } from "./facets/carbon-isotopes/isotopes-column.js";
 import { LithologiesProvider, MacrostratColumnDataProvider, MacrostratColumnProvider, MacrostratColumnStateProvider, UnitSelectionProvider, columnUnitsAtom, columnUnitsMapAtom, scope, useColumnUnitsMap, useCompositeScale, useMacrostratColumnData, useMacrostratUnits } from "./data-provider/store.js";
-import { MacrostratUnitsOverlay, buildUnitsStyle } from "./maps/units-overlay/index.js";
+import { MacrostratUnitsOverlay, buildUnitsStyle } from "./maps/layers/units.js";
 import { MeasurementDataContext, MeasurementDataProvider, useMeasurementData } from "./facets/carbon-isotopes/data-provider.js";
 import { MergeSectionsMode, agesOverlap, createUnitSorter, ensureArray, ensureRealFloat, getPositionWithinUnit, getUnitHeightRange, unitsOverlap } from "./prepare-units/utils.js";
 import { PBDBFossilsColumn } from "./facets/fossils/index.js";
@@ -29,15 +31,17 @@ import { SGPMeasurementsColumn } from "./facets/measurements/sgp.js";
 import { UnitDetailsPanelWithNavigation } from "./unit-details/modal-panel.js";
 import { UnitDetailsPopover, UnitSelectionPopover } from "./unit-details/popover.js";
 import { UnitKeyboardNavigation, UnitSelectionCallbackManager, allowUnitSelectionAtom, selectedUnitIDAtom, useAtomOverlayPosition, useColumnRef, useSelectedUnit, useUnitSelectionDispatch, useUnitSelectionTarget } from "./data-provider/unit-selection.js";
-import { buildColumnsStyle } from "./maps/_shared/styles.js";
 import { flattenLithologies, getMixedColorForData, getMixedUnitColor } from "./units/colors.js";
 import { parseLineFromString, stringifyLine } from "./correlation-chart/hash-string.js";
 import { preprocessUnits } from "./prepare-units/helpers.js";
 export {
   AgeCursor,
+  AgeField,
   AgeLabel,
+  AgeRange,
   AnnotatedUnitsColumn,
   ApproximateHeightAxis,
+  BaseColumnsLayer,
   BaseMeasurementsColumn,
   BasicUnitComponent,
   BoundaryAgeModelOverlay,
@@ -50,13 +54,16 @@ export {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
   ColumnFeatures,
+  ColumnHoverInteraction,
   ColumnKeyboardNavigation,
   ColumnNavProvider,
   ColumnNavigationMap,
   ColumnNavigationSVGMap,
   ColumnNotes,
   ColumnNotesProvider,
+  ColumnSelectionManager,
   Columns,
+  ColumnsNavigationLayer,
   CompositeAgeAxis,
   CompositeAgeAxisCore,
   CompositeUnitComponent,
@@ -73,6 +80,7 @@ export {
   HybridScaleType,
   Identifier,
   InsetMap,
+  IntervalProportions,
   IsotopesColumn,
   IsotopesDataset,
   LabelTrackerProvider,
@@ -92,6 +100,7 @@ export {
   ResizableMapFrame,
   SGPMeasurementsColumn,
   SectionLabelsColumn,
+  SelectedColumnOverlay,
   SimpleUnitsColumn,
   ThicknessField,
   TrackedLabeledUnit,
@@ -117,6 +126,8 @@ export {
   ensureArray,
   ensureRealFloat,
   flattenLithologies,
+  getAge,
+  getAgeRange,
   getMixedColorForData,
   getMixedUnitColor,
   getPositionWithinUnit,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/maps/column-correlation/core.cjs

@@ -6,30 +6,22 @@ const h = require("@macrostrat/hyper");
 const React = require("react");
 const mapboxUtils = require("@macrostrat/mapbox-utils");
 const state = require("./state.cjs");
+const index = require("../inset-map/index.cjs");
 const mapStyles = require("@macrostrat/map-styles");
-const styles = require("../_shared/styles.cjs");
-const insetMap = require("../_shared/inset-map.cjs");
+const columns = require("../layers/columns.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h);
 function ColumnCorrelationMap(props) {
   const { padding = 50, children, columnColor, projectID, ...rest } = props;
-  const overlayStyles = React.useMemo(() => {
-    return [
-      styles.buildColumnsStyle(columnColor),
-      selectedColumnsStyle,
-      lineOfSectionStyle
-    ];
-  }, [columnColor]);
   return h__default.default(
-    insetMap.InsetMap,
+    index.InsetMap,
     {
       ...rest,
       boxZoom: false,
-      dragRotate: false,
-      overlayStyles
+      dragRotate: false
     },
     [
-      h__default.default(ColumnsLayer),
+      h__default.default(ColumnsLayer, { color: columnColor }),
       h__default.default(SelectedColumnsLayer),
       h__default.default(MapClickHandler),
       h__default.default(SectionLine, { padding }),
@@ -48,6 +40,7 @@ function MapClickHandler() {
   return null;
 }
 function SelectedColumnsLayer() {
+  mapboxReact.useOverlayStyle(() => selectedColumnsStyle, []);
   const focusedColumns = state.useCorrelationMapStore(
     (state2) => state2.focusedColumns
   );
@@ -78,23 +71,9 @@ function SelectedColumnsLayer() {
   );
   return null;
 }
-function ColumnsLayer({ enabled = true }) {
-  const columns = state.useCorrelationMapStore((state2) => state2.columns);
-  mapboxReact.useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
-      };
-      console.log(" columns", data);
-      mapboxUtils.setGeoJSON(map, "columns", data);
-    },
-    [columns, enabled]
-  );
-  return null;
+function ColumnsLayer({ enabled = true, color }) {
+  const columns$1 = state.useCorrelationMapStore((state2) => state2.columns);
+  return h__default.default(columns.BaseColumnsLayer, { enabled, color, columns: columns$1 });
 }
 const selectedColumnsStyle = {
   version: 8,
@@ -142,6 +121,7 @@ const lineOfSectionStyle = {
   layers: mapStyles.buildCrossSectionLayers()
 };
 function SectionLine({ padding }) {
+  mapboxReact.useOverlayStyle(() => lineOfSectionStyle, []);
   const focusedLine = state.useCorrelationMapStore((state2) => state2.focusedLine);
   mapboxReact.useMapStyleOperator(
     (map) => {