@macrostrat/column-views 3.0.3 → 3.2.0

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/section.ts

@@ -16,8 +16,8 @@ import {
   useMacrostratColumnData,
   useMacrostratUnits,
   MacrostratColumnProvider,
-  useMacrostratBaseURL,
 } from "./data-provider";
+import { useMacrostratBaseURL } from "@macrostrat/data-provider";
 import { Duration } from "./unit-details";
 import { Value } from "@macrostrat/data-components";
 import type { ExtUnit, PackageScaleLayoutData } from "./prepare-units/types";

package/src/unit-details/panel.ts

@@ -2,7 +2,7 @@ import hyper from "@macrostrat/hyper";
 import styles from "./panel.module.sass";
 import { JSONView } from "@macrostrat/ui-components";
 import { Button, ButtonGroup } from "@blueprintjs/core";
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
@@ -13,13 +13,21 @@ import {
   LithologyTagFeature,
   Parenthetical,
   Value,
+  MacrostratInteractionManager,
+  useInteractionProps,
+  ItemInteractionProps,
+  useInteractionManager,
+  MacrostratItemIdentifier,
+  MacrostratInteractionProvider,
+  isClickable,
 } from "@macrostrat/data-components";
+import { useColumnUnitsMap } from "../data-provider";
 import {
-  useColumnUnitsMap,
   useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
-} from "../data-provider";
+  useStratNames,
+} from "@macrostrat/data-provider";
 import type {
   Environment,
   UnitLong,
@@ -42,6 +50,7 @@ export interface UnitDetailsPanelProps {
   lithologyFeatures?: Set<LithologyTagFeature>;
   onSelectUnit?: (unitID: number) => void;
   onClickItem?: MacrostratItemClickHandler;
+  interactionManager?: MacrostratInteractionManager;
 }
 
 export function UnitDetailsPanel({
@@ -71,7 +80,6 @@ export function UnitDetailsPanel({
       features,
       lithologyFeatures,
       onClickItem,
-      onSelectUnit,
     });
   }
 
@@ -94,7 +102,7 @@ export function UnitDetailsPanel({
     ]);
   }
 
-  return h("div.unit-details-panel", { className }, [
+  const main = h("div.unit-details-panel", { className }, [
     h(LegendPanelHeader, {
       onClose,
       title,
@@ -104,6 +112,36 @@ export function UnitDetailsPanel({
     }),
     h("div.unit-details-content-holder", content),
   ]);
+
+  /** Handle unit selection clicks */
+  const clickHandlerForItem = useMemo(() => {
+    if (onSelectUnit == null && onClickItem == null) return null;
+    return (item: MacrostratItemIdentifier) => {
+      if ("unit_id" in item && !("col_id" in item)) {
+        // We are selecting a unit within the column
+        return (event: MouseEvent) => {
+          onSelectUnit(item.unit_id);
+          // Don't allow event to propagate further (e.g., to open a link)
+          event.preventDefault();
+        };
+      }
+      return undefined;
+    };
+  }, [onSelectUnit, onClickItem]);
+
+  if (clickHandlerForItem != null) {
+    // We wrap this in a MacrostratInteractionManager to handle unit selection
+    return h(
+      MacrostratInteractionProvider,
+      {
+        clickHandlerForItem,
+        inherit: true,
+      },
+      main,
+    );
+  }
+
+  return main;
 }
 
 export function LegendPanelHeader({
@@ -162,7 +200,6 @@ export type MacrostratItemClickHandler = (
 
 function UnitDetailsContent({
   unit,
-  onSelectUnit,
   lithologyFeatures = new Set([
     LithologyTagFeature.Proportion,
     LithologyTagFeature.Attributes,
@@ -175,7 +212,6 @@ function UnitDetailsContent({
   getItemHref,
 }: {
   unit: UnitLong;
-  onSelectUnit?: (unitID: number) => void;
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
   onClickItem?: MacrostratItemClickHandler;
@@ -243,12 +279,10 @@ function UnitDetailsContent({
       col_id: unit.col_id,
     }),
     thicknessOrHeightRange,
-    h.if(lithologies)(LithologyList, {
+    h.if(lithologies != null)(LithologyList, {
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
-      getItemHref,
-      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
@@ -257,10 +291,8 @@ function UnitDetailsContent({
         onClickItem,
       }),
     ]),
-    h.if(environments)(EnvironmentsList, {
+    h.if(environments != null)(EnvironmentsList, {
       environments,
-      onClickItem,
-      getItemHref,
     }),
     h.if(unit.strat_name_id != null)(StratNameField, {
       strat_name_id: unit.strat_name_id,
@@ -272,7 +304,6 @@ function UnitDetailsContent({
         { label: "Above" },
         h(UnitIDList, {
           units: unit.units_above,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -281,7 +312,6 @@ function UnitDetailsContent({
         { label: "Below" },
         h(UnitIDList, {
           units: unit.units_below,
-          onSelectUnit,
           showNames: true,
         }),
       ),
@@ -333,27 +363,35 @@ export function ReferencesField({ refs, className = null, ...rest }) {
   );
 }
 
-function StratNameField({
-  strat_name_id,
-  onClickItem,
-}: {
-  strat_name_id: number;
-  onClickItem?: (event: MouseEvent, item: { strat_name_id: number }) => void;
-}) {
-  const stratNames = useMemo(() => [strat_name_id], [strat_name_id]);
-  const data = useMacrostratData("strat_names", stratNames);
-  const stratNameData = data?.[0];
+function useStratNameData(strat_name_id: number) {
+  const stratNames = useStratNames([strat_name_id]);
+  return stratNames?.[0];
+}
+
+function StratNameField(
+  props: {
+    strat_name_id: number;
+    className?: string;
+  } & ItemInteractionProps,
+) {
+  /** Handling for stratigraphic name field */
+  const { strat_name_id, className, ...rest } = props;
+  const data = useStratNameData(strat_name_id);
+
+  const baseInteractionProps = useInteractionProps({ strat_name_id });
+
+  const coreProps = {
+    ...baseInteractionProps,
+    ...rest,
+  };
+
   let inner: any = h(Identifier, { id: strat_name_id });
-  const name = stratNameData?.strat_name_long;
+  const name = data?.strat_name_long;
   if (name != null) {
     inner = h("span.strat-name", name);
   }
 
-  const clickable = onClickItem != null;
-
-  const className = classNames({
-    clickable,
-  });
+  const clickable = isClickable(coreProps);
 
   return h(
     DataField,
@@ -363,8 +401,8 @@ function StratNameField({
     h(
       clickable ? "a" : "span",
       {
-        className,
-        onClick: (e) => onClickItem(e, { strat_name_id }),
+        className: classNames({ clickable }, className),
+        ...coreProps,
       },
       inner,
     ),
@@ -566,36 +604,32 @@ function enhanceLithologies(
 }
 
 export function ClickableText({
-  onClick,
   className,
-  children,
+  ...rest
 }: {
-  onClick: () => void;
   className?: string;
   children: ReactNode;
-}) {
+} & ItemInteractionProps) {
   /** An optionally clickable text element */
-  const tag = onClick != null ? "a" : "span";
-  return h(tag, { onClick, className }, children);
+  const clickable = isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return h(tag, { className: classNames(className, { clickable }), ...rest });
 }
 
 export function Identifier({
   id,
-  onClick,
   className,
+  ...rest
 }: {
   id: number | string;
-  onClick?: (id: number | string) => void;
   className?: string;
-}) {
+} & ItemInteractionProps) {
   /** An item that displays a numeric identifier, optionally clickable */
-  const _onClick = onClick != null ? () => onClick(id) : null;
-
   return h(
     ClickableText,
     {
-      onClick: _onClick,
       className: classNames("identifier", className),
+      ...rest,
     },
     id,
   );
@@ -607,9 +641,11 @@ type UnitInfo = {
   name?: string;
 };
 
-function UnitIDList({ units, onSelectUnit, showNames = false }) {
+function UnitIDList({ units, showNames = false }) {
   const unitsMap = useColumnUnitsMap();
 
+  const interactionManager = useInteractionManager();
+
   const extUnits: UnitInfo[] = useMemo(() => {
     const u1 = units.filter((d) => d != 0);
     if (showNames) {
@@ -637,9 +673,17 @@ function UnitIDList({ units, onSelectUnit, showNames = false }) {
   return h(
     ItemList,
     { className: "units-list" },
-    extUnits.map((info) =>
-      h("span.item", h(UnitIdentifier, { ...info, onSelectUnit })),
-    ),
+    extUnits.map((info) => {
+      return h(
+        "span.item",
+        h(UnitIdentifier, {
+          ...info,
+          ...interactionManager?.interactionPropsForItem({
+            unit_id: info.unitID,
+          }),
+        }),
+      );
+    }),
   );
 }
 
@@ -647,21 +691,14 @@ function UnitIdentifier({
   unitID,
   colID,
   name,
-  onSelectUnit,
-}: UnitInfo & { onSelectUnit?: (unitID: number) => void }) {
-  const onClick = useMemo(() => {
-    if (onSelectUnit == null) return null;
-    return () => {
-      onSelectUnit(unitID);
-    };
-  }, [onSelectUnit]);
-
+  ...interactionProps
+}: UnitInfo & ItemInteractionProps) {
   if (name != null) {
     return h(
       ClickableText,
       {
         className: "unit-name",
-        onClick,
+        ...interactionProps,
       },
       name,
     );
@@ -669,9 +706,9 @@ function UnitIdentifier({
 
   return h(Identifier, {
     className: "unit-id",
-    onClick,
     key: unitID,
     id: unitID,
+    ...interactionProps,
   });
 }
 

package/src/units/boxes.ts

@@ -12,7 +12,8 @@ import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
 import { forwardRef, ReactNode, useContext, useMemo } from "react";
 import { resolveID, scalePattern } from "./resolvers";
-import { useUnitSelectionTarget, useLithologies } from "../data-provider";
+import { useUnitSelectionTarget } from "../data-provider";
+import { useLithologies } from "@macrostrat/data-provider";
 import { IUnit } from "./types";
 import styles from "./boxes.module.sass";
 import classNames from "classnames";