@macrostrat/column-views 3.9.0 → 3.10.0

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

package/src/units/colors.ts

@@ -1,183 +0,0 @@
-import chroma from "chroma-js";
-import {
-  Environment,
-  Lithology,
-  UnitLithology,
-  UnitLong,
-} from "@macrostrat/api-types";
-
-interface KeyOptions {
-  key?: "lith" | "environ";
-  id_key?: "lith_id" | "environ_id";
-}
-
-export function getMixedUnitColor(
-  unit: UnitLong,
-  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];
-  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) => {
-      let prop = d.prop;
-      if (prop == null || isNaN(prop) || prop <= 0) {
-        prop = null;
-      }
-      return {
-        ...d,
-        prop,
-        color: getColor?.(d) ?? d.color,
-      };
-    })
-    .filter((d) => d.color != null);
-
-  if (lithData.length == 0) {
-    return null;
-  }
-
-  const lithsWithProp = addProportionsToAllData(lithData);
-
-  // Mix colors proportionally
-  const baseColor = chroma.average(
-    lithsWithProp.map((d) => d.color),
-    "lrgb",
-    lithsWithProp.map((d) => d.prop),
-  );
-
-  if (!asBackground) {
-    return baseColor.hex();
-  }
-
-  if (inDarkMode) {
-    return baseColor.set("hsl.l", 0.2).hex();
-  } else {
-    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,141 +0,0 @@
-import { Lithology, UnitLithology } from "@macrostrat/api-types";
-import { LithologyCore } from "@macrostrat/api-types/src/lithologies";
-
-const symbolIndex = {
-  "dolomite-limestone": 641,
-  lime_mudstone: 627,
-  sandstone: 607,
-  "quartz arenite": 607,
-  litharenite: 608,
-  sand: 608,
-  siltstone: 616,
-  silt: 616,
-  siliciclastic: 615,
-  mud: 620,
-  "dolomitic siltstone": 616,
-  shale: 620,
-  limestone: 627,
-  dolomite: 642,
-  conglomerate: 602,
-  carbonate: 627,
-  "dolomite-mudstone": 642,
-  dolostone: 642,
-  mudstone: 620,
-  slate: 703,
-  "sandy-dolomite": 645,
-  quartzite: 702,
-  halite: 668,
-  gypsum: 667,
-  evaporite: 667,
-  claystone: 620,
-  anhydrite: 667,
-  gabbro: 720,
-  basalt: 717,
-  diabase: 717,
-  rhyolite: 722,
-  andesite: 723,
-  till: 681,
-  loess: 684,
-  "calcareous ooze": 653,
-  "siliceous ooze": 653,
-  chalk: 626,
-  gravel: 601,
-  plutonic: 721,
-  granite: 719,
-  clay: 660,
-  syenite: 722,
-  tuff: 711,
-  volcanic: 725,
-  metamorphic: 707,
-  volcaniclastic: 714,
-  migmatite: 709,
-  gneiss: 708,
-  tonalite: 727,
-  granodiorite: 725,
-  monzonite: 723,
-  argillite: 624,
-  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;
-  }
-  let liths = [...d.lith];
-  let environs = d.environ.map((d) => d.name).join(" ");
-  liths.sort((a, b) => b.prop - a.prop);
-
-  //console.log(d, d.unit_name, liths.map(d => d.name), environs)
-
-  let sym = null;
-
-  // overrides for IODP columns
-  if (d.unit_name == "clay") {
-    return "650";
-  }
-  if (d.unit_name == "calcareous clay") {
-    return "651";
-  }
-
-  for (const k of liths) {
-    if (k.name == "sandstone") {
-      // Special cases for sandstone
-      if (environs.includes("dune")) {
-        return "609";
-      }
-      if (environs.includes("marine")) {
-        return "608";
-      }
-      if (environs.includes("shore")) {
-        return "611";
-      }
-      if (environs.includes("loess")) {
-        return "686";
-      }
-    }
-
-    if (k.name == "conglomerate") {
-      // Special cases for sandstone
-      if (environs.includes("fluvial")) {
-        return "603";
-      }
-    }
-
-    if (k.name.includes("tuff")) {
-      return "711";
-    }
-    sym = symbolIndex[k.name];
-    if (sym != null) {
-      return sym;
-    }
-
-    if (k.type == "volcanic") {
-      return "725";
-    }
-  }
-  return sym;
-};
-
-const patternScale = {
-  "609": 1.5,
-  "603": 1.5,
-};
-
-const scalePattern = (id) => {
-  return patternScale[`${id}`] ?? 1;
-};
-
-export { resolveID, scalePattern };