@macrostrat/column-views 1.0.3 → 2.0.1

package/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -0,0 +1,192 @@
+import { Meta } from "@storybook/react";
+import "@macrostrat/style-system";
+import { useArgs } from "@storybook/preview-api";
+import { useCallback } from "react";
+import {
+  ColumnCorrelationMap,
+  ColumnCorrelationProvider,
+  fetchUnits,
+  useCorrelationMapStore,
+} from "@macrostrat/column-views";
+import { hyperStyled } from "@macrostrat/hyper";
+
+import styles from "./stories.module.sass";
+import { CorrelationChart, CorrelationChartProps } from "../main";
+import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { parseLineFromString, stringifyLine } from "../hash-string";
+
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+const h = hyperStyled(styles);
+
+function CorrelationStoryUI({
+  focusedLine,
+  setFocusedLine,
+  columnID,
+  setColumn,
+  selectedUnit,
+  setSelectedUnit,
+  inProcess,
+  projectID,
+  ...rest
+}: any) {
+  return h(
+    ColumnCorrelationProvider,
+    {
+      focusedLine,
+      columns: null,
+      onSelectColumns(cols, line) {
+        setFocusedLine(line);
+      },
+    },
+    h("div.correlation-ui", [
+      h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
+      h("div.right-column", [
+        h(ColumnCorrelationMap, {
+          accessToken: mapboxToken,
+          className: "correlation-map",
+          //showLogo: false,
+        }),
+      ]),
+    ])
+  );
+}
+
+function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
+  /** This state management is a bit too complicated, but it does kinda sorta work */
+
+  // Sync focused columns with map
+  const focusedColumns = useCorrelationMapStore(
+    (state) => state.focusedColumns
+  );
+
+  const columnUnits = useAsyncMemo(async () => {
+    const col_ids = focusedColumns.map((col) => col.properties.col_id);
+    return await fetchUnits(col_ids);
+  }, [focusedColumns]);
+
+  return h("div.correlation-diagram", [
+    h(
+      ErrorBoundary,
+      h(OverlaysProvider, [
+        h(CorrelationChart, { data: columnUnits, ...props }),
+      ])
+    ),
+  ]);
+}
+
+export default {
+  title: "Column views/Correlation chart",
+  component: CorrelationStoryUI,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "Correlation chart for Macrostrat columns",
+      },
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
+  args: {
+    focusedLine: "-100,45 -90,50",
+    columnSpacing: 0,
+    columnWidth: 100,
+    collapseSmallUnconformities: false,
+    targetUnitHeight: 20,
+  },
+  argTypes: {
+    selectedUnit: {
+      control: {
+        type: "number",
+      },
+    },
+    t_age: {
+      control: {
+        type: "number",
+      },
+    },
+    b_age: {
+      control: {
+        type: "number",
+      },
+    },
+    columnSpacing: {
+      control: {
+        type: "number",
+      },
+    },
+    columnWidth: {
+      control: {
+        type: "number",
+      },
+    },
+    mergeSections: {
+      options: ["all", "overlapping", null],
+      control: { type: "radio" },
+    },
+    pixelScale: {
+      control: {
+        type: "number",
+      },
+    },
+    collapseSmallUnconformities: {
+      control: {
+        type: "boolean",
+      },
+    },
+    minSectionHeight: {
+      control: {
+        type: "number",
+      },
+    },
+    targetUnitHeight: {
+      control: {
+        type: "number",
+      },
+    },
+    showLabelColumn: {
+      control: {
+        type: "boolean",
+      },
+    },
+    maxInternalColumns: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+} as Meta<typeof CorrelationStoryUI>;
+
+function useCorrelationLine() {
+  const [{ focusedLine, selectedUnit }, updateArgs] = useArgs();
+  const setFocusedLine = (line) => {
+    updateArgs({ focusedLine: stringifyLine(line) });
+  };
+
+  const setSelectedUnit = useCallback(
+    (selectedUnit) => {
+      updateArgs({ selectedUnit });
+    },
+    [updateArgs]
+  );
+
+  return {
+    focusedLine: parseLineFromString(focusedLine),
+    setFocusedLine,
+    selectedUnit,
+    setSelectedUnit,
+  };
+}
+
+function Template(args) {
+  return h(CorrelationStoryUI, {
+    ...args,
+    ...useCorrelationLine(),
+  });
+}
+
+export const Primary = Template.bind({});

package/src/correlation-chart/stories/stories.module.sass

@@ -0,0 +1,18 @@
+.column-ui
+  height: 100%
+  width: 100%
+  overflow: scroll
+
+.correlation-container
+  padding: 2em calc(350px + 2em) 2em 2em
+  width: fit-content
+
+.right-column
+  width: 350px
+  position: fixed
+  top: 0
+  right: 0
+  padding: 1em
+
+.column-selector-map, .correlation-map
+  height: 350px

package/src/correlation-chart/unconformity-line.module.sass

@@ -0,0 +1,8 @@
+.unconformity-line
+  height: 1em
+  margin-top: -0.5em
+  margin-bottom: -0.5em
+
+  path
+    stroke: var(--secondary-color)
+    stroke-width: 1px

package/src/correlation-chart/unconformity-line.ts

@@ -0,0 +1,25 @@
+import hyper from "@macrostrat/hyper";
+import styles from "./unconformity-line.module.sass";
+
+const h = hyper.styled(styles);
+
+export function UnconformityLine({ width }) {
+  return h("div.unconformity-line", [h(UnconformityLineSVG, { width })]);
+}
+
+function UnconformityLineSVG({ width }) {
+  // Path with a repeating squiggly stroke filling width
+
+  let d = "M0 5 Q2.5 2 5 5";
+
+  for (let i = 10; i < width; i += 5) {
+    d += ` T${i} 5`;
+  }
+
+  return h("svg", { width, height: 10 }, [
+    h("path", {
+      d,
+      fill: "none",
+    }),
+  ]);
+}

package/src/data-provider/base.ts

@@ -0,0 +1,388 @@
+/** Data provider for information that needs to be loaded in bulk for frontend views */
+import baseFetch from "cross-fetch";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import h from "@macrostrat/hyper";
+import { create, useStore } from "zustand";
+import {
+  ColumnGeoJSONRecord,
+  ColumnGeoJSONRecordWithID,
+  Environment,
+  MacrostratRef,
+} from "@macrostrat/api-types";
+import {
+  fetchAllColumns,
+  fetchEnvironments,
+  fetchIntervals,
+  fetchLithologies,
+  fetchRefs,
+} from "./fetch";
+import { APIProvider } from "@macrostrat/ui-components";
+import { ColumnProvider } from "@macrostrat/column-components";
+
+import { ReactNode } from "react";
+import { useMacrostratColumnData } from "./store";
+
+export interface MacrostratDataProviderProps {
+  baseURL: string;
+  children: React.ReactNode;
+}
+
+interface ColumnFootprintsStorage {
+  project_id: number;
+  // Whether the "in process" flag was used
+  inProcess: boolean;
+  // The column footprints
+  columns: ColumnGeoJSONRecordWithID[];
+}
+
+interface RefsSlice {
+  refs: Map<number, MacrostratRef>;
+  inFlightRequests: Set<string>; // Track requests to avoid duplicates
+  getRefs(ids: number[]): Promise<MacrostratRef[]>;
+}
+
+interface MacrostratStore extends RefsSlice {
+  baseURL: string;
+  fetch: any;
+  lithologies: Map<number, any> | null;
+  getLithologies(ids: number[] | null): Promise<any>;
+  intervals: Map<number, any> | null;
+  getIntervals(ids: number[] | null, timescaleID: number | null): Promise<any>;
+  environments: Map<number, Environment> | null;
+  getEnvironments(ids: number[] | null): Promise<Environment[]>;
+  columnFootprints: Map<number, ColumnFootprintsStorage>;
+  getColumns(
+    projectID: number | null,
+    inProcess: boolean
+  ): Promise<ColumnGeoJSONRecord[]>;
+}
+
+function createMacrostratStore(
+  baseURL: string = "https://macrostrat.org/api/v2"
+) {
+  return create<MacrostratStore>((set, get): MacrostratStore => {
+    return {
+      baseURL,
+      inFlightRequests: new Set(),
+      async fetch(url: string, options?: RequestInit) {
+        const url1 = baseURL + url;
+        // Avoid duplicate requests
+        const { inFlightRequests } = get();
+        if (inFlightRequests.has(url1)) {
+          return null; // Return null if already in flight
+        }
+        inFlightRequests.add(url1);
+        //set({ inFlightRequests });
+        const res = await baseFetch(url1, options);
+        inFlightRequests.delete(url1);
+        //set({in})
+        return res;
+      },
+      ...createLithologiesSlice(set, get),
+      ...createIntervalsSlice(set, get),
+      ...createEnvironmentsSlice(set, get),
+      ...createColumnsSlice(set, get),
+      ...createRefsSlice(set, get),
+    };
+  });
+}
+
+function createRefsSlice(set, get) {
+  return {
+    refs: new Map(),
+    async getRefs(ids: number[]): Promise<MacrostratRef[]> {
+      const { refs, fetch } = get();
+      const missing = ids.filter((id) => !refs.has(id));
+      if (missing.length == 0) {
+        return ids.map((id) => refs.get(id));
+      }
+      const data = await fetchRefs(missing, fetch);
+      if (data == null) return [];
+      for (const d of data) {
+        refs.set(d.ref_id, d);
+      }
+      set({ refs });
+      return ids.map((id) => refs.get(id));
+    },
+  };
+}
+
+function createColumnsSlice(set, get) {
+  // Column footprints separated by project
+  return {
+    columnFootprints: new Map(),
+    async getColumns(projectID: number | null, inProcess: boolean) {
+      const { columnFootprints, baseURL, fetch } = get();
+      const key = projectID ?? -1;
+      let _inProcess = inProcess;
+      if (projectID == null) {
+        // If no project is specified, in process columns cannot be included
+        _inProcess = false;
+      }
+      let footprints = columnFootprints.get(key);
+      if (footprints == null || footprints.inProcess != _inProcess) {
+        // Fetch the columns
+        const statusCode = inProcess ? "in process" : null;
+        let columns = await fetchAllColumns({
+          projectID,
+          statusCode: null,
+          fetch,
+        });
+        if (columns == null) {
+          return;
+        }
+        if (_inProcess) {
+          const inProcessColumns = await fetchAllColumns({
+            projectID,
+            statusCode: "in process",
+            fetch,
+          });
+          if (inProcessColumns == null) {
+            return;
+          }
+          // Combine active and in-process columns
+          columns = columns.concat(inProcessColumns);
+        }
+
+        footprints = {
+          project_id: projectID,
+          inProcess,
+          columns,
+        };
+        // We could break multi-project result sets into separate caches here...
+        // Copy the original map
+        const columnFootprints2 = new Map(columnFootprints);
+        columnFootprints2.set(key, footprints);
+        set({ columnFootprints: columnFootprints2 });
+      }
+      return footprints.columns;
+    },
+  };
+}
+
+function createLithologiesSlice(set, get) {
+  return {
+    lithologies: null,
+    async getLithologies(ids: number[] | null) {
+      const { lithologies, fetch } = get();
+      let lithMap = lithologies;
+      if (lithMap == null) {
+        const data = await fetchLithologies(fetch);
+        if (data == null) return;
+        lithMap = new Map(data.map((d) => [d.lith_id, d]));
+        set({ lithologies: lithMap });
+      }
+      // Now get the lithologies
+      if (ids == null) return lithMap.values();
+      return ids.map((id) => lithMap.get(id));
+    },
+  };
+}
+
+function createEnvironmentsSlice(set, get) {
+  return {
+    environments: null,
+    async getEnvironments(ids: number[] | null): Promise<Environment[]> {
+      const { environments, fetch } = get();
+      let envMap = environments;
+      if (envMap == null) {
+        const data = await fetchEnvironments(fetch);
+        if (data == null) return [];
+        envMap = new Map(data.map((d) => [d.environ_id, d]));
+        set({ environments: envMap });
+      }
+      // Now get the environments
+      if (ids == null) return envMap.values();
+      return ids.map((id) => envMap.get(id));
+    },
+  };
+}
+
+function createIntervalsSlice(set, get) {
+  return {
+    intervals: null,
+    async getIntervals(ids: number[] | null, timescaleID: number | null) {
+      const { intervals, fetch } = get();
+      let _intervals = intervals;
+      if (intervals == null || !includesTimescale(intervals, timescaleID)) {
+        // Fetch the intervals
+        const data = await fetchIntervals(timescaleID, fetch);
+        if (data == null) {
+          return [];
+        }
+        const intervalMap = intervals ?? new Map();
+        for (const d of data) {
+          intervalMap.set(d.int_id, d);
+        }
+        _intervals = intervalMap;
+        set({ intervals: _intervals });
+      }
+      if (ids == null && timescaleID == null)
+        return Array.from(_intervals.values());
+      if (timescaleID != null) {
+        return Array.from(_intervals.values() as any[]).filter(
+          (d) => d.timescale_id == timescaleID
+        );
+      }
+      return ids.map((id) => intervals.get(id));
+    },
+  };
+}
+
+function includesTimescale(intervals: Map<number, any>, timescaleID: number) {
+  if (intervals == null) return false;
+  if (timescaleID == null) return true;
+  return Array.from(intervals.values()).some(
+    (d) => d.timescale_id == timescaleID
+  );
+}
+
+type MacrostratSelector = (store: MacrostratStore) => any;
+
+export function useMacrostratStore(selector: MacrostratSelector | "api") {
+  const ctx = useContext(MacrostratDataProviderContext);
+  if (ctx == null) {
+    throw new Error("Missing MacrostratDataProvider");
+  }
+  if (selector === "api") {
+    return ctx;
+  }
+
+  return useStore(ctx, selector);
+}
+
+const dataTypeMapping = {
+  lithologies: (store) => store.getLithologies,
+  intervals: (store) => store.getIntervals,
+  columns: (store) => store.getColumns,
+  environments: (store) => store.getEnvironments,
+  refs: (store) => store.getRefs,
+};
+
+export function useMacrostratDefs(dataType: string): Map<number, any> | null {
+  if (dataType == "columns") {
+    throw new Error("Columns are not provided as a map");
+  }
+  const operator = useMacrostratStore(dataTypeMapping[dataType]);
+  useEffect(() => {
+    operator();
+  }, []);
+  return useMacrostratStore((state) => state[dataType]);
+}
+
+export function useMacrostratColumns(
+  projectID: number | null,
+  inProcess: boolean
+) {
+  const getColumns = useMacrostratStore((s) => s.getColumns);
+  const columnsMap = useMacrostratStore((s) => s.columnFootprints);
+  const key = projectID ?? -1;
+  const colData = columnsMap?.get(key);
+  useEffect(() => {
+    // Refetch if the columns are not available, or if we have requested inProcess columns where we didn't before
+    if (colData == null || (inProcess && !colData.inProcess)) {
+      getColumns(projectID, inProcess);
+    }
+    // If we've already fetched the columns there's nothing to do...
+  }, [colData, inProcess, getColumns]);
+
+  return useMemo(() => {
+    if (colData == null) return null;
+    let columns = colData.columns;
+    if (!inProcess && colData.inProcess) {
+      // Our available set of columns includes 'in process' columns, but we don't want them
+      columns.features = columns.features?.filter(
+        (d) => d.properties.status != "in process"
+      );
+    }
+    return columns;
+  }, [colData, inProcess]);
+}
+
+export function useMacrostratData(dataType: string, ...args: any[]) {
+  const selector = dataTypeMapping[dataType];
+  const operator = useMacrostratStore(selector);
+
+  const [value, setValue] = useState(null);
+
+  useEffect(() => {
+    operator(...args).then(setValue);
+  }, [operator, ...args]);
+
+  return value;
+}
+
+/** By default, we provide a store linked to the production API */
+const MacrostratDataProviderContext = createContext(createMacrostratStore());
+
+export function MacrostratDataProvider(props: MacrostratDataProviderProps) {
+  const { baseURL = "https://macrostrat.org/api/v2", children } = props;
+
+  const [store] = useState(() => createMacrostratStore(baseURL));
+
+  return h(
+    MacrostratAPIProvider,
+    { baseURL },
+    h(MacrostratDataProviderContext.Provider, { value: store }, children)
+  );
+}
+
+/** Legacy API provider so useAPIResult can work */
+
+type APIProviderProps = {
+  children: ReactNode;
+  useDev?: boolean;
+  baseURL?: string;
+};
+
+export function MacrostratAPIProvider({
+  children,
+  useDev = false,
+  baseURL,
+}: APIProviderProps) {
+  baseURL ??= useDev
+    ? "https://dev2.macrostrat.org/api/v2"
+    : "https://macrostrat.org/api/v2";
+
+  return h(
+    APIProvider,
+    {
+      baseURL,
+      unwrapResponse: (res) => res.success.data,
+    },
+    children
+  );
+}
+
+export function MacrostratColumnProvider(props) {
+  /** A column provider specialized the Macrostrat API. Maps more
+   * generic concepts to Macrostrat-specific ones.
+   */
+
+  const { axisType } = useMacrostratColumnData();
+  const { units, domain, pixelScale, children } = props;
+  return h(
+    ColumnProvider,
+    { axisType, divisions: units, range: domain, pixelsPerMeter: pixelScale },
+    children
+  );
+}
+
+/** This is now a legacy provider */
+export function LithologiesProvider({ children }) {
+  useEffect(() => {
+    console.warn(
+      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider"
+    );
+  }, []);
+  return children;
+}
+
+export function useLithologies() {
+  const getLithologies = useMacrostratStore((s) => s.getLithologies);
+  const lithologies = useMacrostratStore((s) => s.lithologies);
+  useEffect(() => {
+    if (lithologies == null) getLithologies();
+  }, [lithologies, getLithologies]);
+  return lithologies;
+}

package/src/data-provider/column-nav.ts

@@ -0,0 +1,53 @@
+import h from "@macrostrat/hyper";
+import { getQueryString, setQueryString } from "@macrostrat/ui-components";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export interface ColumnArgs {
+  col_id?: number;
+  unit_id?: number;
+  project_id?: number;
+  status_code?: "in process";
+}
+
+type ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];
+
+const ColumnNavCtx = createContext<ColumnManagerData | null>(null);
+
+export function useColumnNav(
+  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null }
+): ColumnManagerData {
+  const ctx = useContext(ColumnNavCtx);
+  if (ctx != null) return ctx;
+
+  const [columnArgs, setColumnArgs] = useState<ColumnArgs>(
+    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs
+  );
+
+  useEffect(() => setQueryString(columnArgs), [columnArgs]);
+
+  const { col_id, project_id, status_code } = columnArgs;
+
+  const setCurrentColumn = (obj) => {
+    let args = obj;
+    if ("properties" in obj) {
+      args = { col_id: obj.properties.col_id, project_id, status_code };
+    }
+    // Set query string
+    setQueryString(args);
+    setColumnArgs(args);
+  };
+
+  return [columnArgs, setCurrentColumn];
+}
+
+function extractColumnArgs(search: any): ColumnArgs | null {
+  const { col_id, unit_id, project_id, status_code } = search ?? {};
+  if (col_id == null) return null;
+  return { col_id, unit_id, project_id, status_code };
+}
+
+export function ColumnNavProvider({ children, ...defaultArgs }) {
+  /** Column navigation provider that manages the query string for selected columns */
+  const value = useColumnNav(defaultArgs as any);
+  return h(ColumnNavCtx.Provider, { value }, children);
+}