@macrostrat/column-views 2.0.1 → 2.1.0

package/src/facets/fossils/index.ts

@@ -0,0 +1,120 @@
+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 type { IUnit } from "../../units";
+import styles from "./index.module.sass";
+
+const h = hyper.styled(styles);
+
+interface FossilItemProps {
+  note: {
+    data: PBDBCollection[];
+    unit?: IUnit;
+  };
+  spacing?: {
+    below?: number;
+    above?: number;
+  };
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+function FossilInfo(props: FossilItemProps) {
+  const { note, spacing } = props;
+  const { data, unit } = note;
+
+  let d1 = data;
+
+  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`);
+  }
+
+  return h("ul.fossil-collections", [
+    d1.map((d) => {
+      return h("li.collection", { key: d.cltn_id }, [
+        h(PBDBCollectionLink, { collection: d }),
+      ]);
+    }),
+    tooMany,
+  ]);
+}
+
+function PBDBCollectionLink({ collection }: { collection: PBDBCollection }) {
+  return h(
+    "a.link-id",
+    {
+      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${collection.cltn_id}`,
+    },
+    collection.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(() => {
+    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]);
+
+  if (data == null || units == null) return null;
+
+  return h(
+    "div.dz-spectra",
+    h(ColumnNotes, {
+      width,
+      paddingLeft,
+      notes,
+      noteComponent,
+    }),
+  );
+}

package/src/facets/fossils/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);
+}

package/src/facets/index.ts

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

package/src/index.ts

@@ -1,10 +1,11 @@
 export * from "./units";
 export * from "./data-provider";
 export * from "./age-axis";
-export * from "./carbon-isotopes";
 export * from "./prepare-units";
 export * from "./column";
 export * from "./unit-details";
 export * from "./maps";
 export * from "./age-model-overlay";
 export * from "./correlation-chart";
+export * from "./notes";
+export * from "./facets";

package/src/maps/_shared/inset-map.stories.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import { InsetMap } from ".";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

package/src/maps/_shared/inset-map.ts

@@ -56,7 +56,7 @@ export function InsetMap({
       }
       return newStyle;
     },
-    [mapStyle, showLabels, showRoads, showAdmin]
+    [mapStyle, showLabels, showRoads, showAdmin],
   );
 
   return h("div.inset-map", { className, style }, [
@@ -80,7 +80,7 @@ export function InsetMap({
           transformStyle,
           ...rest,
         },
-        children
+        children,
       ),
     ]),
   ]);

package/src/maps/_shared/styles.ts

@@ -1,12 +1,14 @@
 import { getCSSVariable } from "@macrostrat/color-utils";
 import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import type { Style } from "mapbox-gl";
 
-export function buildColumnsStyle(color: string) {
+export function buildColumnsStyle(color: string): Style {
   const columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
   return {
     sources: {
       columns: buildGeoJSONSource(),
     },
+    version: 8,
     layers: [
       {
         id: "columns-fill",

package/src/maps/column-correlation/column-correlation-map.stories.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
@@ -11,7 +11,7 @@ import {
 } from ".";
 
 function ColumnCorrelationMapExt(
-  props: CorrelationMapProps & CorrelationProviderProps
+  props: CorrelationMapProps & CorrelationProviderProps,
 ) {
   const {
     focusedLine,
@@ -31,7 +31,7 @@ function ColumnCorrelationMapExt(
       projectID,
       inProcess,
     },
-    h(ColumnCorrelationMap, { accessToken: mapboxToken, ...rest })
+    h(ColumnCorrelationMap, { accessToken: mapboxToken, ...rest }),
   );
 }
 

package/src/maps/column-correlation/core.ts

@@ -1,14 +1,13 @@
-import { MapViewProps } from "@macrostrat/map-interface";
 import {
   useMapClickHandler,
   useMapEaseTo,
   useMapStyleOperator,
 } from "@macrostrat/mapbox-react";
-import { LngLatBounds } from "mapbox-gl";
+import { LngLatBounds, Style } from "mapbox-gl";
 import h from "@macrostrat/hyper";
 import { Feature, FeatureCollection } from "geojson";
 import { ReactNode, useMemo } from "react";
-import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 
 import { useCorrelationMapStore } from "./state";
 import { buildColumnsStyle, InsetMap, InsetMapProps } from "../_shared";
@@ -24,11 +23,11 @@ export interface CorrelationMapProps extends InsetMapProps {
 export function ColumnCorrelationMap(props: CorrelationMapProps) {
   const { padding = 50, children, columnColor, ...rest } = props;
 
-  const overlayStyles = useMemo(() => {
+  const overlayStyles: Partial<Style>[] = useMemo(() => {
     return [
-      buildColumnsStyle(columnColor),
-      selectedColumnsStyle,
-      lineOfSectionStyle,
+      buildColumnsStyle(columnColor) as Style,
+      selectedColumnsStyle as Style,
+      lineOfSectionStyle as Style,
     ];
   }, [columnColor]);
 
@@ -46,7 +45,7 @@ export function ColumnCorrelationMap(props: CorrelationMapProps) {
       h(MapClickHandler),
       h(SectionLine, { padding }),
       children,
-    ]
+    ],
   );
 }
 
@@ -57,7 +56,7 @@ function MapClickHandler() {
     (e) => {
       onClickMap(e, { type: "Point", coordinates: e.lngLat.toArray() });
     },
-    [onClickMap]
+    [onClickMap],
   );
 
   return null;
@@ -65,7 +64,7 @@ function MapClickHandler() {
 
 function SelectedColumnsLayer() {
   const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns
+    (state) => state.focusedColumns,
   );
 
   useMapStyleOperator(
@@ -82,7 +81,7 @@ function SelectedColumnsLayer() {
         geometry: {
           type: "LineString",
           coordinates: features.map(
-            (col) => col.properties.centroid.geometry.coordinates
+            (col) => col.properties.centroid.geometry.coordinates,
           ),
         },
         properties: {},
@@ -94,7 +93,7 @@ function SelectedColumnsLayer() {
         features: [columnCentroidLine],
       });
     },
-    [focusedColumns]
+    [focusedColumns],
   );
   return null;
 }
@@ -115,12 +114,13 @@ function ColumnsLayer({ enabled = true }) {
       console.log(" columns", data);
       setGeoJSON(map, "columns", data);
     },
-    [columns, enabled]
+    [columns, enabled],
   );
   return null;
 }
 
-const selectedColumnsStyle = {
+const selectedColumnsStyle: Style = {
+  version: 8,
   sources: {
     "selected-columns": buildGeoJSONSource(),
     "selected-column-centroids": buildGeoJSONSource(),
@@ -156,7 +156,8 @@ const selectedColumnsStyle = {
   ],
 };
 
-const lineOfSectionStyle = {
+const lineOfSectionStyle: Style = {
+  version: 8,
   sources: {
     elevationMarker: buildGeoJSONSource(),
     crossSectionLine: buildGeoJSONSource(),
@@ -165,16 +166,6 @@ const lineOfSectionStyle = {
   layers: buildCrossSectionLayers(),
 };
 
-function buildGeoJSONSource(data: FeatureCollection | null = null) {
-  return {
-    type: "geojson",
-    data: data ?? {
-      type: "FeatureCollection",
-      features: [],
-    },
-  };
-}
-
 function SectionLine({ padding }: { padding: number }) {
   const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
 
@@ -205,7 +196,7 @@ function SectionLine({ padding }: { padding: number }) {
         })),
       });
     },
-    [focusedLine]
+    [focusedLine],
   );
 
   const bounds = useMemo(() => {

package/src/maps/column-correlation/state.ts

@@ -34,7 +34,7 @@ export interface CorrelationProviderProps extends CorrelationMapInput {
   children: ReactNode;
   onSelectColumns?: (
     columns: FocusedColumnGeoJSONRecord[],
-    line: LineString | null
+    line: LineString | null,
   ) => void;
 }
 
@@ -85,7 +85,7 @@ export function ColumnCorrelationProvider({
             });
           },
         };
-      })
+      }),
     );
   });
 
@@ -110,7 +110,7 @@ export function ColumnCorrelationProvider({
 }
 
 export function useCorrelationMapStore(
-  selector: (state: CorrelationMapStore & ComputedStore) => any
+  selector: (state: CorrelationMapStore & ComputedStore) => any,
 ) {
   const storeApi = useContext(CorrelationStoreContext);
   if (storeApi == null) {
@@ -121,20 +121,20 @@ export function useCorrelationMapStore(
 
 function buildCorrelationColumns(
   columns: ColumnGeoJSONRecord[],
-  line: LineString
+  line: LineString,
 ): FocusedColumnGeoJSONRecord[] {
   if (columns == null || line == null || line.coordinates.length < 2) {
     return [];
   }
   return orderColumnsByDistance(
     computeIntersectingColumns(columns, line),
-    line
+    line,
   );
 }
 
 function computeIntersectingColumns(
   columns: ColumnGeoJSONRecord[],
-  line: LineString
+  line: LineString,
 ): ColumnGeoJSONRecord[] {
   if (columns == null || line == null) {
     return [];
@@ -162,14 +162,14 @@ interface FocusedColumnGeoJSONRecord extends ColumnGeoJSONRecord {
 
 function orderColumnsByDistance(
   columns: ColumnGeoJSONRecord[],
-  line: LineString
+  line: LineString,
 ): FocusedColumnGeoJSONRecord[] {
   const centroids = columns.map((col) => centroid(col.geometry));
   const projectedPoints = centroids.map((point) =>
-    nearestPointOnLine(line, point)
+    nearestPointOnLine(line, point),
   );
   const distances = projectedPoints.map((point) =>
-    distance(point.geometry.coordinates, line.coordinates[0])
+    distance(point.geometry.coordinates, line.coordinates[0]),
   );
 
   let newColumns = columns.map((col, i) => {

package/src/maps/column-navigation/mapbox/column-navigation-map.stories.ts

@@ -2,7 +2,7 @@ import h from "@macrostrat/hyper";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import { ColumnNavigationMap } from ".";
 import { useState } from "react";
 
@@ -28,6 +28,182 @@ export const ColumnNavigation = {
   },
 };
 
+export const ColumnNavigationFilterableByIds = {
+  args: {
+    showTriangulation: false,
+    columnIDs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+  },
+};
+
+const colData = [
+  {
+    id: 1,
+    type: "Feature",
+    geometry: {
+      type: "Polygon",
+      coordinates: [
+        [
+          [-86.9992, 34.6946],
+          [-86.9041, 35.4015],
+          [-86.5971, 35.4513],
+          [-86.1652, 35.0947],
+          [-86.1746, 34.7447],
+          [-86.5036, 34.4262],
+          [-86.6318, 34.4244],
+          [-86.9992, 34.6946],
+        ],
+      ],
+    },
+    properties: {
+      col_id: 2,
+      col_name: "Madison Co, Alabama",
+      col_group: "Southern Appalachians",
+      col_group_id: 17,
+      group_col_id: "1.00",
+      lat: "34.85300",
+      lng: "-86.56200",
+      col_area: "6345.4",
+      project_id: 1,
+      col_type: "column",
+      refs: [1],
+      max_thick: 2559,
+      max_min_thick: 2411,
+      min_min_thick: 529,
+      b_age: 1550,
+      t_age: 322.15,
+      b_int_name: "Calymmian",
+      t_int_name: "Morrowan",
+      pbdb_collections: 3,
+      lith: [
+        {
+          name: "mudstone",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.0041,
+          lith_id: 7,
+        },
+        {
+          name: "shale",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.2598,
+          lith_id: 8,
+        },
+        {
+          name: "siltstone",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.0107,
+          lith_id: 9,
+        },
+        {
+          name: "sandstone",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.0322,
+          lith_id: 10,
+        },
+        {
+          name: "limestone",
+          type: "carbonate",
+          class: "sedimentary",
+          prop: 0.4093,
+          lith_id: 30,
+        },
+        {
+          name: "dolomite",
+          type: "carbonate",
+          class: "sedimentary",
+          prop: 0.1132,
+          lith_id: 31,
+        },
+        {
+          name: "coal",
+          type: "organic",
+          class: "sedimentary",
+          prop: 0.0057,
+          lith_id: 38,
+        },
+        {
+          name: "chert",
+          type: "chemical",
+          class: "sedimentary",
+          prop: 0.0674,
+          lith_id: 45,
+        },
+        {
+          name: "granite",
+          type: "plutonic",
+          class: "igneous",
+          prop: 0.0379,
+          lith_id: 53,
+        },
+        {
+          name: "rhyolite",
+          type: "volcanic",
+          class: "igneous",
+          prop: 0.0076,
+          lith_id: 64,
+        },
+        {
+          name: "ash",
+          type: "volcanic",
+          class: "igneous",
+          prop: 0.0107,
+          lith_id: 75,
+        },
+        {
+          name: "quartz arenite",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.0207,
+          lith_id: 169,
+        },
+        {
+          name: "sublitharenite",
+          type: "siliciclastic",
+          class: "sedimentary",
+          prop: 0.0207,
+          lith_id: 199,
+        },
+      ],
+      environ: [
+        {
+          name: "marine",
+          type: "",
+          class: "marine",
+          prop: 0.0476,
+          environ_id: 38,
+        },
+        {
+          name: "fluvial-deltaic indet.",
+          type: "fluvial",
+          class: "non-marine",
+          prop: 0.0476,
+          environ_id: 57,
+        },
+        {
+          name: "inferred marine",
+          type: "",
+          class: "marine",
+          prop: 0.9048,
+          environ_id: 93,
+        },
+      ],
+      econ: [],
+      t_units: 22,
+      t_sections: 6,
+    },
+  },
+];
+
+export const ColumnNavigationFilterableByGeojson = {
+  args: {
+    showTriangulation: false,
+    columns: colData,
+  },
+};
+
 export const nonStandardProjectInProcess = {
   args: {
     padding: 100,