@macrostrat/column-views 2.1.4 → 2.2.0

package/src/facets/fossils/index.ts

@@ -1,16 +1,27 @@
-import { getUnitHeightRange } from "../../prepare-units";
-import { useMacrostratColumnData } from "../../data-provider";
 import hyper from "@macrostrat/hyper";
-import { PBDBCollection, useFossilData } from "./provider";
-import { useMacrostratUnits } from "../../data-provider";
-import { ColumnNotes } from "../../notes";
-import { useMemo } from "react";
+import {
+  FossilDataType,
+  PBDBCollection,
+  PBDBOccurrence,
+  useFossilData,
+} from "./provider";
 import type { IUnit } from "../../units";
+import { BaseMeasurementsColumn, TruncatedList } from "../base-sample-column";
+import { Box, useElementSize } from "@macrostrat/ui-components";
+import { InternMap } from "d3-array";
+import { ColumnAxisType, ColumnSVG } from "@macrostrat/column-components";
+import {
+  useMacrostratColumnData,
+  useCompositeScale,
+} from "../../data-provider";
+import { UnitLong } from "@macrostrat/api-types";
 import styles from "./index.module.sass";
-import { useCallback } from "react";
+import { useRef } from "react";
 
 const h = hyper.styled(styles);
 
+export { FossilDataType };
+
 interface FossilItemProps {
   note: {
     data: PBDBCollection[];
@@ -36,177 +47,240 @@ function FossilInfo(props: FossilItemProps) {
   });
 }
 
-interface TruncatedListProps {
-  data: any[];
-  className?: string;
-  maxItems?: number;
-  itemRenderer?: (props: { data: any }) => any;
+function PBDBCollectionLink({
+  data,
+}: {
+  data: PBDBCollection | PBDBOccurrence;
+}) {
+  /** A link to a PBDB collection that handles either an occurrence or collection object */
+  return h(
+    "a.link-id",
+    {
+      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${data.cltn_id}`,
+    },
+    data.best_name ?? data.cltn_name,
+  );
 }
 
-export function TruncatedList({
-  data,
-  className,
-  maxItems = 5,
-  itemRenderer = (p) => h("span", p.data),
-}: TruncatedListProps) {
-  let tooMany = null;
-  let d1 = data;
-  if (data.length > maxItems) {
-    const n = data.length - maxItems;
-    d1 = data.slice(0, maxItems);
-    tooMany = h("li.too-many", `and ${n} more`);
-  }
+const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
+
+export function PBDBFossilsColumn({
+  columnID,
+  type = FossilDataType.Collections,
+}: {
+  columnID: number;
+  type: FossilDataType;
+}) {
+  const data = useFossilData(columnID, type);
+
+  return h(BaseMeasurementsColumn, {
+    data,
+    noteComponent: FossilInfo,
+    className: "fossil-collections",
+    matchingUnit,
+  });
+}
+
+export function PBDBOccurrencesMatrix({ columnID }) {
+  /* A column for a matrix of taxon occurrences displayed as a table beside the main column. This will
+  eventually be extended with first/last occurrence markers and range bars.
+   */
+  const data = useFossilData(columnID, FossilDataType.Occurrences) as InternMap<
+    number,
+    PBDBOccurrence[]
+  >;
+
+  // convert the data to a map
+  const occurrenceMap = new Map(data);
+
+  const col = useMacrostratColumnData();
+  const matrix = createOccurrenceMatrix(col.units, occurrenceMap, col.axisType);
+
+  const scale = useCompositeScale();
+
+  const { taxonRanges } = matrix;
+
+  const padding = 16;
+  const spacing = 16;
+
+  const taxonEntries = Array.from(taxonRanges.entries());
+  //const taxon = taxonEntries.slice(0, 50); // limit to top 50 taxa
+
+  const width = padding * 2 + spacing * taxonEntries.length;
+
+  return h(Box, { className: "taxon-ranges", width, height: col.totalHeight }, [
+    h(TaxonOccurrenceLabels, {
+      taxonEntries,
+      padding,
+      spacing,
+      scale,
+    }),
+    h(
+      ColumnSVG,
+      {
+        width: padding * 2 + spacing * taxonEntries.length,
+      },
+      h(
+        "g.taxa-occurrences-matrix",
+        taxonEntries.map(([taxonName, ranges], rowIndex) => {
+          const xPosition = padding + rowIndex * spacing;
+          return h("g", { transform: `translate(${xPosition})` }, [
+            ranges.map(([top, bottom]) => {
+              return h("line", {
+                y1: scale(top),
+                y2: scale(bottom),
+              });
+            }),
+          ]);
+        }),
+      ),
+    ),
+  ]);
+}
 
-  return h("ul.truncated-list", { className }, [
-    d1.map((d, i) => {
-      return h("li.element", { key: i }, h(itemRenderer, { data: d }));
+function TaxonOccurrenceLabels({ taxonEntries, padding, spacing, scale }) {
+  return h("div.taxon-labels", [
+    taxonEntries.map(([taxonName, ranges], rowIndex) => {
+      const top = ranges[0]?.[0] ?? 0;
+      let topPx = scale(top) - 20;
+      if (topPx < 200) topPx = 0;
+
+      return h(TaxonLabel, {
+        top: topPx,
+        left: padding + rowIndex * spacing,
+        taxonName,
+      });
     }),
-    tooMany,
   ]);
 }
 
-function PBDBCollectionLink({ data }: { data: PBDBCollection }) {
+function TaxonLabel({ top, left, taxonName }) {
+  const ref = useRef();
+  const textSize = useElementSize(ref);
+  const labelWidth = textSize?.height ?? 200;
   return h(
-    "a.link-id",
+    "div.taxon-label",
     {
-      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${data.cltn_id}`,
+      style: {
+        top: `${top}px`,
+        marginLeft: `${left}px`,
+        "--label-width": `${labelWidth}px`,
+      },
     },
-    data.cltn_name,
+    h("div.taxon-label-inner", h("div.taxon-label-text", { ref }, taxonName)),
   );
 }
 
-const matchingUnit = (dz) => (d) => d.unit_id == dz.unit_id;
-
-export function PBDBFossilsColumn({ columnID, color = "magenta" }) {
-  const data = useFossilData({ col_id: columnID });
-
-  const { axisType, units } = useMacrostratColumnData();
-
-  const notes: any[] = useMemo(() => {
-    if (data == null || units == null) return [];
-    let unitRefData = Array.from(data.values())
-      .map((d) => {
-        return {
-          data: d,
-          unit: units.find(matchingUnit(d[0])),
-        };
-      })
-      .filter((d) => d.unit != null);
-
-    unitRefData.sort((a, b) => {
-      const v1 = units.indexOf(a.unit);
-      const v2 = units.indexOf(b.unit);
-      return v1 - v2;
-    });
-
-    return unitRefData.map((d) => {
-      const { unit, data } = d;
-      const heightRange = getUnitHeightRange(unit, axisType);
-
-      return {
-        top_height: heightRange[1],
-        height: heightRange[0],
-        data,
-        unit,
-        id: unit.unit_id,
-      };
-    });
-  }, [data, units]);
-
-  const width = 500;
-  const paddingLeft = 40;
-
-  const noteComponent = useMemo(() => {
-    return (props) => {
-      return h(FossilInfo, {
-        color,
-        ...props,
-      });
-    };
-  }, [width, color]);
+type TaxonUnitMap = Map<string, Set<number>>;
 
-  if (data == null || units == null) return null;
+interface OccurrenceMatrixData {
+  occurrenceMap: Map<number, PBDBOccurrence[]>; // Map of unit IDs to occurrences (original data)
+  taxonUnitMap: TaxonUnitMap; // Map of taxon names to sets of unit IDs
+  taxonOccurrenceMap: Map<string, PBDBOccurrence[]>; // Map of taxon names to occurrences
+  taxonRanges: Map<string, [number, number][]>; // Map of taxon names to [top, bottom] pixel ranges
+}
 
-  return h(
-    "div.dz-spectra",
-    h(ColumnNotes, {
-      width,
-      paddingLeft,
-      notes,
-      noteComponent,
+function TaxonOccurrenceEntry({
+  xPosition,
+  ranges,
+  scale,
+  name,
+}: {
+  xPosition: number;
+  units: Set<number>;
+}) {
+  return h("g", { transform: `translate(${xPosition})` }, [
+    ranges.map(([top, bottom]) => {
+      return h("line", {
+        y1: scale(top),
+        y2: scale(bottom),
+      });
     }),
-  );
+  ]);
 }
 
-export interface BaseMeasurementsColumnProps<T> {
-  data: T[];
-  noteComponent?: any;
-  width?: number;
-  paddingLeft?: number;
-  className?: string;
-  getUnitID?: (d: T) => number | string;
+function createOccurrenceMatrix(
+  units: UnitLong[],
+  data: Map<number, PBDBOccurrence[]>,
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
+): OccurrenceMatrixData {
+  const taxonUnitMap = new Map<string, Set<number>>();
+  const taxonOccurrenceMap = new Map<string, PBDBOccurrence[]>();
+
+  for (const [unit_id, occurrences] of data.entries()) {
+    for (const occ of occurrences) {
+      const taxonName = occ.best_name ?? occ.taxon_name;
+      if (!taxonUnitMap.has(taxonName)) {
+        taxonUnitMap.set(taxonName, new Set());
+        taxonOccurrenceMap.set(taxonName, []);
+      }
+      taxonUnitMap.get(taxonName).add(unit_id);
+      taxonOccurrenceMap.get(taxonName).push(occ);
+    }
+  }
+
+  // sort the taxon occurrence map by number of occurrences
+  const sortedTaxa = Array.from(taxonUnitMap.entries()).sort((a, b) => {
+    // Sort alphabetically by taxon name
+    return b[0].localeCompare(a[0]);
+  });
+
+  const taxonRanges = new Map<string, [number, number][]>();
+  for (const [taxonName, unitSet] of taxonUnitMap.entries()) {
+    taxonRanges.set(
+      taxonName,
+      accumulatePresenceDomains(units, unitSet, axisType),
+    );
+  }
+
+  return {
+    occurrenceMap: data,
+    taxonUnitMap: new Map(sortedTaxa),
+    taxonOccurrenceMap: taxonOccurrenceMap,
+    taxonRanges,
+  };
 }
 
-export function BaseMeasurementsColumn({
-  data,
-  noteComponent,
-  width = 500,
-  paddingLeft = 40,
-  className,
-  getUnitID = (d) => d.unit_id,
-}: BaseMeasurementsColumnProps<any>) {
-  const { axisType, units } = useMacrostratColumnData();
-
-  const matchingUnit = useCallback(
-    (dz) => {
-      return (d) => {
-        return getUnitID(d) === dz.unit_id;
-      };
-    },
-    [getUnitID],
-  );
+function accumulatePresenceDomains(
+  unit: UnitLong[],
+  presenceUnits: Set<number>,
+  axisType: ColumnAxisType,
+): Array<[number, number]> {
+  const domains: Array<[number, number]> = [];
+  let currentDomain: [number, number] | null = null;
 
-  const notes: any[] = useMemo(() => {
-    if (data == null || units == null) return [];
-    let unitRefData = Array.from(data.values())
-      .map((d) => {
-        return {
-          data: d,
-          unit: units.find(matchingUnit(d)),
-        };
-      })
-      .filter((d) => d.unit != null);
-
-    unitRefData.sort((a, b) => {
-      const v1 = units.indexOf(a.unit);
-      const v2 = units.indexOf(b.unit);
-      return v1 - v2;
-    });
-
-    return unitRefData.map((d) => {
-      const { unit, data } = d;
-      const heightRange = getUnitHeightRange(unit, axisType);
-
-      return {
-        top_height: heightRange[1],
-        height: heightRange[0],
-        data,
-        unit,
-        id: unit.unit_id,
-      };
-    });
-  }, [data, units, matchingUnit]);
-
-  if (data == null || units == null) return null;
+  for (const u of unit) {
+    if (presenceUnits.has(u.unit_id)) {
+      if (currentDomain == null) {
+        if (
+          axisType == ColumnAxisType.DEPTH ||
+          axisType == ColumnAxisType.HEIGHT
+        ) {
+          currentDomain = [u.t_pos, u.b_pos];
+        } else {
+          currentDomain = [u.t_age, u.b_age];
+        }
+      } else {
+        if (
+          axisType == ColumnAxisType.DEPTH ||
+          axisType == ColumnAxisType.HEIGHT
+        ) {
+          currentDomain[1] = u.b_pos;
+        } else {
+          currentDomain[1] = u.b_age;
+        }
+      }
+    } else {
+      if (currentDomain != null) {
+        domains.push(currentDomain);
+        currentDomain = null;
+      }
+    }
+  }
 
-  return h(
-    "div",
-    { className },
-    h(ColumnNotes, {
-      width,
-      paddingLeft,
-      notes,
-      noteComponent,
-    }),
-  );
+  if (currentDomain != null) {
+    domains.push(currentDomain);
+  }
+
+  return domains;
 }

package/src/facets/fossils/provider.ts

@@ -1,10 +1,14 @@
-import { group } from "d3-array";
-import { createAPIContext, useAPIResult } from "@macrostrat/ui-components";
+import { group, InternMap } from "d3-array";
+import {
+  createAPIContext,
+  useAPIResult,
+  useAsyncMemo,
+} from "@macrostrat/ui-components";
 
 const responseUnwrapper = (d) => d.records;
 
 const pbdbAPIContext = createAPIContext({
-  baseURL: "https://training.paleobiodb.org/data1.2",
+  baseURL: "https://paleobiodb.org/data1.2",
   unwrapResponse: responseUnwrapper,
 });
 
@@ -26,10 +30,13 @@ export function usePBDBFossilData(
   });
 }
 
-export interface PBDBCollection {
+export interface PBDBIdentifier {
   unit_id: number;
   col_id: number;
   cltn_id: number;
+}
+
+export interface PBDBCollection extends PBDBIdentifier {
   cltn_name: string;
   pbdb_occs: number;
   t_age: number;
@@ -37,44 +44,133 @@ export interface PBDBCollection {
   [key: string]: any; // Allow for additional properties
 }
 
-function useMacrostratFossilData({ col_id }): PBDBCollection[] | null {
-  return useAPIResult("/fossils", { col_id });
+export interface PBDBOccurrence extends PBDBIdentifier {
+  occ_id: number;
+  cltn_id: number;
+  taxon_name: string;
+  best_name: string;
+  [key: string]: any; // Allow for additional properties
+}
+
+export function useFossilData(
+  col_id: number,
+  type = FossilDataType.Collections,
+) {
+  // Fossil links are stored in both Macrostrat and PBDB, depending on how the link was assembled. Here
+  // we create a unified view of data over both sources.
+  return useAsyncMemo(async () => {
+    if (col_id == null) return null;
+    return await fetchFossilData(col_id, type);
+  }, [col_id, type]);
+}
+
+async function fetchMacrostratFossilData(
+  col_id: number,
+  type: FossilDataType,
+): Promise<PBDBCollection[]> {
+  if (type !== FossilDataType.Collections) {
+    // Macrostrat API only supports collections
+    return [];
+  }
+
+  // Fetch fossil collections linked to columns from the Macrostrat API
+  const resp = await fetch(
+    `https://macrostrat.org/api/fossils?col_id=${col_id}`,
+  );
+  const res = await resp.json();
+  // Create collections from Macrostrat data
+  return res.success.data;
+}
+
+async function fetchPDBDFossilData(
+  col_id: number,
+  type: FossilDataType,
+): Promise<PBDBCollection[]> {
+  const resp = await fetch(
+    `https://paleobiodb.org/data1.2/${type}/list.json?ms_column=${col_id}&show=mslink,full`,
+  );
+  const res = await resp.json();
+  return res.records.map(
+    type == FossilDataType.Collections
+      ? createMacrostratCollection
+      : preprocessOccurrence,
+  );
+}
+
+async function fetchFossilData(
+  colID: number,
+  type: FossilDataType,
+): Promise<InternMap<number, PBDBOccurrence[] | PBDBCollection[]>> {
+  const [macrostratData, pbdbData] = await Promise.all([
+    fetchMacrostratFossilData(colID, type),
+    fetchPDBDFossilData(colID, type),
+  ]);
+
+  const data = [...macrostratData, ...pbdbData];
+
+  return group(data, (d) => d.unit_id);
+}
+
+function preprocessOccurrence(d): PBDBOccurrence {
+  /* Preprocess data for an occurrence into a Macrostrat-like format */
+  // Standardize names of Macrostrat units and columns
+  const unit_id = parseInt(d.msu.replace(/^\w+:/, ""));
+  const col_id = parseInt(d.msc.replace(/^\w+:/, ""));
+
+  // taxon names may be stored in different fields
+  const occ_id = parseInt(d.oid.replace(/^occ:/, ""));
+  const cltn_id = parseInt(d.cid.replace(/^col:/, ""));
+
+  return {
+    ...d,
+    unit_id,
+    col_id,
+    taxon_name: d.tna,
+    best_name: d.idn ?? d.tna,
+    occ_id,
+    cltn_id,
+    cltn_name: d.nam,
+  };
 }
 
 function createMacrostratCollection(d): PBDBCollection {
+  /* Preprocess data for a collection into a Macrostrat-like format */
   let unit_id = null;
   let col_id = null;
   // Standardize names of Macrostrat units and columns
-  if (d.msu !== null) {
+  if (d.msu != null) {
     unit_id = parseInt(d.msu.replace(/^\w+:/, ""));
   }
-  if (d.msc !== null) {
+  if (d.msc != null) {
     col_id = parseInt(d.msc.replace(/^\w+:/, ""));
   }
 
+  // taxon names may be stored in different fields
+  let taxon_name = d.tna;
+  let occ_id = null;
+  if (d.oid != null && d.oid.startsWith("occ:")) {
+    occ_id = parseInt(d.oid.replace(/^occ:/, ""));
+  }
+  if (d.idn != null) {
+    taxon_name = d.idn;
+  }
+
+  let cltn_id = d.cltn_id;
+  if (d.oid != null && d.oid.startsWith("col:")) {
+    cltn_id = parseInt(d.oid.replace(/^col:/, ""));
+  } else if (d.cid != null && d.cid.startsWith("col:")) {
+    cltn_id = parseInt(d.cid.replace(/^col:/, ""));
+  }
+
   return {
     ...d,
     unit_id,
     col_id,
-    cltn_id: parseInt(d.oid.replace(/^col:/, "")),
+    taxon_name,
+    occ_id,
+    cltn_id,
     cltn_name: d.nam,
     t_age: d.t_age,
     b_age: d.b_age,
   };
 }
-
-export function useFossilData({ col_id }) {
-  // Fossil links are stored in both Macrostrat and PBDB, depending on how the link was assembled. Here
-  // we create a unified view of data over both sources.
-
-  const r1 = usePBDBFossilData(FossilDataType.Collections, { col_id });
-
-  const r2 = useMacrostratFossilData({ col_id });
-
-  if (r1 == null || r2 == null) return null;
-  const r1a = r1.map(createMacrostratCollection);
-
-  const data = [...r1a, ...r2];
-
-  return group(data, (d) => d.unit_id);
-}

package/src/facets/index.ts

@@ -2,3 +2,4 @@ export * from "./fossils";
 export * from "./detrital-zircon";
 export * from "./carbon-isotopes";
 export * from "./measurements";
+export * from "./base-sample-column";

package/src/facets/measurements/index.ts

@@ -1,6 +1,6 @@
 import h from "@macrostrat/hyper";
 import { useAPIResult } from "@macrostrat/ui-components";
-import { BaseMeasurementsColumn, TruncatedList } from "../fossils";
+import { BaseMeasurementsColumn, TruncatedList } from "../base-sample-column";
 
 function useSGPData({ col_id }) {
   const res = useAPIResult(
@@ -10,7 +10,6 @@ function useSGPData({ col_id }) {
     },
     (d) => d,
   );
-
   return res;
 }