@macrostrat/column-views 3.1.0 → 3.2.0

package/src/maps/index.ts

@@ -1,3 +1,4 @@
 export * from "./column-navigation";
 export * from "./column-correlation";
 export * from "./_shared";
+export * from "./units-overlay";

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

@@ -0,0 +1,64 @@
+import h from "@macrostrat/hyper";
+import { Meta } from "@storybook/react-vite";
+import { InsetMap } from "./_shared";
+import { MacrostratDataProvider } from "@macrostrat/data-provider";
+import { useMemo } from "react";
+import { buildUnitsStyle, MacrostratUnitsOverlay } from "./units-overlay";
+
+// @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 overlayStyles = useMemo(() => {
+    let styles: any[] = [
+      buildUnitsStyle({ color: "#444", patterns: props.patterns }),
+    ];
+    return styles;
+  }, []);
+
+  return h(
+    MacrostratDataProvider,
+    {
+      baseURL: "https://dev.macrostrat.org/api/v2",
+    },
+    h(
+      "div",
+      h(
+        InsetMap,
+        {
+          style: { width: "800px", height: "600px" },
+          accessToken: mapboxToken,
+          overlayStyles,
+        },
+        h(MacrostratUnitsOverlay, props),
+      ),
+    ),
+  );
+}
+
+export const UnitMap = {
+  args: {
+    time: 100,
+    ageSpan: 0.05,
+  },
+};
+
+export const WithPatterns = {
+  args: {
+    time: 100,
+    ageSpan: 0.05,
+    patterns: true,
+  },
+};

package/src/maps/units-overlay/index.ts

@@ -0,0 +1,336 @@
+import {
+  useLithologies,
+  useMacrostratColumns,
+} from "@macrostrat/data-provider";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { useMapStyleOperator } 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, getCSSVariable } from "@macrostrat/color-utils";
+import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import pMap from "p-map";
+
+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();
+
+  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);
+
+  // Set up basic columns layer
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data: FeatureCollection = {
+        type: "FeatureCollection",
+        features: columns,
+      };
+      setGeoJSON(map, "columns", data);
+    },
+    [columns],
+  );
+
+  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],
+  );
+
+  return null;
+}
+
+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 { color = null, patterns = false } = opts;
+
+  let columnBaseColor: any =
+    color ?? getCSSVariable("--text-subtle-color", "black");
+  const columnSelectedColor = getCSSVariable("--selection-color", "purple");
+
+  // If color is in the feature state or geojson properties, use that as second choice
+
+  let columnColor: any = [
+    "coalesce",
+    ["feature-state", "color"],
+    ["get", "color"],
+    columnBaseColor,
+  ];
+
+  const baseStyle: StyleFragment = {
+    sources: {
+      columns: buildGeoJSONSource(),
+    },
+    version: 8,
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": [
+            "case",
+            ["boolean", ["feature-state", "shown"], false],
+            0.8,
+            ["boolean", ["feature-state", "hover"], false],
+            0.3,
+            0.1,
+          ],
+        },
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": columnColor,
+          "line-width": 1,
+          "line-opacity": 0.5,
+        },
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": 4,
+          "circle-color": [
+            "case",
+            ["boolean", ["feature-state", "shown"], false],
+            columnColor,
+            columnBaseColor,
+          ],
+          "circle-opacity": [
+            "case",
+            ["boolean", ["feature-state", "shown"], false],
+            0.8,
+            ["boolean", ["feature-state", "hover"], false],
+            0.3,
+            0.1,
+          ],
+        },
+        filter: ["==", "$type", "Point"],
+      },
+    ],
+  };
+
+  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/units/colors.ts

@@ -1,22 +1,93 @@
 import chroma from "chroma-js";
-import { UnitLong } from "@macrostrat/api-types";
+import {
+  Environment,
+  Lithology,
+  UnitLithology,
+  UnitLong,
+} from "@macrostrat/api-types";
 
 interface KeyOptions {
-  key?: string;
-  id_key?: string;
+  key?: "lith" | "environ";
+  id_key?: "lith_id" | "environ_id";
 }
 
 export function getMixedUnitColor(
   unit: UnitLong,
-  lithMap,
+  lithMap: Map<number, { color: string }>,
   inDarkMode = false,
   asBackground = true,
   keyOpts: KeyOptions = null,
 ): string | null {
   const { key = "lith", id_key = "lith_id" } = keyOpts ?? {};
   const liths = unit[key];
-  if (liths == null) {
-    return "gray";
+  const getColor = (data: UnitLithology): string | null => {
+    return lithMap?.get(data[id_key])?.color ?? null;
+  };
+
+  return getMixedColorForData(liths, getColor, {
+    inDarkMode,
+    asBackground,
+    key: id_key,
+  });
+}
+
+interface ColorBuilderOptions {
+  key?: "lith_id" | "environ_id";
+  inDarkMode?: boolean;
+  asBackground?: boolean;
+}
+
+export function flattenLithologies<
+  T extends { prop: number | null; lith_id?: number; environ_id?: number },
+>(liths: T[][], normalize: boolean = true): T[] {
+  /** Unify proportions in lithology/environment data across several units, normalizing if needed.
+   * If normalize is true, proportions are scaled to sum to 1 within each unit (with remaining proportions
+   * distributed equally among liths without specified proportions). This helps ensure that units with a
+   * few lithologies with specified proportions don't skew the color mixing.
+   *
+   * Lithologies are deduplicated based on their identifying property (lith_id or environ_id) if that is present.
+   */
+  if (liths == null || liths.length === 0) {
+    return [];
+  }
+
+  const unitCount = liths.length;
+
+  let newLiths: T[] = [];
+  for (const unitLiths of liths) {
+    let l1 = unitLiths;
+    if (normalize) {
+      l1 = addProportionsToAllData(unitLiths);
+    }
+    // Divide proportions by number of units to balance influence
+    for (const lith of l1) {
+      if (lith.prop == null || isNaN(lith.prop) || lith.prop <= 0) {
+        continue;
+      }
+      lith.prop = lith.prop / unitCount;
+    }
+    newLiths.push(...l1);
+  }
+  if (newLiths[0]?.lith_id != null) {
+    newLiths = mergeLikeData(newLiths, "lith_id");
+  } else if (newLiths[0]?.environ_id != null) {
+    newLiths = mergeLikeData(newLiths, "environ_id");
+  }
+  // Sort by proportion descending
+  newLiths.sort((a, b) => b.prop - a.prop);
+  return newLiths;
+}
+
+export function getMixedColorForData<
+  T extends UnitLithology | Lithology | Environment,
+>(
+  liths: T[] | null,
+  getColor: (val: T) => string | null,
+  options: ColorBuilderOptions = {},
+): string | null {
+  const { inDarkMode = false, asBackground = true } = options;
+  if (liths == null || liths.length === 0) {
+    return null;
   }
   const lithData = liths
     .map((d) => {
@@ -25,33 +96,19 @@ export function getMixedUnitColor(
         prop = null;
       }
       return {
-        lith_id: d[id_key],
+        ...d,
         prop,
-        color: lithMap?.get(d[id_key])?.color,
+        color: getColor?.(d) ?? d.color,
       };
     })
     .filter((d) => d.color != null);
 
-  const lithsWithProp = lithData.filter((d) => d.prop != null);
-  const lithsWithoutProp = lithData.filter((d) => d.prop == null);
-
-  const totalProp = lithsWithProp.reduce((sum, d) => sum + d.prop, 0);
-  if (totalProp < 1 && lithsWithoutProp.length > 0) {
-    const remainingProp = 1 - totalProp;
-    // Distribute remaining proportion equally among liths without prop
-    const equalProp = remainingProp / lithsWithoutProp.length;
-    lithsWithoutProp.forEach((d) => {
-      lithsWithProp.push({
-        ...d,
-        prop: equalProp,
-      });
-    });
-  }
-
-  if (lithsWithProp.length == 0) {
+  if (lithData.length == 0) {
     return null;
   }
 
+  const lithsWithProp = addProportionsToAllData(lithData);
+
   // Mix colors proportionally
   const baseColor = chroma.average(
     lithsWithProp.map((d) => d.color),
@@ -69,3 +126,58 @@ export function getMixedUnitColor(
     return baseColor.set("hsl.l", 0.9).hex();
   }
 }
+
+function addProportionsToAllData<T extends { prop?: number }>(liths: T[]): T[] {
+  /** Make sure that all lithologies/environments have a defined proportion,
+   * and that proportions sum to 1. If some liths lack a defined proportion,
+   * the remaining proportion is distributed equally among them.
+   *
+   * NOTE: This function does not normalize proportions if they already sum to more than 1.
+   */
+  const lithsWithProp = liths.filter((d) => d.prop != null);
+  const lithsWithoutProp = liths.filter((d) => d.prop == null);
+
+  const totalProp = lithsWithProp.reduce((sum, d) => sum + d.prop, 0);
+  let overallTotal = 1;
+
+  if (totalProp < overallTotal && lithsWithoutProp.length > 0) {
+    const remainingProp = overallTotal - totalProp;
+    // Distribute remaining proportion equally among liths without prop
+    const equalProp = remainingProp / lithsWithoutProp.length;
+    lithsWithoutProp.forEach((d) => {
+      lithsWithProp.push({
+        ...d,
+        prop: equalProp,
+      } as T);
+    });
+  }
+  return lithsWithProp as T[];
+}
+
+function mergeLikeData<
+  T extends { prop: number; lith_id?: number; environ_id?: number },
+>(liths: T[], key: "lith_id" | "environ_id"): T[] {
+  /** Merge lithology/environment data with the same identifying property (lith_id or environ_id),
+   * summing their proportions.
+   *
+   * TODO: handle attribute merging
+   */
+  const mergedMap: Map<number, T> = new Map();
+
+  for (const lith of liths) {
+    const id = lith[key];
+    if (id == null) continue;
+
+    if (mergedMap.has(id)) {
+      const existing = mergedMap.get(id);
+      mergedMap.set(id, {
+        ...existing,
+        prop: existing.prop + lith.prop,
+      });
+    } else {
+      mergedMap.set(id, { ...lith });
+    }
+  }
+
+  return Array.from(mergedMap.values());
+}

package/src/units/resolvers.ts

@@ -1,3 +1,6 @@
+import { Lithology, UnitLithology } from "@macrostrat/api-types";
+import { LithologyCore } from "@macrostrat/api-types/src/lithologies";
+
 const symbolIndex = {
   "dolomite-limestone": 641,
   lime_mudstone: 627,
@@ -54,6 +57,19 @@ const symbolIndex = {
   diamictite: 681,
 };
 
+export function getBestFGDCPatternForLithologyList<
+  T extends UnitLithology | Lithology,
+>(liths: T[]): { lith: T; patternID: string } | null {
+  let lithsSorted = [...liths];
+  lithsSorted.sort((a, b) => b.prop - a.prop);
+  let firstLith = lithsSorted[0];
+  let sym = symbolIndex[firstLith.name];
+  if (sym != null) {
+    return { lith: firstLith, patternID: `${sym}` };
+  }
+  return null;
+}
+
 const resolveID = (d: any) => {
   if (d.lith == null || d.lith.length == 0) {
     return null;