@macrostrat/column-views 2.1.3 → 2.2.0

package/src/facets/base-sample-column.ts

@@ -0,0 +1,114 @@
+import { useMacrostratColumnData } from "../data-provider";
+import { useCallback, useMemo } from "react";
+import hyper from "@macrostrat/hyper";
+import styles from "./base-sample-column.module.sass";
+import { getUnitHeightRange } from "../prepare-units";
+import { ColumnNotes } from "../notes";
+const h = hyper.styled(styles);
+
+export interface BaseMeasurementsColumnProps<T> {
+  data: T[];
+  noteComponent?: any;
+  width?: number;
+  paddingLeft?: number;
+  className?: string;
+  // TODO: these props are confusing
+  getUnitID?: (d: T) => number | string;
+  matchingUnit?: (dz: T) => (d: any) => boolean;
+}
+
+export function BaseMeasurementsColumn({
+  data,
+  noteComponent,
+  width = 500,
+  paddingLeft = 40,
+  className,
+  getUnitID = (d) => d.unit_id,
+  matchingUnit,
+}: BaseMeasurementsColumnProps<any>) {
+  const { axisType, units } = useMacrostratColumnData();
+
+  const _matchingUnit =
+    matchingUnit ??
+    useCallback(
+      (dz) => {
+        return (d) => {
+          return getUnitID(d) === dz.unit_id;
+        };
+      },
+      [getUnitID],
+    );
+
+  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;
+
+  return h(
+    "div",
+    { className },
+    h(ColumnNotes, {
+      width,
+      paddingLeft,
+      notes,
+      noteComponent,
+    }),
+  );
+}
+
+interface TruncatedListProps {
+  data: any[];
+  className?: string;
+  maxItems?: number;
+  itemRenderer?: (props: { data: any }) => any;
+}
+
+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`);
+  }
+
+  return h("ul.truncated-list", { className }, [
+    d1.map((d, i) => {
+      return h("li.element", { key: i }, h(itemRenderer, { data: d }));
+    }),
+    tooMany,
+  ]);
+}

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

@@ -3,14 +3,13 @@ import {
   DetritalSeries,
   usePlotArea,
 } from "@macrostrat/data-components";
-import { IUnit } from "../../units/types";
+import type { IUnit } from "../../units/types";
 import hyper from "@macrostrat/hyper";
 import { useDetritalMeasurements, MeasurementInfo } from "./provider";
-import { useMacrostratUnits } from "../../data-provider";
-import { ColumnNotes } from "../../notes";
 import { useMemo } from "react";
 import styles from "./index.module.sass";
 import classNames from "classnames";
+import { BaseMeasurementsColumn } from "../base-sample-column";
 
 const h = hyper.styled(styles);
 
@@ -28,6 +27,35 @@ interface DetritalItemProps {
   color?: string;
 }
 
+const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
+
+function DetritalColumn({ columnID, color = "magenta" }) {
+  const data = useDetritalMeasurements({ col_id: columnID });
+
+  const width = 400;
+  const paddingLeft = 40;
+
+  const spectrumWidth = width - paddingLeft;
+
+  const noteComponent = useMemo(() => {
+    return (props) => {
+      return h(DetritalGroup, {
+        width: spectrumWidth,
+        height: 40,
+        color,
+        ...props,
+      });
+    };
+  }, [width, color]);
+
+  return h(BaseMeasurementsColumn, {
+    data,
+    noteComponent,
+    getUnitID: (d) => d[0].unit_id,
+    matchingUnit,
+  });
+}
+
 function DepositionalAge({ unit }) {
   const { xScale, height } = usePlotArea();
 
@@ -41,7 +69,6 @@ function DepositionalAge({ unit }) {
 function DetritalGroup(props: DetritalItemProps) {
   const { note, width, height, color, spacing } = props;
   const { data, unit } = note;
-  const { geo_unit } = data[0];
 
   const _color = color;
 
@@ -70,63 +97,4 @@ function DetritalGroup(props: DetritalItemProps) {
   );
 }
 
-const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
-
-function DetritalColumn({ columnID, color = "magenta" }) {
-  const data = useDetritalMeasurements({ col_id: columnID });
-  const units = useMacrostratUnits();
-
-  const notes: any[] = useMemo(() => {
-    if (data == null || units == null) return [];
-    let dzUnitData = Array.from(data.values());
-    dzUnitData.sort((a, b) => {
-      const v1 = units.findIndex(matchingUnit(a));
-      const v2 = units.findIndex(matchingUnit(b));
-      return v1 - v2;
-    });
-
-    const data1 = dzUnitData.map((d) => {
-      const unit = units.find(matchingUnit(d));
-      return {
-        top_height: unit?.t_age,
-        height: unit?.b_age,
-        data: d,
-        unit,
-        id: unit?.unit_id,
-      };
-    });
-
-    return data1.filter((d) => d.unit != null);
-  }, [data, units]);
-
-  const width = 400;
-  const paddingLeft = 40;
-
-  const spectrumWidth = width - paddingLeft;
-
-  const noteComponent = useMemo(() => {
-    return (props) => {
-      return h(DetritalGroup, {
-        width: spectrumWidth,
-        height: 40,
-        color,
-        ...props,
-      });
-    };
-  }, [width, color]);
-
-  if (data == null || units == null) return null;
-
-  return h(
-    "div.dz-spectra",
-    h(ColumnNotes, {
-      width,
-      paddingLeft,
-      notes,
-      noteComponent,
-      deltaConnectorAttachment: 20,
-    }),
-  );
-}
-
 export { DetritalColumn, DetritalGroup };

package/src/facets/fossils/index.module.sass

@@ -1,14 +1,44 @@
-.fossil-collections
-  padding-left: 0.2em
-  font-size: 0.9em
-  list-style: none
-  border-left: 1px solid var(--column-stroke-color)
-  margin: 1px 0
-  li
-    display: inline
-    &:not(:last-child):after
-      content: ", "
-      color: var(--secondary-color)
-  li.too-many
-    color: var(--secondary-color)
+.taxa-occurrences-matrix
+  color: var(--column-text-color)
+  line
+    stroke: var(--column-stroke-color)
+    stroke-width: 2px
+  text.taxon-name
+    fill: var(--column-text-color)
+    transform: rotate(90deg) translate(0, 4px)
+    text-anchor: end
+    position: sticky
+    top: 0
+
+.taxon-ranges
+  position: relative
+  &>svg
+    position: absolute
+    height: 100%
+
+.taxon-labels
+  z-index: 10
+  position: absolute
+  width: 100%
+  height: 100%
+  pointer-events: none
+
+  .taxon-label
+    position: absolute
+    height: 100%
+
+  .taxon-label-inner
+    position: sticky
+    top: calc(var(--label-width, 200px) - 10px)
+    transform: rotate(-90deg) translate(10px, 8px)
+    transform-origin: bottom left
+    background-color: var(--column-background-color)
+
+  .taxon-label-text
+
     font-style: italic
+    text-align: left
+    padding: 0 8px
+    max-width: 300px
+    //position: sticky
+    //top: 200px

package/src/facets/fossils/index.ts

@@ -1,15 +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 { useRef } from "react";
 
 const h = hyper.styled(styles);
 
+export { FossilDataType };
+
 interface FossilItemProps {
   note: {
     data: PBDBCollection[];
@@ -28,93 +40,247 @@ function FossilInfo(props: FossilItemProps) {
   const { note, spacing } = props;
   const { data, unit } = note;
 
-  let d1 = data;
+  return h(TruncatedList, {
+    data,
+    className: "fossil-collections",
+    itemRenderer: PBDBCollectionLink,
+  });
+}
 
-  let tooMany = null;
-  if (data.length > 5) {
-    const n = data.length - 5;
-    d1 = data.slice(0, 5);
-    tooMany = h("li.too-many", `and ${n} more`);
-  }
+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,
+  );
+}
+
+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.fossil-collections", [
-    d1.map((d) => {
-      return h("li.collection", { key: d.cltn_id }, [
-        h(PBDBCollectionLink, { collection: 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({ collection }: { collection: 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=${collection.cltn_id}`,
+      style: {
+        top: `${top}px`,
+        marginLeft: `${left}px`,
+        "--label-width": `${labelWidth}px`,
+      },
     },
-    collection.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),
+      });
     }),
-  );
+  ]);
+}
+
+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,
+  };
+}
+
+function accumulatePresenceDomains(
+  unit: UnitLong[],
+  presenceUnits: Set<number>,
+  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;
 }