@macrostrat/column-views 3.9.0 → 3.10.0

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";

package/src/maps/inset-map/index.ts

@@ -1,87 +0,0 @@
-import { useCallback, useMemo } from "react";
-import {
-  MapView,
-  getBasicMapStyle,
-  MapViewProps,
-} from "@macrostrat/map-interface";
-import h from "@macrostrat/hyper";
-import { MapboxMapProvider } from "@macrostrat/mapbox-react";
-import { useInDarkMode } from "@macrostrat/ui-components";
-import {
-  removeMapLabels,
-  removeSourceFromStyle,
-} from "@macrostrat/mapbox-utils";
-import type { ReactNode, CSSProperties } from "react";
-
-export interface InsetMapProps extends Omit<MapViewProps, "style"> {
-  controls?: ReactNode;
-  className?: string;
-  children?: ReactNode;
-  style?: CSSProperties;
-  mapStyle?: mapboxgl.Style | string;
-  showLabels?: boolean;
-  showAdmin?: boolean;
-  showRoads?: boolean;
-}
-
-export function InsetMap({
-  controls,
-  className,
-  children,
-  style,
-  mapStyle,
-  accessToken,
-  showLabels = false,
-  showAdmin = false,
-  showRoads = false,
-  ...rest
-}: InsetMapProps) {
-  const inDarkMode = useInDarkMode();
-  const _style = useMemo((): mapboxgl.Style | string => {
-    return mapStyle ?? getBasicMapStyle({ inDarkMode });
-  }, [mapStyle, inDarkMode]);
-
-  const transformStyle = useCallback(
-    (style) => {
-      let newStyle = style;
-      if (!showLabels) {
-        newStyle = removeMapLabels(newStyle);
-      }
-      if (!showAdmin) {
-        newStyle = removeSourceFromStyle(newStyle, null, "admin");
-      }
-      if (!showRoads) {
-        newStyle = removeSourceFromStyle(newStyle, null, "road");
-        newStyle = removeSourceFromStyle(newStyle, null, "aeroway");
-      }
-      return newStyle;
-    },
-    [mapStyle, showLabels, showRoads, showAdmin],
-  );
-
-  return h("div.inset-map", { className, style }, [
-    h(MapboxMapProvider, [
-      controls,
-      h(
-        MapView,
-        {
-          style: _style,
-          accessToken,
-          standalone: true,
-          /* Default map position that centers on the bulk of Macrostrat columns
-           */
-          mapPosition: {
-            camera: {
-              lng: -100,
-              lat: 38,
-              altitude: 5000000,
-            },
-          },
-          transformStyle,
-          ...rest,
-        },
-        children,
-      ),
-    ]),
-  ]);
-}

package/src/maps/inset-map/inset-map.stories.ts

@@ -1,20 +0,0 @@
-import h from "@macrostrat/hyper";
-
-const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
-
-import { Meta } from "@storybook/react-vite";
-import { InsetMap } from ".";
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: "Column views/Maps/Inset map",
-  component: InsetMap,
-  description: "A basic inset map",
-} as Meta<typeof InsetMap>;
-
-export function BasicInsetMap() {
-  return h(InsetMap, {
-    style: { width: "800px", height: "600px" },
-    accessToken: mapboxToken,
-  });
-}

package/src/maps/layers/columns.ts

@@ -1,216 +0,0 @@
-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;
-  // Highlight on either direct map hover or an externally-driven highlight
-  // (e.g. hovering the corresponding column header elsewhere in the UI).
-  const isHovered = [
-    "any",
-    ["boolean", ["feature-state", "hover"], false],
-    ["boolean", ["feature-state", "highlighted"], 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"],
-      },
-    ],
-  };
-}