@macrostrat/column-views 3.9.0 → 3.11.0

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

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

@@ -1,96 +0,0 @@
-import { useRef } from "react";
-import h from "@macrostrat/hyper";
-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";
-
-export function ResizableMapFrame(props) {
-  const { center, children, style, margin, className, allowZoom, ...rest } =
-    props;
-  let { scale } = props;
-  const ref = useRef(null);
-  const sz = useElementSize(ref);
-  const { width, height } = sz ?? { width: 0, height: 0 };
-  if (scale == null) {
-    scale = Math.min(width, height) + 2 * margin;
-  }
-
-  let zoomScaleExtent = null;
-
-  if (allowZoom) {
-    zoomScaleExtent = [
-      0.1 * Math.min(width, height),
-      2 * Math.max(width, height),
-    ];
-  }
-
-  return h("div.map-area", { ref, style, className }, [
-    h(
-      Globe,
-      {
-        width,
-        height,
-        margin,
-        center,
-        allowDrag: true,
-        allowZoom,
-        keepNorthUp: true,
-        zoomScaleExtent,
-        ...rest,
-        scale,
-      },
-      [h(LandLayer), children],
-    ),
-  ]);
-}
-
-type ColumnNavigationSVGMapProps = any;
-export type { ColumnNavigationSVGMapProps };
-
-export function ColumnNavigationSVGMap(props) {
-  const {
-    currentColumn,
-    setCurrentColumn,
-    children,
-    style,
-    margin = 10,
-    scale,
-    className,
-    showInProcessColumns = false,
-    showDebugLayers = false,
-    center,
-    ...rest
-  } = props;
-
-  let _center: LngLatLike | null = center ?? [-100, 38];
-  // Override center if currentColumn is set
-  if (currentColumn != null) {
-    _center = geoCentroid(currentColumn);
-  }
-
-  return h(
-    ResizableMapFrame,
-    { center: _center, style, margin, scale, className },
-    [
-      children,
-      h(Columns, {
-        onChange: setCurrentColumn,
-        col_id: currentColumn?.properties.col_id,
-        showDebugLayers,
-        ...rest,
-      }),
-      h.if(showInProcessColumns)(Columns, {
-        onChange: setCurrentColumn,
-        col_id: currentColumn?.properties.col_id,
-        status_code: "in process",
-        color: "rgba(200,150,150, 0.5)",
-        ...rest,
-      }),
-      h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),
-    ],
-  );
-}
-
-export * from "./layers";

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

@@ -1,233 +0,0 @@
-import h from "@macrostrat/hyper";
-import {
-  Feature,
-  FeatureLayer,
-  MapContext,
-} from "@macrostrat/svg-map-components";
-import { useAPIResult, useKeyHandler } from "@macrostrat/ui-components";
-import chroma from "chroma-js";
-import { ExtendedFeature } from "d3-geo";
-import { Polygon } from "geojson";
-import { useContext, useMemo } from "react";
-import { useColumnFeatures } from "./data-fetcher";
-import {
-  buildKeyMapping,
-  buildTriangulation,
-} from "../utils/keyboard-navigation";
-
-const defaultStyle = {
-  fill: "rgb(239, 180, 249)",
-  stroke: "magenta",
-};
-
-export function MeasurementsLayer(props) {
-  const { style = defaultStyle, ...params } = props;
-  const res: any = useAPIResult("/measurements", {
-    ...params,
-    format: "geojson",
-    response: "light",
-  });
-  if (res == null) return null;
-
-  return h(FeatureLayer, {
-    useCanvas: false,
-    style,
-    features: res.features?.filter((d) => d.properties.unit_id != null) ?? [],
-  });
-}
-
-type ColumnProps = { col_id: number };
-
-type ColumnFeature = ExtendedFeature<Polygon, ColumnProps>;
-
-function ColumnFeatures(props) {
-  const {
-    features,
-    onClick,
-    color = "rgba(150,150,150, 1)",
-    singleFeature = true,
-  } = props;
-
-  const c = chroma(color);
-
-  return h(
-    FeatureLayer,
-    {
-      className: "columns",
-      useCanvas: onClick == null,
-      style: {
-        fill: c.alpha(0.2).css(),
-        stroke: c.alpha(0.4).css(),
-      },
-    },
-    features?.map((f) => {
-      return h(Feature, {
-        id: f.id ?? f.properties.col_id,
-        onClick,
-        feature: f,
-      });
-    }),
-  );
-}
-
-enum MacrostratStatusCode {
-  InProcess = "in process",
-}
-
-interface ColumnNavProps {
-  col_id: number;
-  status_code?: MacrostratStatusCode;
-  project_id?: number;
-  onChange(col_id: number): void;
-}
-
-interface KeyboardNavProps extends ColumnNavProps {
-  features: ColumnFeature[];
-  showLayers: boolean;
-}
-
-function ColumnKeyboardNavigation(props: KeyboardNavProps) {
-  /** Keyboard navigation of columns using a Delaunay triangulation */
-  const {
-    features = [],
-    col_id = null,
-    onChange,
-    showLayers = false,
-    ...projectArgs
-  } = props;
-  const { projection } = useContext(MapContext);
-  const { centroids, tri } = useMemo(
-    () => buildTriangulation(features),
-    [features],
-  );
-
-  const currentIndex = useMemo(() => {
-    return features.findIndex((d) => d.properties.col_id == col_id);
-  }, [features, col_id]);
-
-  const neighbors = tri.delaunay.neighbors[currentIndex];
-
-  const keyMapping = useMemo(() => {
-    return buildKeyMapping(neighbors, centroids, currentIndex, projection);
-  }, [neighbors, currentIndex]);
-
-  useKeyHandler(
-    (event) => {
-      const nextColumnIx = keyMapping[event.keyCode];
-      if (nextColumnIx == null) return;
-      // @ts-ignore
-      onChange(features[nextColumnIx]);
-    },
-    [keyMapping],
-  );
-
-  if (neighbors == null) return null;
-  const neighborFeatures = neighbors.map((d) => features[d]);
-
-  return h.if(showLayers)([
-    h(FeatureLayer, {
-      features: tri.links().features,
-      useCanvas: false,
-      style: {
-        stroke: "purple",
-        fill: "transparent",
-      },
-    }),
-    h(FeatureLayer, {
-      features: neighborFeatures,
-      useCanvas: false,
-      style: {
-        stroke: "rgb(93, 101, 212)",
-        strokeWidth: 3,
-        fill: "rgba(93, 101, 212, 0.5)",
-      },
-    }),
-    h(FeatureLayer, {
-      features: [
-        {
-          type: "Feature",
-          geometry: {
-            type: "MultiPoint",
-            coordinates: centroids,
-          },
-        },
-      ],
-      useCanvas: false,
-      style: {
-        r: 1,
-        fill: "purple",
-      },
-    }),
-  ]);
-}
-
-interface ColumnExtraInfo {
-  apiRoute?: string;
-  color?: string;
-  filterColumns?(d: ColumnFeature): boolean;
-  showDebugLayers?: boolean;
-  format?: "topojson" | "geojson";
-}
-
-const Columns = (props: ColumnNavProps & ColumnExtraInfo) => {
-  const {
-    apiRoute = "/columns",
-    onChange,
-    col_id = null,
-    status_code,
-    project_id,
-    color,
-    filterColumns,
-    showDebugLayers = false,
-    format = "topojson",
-  } = props;
-
-  let features: any[] = useColumnFeatures({
-    apiRoute,
-    status_code,
-    project_id,
-    format,
-  }) as any;
-
-  if (features == null) return null;
-
-  if (filterColumns != null) {
-    features = features.filter(filterColumns);
-  }
-
-  return h([
-    h(ColumnKeyboardNavigation, {
-      features,
-      col_id,
-      onChange,
-      status_code,
-      project_id,
-      showLayers: showDebugLayers,
-    }),
-    h(ColumnFeatures, { features, onClick: onChange, color }),
-  ]);
-};
-
-const ColumnCenters = (props: ColumnNavProps) => {
-  return h(Columns, { apiRoute: "/defs/columns", ...props });
-};
-
-const CurrentColumn = (props) => {
-  const { feature } = props;
-  return h(FeatureLayer, {
-    features: [feature],
-    style: {
-      fill: "rgba(255,0,0,0.4)",
-      stroke: "rgba(255,0,0,0.6)",
-      strokeWidth: 2,
-    },
-  });
-};
-
-export {
-  Columns,
-  CurrentColumn,
-  ColumnCenters,
-  ColumnFeatures,
-  ColumnKeyboardNavigation,
-};

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

@@ -1,58 +0,0 @@
-import { geoCentroid } from "d3-geo";
-import { geoVoronoi } from "d3-geo-voronoi";
-
-export function buildKeyMapping(
-  neighbors,
-  centroids,
-  currentIndex,
-  projection,
-) {
-  if (neighbors == null) return;
-
-  const currentCentroid = projection(centroids[currentIndex]);
-
-  let edgeAngles = neighbors.map((index) => {
-    const centroid = projection(centroids[index]);
-    const dx = centroid[0] - currentCentroid[0];
-    const dy = centroid[1] - currentCentroid[1];
-    return { col_index: index, angle: Math.atan2(dy, dx) };
-  });
-
-  edgeAngles.sort((d) => d.angle);
-
-  function closestAngle(num) {
-    // Find closest angle in array of neighbors
-    let curr = edgeAngles[0];
-    for (let next of edgeAngles) {
-      if (
-        Math.abs(normalize(num - next.angle)) <
-        Math.abs(normalize(num - curr.angle))
-      ) {
-        curr = next;
-      }
-    }
-    return curr.col_index;
-  }
-
-  return {
-    37: closestAngle(Math.PI), // left
-    38: closestAngle((3 * Math.PI) / 2), // up
-    39: closestAngle(0), // right
-    40: closestAngle(Math.PI / 2), // down
-  };
-}
-
-function normalize(angle) {
-  if (angle > Math.PI) {
-    angle -= 2 * Math.PI;
-  } else if (angle <= -Math.PI) {
-    angle += 2 * Math.PI;
-  }
-  return angle;
-}
-
-export function buildTriangulation(features) {
-  const centroids = features.map(geoCentroid);
-  const tri = geoVoronoi(centroids);
-  return { centroids, tri };
-}

package/src/maps/index.ts

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