@macrostrat/column-views 3.9.0 → 3.11.0

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"],
-      },
-    ],
-  };
-}

package/src/maps/layers/index.ts

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

package/src/maps/layers/units.ts

@@ -1,286 +0,0 @@
-import {
-  useLithologies,
-  useMacrostratColumns,
-} from "@macrostrat/data-provider";
-import { useAPIResult } from "@macrostrat/ui-components";
-import { useMapStyleOperator, useOverlayStyle } from "@macrostrat/mapbox-react";
-import { FeatureCollection } from "geojson";
-import { useMemo } from "react";
-import { mergeStyles, setGeoJSON } from "@macrostrat/mapbox-utils";
-import { UnitLithology, UnitLong } from "@macrostrat/api-types";
-import { flattenLithologies, getMixedColorForData } from "../../units";
-import { getBestFGDCPatternForLithologyList } from "../../units/resolvers";
-import {
-  setupStyleImageManager,
-  loadStyleImage,
-  StyleFragment,
-} from "@macrostrat/map-styles";
-import { asChromaColor } from "@macrostrat/color-utils";
-import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
-import pMap from "p-map";
-import { BaseColumnsLayer } from "./columns";
-import h from "@macrostrat/hyper";
-
-export interface UnitsOverlayProps {
-  time: number;
-  ageSpan?: number;
-  project?: number | number[];
-  patterns?: boolean;
-}
-
-export function MacrostratUnitsOverlay(props: UnitsOverlayProps) {
-  const { time, ageSpan = 0.05, patterns = false } = props;
-  const lithMap = useLithologies();
-
-  useOverlayStyle(() => {
-    return buildUnitsStyle({ patterns });
-  }, [patterns]);
-
-  useMapStyleOperator(
-    (map) => {
-      if (!patterns) return;
-      setupStyleImageManager(map, { verbose: false });
-    },
-    [patterns],
-  );
-
-  const params = useMemo(() => {
-    let project: number[] | undefined;
-    if (Number.isFinite(props.project)) {
-      project = [props.project as number];
-    } else if (!Array.isArray(props.project)) {
-      project = undefined;
-    }
-    // Project can only be a single project for now
-    const projectCompat =
-      project != null && project.length > 0 ? project[0] : undefined;
-
-    return {
-      age_bottom: time + ageSpan / 2,
-      age_top: time - ageSpan / 2,
-      response: "long",
-      project: projectCompat,
-    };
-  }, [time, ageSpan, props.project]);
-
-  const units: UnitLong[] = useAPIResult("/units", params);
-  const columns = useMacrostratColumns(params.project, false);
-
-  useMapStyleOperator(
-    (map) => {
-      if (units == null || columns == null || lithMap == null) {
-        return;
-      }
-
-      const getColorForLithology = (data: UnitLithology): string | null => {
-        return lithMap?.get(data.lith_id)?.color ?? null;
-      };
-
-      const unitsMap = postProcessUnits(units, getColorForLithology);
-      handleUnitsLayerUpdate(map, unitsMap, columns);
-      if (patterns) {
-        handlePatternOverlayUpdate(
-          map,
-          unitsMap,
-          columns,
-          getColorForLithology,
-        ).then(() => {});
-      }
-    },
-    [units, lithMap, columns, patterns],
-  );
-
-  const isHovered = ["boolean", ["feature-state", "hover"], false];
-  const isShown = ["boolean", ["feature-state", "shown"], false];
-
-  const opacity = [
-    "case",
-    ["all", isHovered, isShown],
-    0.9,
-    isShown,
-    0.8,
-    isHovered,
-    0.3,
-    0.0,
-  ];
-
-  return h([
-    h(BaseColumnsLayer, {
-      enabled: true,
-      columns,
-      opacity,
-      lineOpacity: 0.2,
-      lineColor: "lightgray",
-      color: "transparent",
-    }),
-  ]);
-}
-
-function handleUnitsLayerUpdate(
-  map,
-  unitsMap: Map<number, UnitsDisplayInfo>,
-  columns: any[],
-) {
-  // Update feature states
-  for (const column of columns) {
-    const col_id = column.properties.col_id;
-    const info = unitsMap.get(Number(col_id));
-    const color = info?.color;
-    map.setFeatureState(
-      { source: "columns", id: col_id },
-      {
-        color,
-        shown: color != null,
-      },
-    );
-  }
-}
-
-async function handlePatternOverlayUpdate(
-  map,
-  unitsMap: Map<number, UnitsDisplayInfo>,
-  columns: any[],
-  getColor: LithologyColorGetter,
-) {
-  // synthesize patterns not yet in cache
-
-  const colsWithPatterns = [];
-  const patternIDs = new Set<string>();
-  // Update feature states
-  for (const column of columns) {
-    const col_id = column.properties.col_id;
-    const info = unitsMap.get(Number(col_id));
-    if (info == null) continue;
-    const pattern = getPatternSpec(info?.liths, getColor);
-    if (pattern == null) continue;
-
-    colsWithPatterns.push({
-      type: "Feature",
-      geometry: column.geometry,
-      properties: {
-        col_id,
-        pattern,
-      },
-    });
-    patternIDs.add(pattern);
-  }
-
-  const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));
-
-  const mapper = async (patternID) => {
-    try {
-      await loadStyleImage(map, patternID, { pixelRatio: 10 });
-    } catch (e) {}
-  };
-  // Load all pattern images
-  await pMap(patternsToLoad, mapper, { concurrency: 5 });
-
-  // Set data for pattern layer
-  // This is inefficient but the only way to set per-feature patterns in Mapbox
-  const patternData: FeatureCollection = {
-    type: "FeatureCollection",
-    features: colsWithPatterns,
-  };
-  setGeoJSON(map, "column-patterns", patternData);
-}
-
-const cachedColors = new Map<string, string>();
-
-function getDarkenedColor(color: string): string {
-  /** Memoized function to get a darkened version of a color for pattern use */
-  if (cachedColors.has(color)) {
-    return cachedColors.get(color);
-  }
-  const c1 = asChromaColor(color).set("hsl.l", 0.4).set("hsl.s", 0.8).hex();
-  cachedColors.set(color, c1);
-  return c1;
-}
-
-interface UnitsDisplayInfo {
-  col_id: number;
-  units: UnitLong[];
-  color: string;
-  liths: UnitLithology[];
-}
-
-type LithologyColorGetter = (val: UnitLithology) => string | null;
-
-function postProcessUnits(
-  units: UnitLong[],
-  getColor: LithologyColorGetter,
-): Map<number, UnitsDisplayInfo> {
-  // Group by col_id
-  const unitsByColumn: Map<number, UnitLong[]> = new Map();
-  for (const unit of units) {
-    const col_id = Number(unit.col_id);
-    if (!unitsByColumn.has(col_id)) {
-      unitsByColumn.set(col_id, [unit]);
-    } else {
-      unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);
-    }
-  }
-
-  // Summarize units for display
-  const res = new Map<number, UnitsDisplayInfo>();
-  for (const [col_id, unitList] of unitsByColumn.entries()) {
-    const liths = flattenLithologies(unitList.map((u) => u.lith));
-    res.set(col_id, {
-      col_id,
-      units: unitList,
-      liths,
-      color: getMixedColorForData(liths, getColor),
-    });
-  }
-
-  return res;
-}
-
-function getPatternSpec(
-  liths: UnitLithology[],
-  getColor: LithologyColorGetter,
-): string | null {
-  const patternData = getBestFGDCPatternForLithologyList(liths);
-  if (patternData == null) return null;
-  let { patternID, lith } = patternData;
-  const color = getDarkenedColor(getColor(lith));
-  return `fgdc:${patternID}:${color}:transparent`;
-}
-
-type UnitsStyleOptions = {
-  color?: string;
-  patterns?: boolean;
-};
-
-export function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {
-  const { patterns = false } = opts;
-
-  // If color is in the feature state or geojson properties, use that as second choice
-
-  const baseStyle: StyleFragment = {
-    sources: {},
-    version: 8,
-  };
-
-  if (!patterns) {
-    return baseStyle;
-  }
-
-  const patternStyle: StyleFragment = {
-    sources: {
-      "column-patterns": buildGeoJSONSource(),
-    },
-    layers: [
-      {
-        id: "columns-fill-pattern",
-        type: "fill",
-        source: "column-patterns",
-        paint: {
-          "fill-pattern": ["get", "pattern"],
-          "fill-opacity": 1,
-        },
-      },
-    ],
-  };
-
-  return mergeStyles(baseStyle, patternStyle);
-}

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

@@ -1,79 +0,0 @@
-import h from "@macrostrat/hyper";
-import { Meta } from "@storybook/react-vite";
-import { InsetMap } from "./inset-map";
-import { MacrostratDataProvider } from "@macrostrat/data-provider";
-import { MacrostratUnitsOverlay } from "./layers/units";
-import {
-  ColumnHoverInteraction,
-  ColumnSelectionManager,
-} from "./column-navigation";
-import { useState } from "react";
-
-// @ts-ignore
-const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: "Column views/Maps/Unit map",
-  component: UnitMapComponent,
-  description: "A map of units through time",
-  argTypes: {
-    time: { control: "number", defaultValue: 100 },
-    ageSpan: { control: "number", defaultValue: 0.05 },
-    patterns: { control: "boolean", defaultValue: false },
-  },
-} as Meta<typeof InsetMap>;
-
-function UnitMapComponent(props) {
-  const { children, ...rest } = props;
-  return h(
-    MacrostratDataProvider,
-    {
-      baseURL: "https://dev.macrostrat.org/api/v2",
-    },
-    h(
-      "div",
-      h(
-        InsetMap,
-        {
-          style: { width: "800px", height: "600px" },
-          accessToken: mapboxToken,
-        },
-        [h(MacrostratUnitsOverlay, rest), children],
-      ),
-    ),
-  );
-}
-
-export const UnitMap = {
-  args: {
-    time: 100,
-    ageSpan: 0.05,
-  },
-};
-
-export const WithPatterns = {
-  args: {
-    time: 100,
-    ageSpan: 0.05,
-    patterns: true,
-  },
-};
-
-export const WithColumnSelection = {
-  args: {
-    time: 100,
-    ageSpan: 0.05,
-    patterns: false,
-  },
-  render(args) {
-    const [selectedColumn, setSelectedColumn] = useState(null);
-    return h(UnitMapComponent, args, [
-      h(ColumnHoverInteraction),
-      h(ColumnSelectionManager, {
-        selectedColumn,
-        onSelectColumn: setSelectedColumn,
-      }),
-    ]);
-  },
-};