@macrostrat/column-views 1.0.3 → 2.0.0

package/dist/esm/prepare-units.6c890a96.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;AAgCO,IAAA,AAAK,mEAAA;;;WAAA;;AAUL,SAAS,0CACd,IAAgB,EAChB,OAA6B;IAE7B;;GAEC,GACD,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,OAAO,0CAAmB,MAAM;IAClC,GAAG;QAAC;WAAS,OAAO,MAAM,CAAC;KAAS;AACtC;AAEO,SAAS,0CACd,KAAiB,EACjB,OAA6B;IAE7B,wDAAwD,GAExD,MAAM,SACJ,KAAK,SACL,KAAK,iBACL,yCACA,QAAQ,sBACR,kBAAkB,+BAClB,8BAA8B,OAC/B,GAAG;IAEJ,qCAAqC,GACrC,IAAI,SAAS,MAAM,MAAM,CAAC,CAAC;QACzB,6CAA6C;QAC7C,OAAO,CAAA,GAAA,yCAAU,EAAE,GAAG;mBAAE;mBAAO;QAAM;IACvC;IAEA,IAAI;IACJ,IACE,0BACA,YAAY,CAAA,GAAA,qBAAa,EAAE,OAAO,EAClC;QACA,oEAAoE;QACpE,MAAM,CAAC,YAAY,WAAW,GAAG,CAAA,GAAA,yCAAiB,EAAE;QACpD,YAAY;YACV;gBACE,YAAY;gBACZ;;WAEG,GACH,OAAO,SAAS;gBAChB,OAAO,SAAS;gBAChB,OAAO;YACT;SACD;IACH,OACE,YAAY,CAAA,GAAA,yCAAqB,EAAE,QAAQ;IAG7C;;;GAGC,GACD,IAAI,WAAW;IACf,IACE,kCACA,YAAY,CAAA,GAAA,qBAAa,EAAE,OAAO,EAElC,WAAW,CAAA,GAAA,yCAAuB,EAAE;IAEtC,6CAA6C;IAC7C,WAAW,SAAS,MAAM,CAAC,CAAC,IAAM,KAAK;IAEvC;;GAEC,GACD,WAAW,SAAS,GAAG,CAAC,CAAC;QACvB,MAAM,SAAE,KAAK,SAAE,KAAK,EAAE,GAAG;QACzB,OAAO;YACL,GAAG,OAAO;YACV,OAAO,KAAK,GAAG,CAAC,OAAO,QAAQ,KAAK,IAAI,CAAC;YACzC,OAAO,KAAK,GAAG,CAAC,OAAO,QAAQ,KAAK,IAAI;QAC1C;IACF;IAEA;;;GAGC,GACD,IAAI,qBAAqB,CAAA,GAAA,yCAAoB,EAAE,UAAU;IAEzD,IAAI,+BAA+B,OAAO;QACxC,IAAI,YAAY,sBAAsB;QACtC,IAAI,OAAO,+BAA+B,UACxC,YAAY;QAGd,qBAAqB,CAAA,GAAA,yCAAkC,EACrD,oBACA,WACA;IAEJ;IAEA;;;GAGC,GACD,MAAM,SAAS,mBAAmB,MAAM,CAAC,CAAC,KAAK;QAC7C,MAAM,SAAE,KAAK,EAAE,GAAG;QAClB,KAAK,MAAM,QAAQ,MACjB,IAAI,IAAI,CAAC;QAEX,OAAO;IACT,GAAG,EAAE;IAEL,mDAAmD,GACnD,MAAM,eAAE,WAAW,EAAE,UAAU,SAAS,EAAE,GAAG,CAAA,GAAA,yCAAqB,EAChE,oBACA;IAGF;;;KAGG,GACH,MAAM,cAAc,UAAU,GAAG,CAAC,CAAC;QACjC,OAAO;YACL,GAAG,OAAO;YACV,OAAO,CAAA,GAAA,yCAAc,EAAE,SAAS;QAClC;IACF;IAEA,OAAO;QACL,OAAO;qBACP;QACA,UAAU;IACZ;AACF","sources":["packages/column-views/src/prepare-units/index.ts"],"sourcesContent":["import {\n  getSectionAgeRange,\n  groupUnitsIntoSections,\n  mergeOverlappingSections,\n  preprocessUnits,\n} from \"./helpers\";\nimport { ColumnAxisType } from \"@macrostrat/column-components\";\nimport { useMemo } from \"react\";\nimport type { ExtUnit } from \"./helpers\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nimport {\n  collapseUnconformitiesByPixelHeight,\n  ColumnScaleOptions,\n  CompositeColumnData,\n  computeSectionHeights,\n  finalizeSectionHeights,\n  PackageLayoutData,\n} from \"./composite-scale\";\nimport type { SectionInfo } from \"./helpers\";\nimport { agesOverlap, unitsOverlap } from \"./utils\";\n\nexport * from \"./utils\";\nexport { preprocessUnits, groupUnitsIntoSections };\n\nexport interface PrepareColumnOptions extends ColumnScaleOptions {\n  axisType: ColumnAxisType;\n  t_age?: number;\n  b_age?: number;\n  mergeSections?: MergeSectionsMode;\n  collapseSmallUnconformities?: boolean | number;\n}\n\nexport enum MergeSectionsMode {\n  ALL = \"all\",\n  OVERLAPPING = \"overlapping\",\n}\n\nexport interface PreparedColumnData extends CompositeColumnData {\n  sections: PackageLayoutData[];\n  units: ExtUnit[];\n}\n\nexport function usePreparedColumnUnits(\n  data: UnitLong[],\n  options: PrepareColumnOptions\n): PreparedColumnData {\n  /** This function wraps and memoizes all preparation steps for converting\n   * an array of units from the /units route to a form ready for usage.\n   */\n  return useMemo(() => {\n    return prepareColumnUnits(data, options);\n  }, [data, ...Object.values(options)]);\n}\n\nexport function prepareColumnUnits(\n  units: UnitLong[],\n  options: PrepareColumnOptions\n): PreparedColumnData {\n  /** Prepare units for rendering into Macrostrat columns */\n\n  const {\n    t_age,\n    b_age,\n    mergeSections = MergeSectionsMode.OVERLAPPING,\n    axisType,\n    unconformityHeight,\n    collapseSmallUnconformities = false,\n  } = options;\n\n  /** Prototype filtering to age range */\n  let units1 = units.filter((d) => {\n    // Filter units by t_age and b_age, inclusive\n    return agesOverlap(d, { t_age, b_age });\n  });\n\n  let sections0: SectionInfo<UnitLong>[];\n  if (\n    mergeSections == MergeSectionsMode.ALL &&\n    axisType != ColumnAxisType.ORDINAL\n  ) {\n    // For the \"merge sections\" mode, we need to create a single section\n    const [b_unit_age, t_unit_age] = getSectionAgeRange(units1);\n    sections0 = [\n      {\n        section_id: 0,\n        /**\n         * If ages limits are directly specified, use them to define the section bounds.\n         * */\n        t_age: t_age ?? t_unit_age,\n        b_age: b_age ?? b_unit_age,\n        units: units1,\n      },\n    ];\n  } else {\n    sections0 = groupUnitsIntoSections(units1, axisType);\n  }\n\n  /** Merging overlapping sections really only makes sense for age/height/depth\n   * columns. Ordinal columns are numbered by section so merging them\n   * results in collisions.\n   */\n  let sections = sections0;\n  if (\n    mergeSections == MergeSectionsMode.OVERLAPPING &&\n    axisType != ColumnAxisType.ORDINAL\n  ) {\n    sections = mergeOverlappingSections(sections);\n  }\n  // Filter out undefined sections just in case\n  sections = sections.filter((d) => d != null);\n\n  /* Now that we are done merging sections, we can ensure that our sections\n   * are correctly limited to the t_age and b_age applied to the overall column.\n   */\n  sections = sections.map((section) => {\n    const { t_age, b_age } = section;\n    return {\n      ...section,\n      t_age: Math.max(t_age, options.t_age ?? -Infinity),\n      b_age: Math.min(b_age, options.b_age ?? Infinity),\n    };\n  });\n\n  /* Compute pixel scales etc. for sections\n   * We need to do this now to determine which unconformities\n   * are small enough to collapse.\n   */\n  let sectionsWithScales = computeSectionHeights(sections, options);\n\n  if (collapseSmallUnconformities ?? false) {\n    let threshold = unconformityHeight ?? 30;\n    if (typeof collapseSmallUnconformities == \"number\") {\n      threshold = collapseSmallUnconformities;\n    }\n\n    sectionsWithScales = collapseUnconformitiesByPixelHeight(\n      sectionsWithScales,\n      threshold,\n      options\n    );\n  }\n\n  /** Reconstitute the units so that they are sorted by section.\n   * This is mostly important so that unit keyboard navigation\n   * predictably selects adjacent units.\n   */\n  const units2 = sectionsWithScales.reduce((acc, group) => {\n    const { units } = group;\n    for (const unit of units) {\n      acc.push(unit);\n    }\n    return acc;\n  }, []);\n\n  /** Prepare section scale information using groups */\n  const { totalHeight, sections: sections2 } = finalizeSectionHeights(\n    sectionsWithScales,\n    unconformityHeight\n  );\n\n  /** For each section, find units that are overlapping.\n   * We do this after merging sections so that we can\n   * handle cases where there are overlapping units across sections\n   * */\n  const sectionsOut = sections2.map((section) => {\n    return {\n      ...section,\n      units: preprocessUnits(section, axisType),\n    };\n  });\n\n  return {\n    units: units2,\n    totalHeight,\n    sections: sectionsOut,\n  };\n}\n"],"names":[],"version":3,"file":"prepare-units.6c890a96.js.map"}

package/dist/esm/{resolvers.b5c82b78.js → resolvers.36013b49.js}

@@ -7,6 +7,8 @@ const $d3e69bd163d41f63$var$symbolIndex = {
     sand: 608,
     siltstone: 616,
     silt: 616,
+    siliciclastic: 615,
+    mud: 620,
     "dolomitic siltstone": 616,
     shale: 620,
     limestone: 627,
@@ -16,15 +18,23 @@ const $d3e69bd163d41f63$var$symbolIndex = {
     "dolomite-mudstone": 642,
     dolostone: 642,
     mudstone: 620,
+    slate: 703,
     "sandy-dolomite": 645,
     quartzite: 702,
     halite: 668,
+    gypsum: 667,
+    evaporite: 667,
+    claystone: 620,
+    anhydrite: 667,
+    gabbro: 720,
     basalt: 717,
+    diabase: 717,
     rhyolite: 722,
     andesite: 723,
     till: 681,
     loess: 684,
     "calcareous ooze": 653,
+    "siliceous ooze": 653,
     chalk: 626,
     gravel: 601,
     plutonic: 721,
@@ -40,7 +50,8 @@ const $d3e69bd163d41f63$var$symbolIndex = {
     tonalite: 727,
     granodiorite: 725,
     monzonite: 723,
-    argillite: 624
+    argillite: 624,
+    diamictite: 681
 };
 const $d3e69bd163d41f63$export$7be7d732f3de9464 = (d)=>{
     let liths = d.lith;
@@ -80,4 +91,4 @@ const $d3e69bd163d41f63$export$e8deec7b02ce51eb = (id)=>{
 
 
 export {$d3e69bd163d41f63$export$7be7d732f3de9464 as resolveID, $d3e69bd163d41f63$export$e8deec7b02ce51eb as scalePattern};
-//# sourceMappingURL=resolvers.b5c82b78.js.map
+//# sourceMappingURL=resolvers.36013b49.js.map

package/dist/esm/resolvers.36013b49.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,MAAM,oCAAc;IAClB,sBAAsB;IACtB,eAAe;IACf,WAAW;IACX,kBAAkB;IAClB,aAAa;IACb,MAAM;IACN,WAAW;IACX,MAAM;IACN,eAAe;IACf,KAAK;IACL,uBAAuB;IACvB,OAAO;IACP,WAAW;IACX,UAAU;IACV,cAAc;IACd,WAAW;IACX,qBAAqB;IACrB,WAAW;IACX,UAAU;IACV,OAAO;IACP,kBAAkB;IAClB,WAAW;IACX,QAAQ;IACR,QAAQ;IACR,WAAW;IACX,WAAW;IACX,WAAW;IACX,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,OAAO;IACP,mBAAmB;IACnB,kBAAkB;IAClB,OAAO;IACP,QAAQ;IACR,UAAU;IACV,SAAS;IACT,MAAM;IACN,SAAS;IACT,MAAM;IACN,UAAU;IACV,aAAa;IACb,gBAAgB;IAChB,WAAW;IACX,QAAQ;IACR,UAAU;IACV,cAAc;IACd,WAAW;IACX,WAAW;IACX,YAAY;AACd;AAEA,MAAM,4CAAY,CAAC;IACjB,IAAI,QAAQ,EAAE,IAAI;IAClB,IAAI,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,IAAM,EAAE,IAAI,EAAE,IAAI,CAAC;IACjD,MAAM,IAAI,CAAC,CAAC,GAAG,IAAM,EAAE,IAAI,GAAG,EAAE,IAAI;IAEpC,+DAA+D;IAE/D,IAAI,MAAM;IAEV,6BAA6B;IAC7B,IAAI,EAAE,SAAS,IAAI,QACjB,OAAO;IAET,IAAI,EAAE,SAAS,IAAI,mBACjB,OAAO;IAGT,KAAK,MAAM,KAAK,MAAO;QACrB,IAAI,EAAE,IAAI,IAAI,aAAa;YACzB,8BAA8B;YAC9B,IAAI,SAAS,QAAQ,CAAC,SACpB,OAAO;YAET,IAAI,SAAS,QAAQ,CAAC,WACpB,OAAO;YAET,IAAI,SAAS,QAAQ,CAAC,UACpB,OAAO;YAET,IAAI,SAAS,QAAQ,CAAC,UACpB,OAAO;QAEX;QAEA,IAAI,EAAE,IAAI,IAAI,gBAAgB;YAC5B,8BAA8B;YAC9B,IAAI,SAAS,QAAQ,CAAC,YACpB,OAAO;QAEX;QAEA,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,SAClB,OAAO;QAET,MAAM,iCAAW,CAAC,EAAE,IAAI,CAAC;QACzB,IAAI,OAAO,MACT,OAAO;QAGT,IAAI,EAAE,IAAI,IAAI,YACZ,OAAO;IAEX;IACA,OAAO;AACT;AAEA,MAAM,qCAAe;IACnB,OAAO;IACP,OAAO;AACT;AAEA,MAAM,4CAAe,CAAC;IACpB,OAAO,kCAAY,CAAC,GAAG,IAAI,CAAC,IAAI;AAClC","sources":["packages/column-views/src/units/resolvers.ts"],"sourcesContent":["const symbolIndex = {\n  \"dolomite-limestone\": 641,\n  lime_mudstone: 627,\n  sandstone: 607,\n  \"quartz arenite\": 607,\n  litharenite: 608,\n  sand: 608,\n  siltstone: 616,\n  silt: 616,\n  siliciclastic: 615,\n  mud: 620,\n  \"dolomitic siltstone\": 616,\n  shale: 620,\n  limestone: 627,\n  dolomite: 642,\n  conglomerate: 602,\n  carbonate: 627,\n  \"dolomite-mudstone\": 642,\n  dolostone: 642,\n  mudstone: 620,\n  slate: 703,\n  \"sandy-dolomite\": 645,\n  quartzite: 702,\n  halite: 668,\n  gypsum: 667,\n  evaporite: 667,\n  claystone: 620,\n  anhydrite: 667,\n  gabbro: 720,\n  basalt: 717,\n  diabase: 717,\n  rhyolite: 722,\n  andesite: 723,\n  till: 681,\n  loess: 684,\n  \"calcareous ooze\": 653,\n  \"siliceous ooze\": 653,\n  chalk: 626,\n  gravel: 601,\n  plutonic: 721,\n  granite: 719,\n  clay: 660,\n  syenite: 722,\n  tuff: 711,\n  volcanic: 725,\n  metamorphic: 707,\n  volcaniclastic: 714,\n  migmatite: 709,\n  gneiss: 708,\n  tonalite: 727,\n  granodiorite: 725,\n  monzonite: 723,\n  argillite: 624,\n  diamictite: 681,\n};\n\nconst resolveID = (d: any) => {\n  let liths = d.lith;\n  let environs = d.environ.map((d) => d.name).join(\" \");\n  liths.sort((a, b) => b.prop - a.prop);\n\n  //console.log(d, d.unit_name, liths.map(d => d.name), environs)\n\n  let sym = null;\n\n  // overrides for IODP columns\n  if (d.unit_name == \"clay\") {\n    return \"650\";\n  }\n  if (d.unit_name == \"calcareous clay\") {\n    return \"651\";\n  }\n\n  for (const k of liths) {\n    if (k.name == \"sandstone\") {\n      // Special cases for sandstone\n      if (environs.includes(\"dune\")) {\n        return \"609\";\n      }\n      if (environs.includes(\"marine\")) {\n        return \"608\";\n      }\n      if (environs.includes(\"shore\")) {\n        return \"611\";\n      }\n      if (environs.includes(\"loess\")) {\n        return \"686\";\n      }\n    }\n\n    if (k.name == \"conglomerate\") {\n      // Special cases for sandstone\n      if (environs.includes(\"fluvial\")) {\n        return \"603\";\n      }\n    }\n\n    if (k.name.includes(\"tuff\")) {\n      return \"711\";\n    }\n    sym = symbolIndex[k.name];\n    if (sym != null) {\n      return sym;\n    }\n\n    if (k.type == \"volcanic\") {\n      return \"725\";\n    }\n  }\n  return sym;\n};\n\nconst patternScale = {\n  \"609\": 1.5,\n  \"603\": 1.5,\n};\n\nconst scalePattern = (id) => {\n  return patternScale[`${id}`] ?? 1;\n};\n\nexport { resolveID, scalePattern };\n"],"names":[],"version":3,"file":"resolvers.36013b49.js.map"}

package/dist/esm/section.a34d379a.js

@@ -0,0 +1,215 @@
+import {CompositeUnitsColumn as $8c8238faa5cde49c$export$a6684360fef0406e, LabelTrackerProvider as $8c8238faa5cde49c$export$e4e89ab6c86ac513, SectionLabelsColumn as $8c8238faa5cde49c$export$13984e34afdbb040} from "./composite.039e4798.js";
+import $7zu8d$columnmodule1b776e15js from "./column.module.1b776e15.js";
+import "./column.module.a67a6b4c.css";
+import {MacrostratColumnProvider as $774a5efa27d1c77b$export$9e42f9b6e0d67c7d} from "./base.910b80b4.js";
+import {useMacrostratColumnData as $d5074f164411387e$export$f8509b7cce386c7d, useMacrostratUnits as $d5074f164411387e$export$6fb40844db555b2} from "./store.c4d7a8a4.js";
+import {Duration as $448b24baeef3b229$export$3b11bc38611c5941} from "./panel.598f76a5.js";
+import {useMemo as $7zu8d$useMemo} from "react";
+import {Timescale as $7zu8d$Timescale, TimescaleOrientation as $7zu8d$TimescaleOrientation} from "@macrostrat/timescale";
+import {SVG as $7zu8d$SVG} from "@macrostrat/column-components";
+import $7zu8d$macrostrathyper from "@macrostrat/hyper";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+
+
+const $7d0f52717c0de7e1$var$h = (0, $7zu8d$macrostrathyper).styled((0, ($parcel$interopDefault($7zu8d$columnmodule1b776e15js))));
+function $7d0f52717c0de7e1$export$38cb0ab5af8f50d7(props) {
+    const { unconformityLabels: unconformityLabels = true, unitComponent: unitComponent, unitComponentProps: unitComponentProps, showLabels: showLabels = true, width: width = 300, columnWidth: columnWidth = 150, showLabelColumn: showLabelColumn = true, clipUnits: clipUnits = true, maxInternalColumns: maxInternalColumns } = props;
+    const units = (0, $d5074f164411387e$export$6fb40844db555b2)();
+    // Get a unique key for the column
+    const key = units[0]?.unit_id;
+    return $7d0f52717c0de7e1$var$h((0, $8c8238faa5cde49c$export$e4e89ab6c86ac513), {
+        units: units,
+        key: key
+    }, [
+        $7d0f52717c0de7e1$var$h($7d0f52717c0de7e1$var$SectionUnitsColumn, {
+            width: columnWidth,
+            unitComponent: unitComponent,
+            unitComponentProps: unitComponentProps,
+            showLabels: showLabels,
+            clipUnits: clipUnits,
+            maxInternalColumns: maxInternalColumns,
+            unconformityLabels: unconformityLabels
+        }),
+        $7d0f52717c0de7e1$var$h.if(showLabelColumn)((0, $8c8238faa5cde49c$export$13984e34afdbb040), {
+            width: width - columnWidth
+        })
+    ]);
+}
+function $7d0f52717c0de7e1$var$SectionUnitsColumn(props) {
+    const { width: width, showLabels: showLabels, unitComponent: unitComponent, unitComponentProps: unitComponentProps, clipUnits: clipUnits, maxInternalColumns: maxInternalColumns, unconformityLabels: unconformityLabels = true } = props;
+    const { sections: sections, totalHeight: totalHeight } = (0, $d5074f164411387e$export$f8509b7cce386c7d)();
+    const scaleData = sections.map((section)=>{
+        return section.scaleInfo;
+    });
+    const innerWidth = width - 2;
+    return $7d0f52717c0de7e1$var$h("div.section-units-container", {
+        style: {
+            width: width
+        }
+    }, [
+        $7d0f52717c0de7e1$var$h((0, $7zu8d$SVG), {
+            className: "sections",
+            height: totalHeight,
+            innerWidth: innerWidth,
+            paddingH: 1
+        }, sections.map((group)=>{
+            const { units: units, scaleInfo: scaleInfo, section_id: section_id } = group;
+            const key = `section-${section_id}`;
+            return $7d0f52717c0de7e1$var$h($7d0f52717c0de7e1$var$SectionUnits, {
+                units: units,
+                scaleInfo: scaleInfo,
+                key: key,
+                unitComponent: unitComponent,
+                unitComponentProps: unitComponentProps,
+                showLabels: showLabels,
+                width: innerWidth,
+                clipUnits: clipUnits,
+                maxInternalColumns: maxInternalColumns
+            } // This unconformity is with the section _above_
+            );
+        })),
+        $7d0f52717c0de7e1$var$h.if(unconformityLabels)($7d0f52717c0de7e1$export$e12e53eeee198b99, {
+            width: width,
+            sections: scaleData
+        })
+    ]);
+}
+function $7d0f52717c0de7e1$var$SectionUnits(props) {
+    // Section with "squishy" timescale
+    const { units: units, scaleInfo: scaleInfo, unitComponent: unitComponent, showLabels: showLabels = true, width: width = 300, unitComponentProps: unitComponentProps, className: className, clipUnits: clipUnits = true, maxInternalColumns: maxInternalColumns } = props;
+    const { domain: domain, pixelScale: pixelScale, pixelHeight: pixelHeight } = scaleInfo;
+    /** Ensure that we can arrange units into the maximum number
+   * of columns defined by unitComponentProps, but that we don't
+   * use more than necessary.
+   */ const _unitComponentProps = (0, $7zu8d$useMemo)(()=>{
+        return {
+            ...unitComponentProps,
+            nColumns: Math.min(maxInternalColumns ?? Math.floor(width / 10), unitComponentProps?.nColumns ?? Infinity, Math.max(...units.map((d)=>d.column)) + 1)
+        };
+    }, [
+        units,
+        unitComponentProps,
+        maxInternalColumns,
+        width
+    ]);
+    const style = {
+        "--section-height": `${pixelHeight}px`,
+        "--section-width": `${width}px`
+    };
+    return $7d0f52717c0de7e1$var$h("g.section", {
+        className: className,
+        style: style,
+        transform: `translate(0 ${scaleInfo.offset})`
+    }, $7d0f52717c0de7e1$var$h((0, $774a5efa27d1c77b$export$9e42f9b6e0d67c7d), {
+        units: units,
+        domain: domain,
+        pixelScale: pixelScale
+    }, $7d0f52717c0de7e1$var$h((0, $8c8238faa5cde49c$export$a6684360fef0406e), {
+        width: width,
+        showLabels: showLabels,
+        unitComponent: unitComponent,
+        unitComponentProps: _unitComponentProps,
+        clipToFrame: clipUnits
+    })));
+}
+function $7d0f52717c0de7e1$export$db2df5a73a6fbe10(props) {
+    const { sections: sections } = (0, $d5074f164411387e$export$f8509b7cce386c7d)();
+    const sectionScales = sections.map((section)=>{
+        return section.scaleInfo;
+    });
+    return $7d0f52717c0de7e1$var$h($7d0f52717c0de7e1$export$463f46772c64d403, {
+        packages: sectionScales,
+        ...props
+    });
+}
+function $7d0f52717c0de7e1$export$463f46772c64d403(props) {
+    const { levels: levels = 3, packages: packages, unconformityLabels: unconformityLabels = false } = props;
+    let _levels;
+    if (typeof levels === "number") // If levels is a number, use the most common starting level
+    _levels = [
+        2,
+        Math.max(2 + Math.min(levels, 5) - 1, 1)
+    ];
+    else _levels = levels;
+    const nCols = _levels[1] - _levels[0] + 1;
+    return $7d0f52717c0de7e1$var$h("div.timescale-column", [
+        $7d0f52717c0de7e1$var$h("div.timescales", packages.map((group)=>{
+            const { domain: domain, pixelHeight: pixelHeight, paddingTop: paddingTop, key: key } = group;
+            return $7d0f52717c0de7e1$var$h("div.timescale-container", {
+                style: {
+                    paddingTop: paddingTop,
+                    "--timescale-level-count": nCols
+                },
+                key: key
+            }, [
+                $7d0f52717c0de7e1$var$h((0, $7zu8d$Timescale), {
+                    orientation: (0, $7zu8d$TimescaleOrientation).VERTICAL,
+                    length: pixelHeight,
+                    levels: _levels,
+                    absoluteAgeScale: true,
+                    showAgeAxis: false,
+                    ageRange: domain
+                })
+            ]);
+        })),
+        $7d0f52717c0de7e1$var$h.if(unconformityLabels)($7d0f52717c0de7e1$export$e12e53eeee198b99, {
+            width: "100%",
+            sections: packages,
+            className: "unconformity-labels"
+        })
+    ]);
+}
+function $7d0f52717c0de7e1$export$e12e53eeee198b99(props) {
+    const { width: width, sections: sections, className: className } = props;
+    return $7d0f52717c0de7e1$var$h("div.unconformity-labels", {
+        style: {
+            width: width
+        },
+        className: className
+    }, sections.map((scaleInfo, i)=>{
+        const lastGroup = sections[i - 1];
+        const top = scaleInfo.offset - scaleInfo.paddingTop;
+        const upperAge = lastGroup?.domain[0];
+        const lowerAge = scaleInfo.domain[1];
+        return $7d0f52717c0de7e1$var$h($7d0f52717c0de7e1$var$Unconformity, {
+            upperAge: upperAge,
+            lowerAge: lowerAge,
+            style: {
+                width: width,
+                height: scaleInfo.paddingTop,
+                top: top
+            }
+        });
+    }));
+}
+function $7d0f52717c0de7e1$var$Unconformity({ upperAge: upperAge, lowerAge: lowerAge, style: style }) {
+    if (upperAge == null || lowerAge == null) return null;
+    const ageGap = Math.abs(upperAge - lowerAge);
+    let className = null;
+    if (ageGap > 1000) className = "giga";
+    else if (ageGap > 100) className = "mega";
+    else if (ageGap > 10) className = "large";
+    else if (ageGap < 1) className = "small";
+    return $7d0f52717c0de7e1$var$h("div.unconformity", {
+        style: style,
+        className: className
+    }, [
+        $7d0f52717c0de7e1$var$h("div.unconformity-text", $7d0f52717c0de7e1$var$h((0, $448b24baeef3b229$export$3b11bc38611c5941), {
+            value: ageGap
+        }))
+    ]);
+}
+
+
+export {$7d0f52717c0de7e1$export$38cb0ab5af8f50d7 as SectionsColumn, $7d0f52717c0de7e1$export$e12e53eeee198b99 as UnconformityLabels, $7d0f52717c0de7e1$export$db2df5a73a6fbe10 as CompositeTimescale, $7d0f52717c0de7e1$export$463f46772c64d403 as CompositeTimescaleCore};
+//# sourceMappingURL=section.a34d379a.js.map

package/dist/esm/section.a34d379a.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/column-views/src/section.ts"],"sourcesContent":["import {\n  CompositeUnitsColumn,\n  LabelTrackerProvider,\n  SectionLabelsColumn,\n} from \"./units\";\nimport { ReactNode, FunctionComponent, useMemo } from \"react\";\nimport { Timescale, TimescaleOrientation } from \"@macrostrat/timescale\";\nimport { ColumnAxisType, SVG } from \"@macrostrat/column-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\nimport type { ExtUnit } from \"./prepare-units/helpers\";\nimport { PackageScaleLayoutData } from \"./prepare-units/composite-scale\";\nimport {\n  useMacrostratColumnData,\n  useMacrostratUnits,\n  MacrostratColumnProvider,\n} from \"./data-provider\";\nimport { Duration } from \"./unit-details\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionSharedProps {\n  unitComponent?: FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  children?: ReactNode;\n  showLabelColumn?: boolean;\n  axisType?: ColumnAxisType;\n  className?: string;\n  clipUnits?: boolean;\n  maxInternalColumns?: number;\n  // Space between sections\n  verticalSpacing?: number;\n  // Whether to render unconformity labels\n  unconformityLabels?: boolean;\n}\n\nexport interface SectionProps extends SectionSharedProps {\n  units: ExtUnit[];\n  scaleInfo: PackageScaleLayoutData;\n}\n\nexport function SectionsColumn(props: SectionSharedProps) {\n  const {\n    unconformityLabels = true,\n    unitComponent,\n    unitComponentProps,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    showLabelColumn = true,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const units = useMacrostratUnits();\n\n  // Get a unique key for the column\n  const key = units[0]?.unit_id;\n\n  return h(LabelTrackerProvider, { units, key }, [\n    h(SectionUnitsColumn, {\n      width: columnWidth,\n      unitComponent,\n      unitComponentProps,\n      showLabels,\n      clipUnits,\n      maxInternalColumns,\n      unconformityLabels,\n    }),\n    h.if(showLabelColumn)(SectionLabelsColumn, {\n      width: width - columnWidth,\n    }),\n  ]);\n}\n\nfunction SectionUnitsColumn(props: SectionSharedProps) {\n  const {\n    width,\n    showLabels,\n    unitComponent,\n    unitComponentProps,\n    clipUnits,\n    maxInternalColumns,\n    unconformityLabels = true,\n  } = props;\n\n  const { sections, totalHeight } = useMacrostratColumnData();\n\n  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  const innerWidth = width - 2;\n\n  return h(\"div.section-units-container\", { style: { width } }, [\n    h(\n      SVG,\n      {\n        className: \"sections\",\n        height: totalHeight,\n        innerWidth,\n        paddingH: 1,\n      },\n      sections.map((group) => {\n        const { units, scaleInfo, section_id } = group;\n\n        const key = `section-${section_id}`;\n        return h(\n          SectionUnits,\n          {\n            units,\n            scaleInfo,\n            key,\n            unitComponent,\n            unitComponentProps,\n            showLabels,\n            width: innerWidth,\n            clipUnits,\n            maxInternalColumns,\n          } // This unconformity is with the section _above_\n        );\n      })\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width,\n      sections: scaleData,\n    }),\n  ]);\n}\n\nfunction SectionUnits(props: SectionProps) {\n  // Section with \"squishy\" timescale\n  const {\n    units,\n    scaleInfo,\n    unitComponent,\n    showLabels = true,\n    width = 300,\n    unitComponentProps,\n    className,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const { domain, pixelScale, pixelHeight } = scaleInfo;\n\n  /** Ensure that we can arrange units into the maximum number\n   * of columns defined by unitComponentProps, but that we don't\n   * use more than necessary.\n   */\n  const _unitComponentProps = useMemo(() => {\n    return {\n      ...unitComponentProps,\n      nColumns: Math.min(\n        maxInternalColumns ?? Math.floor(width / 10),\n        unitComponentProps?.nColumns ?? Infinity,\n        Math.max(...units.map((d) => d.column)) + 1\n      ),\n      //axisType,\n    };\n  }, [units, unitComponentProps, maxInternalColumns, width]);\n\n  const style = {\n    \"--section-height\": `${pixelHeight}px`,\n    \"--section-width\": `${width}px`,\n  };\n\n  return h(\n    \"g.section\",\n    { className, style, transform: `translate(0 ${scaleInfo.offset})` },\n    h(\n      MacrostratColumnProvider,\n      {\n        units,\n        domain,\n        pixelScale, // Actually pixels per myr,\n      },\n      h(CompositeUnitsColumn, {\n        width,\n        showLabels,\n        unitComponent,\n        unitComponentProps: _unitComponentProps,\n        clipToFrame: clipUnits,\n      })\n    )\n  );\n}\n\ninterface CompositeTimescaleProps {\n  levels?: [number, number] | number;\n}\n\nexport function CompositeTimescale(props: CompositeTimescaleProps) {\n  const { sections } = useMacrostratColumnData();\n  const sectionScales = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  return h(CompositeTimescaleCore, {\n    packages: sectionScales,\n    ...props,\n  });\n}\n\ntype CompositeTimescaleCoreProps = CompositeTimescaleProps & {\n  packages: PackageScaleLayoutData[];\n  unconformityLabels?: boolean;\n};\n\nexport function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {\n  const { levels = 3, packages, unconformityLabels = false } = props;\n\n  let _levels: [number, number];\n  if (typeof levels === \"number\") {\n    // If levels is a number, use the most common starting level\n    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];\n  } else {\n    _levels = levels;\n  }\n\n  const nCols = _levels[1] - _levels[0] + 1;\n\n  return h(\"div.timescale-column\", [\n    h(\n      \"div.timescales\",\n      packages.map((group) => {\n        const { domain, pixelHeight, paddingTop, key } = group;\n        return h(\n          \"div.timescale-container\",\n          { style: { paddingTop, \"--timescale-level-count\": nCols }, key },\n          [\n            h(Timescale, {\n              orientation: TimescaleOrientation.VERTICAL,\n              length: pixelHeight,\n              levels: _levels,\n              absoluteAgeScale: true,\n              showAgeAxis: false,\n              ageRange: domain as [number, number],\n            }),\n          ]\n        );\n      })\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width: \"100%\",\n      sections: packages,\n      className: \"unconformity-labels\",\n    }),\n  ]);\n}\n\nexport function UnconformityLabels(props: {\n  width: string | number;\n  sections: PackageScaleLayoutData[];\n  className?: string;\n}) {\n  const { width, sections, className } = props;\n\n  return h(\n    \"div.unconformity-labels\",\n    {\n      style: {\n        width,\n      },\n      className,\n    },\n    sections.map((scaleInfo, i) => {\n      const lastGroup = sections[i - 1];\n      const top = scaleInfo.offset - scaleInfo.paddingTop;\n      const upperAge = lastGroup?.domain[0];\n      const lowerAge = scaleInfo.domain[1];\n      return h(Unconformity, {\n        upperAge,\n        lowerAge,\n        style: {\n          width,\n          height: scaleInfo.paddingTop,\n          top,\n        },\n      });\n    })\n  );\n}\n\nfunction Unconformity({ upperAge, lowerAge, style }) {\n  if (upperAge == null || lowerAge == null) {\n    return null;\n  }\n\n  const ageGap = Math.abs(upperAge - lowerAge);\n\n  let className: string = null;\n  if (ageGap > 1000) {\n    className = \"giga\";\n  } else if (ageGap > 100) {\n    className = \"mega\";\n  } else if (ageGap > 10) {\n    className = \"large\";\n  } else if (ageGap < 1) {\n    className = \"small\";\n  }\n\n  return h(\"div.unconformity\", { style, className }, [\n    h(\"div.unconformity-text\", h(Duration, { value: ageGap })),\n  ]);\n}\n"],"names":[],"version":3,"file":"section.a34d379a.js.map"}

package/dist/esm/selection.f5b0297e.js

@@ -0,0 +1,143 @@
+import $eIxPJ$macrostrathyper from "@macrostrat/hyper";
+import {useKeyHandler as $eIxPJ$useKeyHandler} from "@macrostrat/ui-components";
+import {createContext as $eIxPJ$createContext, useContext as $eIxPJ$useContext, useState as $eIxPJ$useState, useEffect as $eIxPJ$useEffect, useRef as $eIxPJ$useRef, useCallback as $eIxPJ$useCallback} from "react";
+import {useStore as $eIxPJ$useStore, createStore as $eIxPJ$createStore} from "zustand";
+
+
+
+
+
+const $4d5d1c15f39f6a14$var$UnitSelectionContext = (0, $eIxPJ$createContext)(null);
+function $4d5d1c15f39f6a14$export$77a278d5ca56e309() {
+    const store = (0, $eIxPJ$useContext)($4d5d1c15f39f6a14$var$UnitSelectionContext);
+    if (store == null) return ()=>{};
+    return (0, $eIxPJ$useStore)(store, (state)=>state.onUnitSelected);
+}
+function $4d5d1c15f39f6a14$export$b220b1d3591dc9e5(selector) {
+    const store = (0, $eIxPJ$useContext)($4d5d1c15f39f6a14$var$UnitSelectionContext);
+    if (store == null) throw new Error("useUnitSelectionStore must be used within a UnitSelectionProvider");
+    return (0, $eIxPJ$useStore)(store, selector);
+}
+function $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da() {
+    return $4d5d1c15f39f6a14$export$b220b1d3591dc9e5((state)=>state.selectedUnitData);
+}
+function $4d5d1c15f39f6a14$export$f19d75b1d4b676a4(props) {
+    const [store] = (0, $eIxPJ$useState)(()=>(0, $eIxPJ$createStore)((set)=>({
+                selectedUnit: null,
+                selectedUnitData: null,
+                overlayPosition: null,
+                setSelectedUnit (selectedUnit) {
+                    if (selectedUnit == null) {
+                        set({
+                            selectedUnit: null,
+                            selectedUnitData: null
+                        });
+                        return;
+                    // If it's a number, set the selected unit
+                    } else if (typeof selectedUnit === "number") set({
+                        selectedUnit: selectedUnit,
+                        selectedUnitData: null
+                    });
+                    else if ("unit_id" in selectedUnit) set({
+                        selectedUnit: selectedUnit.unit_id,
+                        selectedUnitData: selectedUnit
+                    });
+                },
+                onUnitSelected: (unit, target, event)=>{
+                    console.log("onUnitSelected", unit, target, event);
+                    const el = props.columnRef?.current;
+                    let overlayPosition = null;
+                    if (unit != null && el != null && target != null) {
+                        const rect = el.getBoundingClientRect();
+                        const targetRect = target.getBoundingClientRect();
+                        overlayPosition = {
+                            x: targetRect.left - rect.left,
+                            y: targetRect.top - rect.top,
+                            width: targetRect.width,
+                            height: targetRect.height
+                        };
+                    }
+                    props.onUnitSelected?.(unit?.unit_id, unit);
+                    return set({
+                        selectedUnit: unit?.unit_id,
+                        selectedUnitData: unit,
+                        overlayPosition: overlayPosition
+                    });
+                }
+            })));
+    const { units: units, selectedUnit: selectedUnit } = props;
+    (0, $eIxPJ$useEffect)(()=>{
+        // Synchronize store with provided props
+        if (selectedUnit != null) {
+            const unitData = units?.find((u)=>u.unit_id === selectedUnit);
+            store.setState({
+                selectedUnit: selectedUnit,
+                selectedUnitData: unitData
+            });
+        } else store.setState({
+            selectedUnit: null,
+            selectedUnitData: null
+        });
+    }, [
+        selectedUnit,
+        units
+    ]);
+    return (0, $eIxPJ$macrostrathyper)($4d5d1c15f39f6a14$var$UnitSelectionContext.Provider, {
+        value: store
+    }, props.children);
+}
+function $4d5d1c15f39f6a14$export$cbbec12b1451fe7d(unit) {
+    const ref = (0, $eIxPJ$useRef)();
+    const selectedUnit = $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da();
+    const onSelectUnit = $4d5d1c15f39f6a14$export$b220b1d3591dc9e5((state)=>state.onUnitSelected);
+    const selected = selectedUnit?.unit_id == unit.unit_id;
+    const onClick = (0, $eIxPJ$useCallback)((evt)=>{
+        onSelectUnit(unit, ref.current, evt);
+        evt.stopPropagation();
+    }, [
+        unit,
+        onSelectUnit
+    ]);
+    (0, $eIxPJ$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
+        onSelectUnit(unit, ref.current, null);
+        // Scroll the unit into view
+        ref.current?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+            inline: "nearest"
+        });
+    }, [
+        selected,
+        onSelectUnit
+    ]);
+    return [
+        ref,
+        selected,
+        onClick
+    ];
+}
+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, $eIxPJ$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$b220b1d3591dc9e5 as useUnitSelectionStore, $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da as useSelectedUnit, $4d5d1c15f39f6a14$export$f19d75b1d4b676a4 as UnitSelectionProvider, $4d5d1c15f39f6a14$export$cbbec12b1451fe7d as useUnitSelectionTarget, $4d5d1c15f39f6a14$export$70f5ee19650fc7d1 as UnitKeyboardNavigation};
+//# sourceMappingURL=selection.f5b0297e.js.map

package/dist/esm/selection.f5b0297e.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 { useKeyHandler } from \"@macrostrat/ui-components\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  ReactNode,\n  RefObject,\n  useRef,\n  useCallback,\n} from \"react\";\nimport { createStore, StoreApi, useStore } from \"zustand\";\nimport type { RectBounds, IUnit } from \"./types\";\n\ntype UnitSelectDispatch = (\n  unit: BaseUnit | null,\n  target: HTMLElement | null,\n  event: Event | null\n) => void;\n\nconst UnitSelectionContext = createContext<StoreApi<UnitSelectionStore>>(null);\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  const store = useContext(UnitSelectionContext);\n  if (store == null) {\n    return () => {};\n  }\n  return useStore(store, (state) => state.onUnitSelected);\n}\n\nexport function useUnitSelectionStore<T>(\n  selector: (state: UnitSelectionStore) => T\n): T {\n  const store = useContext(UnitSelectionContext);\n  if (store == null) {\n    throw new Error(\n      \"useUnitSelectionStore must be used within a UnitSelectionProvider\"\n    );\n  }\n  return useStore(store, selector);\n}\n\nexport function useSelectedUnit() {\n  return useUnitSelectionStore((state) => state.selectedUnitData);\n}\n\ninterface UnitSelectionStore {\n  selectedUnit: number | null;\n  selectedUnitData: BaseUnit | null;\n  overlayPosition: RectBounds | null;\n  onUnitSelected: UnitSelectDispatch;\n  setSelectedUnit: (unit: number | null) => void;\n}\n\nexport function UnitSelectionProvider<T extends BaseUnit>(props: {\n  children: ReactNode;\n  columnRef?: RefObject<HTMLElement>;\n  units: T[];\n  selectedUnit: number | null;\n  onUnitSelected?: (unitID: number | null, unit: T | null) => void;\n}) {\n  const [store] = useState(() =>\n    createStore<UnitSelectionStore>((set) => ({\n      selectedUnit: null,\n      selectedUnitData: null,\n      overlayPosition: null,\n      setSelectedUnit(selectedUnit: number | null | BaseUnit) {\n        if (selectedUnit == null) {\n          set({ selectedUnit: null, selectedUnitData: null });\n          return;\n          // If it's a number, set the selected unit\n        } else if (typeof selectedUnit === \"number\") {\n          set({ selectedUnit, selectedUnitData: null });\n        } else if (\"unit_id\" in selectedUnit) {\n          set({\n            selectedUnit: selectedUnit.unit_id,\n            selectedUnitData: selectedUnit,\n          });\n        }\n      },\n      onUnitSelected: (unit: T, target: HTMLElement, event: Event) => {\n        console.log(\"onUnitSelected\", unit, target, event);\n        const el = props.columnRef?.current;\n        let overlayPosition = null;\n        if (unit != null && el != null && target != null) {\n          const rect = el.getBoundingClientRect();\n          const targetRect = target.getBoundingClientRect();\n\n          overlayPosition = {\n            x: targetRect.left - rect.left,\n            y: targetRect.top - rect.top,\n            width: targetRect.width,\n            height: targetRect.height,\n          };\n        }\n        props.onUnitSelected?.(unit?.unit_id, unit);\n\n        return set({\n          selectedUnit: unit?.unit_id,\n          selectedUnitData: unit,\n          overlayPosition,\n        });\n      },\n    }))\n  );\n\n  const { units, selectedUnit } = props;\n\n  useEffect(() => {\n    // Synchronize store with provided props\n    if (selectedUnit != null) {\n      const unitData = units?.find((u) => u.unit_id === selectedUnit);\n      store.setState({ selectedUnit, selectedUnitData: unitData });\n    } else {\n      store.setState({ selectedUnit: null, selectedUnitData: null });\n    }\n  }, [selectedUnit, units]);\n\n  return h(UnitSelectionContext.Provider, { value: store }, props.children);\n}\n\nexport function useUnitSelectionTarget(\n  unit: IUnit\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {\n  const ref = useRef<HTMLElement>();\n  const selectedUnit = useSelectedUnit();\n  const onSelectUnit = useUnitSelectionStore((state) => state.onUnitSelected);\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      onSelectUnit(unit, ref.current, evt);\n      evt.stopPropagation();\n    },\n    [unit, onSelectUnit]\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    onSelectUnit(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, onSelectUnit]);\n\n  return [ref, selected, onClick];\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.f5b0297e.js.map"}

package/dist/esm/state.178ef364.js

@@ -0,0 +1,75 @@
+import {useMacrostratColumns as $774a5efa27d1c77b$export$81eaae0b474404fd, useMacrostratStore as $774a5efa27d1c77b$export$fb98d5bae3a6800} from "./base.910b80b4.js";
+import {create as $g0ikq$create, useStore as $g0ikq$useStore} from "zustand";
+import {createContext as $g0ikq$createContext, useState as $g0ikq$useState, useEffect as $g0ikq$useEffect, useContext as $g0ikq$useContext} from "react";
+import $g0ikq$macrostrathyper from "@macrostrat/hyper";
+
+
+
+
+
+const $09486427d129f589$var$NavigationStoreContext = (0, $g0ikq$createContext)(null);
+function $09486427d129f589$export$8da3b11f62ebf019({ children: children, columns: columns, selectedColumn: selectedColumn, projectID: projectID, inProcess: inProcess, onSelectColumn: onSelectColumn, onHoverColumn: onHoverColumn }) {
+    const getColumns = (0, $774a5efa27d1c77b$export$fb98d5bae3a6800)((s)=>s.getColumns);
+    const [store] = (0, $g0ikq$useState)(()=>{
+        return (0, $g0ikq$create)((set, get)=>{
+            return {
+                columns: null,
+                selectedColumn: null,
+                hoveredColumn: null,
+                selectColumn (columnID) {
+                    set({
+                        selectedColumn: columnID,
+                        hoveredColumn: null
+                    });
+                    const { columns: columns } = get();
+                    const column = columns?.find((d)=>d.id == columnID);
+                    onSelectColumn?.(columnID, column);
+                },
+                setHoveredColumn (columnID) {
+                    set({
+                        hoveredColumn: columnID
+                    });
+                    const { columns: columns } = get();
+                    const column = columns?.find((d)=>d.id == columnID);
+                    onHoverColumn?.(columnID, column);
+                }
+            };
+        });
+    });
+    // Set up the store
+    /** TODO: unify handling of columns between parts of application */ // useAsyncEffect(async () => {
+    //   let _columns = columns ?? (await getColumns(projectID, inProcess));
+    //   store.setState({ columns: _columns, selectedColumn });
+    // }, [projectID, inProcess, columns, getColumns]);
+    const _columns = columns ?? (0, $774a5efa27d1c77b$export$81eaae0b474404fd)(projectID, inProcess);
+    (0, $g0ikq$useEffect)(()=>{
+        if (_columns != null) store.setState({
+            columns: _columns,
+            selectedColumn: selectedColumn
+        });
+    }, [
+        _columns
+    ]);
+    // Update selected colun if it is changed externally
+    // Kind of an awkward way to do this but we need to allow the selector to run
+    (0, $g0ikq$useEffect)(()=>{
+        console.log("Selecting column", selectedColumn);
+        const { selectColumn: selectColumn, selectedColumn: _internalSelectedColumn } = store.getState();
+        if (selectedColumn == _internalSelectedColumn) return;
+        selectColumn(selectedColumn);
+    }, [
+        selectedColumn
+    ]);
+    return (0, $g0ikq$macrostrathyper)($09486427d129f589$var$NavigationStoreContext.Provider, {
+        value: store
+    }, children);
+}
+function $09486427d129f589$export$642c2b57c47ea41(selector) {
+    const storeApi = (0, $g0ikq$useContext)($09486427d129f589$var$NavigationStoreContext);
+    if (storeApi == null) throw new Error("Missing ColumnNavigationProvider");
+    return (0, $g0ikq$useStore)(storeApi, selector);
+}
+
+
+export {$09486427d129f589$export$8da3b11f62ebf019 as ColumnNavigationProvider, $09486427d129f589$export$642c2b57c47ea41 as useColumnNavigationStore};
+//# sourceMappingURL=state.178ef364.js.map

package/dist/esm/state.178ef364.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAkCA,MAAM,+CAAyB,CAAA,GAAA,oBAAY,EACzC;AAGK,SAAS,0CAAyB,YACvC,QAAQ,WACR,OAAO,kBACP,cAAc,aACd,SAAS,aACT,SAAS,kBACT,cAAc,iBACd,aAAa,EACW;IACxB,MAAM,aAAa,CAAA,GAAA,wCAAiB,EAAE,CAAC,IAAM,EAAE,UAAU;IAEzD,MAAM,CAAC,MAAM,GAAG,CAAA,GAAA,eAAO,EAAE;QACvB,OAAO,CAAA,GAAA,aAAK,EAAmB,CAAC,KAAK;YACnC,OAAO;gBACL,SAAS;gBACT,gBAAgB;gBAChB,eAAe;gBACf,cAAa,QAAuB;oBAClC,IAAI;wBAAE,gBAAgB;wBAAU,eAAe;oBAAK;oBACpD,MAAM,WAAE,OAAO,EAAE,GAAG;oBACpB,MAAM,SAAS,SAAS,KAAK,CAAC,IAAM,EAAE,EAAE,IAAI;oBAC5C,iBAAiB,UAAU;gBAC7B;gBACA,kBAAiB,QAAuB;oBACtC,IAAI;wBAAE,eAAe;oBAAS;oBAC9B,MAAM,WAAE,OAAO,EAAE,GAAG;oBACpB,MAAM,SAAS,SAAS,KAAK,CAAC,IAAM,EAAE,EAAE,IAAI;oBAC5C,gBAAgB,UAAU;gBAC5B;YACF;QACF;IACF;IAEA,mBAAmB;IACnB,iEAAiE,GACjE,+BAA+B;IAC/B,wEAAwE;IACxE,2DAA2D;IAC3D,mDAAmD;IAEnD,MAAM,WAAW,WAAW,CAAA,GAAA,yCAAmB,EAAE,WAAW;IAC5D,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,YAAY,MACd,MAAM,QAAQ,CAAC;YAAE,SAAS;4BAAU;QAAe;IAEvD,GAAG;QAAC;KAAS;IACb,oDAAoD;IAEpD,6EAA6E;IAC7E,CAAA,GAAA,gBAAQ,EAAE;QACR,QAAQ,GAAG,CAAC,oBAAoB;QAChC,MAAM,gBAAE,YAAY,EAAE,gBAAgB,uBAAuB,EAAE,GAC7D,MAAM,QAAQ;QAChB,IAAI,kBAAkB,yBACpB;QAEF,aAAa;IACf,GAAG;QAAC;KAAe;IAEnB,OAAO,CAAA,GAAA,sBAAA,EAAE,6CAAuB,QAAQ,EAAE;QAAE,OAAO;IAAM,GAAG;AAC9D;AAEO,SAAS,yCACd,QAAyC;IAEzC,MAAM,WAAW,CAAA,GAAA,iBAAS,EAAE;IAC5B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM;IAElB,OAAO,CAAA,GAAA,eAAO,EAAE,UAAU;AAC5B","sources":["packages/column-views/src/maps/column-navigation/mapbox/state.ts"],"sourcesContent":["import { create, StoreApi, useStore } from \"zustand\";\nimport type { ColumnGeoJSONRecordWithID } from \"@macrostrat/api-types\";\nimport {\n  createContext,\n  useState,\n  useContext,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport {\n  useMacrostratColumns,\n  useMacrostratStore,\n} from \"../../../data-provider\";\n\nexport interface NavigationStore {\n  columns: ColumnGeoJSONRecordWithID[];\n  selectedColumn: number | null;\n  hoveredColumn: number | null;\n  selectColumn: (columnID: number | null) => void;\n  setHoveredColumn: (columnID: number | null) => void;\n}\n\nexport interface NavigationProviderProps {\n  projectID?: number;\n  inProcess?: boolean;\n  selectedColumn?: number | null;\n  hoveredColumn?: number | null;\n  columns?: ColumnGeoJSONRecordWithID[] | null;\n  children: ReactNode;\n  onSelectColumn?: (col_id: number | null, column: any) => void;\n  onHoverColumn?: (col_id: number | null, column: any) => void;\n}\n\nconst NavigationStoreContext = createContext<StoreApi<NavigationStore> | null>(\n  null\n);\n\nexport function ColumnNavigationProvider({\n  children,\n  columns,\n  selectedColumn,\n  projectID,\n  inProcess,\n  onSelectColumn,\n  onHoverColumn,\n}: NavigationProviderProps) {\n  const getColumns = useMacrostratStore((s) => s.getColumns);\n\n  const [store] = useState(() => {\n    return create<NavigationStore>((set, get): NavigationStore => {\n      return {\n        columns: null,\n        selectedColumn: null,\n        hoveredColumn: null,\n        selectColumn(columnID: number | null) {\n          set({ selectedColumn: columnID, hoveredColumn: null });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onSelectColumn?.(columnID, column);\n        },\n        setHoveredColumn(columnID: number | null) {\n          set({ hoveredColumn: columnID });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onHoverColumn?.(columnID, column);\n        },\n      };\n    });\n  });\n\n  // Set up the store\n  /** TODO: unify handling of columns between parts of application */\n  // useAsyncEffect(async () => {\n  //   let _columns = columns ?? (await getColumns(projectID, inProcess));\n  //   store.setState({ columns: _columns, selectedColumn });\n  // }, [projectID, inProcess, columns, getColumns]);\n\n  const _columns = columns ?? useMacrostratColumns(projectID, inProcess);\n  useEffect(() => {\n    if (_columns != null) {\n      store.setState({ columns: _columns, selectedColumn });\n    }\n  }, [_columns]);\n  // Update selected colun if it is changed externally\n\n  // Kind of an awkward way to do this but we need to allow the selector to run\n  useEffect(() => {\n    console.log(\"Selecting column\", selectedColumn);\n    const { selectColumn, selectedColumn: _internalSelectedColumn } =\n      store.getState();\n    if (selectedColumn == _internalSelectedColumn) {\n      return;\n    }\n    selectColumn(selectedColumn);\n  }, [selectedColumn]);\n\n  return h(NavigationStoreContext.Provider, { value: store }, children);\n}\n\nexport function useColumnNavigationStore(\n  selector: (state: NavigationStore) => any\n) {\n  const storeApi = useContext(NavigationStoreContext);\n  if (storeApi == null) {\n    throw new Error(\"Missing ColumnNavigationProvider\");\n  }\n  return useStore(storeApi, selector);\n}\n"],"names":[],"version":3,"file":"state.178ef364.js.map"}