@macrostrat/column-views 3.2.2 → 3.3.0

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.3.0] - 2026-02-13
+
+- Greatly streamline handling of `InsetMap`, column and unit overlay layers
+- Improve design of age range tags
+
 ## [3.2.2] - 2026-02-09
 
 - Move `AgeField` and `AgeRange` to separate exports

package/dist/index.cjs

@@ -8,22 +8,23 @@ const ageModelOverlay = require("./age-model-overlay.cjs");
 const notes = require("./notes.cjs");
 const ageRange = require("./unit-details/age-range.cjs");
 const composite = require("./units/composite.cjs");
+const columns = require("./maps/layers/columns.cjs");
 const base = require("./facets/measurements/base.cjs");
 const panel = require("./unit-details/panel.cjs");
 const layers = require("./maps/column-navigation/svg/layers.cjs");
 const core = require("./maps/column-correlation/core.cjs");
 const state = require("./maps/column-correlation/state.cjs");
-const columnNav = require("./data-provider/column-nav.cjs");
 const index$1 = require("./maps/column-navigation/mapbox/index.cjs");
+const columnNav = require("./data-provider/column-nav.cjs");
 const index$2 = require("./maps/column-navigation/svg/index.cjs");
 const main = require("./correlation-chart/main.cjs");
 const index$3 = require("./facets/detrital-zircon/index.cjs");
 const provider = require("./facets/fossils/provider.cjs");
 const types = require("./prepare-units/types.cjs");
-const insetMap = require("./maps/_shared/inset-map.cjs");
+const index$4 = require("./maps/inset-map/index.cjs");
 const isotopesColumn = require("./facets/carbon-isotopes/isotopes-column.cjs");
 const store = require("./data-provider/store.cjs");
-const index$4 = require("./maps/units-overlay/index.cjs");
+const units = require("./maps/layers/units.cjs");
 const dataProvider = require("./facets/carbon-isotopes/data-provider.cjs");
 const utils = require("./prepare-units/utils.cjs");
 const index$5 = require("./facets/fossils/index.cjs");
@@ -32,7 +33,6 @@ const sgp = require("./facets/measurements/sgp.cjs");
 const modalPanel = require("./unit-details/modal-panel.cjs");
 const popover = require("./unit-details/popover.cjs");
 const unitSelection = require("./data-provider/unit-selection.cjs");
-const styles = require("./maps/_shared/styles.cjs");
 const colors = require("./units/colors.cjs");
 const hashString = require("./correlation-chart/hash-string.cjs");
 const helpers = require("./prepare-units/helpers.cjs");
@@ -59,6 +59,7 @@ exports.ComputedSurfacesOverlay = ageModelOverlay.ComputedSurfacesOverlay;
 exports.ColumnNotes = notes.ColumnNotes;
 exports.AgeField = ageRange.AgeField;
 exports.AgeLabel = ageRange.AgeLabel;
+exports.AgeRange = ageRange.AgeRange;
 exports.Duration = ageRange.Duration;
 exports.IntervalProportions = ageRange.IntervalProportions;
 exports.getAge = ageRange.getAge;
@@ -70,6 +71,9 @@ exports.CompositeUnitsColumn = composite.CompositeUnitsColumn;
 exports.LabelTrackerProvider = composite.LabelTrackerProvider;
 exports.SectionLabelsColumn = composite.SectionLabelsColumn;
 exports.TrackedLabeledUnit = composite.TrackedLabeledUnit;
+exports.BaseColumnsLayer = columns.BaseColumnsLayer;
+exports.SelectedColumnOverlay = columns.SelectedColumnOverlay;
+exports.buildColumnsStyle = columns.buildColumnsStyle;
 exports.BaseMeasurementsColumn = base.BaseMeasurementsColumn;
 exports.TruncatedList = base.TruncatedList;
 exports.groupNotesByPixelDistance = base.groupNotesByPixelDistance;
@@ -91,9 +95,12 @@ exports.MeasurementsLayer = layers.MeasurementsLayer;
 exports.ColumnCorrelationMap = core.ColumnCorrelationMap;
 exports.ColumnCorrelationProvider = state.ColumnCorrelationProvider;
 exports.useCorrelationMapStore = state.useCorrelationMapStore;
+exports.ColumnHoverInteraction = index$1.ColumnHoverInteraction;
+exports.ColumnNavigationMap = index$1.ColumnNavigationMap;
+exports.ColumnSelectionManager = index$1.ColumnSelectionManager;
+exports.ColumnsNavigationLayer = index$1.ColumnsNavigationLayer;
 exports.ColumnNavProvider = columnNav.ColumnNavProvider;
 exports.useColumnNav = columnNav.useColumnNav;
-exports.ColumnNavigationMap = index$1.ColumnNavigationMap;
 exports.ColumnNavigationSVGMap = index$2.ColumnNavigationSVGMap;
 exports.ResizableMapFrame = index$2.ResizableMapFrame;
 exports.CorrelationChart = main.CorrelationChart;
@@ -103,7 +110,7 @@ exports.FossilDataType = provider.FossilDataType;
 exports.useFossilData = provider.useFossilData;
 exports.HeightMethod = types.HeightMethod;
 exports.HybridScaleType = types.HybridScaleType;
-exports.InsetMap = insetMap.InsetMap;
+exports.InsetMap = index$4.InsetMap;
 exports.IsotopesColumn = isotopesColumn.IsotopesColumn;
 exports.IsotopesDataset = isotopesColumn.IsotopesDataset;
 exports.LithologiesProvider = store.LithologiesProvider;
@@ -118,8 +125,8 @@ exports.useColumnUnitsMap = store.useColumnUnitsMap;
 exports.useCompositeScale = store.useCompositeScale;
 exports.useMacrostratColumnData = store.useMacrostratColumnData;
 exports.useMacrostratUnits = store.useMacrostratUnits;
-exports.MacrostratUnitsOverlay = index$4.MacrostratUnitsOverlay;
-exports.buildUnitsStyle = index$4.buildUnitsStyle;
+exports.MacrostratUnitsOverlay = units.MacrostratUnitsOverlay;
+exports.buildUnitsStyle = units.buildUnitsStyle;
 exports.MeasurementDataContext = dataProvider.MeasurementDataContext;
 exports.MeasurementDataProvider = dataProvider.MeasurementDataProvider;
 exports.useMeasurementData = dataProvider.useMeasurementData;
@@ -146,7 +153,6 @@ exports.useColumnRef = unitSelection.useColumnRef;
 exports.useSelectedUnit = unitSelection.useSelectedUnit;
 exports.useUnitSelectionDispatch = unitSelection.useUnitSelectionDispatch;
 exports.useUnitSelectionTarget = unitSelection.useUnitSelectionTarget;
-exports.buildColumnsStyle = styles.buildColumnsStyle;
 exports.flattenLithologies = colors.flattenLithologies;
 exports.getMixedColorForData = colors.getMixedColorForData;
 exports.getMixedUnitColor = colors.getMixedUnitColor;

package/dist/index.cjs.map

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

package/dist/index.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"core.cjs","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { buildColumnsStyle, InsetMap, InsetMapProps } from \"../_shared\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  const overlayStyles: Partial<Style>[] = useMemo(() => {\n    return [\n      buildColumnsStyle(columnColor) as Style,\n      selectedColumnsStyle as Style,\n      lineOfSectionStyle as Style,\n    ];\n  }, [columnColor]);\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n      overlayStyles,\n    },\n    [\n      h(ColumnsLayer),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: columns,\n      };\n\n      console.log(\" columns\", data);\n      setGeoJSON(map, \"columns\", data);\n    },\n    [columns, enabled],\n  );\n  return null;\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n\n  // Setup focused line\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    if (focusedLine == null || focusedLine?.coordinates.length < 2) {\n      return null;\n    }\n    let bounds = new LngLatBounds();\n    for (let coord of focusedLine.coordinates) {\n      bounds.extend(coord);\n    }\n    return bounds;\n  }, [focusedLine]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n"],"names":["useMemo","buildColumnsStyle","h","InsetMap","useCorrelationMapStore","state","useMapClickHandler","useMapStyleOperator","setGeoJSON","buildGeoJSONSource","buildCrossSectionLayers","bounds","LngLatBounds","useMapEaseTo"],"mappings":";;;;;;;;;;;;;AAsBO,SAAS,qBAAqB,OAA4B;AAC/D,QAAM,EAAE,UAAU,IAAI,UAAU,aAAa,WAAW,GAAG,SAAS;AAEpE,QAAM,gBAAkCA,MAAAA,QAAQ,MAAM;AACpD,WAAO;AAAA,MACLC,OAAAA,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAOC,WAAAA;AAAAA,IACLC,SAAAA;AAAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,MACED,WAAAA,QAAE,YAAY;AAAA,MACdA,WAAAA,QAAE,oBAAoB;AAAA,MACtBA,WAAAA,QAAE,eAAe;AAAA,MACjBA,mBAAE,aAAa,EAAE,SAAS;AAAA,MAC1B;AAAA,IAAA;AAAA,EACF;AAEJ;AAEA,SAAS,kBAAkB;AACzB,QAAM,aAAaE,MAAAA,uBAAuB,CAACC,WAAUA,OAAM,UAAU;AAErEC,cAAAA;AAAAA,IACE,CAAC,MAAM;AACL,iBAAW,GAAG,EAAE,MAAM,SAAS,aAAa,EAAE,OAAO,QAAA,GAAW;AAAA,IAClE;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,SAAO;AACT;AAEA,SAAS,uBAAuB;AAC9B,QAAM,iBAAiBF,MAAAA;AAAAA,IACrB,CAACC,WAAUA,OAAM;AAAA,EAAA;AAGnBE,cAAAA;AAAAA,IACE,CAAC,QAAQ;AACP,UAAI,WAAW;AAEf,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA;AAGF,YAAM,qBAA8B;AAAA,QAClC,MAAM;AAAA,QACN,UAAU;AAAA,UACR,MAAM;AAAA,UACN,aAAa,SAAS;AAAA,YACpB,CAAC,QAAQ,IAAI,WAAW,SAAS,SAAS;AAAA,UAAA;AAAA,QAC5C;AAAA,QAEF,YAAY,CAAA;AAAA,MAAC;AAGfC,6BAAW,KAAK,oBAAoB,IAAI;AACxCA,kBAAAA,WAAW,KAAK,6BAA6B;AAAA,QAC3C,MAAM;AAAA,QACN,UAAU,CAAC,kBAAkB;AAAA,MAAA,CAC9B;AAAA,IACH;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAEjB,SAAO;AACT;AAEA,SAAS,aAAa,EAAE,UAAU,QAAQ;AACxC,QAAM,UAAUJ,MAAAA,uBAAuB,CAACC,WAAUA,OAAM,OAAO;AAE/DE,cAAAA;AAAAA,IACE,CAAC,QAAQ;AACP,UAAI,WAAW,MAAM;AACnB;AAAA,MACF;AACA,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN,UAAU;AAAA,MAAA;AAGZ,cAAQ,IAAI,YAAY,IAAI;AAC5BC,6BAAW,KAAK,WAAW,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EAAA;AAEnB,SAAO;AACT;AAEA,MAAM,uBAA8B;AAAA,EAClC,SAAS;AAAA,EACT,SAAS;AAAA,IACP,oBAAoBC,YAAAA,mBAAA;AAAA,IACpB,6BAA6BA,YAAAA,mBAAA;AAAA,EAAmB;AAAA,EAElD,QAAQ;AAAA,IACN;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,cAAc;AAAA,QACd,kBAAkB,CAAC,GAAG,CAAC;AAAA,MAAA;AAAA,IACzB;AAAA,IAEF;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;AAEA,MAAM,qBAA4B;AAAA,EAChC,SAAS;AAAA,EACT,SAAS;AAAA,IACP,iBAAiBA,YAAAA,mBAAA;AAAA,IACjB,kBAAkBA,YAAAA,mBAAA;AAAA,IAClB,uBAAuBA,YAAAA,mBAAA;AAAA,EAAmB;AAAA,EAE5C,QAAQC,UAAAA,wBAAA;AACV;AAEA,SAAS,YAAY,EAAE,WAAgC;AACrD,QAAM,cAAcN,MAAAA,uBAAuB,CAACC,WAAUA,OAAM,WAAW;AAGvEE,cAAAA;AAAAA,IACE,CAAC,QAAQ;AACP,UAAI,eAAe,MAAM;AACvB;AAAA,MACF;AACA,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN,UAAU;AAAA,UACR;AAAA,YACE,MAAM;AAAA,YACN,UAAU;AAAA,YACV,YAAY,EAAE,IAAI,cAAA;AAAA,UAAc;AAAA,QAClC;AAAA,MACF;AAGFC,6BAAW,KAAK,oBAAoB,IAAI;AACxCA,kBAAAA,WAAW,KAAK,yBAAyB;AAAA,QACvC,MAAM;AAAA,QACN,UAAU,YAAY,YAAY,IAAI,CAAC,WAAW;AAAA,UAChD,MAAM;AAAA,UACN,UAAU,EAAE,MAAM,SAAS,aAAa,MAAA;AAAA,UACxC,YAAY,CAAA;AAAA,QAAC,EACb;AAAA,MAAA,CACH;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,SAASR,MAAAA,QAAQ,MAAM;AAC3B,QAAI,eAAe,QAAQ,aAAa,YAAY,SAAS,GAAG;AAC9D,aAAO;AAAA,IACT;AACA,QAAIW,UAAS,IAAIC,sBAAA;AACjB,aAAS,SAAS,YAAY,aAAa;AACzCD,cAAO,OAAO,KAAK;AAAA,IACrB;AACA,WAAOA;AAAAA,EACT,GAAG,CAAC,WAAW,CAAC;AAEhBE,cAAAA,aAAa,EAAE,QAAQ,SAAS,aAAa,MAAM;AAEnD,SAAO;AACT;;"}
+{"version":3,"file":"core.cjs","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../inset-map\";\nimport { BaseColumnsLayer } from \"../layers\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsLayer, { color: columnColor }),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  useOverlayStyle(() => selectedColumnsStyle, []);\n\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true, color }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n  return h(BaseColumnsLayer, { enabled, color, columns });\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  useOverlayStyle(() => lineOfSectionStyle, []);\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n\n  // Setup focused line\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    if (focusedLine == null || focusedLine?.coordinates.length < 2) {\n      return null;\n    }\n    let bounds = new LngLatBounds();\n    for (let coord of focusedLine.coordinates) {\n      bounds.extend(coord);\n    }\n    return bounds;\n  }, [focusedLine]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n"],"names":["h","InsetMap","useCorrelationMapStore","state","useMapClickHandler","useOverlayStyle","useMapStyleOperator","setGeoJSON","columns","BaseColumnsLayer","buildGeoJSONSource","buildCrossSectionLayers","useMemo","bounds","LngLatBounds","useMapEaseTo"],"mappings":"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"}

package/dist/maps/column-correlation/core.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { InsetMapProps } from '../_shared';
+import { InsetMapProps } from '../inset-map';
 export interface CorrelationMapProps extends InsetMapProps {
     padding?: number;
     children?: ReactNode;

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

@@ -1,31 +1,23 @@
-import { useMapStyleOperator, useMapClickHandler, useMapEaseTo } from "@macrostrat/mapbox-react";
+import { useOverlayStyle, useMapStyleOperator, useMapClickHandler, useMapEaseTo } from "@macrostrat/mapbox-react";
 import { LngLatBounds } from "mapbox-gl";
 import h from "@macrostrat/hyper";
 import { useMemo } from "react";
-import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
+import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 import { useCorrelationMapStore } from "./state.js";
+import { InsetMap } from "../inset-map/index.js";
 import { buildCrossSectionLayers } from "@macrostrat/map-styles";
-import { buildColumnsStyle } from "../_shared/styles.js";
-import { InsetMap } from "../_shared/inset-map.js";
+import { BaseColumnsLayer } from "../layers/columns.js";
 function ColumnCorrelationMap(props) {
   const { padding = 50, children, columnColor, projectID, ...rest } = props;
-  const overlayStyles = useMemo(() => {
-    return [
-      buildColumnsStyle(columnColor),
-      selectedColumnsStyle,
-      lineOfSectionStyle
-    ];
-  }, [columnColor]);
   return h(
     InsetMap,
     {
       ...rest,
       boxZoom: false,
-      dragRotate: false,
-      overlayStyles
+      dragRotate: false
     },
     [
-      h(ColumnsLayer),
+      h(ColumnsLayer, { color: columnColor }),
       h(SelectedColumnsLayer),
       h(MapClickHandler),
       h(SectionLine, { padding }),
@@ -44,6 +36,7 @@ function MapClickHandler() {
   return null;
 }
 function SelectedColumnsLayer() {
+  useOverlayStyle(() => selectedColumnsStyle, []);
   const focusedColumns = useCorrelationMapStore(
     (state) => state.focusedColumns
   );
@@ -74,23 +67,9 @@ function SelectedColumnsLayer() {
   );
   return null;
 }
-function ColumnsLayer({ enabled = true }) {
+function ColumnsLayer({ enabled = true, color }) {
   const columns = useCorrelationMapStore((state) => state.columns);
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
-      };
-      console.log(" columns", data);
-      setGeoJSON(map, "columns", data);
-    },
-    [columns, enabled]
-  );
-  return null;
+  return h(BaseColumnsLayer, { enabled, color, columns });
 }
 const selectedColumnsStyle = {
   version: 8,
@@ -138,6 +117,7 @@ const lineOfSectionStyle = {
   layers: buildCrossSectionLayers()
 };
 function SectionLine({ padding }) {
+  useOverlayStyle(() => lineOfSectionStyle, []);
   const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
   useMapStyleOperator(
     (map) => {

package/dist/maps/column-correlation/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { buildColumnsStyle, InsetMap, InsetMapProps } from \"../_shared\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  const overlayStyles: Partial<Style>[] = useMemo(() => {\n    return [\n      buildColumnsStyle(columnColor) as Style,\n      selectedColumnsStyle as Style,\n      lineOfSectionStyle as Style,\n    ];\n  }, [columnColor]);\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n      overlayStyles,\n    },\n    [\n      h(ColumnsLayer),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: columns,\n      };\n\n      console.log(\" columns\", data);\n      setGeoJSON(map, \"columns\", data);\n    },\n    [columns, enabled],\n  );\n  return null;\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n\n  // Setup focused line\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    if (focusedLine == null || focusedLine?.coordinates.length < 2) {\n      return null;\n    }\n    let bounds = new LngLatBounds();\n    for (let coord of focusedLine.coordinates) {\n      bounds.extend(coord);\n    }\n    return bounds;\n  }, [focusedLine]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n"],"names":["bounds"],"mappings":";;;;;;;;;AAsBO,SAAS,qBAAqB,OAA4B;AAC/D,QAAM,EAAE,UAAU,IAAI,UAAU,aAAa,WAAW,GAAG,SAAS;AAEpE,QAAM,gBAAkC,QAAQ,MAAM;AACpD,WAAO;AAAA,MACL,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,WAAW,CAAC;AAEhB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,MACE,EAAE,YAAY;AAAA,MACd,EAAE,oBAAoB;AAAA,MACtB,EAAE,eAAe;AAAA,MACjB,EAAE,aAAa,EAAE,SAAS;AAAA,MAC1B;AAAA,IAAA;AAAA,EACF;AAEJ;AAEA,SAAS,kBAAkB;AACzB,QAAM,aAAa,uBAAuB,CAAC,UAAU,MAAM,UAAU;AAErE;AAAA,IACE,CAAC,MAAM;AACL,iBAAW,GAAG,EAAE,MAAM,SAAS,aAAa,EAAE,OAAO,QAAA,GAAW;AAAA,IAClE;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,SAAO;AACT;AAEA,SAAS,uBAAuB;AAC9B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAU,MAAM;AAAA,EAAA;AAGnB;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,WAAW;AAEf,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA;AAGF,YAAM,qBAA8B;AAAA,QAClC,MAAM;AAAA,QACN,UAAU;AAAA,UACR,MAAM;AAAA,UACN,aAAa,SAAS;AAAA,YACpB,CAAC,QAAQ,IAAI,WAAW,SAAS,SAAS;AAAA,UAAA;AAAA,QAC5C;AAAA,QAEF,YAAY,CAAA;AAAA,MAAC;AAGf,iBAAW,KAAK,oBAAoB,IAAI;AACxC,iBAAW,KAAK,6BAA6B;AAAA,QAC3C,MAAM;AAAA,QACN,UAAU,CAAC,kBAAkB;AAAA,MAAA,CAC9B;AAAA,IACH;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAEjB,SAAO;AACT;AAEA,SAAS,aAAa,EAAE,UAAU,QAAQ;AACxC,QAAM,UAAU,uBAAuB,CAAC,UAAU,MAAM,OAAO;AAE/D;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,WAAW,MAAM;AACnB;AAAA,MACF;AACA,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN,UAAU;AAAA,MAAA;AAGZ,cAAQ,IAAI,YAAY,IAAI;AAC5B,iBAAW,KAAK,WAAW,IAAI;AAAA,IACjC;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EAAA;AAEnB,SAAO;AACT;AAEA,MAAM,uBAA8B;AAAA,EAClC,SAAS;AAAA,EACT,SAAS;AAAA,IACP,oBAAoB,mBAAA;AAAA,IACpB,6BAA6B,mBAAA;AAAA,EAAmB;AAAA,EAElD,QAAQ;AAAA,IACN;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,cAAc;AAAA,QACd,kBAAkB,CAAC,GAAG,CAAC;AAAA,MAAA;AAAA,IACzB;AAAA,IAEF;AAAA,MACE,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAEJ;AAEA,MAAM,qBAA4B;AAAA,EAChC,SAAS;AAAA,EACT,SAAS;AAAA,IACP,iBAAiB,mBAAA;AAAA,IACjB,kBAAkB,mBAAA;AAAA,IAClB,uBAAuB,mBAAA;AAAA,EAAmB;AAAA,EAE5C,QAAQ,wBAAA;AACV;AAEA,SAAS,YAAY,EAAE,WAAgC;AACrD,QAAM,cAAc,uBAAuB,CAAC,UAAU,MAAM,WAAW;AAGvE;AAAA,IACE,CAAC,QAAQ;AACP,UAAI,eAAe,MAAM;AACvB;AAAA,MACF;AACA,YAAM,OAA0B;AAAA,QAC9B,MAAM;AAAA,QACN,UAAU;AAAA,UACR;AAAA,YACE,MAAM;AAAA,YACN,UAAU;AAAA,YACV,YAAY,EAAE,IAAI,cAAA;AAAA,UAAc;AAAA,QAClC;AAAA,MACF;AAGF,iBAAW,KAAK,oBAAoB,IAAI;AACxC,iBAAW,KAAK,yBAAyB;AAAA,QACvC,MAAM;AAAA,QACN,UAAU,YAAY,YAAY,IAAI,CAAC,WAAW;AAAA,UAChD,MAAM;AAAA,UACN,UAAU,EAAE,MAAM,SAAS,aAAa,MAAA;AAAA,UACxC,YAAY,CAAA;AAAA,QAAC,EACb;AAAA,MAAA,CACH;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,eAAe,QAAQ,aAAa,YAAY,SAAS,GAAG;AAC9D,aAAO;AAAA,IACT;AACA,QAAIA,UAAS,IAAI,aAAA;AACjB,aAAS,SAAS,YAAY,aAAa;AACzCA,cAAO,OAAO,KAAK;AAAA,IACrB;AACA,WAAOA;AAAAA,EACT,GAAG,CAAC,WAAW,CAAC;AAEhB,eAAa,EAAE,QAAQ,SAAS,aAAa,MAAM;AAEnD,SAAO;AACT;"}
+{"version":3,"file":"core.js","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../inset-map\";\nimport { BaseColumnsLayer } from \"../layers\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsLayer, { color: columnColor }),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  useOverlayStyle(() => selectedColumnsStyle, []);\n\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true, color }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n  return h(BaseColumnsLayer, { enabled, color, columns });\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  useOverlayStyle(() => lineOfSectionStyle, []);\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n\n  // Setup focused line\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    if (focusedLine == null || focusedLine?.coordinates.length < 2) {\n      return null;\n    }\n    let bounds = new LngLatBounds();\n    for (let coord of focusedLine.coordinates) {\n      bounds.extend(coord);\n    }\n    return bounds;\n  }, [focusedLine]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n"],"names":["bounds"],"mappings":"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"}