Added SGP facet

Author: davenquinn

packages/column-views/src/facets/fossils/index.module.sass

@@ -1,4 +1,4 @@
-.fossil-collections
+.truncated-list
   padding-left: 0.2em
   font-size: 0.9em
   list-style: none

packages/column-views/src/facets/fossils/index.ts

@@ -7,6 +7,7 @@ import { ColumnNotes } from "../../notes";
 import { useMemo } from "react";
 import type { IUnit } from "../../units";
 import styles from "./index.module.sass";
+import { useCallback } from "react";
 
 const h = hyper.styled(styles);
 
@@ -28,39 +29,57 @@ function FossilInfo(props: FossilItemProps) {
   const { note, spacing } = props;
   const { data, unit } = note;
 
-  let d1 = data;
+  return h(TruncatedList, {
+    data,
+    className: "fossil-collections",
+    itemRenderer: PBDBCollectionLink,
+  });
+}
+
+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;
-  if (data.length > 5) {
-    const n = data.length - 5;
-    d1 = data.slice(0, 5);
+  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.fossil-collections", [
-    d1.map((d) => {
-      return h("li.collection", { key: d.cltn_id }, [
-        h(PBDBCollectionLink, { collection: d }),
-      ]);
+  return h("ul.truncated-list", { className }, [
+    d1.map((d, i) => {
+      return h("li.element", { key: i }, h(itemRenderer, { data: d }));
     }),
     tooMany,
   ]);
 }
 
-function PBDBCollectionLink({ collection }: { collection: PBDBCollection }) {
+function PBDBCollectionLink({ data }: { data: PBDBCollection }) {
   return h(
     "a.link-id",
     {
-      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${collection.cltn_id}`,
+      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${data.cltn_id}`,
     },
-    collection.cltn_name,
+    data.cltn_name,
   );
 }
 
 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(() => {
@@ -118,3 +137,76 @@ export function PBDBFossilsColumn({ columnID, color = "magenta" }) {
     }),
   );
 }
+
+interface BaseMeasurementsColumnProps<T> {
+  data: T[];
+  noteComponent?: any;
+  width?: number;
+  paddingLeft?: number;
+  className?: string;
+  getUnitID?: (d: T) => number | string;
+}
+
+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],
+  );
+
+  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,
+    }),
+  );
+}

packages/column-views/src/facets/index.ts

@@ -1,3 +1,4 @@
 export * from "./fossils";
 export * from "./detrital-zircon";
 export * from "./carbon-isotopes";
+export * from "./measurements";

packages/column-views/src/facets/measurements/index.ts

@@ -0,0 +1,39 @@
+import h from "@macrostrat/hyper";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { BaseMeasurementsColumn, TruncatedList } from "../fossils";
+
+function useSGPData({ col_id }) {
+  const res = useAPIResult(
+    "https://macrostrat.local/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),
+  });
+}

packages/column-views/src/facets/measurements/provider.ts

@@ -0,0 +1,80 @@
+import { group } from "d3-array";
+import { createAPIContext, useAPIResult } from "@macrostrat/ui-components";
+
+const responseUnwrapper = (d) => d.records;
+
+const pbdbAPIContext = createAPIContext({
+  baseURL: "https://training.paleobiodb.org/data1.2",
+  unwrapResponse: responseUnwrapper,
+});
+
+export enum FossilDataType {
+  Occurrences = "occs",
+  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 PBDBCollection {
+  unit_id: number;
+  col_id: number;
+  cltn_id: number;
+  cltn_name: string;
+  pbdb_occs: number;
+  t_age: number;
+  b_age: number;
+  [key: string]: any; // Allow for additional properties
+}
+
+function useMacrostratFossilData({ col_id }): PBDBCollection[] | null {
+  return useAPIResult("/fossils", { col_id });
+}
+
+function createMacrostratCollection(d): PBDBCollection {
+  let unit_id = null;
+  let col_id = null;
+  // Standardize names of Macrostrat units and columns
+  if (d.msu !== null) {
+    unit_id = parseInt(d.msu.replace(/^\w+:/, ""));
+  }
+  if (d.msc !== null) {
+    col_id = parseInt(d.msc.replace(/^\w+:/, ""));
+  }
+
+  return {
+    ...d,
+    unit_id,
+    col_id,
+    cltn_id: parseInt(d.oid.replace(/^col:/, "")),
+    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);
+}

packages/column-views/stories/facets/sgp.stories.ts

@@ -0,0 +1,65 @@
+import {
+  ColoredUnitComponent,
+  MacrostratDataProvider,
+  SGPMeasurementsColumn,
+} from "../../src";
+import h from "@macrostrat/hyper";
+import { StandaloneColumn } from "../column-ui";
+import { Meta } from "@storybook/react-vite";
+import { ColumnAxisType } from "@macrostrat/column-components";
+
+function SGPMeasurementsDemoColumn(props) {
+  const { id, children, spectraColor, ...rest } = props;
+
+  return h(
+    MacrostratDataProvider,
+    h(
+      StandaloneColumn,
+      {
+        id,
+        showTimescale: false,
+        showLabelColumn: false,
+        allowUnitSelection: false,
+        ...rest,
+      },
+      h(SGPMeasurementsColumn, { columnID: id, color: spectraColor }),
+    ),
+  );
+}
+
+export default {
+  title: "Column views/Facets/SGP Samples",
+  component: SGPMeasurementsDemoColumn,
+  tags: ["!autodocs"],
+  argTypes: {
+    axisType: {
+      options: ["age", "depth"],
+      control: { type: "radio" },
+    },
+  },
+} as Meta;
+
+export const ParadoxBasin = {
+  args: {
+    id: 495,
+  },
+};
+
+export const UintaBasin = {
+  args: {
+    id: 502,
+  },
+};
+
+export const BighornBasinColored = {
+  args: {
+    id: 515,
+    showTimescale: true,
+    allowUnitSelection: true,
+    unitComponent: ColoredUnitComponent,
+    spectraColor: "lightgreen",
+    showUnitPopover: true,
+    collapseSmallUnconformities: true,
+    keyboardNavigation: true,
+  },
+};