@macrostrat/column-views 1.0.2 → 2.0.0

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

@@ -0,0 +1,219 @@
+import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import h from "@macrostrat/hyper";
+import { FeatureCollection } from "geojson";
+import { ReactNode, useMemo, useRef } from "react";
+import { buildColumnsStyle, InsetMapProps } from "../../_shared";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+
+import {
+  ColumnNavigationProvider,
+  NavigationProviderProps,
+  useColumnNavigationStore,
+} from "./state";
+import { InsetMap } from "../../_shared";
+import { geoCentroid } from "d3-geo";
+import {
+  ColumnKeyboardNavigation,
+  buildKeyboardNavigationStyle,
+} from "./keyboard-navigation";
+
+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;
+  triangulationColor?: string;
+  keyboardNavigation?: boolean;
+}
+
+export function ColumnNavigationMap(
+  props: ColumnNavigationMapProps & NavigationProviderProps
+) {
+  const {
+    columns,
+    onSelectColumn,
+    onHoverColumn,
+    selectedColumn,
+    hoveredColumn,
+    projectID,
+    inProcess,
+    ...rest
+  } = props;
+
+  return h(
+    ColumnNavigationProvider,
+    {
+      columns,
+      onSelectColumn,
+      onHoverColumn,
+      selectedColumn,
+      hoveredColumn,
+      projectID,
+      inProcess,
+    },
+    h(_ColumnNavigationMap, rest)
+  );
+}
+
+function _ColumnNavigationMap(props: ColumnNavigationMapProps) {
+  const {
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation = true,
+    ...rest
+  } = props;
+
+  const overlayStyles = useMemo(() => {
+    let styles: any[] = [buildColumnsStyle(columnColor)];
+    if (showTriangulation) {
+      styles.push(buildKeyboardNavigationStyle(triangulationColor));
+    }
+    return styles;
+  }, [columnColor, showTriangulation, triangulationColor]);
+
+  return h(
+    InsetMap,
+    {
+      ...rest,
+      boxZoom: false,
+      dragRotate: false,
+      overlayStyles,
+    },
+    [
+      h(ColumnsLayer),
+      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
+      children,
+    ]
+  );
+}
+
+function ColumnsLayer({ enabled = true }) {
+  const columns = useColumnNavigationStore((state) => state.columns);
+  const selectedColumn = useColumnNavigationStore(
+    (state) => state.selectedColumn
+  );
+  const hoveredColumn = useColumnNavigationStore(
+    (state) => state.hoveredColumn
+  );
+  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
+  const setHoveredColumn = useColumnNavigationStore(
+    (state) => state.setHoveredColumn
+  );
+
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data: FeatureCollection = {
+        type: "FeatureCollection",
+        features: columns,
+      };
+
+      setGeoJSON(map, "columns", data);
+
+      const mouseMove = (event) => {
+        if (event.features.length == 0) return;
+        const hoveredFeature = event.features[0];
+        setHoveredColumn(hoveredFeature.id);
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const mouseLeave = () => {
+        setHoveredColumn(null);
+        map.getCanvas().style.cursor = "";
+      };
+
+      const clickHandler = (event) => {
+        if (event.features.length == 0) return;
+        const selectedColumn = event.features[0];
+        const id = selectedColumn.id;
+        selectColumn(id);
+      };
+
+      // Setup hover styles on map
+      const layers = ["columns-points", "columns-fill"];
+      map.on("mousemove", layers, mouseMove);
+      map.on("mouseleave", layers, mouseLeave);
+      map.on("click", layers, clickHandler);
+
+      return () => {
+        map.off("mouseenter", layers, mouseMove);
+        map.off("mouseleave", layers, mouseLeave);
+        map.off("click", layers, clickHandler);
+      };
+    },
+    [columns, enabled]
+  );
+
+  const hoveredColumnRef = useRef(null);
+  useMapStyleOperator(
+    (map) => {
+      const prevHoveredColumn = hoveredColumnRef.current;
+      if (hoveredColumn == prevHoveredColumn) return;
+      if (prevHoveredColumn != null) {
+        // Deselect previous column
+        map.setFeatureState(
+          { source: "columns", id: prevHoveredColumn },
+          { hover: false }
+        );
+      }
+      hoveredColumnRef.current = hoveredColumn;
+      // Select the current column
+      map.setFeatureState(
+        { source: "columns", id: hoveredColumn },
+        { hover: true }
+      );
+    },
+    [hoveredColumn, columns]
+  );
+
+  /** Set feature state for selected columns */
+  const selectedColumnRef = useRef(null);
+  const initialRenderRef = useRef(true);
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) return;
+      const prevSelectedColumn = selectedColumnRef.current;
+      if (selectedColumn == prevSelectedColumn) return;
+      if (prevSelectedColumn != null) {
+        // Deselect previous column
+        map.setFeatureState(
+          { source: "columns", id: prevSelectedColumn },
+          { selected: false }
+        );
+      }
+
+      selectedColumnRef.current = selectedColumn;
+
+      // Select the current column
+      map.setFeatureState(
+        { source: "columns", id: selectedColumn },
+        { selected: true }
+      );
+
+      // Center the selected column
+      const columnGeometry = columns.find(
+        (d) => d.id == selectedColumn
+      )?.geometry;
+      if (columnGeometry == null) return;
+      const center = geoCentroid(columnGeometry);
+
+      const isInitialRender = initialRenderRef.current;
+      map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });
+      if (isInitialRender) {
+        initialRenderRef.current = false;
+      }
+    },
+    [selectedColumn, columns]
+  );
+
+  return null;
+}

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

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
+import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useColumnNavigationStore } from "./state";
+import {
+  buildTriangulation,
+  buildKeyMapping,
+} from "../utils/keyboard-navigation";
+
+interface KeyboardNavProps {
+  showTriangulation: boolean;
+}
+
+export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
+  /** Keyboard navigation of columns using a Delaunay triangulation */
+  const { showTriangulation = false } = 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;
+
+  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,
+        },
+      },
+    ],
+  };
+}

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

@@ -0,0 +1,109 @@
+import { create, StoreApi, useStore } from "zustand";
+import type { ColumnGeoJSONRecordWithID } from "@macrostrat/api-types";
+import {
+  createContext,
+  useState,
+  useContext,
+  ReactNode,
+  useEffect,
+} from "react";
+import h from "@macrostrat/hyper";
+import {
+  useMacrostratColumns,
+  useMacrostratStore,
+} from "../../../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;
+  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,
+  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]);
+
+  const _columns = columns ?? useMacrostratColumns(projectID, inProcess);
+  useEffect(() => {
+    if (_columns != null) {
+      store.setState({ columns: _columns, selectedColumn });
+    }
+  }, [_columns]);
+  // Update selected colun if it is changed externally
+
+  // Kind of an awkward way to do this but we need to allow the selector to run
+  useEffect(() => {
+    console.log("Selecting column", selectedColumn);
+    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/column-navigation-svg-map.stories.ts

@@ -0,0 +1,46 @@
+import h from "@macrostrat/hyper";
+
+import { Meta } from "@storybook/react";
+import { ColumnNavigationSVGMap, ColumnNavigationSVGMapProps } from ".";
+import { MacrostratDataProvider } from "../../../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/{map → maps/column-navigation/svg}/index.ts

@@ -4,8 +4,9 @@ import { Globe, LandLayer } from "@macrostrat/svg-map-components";
 import { geoCentroid } from "d3-geo";
 import { useElementSize } from "@macrostrat/ui-components";
 import { Columns, CurrentColumn } from "./layers";
+import type { LngLatLike } from "mapbox-gl";
 
-function ResizableMapFrame(props) {
+export function ResizableMapFrame(props) {
   const { center, children, style, margin, className, allowZoom, ...rest } =
     props;
   let { scale } = props;
@@ -45,7 +46,10 @@ function ResizableMapFrame(props) {
   ]);
 }
 
-const ColumnNavigatorMap = (props) => {
+type ColumnNavigationSVGMapProps = any;
+export type { ColumnNavigationSVGMapProps };
+
+export function ColumnNavigationSVGMap(props) {
   const {
     currentColumn,
     setCurrentColumn,
@@ -55,19 +59,28 @@ const ColumnNavigatorMap = (props) => {
     scale,
     className,
     showInProcessColumns = false,
+    showDebugLayers = false,
+    center,
     ...rest
   } = props;
 
-  const columnCenter = geoCentroid(currentColumn);
+  let _center: LngLatLike | null = center ?? [-100, 38];
+  // Override center if currentColumn is set
+  if (currentColumn != null) {
+    _center = geoCentroid(currentColumn);
+  }
+
+  console.log(currentColumn);
 
   return h(
     ResizableMapFrame,
-    { center: columnCenter, style, margin, scale, className },
+    { center: _center, style, margin, scale, className },
     [
       children,
       h(Columns, {
         onChange: setCurrentColumn,
         col_id: currentColumn?.properties.col_id,
+        showDebugLayers,
         ...rest,
       }),
       h.if(showInProcessColumns)(Columns, {
@@ -80,7 +93,6 @@ const ColumnNavigatorMap = (props) => {
       h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),
     ]
   );
-};
+}
 
 export * from "./layers";
-export { ColumnNavigatorMap, ResizableMapFrame };