@macrostrat/column-views 2.0.1 → 2.1.1

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,

package/src/maps/column-navigation/mapbox/index.ts

@@ -32,15 +32,17 @@ export interface ColumnNavigationMapProps extends InsetMapProps {
 }
 
 export function ColumnNavigationMap(
-  props: ColumnNavigationMapProps & NavigationProviderProps
+  props: ColumnNavigationMapProps & NavigationProviderProps,
 ) {
   const {
     columns,
+    columnIDs,
     onSelectColumn,
     onHoverColumn,
     selectedColumn,
     hoveredColumn,
     projectID,
+    children,
     inProcess,
     ...rest
   } = props;
@@ -49,6 +51,7 @@ export function ColumnNavigationMap(
     ColumnNavigationProvider,
     {
       columns,
+      columnIDs,
       onSelectColumn,
       onHoverColumn,
       selectedColumn,
@@ -56,7 +59,7 @@ export function ColumnNavigationMap(
       projectID,
       inProcess,
     },
-    h(_ColumnNavigationMap, rest)
+    h(_ColumnNavigationMap, props),
   );
 }
 
@@ -89,23 +92,23 @@ function _ColumnNavigationMap(props: ColumnNavigationMapProps) {
     },
     [
       h(ColumnsLayer),
-      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
       children,
-    ]
+      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
+    ],
   );
 }
 
 function ColumnsLayer({ enabled = true }) {
   const columns = useColumnNavigationStore((state) => state.columns);
   const selectedColumn = useColumnNavigationStore(
-    (state) => state.selectedColumn
+    (state) => state.selectedColumn,
   );
   const hoveredColumn = useColumnNavigationStore(
-    (state) => state.hoveredColumn
+    (state) => state.hoveredColumn,
   );
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
   const setHoveredColumn = useColumnNavigationStore(
-    (state) => state.setHoveredColumn
+    (state) => state.setHoveredColumn,
   );
 
   useMapStyleOperator(
@@ -150,7 +153,7 @@ function ColumnsLayer({ enabled = true }) {
         map.off("click", layers, clickHandler);
       };
     },
-    [columns, enabled]
+    [columns, enabled],
   );
 
   const hoveredColumnRef = useRef(null);
@@ -162,17 +165,17 @@ function ColumnsLayer({ enabled = true }) {
         // Deselect previous column
         map.setFeatureState(
           { source: "columns", id: prevHoveredColumn },
-          { hover: false }
+          { hover: false },
         );
       }
       hoveredColumnRef.current = hoveredColumn;
       // Select the current column
       map.setFeatureState(
         { source: "columns", id: hoveredColumn },
-        { hover: true }
+        { hover: true },
       );
     },
-    [hoveredColumn, columns]
+    [hoveredColumn, columns],
   );
 
   /** Set feature state for selected columns */
@@ -187,7 +190,7 @@ function ColumnsLayer({ enabled = true }) {
         // Deselect previous column
         map.setFeatureState(
           { source: "columns", id: prevSelectedColumn },
-          { selected: false }
+          { selected: false },
         );
       }
 
@@ -196,12 +199,12 @@ function ColumnsLayer({ enabled = true }) {
       // Select the current column
       map.setFeatureState(
         { source: "columns", id: selectedColumn },
-        { selected: true }
+        { selected: true },
       );
 
       // Center the selected column
       const columnGeometry = columns.find(
-        (d) => d.id == selectedColumn
+        (d) => d.id == selectedColumn,
       )?.geometry;
       if (columnGeometry == null) return;
       const center = geoCentroid(columnGeometry);
@@ -212,7 +215,7 @@ function ColumnsLayer({ enabled = true }) {
         initialRenderRef.current = false;
       }
     },
-    [selectedColumn, columns]
+    [selectedColumn, columns],
   );
 
   return null;