@macrostrat/column-views 1.0.3 → 2.0.1

package/dist/esm/column-views.8e51206e.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=column-views.8e51206e.js.map

package/dist/esm/column-views.8e51206e.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":"column-views.8e51206e.js.map"}

package/dist/esm/{column.module.7f47d25a.js → column-views.94b5cca1.js}

@@ -31,4 +31,4 @@ $2cc548f41b0ff45f$export$7a8632a2674f140b = "map-column_084db9";
 
 
 export {$2cc548f41b0ff45f$exports as default};
-//# sourceMappingURL=column.module.7f47d25a.js.map
+//# sourceMappingURL=column-views.94b5cca1.js.map

package/dist/esm/{column.module.7f47d25a.js.map → column-views.94b5cca1.js.map}

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAPA,4CAA8B;AAC9B,2CAAgC;AAChC,4CAA2B;AAC3B,4CAAmC;AACnC,4CAA6B;AAC7B,4CAA+B;AAC/B,4CAAoC;AACpC,4CAA+B","sources":["packages/column-views/src/carbon-isotopes/column.module.sass"],"sourcesContent":["@use \"sass:color\"\n\n.column-ui\n  width: 100vw\n  height: 100vh\n  overflow-y: scroll\n  display: flex\n  flex-direction: row\n\n.column-view\n  flex-grow: 1\n  padding: 1em\n  max-height: 100vh\n  overflow-y: scroll\n  h1\n    font-size: 1.2em\n    margin-bottom: 0.2em\n    padding-left: 35px\n\n// Column\n.column\n  margin-bottom: 1em\n  display: flex\n  flex-direction: row\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  :global\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: black\n      stroke-width: 1px\n\n    g.lithology-column use.frame\n      stroke: black\n      stroke-width: 1.5px !important\n      pointer-events: none\n\n    g.isotopes-column\n      rect.underlay\n        fill: transparent\n\n    .col-note-label\n      font-size: 10px\n      margin-top: 3px\n      padding: 2px 2px 2px 3px\n      line-height: 9px\n      border-left: none !important\n\n    g.height-range\n      display: none\n\n    .note-inner\n      border: none\n\n    .frame rect\n      fill: transparent\n\n\n\n.bp5-dark\n  .column :global\n    .lithology-column .frame\n      stroke: white\n    g.inner\n      rect.unit\n        filter: invert(100%)\n    g.lithology-column use.frame\n      stroke: white\n    .note\n      line, path.col-note-link\n        stroke: white\n    .y.axis .tick line\n      stroke: white\n\n.column-nav\n  position: sticky\n  top: 2.2em\n  h3\n    color: #444\n    margin-bottom: 0.3em\n\n.default-buttons\n  width: 100%\n  margin: 0 -10px\n\ndiv.map-column\n  width: 600px\n  height: 100vh\n  display: flex\n  flex-direction: column\n\n  :global\n    .map-area\n      flex-grow: 1\n\n    .map-placeholder\n      position: relative\n\n    .macrostrat-map\n      .graticule\n        stroke-dasharray: inherit\n        stroke: color.adjust(#AFE6F0, $lightness: -5%)\n      .neatline\n        stroke-width: 1.5px\n\n    .context-map\n      position: absolute\n      top: 0\n      right: 0\n      width: 250px\n      height: 250px\n      cursor: pointer\n      z-index: 100\n      &.expanded\n        cursor: inherit\n        .columns path:hover\n          stroke: rgba(255,0,0,.4) !important\n\n      .close-button\n        position: absolute\n        top: 1em\n        right: 1em\n\n      .land\n        background-color: rgb(233, 252, 234)\n"],"names":[],"version":3,"file":"column.module.7f47d25a.js.map"}
+{"mappings":";;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAPA,4CAA8B;AAC9B,2CAAgC;AAChC,4CAA2B;AAC3B,4CAAmC;AACnC,4CAA6B;AAC7B,4CAA+B;AAC/B,4CAAoC;AACpC,4CAA+B","sources":["packages/column-views/src/carbon-isotopes/column.module.sass"],"sourcesContent":["@use \"sass:color\"\n\n.column-ui\n  width: 100vw\n  height: 100vh\n  overflow-y: scroll\n  display: flex\n  flex-direction: row\n\n.column-view\n  flex-grow: 1\n  padding: 1em\n  max-height: 100vh\n  overflow-y: scroll\n  h1\n    font-size: 1.2em\n    margin-bottom: 0.2em\n    padding-left: 35px\n\n// Column\n.column\n  margin-bottom: 1em\n  display: flex\n  flex-direction: row\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  :global\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: black\n      stroke-width: 1px\n\n    g.lithology-column use.frame\n      stroke: black\n      stroke-width: 1.5px !important\n      pointer-events: none\n\n    g.isotopes-column\n      rect.underlay\n        fill: transparent\n\n    .col-note-label\n      font-size: 10px\n      margin-top: 3px\n      padding: 2px 2px 2px 3px\n      line-height: 9px\n      border-left: none !important\n\n    g.height-range\n      display: none\n\n    .note-inner\n      border: none\n\n    .frame rect\n      fill: transparent\n\n\n\n.bp5-dark\n  .column :global\n    .lithology-column .frame\n      stroke: white\n    g.inner\n      rect.unit\n        filter: invert(100%)\n    g.lithology-column use.frame\n      stroke: white\n    .note\n      line, path.col-note-link\n        stroke: white\n    .y.axis .tick line\n      stroke: white\n\n.column-nav\n  position: sticky\n  top: 2.2em\n  h3\n    color: #444\n    margin-bottom: 0.3em\n\n.default-buttons\n  width: 100%\n  margin: 0 -10px\n\ndiv.map-column\n  width: 600px\n  height: 100vh\n  display: flex\n  flex-direction: column\n\n  :global\n    .map-area\n      flex-grow: 1\n\n    .map-placeholder\n      position: relative\n\n    .macrostrat-map\n      .graticule\n        stroke-dasharray: inherit\n        stroke: color.adjust(#AFE6F0, $lightness: -5%)\n      .neatline\n        stroke-width: 1.5px\n\n    .context-map\n      position: absolute\n      top: 0\n      right: 0\n      width: 250px\n      height: 250px\n      cursor: pointer\n      z-index: 100\n      &.expanded\n        cursor: inherit\n        .columns path:hover\n          stroke: rgba(255,0,0,.4) !important\n\n      .close-button\n        position: absolute\n        top: 1em\n        right: 1em\n\n      .land\n        background-color: rgb(233, 252, 234)\n"],"names":[],"version":3,"file":"column-views.94b5cca1.js.map"}

package/dist/esm/column-views.9804efda.js

@@ -0,0 +1,75 @@
+import {useMacrostratStore as $774a5efa27d1c77b$export$fb98d5bae3a6800, useMacrostratColumns as $774a5efa27d1c77b$export$81eaae0b474404fd} from "./column-views.28ee5f43.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=column-views.9804efda.js.map

package/dist/esm/column-views.9804efda.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":"column-views.9804efda.js.map"}

package/dist/esm/column-views.9bdd477a.js

@@ -0,0 +1,57 @@
+import "./column-views.e40b8bfb.css";
+import $3vk6I$columnviews3465c8adjs from "./column-views.3465c8ad.js";
+import {useMacrostratUnits as $d5074f164411387e$export$6fb40844db555b2, useCompositeScale as $d5074f164411387e$export$a7fc62995ec4f76} from "./column-views.ea237aa8.js";
+import $3vk6I$macrostrathyper from "@macrostrat/hyper";
+import {useAPIResult as $3vk6I$useAPIResult} from "@macrostrat/ui-components";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/** An in-development overlay for a column's age model.
+ *
+ * Age model info:
+ *       {
+ *         "boundary_id": 8049,
+ *         "col_id": 432,
+ *         "section_id": 3104,
+ *         "interval_id": 268,
+ *         "interval_name": "Calymmian",
+ *         "age_bottom": 1600,
+ *         "age_top": 1400,
+ *         "rel_position": 0.85,
+ *         "model_age": 1430,
+ *         "boundary_status": "absolute",
+ *         "boundary_type": "",
+ *         "boundary_position": null,
+ *         "unit_below": 11541,
+ *         "unit_above": 0,
+ *         "ref_id": 217
+ *       },
+ *
+ * */ 
+
+
+
+const $1a65c216af27346a$var$h = (0, $3vk6I$macrostrathyper).styled((0, ($parcel$interopDefault($3vk6I$columnviews3465c8adjs))));
+function $1a65c216af27346a$export$1d1ebe9df97e8db() {
+    const col_id = (0, $d5074f164411387e$export$6fb40844db555b2)()?.[0]?.col_id;
+    const scale = (0, $d5074f164411387e$export$a7fc62995ec4f76)();
+    const ageModel = (0, $3vk6I$useAPIResult)("https://macrostrat.org/api/v2/age_model", {
+        col_id: col_id
+    }, (res)=>res.success.data);
+    if (ageModel == null) return null;
+    return $1a65c216af27346a$var$h("div.boundary-age-model", ageModel.map((surface)=>{
+        const height = scale(surface.model_age);
+        return $1a65c216af27346a$var$h("div.boundary-age-model-surface", {
+            key: surface.boundary_id,
+            style: {
+                top: `${height}px`
+            }
+        });
+    }));
+}
+
+
+export {$1a65c216af27346a$export$1d1ebe9df97e8db as BoundaryAgeModelOverlay};
+//# sourceMappingURL=column-views.9bdd477a.js.map

package/dist/esm/column-views.9bdd477a.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;AAMH,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,uEAAK;AAoBrB,SAAS;IACd,MAAM,SAAS,CAAA,GAAA,wCAAiB,KAAK,CAAC,EAAE,EAAE;IAC1C,MAAM,QAAQ,CAAA,GAAA,wCAAgB;IAE9B,MAAM,WAAW,CAAA,GAAA,mBAAW,EAC1B,2CACA;gBAAE;IAAO,GACT,CAAC,MAAQ,IAAI,OAAO,CAAC,IAAI;IAG3B,IAAI,YAAY,MACd,OAAO;IAGT,OAAO,wBACL,0BACA,SAAS,GAAG,CAAC,CAAC;QACZ,MAAM,SAAS,MAAM,QAAQ,SAAS;QAEtC,OAAO,wBAAE,kCAAkC;YACzC,KAAK,QAAQ,WAAW;YACxB,OAAO;gBAAE,KAAK,GAAG,OAAO,EAAE,CAAC;YAAC;QAC9B;IACF;AAEJ","sources":["packages/column-views/src/age-model-overlay.ts"],"sourcesContent":["/** An in-development overlay for a column's age model.\n *\n * Age model info:\n *       {\n *         \"boundary_id\": 8049,\n *         \"col_id\": 432,\n *         \"section_id\": 3104,\n *         \"interval_id\": 268,\n *         \"interval_name\": \"Calymmian\",\n *         \"age_bottom\": 1600,\n *         \"age_top\": 1400,\n *         \"rel_position\": 0.85,\n *         \"model_age\": 1430,\n *         \"boundary_status\": \"absolute\",\n *         \"boundary_type\": \"\",\n *         \"boundary_position\": null,\n *         \"unit_below\": 11541,\n *         \"unit_above\": 0,\n *         \"ref_id\": 217\n *       },\n *\n * */\n\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./age-model-overlay.module.sass\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useCompositeScale, useMacrostratUnits } from \"./data-provider\";\nconst h = hyper.styled(styles);\n\ninterface AgeModelSurface {\n  boundary_id: number;\n  col_id: number;\n  section_id: number;\n  interval_id: number;\n  interval_name: string;\n  age_bottom: number;\n  age_top: number;\n  rel_position: number;\n  model_age: number;\n  boundary_status: \"absolute\" | \"relative\" | \"modeled\";\n  boundary_type: string;\n  boundary_position: null | number;\n  unit_below: number;\n  unit_above: number;\n  ref_id: number;\n}\n\nexport function BoundaryAgeModelOverlay() {\n  const col_id = useMacrostratUnits()?.[0]?.col_id;\n  const scale = useCompositeScale();\n\n  const ageModel = useAPIResult(\n    \"https://macrostrat.org/api/v2/age_model\",\n    { col_id },\n    (res) => res.success.data\n  );\n\n  if (ageModel == null) {\n    return null;\n  }\n\n  return h(\n    \"div.boundary-age-model\",\n    ageModel.map((surface) => {\n      const height = scale(surface.model_age);\n\n      return h(\"div.boundary-age-model-surface\", {\n        key: surface.boundary_id,\n        style: { top: `${height}px` },\n      });\n    })\n  );\n}\n"],"names":[],"version":3,"file":"column-views.9bdd477a.js.map"}

package/dist/esm/column-views.9ced149e.js

@@ -0,0 +1,98 @@
+import "./column-views.e2b9c23c.css";
+import $lfxOo$columnviewsdff52504js from "./column-views.dff52504.js";
+import {useMacrostratColumnData as $d5074f164411387e$export$f8509b7cce386c7d} from "./column-views.ea237aa8.js";
+import $lfxOo$macrostrathyper from "@macrostrat/hyper";
+import {ColumnContext as $lfxOo$ColumnContext, ColumnAxis as $lfxOo$ColumnAxis, ColumnAxisType as $lfxOo$ColumnAxisType, SVG as $lfxOo$SVG, AgeAxis as $lfxOo$AgeAxis} from "@macrostrat/column-components";
+import {useContext as $lfxOo$useContext} from "react";
+import {Parenthetical as $lfxOo$Parenthetical} from "@macrostrat/data-components";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+
+
+
+
+
+const $43794af7643cdf40$var$h = (0, $lfxOo$macrostrathyper).styled((0, ($parcel$interopDefault($lfxOo$columnviewsdff52504js))));
+const $43794af7643cdf40$var$AgeAxisCore = ({ ticks: ticks, tickSpacing: tickSpacing = 40, showDomain: showDomain = false })=>{
+    const { pixelHeight: pixelHeight } = (0, $lfxOo$useContext)((0, $lfxOo$ColumnContext));
+    // A tick roughly every 40 pixels
+    let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);
+    return $43794af7643cdf40$var$h("g.axis", {
+        transform: "translate(20 0)"
+    }, [
+        $43794af7643cdf40$var$h((0, $lfxOo$ColumnAxis), {
+            ticks: v,
+            showDomain: showDomain
+        })
+    ]);
+};
+function $43794af7643cdf40$export$64204d5cbb3e8227(props) {
+    const { label: label = "Age", unit: unit = "Ma", className: className } = props;
+    return $43794af7643cdf40$var$h("div.column-axis-label.age-axis-label", {
+        className: className
+    }, [
+        label,
+        " ",
+        $43794af7643cdf40$var$h.if(unit)((0, $lfxOo$Parenthetical), {
+            className: "age-axis-unit"
+        }, unit)
+    ]);
+}
+function $43794af7643cdf40$export$40b6b0e4520eeb34() {
+    const { axisType: axisType, sections: sections, totalHeight: totalHeight } = (0, $d5074f164411387e$export$f8509b7cce386c7d)();
+    const packages = sections.map((section)=>{
+        return {
+            key: `section-${section.section_id}`,
+            ...section.scaleInfo
+        };
+    });
+    return $43794af7643cdf40$var$h($43794af7643cdf40$export$ac30ca3cf5df959d, {
+        axisType: axisType,
+        packages: packages,
+        totalHeight: totalHeight
+    });
+}
+function $43794af7643cdf40$export$ac30ca3cf5df959d(props) {
+    const { axisType: axisType, totalHeight: totalHeight, packages: packages } = props;
+    if (axisType == (0, $lfxOo$ColumnAxisType).ORDINAL) return null;
+    let axisLabel = "Age";
+    let axisUnit = "Ma";
+    if (axisType == (0, $lfxOo$ColumnAxisType).DEPTH) {
+        axisLabel = "Depth";
+        axisUnit = "m";
+    } else if (axisType == (0, $lfxOo$ColumnAxisType).HEIGHT) {
+        axisLabel = "Height";
+        axisUnit = "m";
+    }
+    return $43794af7643cdf40$var$h([
+        $43794af7643cdf40$var$h($43794af7643cdf40$export$64204d5cbb3e8227, {
+            label: axisLabel,
+            unit: axisUnit
+        }),
+        $43794af7643cdf40$var$h((0, $lfxOo$SVG), {
+            className: "age-axis-column",
+            style: {
+                width: `22px`,
+                height: `${totalHeight}px`
+            },
+            width: 22,
+            height: totalHeight
+        }, packages.map((group, i)=>{
+            const { key: key, scale: scale } = group;
+            return $43794af7643cdf40$var$h((0, $lfxOo$AgeAxis), {
+                key: key,
+                className: "age-axis",
+                scale: scale,
+                tickSizeOuter: 3
+            });
+        }))
+    ]);
+}
+
+
+export {$43794af7643cdf40$export$64204d5cbb3e8227 as VerticalAxisLabel, $43794af7643cdf40$export$40b6b0e4520eeb34 as CompositeAgeAxis, $43794af7643cdf40$export$ac30ca3cf5df959d as CompositeAgeAxisCore};
+//# sourceMappingURL=column-views.9ced149e.js.map

package/dist/esm/column-views.9ced149e.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,uEAAK;AAE5B,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,wBAAE,UAAU;QAAE,WAAW;IAAkB,GAAG;QACnD,wBAAE,CAAA,GAAA,iBAAS,GAAG;YACZ,OAAO;wBACP;QACF;KACD;AACH;AAEO,SAAS,0CAAkB,KAAK;IACrC,MAAM,SAAE,QAAQ,aAAO,OAAO,iBAAM,SAAS,EAAE,GAAG;IAClD,OAAO,wBAAE,wCAAwC;mBAAE;IAAU,GAAG;QAC9D;QACA;QACA,wBAAE,EAAE,CAAC,MAAM,CAAA,GAAA,oBAAY,GAAG;YAAE,WAAW;QAAgB,GAAG;KAC3D;AACH;AAEO,SAAS;IACd,MAAM,YAAE,QAAQ,YAAE,QAAQ,eAAE,WAAW,EAAE,GAAG,CAAA,GAAA,yCAAsB;IAElE,MAAM,WAAW,SAAS,GAAG,CAAC,CAAC;QAC7B,OAAO;YACL,KAAK,CAAC,QAAQ,EAAE,QAAQ,UAAU,EAAE;YACpC,GAAG,QAAQ,SAAS;QACtB;IACF;IAEA,OAAO,wBAAE,2CAAsB;kBAC7B;kBACA;qBACA;IACF;AACF;AAQO,SAAS,0CAAqB,KAAsC;IACzE,MAAM,YAAE,QAAQ,eAAE,WAAW,YAAE,QAAQ,EAAE,GAAG;IAE5C,IAAI,YAAY,CAAA,GAAA,qBAAa,EAAE,OAAO,EACpC,OAAO;IAGT,IAAI,YAAoB;IACxB,IAAI,WAAW;IACf,IAAI,YAAY,CAAA,GAAA,qBAAa,EAAE,KAAK,EAAE;QACpC,YAAY;QACZ,WAAW;IACb,OAAO,IAAI,YAAY,CAAA,GAAA,qBAAa,EAAE,MAAM,EAAE;QAC5C,YAAY;QACZ,WAAW;IACb;IAEA,OAAO,wBAAE;QACP,wBAAE,2CAAmB;YACnB,OAAO;YACP,MAAM;QACR;QACA,wBACE,CAAA,GAAA,UAAE,GACF;YACE,WAAW;YACX,OAAO;gBAAE,OAAO,CAAC,IAAI,CAAC;gBAAE,QAAQ,GAAG,YAAY,EAAE,CAAC;YAAC;YACnD,OAAO;YACP,QAAQ;QACV,GACA,SAAS,GAAG,CAAC,CAAC,OAAO;YACnB,MAAM,OAAE,GAAG,SAAE,KAAK,EAAE,GAAG;YAEvB,OAAO,wBAAE,CAAA,GAAA,cAAM,GAAG;qBAChB;gBACA,WAAW;uBACX;gBACA,eAAe;YACjB;QACF;KAEH;AACH","sources":["packages/column-views/src/age-axis.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport {\n  SVG,\n  ColumnSVG,\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 { useMacrostratColumnData } from \"./data-provider\";\nimport { Parenthetical } from \"@macrostrat/data-components\";\nimport { PackageScaleLayoutData } from \"./prepare-units/composite-scale\";\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 } = props;\n  return h(\"div.column-axis-label.age-axis-label\", { className }, [\n    label,\n    \" \",\n    h.if(unit)(Parenthetical, { className: \"age-axis-unit\" }, unit),\n  ]);\n}\n\nexport function CompositeAgeAxis() {\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  });\n}\n\nexport interface CompositeStratigraphicScaleInfo {\n  axisType: ColumnAxisType;\n  totalHeight: number;\n  packages: PackageScaleLayoutData[];\n}\n\nexport function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {\n  const { axisType, totalHeight, packages } = props;\n\n  if (axisType == ColumnAxisType.ORDINAL) {\n    return null;\n  }\n\n  let axisLabel: string = \"Age\";\n  let 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([\n    h(VerticalAxisLabel, {\n      label: axisLabel,\n      unit: axisUnit,\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"],"names":[],"version":3,"file":"column-views.9ced149e.js.map"}

package/dist/esm/{column.module.cbb072df.css → column-views.a7be0a4a.css}

@@ -154,4 +154,4 @@ div.map-column_084db9 .context-map .close-button {
 div.map-column_084db9 .context-map .land {
   background-color: #e9fcea;
 }
-/*# sourceMappingURL=column.module.cbb072df.css.map */
+/*# sourceMappingURL=column-views.a7be0a4a.css.map */

package/dist/esm/{column.module.cbb072df.css.map → column-views.a7be0a4a.css.map}

@@ -1 +1 @@
-{"mappings":"AAEA;;;;;;;;AAOA;;;;;;;AAMI;;;;;;AAMF;;;;;;AAKE;;;;;;;;;;AAWE;;;;;;AAMF;;;;;AAME;;;;;;AAMA;;;;AAIF;;;;;;;;;;;;;;;;AAkBA;;;;AAII;;;;;;;;AAMN;;;;AASF;;;;;;;;;;AAWM;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;AAOE;;;;AAIF","sources":["packages/column-views/src/carbon-isotopes/column.module.sass"],"sourcesContent":["@use \"sass:color\"\n\n.column-ui\n  width: 100vw\n  height: 100vh\n  overflow-y: scroll\n  display: flex\n  flex-direction: row\n\n.column-view\n  flex-grow: 1\n  padding: 1em\n  max-height: 100vh\n  overflow-y: scroll\n  h1\n    font-size: 1.2em\n    margin-bottom: 0.2em\n    padding-left: 35px\n\n// Column\n.column\n  margin-bottom: 1em\n  display: flex\n  flex-direction: row\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  :global\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: black\n      stroke-width: 1px\n\n    g.lithology-column use.frame\n      stroke: black\n      stroke-width: 1.5px !important\n      pointer-events: none\n\n    g.isotopes-column\n      rect.underlay\n        fill: transparent\n\n    .col-note-label\n      font-size: 10px\n      margin-top: 3px\n      padding: 2px 2px 2px 3px\n      line-height: 9px\n      border-left: none !important\n\n    g.height-range\n      display: none\n\n    .note-inner\n      border: none\n\n    .frame rect\n      fill: transparent\n\n\n\n.bp5-dark\n  .column :global\n    .lithology-column .frame\n      stroke: white\n    g.inner\n      rect.unit\n        filter: invert(100%)\n    g.lithology-column use.frame\n      stroke: white\n    .note\n      line, path.col-note-link\n        stroke: white\n    .y.axis .tick line\n      stroke: white\n\n.column-nav\n  position: sticky\n  top: 2.2em\n  h3\n    color: #444\n    margin-bottom: 0.3em\n\n.default-buttons\n  width: 100%\n  margin: 0 -10px\n\ndiv.map-column\n  width: 600px\n  height: 100vh\n  display: flex\n  flex-direction: column\n\n  :global\n    .map-area\n      flex-grow: 1\n\n    .map-placeholder\n      position: relative\n\n    .macrostrat-map\n      .graticule\n        stroke-dasharray: inherit\n        stroke: color.adjust(#AFE6F0, $lightness: -5%)\n      .neatline\n        stroke-width: 1.5px\n\n    .context-map\n      position: absolute\n      top: 0\n      right: 0\n      width: 250px\n      height: 250px\n      cursor: pointer\n      z-index: 100\n      &.expanded\n        cursor: inherit\n        .columns path:hover\n          stroke: rgba(255,0,0,.4) !important\n\n      .close-button\n        position: absolute\n        top: 1em\n        right: 1em\n\n      .land\n        background-color: rgb(233, 252, 234)\n"],"names":[],"version":3,"file":"column.module.cbb072df.css.map"}
+{"mappings":"AAEA;;;;;;;;AAOA;;;;;;;AAMI;;;;;;AAMF;;;;;;AAKE;;;;;;;;;;AAWE;;;;;;AAMF;;;;;AAME;;;;;;AAMA;;;;AAIF;;;;;;;;;;;;;;;;AAkBA;;;;AAII;;;;;;;;AAMN;;;;AASF;;;;;;;;;;AAWM;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;AAOE;;;;AAIF","sources":["packages/column-views/src/carbon-isotopes/column.module.sass"],"sourcesContent":["@use \"sass:color\"\n\n.column-ui\n  width: 100vw\n  height: 100vh\n  overflow-y: scroll\n  display: flex\n  flex-direction: row\n\n.column-view\n  flex-grow: 1\n  padding: 1em\n  max-height: 100vh\n  overflow-y: scroll\n  h1\n    font-size: 1.2em\n    margin-bottom: 0.2em\n    padding-left: 35px\n\n// Column\n.column\n  margin-bottom: 1em\n  display: flex\n  flex-direction: row\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  :global\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: black\n      stroke-width: 1px\n\n    g.lithology-column use.frame\n      stroke: black\n      stroke-width: 1.5px !important\n      pointer-events: none\n\n    g.isotopes-column\n      rect.underlay\n        fill: transparent\n\n    .col-note-label\n      font-size: 10px\n      margin-top: 3px\n      padding: 2px 2px 2px 3px\n      line-height: 9px\n      border-left: none !important\n\n    g.height-range\n      display: none\n\n    .note-inner\n      border: none\n\n    .frame rect\n      fill: transparent\n\n\n\n.bp5-dark\n  .column :global\n    .lithology-column .frame\n      stroke: white\n    g.inner\n      rect.unit\n        filter: invert(100%)\n    g.lithology-column use.frame\n      stroke: white\n    .note\n      line, path.col-note-link\n        stroke: white\n    .y.axis .tick line\n      stroke: white\n\n.column-nav\n  position: sticky\n  top: 2.2em\n  h3\n    color: #444\n    margin-bottom: 0.3em\n\n.default-buttons\n  width: 100%\n  margin: 0 -10px\n\ndiv.map-column\n  width: 600px\n  height: 100vh\n  display: flex\n  flex-direction: column\n\n  :global\n    .map-area\n      flex-grow: 1\n\n    .map-placeholder\n      position: relative\n\n    .macrostrat-map\n      .graticule\n        stroke-dasharray: inherit\n        stroke: color.adjust(#AFE6F0, $lightness: -5%)\n      .neatline\n        stroke-width: 1.5px\n\n    .context-map\n      position: absolute\n      top: 0\n      right: 0\n      width: 250px\n      height: 250px\n      cursor: pointer\n      z-index: 100\n      &.expanded\n        cursor: inherit\n        .columns path:hover\n          stroke: rgba(255,0,0,.4) !important\n\n      .close-button\n        position: absolute\n        top: 1em\n        right: 1em\n\n      .land\n        background-color: rgb(233, 252, 234)\n"],"names":[],"version":3,"file":"column-views.a7be0a4a.css.map"}

package/dist/esm/column-views.a98214b2.js

@@ -0,0 +1,9 @@
+import {ColumnCorrelationMap as $dcd183b733f66144$export$8e7d97509e84cc49} from "./column-views.40c1f361.js";
+import {ColumnCorrelationProvider as $74e211dc185c20b4$export$72ffe141ebf87ef1, useCorrelationMapStore as $74e211dc185c20b4$export$21398703d3a9bb4d} from "./column-views.30646469.js";
+
+
+
+
+
+export {$dcd183b733f66144$export$8e7d97509e84cc49 as ColumnCorrelationMap, $74e211dc185c20b4$export$72ffe141ebf87ef1 as ColumnCorrelationProvider, $74e211dc185c20b4$export$21398703d3a9bb4d as useCorrelationMapStore};
+//# sourceMappingURL=column-views.a98214b2.js.map

package/dist/esm/column-views.a98214b2.js.map

@@ -0,0 +1 @@
+{"mappings":"","sources":["packages/column-views/src/maps/column-correlation/index.ts"],"sourcesContent":["export * from \"./core\";\nexport * from \"./state\";\n"],"names":[],"version":3,"file":"column-views.a98214b2.js.map"}