@macrostrat/column-views 3.9.0 → 3.11.0

package/src/maps/column-navigation/mapbox/column-navigation-map.stories.ts

@@ -1,278 +0,0 @@
-import h from "@macrostrat/hyper";
-
-const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
-
-import { Meta } from "@storybook/react-vite";
-import { ColumnNavigationMap } from ".";
-import { useState } from "react";
-
-function ColumnNavigationMapExt(props) {
-  return h(ColumnNavigationMap, {
-    style: { width: "800px", height: "600px" },
-    padding: 100,
-    accessToken: mapboxToken,
-    ...props,
-  });
-}
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: "Column views/Maps/Column navigation",
-  component: ColumnNavigationMapExt,
-  description: "Cross section creation map",
-} as Meta<typeof ColumnNavigationMap>;
-
-export const ColumnNavigation = {
-  args: {
-    showTriangulation: false,
-  },
-};
-
-export const ColumnNavigationFilterableByIds = {
-  args: {
-    showTriangulation: false,
-    columnIDs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-  },
-};
-
-const colData = [
-  {
-    id: 1,
-    type: "Feature",
-    geometry: {
-      type: "Polygon",
-      coordinates: [
-        [
-          [-86.9992, 34.6946],
-          [-86.9041, 35.4015],
-          [-86.5971, 35.4513],
-          [-86.1652, 35.0947],
-          [-86.1746, 34.7447],
-          [-86.5036, 34.4262],
-          [-86.6318, 34.4244],
-          [-86.9992, 34.6946],
-        ],
-      ],
-    },
-    properties: {
-      col_id: 2,
-      col_name: "Madison Co, Alabama",
-      col_group: "Southern Appalachians",
-      col_group_id: 17,
-      group_col_id: "1.00",
-      lat: "34.85300",
-      lng: "-86.56200",
-      col_area: "6345.4",
-      project_id: 1,
-      col_type: "column",
-      refs: [1],
-      max_thick: 2559,
-      max_min_thick: 2411,
-      min_min_thick: 529,
-      b_age: 1550,
-      t_age: 322.15,
-      b_int_name: "Calymmian",
-      t_int_name: "Morrowan",
-      pbdb_collections: 3,
-      lith: [
-        {
-          name: "mudstone",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.0041,
-          lith_id: 7,
-        },
-        {
-          name: "shale",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.2598,
-          lith_id: 8,
-        },
-        {
-          name: "siltstone",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.0107,
-          lith_id: 9,
-        },
-        {
-          name: "sandstone",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.0322,
-          lith_id: 10,
-        },
-        {
-          name: "limestone",
-          type: "carbonate",
-          class: "sedimentary",
-          prop: 0.4093,
-          lith_id: 30,
-        },
-        {
-          name: "dolomite",
-          type: "carbonate",
-          class: "sedimentary",
-          prop: 0.1132,
-          lith_id: 31,
-        },
-        {
-          name: "coal",
-          type: "organic",
-          class: "sedimentary",
-          prop: 0.0057,
-          lith_id: 38,
-        },
-        {
-          name: "chert",
-          type: "chemical",
-          class: "sedimentary",
-          prop: 0.0674,
-          lith_id: 45,
-        },
-        {
-          name: "granite",
-          type: "plutonic",
-          class: "igneous",
-          prop: 0.0379,
-          lith_id: 53,
-        },
-        {
-          name: "rhyolite",
-          type: "volcanic",
-          class: "igneous",
-          prop: 0.0076,
-          lith_id: 64,
-        },
-        {
-          name: "ash",
-          type: "volcanic",
-          class: "igneous",
-          prop: 0.0107,
-          lith_id: 75,
-        },
-        {
-          name: "quartz arenite",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.0207,
-          lith_id: 169,
-        },
-        {
-          name: "sublitharenite",
-          type: "siliciclastic",
-          class: "sedimentary",
-          prop: 0.0207,
-          lith_id: 199,
-        },
-      ],
-      environ: [
-        {
-          name: "marine",
-          type: "",
-          class: "marine",
-          prop: 0.0476,
-          environ_id: 38,
-        },
-        {
-          name: "fluvial-deltaic indet.",
-          type: "fluvial",
-          class: "non-marine",
-          prop: 0.0476,
-          environ_id: 57,
-        },
-        {
-          name: "inferred marine",
-          type: "",
-          class: "marine",
-          prop: 0.9048,
-          environ_id: 93,
-        },
-      ],
-      econ: [],
-      t_units: 22,
-      t_sections: 6,
-    },
-  },
-];
-
-export const ColumnNavigationFilterableByGeojson = {
-  args: {
-    showTriangulation: false,
-    columns: colData,
-  },
-};
-
-export const nonStandardProjectInProcess = {
-  args: {
-    padding: 100,
-    projectID: 10,
-    inProcess: true,
-    showTriangulation: false,
-    mapPosition: {
-      camera: {
-        lng: -72,
-        lat: 44,
-        altitude: 600000,
-      },
-    },
-  },
-};
-
-export const DeepSea = {
-  args: {
-    padding: 100,
-    projectID: 4,
-    inProcess: true,
-    showTriangulation: false,
-    center: [0, 0],
-    zoom: 2,
-    mapPosition: null,
-  },
-};
-
-export const eODP = {
-  args: {
-    projectID: 3,
-    inProcess: true,
-  },
-};
-
-export const showTriangulation = {
-  description: "Show the triangulation used for keyboard navigation",
-  args: {
-    showTriangulation: true,
-    columnColor: "#1fff53",
-    triangulationColor: "#9a33bb",
-  },
-};
-
-export const onlyPhysicalBasemap = {
-  args: {
-    mapStyle: "mapbox://styles/mapbox/outdoors-v11",
-    showLabels: true,
-    showAdmin: false,
-    showRoads: false,
-  },
-};
-
-export function ControlledColumnNavigation() {
-  const [selectedColumn, setSelectedColumn] = useState(157);
-  const [hoveredColumn, setHoveredColumn] = useState(null);
-
-  return h("div.controlled-navigation", [
-    h(ColumnNavigationMapExt, {
-      selectedColumn,
-      hoveredColumn,
-      onSelectColumn: setSelectedColumn,
-      onHoverColumn: setHoveredColumn,
-    }),
-    h("div.column-info", [
-      h("h3", "Selected column"),
-      h("p", selectedColumn),
-      h("h3", "Hovered column"),
-      h("p", hoveredColumn),
-    ]),
-  ]);
-}

package/src/maps/column-navigation/mapbox/index.ts

@@ -1,276 +0,0 @@
-import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
-import h from "@macrostrat/hyper";
-import { ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
-
-import {
-  ColumnNavigationProvider,
-  NavigationProviderProps,
-  useColumnNavigationStore,
-} from "./state";
-import { InsetMap, type InsetMapProps } from "../../inset-map";
-import { geoCentroid } from "d3-geo";
-import { BaseColumnsLayer, SelectedColumnOverlay } from "../../layers";
-import { ColumnKeyboardNavigation } from "./keyboard-navigation";
-import type { ColumnFeature } from "../../layers";
-
-export interface ColumnNavigationMapProps extends InsetMapProps {
-  padding?: number;
-  children?: ReactNode;
-  accessToken?: string;
-  selectedColumn?: number;
-  hoveredColumn?: number;
-  onSelectColumn?: (colID: number | null) => void;
-  onHoverColumn?: (colID: number | null) => void;
-  showTriangulation?: boolean;
-  columnColor?: string;
-}
-
-export function ColumnNavigationMap(
-  props: ColumnNavigationMapProps & NavigationProviderProps,
-) {
-  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,
-    ],
-  );
-}
-
-interface ColumnLayerProps {
-  enabled?: boolean;
-  color?: string;
-}
-
-interface ColumnKeyboardNavigationProps {
-  triangulationColor?: string;
-  keyboardNavigation?: boolean;
-  showTriangulation?: boolean;
-}
-
-export function ColumnsNavigationLayer(
-  props: NavigationProviderProps &
-    ColumnLayerProps &
-    ColumnKeyboardNavigationProps,
-) {
-  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],
-  );
-
-  /** Convert features into column IDs to pass to the selection manager */
-  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 }),
-  ]);
-}
-
-export function ColumnSelectionManager({
-  selectedColumn,
-  onSelectColumn,
-  centerOnSelect = true,
-}: {
-  selectedColumn: ColumnFeature;
-  onSelectColumn: (column: ColumnFeature) => void;
-  centerOnSelect?: boolean;
-}) {
-  const onClick = useCallback(
-    (event) => {
-      if (event.features.length == 0) return;
-      const selectedColumn = event.features[0];
-      onSelectColumn(selectedColumn);
-    },
-    [onSelectColumn],
-  );
-
-  return h([
-    h.if(centerOnSelect)(SelectedColumnCenterer, {
-      selectedColumn,
-    }),
-    h(SelectedColumnOverlay, { selectedColumn }),
-    h(ClickInteraction, {
-      onClick,
-      layers: columnLayers,
-    }),
-  ]);
-}
-
-export function ColumnHoverInteraction({ onHover }) {
-  return h(HoverInteraction, { onHover, layers: columnLayers });
-}
-
-function ClickInteraction({ onClick, layers }) {
-  useMapStyleOperator(
-    (map) => {
-      // Setup hover styles on 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) => {
-    // Reset hover state for previously hovered features
-    for (const f of hoveredFeaturesRef.current) {
-      map.setFeatureState(
-        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
-        { hover: false },
-      );
-    }
-    // Set hover state for new features
-    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 = "";
-      };
-
-      // Setup hover styles on map
-      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,
-}: {
-  selectedColumn: ColumnFeature;
-  easeDuration?: number;
-}) {
-  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);
-  // Center the map on the selected column when it changes
-  useEffect(() => {
-    if (map == null) return;
-    const isInitialRender = initialRenderRef.current;
-    if (isInitialRender) initialRenderRef.current = false;
-    // If this is the first render of the map, jump to the location. Otherwise, ease to it.
-    if (columnCenter == null) return;
-    if (isInitialRender) {
-      map.setCenter(columnCenter);
-      initialRenderRef.current = false;
-    } else {
-      map.easeTo({ center: columnCenter }, { duration: easeDuration });
-    }
-  }, [mapRef.current, columnCenter]);
-
-  return null;
-}

package/src/maps/column-navigation/mapbox/keyboard-navigation.ts

@@ -1,133 +0,0 @@
-import { useCallback, useEffect, useMemo } from "react";
-import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
-import {
-  useMapRef,
-  useMapStyleOperator,
-  useOverlayStyle,
-} from "@macrostrat/mapbox-react";
-import { useColumnNavigationStore } from "./state";
-import {
-  buildTriangulation,
-  buildKeyMapping,
-} from "../utils/keyboard-navigation";
-import { StyleSpecification } from "mapbox-gl";
-
-interface KeyboardNavProps {
-  showTriangulation: boolean;
-  triangulationColor?: string;
-}
-
-export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
-  /** Keyboard navigation of columns using a Delaunay triangulation */
-  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;
-
-  // Set up overlay style for triangulation
-  useOverlayStyle(() => {
-    if (!showTriangulation) return null;
-    return buildKeyboardNavigationStyle(
-      triangulationColor,
-    ) as Partial<StyleSpecification>;
-  }, [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: KeyboardEvent) => {
-      if (keyMapping == null) return;
-      const nextColumnIx = keyMapping[event.which];
-      if (nextColumnIx == null) return;
-      event.preventDefault();
-      event.stopPropagation();
-      // @ts-ignore
-      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(
-    (map) => {
-      if (voronoi == null || !showTriangulation) return;
-      const { features } = voronoi.tri.links();
-
-      setGeoJSON(map, "column-links", {
-        type: "FeatureCollection",
-        features,
-      });
-    },
-    [voronoi, showTriangulation],
-  );
-
-  //if (neighbors == null) return null;
-  //const neighborFeatures = neighbors.map((d) => features[d]);
-
-  return null;
-}
-
-export function buildKeyboardNavigationStyle(color: string = "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,
-        },
-      },
-    ],
-  } as Partial<StyleSpecification>;
-}