Updated SGP facet visualizations

Author: davenquinn

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

@@ -4,7 +4,7 @@ import { BaseMeasurementsColumn, TruncatedList } from "../fossils";
 
 function useSGPData({ col_id }) {
   const res = useAPIResult(
-    "https://macrostrat.local/api/pg/sgp_unit_matches",
+    "https://dev.macrostrat.org/api/pg/sgp_unit_matches",
     {
       col_id: `eq.${col_id}`,
     },

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

@@ -1,12 +1,17 @@
 import {
   ColoredUnitComponent,
+  ColumnNavigationMap,
   MacrostratDataProvider,
+  MeasurementDataProvider,
   SGPMeasurementsColumn,
+  useColumnNav,
 } from "../../src";
 import h from "@macrostrat/hyper";
 import { StandaloneColumn } from "../column-ui";
 import { Meta } from "@storybook/react-vite";
 import { ColumnAxisType } from "@macrostrat/column-components";
+import { FlexRow } from "@macrostrat/ui-components";
+import { useColumnSelection } from "../column-ui/utils";
 
 function SGPMeasurementsDemoColumn(props) {
   const { id, children, spectraColor, ...rest } = props;
@@ -36,6 +41,14 @@ export default {
       options: ["age", "depth"],
       control: { type: "radio" },
     },
+    columnID: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+  args: {
+    columnID: 432,
   },
 } as Meta;
 
@@ -63,3 +76,49 @@ export const BighornBasinColored = {
     keyboardNavigation: true,
   },
 };
+
+export const BonnetPlumeBasinColored = {
+  args: {
+    id: 1657,
+    showTimescale: true,
+    allowUnitSelection: true,
+    unitComponent: ColoredUnitComponent,
+    spectraColor: "lightgreen",
+    showUnitPopover: true,
+    collapseSmallUnconformities: true,
+    keyboardNavigation: true,
+  },
+};
+
+export function SGPCompilationWithNavigation(defaultArgs) {
+  const { columnID, setColumn } = useColumnSelection();
+
+  return h(
+    MacrostratDataProvider,
+    h(MeasurementDataProvider, { col_id: columnID }, [
+      h("h2", "Macrostrat columns matched to SGP samples"),
+      h(FlexRow, { className: "column-ui", margin: "2em", gap: "1em" }, [
+        h(ColumnNavigationMap, {
+          style: { width: 400, height: 500 },
+          onSelectColumn: (e) => setColumn(e),
+          selectedColumn: columnID,
+          accessToken: import.meta.env.VITE_MAPBOX_API_TOKEN,
+        }),
+        h(
+          StandaloneColumn,
+          {
+            id: columnID,
+            showLabelColumn: false,
+            showTimescale: true,
+            allowUnitSelection: true,
+            unitComponent: ColoredUnitComponent,
+            showUnitPopover: true,
+            collapseSmallUnconformities: true,
+            keyboardNavigation: true,
+          },
+          h(SGPMeasurementsColumn, { columnID }),
+        ),
+      ]),
+    ]),
+  );
+}