@macrostrat/column-views 1.0.2 → 2.0.0

package/src/data-provider/fetch.ts

@@ -0,0 +1,231 @@
+import {
+  ColumnGeoJSONRecord,
+  ColumnGeoJSONRecordWithID,
+  MacrostratRef,
+  UnitLong,
+} from "@macrostrat/api-types";
+import {
+  addQueryString,
+  joinURL,
+  useAPIResult,
+} from "@macrostrat/ui-components";
+import crossFetch from "cross-fetch";
+import { feature } from "topojson-client";
+import { geoArea } from "d3-geo";
+
+function defaultFetch(
+  url: string,
+  options: RequestInit | undefined = undefined
+) {
+  const baseURL = "https://macrostrat.org/api/v2";
+  return crossFetch(baseURL + url, options);
+}
+
+export interface ColumnFetchOptions {
+  apiBaseURL?: string;
+  projectID?: number;
+  statusCode?: "in process";
+  format?: "geojson" | "topojson" | "geojson_bare";
+  fetch?: any;
+}
+
+export async function fetchAllColumns(
+  options: ColumnFetchOptions = {}
+): Promise<ColumnGeoJSONRecord[]> {
+  const {
+    apiBaseURL,
+    projectID,
+    format = "topojson",
+    statusCode,
+    fetch = crossFetch,
+  } = options;
+
+  let args: any = { format };
+  if (projectID != null) {
+    args = { ...args, project_id: projectID };
+  }
+  if (statusCode != null) {
+    args = { ...args, status_code: statusCode };
+  }
+
+  if (projectID == null) {
+    args = { ...args, all: true };
+  }
+
+  let url = "/columns";
+  if (apiBaseURL != null) {
+    url = joinURL(apiBaseURL, url);
+  }
+
+  // Try with fetch
+  url = addQueryString(url, args);
+
+  const res = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (res == null) {
+    return null;
+  }
+
+  // Get JSON
+  const data = await res.json();
+  return postProcessColumns(columnProcessors[format](data));
+}
+
+export function useColumnFeatures({
+  apiRoute = "/columns",
+  status_code,
+  project_id,
+  format = "geojson",
+}) {
+  let all: boolean = undefined;
+  if (status_code == null && project_id == null) {
+    all = true;
+  }
+
+  const processor = columnProcessors[format];
+
+  return useAPIResult(
+    apiRoute,
+    { format, all, status_code, project_id },
+    processor
+  );
+}
+
+function processGeoJSON(res) {
+  return processGeoJSONBare(res?.success?.data);
+}
+
+function processGeoJSONBare(res) {
+  return res?.features;
+}
+
+function processTopoJSON(res) {
+  try {
+    const { data } = res.success;
+    const { features: f } = feature(data, data.objects.output) as any;
+    return f;
+  } catch (err) {
+    console.error(err);
+    return [];
+  }
+}
+
+function postProcessColumns(columns) {
+  return promoteColumnIDs(
+    convertSmallAreasToPoints(removeFeaturesWithoutGeometry(columns))
+  );
+}
+
+function promoteColumnIDs(
+  features: ColumnGeoJSONRecord[]
+): ColumnGeoJSONRecordWithID[] {
+  return features.map((f, i) => {
+    return {
+      id: f.properties?.col_id,
+      ...f,
+    };
+  });
+}
+
+function removeFeaturesWithoutGeometry(features) {
+  return features.filter((f) => f.geometry != null);
+}
+
+function convertSmallAreasToPoints(features) {
+  return features.map((f) => {
+    // GeoArea takes a long time to run. We are really more worried about points that are zero-area
+    if (geoArea(f.geometry) < 1e-8) {
+      const centroid = f.geometry.coordinates[0][0];
+      f.geometry = {
+        type: "Point",
+        coordinates: centroid,
+      };
+    }
+    return f;
+  });
+}
+
+const columnProcessors = {
+  topojson: processTopoJSON,
+  geojson: processGeoJSON,
+  geojson_bare: processGeoJSONBare,
+};
+
+async function unwrapResponse(res) {
+  if (res == null) {
+    return null;
+  }
+  const resData = await res.json();
+  return resData["success"]["data"];
+}
+
+export async function fetchLithologies(fetch = defaultFetch) {
+  const res = await fetch("/defs/lithologies?all");
+  return await unwrapResponse(res);
+}
+
+export async function fetchIntervals(
+  timescaleID: number | null,
+  fetch = defaultFetch
+) {
+  let url = `/defs/intervals`;
+  if (timescaleID != null) {
+    url += `?timescale_id=${timescaleID}`;
+  } else {
+    url += "?all";
+  }
+  const res = await fetch(url);
+  return await unwrapResponse(res);
+}
+
+export async function fetchEnvironments(fetch = defaultFetch) {
+  const res = await fetch("/defs/environments?all");
+  return await unwrapResponse(res);
+}
+
+export async function fetchRefs(
+  refs: number[],
+  fetch = defaultFetch
+): Promise<MacrostratRef[]> {
+  let url = `/defs/refs`;
+  if (refs.length == 0) {
+    return [];
+  }
+  url += "?ref_id=" + refs.join(",");
+  const res = await fetch(url);
+  return await unwrapResponse(res);
+}
+
+export type ColumnData = {
+  units: UnitLong[];
+  columnID: number;
+};
+
+export async function fetchUnits(
+  columns: number[],
+  fetch = defaultFetch
+): Promise<ColumnData[]> {
+  const promises = columns.map((col_id) => fetchColumnUnits(col_id, fetch));
+  return await Promise.all(promises);
+}
+
+export async function fetchColumnUnits(
+  col_id: number,
+  fetch = defaultFetch
+): Promise<ColumnData> {
+  const params = new URLSearchParams();
+  params.append("response", "long");
+  params.append("col_id", col_id.toString());
+  const res = await fetch("/units" + "?" + params.toString());
+  const data = await res.json();
+  if (!data.success) {
+    throw new Error("Failed to fetch column units");
+  }
+  const units = data.success.data;
+  return { columnID: col_id, units };
+}

package/src/data-provider/index.ts

@@ -0,0 +1,4 @@
+export * from "./fetch";
+export * from "./base";
+export * from "./column-nav";
+export * from "./store";

package/src/data-provider/store.ts

@@ -0,0 +1,72 @@
+import { createContext, useContext, ReactNode, useMemo } from "react";
+import h from "@macrostrat/hyper";
+import {
+  createCompositeScale,
+  PackageLayoutData,
+} from "../prepare-units/composite-scale";
+import { ExtUnit } from "../prepare-units/helpers";
+import { ColumnAxisType } from "@macrostrat/column-components";
+
+export interface MacrostratColumnDataContext {
+  units: ExtUnit[];
+  sections: PackageLayoutData[];
+  totalHeight?: number;
+  axisType?: ColumnAxisType;
+}
+
+const MacrostratColumnDataContext =
+  createContext<MacrostratColumnDataContext>(null);
+
+export function MacrostratColumnDataProvider({
+  children,
+  units,
+  sections,
+  totalHeight,
+  axisType,
+}: MacrostratColumnDataContext & { children: ReactNode }) {
+  /** Provider for Macrostrat column data.
+   * As a general rule, we want to provide data and column-axis
+   * height calculations through the context, since these need to
+   * be accessed by any component that lays out information on the
+   * column.
+   *
+   * Cross-axis layout and view configuration (e.g., showing and hiding
+   * of different components or labels) should be handled through passing
+   * props to the components themselves.
+   * */
+
+  const value = useMemo(() => {
+    return {
+      units,
+      sections,
+      totalHeight,
+      axisType,
+    };
+  }, [units, sections, totalHeight, axisType]);
+
+  return h(MacrostratColumnDataContext.Provider, { value }, children);
+}
+
+export function useMacrostratColumnData() {
+  const ctx = useContext(MacrostratColumnDataContext);
+  if (!ctx) {
+    throw new Error(
+      "useMacrostratColumnData must be used within a MacrostratColumnDataProvider"
+    );
+  }
+  return ctx;
+}
+
+export function useMacrostratUnits() {
+  return useMacrostratColumnData().units;
+}
+
+export function useCompositeScale() {
+  const ctx = useContext(MacrostratColumnDataContext);
+  if (!ctx) {
+    throw new Error(
+      "useCompositeScale must be used within a MacrostratUnitsProvider"
+    );
+  }
+  return createCompositeScale(ctx.sections, true);
+}

package/src/index.ts

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

package/src/maps/_shared/index.ts

@@ -0,0 +1,2 @@
+export * from "./inset-map";
+export * from "./styles";

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

@@ -0,0 +1,20 @@
+import h from "@macrostrat/hyper";
+
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+import { Meta } from "@storybook/react";
+import { InsetMap } from ".";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Column views/Maps/Inset map",
+  component: InsetMap,
+  description: "A basic inset map",
+} as Meta<typeof InsetMap>;
+
+export function BasicInsetMap() {
+  return h(InsetMap, {
+    style: { width: "800px", height: "600px" },
+    accessToken: mapboxToken,
+  });
+}

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

@@ -0,0 +1,87 @@
+import { useCallback, useMemo } from "react";
+import {
+  MapView,
+  getBasicMapStyle,
+  MapViewProps,
+} from "@macrostrat/map-interface";
+import h from "@macrostrat/hyper";
+import { MapboxMapProvider } from "@macrostrat/mapbox-react";
+import { useInDarkMode } from "@macrostrat/ui-components";
+import {
+  removeMapLabels,
+  removeSourceFromStyle,
+} from "@macrostrat/mapbox-utils";
+import type { ReactNode, CSSProperties } from "react";
+
+export interface InsetMapProps extends Omit<MapViewProps, "style"> {
+  controls?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+  style?: CSSProperties;
+  mapStyle?: mapboxgl.Style | string;
+  showLabels?: boolean;
+  showAdmin?: boolean;
+  showRoads?: boolean;
+}
+
+export function InsetMap({
+  controls,
+  className,
+  children,
+  style,
+  mapStyle,
+  accessToken,
+  showLabels = false,
+  showAdmin = false,
+  showRoads = false,
+  ...rest
+}: InsetMapProps) {
+  const inDarkMode = useInDarkMode();
+  const _style = useMemo((): mapboxgl.Style | string => {
+    return mapStyle ?? getBasicMapStyle({ inDarkMode });
+  }, [mapStyle, inDarkMode]);
+
+  const transformStyle = useCallback(
+    (style) => {
+      let newStyle = style;
+      if (!showLabels) {
+        newStyle = removeMapLabels(newStyle);
+      }
+      if (!showAdmin) {
+        newStyle = removeSourceFromStyle(newStyle, null, "admin");
+      }
+      if (!showRoads) {
+        newStyle = removeSourceFromStyle(newStyle, null, "road");
+        newStyle = removeSourceFromStyle(newStyle, null, "aeroway");
+      }
+      return newStyle;
+    },
+    [mapStyle, showLabels, showRoads, showAdmin]
+  );
+
+  return h("div.inset-map", { className, style }, [
+    h(MapboxMapProvider, [
+      controls,
+      h(
+        MapView,
+        {
+          style: _style,
+          accessToken,
+          standalone: true,
+          /* Default map position that centers on the bulk of Macrostrat columns
+           */
+          mapPosition: {
+            camera: {
+              lng: -100,
+              lat: 38,
+              altitude: 5000000,
+            },
+          },
+          transformStyle,
+          ...rest,
+        },
+        children
+      ),
+    ]),
+  ]);
+}

package/src/maps/_shared/styles.ts

@@ -0,0 +1,57 @@
+import { getCSSVariable } from "@macrostrat/color-utils";
+import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+
+export function buildColumnsStyle(color: string) {
+  const columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
+  return {
+    sources: {
+      columns: buildGeoJSONSource(),
+    },
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": [
+            "case",
+            ["boolean", ["feature-state", "selected"], false],
+            0.5,
+            ["boolean", ["feature-state", "hover"], false],
+            0.3,
+            0.1,
+          ],
+        },
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": columnColor,
+          "line-width": 2,
+          "line-opacity": 0.5,
+        },
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": 4,
+          "circle-color": columnColor,
+          "circle-opacity": [
+            "case",
+            ["boolean", ["feature-state", "selected"], false],
+            1,
+            ["boolean", ["feature-state", "hover"], false],
+            0.7,
+            0.5,
+          ],
+        },
+        filter: ["==", "$type", "Point"],
+      },
+    ],
+  };
+}

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

@@ -0,0 +1,96 @@
+import h from "@macrostrat/hyper";
+
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+import { Meta } from "@storybook/react";
+import {
+  ColumnCorrelationMap,
+  ColumnCorrelationProvider,
+  CorrelationMapProps,
+  CorrelationProviderProps,
+} from ".";
+
+function ColumnCorrelationMapExt(
+  props: CorrelationMapProps & CorrelationProviderProps
+) {
+  const {
+    focusedLine,
+    columns,
+    onSelectColumns,
+    projectID,
+    inProcess,
+    ...rest
+  } = props;
+
+  return h(
+    ColumnCorrelationProvider,
+    {
+      focusedLine,
+      columns,
+      onSelectColumns,
+      projectID,
+      inProcess,
+    },
+    h(ColumnCorrelationMap, { accessToken: mapboxToken, ...rest })
+  );
+}
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Column views/Maps/Column correlation",
+  component: ColumnCorrelationMapExt,
+  description: "Cross section creation map",
+} as Meta<typeof ColumnCorrelationMapExt>;
+
+export const ColumnCorrelation = {
+  args: {
+    style: { width: "800px", height: "600px" },
+    padding: 100,
+  },
+};
+
+export const withPreloadedCrossSection = {
+  args: {
+    style: { width: "800px", height: "600px" },
+    padding: 100,
+    focusedLine: {
+      type: "LineString",
+      coordinates: [
+        [-122.399, 37.791],
+        [-100, 45],
+      ],
+    },
+  },
+};
+
+export const nonStandardProject = {
+  args: {
+    style: { width: "800px", height: "600px" },
+    padding: 100,
+    projectID: 10,
+    inProcess: true,
+    mapPosition: {
+      camera: {
+        lng: -100,
+        lat: 38,
+        altitude: 5000000,
+      },
+    },
+  },
+};
+
+export const eODP = {
+  args: {
+    style: { width: "800px", height: "600px" },
+    padding: 100,
+    projectID: 3,
+    inProcess: true,
+    mapPosition: {
+      camera: {
+        lng: -100,
+        lat: 38,
+        altitude: 5000000,
+      },
+    },
+  },
+};