@macrostrat/column-views 2.2.1 → 2.3.0

package/src/facets/detrital-zircon/index.ts

@@ -9,15 +9,20 @@ import { useDetritalMeasurements, MeasurementInfo } from "./provider";
 import { useMemo } from "react";
 import styles from "./index.module.sass";
 import classNames from "classnames";
-import { BaseMeasurementsColumn } from "../base-sample-column";
+import {
+  BaseMeasurementsColumn,
+  mergeHeightRanges,
+  ColumnMeasurementData,
+} from "../measurements";
+import { group } from "d3-array";
+import { ColumnAxisType } from "@macrostrat/column-components";
+import { useMacrostratColumnData } from "../../data-provider";
+import { getUnitHeightRange } from "../../prepare-units";
 
 const h = hyper.styled(styles);
 
 interface DetritalItemProps {
-  note: {
-    data: MeasurementInfo[];
-    unit?: IUnit;
-  };
+  note: DZMeasurementInfo;
   spacing?: {
     below?: number;
     above?: number;
@@ -27,7 +32,61 @@ interface DetritalItemProps {
   color?: string;
 }
 
-const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
+interface DZMeasurementInfo extends ColumnMeasurementData<MeasurementInfo[]> {
+  units: IUnit[];
+}
+
+function prepareDetritalData(
+  data: MeasurementInfo[],
+  units: IUnit[],
+  axisType: ColumnAxisType,
+) {
+  /** Right now measurement data could be duplicated if there are multiple units linked to the same
+   * measuremeta_id. THis happens because matches to units might be at a lower rank (e.g, if the column
+   * contains Formations but the measurements are linked to a Group). To handle this, we group by measuremeta_id
+   * and then create unique keys based on the set of units linked to each measurement.
+   */
+
+  // Group data by measuremeta_id
+  const measurementsGrouped = group(data, (d) => d.measuremeta_id);
+
+  const resMap = new Map<string, DZMeasurementInfo>();
+
+  for (const measurements of measurementsGrouped.values()) {
+    // Get a list of unique unit_ids for this measurement
+    const unitIDs = new Set(measurements.map((m) => m.unit_id));
+    const ids = Array.from(unitIDs);
+    ids.sort();
+    // Key is unique to the set of units
+    const key = ids.join("-");
+
+    if (!resMap.has(key)) {
+      const unitData = ids
+        .map((id) => {
+          return units.find((u) => u.unit_id === id);
+        })
+        .filter(Boolean);
+
+      const positions = unitData.map((unit) => {
+        const [height, top_height] = getUnitHeightRange(unit, axisType);
+        return { height, top_height };
+      });
+
+      // merge positions (note: we could also have multiple separate notes per measurement)
+      const pos = mergeHeightRanges(positions, axisType);
+
+      resMap.set(key, {
+        id: key,
+        data: [],
+        units: unitData as IUnit[],
+        ...pos,
+      });
+    }
+    resMap.get(key)!.data.push(measurements[0]);
+  }
+
+  return Array.from(resMap.values());
+}
 
 function DetritalColumn({ columnID, color = "magenta" }) {
   const data = useDetritalMeasurements({ col_id: columnID });
@@ -48,11 +107,17 @@ function DetritalColumn({ columnID, color = "magenta" }) {
     };
   }, [width, color]);
 
+  const { axisType, units } = useMacrostratColumnData();
+
+  const data1 = useMemo(() => {
+    if (data == null || units == null) return null;
+    return prepareDetritalData(data, units, axisType);
+  }, [data, units, axisType]);
+
   return h(BaseMeasurementsColumn, {
-    data,
+    data: data1,
     noteComponent,
-    getUnitID: (d) => d[0].unit_id,
-    matchingUnit,
+    deltaConnectorAttachment: 20,
   });
 }
 
@@ -68,7 +133,7 @@ function DepositionalAge({ unit }) {
 
 function DetritalGroup(props: DetritalItemProps) {
   const { note, width, height, color, spacing } = props;
-  const { data, unit } = note;
+  const { data, units } = note;
 
   const _color = color;
 
@@ -83,7 +148,9 @@ function DetritalGroup(props: DetritalItemProps) {
         DetritalSpectrumPlot,
         { width, innerHeight: height, showAxisLabels: true, paddingBottom: 40 },
         [
-          h.if(unit != null)(DepositionalAge, { unit }),
+          units.map((unit) => {
+            return h(DepositionalAge, { unit });
+          }),
           data.map((d) => {
             return h(DetritalSeries, {
               bandwidth: 20,

package/src/facets/detrital-zircon/provider.ts

@@ -47,5 +47,5 @@ export function useDetritalMeasurements(columnArgs) {
     columnArgs,
   );
   if (res == null) return null;
-  return group(res, (d) => d.unit_id);
+  return res;
 }

package/src/facets/fossils/index.ts

@@ -2,26 +2,58 @@ import hyper from "@macrostrat/hyper";
 import {
   FossilDataType,
   PBDBCollection,
+  PBDBEntity,
   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 type { CompositeColumnScale, IUnit } from "../../units";
+import {
+  BaseMeasurementsColumn,
+  ColumnMeasurementData,
+  MeasurementHeightData,
+  standardizeMeasurementHeight,
+  groupNotesByPixelDistance,
+  TruncatedList,
+} from "../measurements";
+import { ColumnAxisType } from "@macrostrat/column-components";
 import {
-  useMacrostratColumnData,
   useCompositeScale,
+  useMacrostratColumnData,
 } from "../../data-provider";
 import { UnitLong } from "@macrostrat/api-types";
-import styles from "./index.module.sass";
-import { useRef } from "react";
+import styles from "./taxon-ranges.module.sass";
+import { getPositionWithinUnit, getUnitHeightRange } from "../../prepare-units";
+import { scaleLinear } from "d3-scale";
+
+export * from "./taxon-ranges";
 
 const h = hyper.styled(styles);
 
 export { FossilDataType };
 
+export function PBDBFossilsColumn({
+  columnID,
+  type = FossilDataType.Collections,
+}: {
+  columnID: number;
+  type: FossilDataType;
+}) {
+  const data = useFossilData(columnID, type);
+  const { axisType, units } = useMacrostratColumnData();
+  const scale = useCompositeScale();
+
+  if (data == null || units == null || scale == null) return null;
+
+  const data1 = preparePBDBData(data, units, scale, axisType);
+
+  return h(BaseMeasurementsColumn, {
+    data: data1,
+    noteComponent: FossilInfo,
+    focusedNoteComponent: FossilInfo,
+    className: "fossil-collections",
+  });
+}
+
 interface FossilItemProps {
   note: {
     data: PBDBCollection[];
@@ -34,19 +66,30 @@ interface FossilItemProps {
   width?: number;
   height?: number;
   color?: string;
+  focused?: boolean;
 }
 
 function FossilInfo(props: FossilItemProps) {
-  const { note, spacing } = props;
-  const { data, unit } = note;
+  const { note, maxItems, focused = false } = props;
+  const { data } = note;
+  // Sort collections by name
+  data.sort((a, b) => {
+    const nameA = a.best_name ?? a.cltn_name ?? "";
+    const nameB = b.best_name ?? b.cltn_name ?? "";
+    return nameA.localeCompare(nameB);
+  });
 
   return h(TruncatedList, {
     data,
     className: "fossil-collections",
     itemRenderer: PBDBCollectionLink,
+    maxItems: focused ? Infinity : (maxItems ?? 5),
   });
 }
 
+const FocusedFossilInfo = (props: FossilItemProps) =>
+  h(FossilInfo, { ...props, maxItems: Infinity });
+
 function PBDBCollectionLink({
   data,
 }: {
@@ -56,231 +99,118 @@ function PBDBCollectionLink({
   return h(
     "a.link-id",
     {
-      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${data.cltn_id}`,
+      href: `https://paleobiodb.org/app/collections#display=col:${data.cltn_id}`,
+      target: "_blank",
+      onClick(e) {
+        e.stopPropagation();
+      },
     },
     data.best_name ?? data.cltn_name,
   );
 }
 
-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.
+interface PreparePBDBDataOptions {
+  /** If set, group close notes within this distance (in pixels in display space)
+   * into a single note. If a number is provided, that number is used as the distance,
+   * otherwise a default of 5 pixels is used.
    */
-  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),
-              });
-            }),
-          ]);
-        }),
-      ),
-    ),
-  ]);
+  groupCloseNotes?: boolean | number;
 }
 
-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;
+function preparePBDBData<T extends PBDBEntity>(
+  data: T[],
+  units: UnitLong[],
+  scale: CompositeColumnScale,
+  axisType: ColumnAxisType,
+  options?: { groupCloseNotes?: boolean | number },
+) {
+  /** Prepare PBDB fossil data for display in a measurements column */
+  const { groupCloseNotes = true } = options ?? {};
+  const groupDistance =
+    typeof groupCloseNotes === "number" ? groupCloseNotes : 10;
+
+  // Map of data to its defined height ranges
+  const dataMap = new Map<string, ColumnMeasurementData<T[]>>();
+
+  // Todo: if we wanted, we could add a step where we group notes that are too close together here...
+
+  for (const d of data) {
+    const range = getHeightRangeForPBDBEntity(d, units, axisType);
+
+    if (range == null) continue;
+    const { height, top_height } = range;
+    // compose the key based on height info
+    let key = `${height}`;
+    if (top_height != null) {
+      key += `-${top_height}`;
+    }
 
-      return h(TaxonLabel, {
-        top: topPx,
-        left: padding + rowIndex * spacing,
-        taxonName,
+    // Group by height key
+    if (!dataMap.has(key)) {
+      dataMap.set(key, {
+        height,
+        top_height: top_height ?? height,
+        data: [],
+        id: key,
       });
-    }),
-  ]);
-}
+    }
+    dataMap.get(key)!.data.push(d);
+  }
 
-function TaxonLabel({ top, left, taxonName }) {
-  const ref = useRef();
-  const textSize = useElementSize(ref);
-  const labelWidth = textSize?.height ?? 200;
-  return h(
-    "div.taxon-label",
-    {
-      style: {
-        top: `${top}px`,
-        marginLeft: `${left}px`,
-        "--label-width": `${labelWidth}px`,
-      },
-    },
-    h("div.taxon-label-inner", h("div.taxon-label-text", { ref }, taxonName)),
+  return groupNotesByPixelDistance(
+    Array.from(dataMap.values()),
+    scale,
+    axisType,
+    groupDistance,
   );
 }
 
-type TaxonUnitMap = Map<string, Set<number>>;
-
-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
-}
-
-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),
-      });
-    }),
-  ]);
-}
-
-function createOccurrenceMatrix(
+function getHeightRangeForPBDBEntity<T extends PBDBEntity>(
+  d: T,
   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);
+  axisType: ColumnAxisType,
+): MeasurementHeightData | null {
+  let height: number | null = null;
+  if (d.slb != null && d.slu == "mbsf") {
+    // Meters below sea floor - special case for eODP where we have
+    // specific depth data referenced
+    height = Number(d.slb);
+    if (axisType === ColumnAxisType.DEPTH) {
+      // Data is already in depth units
+      return { height };
     }
   }
-
-  // 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),
+  if (d.unit_id == null) return null;
+  if (height != null) {
+    // If we have both height and unit info, we need to adjust the height
+    // to fit whatever scale type we're using.
+    // TODO: we could improve how this works by having concurrent age and
+    // height scales, which would allow us to do this without having to
+    // reference to a specific unit.
+    const unit = units.find((u) => u.unit_id === d.unit_id);
+    if (unit == null) return null;
+    const relHeight = getRelativePositionInUnit(
+      height,
+      unit,
+      ColumnAxisType.DEPTH,
     );
+    if (relHeight == null) return null;
+    height = getPositionWithinUnit(relHeight, unit, axisType);
+    return { height };
   }
-
-  return {
-    occurrenceMap: data,
-    taxonUnitMap: new Map(sortedTaxa),
-    taxonOccurrenceMap: taxonOccurrenceMap,
-    taxonRanges,
-  };
+  // We can just get the height within the unit, clipped to the unit boundaries
+  return standardizeMeasurementHeight({ unit_id: d.unit_id }, units, axisType);
 }
 
-function accumulatePresenceDomains(
-  unit: UnitLong[],
-  presenceUnits: Set<number>,
+function getRelativePositionInUnit<T extends PBDBEntity>(
+  pos: number,
+  unit: UnitLong,
   axisType: ColumnAxisType,
-): Array<[number, number]> {
-  const domains: Array<[number, number]> = [];
-  let currentDomain: [number, number] | null = 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;
-      }
-    }
-  }
-
-  if (currentDomain != null) {
-    domains.push(currentDomain);
-  }
-
-  return domains;
+): number | null {
+  // This is the inverse of getPositionWithinUnit
+  const heights = getUnitHeightRange(unit, axisType, false);
+  const scale = scaleLinear(heights).domain([0, 1]);
+  const relPos = scale.invert(pos);
+  if (relPos < 0 || relPos > 1) return null;
+  return relPos;
 }

package/src/facets/fossils/provider.ts

@@ -1,4 +1,3 @@
-import { group, InternMap } from "d3-array";
 import {
   createAPIContext,
   useAPIResult,
@@ -7,8 +6,10 @@ import {
 
 const responseUnwrapper = (d) => d.records;
 
+const pbdbAPIBase = "https://paleobiodb.org/data1.2";
+
 const pbdbAPIContext = createAPIContext({
-  baseURL: "https://paleobiodb.org/data1.2",
+  baseURL: pbdbAPIBase,
   unwrapResponse: responseUnwrapper,
 });
 
@@ -17,26 +18,17 @@ export enum FossilDataType {
   Collections = "colls",
 }
 
-export function usePBDBFossilData(
-  type: FossilDataType,
-  { col_id },
-): any[] | null {
-  const params = {
-    ms_column: col_id,
-    show: "full,mslink",
-  };
-  return useAPIResult(`/${type}/list.json`, params, {
-    context: pbdbAPIContext,
-  });
-}
-
-export interface PBDBIdentifier {
+export interface PBDBEntity {
   unit_id: number;
   col_id: number;
   cltn_id: number;
+  // For eODP, slb/slu are used to store the heights of fossil locations found in measured sections.
+  // They may have a more general set of uses as well but these are not currently explored.
+  slb?: string; // The local bed in which the fossil was found
+  slu?: string; // The unit of measurement used to designate the local bed
 }
 
-export interface PBDBCollection extends PBDBIdentifier {
+export interface PBDBCollection extends PBDBEntity {
   cltn_name: string;
   pbdb_occs: number;
   t_age: number;
@@ -44,7 +36,7 @@ export interface PBDBCollection extends PBDBIdentifier {
   [key: string]: any; // Allow for additional properties
 }
 
-export interface PBDBOccurrence extends PBDBIdentifier {
+export interface PBDBOccurrence extends PBDBEntity {
   occ_id: number;
   cltn_id: number;
   taxon_name: string;
@@ -86,8 +78,9 @@ async function fetchPDBDFossilData(
   col_id: number,
   type: FossilDataType,
 ): Promise<PBDBCollection[]> {
+  // Note: show=rank does not work on training PBDB server
   const resp = await fetch(
-    `https://paleobiodb.org/data1.2/${type}/list.json?ms_column=${col_id}&show=mslink,full`,
+    pbdbAPIBase + `/${type}/list.json?ms_column=${col_id}&show=mslink,stratext`,
   );
   const res = await resp.json();
   return res.records.map(
@@ -97,21 +90,21 @@ async function fetchPDBDFossilData(
   );
 }
 
-async function fetchFossilData(
+async function fetchFossilData<T extends PBDBEntity>(
   colID: number,
   type: FossilDataType,
-): Promise<InternMap<number, PBDBOccurrence[] | PBDBCollection[]>> {
+): Promise<T[]> {
   const [macrostratData, pbdbData] = await Promise.all([
     fetchMacrostratFossilData(colID, type),
     fetchPDBDFossilData(colID, type),
   ]);
-
-  const data = [...macrostratData, ...pbdbData];
-
-  return group(data, (d) => d.unit_id);
+  return [...macrostratData, ...pbdbData];
 }
 
 function preprocessOccurrence(d): PBDBOccurrence {
+  if (d.msu == null || d.msc == null) {
+    return d;
+  }
   /* 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+:/, ""));