@macrostrat/column-views 2.2.2 → 2.3.1

package/src/facets/fossils/taxon-ranges.ts

@@ -0,0 +1,220 @@
+import hyper from "@macrostrat/hyper";
+import { FossilDataType, PBDBOccurrence, useFossilData } from "./provider";
+import { Box, useElementSize } from "@macrostrat/ui-components";
+import { group } 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 "./taxon-ranges.module.sass";
+import { useRef } from "react";
+
+const h = hyper.styled(styles);
+
+export { FossilDataType };
+
+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);
+  const col = useMacrostratColumnData();
+  const scale = useCompositeScale();
+
+  if (data == null) return null;
+
+  const data1 = group(data, (d) => d.unit_id);
+
+  // convert the data to a map
+  const occurrenceMap = new Map(data1);
+
+  const matrix = createOccurrenceMatrix(col.units, occurrenceMap, col.axisType);
+
+  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),
+              });
+            }),
+          ]);
+        }),
+      ),
+    ),
+  ]);
+}
+
+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,
+      });
+    }),
+  ]);
+}
+
+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)),
+  );
+}
+
+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(
+  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;
+}

package/src/facets/index.ts

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

package/src/facets/{base-sample-column.module.sass → measurements/base.module.sass}

@@ -4,6 +4,7 @@
   list-style: none
   border-left: 1px solid var(--column-stroke-color)
   margin: 1px 0
+  background-color: var(--column-background-color)
   li
     display: inline
     &:not(:last-child):after

package/src/facets/measurements/base.ts

@@ -0,0 +1,215 @@
+import hyper from "@macrostrat/hyper";
+import styles from "./base.module.sass";
+import { getPositionWithinUnit, getUnitHeightRange } from "../../prepare-units";
+import { ColumnNotes } from "../../notes";
+import { UnitLong } from "@macrostrat/api-types";
+import { ColumnAxisType } from "@macrostrat/column-components";
+import type { CompositeColumnScale } from "../../units";
+const h = hyper.styled(styles);
+
+type GetHeightRangeFn<T> = (
+  data: T,
+  unit: UnitLong | null,
+  axisType: ColumnAxisType,
+) => MeasurementHeightData;
+
+export interface BaseMeasurementsColumnProps<T> {
+  data: T[];
+  noteComponent?: any;
+  width?: number;
+  paddingLeft?: number;
+  className?: string;
+  // TODO: these props are confusing
+  getUnitID?: (d: T) => number | string;
+  isMatchingUnit?: (d: T, unit: UnitLong) => boolean;
+  getHeightRange?: GetHeightRangeFn<T>;
+  deltaConnectorAttachment?: number;
+}
+
+export interface ColumnMeasurementData<T = any> extends MeasurementHeightData {
+  data: T;
+  id: string | number;
+}
+
+type MeasurementPositionInformation =
+  | MeasurementHeightData
+  | {
+      unit_id: number;
+      unit_rel_pos?: number;
+    };
+
+export function standardizeMeasurementHeight(
+  pos: MeasurementPositionInformation,
+  units: UnitLong[],
+  axisType: ColumnAxisType,
+): MeasurementHeightData | null {
+  /** Get a standardized height representation from position information for
+   * a measurement
+   */
+  if ("height" in pos) {
+    return pos;
+  }
+  const unit = units.find((u) => u.unit_id === pos.unit_id);
+  if (unit == null) {
+    return null;
+  }
+  if (pos.unit_rel_pos != null) {
+    const res = getPositionWithinUnit(pos.unit_rel_pos, unit, axisType);
+    if (res == null) return null;
+    return { height: res };
+  } else {
+    const [height, top_height] = getUnitHeightRange(unit, axisType);
+    return { height, top_height };
+  }
+}
+
+export function mergeHeightRanges(
+  data: MeasurementHeightData[],
+  axisType: ColumnAxisType,
+): MeasurementHeightData {
+  /** Merge multiple height ranges into a single range */
+  const heights = [];
+
+  for (const d of data) {
+    heights.push(d.height);
+    if (d.top_height != null) {
+      heights.push(d.top_height);
+    }
+  }
+
+  let height: number;
+  let top_height: number;
+  if (axisType === ColumnAxisType.AGE || axisType === ColumnAxisType.DEPTH) {
+    height = Math.max(...heights);
+    top_height = Math.min(...heights);
+  } else {
+    height = Math.min(...heights);
+    top_height = Math.max(...heights);
+  }
+
+  if (top_height === height) {
+    return { height };
+  }
+  return { height, top_height };
+}
+
+export type MeasurementHeightData = {
+  height: number;
+  top_height?: number | null;
+};
+
+export function BaseMeasurementsColumn({
+  data,
+  noteComponent,
+  width = 500,
+  paddingLeft = 40,
+  className,
+  deltaConnectorAttachment,
+  focusedNoteComponent,
+}: BaseMeasurementsColumnProps<any>) {
+  if (data == null) return null;
+
+  return h(
+    "div.measurements-column",
+    { className },
+    h(ColumnNotes, {
+      width,
+      paddingLeft,
+      notes: data,
+      noteComponent,
+      deltaConnectorAttachment,
+      focusedNoteComponent,
+    }),
+  );
+}
+
+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,
+  ]);
+}
+
+export function groupNotesByPixelDistance<T = any>(
+  data: ColumnMeasurementData<T[]>[],
+  scale: CompositeColumnScale,
+  axisType: ColumnAxisType,
+  groupDistance: number,
+) {
+  /** Group notes that are within a certain pixel distance of each other
+   * in display space
+   */
+  if (data.length === 0 || groupDistance <= 0) return data;
+  if (axisType === ColumnAxisType.AGE || axisType === ColumnAxisType.DEPTH) {
+    data.sort((a, b) => b.height - a.height);
+  } else {
+    // Sort data by height (ascending up the column)
+    data.sort((a, b) => a.height - b.height);
+  }
+
+  const groupedData: ColumnMeasurementData<T[]>[] = [];
+  let currentGroup: ColumnMeasurementData<T[]> | null = null;
+  let currentGroupPosition: number = Infinity;
+
+  for (const d of data) {
+    // Check distance from current max position
+    // Pixels go up as we go down in the section
+
+    // The _top_ of the next group must be within groupDistance of the
+    // _bottom_ of the current group. This makes sure that we don't collapse
+    // groups that are separated by a large distance
+    const distance = currentGroupPosition - scale(d.top_height ?? d.height);
+
+    if (distance <= groupDistance) {
+      if (currentGroup == null) {
+        throw new Error("Current group is null when it shouldn't be");
+      }
+      // Merge into current group
+      currentGroup.data.push(...d.data);
+      // Update height range
+      const top_height = d.top_height ?? d.height;
+      if (
+        axisType === ColumnAxisType.AGE ||
+        axisType === ColumnAxisType.DEPTH
+      ) {
+        // Inverted axis
+        currentGroup.top_height = Math.min(currentGroup.top_height, top_height);
+      } else {
+        currentGroup.top_height = Math.max(currentGroup.top_height, top_height);
+      }
+      currentGroup.key = `${currentGroup.height}-${currentGroup.top_height}`;
+    } else {
+      // Start a new group
+      currentGroup = { ...d, data: [...d.data] };
+      currentGroupPosition =
+        scale(currentGroup.height) ??
+        scale(currentGroup.top_height) ??
+        Infinity;
+      groupedData.push(currentGroup);
+    }
+  }
+
+  return groupedData;
+}

package/src/facets/measurements/index.ts

@@ -1,38 +1,2 @@
-import h from "@macrostrat/hyper";
-import { useAPIResult } from "@macrostrat/ui-components";
-import { BaseMeasurementsColumn, TruncatedList } from "../base-sample-column";
-
-function useSGPData({ col_id }) {
-  const res = useAPIResult(
-    "https://dev.macrostrat.org/api/pg/sgp_unit_matches",
-    {
-      col_id: `eq.${col_id}`,
-    },
-    (d) => d,
-  );
-  return res;
-}
-
-export function SGPMeasurementsColumn({ columnID, color = "magenta" }) {
-  const data = useSGPData({ col_id: columnID });
-
-  if (data == null) return null;
-
-  return h(BaseMeasurementsColumn, {
-    data,
-    noteComponent: SGPSamplesNote,
-  });
-}
-
-function SGPSamplesNote(props) {
-  const { note } = props;
-  const sgp_samples = note?.data?.sgp_samples;
-
-  if (sgp_samples == null || sgp_samples.length === 0) return null;
-
-  return h(TruncatedList, {
-    className: "sgp-samples",
-    data: sgp_samples,
-    itemRenderer: (p) => h("span", p.data.name),
-  });
-}
+export * from "./base";
+export * from "./sgp";

package/src/facets/measurements/sgp.ts

@@ -0,0 +1,91 @@
+import h from "@macrostrat/hyper";
+import { useAPIResult } from "@macrostrat/ui-components";
+import {
+  BaseMeasurementsColumn,
+  groupNotesByPixelDistance,
+  standardizeMeasurementHeight,
+  TruncatedList,
+} from "./base";
+import { UnitLong } from "@macrostrat/api-types";
+import { ColumnAxisType } from "@macrostrat/column-components";
+import {
+  useCompositeScale,
+  useMacrostratColumnData,
+} from "../../data-provider";
+import { CompositeColumnScale } from "../../prepare-units/composite-scale";
+
+function useSGPData({ col_id }) {
+  const res = useAPIResult(
+    "https://dev.macrostrat.org/api/pg/sgp_unit_matches",
+    {
+      col_id: `eq.${col_id}`,
+    },
+    (d) => d,
+  );
+  return res;
+}
+
+interface SGPSampleData {
+  col_id: number;
+  unit_id: number;
+  sgp_samples: { name: string; id: number }[];
+}
+
+export function SGPMeasurementsColumn({ columnID, color = "magenta" }) {
+  const data: SGPSampleData[] | null = useSGPData({ col_id: columnID });
+  const { axisType, units } = useMacrostratColumnData();
+  const scale = useCompositeScale();
+
+  if (data == null || units == null || scale == null) return null;
+
+  const data1 = prepareSGPData(data, scale, units, axisType);
+
+  return h(BaseMeasurementsColumn, {
+    data: data1,
+    noteComponent: SGPSamplesNote,
+    focusedNoteComponent: SGPSamplesNote,
+  });
+}
+
+function SGPSamplesNote(props) {
+  const { note, focused } = props;
+  const sgp_samples = note?.data;
+
+  if (sgp_samples == null || sgp_samples.length === 0) return null;
+
+  return h(TruncatedList, {
+    className: "sgp-samples",
+    data: sgp_samples,
+    itemRenderer: (p) => h("span", p.data.name),
+    maxItems: focused ? Infinity : 5,
+  });
+}
+
+function prepareSGPData(
+  data: SGPSampleData[],
+  scale: CompositeColumnScale,
+  units: UnitLong[],
+  axisType: ColumnAxisType,
+) {
+  // Find matching units for samples
+  const d1 = data
+    .map((sample) => {
+      const data = sample.sgp_samples;
+      if (data == null || data.length === 0) return null;
+      const heightData = standardizeMeasurementHeight(
+        { unit_id: sample.unit_id },
+        units,
+        axisType,
+      );
+      if (heightData == null) return null;
+      data.sort((a, b) => a.id - b.id);
+      return {
+        ...heightData,
+        data,
+        id: sample.unit_id,
+      };
+    })
+    .filter(Boolean);
+
+  return groupNotesByPixelDistance(d1, scale, axisType, 5);
+}

package/src/notes.ts

@@ -2,9 +2,9 @@ import h from "@macrostrat/hyper";
 
 import { ColumnNotesProvider } from "./units";
 
-import { StaticNotesColumn, SVG } from "@macrostrat/column-components";
+import { NotesColumn, SVG } from "@macrostrat/column-components";
 import { useCompositeScale, useMacrostratColumnData } from "./data-provider";
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 interface ColumnNotesProps {
   notes: any[];
@@ -13,6 +13,7 @@ interface ColumnNotesProps {
   paddingLeft?: number;
   deltaConnectorAttachment?: number;
   children?: ReactNode;
+  focusedNoteComponent?: ComponentType<any> | null;
 }
 
 export function ColumnNotes({
@@ -21,6 +22,7 @@ export function ColumnNotes({
   noteComponent,
   paddingLeft = 60,
   deltaConnectorAttachment,
+  focusedNoteComponent,
   children,
 }: ColumnNotesProps) {
   const { totalHeight } = useMacrostratColumnData();
@@ -35,12 +37,13 @@ export function ColumnNotes({
     },
     [
       h(SVG, { width, height: totalHeight, paddingH: 4 }, [
-        h(StaticNotesColumn, {
+        h(NotesColumn, {
           width,
           notes,
           noteComponent,
           paddingLeft,
           deltaConnectorAttachment,
+          focusedNoteComponent,
         }),
       ]),
       children,

package/src/prepare-units/index.ts

@@ -57,15 +57,19 @@ export function prepareColumnUnits(
     scale,
   } = options;
 
+  let _totalHeight = null;
+
   if (scale != null) {
     // Set t_age and b_age based on scale domain if not already set
     const domain = scale.domain();
     if (axisType == ColumnAxisType.AGE) {
       if (t_age == null) t_age = Math.min(...domain);
       if (b_age == null) b_age = Math.max(...domain);
+      _totalHeight = Math.abs(scale(b_age) - scale(t_age));
     } else {
       if (t_pos == null) t_pos = Math.min(...domain);
       if (b_pos == null) b_pos = Math.max(...domain);
+      _totalHeight = Math.abs(scale(b_pos) - scale(t_pos));
     }
   }
 
@@ -166,7 +170,9 @@ export function prepareColumnUnits(
     );
   }
 
-  /** Prepare section scale information using groups */
+  /** Prepare section scale information using groups.
+   * Total height is computed from section scales.
+   * */
   let { totalHeight, sections: sections2 } = finalizeSectionHeights(
     sectionsWithScales,
     unconformityHeight,
@@ -197,7 +203,7 @@ export function prepareColumnUnits(
 
   return {
     units: units2,
-    totalHeight,
+    totalHeight: _totalHeight ?? totalHeight,
     sections: sectionsOut,
   };
 }