@macrostrat/column-views 2.1.3 → 2.2.0

package/src/column.module.sass

@@ -33,6 +33,12 @@ body:global(.dark-mode) .column-container
     svg pattern image
       filter: invert(100%)
 
+.column-container
+  padding-top: var(--column-padding-top)
+  padding-bottom: var(--column-padding-bottom)
+  padding-left: var(--column-padding-left)
+  padding-right: var(--column-padding-right)
+
 .column-container :global
   .column
     display: flex
@@ -40,6 +46,9 @@ body:global(.dark-mode) .column-container
     position: relative
     height: fit-content
 
+  g.lithology-column .column-clip-frame
+    stroke: none
+
   .unit
     stroke: var(--column-stroke-color)
     stroke-width: 1px
@@ -108,30 +117,44 @@ body:global(.dark-mode) .column-container
 
 
 .unconformity
-  text-align: center
   position: absolute
+  font-family: var(--label-font-family, sans-serif)
   top: 0px
-  display: flex
-  justify-content: center
-  align-items: center
+  //font-size: 12px
+  font-weight: 400
+
   font-size: 0.8em
   &.giga
     font-weight: 800
-    font-size: 1em
+    //font-size: 1em
   &.mega
-    font-weight: 600
     font-weight: 700
-    font-size: 0.9em
+    //font-size: 0.9em
   &.large
-    font-weight:  600
+    font-weight:  500
   &.small
     font-weight: 300
+  --unit-font-weight: 400
 
+.unconformity-inner
+  //border-left: 1.5px dotted var(--secondary-color)
+  position: absolute
+  top: 5px
+  bottom: 5px
+  left: -3px
+  right: -2px
+  display: flex
+  justify-content: center
+  align-items: center
+  text-align: center
 
 .unconformity-text
   width: var(--column-width)
-  color: var(--column-stroke-color)
   --unit-font-style: normal
+  .prefix
+    font-weight: 400
+    color: var(--secondary-color)
+
 
 
 .column-title-row

package/src/column.ts

@@ -1,8 +1,20 @@
 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 {
   UnitSelectionProvider,
@@ -11,7 +23,6 @@ import {
   useUnitSelectionDispatch,
 } from "./units";
 
-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) {
@@ -77,6 +98,8 @@ export function Column(props: ColumnProps) {
     axisType = ColumnAxisType.AGE,
     t_age,
     b_age,
+    t_pos,
+    b_pos,
     unconformityHeight = 30,
     targetUnitHeight = 20,
     pixelScale,
@@ -84,22 +107,40 @@ export function Column(props: ColumnProps) {
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
     allowUnitSelection,
+    hybridScale,
+    scale,
     ...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;
+  }
+
   const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {
     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 +154,24 @@ export function Column(props: ColumnProps) {
     );
   }
 
-  let main: any = h(ColumnInner, { columnRef: ref, ...rest }, [
-    children,
-    h.if(showUnitPopover)(UnitSelectionPopover),
-    h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
-  ]);
+  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;
+  }
+
+  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.
@@ -149,9 +203,20 @@ export function Column(props: ColumnProps) {
 
 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 +232,7 @@ function ColumnInner(props: ColumnInnerProps) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    ageAxisComponent = CompositeAgeAxis,
   } = props;
 
   const { axisType } = useMacrostratColumnData();
@@ -191,10 +257,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 +329,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

@@ -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"
@@ -363,7 +365,7 @@ export function useMacrostratData(dataType: DataTypeKey, ...args: any[]) {
 const MacrostratDataProviderContext = createContext(createMacrostratStore());
 
 export function MacrostratDataProvider(props: MacrostratDataProviderProps) {
-  const { baseURL = "https://macrostrat.org/api/v2", children } = props;
+  const { baseURL = "https://dev.macrostrat.org/api/v2", children } = props;
 
   const [store] = useState(() => createMacrostratStore(baseURL));
 
@@ -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/store.ts

@@ -1,18 +1,11 @@
-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";
 
 export interface MacrostratColumnDataContext {
   units: ExtUnit[];
@@ -43,6 +36,7 @@ export function MacrostratColumnDataProvider({
    * */
 
   const value = useMemo(() => {
+    // For now, change ordinal axis types to age axis types
     return {
       units,
       sections,
@@ -68,6 +62,18 @@ export function useMacrostratUnits() {
   return useMacrostratColumnData().units;
 }
 
+export function useColumnUnitsMap(): Map<number, ExtUnit> | null {
+  const ctx = useContext(MacrostratColumnDataContext);
+  return useMemo(() => {
+    if (ctx == null) return null;
+    const unitMap = new Map<number, ExtUnit>();
+    ctx.units.forEach((unit) => {
+      unitMap.set(unit.unit_id, unit);
+    });
+    return unitMap;
+  }, [ctx?.units]);
+}
+
 export function useCompositeScale(): CompositeColumnScale {
   const ctx = useMacrostratColumnData();
   return useMemo(

package/src/facets/base-sample-column.module.sass

@@ -0,0 +1,14 @@
+.truncated-list
+  padding-left: 0.2em
+  font-size: 0.9em
+  list-style: none
+  border-left: 1px solid var(--column-stroke-color)
+  margin: 1px 0
+  li
+    display: inline
+    &:not(:last-child):after
+      content: ", "
+      color: var(--secondary-color)
+  li.too-many
+    color: var(--secondary-color)
+    font-style: italic