@macrostrat/column-views 3.9.0 → 3.10.0

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>;
-}

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

@@ -1,119 +0,0 @@
-import { create, StoreApi, useStore } from "zustand";
-import type { ColumnGeoJSONRecordWithID } from "@macrostrat/api-types";
-import {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-  useEffect,
-  useMemo,
-} from "react";
-import h from "@macrostrat/hyper";
-import {
-  useMacrostratColumns,
-  useMacrostratStore,
-} from "@macrostrat/data-provider";
-
-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;
-}
-
-const NavigationStoreContext = createContext<StoreApi<NavigationStore> | null>(
-  null,
-);
-
-export function ColumnNavigationProvider({
-  children,
-  columns,
-  columnIDs,
-  selectedColumn,
-  projectID,
-  inProcess,
-  onSelectColumn,
-  onHoverColumn,
-}: NavigationProviderProps) {
-  const getColumns = useMacrostratStore((s) => s.getColumns);
-
-  const [store] = useState(() => {
-    return create<NavigationStore>((set, get): NavigationStore => {
-      return {
-        columns: null,
-        selectedColumn: null,
-        hoveredColumn: null,
-        selectColumn(columnID: number | null) {
-          set({ selectedColumn: columnID, hoveredColumn: null });
-          const { columns } = get();
-          const column = columns?.find((d) => d.id == columnID);
-          onSelectColumn?.(columnID, column);
-        },
-        setHoveredColumn(columnID: number | null) {
-          set({ hoveredColumn: columnID });
-          const { columns } = get();
-          const column = columns?.find((d) => d.id == columnID);
-          onHoverColumn?.(columnID, column);
-        },
-      };
-    });
-  });
-
-  // Set up the store
-  /** TODO: unify handling of columns between parts of application */
-  // useAsyncEffect(async () => {
-  //   let _columns = columns ?? (await getColumns(projectID, inProcess));
-  //   store.setState({ columns: _columns, selectedColumn });
-  // }, [projectID, inProcess, columns, getColumns]);
-
-  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);
-
-  // filter columns if specified
-  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]);
-  // Update selected column if it is changed externally
-
-  // Kind of an awkward way to do this but we need to allow the selector to run
-  useEffect(() => {
-    const { selectColumn, selectedColumn: _internalSelectedColumn } =
-      store.getState();
-    if (selectedColumn == _internalSelectedColumn) {
-      return;
-    }
-    selectColumn(selectedColumn);
-  }, [selectedColumn]);
-
-  return h(NavigationStoreContext.Provider, { value: store }, children);
-}
-
-export function useColumnNavigationStore(
-  selector: (state: NavigationStore) => any,
-) {
-  const storeApi = useContext(NavigationStoreContext);
-  if (storeApi == null) {
-    throw new Error("Missing ColumnNavigationProvider");
-  }
-  return useStore(storeApi, selector);
-}

package/src/maps/column-navigation/svg/animated.ts

@@ -1,78 +0,0 @@
-import { useState } from "react";
-import h from "@macrostrat/hyper";
-import { Globe } from "@macrostrat/svg-map-components";
-import { Button } from "@blueprintjs/core";
-import { geoCentroid } from "d3-geo";
-import { LandLayer } from "@macrostrat/svg-map-components";
-import { Columns, CurrentColumn } from "./layers";
-import classNames from "classnames";
-import { useSpring, animated } from "react-spring";
-
-const AnimatedGlobe = animated(Globe);
-
-const MapViewFrame = (props) => {
-  const [expanded, setExpanded] = useState(false);
-  const className = classNames({ expanded }, "context-map");
-  const { children, center, margin = 10 } = props;
-  const baseSize = 250;
-  const sz = expanded ? 450 : baseSize;
-
-  let scale = sz / 2 - margin;
-  if (expanded) {
-    scale *= 3;
-  }
-
-  const targetProps = {
-    width: sz,
-    height: sz,
-    scale,
-  };
-
-  const animationProps = useSpring(targetProps);
-
-  return h(
-    "div.map-placeholder",
-    { style: { width: baseSize, height: baseSize } },
-    [
-      h(animated.div, { className, style: animationProps }, [
-        h(
-          AnimatedGlobe,
-          {
-            ...targetProps,
-            margin,
-            center,
-            allowDrag: expanded,
-            allowZoom: false,
-            keepNorthUp: true,
-            onClick() {
-              setExpanded(true);
-            },
-          },
-          [h(LandLayer), children],
-        ),
-        h.if(expanded)(Button, {
-          className: "close-button",
-          icon: "cross",
-          minimal: true,
-          onClick() {
-            setExpanded(false);
-          },
-          intent: "danger",
-        }),
-      ]),
-    ],
-  );
-};
-
-export const AnimatedMapView = (props) => {
-  const { currentColumn, setCurrentColumn, children, ...rest } = props;
-  const center = geoCentroid(currentColumn);
-
-  return h(MapViewFrame, { center, ...rest }, [
-    h(Columns, { onClick: setCurrentColumn, ...rest }),
-    children,
-    h.if(currentColumn != null)(CurrentColumn, {
-      feature: currentColumn,
-    }),
-  ]);
-};

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

@@ -1,46 +0,0 @@
-import h from "@macrostrat/hyper";
-
-import { Meta } from "@storybook/react-vite";
-import { ColumnNavigationSVGMap, ColumnNavigationSVGMapProps } from ".";
-import { MacrostratDataProvider } from "@macrostrat/data-provider";
-import { useState } from "react";
-
-interface ColumnIndexMapProps extends ColumnNavigationSVGMapProps {
-  col_id: number;
-}
-
-function BasicColumnNavigationSVGMap(props: ColumnIndexMapProps) {
-  return h(
-    MacrostratDataProvider,
-    h(ColumnNavigationSVGMap, { style: { width: 500, height: 500 }, ...props }),
-  );
-}
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: "Column views/Maps/Column navigation (SVG)",
-  component: BasicColumnNavigationSVGMap,
-} as Meta<typeof ColumnNavigationSVGMap>;
-
-export const StaticColumnView = {
-  args: {
-    center: [-100, 38],
-  },
-};
-
-export function Interactive() {
-  const [currentColumn, setCurrentColumn] = useState(null);
-  return h(BasicColumnNavigationSVGMap, {
-    currentColumn,
-    setCurrentColumn,
-  });
-}
-
-export function ShowingTriangulation() {
-  const [currentColumn, setCurrentColumn] = useState(null);
-  return h(BasicColumnNavigationSVGMap, {
-    currentColumn,
-    setCurrentColumn,
-    showDebugLayers: true,
-  });
-}

package/src/maps/column-navigation/svg/data-fetcher.ts

@@ -1,34 +0,0 @@
-import {
-  ColumnStatusCode,
-  fetchAllColumns,
-  useMacrostratFetch,
-} from "@macrostrat/data-provider";
-import { useAsyncMemo } from "@macrostrat/ui-components";
-
-export function useColumnFeatures({
-  status_code,
-  project_id,
-  format = "geojson",
-}: {
-  apiRoute?: string;
-  status_code?: string;
-  project_id?: number;
-  format?: "geojson" | "topojson" | "geojson_bare";
-}) {
-  /** Legacy fetcher for column features */
-  const fetch = useMacrostratFetch();
-
-  let statusCode: ColumnStatusCode[] = ["active"];
-  if (status_code == "in process") {
-    statusCode.push("in process");
-  }
-
-  return useAsyncMemo(async () => {
-    return await fetchAllColumns({
-      projectID: project_id,
-      statusCode: statusCode,
-      format,
-      fetch,
-    });
-  }, [project_id, status_code, format]);
-}