@macrostrat/column-views 3.9.0 → 3.11.0

package/src/maps/column-correlation/core.ts

@@ -1,342 +0,0 @@
-import {
-  useMapClickHandler,
-  useMapEaseTo,
-  useMapStyleOperator,
-  useOverlayStyle,
-} from "@macrostrat/mapbox-react";
-import { LngLatBounds, Style } from "mapbox-gl";
-import h from "@macrostrat/hyper";
-import { Feature, FeatureCollection } from "geojson";
-import { ReactNode, useMemo, useRef } from "react";
-import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
-
-import { useCorrelationMapStore } from "./state";
-import { InsetMap, type InsetMapProps } from "../inset-map";
-import { BaseColumnsLayer } from "../layers";
-import { buildCrossSectionLayers } from "@macrostrat/map-styles";
-
-export interface CorrelationMapProps extends InsetMapProps {
-  padding?: number;
-  children?: ReactNode;
-  accessToken?: string;
-  columnColor?: string;
-}
-
-export function ColumnCorrelationMap(props: CorrelationMapProps) {
-  const { padding = 50, children, columnColor, projectID, ...rest } = props;
-
-  return h(
-    InsetMap,
-    {
-      ...rest,
-      boxZoom: false,
-      dragRotate: false,
-    },
-    [
-      h(ColumnsLayer, { color: columnColor }),
-      h(SelectedColumnsLayer),
-      h(MapClickHandler),
-      h(ColumnInteractionHandler),
-      h(HoveredColumnHighlight),
-      h(ColumnZoomer, { padding }),
-      h(SectionLine, { padding }),
-      children,
-    ],
-  );
-}
-
-function ColumnZoomer({ padding }: { padding: number }) {
-  /** Frame a single column when `zoomColumn` is set (e.g. header click). */
-  const zoomColumn = useCorrelationMapStore((state) => state.zoomColumn);
-  const zoomNonce = useCorrelationMapStore((state) => state.zoomNonce);
-  const columns = useCorrelationMapStore((state) => state.columns);
-
-  const bounds = useMemo(() => {
-    if (zoomColumn == null || columns == null) return null;
-    const col = columns.find((c) => c.properties?.col_id === zoomColumn);
-    if (col?.geometry == null) return null;
-    const b = new LngLatBounds();
-    forEachCoordinate(col.geometry, (coord) => b.extend(coord as [number, number]));
-    return b.isEmpty() ? null : b;
-    // zoomNonce forces a fresh bounds object so repeat clicks re-frame
-  }, [zoomColumn, zoomNonce, columns]);
-
-  useMapEaseTo({ bounds, padding: padding * 2 });
-  return null;
-}
-
-function forEachCoordinate(geometry: any, fn: (coord: number[]) => void) {
-  const walk = (coords: any) => {
-    if (typeof coords[0] === "number") {
-      fn(coords);
-    } else {
-      for (const c of coords) walk(c);
-    }
-  };
-  if (geometry?.coordinates != null) walk(geometry.coordinates);
-}
-
-const columnLayers = ["columns-fill", "columns-points"];
-
-function MapClickHandler() {
-  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);
-
-  useMapClickHandler(
-    (e) => {
-      onClickMap(e, { type: "Point", coordinates: e.lngLat.toArray() });
-    },
-    [onClickMap],
-  );
-
-  return null;
-}
-
-function ColumnInteractionHandler() {
-  /** Per-column click (manual selection) and hover highlighting. */
-  const toggleColumn = useCorrelationMapStore((state) => state.toggleColumn);
-  const setHoveredColumn = useCorrelationMapStore(
-    (state) => state.setHoveredColumn,
-  );
-  const isManual = useCorrelationMapStore(
-    (state) => state.selectionMode === "manual",
-  );
-  const hoveredRef = useRef<number | string | null>(null);
-
-  // Click a column to toggle it in/out of the selection (manual mode only)
-  useMapStyleOperator(
-    (map) => {
-      if (!isManual) return;
-      const onClick = (e) => {
-        const colID = e.features?.[0]?.properties?.col_id;
-        if (colID != null) toggleColumn(colID);
-      };
-      map.on("click", columnLayers, onClick);
-      return () => map.off("click", columnLayers, onClick);
-    },
-    [isManual, toggleColumn],
-  );
-
-  // Hover highlighting (via the columns layer's `hover` feature-state)
-  useMapStyleOperator(
-    (map) => {
-      const clearHover = () => {
-        if (hoveredRef.current != null) {
-          map.setFeatureState(
-            { source: "columns", id: hoveredRef.current },
-            { hover: false },
-          );
-          hoveredRef.current = null;
-        }
-      };
-      const onMove = (e) => {
-        const f = e.features?.[0];
-        if (f == null) return;
-        if (hoveredRef.current !== f.id) {
-          clearHover();
-          map.setFeatureState({ source: "columns", id: f.id }, { hover: true });
-          hoveredRef.current = f.id;
-        }
-        setHoveredColumn(f.properties?.col_id ?? null);
-        map.getCanvas().style.cursor = "pointer";
-      };
-      const onLeave = () => {
-        clearHover();
-        setHoveredColumn(null);
-        map.getCanvas().style.cursor = "";
-      };
-      map.on("mousemove", columnLayers, onMove);
-      map.on("mouseleave", columnLayers, onLeave);
-      return () => {
-        map.off("mousemove", columnLayers, onMove);
-        map.off("mouseleave", columnLayers, onLeave);
-        clearHover();
-      };
-    },
-    [setHoveredColumn],
-  );
-
-  return null;
-}
-
-function HoveredColumnHighlight() {
-  /** Reflects the store's `hoveredColumn` on the map (e.g. when a column is
-   * hovered elsewhere in the UI) using the `highlighted` feature-state. */
-  const hoveredColumn = useCorrelationMapStore((state) => state.hoveredColumn);
-  const columns = useCorrelationMapStore((state) => state.columns);
-  const appliedRef = useRef<number | string | null>(null);
-
-  useMapStyleOperator(
-    (map) => {
-      if (appliedRef.current != null) {
-        map.setFeatureState(
-          { source: "columns", id: appliedRef.current },
-          { highlighted: false },
-        );
-        appliedRef.current = null;
-      }
-      if (hoveredColumn == null || columns == null) return;
-      const col = columns.find((c) => c.properties?.col_id === hoveredColumn);
-      const id = (col as any)?.id ?? col?.properties?.col_id;
-      if (id == null) return;
-      map.setFeatureState({ source: "columns", id }, { highlighted: true });
-      appliedRef.current = id;
-    },
-    [hoveredColumn, columns],
-  );
-
-  return null;
-}
-
-function SelectedColumnsLayer() {
-  useOverlayStyle(() => selectedColumnsStyle, []);
-
-  const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns,
-  );
-
-  useMapStyleOperator(
-    (map) => {
-      let features = focusedColumns;
-
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features,
-      };
-
-      const columnCentroidLine: Feature = {
-        type: "Feature",
-        geometry: {
-          type: "LineString",
-          coordinates: features.map(
-            (col) => col.properties.centroid.geometry.coordinates,
-          ),
-        },
-        properties: {},
-      };
-
-      setGeoJSON(map, "selected-columns", data);
-      setGeoJSON(map, "selected-column-centroids", {
-        type: "FeatureCollection",
-        features: [columnCentroidLine],
-      });
-    },
-    [focusedColumns],
-  );
-  return null;
-}
-
-function ColumnsLayer({ enabled = true, color }) {
-  const columns = useCorrelationMapStore((state) => state.columns);
-  return h(BaseColumnsLayer, { enabled, color, columns });
-}
-
-const selectedColumnsStyle: Style = {
-  version: 8,
-  sources: {
-    "selected-columns": buildGeoJSONSource(),
-    "selected-column-centroids": buildGeoJSONSource(),
-  },
-  layers: [
-    {
-      id: "selected-columns-fill",
-      type: "fill",
-      source: "selected-columns",
-      paint: {
-        "fill-color": "rgba(255, 0, 0, 0.1)",
-      },
-    },
-    {
-      id: "selected-column-centroids-line",
-      type: "line",
-      source: "selected-column-centroids",
-      paint: {
-        "line-color": "rgba(255, 0, 0, 0.8)",
-        "line-width": 2,
-        "line-dasharray": [2, 2],
-      },
-    },
-    {
-      id: "selected-column-centroids-points",
-      type: "circle",
-      source: "selected-column-centroids",
-      paint: {
-        "circle-radius": 4,
-        "circle-color": "rgba(255, 0, 0, 0.8)",
-      },
-    },
-  ],
-};
-
-const lineOfSectionStyle: Style = {
-  version: 8,
-  sources: {
-    elevationMarker: buildGeoJSONSource(),
-    crossSectionLine: buildGeoJSONSource(),
-    crossSectionEndpoints: buildGeoJSONSource(),
-  },
-  layers: buildCrossSectionLayers(),
-};
-
-function SectionLine({ padding }: { padding: number }) {
-  useOverlayStyle(() => lineOfSectionStyle, []);
-  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
-  const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns,
-  );
-
-  // Setup focused line (only drawn in line-of-section mode)
-  useMapStyleOperator(
-    (map) => {
-      if (focusedLine == null) {
-        // Clear any previously-drawn line (e.g. after switching to manual mode)
-        setGeoJSON(map, "crossSectionLine", emptyFeatureCollection);
-        setGeoJSON(map, "crossSectionEndpoints", emptyFeatureCollection);
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: [
-          {
-            type: "Feature",
-            geometry: focusedLine,
-            properties: { id: "focusedLine" },
-          },
-        ],
-      };
-
-      setGeoJSON(map, "crossSectionLine", data);
-      setGeoJSON(map, "crossSectionEndpoints", {
-        type: "FeatureCollection",
-        features: focusedLine.coordinates.map((coord) => ({
-          type: "Feature",
-          geometry: { type: "Point", coordinates: coord },
-          properties: {},
-        })),
-      });
-    },
-    [focusedLine],
-  );
-
-  const bounds = useMemo(() => {
-    // In line mode, frame the line; in manual mode, frame the selected columns
-    const coords: number[][] =
-      focusedLine != null && focusedLine.coordinates.length >= 2
-        ? focusedLine.coordinates
-        : focusedColumns.map((c) => c.properties.centroid.geometry.coordinates);
-    if (coords.length < 2) return null;
-    const bounds = new LngLatBounds();
-    for (const coord of coords) {
-      bounds.extend(coord as [number, number]);
-    }
-    return bounds;
-  }, [focusedLine, focusedColumns]);
-
-  useMapEaseTo({ bounds, padding, trackResize: true });
-
-  return null;
-}
-
-const emptyFeatureCollection: FeatureCollection = {
-  type: "FeatureCollection",
-  features: [],
-};

package/src/maps/column-correlation/index.ts

@@ -1,2 +0,0 @@
-export * from "./core";
-export * from "./state";

package/src/maps/column-correlation/state.ts

@@ -1,315 +0,0 @@
-import { LineString, Point } from "geojson";
-import { create, StoreApi, useStore } from "zustand";
-import type { ColumnGeoJSONRecord } from "@macrostrat/api-types";
-// Turf intersection
-import { lineIntersect } from "@turf/line-intersect";
-import distance from "@turf/distance";
-import { nearestPointOnLine } from "@turf/nearest-point-on-line";
-import { centroid } from "@turf/centroid";
-import {
-  createContext,
-  useState,
-  useContext,
-  ReactNode,
-  useEffect,
-} from "react";
-import h from "@macrostrat/hyper";
-import { createComputed } from "zustand-computed";
-import { useMacrostratColumns } from "@macrostrat/data-provider";
-import { buffer } from "@turf/buffer";
-import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
-
-export type CorrelationSelectionMode = "line" | "manual";
-
-export interface CorrelationMapInput {
-  columns: ColumnGeoJSONRecord[];
-  focusedLine: LineString | null;
-  /** When set, columns are selected manually (by clicking) in this order,
-   * rather than derived from a line of section. */
-  manualColumns?: number[] | null;
-}
-
-export interface CorrelationMapStore extends CorrelationMapInput {
-  onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;
-  /** Toggle a column in/out of the manual selection (used in "manual" mode) */
-  toggleColumn: (colID: number) => void;
-  /** Remove a column from the selection. In "line" mode this converts the
-   * current selection to a manual one (a line can't represent an arbitrary
-   * subset), so removing a column switches modes. */
-  removeColumn: (colID: number) => void;
-  /** Replace the manual column selection with an explicit ordered list (used
-   * e.g. for drag-and-drop reordering). Switches to manual mode. */
-  setManualColumns: (colIDs: number[]) => void;
-  setHoveredColumn: (colID: number | null) => void;
-  hoveredColumn: number | null;
-  /** Request the map to frame a particular column (e.g. on header click). */
-  zoomToColumn: (colID: number | null) => void;
-  zoomColumn: number | null;
-  /** Incremented on each zoom request so repeat clicks re-frame the column. */
-  zoomNonce: number;
-  projectID?: number;
-}
-
-export interface CorrelationProviderProps extends CorrelationMapInput {
-  projectID?: number;
-  inProcess?: boolean;
-  columns: ColumnGeoJSONRecord[] | null;
-  children: ReactNode;
-  onSelectColumns?: (
-    columns: FocusedColumnGeoJSONRecord[],
-    line: LineString | null,
-  ) => void;
-}
-
-const CorrelationStoreContext =
-  createContext<StoreApi<CorrelationMapStore> | null>(null);
-
-type ComputedStore = {
-  focusedColumns: FocusedColumnGeoJSONRecord[];
-  selectionMode: CorrelationSelectionMode;
-};
-
-/** A computed store that will automatically update when the state changes */
-const computed = createComputed((state: CorrelationMapStore): ComputedStore => {
-  const manual = state.manualColumns != null;
-  return {
-    selectionMode: manual ? "manual" : "line",
-    // Focused columns are derived either from an explicit manual selection or
-    // from the columns intersecting the line of section.
-    focusedColumns: manual
-      ? buildManualColumns(state.columns, state.manualColumns)
-      : buildCorrelationColumns(state.columns, state.focusedLine),
-  };
-}) as any;
-
-export function ColumnCorrelationProvider({
-  children,
-  columns,
-  projectID,
-  inProcess,
-  focusedLine,
-  manualColumns = null,
-  onSelectColumns,
-}: CorrelationProviderProps) {
-  const [store] = useState(() => {
-    return create<CorrelationMapStore & ComputedStore>(
-      computed((set, get): CorrelationMapStore => {
-        return {
-          focusedLine,
-          manualColumns,
-          hoveredColumn: null,
-          zoomColumn: null,
-          zoomNonce: 0,
-          projectID,
-          columns: null,
-          onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {
-            const state = get();
-            // In manual-selection mode the map click is handled per-column
-            if (state.manualColumns != null) return;
-            // Check if shift key is pressed
-            const shiftKeyPressed = event.originalEvent.shiftKey;
-            let existingCoords = state.focusedLine?.coordinates ?? [];
-
-            if (existingCoords.length >= 2 && !shiftKeyPressed) {
-              // Reset the line to zero length
-              existingCoords = [];
-            }
-            set({
-              focusedLine: {
-                type: "LineString",
-                coordinates: [...existingCoords, point.coordinates],
-              },
-            });
-          },
-          toggleColumn(colID: number) {
-            const state = get();
-            const current =
-              state.manualColumns ??
-              state.focusedColumns.map((d) => d.properties.col_id);
-            const next = current.includes(colID)
-              ? current.filter((d) => d !== colID)
-              : [...current, colID];
-            set({ manualColumns: next, focusedLine: null });
-          },
-          removeColumn(colID: number) {
-            const state = get();
-            // Seed from the current selection (line-derived or manual)
-            const current =
-              state.manualColumns ??
-              state.focusedColumns.map((d) => d.properties.col_id);
-            set({
-              manualColumns: current.filter((d) => d !== colID),
-              focusedLine: null,
-            });
-          },
-          setManualColumns(colIDs: number[]) {
-            set({ manualColumns: colIDs, focusedLine: null });
-          },
-          setHoveredColumn(colID: number | null) {
-            set({ hoveredColumn: colID });
-          },
-          zoomToColumn(colID: number | null) {
-            set({ zoomColumn: colID, zoomNonce: get().zoomNonce + 1 });
-          },
-        };
-      }),
-    );
-  });
-
-  // Set up the store
-  /** TODO: move the fetching of all columns to within the map */
-  const _columns = useMacrostratColumns(projectID, inProcess);
-  useEffect(() => {
-    if (_columns != null) {
-      store.setState({ columns: _columns });
-    }
-  }, [_columns]);
-
-  // Kind of an awkward way to do this but we need to allow the selector to run
-  const focusedColumns = useStore(store, (state) => state.focusedColumns);
-  const _focusedLine = useStore(store, (state) => state.focusedLine);
-
-  useEffect(() => {
-    onSelectColumns?.(focusedColumns, _focusedLine);
-  }, [focusedColumns, _focusedLine]);
-
-  return h(CorrelationStoreContext.Provider, { value: store }, children);
-}
-
-export function useCorrelationMapStore(
-  selector: (state: CorrelationMapStore & ComputedStore) => any,
-) {
-  const storeApi = useContext(CorrelationStoreContext);
-  if (storeApi == null) {
-    throw new Error("Missing CorrelationMapProvider");
-  }
-  return useStore(storeApi, selector);
-}
-
-export interface ColumnMapLink {
-  onColumnMouseOver: (colID: number | null) => void;
-  onColumnClick: (colID: number) => void;
-}
-
-/** Wire a correlation chart's column-level events to the correlation map:
- * hovering a column highlights it on the map, and clicking a column header
- * frames it. Spread the result into `CorrelationChart`. Must be used within a
- * `ColumnCorrelationProvider`. */
-export function useColumnMapLink(): ColumnMapLink {
-  const setHoveredColumn = useCorrelationMapStore((s) => s.setHoveredColumn);
-  const zoomToColumn = useCorrelationMapStore((s) => s.zoomToColumn);
-  return {
-    onColumnMouseOver: setHoveredColumn,
-    onColumnClick: zoomToColumn,
-  };
-}
-
-function buildCorrelationColumns(
-  columns: ColumnGeoJSONRecord[],
-  line: LineString,
-): FocusedColumnGeoJSONRecord[] {
-  if (columns == null || line == null || line.coordinates.length < 2) {
-    return [];
-  }
-  return orderColumnsByDistance(
-    computeIntersectingColumns(columns, line),
-    line,
-  );
-}
-
-function buildManualColumns(
-  columns: ColumnGeoJSONRecord[],
-  ids: number[],
-): FocusedColumnGeoJSONRecord[] {
-  /** Build focused columns from an explicit, ordered list of column IDs. The
-   * ordering line simply connects them in the order they were selected. */
-  if (columns == null || ids == null) return [];
-  const byID = new Map(columns.map((c) => [c.properties.col_id, c]));
-  const result: FocusedColumnGeoJSONRecord[] = [];
-  ids.forEach((id, i) => {
-    const col = byID.get(id);
-    if (col == null) return;
-    const c = centroid(col.geometry);
-    result.push({
-      ...col,
-      properties: {
-        ...col.properties,
-        centroid: c,
-        nearestPointOnLine: c,
-        distanceAlongLine: i,
-      },
-    });
-  });
-  return result;
-}
-
-function computeIntersectingColumns(
-  columns: ColumnGeoJSONRecord[],
-  line: LineString,
-): ColumnGeoJSONRecord[] {
-  if (columns == null || line == null) {
-    return [];
-  }
-
-  /** eODP-focused process. Find buffers around line and then find columns intersecting that buffer */
-  const bufferedLine = buffer(line, 1, { units: "degrees" });
-
-  const nearbyPoints = columns.filter((col) => {
-    if (col.geometry?.type != "Point") {
-      return false;
-    }
-    return booleanPointInPolygon(col.geometry, bufferedLine);
-  });
-
-  const intersectingPolygons = columns.filter((col) => {
-    const poly = col.geometry;
-
-    // Some in-process datasets seem to have null geometries
-    if (poly == null) return false;
-    if (poly.type != "Polygon" && poly.type != "MultiPolygon") return false;
-
-    const intersection = lineIntersect(line, poly);
-    return intersection.features.length > 0;
-  });
-
-  return [...intersectingPolygons, ...nearbyPoints];
-}
-
-interface FocusedColumnGeoJSONRecord extends ColumnGeoJSONRecord {
-  properties: {
-    centroid: Point;
-    nearestPointOnLine: Point;
-    distanceAlongLine: number;
-  } & ColumnGeoJSONRecord["properties"];
-}
-
-function orderColumnsByDistance(
-  columns: ColumnGeoJSONRecord[],
-  line: LineString,
-): FocusedColumnGeoJSONRecord[] {
-  const centroids = columns.map((col) => centroid(col.geometry));
-  const projectedPoints = centroids.map((point) =>
-    nearestPointOnLine(line, point),
-  );
-  const distances = projectedPoints.map((point) =>
-    distance(point.geometry.coordinates, line.coordinates[0]),
-  );
-
-  let newColumns = columns.map((col, i) => {
-    return {
-      ...col,
-      properties: {
-        ...col.properties,
-        centroid: centroids[i],
-        nearestPointOnLine: projectedPoints[i],
-        distanceAlongLine: distances[i],
-      },
-    };
-  });
-
-  return sorted(newColumns, (d) => d.properties.distanceAlongLine);
-}
-
-function sorted(data, accessor: (d) => number) {
-  return data.sort((a, b) => accessor(a) - accessor(b));
-}

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

@@ -1,2 +0,0 @@
-export * from "./mapbox";
-export * from "./svg";