@macrostrat/column-views 1.0.2 → 2.0.0

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

@@ -0,0 +1,225 @@
+import { MapViewProps } from "@macrostrat/map-interface";
+import {
+  useMapClickHandler,
+  useMapEaseTo,
+  useMapStyleOperator,
+} from "@macrostrat/mapbox-react";
+import { LngLatBounds } from "mapbox-gl";
+import h from "@macrostrat/hyper";
+import { Feature, FeatureCollection } from "geojson";
+import { ReactNode, useMemo } from "react";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+
+import { useCorrelationMapStore } from "./state";
+import { buildColumnsStyle, InsetMap, InsetMapProps } from "../_shared";
+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, ...rest } = props;
+
+  const overlayStyles = useMemo(() => {
+    return [
+      buildColumnsStyle(columnColor),
+      selectedColumnsStyle,
+      lineOfSectionStyle,
+    ];
+  }, [columnColor]);
+
+  return h(
+    InsetMap,
+    {
+      ...rest,
+      boxZoom: false,
+      dragRotate: false,
+      overlayStyles,
+    },
+    [
+      h(ColumnsLayer),
+      h(SelectedColumnsLayer),
+      h(MapClickHandler),
+      h(SectionLine, { padding }),
+      children,
+    ]
+  );
+}
+
+function MapClickHandler() {
+  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);
+
+  useMapClickHandler(
+    (e) => {
+      onClickMap(e, { type: "Point", coordinates: e.lngLat.toArray() });
+    },
+    [onClickMap]
+  );
+
+  return null;
+}
+
+function SelectedColumnsLayer() {
+  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 }) {
+  const columns = useCorrelationMapStore((state) => state.columns);
+
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data: FeatureCollection = {
+        type: "FeatureCollection",
+        features: columns,
+      };
+
+      console.log(" columns", data);
+      setGeoJSON(map, "columns", data);
+    },
+    [columns, enabled]
+  );
+  return null;
+}
+
+const selectedColumnsStyle = {
+  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 = {
+  sources: {
+    elevationMarker: buildGeoJSONSource(),
+    crossSectionLine: buildGeoJSONSource(),
+    crossSectionEndpoints: buildGeoJSONSource(),
+  },
+  layers: buildCrossSectionLayers(),
+};
+
+function buildGeoJSONSource(data: FeatureCollection | null = null) {
+  return {
+    type: "geojson",
+    data: data ?? {
+      type: "FeatureCollection",
+      features: [],
+    },
+  };
+}
+
+function SectionLine({ padding }: { padding: number }) {
+  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
+
+  // Setup focused line
+  useMapStyleOperator(
+    (map) => {
+      if (focusedLine == null) {
+        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(() => {
+    if (focusedLine == null || focusedLine?.coordinates.length < 2) {
+      return null;
+    }
+    let bounds = new LngLatBounds();
+    for (let coord of focusedLine.coordinates) {
+      bounds.extend(coord);
+    }
+    return bounds;
+  }, [focusedLine]);
+
+  useMapEaseTo({ bounds, padding, trackResize: true });
+
+  return null;
+}

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

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

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

@@ -0,0 +1,192 @@
+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 mapboxgl from "mapbox-gl";
+import {
+  createContext,
+  useState,
+  useContext,
+  ReactNode,
+  useEffect,
+} from "react";
+import h from "@macrostrat/hyper";
+import { createComputed } from "zustand-computed";
+import { useMacrostratColumns } from "../../data-provider/base";
+
+export interface CorrelationMapInput {
+  columns: ColumnGeoJSONRecord[];
+  focusedLine: LineString | null;
+}
+
+export interface CorrelationMapStore extends CorrelationMapInput {
+  onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;
+}
+
+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[];
+};
+
+/** A computed store that will automatically update when the state changes */
+const computed = createComputed((state: CorrelationMapStore): ComputedStore => {
+  return {
+    // We compute the focused columns based on columns and focusedLine
+    focusedColumns: buildCorrelationColumns(state.columns, state.focusedLine),
+  };
+}) as any;
+
+export function ColumnCorrelationProvider({
+  children,
+  columns,
+  projectID,
+  inProcess,
+  focusedLine,
+  onSelectColumns,
+}: CorrelationProviderProps) {
+  const [store] = useState(() => {
+    return create<CorrelationMapStore & ComputedStore>(
+      computed((set, get): CorrelationMapStore => {
+        return {
+          focusedLine,
+          columns: null,
+          onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {
+            const state = get();
+            // 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],
+              },
+            });
+          },
+        };
+      })
+    );
+  });
+
+  // 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);
+}
+
+function buildCorrelationColumns(
+  columns: ColumnGeoJSONRecord[],
+  line: LineString
+): FocusedColumnGeoJSONRecord[] {
+  if (columns == null || line == null || line.coordinates.length < 2) {
+    return [];
+  }
+  return orderColumnsByDistance(
+    computeIntersectingColumns(columns, line),
+    line
+  );
+}
+
+function computeIntersectingColumns(
+  columns: ColumnGeoJSONRecord[],
+  line: LineString
+): ColumnGeoJSONRecord[] {
+  if (columns == null || line == null) {
+    return [];
+  }
+
+  return 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;
+  });
+}
+
+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

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

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

@@ -0,0 +1,102 @@
+import h from "@macrostrat/hyper";
+
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+import { Meta } from "@storybook/react";
+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 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),
+    ]),
+  ]);
+}