@macrostrat/column-views 2.1.4 → 2.2.1

package/src/column.ts

@@ -1,17 +1,28 @@
 import { ColumnAxisType } from "@macrostrat/column-components";
 import { hyperStyled } from "@macrostrat/hyper";
-import { useDarkMode } from "@macrostrat/ui-components";
+import {
+  Box,
+  extractPadding,
+  Padding,
+  useDarkMode,
+} from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { RefObject, useRef, HTMLAttributes, useCallback } from "react";
+import {
+  RefObject,
+  useRef,
+  HTMLAttributes,
+  useCallback,
+  CSSProperties,
+  ComponentType,
+} from "react";
 import styles from "./column.module.sass";
+import { UnitComponent } from "./units";
 import {
   UnitSelectionProvider,
-  UnitComponent,
   UnitKeyboardNavigation,
   useUnitSelectionDispatch,
-} from "./units";
+} from "./data-provider";
 
-import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
 import {
   Identifier,
   ReferencesField,
@@ -27,11 +38,17 @@ import {
   CompositeTimescale,
   SectionsColumn,
 } from "./section";
-import { CompositeAgeAxis } from "./age-axis";
-import { MergeSectionsMode, usePreparedColumnUnits } from "./prepare-units";
+import { ApproximateHeightAxis, CompositeAgeAxis } from "./age-axis";
+import {
+  MergeSectionsMode,
+  usePreparedColumnUnits,
+  HybridScaleType,
+  ColumnHeightScaleOptions,
+} from "./prepare-units";
 import { UnitLong } from "@macrostrat/api-types";
 import { NonIdealState } from "@blueprintjs/core";
 import { DataField } from "@macrostrat/data-components";
+import { ScaleContinuousNumeric } from "d3-scale";
 
 const h = hyperStyled(styles);
 
@@ -51,11 +68,14 @@ interface BaseColumnProps extends SectionSharedProps {
   ) => void;
 }
 
-export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
+export interface ColumnProps
+  extends Padding, BaseColumnProps, ColumnHeightScaleOptions {
   // Macrostrat units
   units: UnitLong[];
   t_age?: number;
   b_age?: number;
+  t_pos?: number;
+  b_pos?: number;
   mergeSections?: MergeSectionsMode;
   showUnitPopover?: boolean;
   allowUnitSelection?: boolean;
@@ -63,6 +83,7 @@ export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
   onUnitSelected?: (unitID: number | null, unit: any) => void;
   // Unconformity height in pixels
   unconformityHeight?: number;
+  scale?: ScaleContinuousNumeric<number, number>;
 }
 
 export function Column(props: ColumnProps) {
@@ -74,9 +95,10 @@ export function Column(props: ColumnProps) {
     selectedUnit,
     children,
     units: rawUnits,
-    axisType = ColumnAxisType.AGE,
     t_age,
     b_age,
+    t_pos,
+    b_pos,
     unconformityHeight = 30,
     targetUnitHeight = 20,
     pixelScale,
@@ -84,22 +106,53 @@ export function Column(props: ColumnProps) {
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
     allowUnitSelection,
+    hybridScale,
+    scale,
+    axisType,
     ...rest
   } = props;
   const ref = useRef<HTMLElement>();
   // Selected item position
 
+  /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies
+   * standardization of scales in all sections */
+  let _targetUnitHeight = targetUnitHeight;
+  let _minSectionHeight = minSectionHeight;
+  let _minPixelScale = minPixelScale;
+  if (pixelScale != null) {
+    _targetUnitHeight = null;
+    _minSectionHeight = 0;
+    _minPixelScale = pixelScale;
+  }
+
+  // Handle special cases for hybrid scales (WIP, we need to regularize this)
+  let _axisType = axisType ?? ColumnAxisType.AGE;
+  let ageAxisComponent = CompositeAgeAxis;
+  if (
+    hybridScale?.type === HybridScaleType.ApproximateHeight &&
+    _axisType != ColumnAxisType.AGE
+  ) {
+    // Use approximate height axis for non-age columns if a non-age axis type is requested
+    ageAxisComponent = ApproximateHeightAxis;
+    _axisType = ColumnAxisType.AGE;
+  }
+
   const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {
-    axisType,
+    axisType: _axisType,
     t_age,
     b_age,
+    t_pos,
+    b_pos,
     mergeSections,
-    targetUnitHeight,
+    targetUnitHeight: _targetUnitHeight,
     unconformityHeight,
     pixelScale,
-    minPixelScale,
-    minSectionHeight,
+    minPixelScale: _minPixelScale,
+    minSectionHeight: _minSectionHeight,
     collapseSmallUnconformities,
+    // TODO: consider unifying scale and hybridScale options
+    scale,
+    hybridScale,
   });
 
   if (sections.length === 0) {
@@ -113,11 +166,15 @@ export function Column(props: ColumnProps) {
     );
   }
 
-  let main: any = h(ColumnInner, { columnRef: ref, ...rest }, [
-    children,
-    h.if(showUnitPopover)(UnitSelectionPopover),
-    h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
-  ]);
+  let main: any = h(
+    ColumnInner,
+    { columnRef: ref, ageAxisComponent, ...rest },
+    [
+      children,
+      h.if(showUnitPopover)(UnitSelectionPopover),
+      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
+    ],
+  );
 
   /* By default, unit selection is disabled. However, if any related props are passed,
    we enable it.
@@ -142,16 +199,27 @@ export function Column(props: ColumnProps) {
 
   return h(
     MacrostratColumnDataProvider,
-    { units, sections, totalHeight, axisType },
+    { units, sections, totalHeight, axisType: _axisType },
     main,
   );
 }
 
 interface ColumnInnerProps extends BaseColumnProps {
   columnRef: RefObject<HTMLElement>;
+  ageAxisComponent?: ComponentType;
 }
 
 function ColumnInner(props: ColumnInnerProps) {
+  const padding = extractPadding(props);
+
+  // TODO: integrate padding vars more closely with the rest of the spacing (right now padding is a bit ad-hoc)
+  const paddingVars: any = {
+    "--column-padding-top": `${padding.paddingTop}px`,
+    "--column-padding-bottom": `${padding.paddingBottom}px`,
+    "--column-padding-left": `${padding.paddingLeft}px`,
+    "--column-padding-right": `${padding.paddingRight}px`,
+  };
+
   const {
     unitComponent = UnitComponent,
     unconformityLabels = true,
@@ -167,6 +235,7 @@ function ColumnInner(props: ColumnInnerProps) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    ageAxisComponent = CompositeAgeAxis,
   } = props;
 
   const { axisType } = useMacrostratColumnData();
@@ -191,10 +260,11 @@ function ColumnInner(props: ColumnInnerProps) {
     ColumnContainer,
     {
       ...useMouseEventHandlers(onMouseOver),
+      style: paddingVars,
       className,
     },
     h("div.column", { ref: columnRef }, [
-      h(CompositeAgeAxis),
+      h(ageAxisComponent),
       h.if(_showTimescale)(CompositeTimescale, { levels: timescaleLevels }),
       h(SectionsColumn, {
         unitComponent,
@@ -262,16 +332,21 @@ function useMouseEventHandlers(
 
 export interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
+  style?: CSSProperties;
 }
 
 export function ColumnContainer(props: ColumnContainerProps) {
   const { className, ...rest } = props;
   const darkMode = useDarkMode();
 
-  return h("div.column-container", {
-    className: classNames(className, {
-      "dark-mode": darkMode?.isEnabled ?? false,
-    }),
+  return h(Box, {
+    className: classNames(
+      className,
+      {
+        "dark-mode": darkMode?.isEnabled ?? false,
+      },
+      "column-container",
+    ),
     ...rest,
   });
 }

package/src/correlation-chart/main.ts

@@ -3,7 +3,7 @@ import {
   UnitSelectionProvider,
   UnitKeyboardNavigation,
   useUnitSelectionStore,
-} from "../units";
+} from "../data-provider";
 import { UnitSelectionPopover } from "../unit-details";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
@@ -29,10 +29,11 @@ import {
 } from "@macrostrat/column-components";
 import { ColoredUnitComponent } from "../units";
 import { UnitBoxes } from "../units/boxes";
-import { ExtUnit } from "../prepare-units/helpers";
 import { ColumnContainer } from "../column";
 import { ColumnData } from "../data-provider";
 import { BaseUnit } from "@macrostrat/api-types";
+import { ScaleContinuousNumeric } from "d3-scale";
+import { ExtUnit } from "../prepare-units/types";
 
 const h = hyper.styled(styles);
 
@@ -117,7 +118,8 @@ export function CorrelationChart({
               paddingH: 4,
             },
             packages.map((pkg, i) => {
-              const { offset, domain, pixelScale, key } = scaleInfo.packages[i];
+              const { offset, domain, pixelScale, scale, key } =
+                scaleInfo.packages[i];
               return h(Package, {
                 columnData: pkg.columnData,
                 key,
@@ -126,6 +128,7 @@ export function CorrelationChart({
                 offset,
                 domain,
                 pixelScale,
+                scale,
                 unitComponent,
               });
             }),
@@ -147,6 +150,7 @@ function Package({
   offset,
   domain,
   pixelScale,
+  scale,
 }) {
   return h("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
@@ -160,6 +164,7 @@ function Package({
           key: i,
           domain,
           pixelScale,
+          scale,
           offsetLeft: i * (columnWidth + columnSpacing),
         });
       }),
@@ -179,6 +184,7 @@ interface ColumnProps {
   offsetLeft?: number;
   domain: [number, number];
   pixelScale: number;
+  scale?: ScaleContinuousNumeric<number, number>;
 }
 
 function Column(props: ColumnProps) {
@@ -188,6 +194,7 @@ function Column(props: ColumnProps) {
     offsetLeft,
     domain,
     pixelScale,
+    scale,
     unitComponent = ColoredUnitComponent,
   } = props;
 
@@ -208,6 +215,7 @@ function Column(props: ColumnProps) {
         // Need to tighten up types here...
         divisions: units as any[],
         range: domain,
+        scale,
         pixelsPerMeter: pixelScale, // Actually pixels per myr
         axisType: ColumnAxisType.AGE,
       },

package/src/correlation-chart/prepare-data.ts

@@ -1,5 +1,4 @@
 import { CompositeStratigraphicScaleInfo } from "../age-axis";
-import { PackageLayoutData } from "../prepare-units/composite-scale";
 import { ColumnAxisType } from "@macrostrat/column-components";
 import { type ColumnGeoJSONRecord, UnitLong } from "@macrostrat/api-types";
 import {
@@ -9,6 +8,7 @@ import {
   preprocessUnits,
 } from "../prepare-units";
 import { mergeAgeRanges } from "@macrostrat/stratigraphy-utils";
+import { PackageLayoutData } from "../prepare-units/types";
 
 export interface ColumnIdentifier {
   col_id: number;
@@ -21,8 +21,10 @@ interface ColumnData {
   units: UnitLong[];
 }
 
-export interface CorrelationChartSettings
-  extends Omit<PrepareColumnOptions, "axisType"> {
+export interface CorrelationChartSettings extends Omit<
+  PrepareColumnOptions,
+  "axisType"
+> {
   targetUnitHeight?: number;
 }
 
@@ -52,6 +54,7 @@ export function buildCorrelationChartData(
   const opts: PrepareColumnOptions = {
     axisType: ColumnAxisType.AGE,
     targetUnitHeight,
+    mergeSections,
     ...rest,
   };
 
@@ -102,7 +105,7 @@ interface ColumnExt {
 
 interface MultiColumnPackageData {
   columnData: ColumnExt[];
-  bestPixelScale: number;
+  bestPixelScale?: number;
   b_age: number;
   t_age: number;
 }

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

@@ -6,6 +6,7 @@ import {
   ColumnCorrelationMap,
   ColumnCorrelationProvider,
   fetchUnits,
+  MergeSectionsMode,
   useCorrelationMapStore,
 } from "@macrostrat/column-views";
 import { hyperStyled } from "@macrostrat/hyper";
@@ -16,6 +17,7 @@ import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { parseLineFromString, stringifyLine } from "../hash-string";
 import { EnvironmentColoredUnitComponent } from "../../units";
+import { scaleLinear, scalePow } from "d3-scale";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
@@ -96,7 +98,7 @@ export default {
     focusedLine: "-100,45 -90,50",
     columnSpacing: 0,
     columnWidth: 100,
-    collapseSmallUnconformities: false,
+    collapseSmallUnconformities: true,
     targetUnitHeight: 20,
   },
   argTypes: {
@@ -196,3 +198,26 @@ export const ColoredByEnvironment = Template.bind({});
 ColoredByEnvironment.args = {
   unitComponent: EnvironmentColoredUnitComponent,
 };
+
+export const RestrictedAgeRange = Template.bind({});
+RestrictedAgeRange.args = {
+  t_age: 100,
+  b_age: 300,
+  focusedLine: "-114.29,42.74 -104.59,39.21",
+};
+
+export const WithFixedScale = Template.bind({});
+WithFixedScale.args = {
+  scale: scaleLinear().domain([0, 2500]).range([0, 1000]),
+};
+
+export const WithPowerScale = Template.bind({});
+WithPowerScale.args = {
+  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
+};
+
+export const WithPowerScaleMerged = Template.bind({});
+WithPowerScaleMerged.args = {
+  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
+  mergeSections: MergeSectionsMode.ALL,
+};

package/src/data-provider/base.ts

@@ -9,6 +9,7 @@ import {
   Environment,
   MacrostratRef,
   StratName,
+  Interval,
 } from "@macrostrat/api-types";
 import {
   fetchAllColumns,
@@ -49,7 +50,10 @@ interface MacrostratStore extends RefsSlice {
   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>;
+  getIntervals(
+    ids: number[] | null,
+    timescaleID: number | null,
+  ): Promise<Interval[]>;
   environments: Map<number, Environment> | null;
   getEnvironments(ids: number[] | null): Promise<Environment[]>;
   columnFootprints: Map<number, ColumnFootprintsStorage>;
@@ -121,35 +125,22 @@ function createColumnsSlice(set, get) {
       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({
+        const statusCode: ColumnStatusCode[] = ["active"];
+        if (_inProcess) {
+          statusCode.push("in process");
+        }
+        const columns = await fetchAllColumns({
           projectID,
-          statusCode: null,
+          statusCode,
           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,
@@ -281,10 +272,21 @@ export function useMacrostratStore(selector: MacrostratSelector | "api") {
   if (selector === "api") {
     return ctx;
   }
-
   return useStore(ctx, selector);
 }
 
+export function useMacrostratBaseURL(
+  defaultURL = "https://macrostrat.org/api/v2",
+): string {
+  /** Get the Macrostrat base URL from the store if set, otherwise return a default value */
+  const ctx = useContext(MacrostratDataProviderContext);
+  if (ctx == null) {
+    // Return default URL if no provider is present
+    return defaultURL;
+  }
+  return ctx.getState().baseURL;
+}
+
 type DataTypeKey =
   | "lithologies"
   | "intervals"
@@ -407,10 +409,16 @@ export function MacrostratColumnProvider(props) {
    */
 
   const { axisType } = useMacrostratColumnData();
-  const { units, domain, pixelScale, children } = props;
+  const { units, domain, pixelScale, scale, children } = props;
   return h(
     ColumnProvider,
-    { axisType, divisions: units, range: domain, pixelsPerMeter: pixelScale },
+    {
+      axisType,
+      divisions: units,
+      range: domain,
+      pixelsPerMeter: pixelScale,
+      scale,
+    },
     children,
   );
 }

package/src/data-provider/fetch.ts

@@ -14,6 +14,7 @@ import {
 import crossFetch from "cross-fetch";
 import { feature } from "topojson-client";
 import { geoArea } from "d3-geo";
+import _ from "underscore";
 
 function defaultFetch(
   url: string,
@@ -23,10 +24,12 @@ function defaultFetch(
   return crossFetch(baseURL + url, options);
 }
 
+export type ColumnStatusCode = "in process" | "active" | "obsolete";
+
 export interface ColumnFetchOptions {
   apiBaseURL?: string;
   projectID?: number;
-  statusCode?: "in process";
+  statusCode?: ColumnStatusCode | ColumnStatusCode[];
   format?: "geojson" | "topojson" | "geojson_bare";
   fetch?: any;
 }
@@ -46,9 +49,13 @@ export async function fetchAllColumns(
   if (projectID != null) {
     args = { ...args, project_id: projectID };
   }
-  if (statusCode != null) {
-    args = { ...args, status_code: statusCode };
+  let _statusCode: string | undefined = undefined;
+  if (Array.isArray(statusCode)) {
+    _statusCode = statusCode.join(",");
+  } else if (statusCode != null) {
+    _statusCode = statusCode;
   }
+  args.statusCode = _statusCode;
 
   if (projectID == null) {
     args = { ...args, all: true };

package/src/data-provider/index.ts

@@ -2,3 +2,4 @@ export * from "./fetch";
 export * from "./base";
 export * from "./column-nav";
 export * from "./store";
+export * from "./unit-selection";

package/src/data-provider/store.ts

@@ -1,18 +1,66 @@
-import {
-  createContext,
-  useContext,
-  ReactNode,
-  useMemo,
-  useEffect,
-} from "react";
+import { createContext, ReactNode, useContext, useMemo } from "react";
 import h from "@macrostrat/hyper";
 import {
-  createCompositeScale,
-  PackageLayoutData,
   CompositeColumnScale,
+  createCompositeScale,
 } from "../prepare-units/composite-scale";
-import { ExtUnit } from "../prepare-units/helpers";
 import { ColumnAxisType } from "@macrostrat/column-components";
+import type { ExtUnit, PackageLayoutData } from "../prepare-units";
+// An isolated jotai store for Macrostrat column usage
+// TODO: there might be a better way to do this using the MacrostratDataProvider or similar
+import { createIsolation } from "jotai-scope";
+import { atom, type WritableAtom } from "jotai";
+
+const { Provider, useAtom, useAtomValue, useStore } = createIsolation();
+
+type ProviderProps = {
+  children: ReactNode;
+  initialValues?: Iterable<[WritableAtom<any, any, any>, any]>;
+};
+
+const columnUnitsAtom = atom<ExtUnit[]>();
+
+const columnUnitsMapAtom = atom<Map<number, ExtUnit> | null>((get) => {
+  const units = get(columnUnitsAtom);
+  if (!units) return null;
+  const unitMap = new Map<number, ExtUnit>();
+  units.forEach((unit) => {
+    unitMap.set(unit.unit_id, unit);
+  });
+  return unitMap;
+});
+
+function ScopedProvider({ children, ...rest }: ProviderProps) {
+  // Always use the same store instance in this tree
+  let val = null;
+  try {
+    val = useStore();
+  } catch {
+    // No store found, create a new one
+    val = null;
+  }
+  return h(Provider, { store: val, ...rest }, children);
+}
+
+export function MacrostratColumnStateProvider({
+  children,
+  units,
+}: {
+  children: ReactNode;
+  units: ExtUnit[];
+}) {
+  /** Top-level provider for Macrostrat column data.
+   * It is either provided by the Column component itself, or
+   * can be hoisted higher in the tree to provide a common data context
+   */
+  return h(
+    ScopedProvider,
+    {
+      initialValues: [[columnUnitsAtom, units]],
+    },
+    children,
+  );
+}
 
 export interface MacrostratColumnDataContext {
   units: ExtUnit[];
@@ -31,7 +79,7 @@ export function MacrostratColumnDataProvider({
   totalHeight,
   axisType,
 }: MacrostratColumnDataContext & { children: ReactNode }) {
-  /** Provider for Macrostrat column data.
+  /** Internal 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
@@ -43,6 +91,7 @@ export function MacrostratColumnDataProvider({
    * */
 
   const value = useMemo(() => {
+    // For now, change ordinal axis types to age axis types
     return {
       units,
       sections,
@@ -51,7 +100,11 @@ export function MacrostratColumnDataProvider({
     };
   }, [units, sections, totalHeight, axisType]);
 
-  return h(MacrostratColumnDataContext.Provider, { value }, children);
+  return h(
+    MacrostratColumnStateProvider,
+    { units },
+    h(MacrostratColumnDataContext.Provider, { value }, children),
+  );
 }
 
 export function useMacrostratColumnData() {
@@ -65,7 +118,15 @@ export function useMacrostratColumnData() {
 }
 
 export function useMacrostratUnits() {
-  return useMacrostratColumnData().units;
+  return useAtomValue(columnUnitsAtom);
+}
+
+export function useColumnUnitsMap(): Map<number, ExtUnit> | null {
+  try {
+    return useAtomValue(columnUnitsMapAtom);
+  } catch {
+    return null;
+  }
 }
 
 export function useCompositeScale(): CompositeColumnScale {