@macrostrat/column-views 2.0.0 → 2.1.0

package/src/prepare-units/helpers.ts

@@ -7,7 +7,9 @@ import {
   createUnitSorter,
   ensureArray,
   ensureRealFloat,
+  PossiblyClippedUnit,
 } from "./utils";
+import { compareAgeRanges } from "@macrostrat/stratigraphy-utils";
 
 const dt = 0.001;
 
@@ -38,14 +40,14 @@ export interface ExtUnit extends UnitLong {
 
 export function preprocessUnits<T extends UnitLong = UnitLong>(
   section: SectionInfo<T>,
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): ExtUnit[] {
   /** Preprocess units to add overlapping units and columns. */
   const units = section.units;
   let divisions = units.map((...args) => extendDivision(...args, axisType));
   for (let d of divisions) {
     const overlappingUnits = divisions.filter((u) =>
-      d.overlappingUnits.includes(u.unit_id)
+      d.overlappingUnits.includes(u.unit_id),
     );
 
     // Overlapping columns
@@ -72,10 +74,12 @@ export function preprocessUnits<T extends UnitLong = UnitLong>(
     }
   }
 
-  if (axisType != ColumnAxisType.AGE) {
-    return preprocessSectionUnits(divisions, axisType);
-  }
-
+  // TODO: we may want to re-enable this simpler processing for sections,
+  // but we want it to be less universally applied.
+  // if (axisType != ColumnAxisType.AGE) {
+  //   return preprocessSectionUnits(divisions, axisType);
+  // }
+  //
   return divisions;
 }
 
@@ -83,10 +87,10 @@ function extendDivision(
   unit: UnitLong,
   i: number,
   divisions: UnitLong[],
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): ExtUnit {
   const overlappingUnits = divisions.filter(
-    (d) => d.unit_id != unit.unit_id && unitsOverlap(unit, d, axisType)
+    (d) => d.unit_id != unit.unit_id && unitsOverlap(unit, d, axisType),
   );
   const u_pos = getUnitHeightRange(unit, axisType);
   const bottomOverlap = overlappingUnits.some((d) => {
@@ -109,8 +113,15 @@ function extendDivision(
 
 export function groupUnitsIntoSections<T extends UnitLong>(
   units: T[],
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): SectionInfo<T>[] {
+  if (axisType != ColumnAxisType.AGE) {
+    return groupUnitsIntoSectionByOverlap(units, axisType);
+  }
+
+  /** Group units into sections by section_id.
+   * This works for large-scale Macrostrat columns, where units are grouped by section_id.
+   * */
   let groups = Array.from(group(units, (d) => d.section_id));
   const unitComparator = createUnitSorter(axisType);
 
@@ -124,12 +135,66 @@ export function groupUnitsIntoSections<T extends UnitLong>(
   // Sections have no relative ordinal position other than age...
   const compareSections = createUnitSorter(ColumnAxisType.AGE) as (
     a: StratigraphicPackage,
-    b: StratigraphicPackage
+    b: StratigraphicPackage,
   ) => number;
   groups1.sort(compareSections);
   return groups1;
 }
 
+interface WorkingSection {
+  units: UnitLong[];
+  // Position or age
+  heightRange?: [number, number];
+}
+
+function groupUnitsIntoSectionByOverlap<T extends UnitLong>(
+  units: T[],
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
+): SectionInfo<T>[] {
+  /** Group units into sections by overlap.
+   * This creates "synthetic" sections that correspond to packages bound by scale gaps.
+   * This is most useful in the height and depth domains, where gaps (e.g., missing core) are
+   * common.
+   * */
+  // Start with each unit as its own "section", and progressively merge...
+  const sectionList: WorkingSection[] = [];
+  for (const unit of units) {
+    // Check if the unit overlaps with any existing section
+    const heightRange = getUnitHeightRange(unit, axisType);
+    let section: WorkingSection | undefined = sectionList.find((s) =>
+      compareAgeRanges(heightRange, s.heightRange),
+    );
+    if (section == null) {
+      // No overlap, create a new section
+      sectionList.push({
+        heightRange,
+        units: [unit],
+      });
+    } else {
+      // Overlap, merge the unit into the section
+      section.units.push(unit);
+      // Update the height range
+      section.heightRange = [
+        Math.max(section.heightRange[0], heightRange[0]),
+        Math.min(section.heightRange[1], heightRange[1]),
+      ];
+    }
+  }
+  // We should have a section for each unit, now we can convert to SectionInfo
+  // Ages have to be really actually ages, not heights
+
+  return sectionList.map((section, i) => {
+    const [b_age, t_age] = getSectionAgeRange(section.units);
+    return {
+      // Negative section IDs are used to indicate that these are synthetic sections
+      section_id: -i,
+      t_age: t_age,
+      b_age: b_age,
+      units: section.units as T[],
+    };
+  });
+}
+
 export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
   /** Get the overall age range of a set of units. */
   const t_ages = units.map((d) => d.t_age);
@@ -140,7 +205,7 @@ export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
 }
 
 export function mergeOverlappingSections<T extends UnitLong>(
-  sections: SectionInfo<T>[]
+  sections: SectionInfo<T>[],
 ): SectionInfo<T>[] {
   /** Columns can have sections that overlap in time. Here, we merge overlapping
    * sections into a single section to correctly render gap-bound packages.
@@ -172,7 +237,7 @@ export function mergeOverlappingSections<T extends UnitLong>(
 
 function preprocessSectionUnits(
   units: UnitLong[],
-  axisType: ColumnAxisType = ColumnAxisType.DEPTH
+  axisType: ColumnAxisType = ColumnAxisType.DEPTH,
 ): ExtUnit[] {
   /** Preprocess units for a "section" column type, which is guaranteed to be simpler. */
   // We have to assume the units are ordered...
@@ -189,7 +254,7 @@ function preprocessSectionUnit(
   i: number,
   units: UnitLong[],
   accumulatedThickness: number = 0,
-  axisType: ColumnAxisType = ColumnAxisType.DEPTH
+  axisType: ColumnAxisType = ColumnAxisType.DEPTH,
 ): ExtUnit {
   /** Preprocess a single unit for a "section" column type.
    * No provision for overlapping units.

package/src/prepare-units/index.ts

@@ -17,7 +17,7 @@ import {
   PackageLayoutData,
 } from "./composite-scale";
 import type { SectionInfo } from "./helpers";
-import { agesOverlap, unitsOverlap } from "./utils";
+import { agesOverlap, getUnitHeightRange, unitsOverlap } from "./utils";
 
 export * from "./utils";
 export { preprocessUnits, groupUnitsIntoSections };
@@ -42,7 +42,7 @@ export interface PreparedColumnData extends CompositeColumnData {
 
 export function usePreparedColumnUnits(
   data: UnitLong[],
-  options: PrepareColumnOptions
+  options: PrepareColumnOptions,
 ): PreparedColumnData {
   /** This function wraps and memoizes all preparation steps for converting
    * an array of units from the /units route to a form ready for usage.
@@ -54,7 +54,7 @@ export function usePreparedColumnUnits(
 
 export function prepareColumnUnits(
   units: UnitLong[],
-  options: PrepareColumnOptions
+  options: PrepareColumnOptions,
 ): PreparedColumnData {
   /** Prepare units for rendering into Macrostrat columns */
 
@@ -136,26 +136,14 @@ export function prepareColumnUnits(
     sectionsWithScales = collapseUnconformitiesByPixelHeight(
       sectionsWithScales,
       threshold,
-      options
+      options,
     );
   }
 
-  /** Reconstitute the units so that they are sorted by section.
-   * This is mostly important so that unit keyboard navigation
-   * predictably selects adjacent units.
-   */
-  const units2 = sectionsWithScales.reduce((acc, group) => {
-    const { units } = group;
-    for (const unit of units) {
-      acc.push(unit);
-    }
-    return acc;
-  }, []);
-
   /** Prepare section scale information using groups */
   const { totalHeight, sections: sections2 } = finalizeSectionHeights(
     sectionsWithScales,
-    unconformityHeight
+    unconformityHeight,
   );
 
   /** For each section, find units that are overlapping.
@@ -169,6 +157,18 @@ export function prepareColumnUnits(
     };
   });
 
+  /** Reconstitute the units so that they are sorted by section and properly enhanced.
+   * This is mostly important so that unit keyboard navigation
+   * predictably selects adjacent units.
+   */
+  const units2 = sectionsOut.reduce((acc, group) => {
+    const { units } = group;
+    for (const unit of units) {
+      acc.push(unit);
+    }
+    return acc;
+  }, []);
+
   return {
     units: units2,
     totalHeight,

package/src/prepare-units/utils.ts

@@ -13,13 +13,13 @@ interface UnitsOverlap {
     a: StratigraphicPackage,
     b: StratigraphicPackage,
     axisType?: ColumnAxisType.AGE,
-    tolerance?: number
+    tolerance?: number,
   ): boolean;
   (
     a: BaseUnit,
     b: BaseUnit,
     axisType: ColumnAxisType,
-    tolerance?: number
+    tolerance?: number,
   ): boolean;
 }
 
@@ -27,12 +27,12 @@ export const unitsOverlap: UnitsOverlap = function (
   a,
   b,
   axisType: ColumnAxisType = ColumnAxisType.AGE,
-  tolerance: number = 0.001
+  tolerance: number = 0.001,
 ): boolean {
   const rel = compareAgeRanges(
     getUnitHeightRange(a, axisType),
     getUnitHeightRange(b, axisType),
-    tolerance
+    tolerance,
   );
   return rel != AgeRangeRelationship.Disjoint;
 };
@@ -41,12 +41,12 @@ export const unitsOverlap: UnitsOverlap = function (
 export function agesOverlap(
   a: StratigraphicPackage,
   b: StratigraphicPackage,
-  tolerance: number = dt
+  tolerance: number = dt,
 ): boolean {
   return unitsOverlap(a, b, ColumnAxisType.AGE, tolerance);
 }
 
-interface PossiblyClippedUnit extends BaseUnit {
+export interface PossiblyClippedUnit extends BaseUnit {
   // Internally created clipped positions
   t_clip_pos?: number;
   b_clip_pos?: number;
@@ -54,7 +54,7 @@ interface PossiblyClippedUnit extends BaseUnit {
 
 export function getUnitHeightRange(
   unit: PossiblyClippedUnit,
-  axisType: ColumnAxisType
+  axisType: ColumnAxisType,
 ): [number, number] {
   switch (axisType) {
     case ColumnAxisType.AGE:

package/src/section.ts

@@ -120,9 +120,9 @@ function SectionUnitsColumn(props: SectionSharedProps) {
             width: innerWidth,
             clipUnits,
             maxInternalColumns,
-          } // This unconformity is with the section _above_
+          }, // This unconformity is with the section _above_
         );
-      })
+      }),
     ),
     h.if(unconformityLabels)(UnconformityLabels, {
       width,
@@ -157,7 +157,7 @@ function SectionUnits(props: SectionProps) {
       nColumns: Math.min(
         maxInternalColumns ?? Math.floor(width / 10),
         unitComponentProps?.nColumns ?? Infinity,
-        Math.max(...units.map((d) => d.column)) + 1
+        Math.max(...units.map((d) => d.column)) + 1,
       ),
       //axisType,
     };
@@ -184,8 +184,8 @@ function SectionUnits(props: SectionProps) {
         unitComponent,
         unitComponentProps: _unitComponentProps,
         clipToFrame: clipUnits,
-      })
-    )
+      }),
+    ),
   );
 }
 
@@ -240,9 +240,9 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               showAgeAxis: false,
               ageRange: domain as [number, number],
             }),
-          ]
+          ],
         );
-      })
+      }),
     ),
     h.if(unconformityLabels)(UnconformityLabels, {
       width: "100%",
@@ -281,7 +281,7 @@ export function UnconformityLabels(props: {
           top,
         },
       });
-    })
+    }),
   );
 }
 

package/src/unit-details/panel.ts

@@ -5,17 +5,24 @@ import { Button, ButtonGroup } from "@blueprintjs/core";
 import { ReactNode, useMemo, useState } from "react";
 import {
   DataField,
-  EnvironmentsList,
+  // EnvironmentsList,
   IntervalShort,
   IntervalTag,
   ItemList,
-  LithologyList,
+  // LithologyList,
   LithologyTagFeature,
   Parenthetical,
   Value,
 } from "@macrostrat/data-components";
+import { LithologyList, EnvironmentsList } from "../../../data-components/src";
 import { useMacrostratData, useMacrostratDefs } from "../data-provider";
-import { Environment, UnitLong, UnitLongFull } from "@macrostrat/api-types";
+import {
+  Environment,
+  UnitLong,
+  UnitLongFull,
+  Lithology,
+  Interval,
+} from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
 
@@ -35,6 +42,7 @@ export function UnitDetailsPanel({
   actions,
   selectUnit,
   columnUnits,
+  onClickItem,
 }: {
   unit: any;
   onClose?: any;
@@ -45,6 +53,7 @@ export function UnitDetailsPanel({
   lithologyFeatures?: Set<LithologyTagFeature>;
   columnUnits?: UnitLong[];
   selectUnit?: (unitID: number) => void;
+  onClickItem?: (item: any) => void;
 }) {
   const [showJSON, setShowJSON] = useState(false);
 
@@ -52,7 +61,12 @@ export function UnitDetailsPanel({
   if (showJSON) {
     content = h(JSONView, { data: unit, showRoot: false });
   } else {
-    content = h(UnitDetailsContent, { unit, features, lithologyFeatures });
+    content = h(UnitDetailsContent, {
+      unit,
+      features,
+      lithologyFeatures,
+      onClickItem,
+    });
   }
 
   let title = defaultNameFunction(unit);
@@ -136,12 +150,19 @@ function UnitDetailsContent({
     UnitDetailsFeature.AdjacentUnits,
     UnitDetailsFeature.OutcropType,
   ]),
+  onClickItem,
+  getItemHref,
 }: {
   unit: UnitLong;
   selectUnit?: (unitID: number) => void;
   columnUnits?: UnitLong[];
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
+  onClickItem?: (
+    event: MouseEvent,
+    item: Lithology | Environment | UnitLong | Interval,
+  ) => void;
+  getItemHref?: (item: Lithology | Environment | UnitLong) => string | null;
 }) {
   const lithMap = useMacrostratDefs("lithologies");
   const envMap = useMacrostratDefs("environments");
@@ -190,7 +211,7 @@ function UnitDetailsContent({
       value: formatRange(unit.b_pos, unit.t_pos),
       children: h(
         Parenthetical,
-        h(Value, { value: thickness, unit: thicknessUnit })
+        h(Value, { value: thickness, unit: thicknessUnit }),
       ),
     });
   }
@@ -215,37 +236,46 @@ function UnitDetailsContent({
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
+      getItemHref,
+      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
-      h(IntervalProportions, { unit }),
+      h(IntervalProportions, {
+        unit,
+        onClickItem,
+      }),
     ]),
-    h(EnvironmentsList, { environments }),
+    h(EnvironmentsList, {
+      environments,
+      onClickItem,
+      getItemHref,
+    }),
     h.if(unit.strat_name_id != null)(
       DataField,
       {
         label: "Stratigraphic name",
       },
-      h("span.strat-name-id", unit.strat_name_id)
+      h("span.strat-name-id", unit.strat_name_id),
     ),
     outcropField,
     h.if(features.has(UnitDetailsFeature.AdjacentUnits))([
       h(
         DataField,
         { label: "Above" },
-        h(UnitIDList, { units: unit.units_above, selectUnit })
+        h(UnitIDList, { units: unit.units_above, selectUnit }),
       ),
       h(
         DataField,
         { label: "Below" },
-        h(UnitIDList, { units: unit.units_below, selectUnit })
+        h(UnitIDList, { units: unit.units_below, selectUnit }),
       ),
     ]),
     colorSwatch,
     h(
       DataField,
       { label: "Source", inline: true },
-      h(BibInfo, { refs: unit.refs })
+      h(BibInfo, { refs: unit.refs }),
     ),
   ]);
 }
@@ -300,7 +330,7 @@ function BibInfo({ refs }) {
 
   return h(
     "ul.refs",
-    refData.map((data, i) => h(Citation, { data, tag: "li", key: i }))
+    refData.map((data, i) => h(Citation, { data, tag: "li", key: i })),
   );
 }
 
@@ -324,7 +354,7 @@ function AgeField({ unit, children }) {
       value: formatRange(b_age, t_age),
       unit: _unit,
     },
-    children
+    children,
   );
 }
 
@@ -346,6 +376,48 @@ function getAgeRange(_unit) {
   return [b_age, t_age, unit];
 }
 
+function getAge(value) {
+  /** Get the age value in Ma, ka, or Ga as appropriate */
+  let unit = "Ma";
+  if (value < 0.8) {
+    unit = "ka";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Ga";
+    value /= 1000;
+  }
+
+  return [value, unit];
+}
+
+export function AgeLabel({
+  age,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+  className,
+}: {
+  age: number;
+  className?: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+}) {
+  /** Component to display a single age value with unit conversion from
+   * Ma to ka or Ga as appropriate.
+   */
+  const [value, unit] = getAge(age);
+
+  const _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit, className });
+}
+
 export function Duration({
   value,
   maximumFractionDigits = 2,
@@ -374,7 +446,7 @@ export function Duration({
 
 function enhanceEnvironments(
   environments: Partial<Environment>[],
-  envMap: Map<number, Environment>
+  envMap: Map<number, Environment>,
 ) {
   return environments.map((env) => {
     return {
@@ -386,7 +458,7 @@ function enhanceEnvironments(
 
 function enhanceLithologies(
   lithologies: Partial<UnitLong["lith"]>,
-  lithMap: Map<number, any>
+  lithMap: Map<number, any>,
 ) {
   return lithologies.map((lith) => {
     return {
@@ -422,13 +494,13 @@ function UnitIDList({ units, selectUnit }) {
           },
           key: unit.id,
         },
-        unit
+        unit,
       );
-    })
+    }),
   );
 }
 
-function IntervalProportions({ unit }) {
+function IntervalProportions({ unit, onClickItem }) {
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
   let b_prop = unit.b_prop ?? 0;
@@ -456,14 +528,26 @@ function IntervalProportions({ unit }) {
     p0 = h("span.joint-proportion", [p0, h("span.sep", "to"), p1]);
   }
 
+  const clickable = onClickItem != null;
+
+  const handleClick = (event: MouseEvent) => {
+    if (onClickItem) {
+      onClickItem({ event, data: interval0 });
+    }
+  };
+
   return h("div.interval-proportions", [
     h(IntervalTag, {
+      className: clickable ? "clickable" : "",
+      onClick: clickable ? handleClick : undefined,
       interval: interval0,
       prefix: p0,
     }),
     h.if(i0 != i1)("span.discourage-break", [
       h("span.sep", "to"),
       h(IntervalTag, {
+        className: clickable ? "clickable" : "",
+        onClick: clickable ? handleClick : undefined,
         interval: {
           ...int1,
           id: i1,
@@ -501,7 +585,7 @@ function formatRange(min, max, precision = null) {
 
   return `${formatSignificance(min, precision)}–${formatSignificance(
     max,
-    precision
+    precision,
   )}`;
 }
 

package/src/unit-details/popover.ts

@@ -34,8 +34,8 @@ export function UnitDetailsPopover({
           preventOverflow: { options: { padding: viewportPadding } },
         },
       },
-      h("span.popover-target")
-    )
+      h("span.popover-target"),
+    ),
   );
 }
 
@@ -48,7 +48,7 @@ function InteractionBarrier({ children }) {
         e.stopPropagation();
       },
     },
-    children
+    children,
   );
 }
 
@@ -76,7 +76,7 @@ export function UnitSelectionPopover() {
         unit,
         showLithologyProportions: true,
         className: "legend-panel",
-      })
-    )
+      }),
+    ),
   );
 }