@macrostrat/column-views 3.9.0 → 3.10.0

package/dist/maps/column-navigation/mapbox/index.js

@@ -1,213 +0,0 @@
-import { useMapStyleOperator, useMapRef } from "@macrostrat/mapbox-react";
-import h from "@macrostrat/hyper";
-import { useCallback, useRef, useMemo, useEffect } from "react";
-import { ColumnNavigationProvider, useColumnNavigationStore } from "./state.js";
-import { InsetMap } from "../../inset-map/index.js";
-import { geoCentroid } from "d3-geo";
-import { ColumnKeyboardNavigation } from "./keyboard-navigation.js";
-import { SelectedColumnOverlay, BaseColumnsLayer } from "../../layers/columns.js";
-function ColumnNavigationMap(props) {
-  const {
-    padding = 50,
-    children,
-    columnColor,
-    showTriangulation,
-    triangulationColor,
-    keyboardNavigation = true,
-    columns,
-    columnIDs,
-    onSelectColumn,
-    onHoverColumn,
-    selectedColumn,
-    hoveredColumn,
-    projectID,
-    inProcess,
-    ...rest
-  } = props;
-  return h(
-    InsetMap,
-    {
-      ...rest,
-      boxZoom: false,
-      dragRotate: false
-    },
-    [
-      h(ColumnsNavigationLayer, {
-        color: columnColor,
-        columns,
-        columnIDs,
-        onSelectColumn,
-        onHoverColumn,
-        selectedColumn,
-        hoveredColumn,
-        projectID,
-        inProcess,
-        keyboardNavigation,
-        showTriangulation,
-        triangulationColor
-      }),
-      children
-    ]
-  );
-}
-function ColumnsNavigationLayer(props) {
-  const {
-    enabled,
-    color,
-    keyboardNavigation,
-    showTriangulation,
-    triangulationColor,
-    ...providerProps
-  } = props;
-  return h(ColumnNavigationProvider, providerProps, [
-    h(_ColumnsNavigationLayer, { enabled, color }),
-    h.if(keyboardNavigation)(ColumnKeyboardNavigation, {
-      showTriangulation,
-      triangulationColor
-    })
-  ]);
-}
-const columnLayers = ["columns-points", "columns-fill"];
-function _ColumnsNavigationLayer({ enabled = true, color }) {
-  const columns = useColumnNavigationStore((state) => state.columns);
-  const selectedColumnID = useColumnNavigationStore(
-    (state) => state.selectedColumn
-  );
-  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
-  const setHoveredColumn = useColumnNavigationStore(
-    (state) => state.setHoveredColumn
-  );
-  const onHover = useCallback(
-    (event) => setHoveredColumn(event.features?.[0]?.id),
-    [setHoveredColumn]
-  );
-  const onSelectColumn = useCallback(
-    (column) => selectColumn(column.id),
-    [selectColumn]
-  );
-  const selectedColumnFeature = useMemo(() => {
-    if (columns == null || selectedColumnID == null) return null;
-    return columns.find((d) => d.id == selectedColumnID);
-  }, [selectedColumnID, columns]);
-  return h([
-    h(BaseColumnsLayer, { enabled, color, columns }),
-    h(ColumnSelectionManager, {
-      selectedColumn: selectedColumnFeature,
-      onSelectColumn
-    }),
-    h(ColumnHoverInteraction, { onHover })
-  ]);
-}
-function ColumnSelectionManager({
-  selectedColumn,
-  onSelectColumn,
-  centerOnSelect = true
-}) {
-  const onClick = useCallback(
-    (event) => {
-      if (event.features.length == 0) return;
-      const selectedColumn2 = event.features[0];
-      onSelectColumn(selectedColumn2);
-    },
-    [onSelectColumn]
-  );
-  return h([
-    h.if(centerOnSelect)(SelectedColumnCenterer, {
-      selectedColumn
-    }),
-    h(SelectedColumnOverlay, { selectedColumn }),
-    h(ClickInteraction, {
-      onClick,
-      layers: columnLayers
-    })
-  ]);
-}
-function ColumnHoverInteraction({ onHover }) {
-  return h(HoverInteraction, { onHover, layers: columnLayers });
-}
-function ClickInteraction({ onClick, layers }) {
-  useMapStyleOperator(
-    (map) => {
-      map.on("click", layers, onClick);
-      return () => {
-        map.off("click", layers, onClick);
-      };
-    },
-    [layers, onClick]
-  );
-  return null;
-}
-function HoverInteraction({ onHover, layers }) {
-  const hoveredFeaturesRef = useRef([]);
-  const updateFeatureState = useCallback((map, features) => {
-    for (const f of hoveredFeaturesRef.current) {
-      map.setFeatureState(
-        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
-        { hover: false }
-      );
-    }
-    for (const f of features) {
-      map.setFeatureState(
-        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
-        { hover: true }
-      );
-    }
-    hoveredFeaturesRef.current = features;
-  }, []);
-  useMapStyleOperator(
-    (map) => {
-      const mouseMove = (event) => {
-        if (event.features.length == 0) return;
-        onHover?.(event);
-        updateFeatureState(map, event.features);
-        map.getCanvas().style.cursor = "pointer";
-      };
-      const mouseLeave = (event) => {
-        onHover?.(event);
-        updateFeatureState(map, event.features ?? []);
-        map.getCanvas().style.cursor = "";
-      };
-      map.on("mousemove", layers, mouseMove);
-      map.on("mouseleave", layers, mouseLeave);
-      return () => {
-        map.off("mouseenter", layers, mouseMove);
-        map.off("mouseleave", layers, mouseLeave);
-      };
-    },
-    [layers, onHover]
-  );
-  return null;
-}
-function SelectedColumnCenterer({
-  selectedColumn,
-  easeDuration = 500
-}) {
-  const columnCenter = useMemo(() => {
-    const columnGeometry = selectedColumn?.geometry;
-    if (columnGeometry == null) return null;
-    return geoCentroid(columnGeometry);
-  }, [selectedColumn]);
-  const mapRef = useMapRef();
-  const map = mapRef.current;
-  const initialRenderRef = useRef(true);
-  useEffect(() => {
-    if (map == null) return;
-    const isInitialRender = initialRenderRef.current;
-    if (isInitialRender) initialRenderRef.current = false;
-    if (columnCenter == null) return;
-    if (isInitialRender) {
-      map.setCenter(columnCenter);
-      initialRenderRef.current = false;
-    } else {
-      map.easeTo({ center: columnCenter }, { duration: easeDuration });
-    }
-  }, [mapRef.current, columnCenter]);
-  return null;
-}
-export {
-  ColumnHoverInteraction,
-  ColumnNavigationMap,
-  ColumnSelectionManager,
-  ColumnsNavigationLayer
-};
-//# sourceMappingURL=index.js.map

package/dist/maps/column-navigation/mapbox/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/maps/column-navigation/mapbox/index.ts"],"sourcesContent":["import { useMapRef, useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport h from \"@macrostrat/hyper\";\nimport { ReactNode, useCallback, useEffect, useMemo, useRef } from \"react\";\n\nimport {\n  ColumnNavigationProvider,\n  NavigationProviderProps,\n  useColumnNavigationStore,\n} from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../../inset-map\";\nimport { geoCentroid } from \"d3-geo\";\nimport { BaseColumnsLayer, SelectedColumnOverlay } from \"../../layers\";\nimport { ColumnKeyboardNavigation } from \"./keyboard-navigation\";\nimport type { ColumnFeature } from \"../../layers\";\n\nexport interface ColumnNavigationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  selectedColumn?: number;\n  hoveredColumn?: number;\n  onSelectColumn?: (colID: number | null) => void;\n  onHoverColumn?: (colID: number | null) => void;\n  showTriangulation?: boolean;\n  columnColor?: string;\n}\n\nexport function ColumnNavigationMap(\n  props: ColumnNavigationMapProps & NavigationProviderProps,\n) {\n  const {\n    padding = 50,\n    children,\n    columnColor,\n    showTriangulation,\n    triangulationColor,\n    keyboardNavigation = true,\n    columns,\n    columnIDs,\n    onSelectColumn,\n    onHoverColumn,\n    selectedColumn,\n    hoveredColumn,\n    projectID,\n    inProcess,\n    ...rest\n  } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsNavigationLayer, {\n        color: columnColor,\n        columns,\n        columnIDs,\n        onSelectColumn,\n        onHoverColumn,\n        selectedColumn,\n        hoveredColumn,\n        projectID,\n        inProcess,\n        keyboardNavigation,\n        showTriangulation,\n        triangulationColor,\n      }),\n      children,\n    ],\n  );\n}\n\ninterface ColumnLayerProps {\n  enabled?: boolean;\n  color?: string;\n}\n\ninterface ColumnKeyboardNavigationProps {\n  triangulationColor?: string;\n  keyboardNavigation?: boolean;\n  showTriangulation?: boolean;\n}\n\nexport function ColumnsNavigationLayer(\n  props: NavigationProviderProps &\n    ColumnLayerProps &\n    ColumnKeyboardNavigationProps,\n) {\n  const {\n    enabled,\n    color,\n    keyboardNavigation,\n    showTriangulation,\n    triangulationColor,\n    ...providerProps\n  } = props;\n\n  return h(ColumnNavigationProvider, providerProps, [\n    h(_ColumnsNavigationLayer, { enabled, color }),\n    h.if(keyboardNavigation)(ColumnKeyboardNavigation, {\n      showTriangulation,\n      triangulationColor,\n    }),\n  ]);\n}\n\nconst columnLayers = [\"columns-points\", \"columns-fill\"];\n\nfunction _ColumnsNavigationLayer({ enabled = true, color }) {\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const selectedColumnID = useColumnNavigationStore(\n    (state) => state.selectedColumn,\n  );\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n  const setHoveredColumn = useColumnNavigationStore(\n    (state) => state.setHoveredColumn,\n  );\n\n  const onHover = useCallback(\n    (event) => setHoveredColumn(event.features?.[0]?.id),\n    [setHoveredColumn],\n  );\n\n  /** Convert features into column IDs to pass to the selection manager */\n  const onSelectColumn = useCallback(\n    (column) => selectColumn(column.id),\n    [selectColumn],\n  );\n\n  const selectedColumnFeature = useMemo(() => {\n    if (columns == null || selectedColumnID == null) return null;\n    return columns.find((d) => d.id == selectedColumnID);\n  }, [selectedColumnID, columns]);\n\n  return h([\n    h(BaseColumnsLayer, { enabled, color, columns }),\n    h(ColumnSelectionManager, {\n      selectedColumn: selectedColumnFeature,\n      onSelectColumn,\n    }),\n    h(ColumnHoverInteraction, { onHover }),\n  ]);\n}\n\nexport function ColumnSelectionManager({\n  selectedColumn,\n  onSelectColumn,\n  centerOnSelect = true,\n}: {\n  selectedColumn: ColumnFeature;\n  onSelectColumn: (column: ColumnFeature) => void;\n  centerOnSelect?: boolean;\n}) {\n  const onClick = useCallback(\n    (event) => {\n      if (event.features.length == 0) return;\n      const selectedColumn = event.features[0];\n      onSelectColumn(selectedColumn);\n    },\n    [onSelectColumn],\n  );\n\n  return h([\n    h.if(centerOnSelect)(SelectedColumnCenterer, {\n      selectedColumn,\n    }),\n    h(SelectedColumnOverlay, { selectedColumn }),\n    h(ClickInteraction, {\n      onClick,\n      layers: columnLayers,\n    }),\n  ]);\n}\n\nexport function ColumnHoverInteraction({ onHover }) {\n  return h(HoverInteraction, { onHover, layers: columnLayers });\n}\n\nfunction ClickInteraction({ onClick, layers }) {\n  useMapStyleOperator(\n    (map) => {\n      // Setup hover styles on map\n      map.on(\"click\", layers, onClick);\n      return () => {\n        map.off(\"click\", layers, onClick);\n      };\n    },\n    [layers, onClick],\n  );\n  return null;\n}\n\nfunction HoverInteraction({ onHover, layers }) {\n  const hoveredFeaturesRef = useRef([]);\n  const updateFeatureState = useCallback((map, features) => {\n    // Reset hover state for previously hovered features\n    for (const f of hoveredFeaturesRef.current) {\n      map.setFeatureState(\n        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },\n        { hover: false },\n      );\n    }\n    // Set hover state for new features\n    for (const f of features) {\n      map.setFeatureState(\n        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },\n        { hover: true },\n      );\n    }\n    hoveredFeaturesRef.current = features;\n  }, []);\n\n  useMapStyleOperator(\n    (map) => {\n      const mouseMove = (event) => {\n        if (event.features.length == 0) return;\n        onHover?.(event);\n        updateFeatureState(map, event.features);\n        map.getCanvas().style.cursor = \"pointer\";\n      };\n      const mouseLeave = (event) => {\n        onHover?.(event);\n        updateFeatureState(map, event.features ?? []);\n        map.getCanvas().style.cursor = \"\";\n      };\n\n      // Setup hover styles on map\n      map.on(\"mousemove\", layers, mouseMove);\n      map.on(\"mouseleave\", layers, mouseLeave);\n\n      return () => {\n        map.off(\"mouseenter\", layers, mouseMove);\n        map.off(\"mouseleave\", layers, mouseLeave);\n      };\n    },\n    [layers, onHover],\n  );\n  return null;\n}\n\nfunction SelectedColumnCenterer({\n  selectedColumn,\n  easeDuration = 500,\n}: {\n  selectedColumn: ColumnFeature;\n  easeDuration?: number;\n}) {\n  const columnCenter = useMemo(() => {\n    const columnGeometry = selectedColumn?.geometry;\n    if (columnGeometry == null) return null;\n    return geoCentroid(columnGeometry);\n  }, [selectedColumn]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n  const initialRenderRef = useRef(true);\n  // Center the map on the selected column when it changes\n  useEffect(() => {\n    if (map == null) return;\n    const isInitialRender = initialRenderRef.current;\n    if (isInitialRender) initialRenderRef.current = false;\n    // If this is the first render of the map, jump to the location. Otherwise, ease to it.\n    if (columnCenter == null) return;\n    if (isInitialRender) {\n      map.setCenter(columnCenter);\n      initialRenderRef.current = false;\n    } else {\n      map.easeTo({ center: columnCenter }, { duration: easeDuration });\n    }\n  }, [mapRef.current, columnCenter]);\n\n  return null;\n}\n"],"names":["selectedColumn"],"mappings":"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"}

package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs

@@ -1,105 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const mapboxUtils = require("@macrostrat/mapbox-utils");
-const mapboxReact = require("@macrostrat/mapbox-react");
-const state = require("./state.cjs");
-const keyboardNavigation = require("../utils/keyboard-navigation.cjs");
-function ColumnKeyboardNavigation(props) {
-  const { showTriangulation = false, triangulationColor } = props;
-  const columns = state.useColumnNavigationStore((state2) => state2.columns);
-  const col_id = state.useColumnNavigationStore((state2) => state2.selectedColumn);
-  const selectColumn = state.useColumnNavigationStore((state2) => state2.selectColumn);
-  const voronoi = React.useMemo(() => {
-    if (!columns || columns.length == 0) return null;
-    return keyboardNavigation.buildTriangulation(columns);
-  }, [columns]);
-  const mapRef = mapboxReact.useMapRef();
-  const map = mapRef.current;
-  mapboxReact.useOverlayStyle(() => {
-    if (!showTriangulation) return null;
-    return buildKeyboardNavigationStyle(
-      triangulationColor
-    );
-  }, [triangulationColor, showTriangulation]);
-  const keyMapping = React.useMemo(() => {
-    if (columns == null || voronoi == null || map == null) return null;
-    const projection = (d) => {
-      const pt = map.project(d);
-      return [pt.x, pt.y];
-    };
-    const currentIndex = columns.findIndex(
-      (d) => d.properties.col_id == col_id
-    );
-    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];
-    return keyboardNavigation.buildKeyMapping(
-      neighbors,
-      voronoi.centroids,
-      currentIndex,
-      projection
-    );
-  }, [col_id, columns, voronoi, map]);
-  const onKeyDown = React.useCallback(
-    (event) => {
-      if (keyMapping == null) return;
-      const nextColumnIx = keyMapping[event.which];
-      if (nextColumnIx == null) return;
-      event.preventDefault();
-      event.stopPropagation();
-      selectColumn(columns[nextColumnIx].id);
-      return false;
-    },
-    [keyMapping, selectColumn]
-  );
-  React.useEffect(() => {
-    if (map == null) return;
-    const canvas = map.getCanvas();
-    canvas.addEventListener("keydown", onKeyDown);
-    return () => {
-      canvas.removeEventListener("keydown", onKeyDown);
-    };
-  }, [map, onKeyDown]);
-  mapboxReact.useMapStyleOperator(
-    (map2) => {
-      if (voronoi == null || !showTriangulation) return;
-      const { features } = voronoi.tri.links();
-      mapboxUtils.setGeoJSON(map2, "column-links", {
-        type: "FeatureCollection",
-        features
-      });
-    },
-    [voronoi, showTriangulation]
-  );
-  return null;
-}
-function buildKeyboardNavigationStyle(color = "purple") {
-  return {
-    sources: {
-      "column-links": mapboxUtils.buildGeoJSONSource()
-      //neighbors: buildGeoJSONSource(),
-    },
-    layers: [
-      {
-        id: "column-links",
-        type: "line",
-        source: "column-links",
-        paint: {
-          "line-color": color,
-          "line-width": 1.5
-        }
-      },
-      {
-        id: "column-centers",
-        type: "circle",
-        source: "column-links",
-        paint: {
-          "circle-radius": 2,
-          "circle-color": color
-        }
-      }
-    ]
-  };
-}
-exports.ColumnKeyboardNavigation = ColumnKeyboardNavigation;
-exports.buildKeyboardNavigationStyle = buildKeyboardNavigationStyle;
-//# sourceMappingURL=keyboard-navigation.cjs.map

package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard-navigation.cjs","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport {\n  useMapRef,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\nimport { StyleSpecification } from \"mapbox-gl\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n  triangulationColor?: string;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false, triangulationColor } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  // Set up overlay style for triangulation\n  useOverlayStyle(() => {\n    if (!showTriangulation) return null;\n    return buildKeyboardNavigationStyle(\n      triangulationColor,\n    ) as Partial<StyleSpecification>;\n  }, [triangulationColor, showTriangulation]);\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  } as Partial<StyleSpecification>;\n}\n"],"names":["useColumnNavigationStore","state","useMemo","buildTriangulation","useMapRef","useOverlayStyle","buildKeyMapping","useCallback","useEffect","useMapStyleOperator","map","setGeoJSON","buildGeoJSONSource"],"mappings":";;;;;;;AAmBO,SAAS,yBAAyB,OAAyB;AAEhE,QAAM,EAAE,oBAAoB,OAAO,mBAAA,IAAuB;AAC1D,QAAM,UAAUA,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,OAAO;AACjE,QAAM,SAASD,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,cAAc;AACvE,QAAM,eAAeD,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,YAAY;AAE3E,QAAM,UAAUC,MAAAA,QAAQ,MAAM;AAC5B,QAAI,CAAC,WAAW,QAAQ,UAAU,EAAG,QAAO;AAC5C,WAAOC,mBAAAA,mBAAmB,OAAO;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAASC,YAAAA,UAAA;AACf,QAAM,MAAM,OAAO;AAGnBC,cAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,kBAAmB,QAAO;AAC/B,WAAO;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,oBAAoB,iBAAiB,CAAC;AAE1C,QAAM,aAAaH,MAAAA,QAAQ,MAAM;AAC/B,QAAI,WAAW,QAAQ,WAAW,QAAQ,OAAO,KAAM,QAAO;AAE9D,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,KAAK,IAAI,QAAQ,CAAC;AACxB,aAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACpB;AAEA,UAAM,eAAe,QAAQ;AAAA,MAC3B,CAAC,MAAM,EAAE,WAAW,UAAU;AAAA,IAAA;AAGhC,UAAM,YAAY,QAAQ,IAAI,SAAS,UAAU,YAAY;AAC7D,WAAOI,mBAAAA;AAAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,SAAS,GAAG,CAAC;AAElC,QAAM,YAAYC,MAAAA;AAAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,cAAc,KAAM;AACxB,YAAM,eAAe,WAAW,MAAM,KAAK;AAC3C,UAAI,gBAAgB,KAAM;AAC1B,YAAM,eAAA;AACN,YAAM,gBAAA;AAEN,mBAAa,QAAQ,YAAY,EAAE,EAAE;AACrC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3BC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,KAAM;AACjB,UAAM,SAAS,IAAI,UAAA;AACnB,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnBC,cAAAA;AAAAA,IACE,CAACC,SAAQ;AACP,UAAI,WAAW,QAAQ,CAAC,kBAAmB;AAC3C,YAAM,EAAE,SAAA,IAAa,QAAQ,IAAI,MAAA;AAEjCC,kBAAAA,WAAWD,MAAK,gBAAgB;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAM7B,SAAO;AACT;AAEO,SAAS,6BAA6B,QAAgB,UAAU;AACrE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,gBAAgBE,YAAAA,mBAAA;AAAA;AAAA,IAAmB;AAAA,IAGrC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEJ;;;"}

package/dist/maps/column-navigation/mapbox/keyboard-navigation.d.ts

@@ -1,8 +0,0 @@
-import { StyleSpecification } from 'mapbox-gl';
-interface KeyboardNavProps {
-    showTriangulation: boolean;
-    triangulationColor?: string;
-}
-export declare function ColumnKeyboardNavigation(props: KeyboardNavProps): null;
-export declare function buildKeyboardNavigationStyle(color?: string): Partial<StyleSpecification>;
-export {};

package/dist/maps/column-navigation/mapbox/keyboard-navigation.js

@@ -1,105 +0,0 @@
-import { useMemo, useCallback, useEffect } from "react";
-import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
-import { useMapRef, useOverlayStyle, useMapStyleOperator } from "@macrostrat/mapbox-react";
-import { useColumnNavigationStore } from "./state.js";
-import { buildTriangulation, buildKeyMapping } from "../utils/keyboard-navigation.js";
-function ColumnKeyboardNavigation(props) {
-  const { showTriangulation = false, triangulationColor } = props;
-  const columns = useColumnNavigationStore((state) => state.columns);
-  const col_id = useColumnNavigationStore((state) => state.selectedColumn);
-  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
-  const voronoi = useMemo(() => {
-    if (!columns || columns.length == 0) return null;
-    return buildTriangulation(columns);
-  }, [columns]);
-  const mapRef = useMapRef();
-  const map = mapRef.current;
-  useOverlayStyle(() => {
-    if (!showTriangulation) return null;
-    return buildKeyboardNavigationStyle(
-      triangulationColor
-    );
-  }, [triangulationColor, showTriangulation]);
-  const keyMapping = useMemo(() => {
-    if (columns == null || voronoi == null || map == null) return null;
-    const projection = (d) => {
-      const pt = map.project(d);
-      return [pt.x, pt.y];
-    };
-    const currentIndex = columns.findIndex(
-      (d) => d.properties.col_id == col_id
-    );
-    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];
-    return buildKeyMapping(
-      neighbors,
-      voronoi.centroids,
-      currentIndex,
-      projection
-    );
-  }, [col_id, columns, voronoi, map]);
-  const onKeyDown = useCallback(
-    (event) => {
-      if (keyMapping == null) return;
-      const nextColumnIx = keyMapping[event.which];
-      if (nextColumnIx == null) return;
-      event.preventDefault();
-      event.stopPropagation();
-      selectColumn(columns[nextColumnIx].id);
-      return false;
-    },
-    [keyMapping, selectColumn]
-  );
-  useEffect(() => {
-    if (map == null) return;
-    const canvas = map.getCanvas();
-    canvas.addEventListener("keydown", onKeyDown);
-    return () => {
-      canvas.removeEventListener("keydown", onKeyDown);
-    };
-  }, [map, onKeyDown]);
-  useMapStyleOperator(
-    (map2) => {
-      if (voronoi == null || !showTriangulation) return;
-      const { features } = voronoi.tri.links();
-      setGeoJSON(map2, "column-links", {
-        type: "FeatureCollection",
-        features
-      });
-    },
-    [voronoi, showTriangulation]
-  );
-  return null;
-}
-function buildKeyboardNavigationStyle(color = "purple") {
-  return {
-    sources: {
-      "column-links": buildGeoJSONSource()
-      //neighbors: buildGeoJSONSource(),
-    },
-    layers: [
-      {
-        id: "column-links",
-        type: "line",
-        source: "column-links",
-        paint: {
-          "line-color": color,
-          "line-width": 1.5
-        }
-      },
-      {
-        id: "column-centers",
-        type: "circle",
-        source: "column-links",
-        paint: {
-          "circle-radius": 2,
-          "circle-color": color
-        }
-      }
-    ]
-  };
-}
-export {
-  ColumnKeyboardNavigation,
-  buildKeyboardNavigationStyle
-};
-//# sourceMappingURL=keyboard-navigation.js.map

package/dist/maps/column-navigation/mapbox/keyboard-navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"keyboard-navigation.js","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport {\n  useMapRef,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\nimport { StyleSpecification } from \"mapbox-gl\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n  triangulationColor?: string;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false, triangulationColor } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  // Set up overlay style for triangulation\n  useOverlayStyle(() => {\n    if (!showTriangulation) return null;\n    return buildKeyboardNavigationStyle(\n      triangulationColor,\n    ) as Partial<StyleSpecification>;\n  }, [triangulationColor, showTriangulation]);\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  } as Partial<StyleSpecification>;\n}\n"],"names":["map"],"mappings":";;;;;AAmBO,SAAS,yBAAyB,OAAyB;AAEhE,QAAM,EAAE,oBAAoB,OAAO,mBAAA,IAAuB;AAC1D,QAAM,UAAU,yBAAyB,CAAC,UAAU,MAAM,OAAO;AACjE,QAAM,SAAS,yBAAyB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,eAAe,yBAAyB,CAAC,UAAU,MAAM,YAAY;AAE3E,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,WAAW,QAAQ,UAAU,EAAG,QAAO;AAC5C,WAAO,mBAAmB,OAAO;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAAS,UAAA;AACf,QAAM,MAAM,OAAO;AAGnB,kBAAgB,MAAM;AACpB,QAAI,CAAC,kBAAmB,QAAO;AAC/B,WAAO;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,oBAAoB,iBAAiB,CAAC;AAE1C,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,WAAW,QAAQ,WAAW,QAAQ,OAAO,KAAM,QAAO;AAE9D,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,KAAK,IAAI,QAAQ,CAAC;AACxB,aAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACpB;AAEA,UAAM,eAAe,QAAQ;AAAA,MAC3B,CAAC,MAAM,EAAE,WAAW,UAAU;AAAA,IAAA;AAGhC,UAAM,YAAY,QAAQ,IAAI,SAAS,UAAU,YAAY;AAC7D,WAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,SAAS,GAAG,CAAC;AAElC,QAAM,YAAY;AAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,cAAc,KAAM;AACxB,YAAM,eAAe,WAAW,MAAM,KAAK;AAC3C,UAAI,gBAAgB,KAAM;AAC1B,YAAM,eAAA;AACN,YAAM,gBAAA;AAEN,mBAAa,QAAQ,YAAY,EAAE,EAAE;AACrC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3B,YAAU,MAAM;AACd,QAAI,OAAO,KAAM;AACjB,UAAM,SAAS,IAAI,UAAA;AACnB,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB;AAAA,IACE,CAACA,SAAQ;AACP,UAAI,WAAW,QAAQ,CAAC,kBAAmB;AAC3C,YAAM,EAAE,SAAA,IAAa,QAAQ,IAAI,MAAA;AAEjC,iBAAWA,MAAK,gBAAgB;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAM7B,SAAO;AACT;AAEO,SAAS,6BAA6B,QAAgB,UAAU;AACrE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,gBAAgB,mBAAA;AAAA;AAAA,IAAmB;AAAA,IAGrC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/maps/column-navigation/mapbox/state.cjs

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const zustand = require("zustand");
-const React = require("react");
-const h = require("@macrostrat/hyper");
-const dataProvider = require("@macrostrat/data-provider");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h);
-const NavigationStoreContext = React.createContext(
-  null
-);
-function ColumnNavigationProvider({
-  children,
-  columns,
-  columnIDs,
-  selectedColumn,
-  projectID,
-  inProcess,
-  onSelectColumn,
-  onHoverColumn
-}) {
-  dataProvider.useMacrostratStore((s) => s.getColumns);
-  const [store] = React.useState(() => {
-    return zustand.create((set, get) => {
-      return {
-        columns: null,
-        selectedColumn: null,
-        hoveredColumn: null,
-        selectColumn(columnID) {
-          set({ selectedColumn: columnID, hoveredColumn: null });
-          const { columns: columns2 } = get();
-          const column = columns2?.find((d) => d.id == columnID);
-          onSelectColumn?.(columnID, column);
-        },
-        setHoveredColumn(columnID) {
-          set({ hoveredColumn: columnID });
-          const { columns: columns2 } = get();
-          const column = columns2?.find((d) => d.id == columnID);
-          onHoverColumn?.(columnID, column);
-        }
-      };
-    });
-  });
-  let _columns = columns ?? dataProvider.useMacrostratColumns(projectID, inProcess);
-  if (columnIDs?.length > 0) {
-    _columns = React.useMemo(() => {
-      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));
-    }, [columnIDs, _columns]);
-  }
-  React.useEffect(() => {
-    if (_columns?.length > 0) {
-      store.setState({ columns: _columns, selectedColumn });
-    }
-  }, [_columns]);
-  React.useEffect(() => {
-    const { selectColumn, selectedColumn: _internalSelectedColumn } = store.getState();
-    if (selectedColumn == _internalSelectedColumn) {
-      return;
-    }
-    selectColumn(selectedColumn);
-  }, [selectedColumn]);
-  return h__default.default(NavigationStoreContext.Provider, { value: store }, children);
-}
-function useColumnNavigationStore(selector) {
-  const storeApi = React.useContext(NavigationStoreContext);
-  if (storeApi == null) {
-    throw new Error("Missing ColumnNavigationProvider");
-  }
-  return zustand.useStore(storeApi, selector);
-}
-exports.ColumnNavigationProvider = ColumnNavigationProvider;
-exports.useColumnNavigationStore = useColumnNavigationStore;
-//# sourceMappingURL=state.cjs.map

package/dist/maps/column-navigation/mapbox/state.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.cjs","sources":["../../../../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  useMemo,\n} from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport {\n  useMacrostratColumns,\n  useMacrostratStore,\n} from \"@macrostrat/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  columnIDs?: number[] | 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  columnIDs,\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  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);\n\n  // filter columns if specified\n  if (columnIDs?.length > 0) {\n    _columns = useMemo(() => {\n      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));\n    }, [columnIDs, _columns]);\n  }\n\n  useEffect(() => {\n    if (_columns?.length > 0) {\n      store.setState({ columns: _columns, selectedColumn });\n    }\n  }, [_columns]);\n  // Update selected column 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    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":["createContext","useMacrostratStore","useState","create","columns","useMacrostratColumns","useMemo","useEffect","h","useContext","useStore"],"mappings":";;;;;;;;AAoCA,MAAM,yBAAyBA,MAAAA;AAAAA,EAC7B;AACF;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AACPC,kCAAmB,CAAC,MAAM,EAAE,UAAU;AAEzD,QAAM,CAAC,KAAK,IAAIC,MAAAA,SAAS,MAAM;AAC7B,WAAOC,QAAAA,OAAwB,CAAC,KAAK,QAAyB;AAC5D,aAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa,UAAyB;AACpC,cAAI,EAAE,gBAAgB,UAAU,eAAe,MAAM;AACrD,gBAAM,EAAE,SAAAC,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,2BAAiB,UAAU,MAAM;AAAA,QACnC;AAAA,QACA,iBAAiB,UAAyB;AACxC,cAAI,EAAE,eAAe,UAAU;AAC/B,gBAAM,EAAE,SAAAA,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,0BAAgB,UAAU,MAAM;AAAA,QAClC;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH,CAAC;AASD,MAAI,WAAW,WAAWC,kCAAqB,WAAW,SAAS;AAGnE,MAAI,WAAW,SAAS,GAAG;AACzB,eAAWC,MAAAA,QAAQ,MAAM;AACvB,aAAO,UAAU,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,IACxE,GAAG,CAAC,WAAW,QAAQ,CAAC;AAAA,EAC1B;AAEAC,QAAAA,UAAU,MAAM;AACd,QAAI,UAAU,SAAS,GAAG;AACxB,YAAM,SAAS,EAAE,SAAS,UAAU,gBAAgB;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAIbA,QAAAA,UAAU,MAAM;AACd,UAAM,EAAE,cAAc,gBAAgB,wBAAA,IACpC,MAAM,SAAA;AACR,QAAI,kBAAkB,yBAAyB;AAC7C;AAAA,IACF;AACA,iBAAa,cAAc;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAOC,WAAAA,QAAE,uBAAuB,UAAU,EAAE,OAAO,MAAA,GAAS,QAAQ;AACtE;AAEO,SAAS,yBACd,UACA;AACA,QAAM,WAAWC,MAAAA,WAAW,sBAAsB;AAClD,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,SAAOC,QAAAA,SAAS,UAAU,QAAQ;AACpC;;;"}

package/dist/maps/column-navigation/mapbox/state.d.ts

@@ -1,23 +0,0 @@
-import { StoreApi } from 'zustand';
-import { ColumnGeoJSONRecordWithID } from '@macrostrat/api-types';
-import { ReactNode } from 'react';
-export interface NavigationStore {
-    columns: ColumnGeoJSONRecordWithID[];
-    selectedColumn: number | null;
-    hoveredColumn: number | null;
-    selectColumn: (columnID: number | null) => void;
-    setHoveredColumn: (columnID: number | null) => void;
-}
-export interface NavigationProviderProps {
-    projectID?: number;
-    inProcess?: boolean;
-    selectedColumn?: number | null;
-    hoveredColumn?: number | null;
-    columns?: ColumnGeoJSONRecordWithID[] | null;
-    columnIDs?: number[] | null;
-    children: ReactNode;
-    onSelectColumn?: (col_id: number | null, column: any) => void;
-    onHoverColumn?: (col_id: number | null, column: any) => void;
-}
-export declare function ColumnNavigationProvider({ children, columns, columnIDs, selectedColumn, projectID, inProcess, onSelectColumn, onHoverColumn, }: NavigationProviderProps): import('react').FunctionComponentElement<import('react').ProviderProps<StoreApi<NavigationStore> | null>>;
-export declare function useColumnNavigationStore(selector: (state: NavigationStore) => any): any;

package/dist/maps/column-navigation/mapbox/state.js

@@ -1,71 +0,0 @@
-import { create, useStore } from "zustand";
-import { useState, useMemo, useEffect, createContext, useContext } from "react";
-import h from "@macrostrat/hyper";
-import { useMacrostratStore, useMacrostratColumns } from "@macrostrat/data-provider";
-const NavigationStoreContext = createContext(
-  null
-);
-function ColumnNavigationProvider({
-  children,
-  columns,
-  columnIDs,
-  selectedColumn,
-  projectID,
-  inProcess,
-  onSelectColumn,
-  onHoverColumn
-}) {
-  useMacrostratStore((s) => s.getColumns);
-  const [store] = useState(() => {
-    return create((set, get) => {
-      return {
-        columns: null,
-        selectedColumn: null,
-        hoveredColumn: null,
-        selectColumn(columnID) {
-          set({ selectedColumn: columnID, hoveredColumn: null });
-          const { columns: columns2 } = get();
-          const column = columns2?.find((d) => d.id == columnID);
-          onSelectColumn?.(columnID, column);
-        },
-        setHoveredColumn(columnID) {
-          set({ hoveredColumn: columnID });
-          const { columns: columns2 } = get();
-          const column = columns2?.find((d) => d.id == columnID);
-          onHoverColumn?.(columnID, column);
-        }
-      };
-    });
-  });
-  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);
-  if (columnIDs?.length > 0) {
-    _columns = useMemo(() => {
-      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));
-    }, [columnIDs, _columns]);
-  }
-  useEffect(() => {
-    if (_columns?.length > 0) {
-      store.setState({ columns: _columns, selectedColumn });
-    }
-  }, [_columns]);
-  useEffect(() => {
-    const { selectColumn, selectedColumn: _internalSelectedColumn } = store.getState();
-    if (selectedColumn == _internalSelectedColumn) {
-      return;
-    }
-    selectColumn(selectedColumn);
-  }, [selectedColumn]);
-  return h(NavigationStoreContext.Provider, { value: store }, children);
-}
-function useColumnNavigationStore(selector) {
-  const storeApi = useContext(NavigationStoreContext);
-  if (storeApi == null) {
-    throw new Error("Missing ColumnNavigationProvider");
-  }
-  return useStore(storeApi, selector);
-}
-export {
-  ColumnNavigationProvider,
-  useColumnNavigationStore
-};
-//# sourceMappingURL=state.js.map