@macrostrat/column-views 3.2.1 → 3.3.0

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

@@ -1,21 +1,17 @@
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMapRef, 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 { ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
 
 import {
   ColumnNavigationProvider,
   NavigationProviderProps,
   useColumnNavigationStore,
 } from "./state";
-import { InsetMap } from "../../_shared";
+import { InsetMap, type InsetMapProps } from "../../inset-map";
 import { geoCentroid } from "d3-geo";
-import {
-  ColumnKeyboardNavigation,
-  buildKeyboardNavigationStyle,
-} from "./keyboard-navigation";
+import { BaseColumnsLayer, SelectedColumnOverlay } from "../../layers";
+import { ColumnKeyboardNavigation } from "./keyboard-navigation";
+import type { ColumnFeature } from "../../layers";
 
 export interface ColumnNavigationMapProps extends InsetMapProps {
   padding?: number;
@@ -27,14 +23,18 @@ export interface ColumnNavigationMapProps extends InsetMapProps {
   onHoverColumn?: (colID: number | null) => void;
   showTriangulation?: boolean;
   columnColor?: string;
-  triangulationColor?: string;
-  keyboardNavigation?: boolean;
 }
 
 export function ColumnNavigationMap(
   props: ColumnNavigationMapProps & NavigationProviderProps,
 ) {
   const {
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation = true,
     columns,
     columnIDs,
     onSelectColumn,
@@ -42,182 +42,235 @@ export function ColumnNavigationMap(
     selectedColumn,
     hoveredColumn,
     projectID,
-    children,
     inProcess,
     ...rest
   } = props;
 
-  return h(
-    ColumnNavigationProvider,
-    {
-      columns,
-      columnIDs,
-      onSelectColumn,
-      onHoverColumn,
-      selectedColumn,
-      hoveredColumn,
-      projectID,
-      inProcess,
-    },
-    h(_ColumnNavigationMap, props),
-  );
-}
-
-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(ColumnsNavigationLayer, {
+        color: columnColor,
+        columns,
+        columnIDs,
+        onSelectColumn,
+        onHoverColumn,
+        selectedColumn,
+        hoveredColumn,
+        projectID,
+        inProcess,
+        keyboardNavigation,
+        showTriangulation,
+        triangulationColor,
+      }),
       children,
-      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
     ],
   );
 }
 
-function ColumnsLayer({ enabled = true }) {
+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 selectedColumn = useColumnNavigationStore(
+  const selectedColumnID = useColumnNavigationStore(
     (state) => state.selectedColumn,
   );
-  const hoveredColumn = useColumnNavigationStore(
-    (state) => state.hoveredColumn,
-  );
   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) => {
-      if (columns == null) {
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: columns,
+      // Setup hover styles on map
+      map.on("click", layers, onClick);
+      return () => {
+        map.off("click", layers, onClick);
       };
+    },
+    [layers, onClick],
+  );
+  return null;
+}
 
-      setGeoJSON(map, "columns", data);
+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;
-        const hoveredFeature = event.features[0];
-        setHoveredColumn(hoveredFeature.id);
+        onHover?.(event);
+        updateFeatureState(map, event.features);
         map.getCanvas().style.cursor = "pointer";
       };
-      const mouseLeave = () => {
-        setHoveredColumn(null);
+      const mouseLeave = (event) => {
+        onHover?.(event);
+        updateFeatureState(map, event.features ?? []);
         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],
+    [layers, onHover],
   );
+  return null;
+}
 
-  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],
-  );
+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]);
 
-  /** Set feature state for selected columns */
-  const selectedColumnRef = useRef(null);
+  const mapRef = useMapRef();
+  const map = mapRef.current;
   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],
-  );
+  // 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,19 +1,25 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
-import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
+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 } = 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);
@@ -26,6 +32,14 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
   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;
 
@@ -115,5 +129,5 @@ export function buildKeyboardNavigationStyle(color: string = "purple") {
         },
       },
     ],
-  };
+  } as Partial<StyleSpecification>;
 }

package/src/maps/index.ts

@@ -1,4 +1,4 @@
 export * from "./column-navigation";
 export * from "./column-correlation";
-export * from "./_shared";
-export * from "./units-overlay";
+export * from "./inset-map";
+export * from "./layers";

package/src/maps/layers/columns.ts

@@ -0,0 +1,210 @@
+import { useMapStyleOperator, useOverlayStyle } from "@macrostrat/mapbox-react";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import GeoJSON, { FeatureCollection } from "geojson";
+import { GeoJSONFeature } from "mapbox-gl";
+import { getCSSVariable } from "@macrostrat/color-utils";
+import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import { StyleFragment } from "@macrostrat/mapbox-react";
+
+export interface ColumnsStyleOptions {
+  color?: string | any[];
+  selectedColor?: string | any[];
+  opacity?: number | any[];
+  circleRadius?: number | any[];
+  lineOpacity?: number | any[];
+  lineWidth?: number | any[];
+  lineColor?: string | any[];
+}
+
+interface ColumnLayerOptions extends ColumnsStyleOptions {
+  enabled: boolean;
+  columns: FeatureCollection | GeoJSONFeature[];
+}
+
+export function BaseColumnsLayer({
+  enabled = true,
+  columns,
+  ...rest
+}: ColumnLayerOptions) {
+  useOverlayStyle(() => (enabled ? buildColumnsStyle(rest) : null), [enabled]);
+
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+
+      setGeoJSON(map, "columns", promoteToFeatureCollection(columns));
+    },
+    [columns, enabled],
+  );
+  return null;
+}
+
+function promoteToFeatureCollection(
+  data: FeatureCollection | GeoJSONFeature | GeoJSONFeature[] | null,
+): FeatureCollection | null {
+  if (data == null) return null;
+  if ("type" in data && data.type == "Feature") {
+    return {
+      type: "FeatureCollection",
+      features: [data],
+    };
+  }
+  if (
+    "type" in data &&
+    data.type == "FeatureCollection" &&
+    "features" in data
+  ) {
+    return data;
+  }
+  return {
+    type: "FeatureCollection",
+    features: data,
+  };
+}
+
+export function buildColumnsStyle(
+  opts: ColumnsStyleOptions = {},
+): StyleFragment {
+  const { color } = opts;
+  const columnBaseColor =
+    color ?? getCSSVariable("--text-subtle-color", "black");
+  let columnColor: any = columnBaseColor;
+  const columnSelectedColor =
+    opts.selectedColor ?? getCSSVariable("--selection-color", "purple");
+
+  const lineColor = opts.lineColor ?? columnBaseColor;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  // If color is in the feature state or geojson properties, use that as second choice
+  if (typeof columnColor === "string") {
+    columnColor = [
+      "coalesce",
+      ["feature-state", "color"],
+      ["get", "color"],
+      columnColor,
+    ];
+  }
+
+  const fillOpacity = opts.opacity ?? 0.1;
+
+  const lineOpacity = opts.lineOpacity ?? 0.5;
+  const lineWidth = opts.lineWidth ?? 2;
+
+  const circleRadius = opts.circleRadius ?? 4;
+
+  return {
+    sources: {
+      columns: buildGeoJSONSource(),
+    },
+    version: 8,
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": fillOpacity,
+        },
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": circleRadius,
+          "circle-color": columnColor,
+          "circle-opacity": fillOpacity,
+        },
+        filter: ["==", "$type", "Point"],
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": ["case", isHovered, columnSelectedColor, lineColor],
+          "line-width": lineWidth,
+          "line-opacity": ["case", isHovered, 1.0, lineOpacity],
+        },
+      },
+    ],
+  };
+}
+
+export type ColumnFeature = GeoJSON.Feature & { id: number };
+
+const selectedColumnSourceID = "selectedColumn";
+
+export function SelectedColumnOverlay({
+  selectedColumn,
+  ...styleOpts
+}: { selectedColumn: ColumnFeature | null } & SelectedColumnStyleOpts) {
+  useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);
+
+  useMapStyleOperator(
+    (map) => {
+      setGeoJSON(
+        map,
+        selectedColumnSourceID,
+        promoteToFeatureCollection(selectedColumn as GeoJSONFeature | null),
+      );
+    },
+    [selectedColumn],
+  );
+
+  return null;
+}
+
+interface SelectedColumnStyleOpts {
+  color?: string | any[];
+}
+
+function buildSelectedColumnStyle(
+  opts: SelectedColumnStyleOpts = {},
+): StyleFragment {
+  const columnSelectedColor: any =
+    opts.color ?? getCSSVariable("--selection-color", "purple");
+
+  return {
+    sources: {
+      selectedColumn: buildGeoJSONSource(),
+    },
+    version: 8,
+    layers: [
+      {
+        id: "selected-column-highlight",
+        type: "fill",
+        source: selectedColumnSourceID,
+        paint: {
+          "fill-color": columnSelectedColor,
+          "fill-opacity": 0.5,
+        },
+        filter: ["==", "$type", "Polygon"],
+      },
+      {
+        id: "selected-column-edge",
+        type: "line",
+        source: selectedColumnSourceID,
+        paint: {
+          "line-color": columnSelectedColor,
+          "line-width": 2,
+          "line-opacity": 1.0,
+        },
+        filter: ["==", "$type", "Polygon"],
+      },
+      {
+        id: "selected-column-point",
+        type: "circle",
+        source: selectedColumnSourceID,
+        paint: {
+          "circle-radius": 6,
+          "circle-color": columnSelectedColor,
+          "circle-opacity": 1.0,
+        },
+        filter: ["==", "$type", "Point"],
+      },
+    ],
+  };
+}

package/src/maps/layers/index.ts

@@ -0,0 +1,2 @@
+export * from "./columns";
+export * from "./units";