@macrostrat/column-views 2.1.3 → 2.2.0

package/src/prepare-units/index.ts

@@ -1,44 +1,32 @@
 import {
   getSectionAgeRange,
-  groupUnitsIntoSections,
+  getSectionPosRange,
+  groupUnitsIntoSectionsByOverlap,
+  groupUnitsIntoSectionsBySectionID,
   mergeOverlappingSections,
+  preprocessSectionUnit,
   preprocessUnits,
 } from "./helpers";
 import { ColumnAxisType } from "@macrostrat/column-components";
 import { useMemo } from "react";
-import type { ExtUnit } from "./helpers";
 import { UnitLong } from "@macrostrat/api-types";
 import {
   collapseUnconformitiesByPixelHeight,
-  ColumnScaleOptions,
-  CompositeColumnData,
   computeSectionHeights,
   finalizeSectionHeights,
-  PackageLayoutData,
 } from "./composite-scale";
-import type { SectionInfo } from "./helpers";
-import { agesOverlap, getUnitHeightRange, unitsOverlap } from "./utils";
+import {
+  agesOverlap,
+  MergeSectionsMode,
+  PrepareColumnOptions,
+  PreparedColumnData,
+  unitsOverlap,
+} from "./utils";
+import { SectionInfo } from "./types";
 
 export * from "./utils";
-export { preprocessUnits, groupUnitsIntoSections };
-
-export interface PrepareColumnOptions extends ColumnScaleOptions {
-  axisType: ColumnAxisType;
-  t_age?: number;
-  b_age?: number;
-  mergeSections?: MergeSectionsMode;
-  collapseSmallUnconformities?: boolean | number;
-}
-
-export enum MergeSectionsMode {
-  ALL = "all",
-  OVERLAPPING = "overlapping",
-}
-
-export interface PreparedColumnData extends CompositeColumnData {
-  sections: PackageLayoutData[];
-  units: ExtUnit[];
-}
+export * from "./types";
+export { preprocessUnits };
 
 export function usePreparedColumnUnits(
   data: UnitLong[],
@@ -58,27 +46,55 @@ export function prepareColumnUnits(
 ): PreparedColumnData {
   /** Prepare units for rendering into Macrostrat columns */
 
+  let { t_age, b_age, t_pos, b_pos } = options;
+
   const {
-    t_age,
-    b_age,
     mergeSections = MergeSectionsMode.OVERLAPPING,
     axisType,
     unconformityHeight,
     collapseSmallUnconformities = false,
+    hybridScale,
+    scale,
   } = options;
 
+  if (scale != null) {
+    // Set t_age and b_age based on scale domain if not already set
+    const domain = scale.domain();
+    if (axisType == ColumnAxisType.AGE) {
+      if (t_age == null) t_age = Math.min(...domain);
+      if (b_age == null) b_age = Math.max(...domain);
+    } else {
+      if (t_pos == null) t_pos = Math.min(...domain);
+      if (b_pos == null) b_pos = Math.max(...domain);
+    }
+  }
+
+  // Start by ensuring that ages and positions are numbers
+  // also set up some values for eODP-style columns
+  let units1 = units.map(preprocessSectionUnit);
+
   /** Prototype filtering to age range */
-  let units1 = units.filter((d) => {
+  units1 = units1.filter((d) => {
     // Filter units by t_age and b_age, inclusive
-    return agesOverlap(d, { t_age, b_age });
+    if (axisType == ColumnAxisType.AGE) {
+      return agesOverlap(d, { t_age, b_age });
+    } else {
+      return unitsOverlap(d, { t_pos, b_pos } as any, axisType);
+    }
   });
 
+  let mergeMode = mergeSections;
+  // if (axisType != ColumnAxisType.AGE) {
+  //   // For non-age columns, we always merge sections.
+  //   // This is because the "groupUnitsIntoSections" function is not well-defined
+  //   // for non-age columns.
+  //   mergeMode = MergeSectionsMode.ALL;
+  // }
+
   let sections0: SectionInfo<UnitLong>[];
-  if (
-    mergeSections == MergeSectionsMode.ALL &&
-    axisType != ColumnAxisType.ORDINAL
-  ) {
+  if (mergeMode == MergeSectionsMode.ALL) {
     // For the "merge sections" mode, we need to create a single section
+    const [b_unit_pos, t_unit_pos] = getSectionPosRange(units1, axisType);
     const [b_unit_age, t_unit_age] = getSectionAgeRange(units1);
     sections0 = [
       {
@@ -86,13 +102,31 @@ export function prepareColumnUnits(
         /**
          * If ages limits are directly specified, use them to define the section bounds.
          * */
-        t_age: t_age ?? t_unit_age,
-        b_age: b_age ?? b_unit_age,
+        t_pos: t_unit_pos,
+        b_pos: b_unit_pos,
+        t_age: t_unit_age,
+        b_age: b_unit_age,
         units: units1,
       },
     ];
+  } else if (axisType == ColumnAxisType.AGE) {
+    sections0 = groupUnitsIntoSectionsBySectionID(units1, axisType);
   } else {
-    sections0 = groupUnitsIntoSections(units1, axisType);
+    sections0 = groupUnitsIntoSectionsByOverlap(units1, axisType);
+  }
+
+  // Limit sections to the range specified by t_age/b_age or t_pos/b_pos global options
+  for (let section of sections0) {
+    if (axisType == ColumnAxisType.AGE) {
+      section.t_age = Math.max(section.t_age, t_age ?? -Infinity);
+      section.b_age = Math.min(section.b_age, b_age ?? Infinity);
+    } else if (axisType == ColumnAxisType.DEPTH) {
+      section.t_pos = Math.max(section.t_pos, t_pos ?? -Infinity);
+      section.b_pos = Math.min(section.b_pos, b_pos ?? Infinity);
+    } else if (axisType == ColumnAxisType.HEIGHT) {
+      section.t_pos = Math.max(section.t_pos, t_pos ?? -Infinity);
+      section.b_pos = Math.min(section.b_pos, b_pos ?? Infinity);
+    }
   }
 
   /** Merging overlapping sections really only makes sense for age/height/depth
@@ -102,24 +136,14 @@ export function prepareColumnUnits(
   let sections = sections0;
   if (
     mergeSections == MergeSectionsMode.OVERLAPPING &&
-    axisType != ColumnAxisType.ORDINAL
+    axisType == ColumnAxisType.AGE
   ) {
     sections = mergeOverlappingSections(sections);
   }
   // Filter out undefined sections just in case
   sections = sections.filter((d) => d != null);
 
-  /* Now that we are done merging sections, we can ensure that our sections
-   * are correctly limited to the t_age and b_age applied to the overall column.
-   */
-  sections = sections.map((section) => {
-    const { t_age, b_age } = section;
-    return {
-      ...section,
-      t_age: Math.max(t_age, options.t_age ?? -Infinity),
-      b_age: Math.min(b_age, options.b_age ?? Infinity),
-    };
-  });
+  // SCALES
 
   /* Compute pixel scales etc. for sections
    * We need to do this now to determine which unconformities
@@ -127,7 +151,9 @@ export function prepareColumnUnits(
    */
   let sectionsWithScales = computeSectionHeights(sections, options);
 
-  if (collapseSmallUnconformities ?? false) {
+  if (collapseSmallUnconformities && hybridScale == null) {
+    // Collapse small unconformities in pixel height space
+    // TODO: this doesn't seem to work properly for non-age columns?
     let threshold = unconformityHeight ?? 30;
     if (typeof collapseSmallUnconformities == "number") {
       threshold = collapseSmallUnconformities;
@@ -141,7 +167,7 @@ export function prepareColumnUnits(
   }
 
   /** Prepare section scale information using groups */
-  const { totalHeight, sections: sections2 } = finalizeSectionHeights(
+  let { totalHeight, sections: sections2 } = finalizeSectionHeights(
     sectionsWithScales,
     unconformityHeight,
   );

package/src/prepare-units/types.ts

@@ -0,0 +1,138 @@
+import type { UnitLong } from "@macrostrat/api-types";
+import type { ColumnAxisType } from "@macrostrat/column-components";
+import type { ScaleContinuousNumeric } from "d3-scale";
+
+export interface ColumnHeightScaleOptions {
+  /** A fixed pixel scale to use for the section (pixels per Myr) */
+  pixelScale?: number;
+  /** The target height of a constituent unit in pixels, for dynamic
+   * scale generation */
+  targetUnitHeight?: number;
+  /** Min height of a section in pixels. Will override minPixelScale in some cases. */
+  minSectionHeight?: number;
+  /** The minimum pixel scale to use for the section (pixels per Myr). This is mostly
+   * needed because small sections (<1-2 units) don't necessarily have space to comfortably
+   * render two axis labels */
+  minPixelScale?: number;
+  // Axis scale type
+  axisType?: ColumnAxisType;
+  // Unconformity height in pixels
+  unconformityHeight?: number;
+  // Whether to collapse unconformities that are less than a height threshold
+  collapseSmallUnconformities?: boolean | number;
+  // A continuous scale to use instead of generating one
+  // TODO: discontinuous scales are not yet supported
+  scale?: ScaleContinuousNumeric<number, number>;
+  // Hybrid scale type.
+  // This overrides parameters such as the axis type
+  hybridScale?: HybridScaleDefinition;
+}
+
+export enum HybridScaleType {
+  // An age-domain scale that puts equal vertical space between surfaces
+  EquidistantSurfaces = "equidistant-surfaces",
+  // A height-domain scale that is based on the average height of units between surfaces
+  ApproximateHeight = "approximate-height",
+}
+
+export enum HeightMethod {
+  Minimum = "minimum",
+  Average = "average",
+  Maximum = "maximum",
+}
+
+export interface HybridScaleOptions {
+  pixelOffset?: number;
+  pixelScale?: number;
+}
+
+export type ApproxHeightScaleOptions = {
+  minHeight?: number;
+  defaultHeight?: number;
+  heightMethod?: HeightMethod;
+};
+
+export type HybridScaleDefinition =
+  | ({
+      type: HybridScaleType.ApproximateHeight;
+    } & ApproxHeightScaleOptions)
+  | {
+      type: HybridScaleType.EquidistantSurfaces;
+    };
+
+export interface SectionScaleOptions extends ColumnHeightScaleOptions {
+  axisType: ColumnAxisType;
+  domain: [number, number];
+}
+
+/** Output of a section scale. For now, this assumes that the
+ * mapping is linear, but it could be extended to support arbitrary
+ * scale functions.
+ */
+export interface PackageScaleInfo {
+  domain: [number, number];
+  pixelHeight: number;
+  // TODO: add a function
+  scale: ScaleContinuousNumeric<number, number>;
+  pixelScale?: number; // if it's a linear scale, this could be defined
+  // Subsidiary scale for height mapping (for hybrid scales)
+  heightScale?: ScaleContinuousNumeric<number, number>;
+}
+
+export type PackageScaleLayoutData = PackageScaleInfo & {
+  // A unique key for the section to use in React
+  key: string;
+  offset: number;
+  // How much to
+  paddingTop: number;
+};
+export interface StratigraphicPackage {
+  /** A collection of stratigraphic information organized in time, corresponding
+   * to single or multiple columns. */
+  t_age: number;
+  b_age: number;
+}
+
+export interface SectionInfo<
+  T extends UnitLong = ExtUnit,
+> extends StratigraphicPackage {
+  /** A time-bounded part of a single stratigraphic column. */
+  section_id: number | number[];
+  units: T[];
+  b_pos?: number;
+  t_pos?: number;
+}
+
+export interface ExtUnit extends UnitLong {
+  bottomOverlap: boolean;
+  overlappingUnits: number[];
+  column?: number;
+  /* Positions (ages or heights) where the unit is clipped to its containing section.
+   * This is relevant if we are filtering by age/height/depth range.
+   */
+  t_clip_pos?: number;
+  b_clip_pos?: number;
+}
+
+export type PackageLayoutData<T extends UnitLong = ExtUnit> = SectionInfo<T> & {
+  scaleInfo: PackageScaleLayoutData;
+  // A unique key for the section to use in React
+  key: string;
+};
+
+export interface CompositeScaleData {
+  totalHeight: number;
+  sections: PackageScaleLayoutData[];
+}
+
+export interface ColumnScaleOptions extends ColumnHeightScaleOptions {
+  axisType: ColumnAxisType;
+  unconformityHeight: number;
+}
+
+export interface CompositeColumnData<T extends UnitLong = ExtUnit> extends Omit<
+  CompositeScaleData,
+  "sections"
+> {
+  sections: PackageLayoutData<T>[];
+}

package/src/prepare-units/utils.ts

@@ -4,10 +4,38 @@ import {
   compareAgeRanges,
 } from "@macrostrat/stratigraphy-utils";
 import { ColumnAxisType } from "@macrostrat/column-components";
-import { StratigraphicPackage } from "./helpers";
+import { ScaleContinuousNumeric } from "d3-scale";
+import type {
+  ColumnScaleOptions,
+  CompositeColumnData,
+  ExtUnit,
+  PackageLayoutData,
+  StratigraphicPackage,
+} from "./types";
 
 const dt = 0.001;
 
+export interface PrepareColumnOptions extends ColumnScaleOptions {
+  axisType: ColumnAxisType;
+  t_age?: number;
+  b_age?: number;
+  t_pos?: number;
+  b_pos?: number;
+  mergeSections?: MergeSectionsMode;
+  collapseSmallUnconformities?: boolean | number;
+  scale?: ScaleContinuousNumeric<any, any>;
+}
+
+export enum MergeSectionsMode {
+  ALL = "all",
+  OVERLAPPING = "overlapping",
+}
+
+export interface PreparedColumnData extends CompositeColumnData {
+  sections: PackageLayoutData[];
+  units: ExtUnit[];
+}
+
 interface UnitsOverlap {
   (
     a: StratigraphicPackage,

package/src/section.ts

@@ -4,18 +4,23 @@ import {
   SectionLabelsColumn,
 } from "./units";
 import { ReactNode, FunctionComponent, useMemo } from "react";
-import { Timescale, TimescaleOrientation } from "@macrostrat/timescale";
+import {
+  Timescale,
+  TimescaleOrientation,
+  useMacrostratIntervals,
+} from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import hyper from "@macrostrat/hyper";
 import styles from "./column.module.sass";
-import type { ExtUnit } from "./prepare-units/helpers";
-import { PackageScaleLayoutData } from "./prepare-units/composite-scale";
 import {
   useMacrostratColumnData,
   useMacrostratUnits,
   MacrostratColumnProvider,
+  useMacrostratBaseURL,
 } from "./data-provider";
 import { Duration } from "./unit-details";
+import { Value } from "@macrostrat/data-components";
+import type { ExtUnit, PackageScaleLayoutData } from "./prepare-units/types";
 
 const h = hyper.styled(styles);
 
@@ -84,6 +89,7 @@ function SectionUnitsColumn(props: SectionSharedProps) {
     unitComponentProps,
     clipUnits,
     maxInternalColumns,
+    axisType,
     unconformityLabels = true,
   } = props;
 
@@ -127,6 +133,7 @@ function SectionUnitsColumn(props: SectionSharedProps) {
     h.if(unconformityLabels)(UnconformityLabels, {
       width,
       sections: scaleData,
+      verbose: false,
     }),
   ]);
 }
@@ -145,7 +152,7 @@ function SectionUnits(props: SectionProps) {
     maxInternalColumns,
   } = props;
 
-  const { domain, pixelScale, pixelHeight } = scaleInfo;
+  const { domain, pixelScale, pixelHeight, scale } = scaleInfo;
 
   /** Ensure that we can arrange units into the maximum number
    * of columns defined by unitComponentProps, but that we don't
@@ -177,6 +184,7 @@ function SectionUnits(props: SectionProps) {
         units,
         domain,
         pixelScale, // Actually pixels per myr,
+        scale,
       },
       h(CompositeUnitsColumn, {
         width,
@@ -213,6 +221,10 @@ type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
 export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
   const { levels = 3, packages, unconformityLabels = false } = props;
 
+  // Use intervals from Macrostrat API
+  const baseURL = useMacrostratBaseURL();
+  const intervals = useMacrostratIntervals(baseURL);
+
   let _levels: [number, number];
   if (typeof levels === "number") {
     // If levels is a number, use the most common starting level
@@ -227,7 +239,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
     h(
       "div.timescales",
       packages.map((group) => {
-        const { domain, pixelHeight, paddingTop, key } = group;
+        const { pixelHeight, paddingTop, key, scale } = group;
         return h(
           "div.timescale-container",
           { style: { paddingTop, "--timescale-level-count": nCols }, key },
@@ -238,7 +250,8 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               levels: _levels,
               absoluteAgeScale: true,
               showAgeAxis: false,
-              ageRange: domain as [number, number],
+              scale,
+              intervals,
             }),
           ],
         );
@@ -248,6 +261,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
       width: "100%",
       sections: packages,
       className: "unconformity-labels",
+      axisType: ColumnAxisType.AGE,
     }),
   ]);
 }
@@ -255,9 +269,11 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
 export function UnconformityLabels(props: {
   width: string | number;
   sections: PackageScaleLayoutData[];
+  axisType?: ColumnAxisType;
   className?: string;
+  verbose?: boolean;
 }) {
-  const { width, sections, className } = props;
+  const { width, sections, className, axisType, verbose } = props;
 
   return h(
     "div.unconformity-labels",
@@ -273,6 +289,7 @@ export function UnconformityLabels(props: {
       const upperAge = lastGroup?.domain[0];
       const lowerAge = scaleInfo.domain[1];
       return h(Unconformity, {
+        axisType,
         upperAge,
         lowerAge,
         style: {
@@ -280,12 +297,19 @@ export function UnconformityLabels(props: {
           height: scaleInfo.paddingTop,
           top,
         },
+        verbose,
       });
     }),
   );
 }
 
-function Unconformity({ upperAge, lowerAge, style }) {
+function Unconformity({
+  upperAge,
+  lowerAge,
+  style,
+  axisType,
+  verbose = false,
+}) {
   if (upperAge == null || lowerAge == null) {
     return null;
   }
@@ -303,7 +327,20 @@ function Unconformity({ upperAge, lowerAge, style }) {
     className = "small";
   }
 
+  let val: ReactNode;
+  if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {
+    const _txt = ageGap.toLocaleString("en-US", { maximumFractionDigits: 2 });
+    val = h(Value, { value: _txt, unit: "m" });
+  } else {
+    val = h(Duration, { value: ageGap });
+  }
+
+  let prefix: ReactNode = null;
+  if (verbose) {
+    prefix = h([" ", h("span.prefix", " gap")]);
+  }
+
   return h("div.unconformity", { style, className }, [
-    h("div.unconformity-text", h(Duration, { value: ageGap })),
+    h("div.unconformity-inner", h("div.unconformity-text", [val, prefix])),
   ]);
 }

package/src/unit-details/panel.module.sass

@@ -13,7 +13,7 @@
   overflow: hidden
   .title-container
     gap: 0.5em
-    align-items: center
+    align-items: baseline
     margin: 0
     flex-grow: 1
     z-index: 5
@@ -50,6 +50,13 @@
   position: relative
   margin: 1em
 
+.units-list
+  .item
+    &:after
+      content: ', '
+    &:last-child:after
+      content: ''
+
 .proportion, .sep, .no-units, .strat-name-text
   color: var(--secondary-color)
   font-style: italic