@macrostrat/column-views 3.3.4 → 3.4.0

package/src/prepare-units/helpers.ts

@@ -16,95 +16,143 @@ import type { ExtUnit, SectionInfo, StratigraphicPackage } from "./types";
 
 const dt = 0.001;
 
-export function preprocessUnits<T extends UnitLong = UnitLong>(
-  section: SectionInfo<T>,
-  axisType: ColumnAxisType = ColumnAxisType.AGE,
-): ExtUnit[] {
-  /** Preprocess units to add overlapping units and columns. */
-  let units = section.units;
+export type UnitWithDefinedOverlap<T extends BaseUnit> = T & {
+  overlap: UnitOverlapInfo<T>;
+};
 
-  let divisions = units.map((...args) => extendDivision(...args, axisType));
-  for (let d of divisions) {
-    const overlappingUnits = divisions.filter((u) =>
-      d.overlappingUnits.includes(u.unit_id),
-    );
+type UnitOverlapInfo<T extends BaseUnit> = {
+  column: number;
+  nColumns: number;
+  unitGroup: UnitGroup<T>;
+};
 
-    // Overlapping columns
-    const columns = overlappingUnits.map((d) => d.column);
+class UnitGroup<T extends BaseUnit> implements StratigraphicPackage {
+  units: T[];
 
-    if (columns.includes(d.column)) {
-      let col = 0;
-      // Go through columns to find a better index
-      while (columns.includes(col)) {
-        col++;
-      }
-      d.column ??= col;
-    }
+  constructor(units: T[]) {
+    this.units = units;
+  }
 
-    // If unit overlaps the edges of a section, set the clip positions
-    const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
-    if (axisType == ColumnAxisType.AGE) {
-      if (b_pos > section.b_age) {
-        d.b_clip_pos = section.b_age;
-      }
-      if (t_pos < section.t_age) {
-        d.t_clip_pos = section.t_age;
+  get t_age(): number {
+    return Math.min(...this.units.map((d) => d.t_age));
+  }
+
+  get b_age(): number {
+    return Math.max(...this.units.map((d) => d.b_age));
+  }
+
+  getUnits(): UnitWithDefinedOverlap<T>[] {
+    return assignColumnsToUnitsWithinOverlappingGroup(this);
+  }
+}
+
+function groupUnitsByMutualOverlap<T extends BaseUnit>(
+  units: T[],
+  tolerance: number = dt,
+): UnitGroup<T>[] {
+  /** Group units within a section that have mutual overlap. */
+  const sections = groupUnitsIntoSectionsByOverlap(
+    units,
+    ColumnAxisType.AGE,
+    tolerance,
+  );
+  return sections.map((d) => {
+    return new UnitGroup(d.units);
+  });
+}
+
+const sortByAge = createUnitSorter(ColumnAxisType.AGE);
+
+function assignColumnsToUnitsWithinOverlappingGroup<T extends BaseUnit>(
+  group: UnitGroup<T>,
+): UnitWithDefinedOverlap<T>[] {
+  /** A relatively naïve function to assign columns to units within a mutually overlapping group.
+   * This gets the number of columns that would be needed to accommodate the units in the group.
+   * It then assigns columns to units in the group based on the number of columns needed, with
+   * lower units further to the left.
+   */
+
+  const sortedUnits = [...group.units].sort((a, b) => b.b_age - a.b_age);
+
+  const columns: T[][] = [];
+
+  for (const unit of sortedUnits) {
+    // Find a column that is not already occupied by an overlapping unit
+    let didAddToExistingColumn = false;
+    for (const column of columns) {
+      const lastUnit = column[column.length - 1];
+      if (!unitsOverlap(unit, lastUnit, ColumnAxisType.AGE, dt)) {
+        column.push(unit);
+        didAddToExistingColumn = true;
+        break;
       }
     }
-    if (axisType == ColumnAxisType.DEPTH) {
-      if (b_pos > section.b_pos) {
-        d.b_clip_pos = section.b_pos;
-      }
-      if (t_pos < section.t_pos) {
-        d.t_clip_pos = section.t_pos;
-      }
+    if (!didAddToExistingColumn) {
+      columns.push([unit]);
     }
-    // if (axisType == ColumnAxisType.HEIGHT) {
-    //   if (b_pos < section.b_pos) {
-    //     d.b_clip_pos = section.b_pos;
-    //   }
-    //   if (t_pos > section.t_pos) {
-    //     d.t_clip_pos = section.t_pos;
-    //   }
-    // }
   }
 
-  return divisions;
+  const units: UnitWithDefinedOverlap<T>[] = columns.flatMap(
+    (column, columnIndex) =>
+      column.map((unit) => {
+        return {
+          ...unit,
+          overlap: {
+            column: columnIndex,
+            nColumns: columns.length,
+            unitGroup: group,
+          },
+        };
+      }),
+  );
+
+  return units.toSorted(sortByAge);
 }
 
-function extendDivision(
-  unit: UnitLong,
-  i: number,
-  divisions: UnitLong[],
+export function preprocessUnits<T extends UnitLong = UnitLong>(
+  section: SectionInfo<T>,
   axisType: ColumnAxisType = ColumnAxisType.AGE,
-): ExtUnit {
-  // TODO: make this configurable
+): ExtUnit[] {
+  /** Preprocess units to add overlapping units and columns. */
+  let units = section.units;
+
   let tolerance = 0.001; // 1 kyr tolerance for age columns
   if (axisType != ColumnAxisType.AGE) {
     tolerance = 0.01; // 1cm tolerance for height/depth columns
   }
 
-  const overlappingUnits = divisions.filter(
-    (d) =>
-      d.unit_id != unit.unit_id && unitsOverlap(unit, d, axisType, tolerance),
-  );
-  const u_pos = getUnitHeightRange(unit, axisType);
-  const bottomOverlap = overlappingUnits.some((d) => {
-    const d_pos = getUnitHeightRange(d, axisType);
-    // Check if the unit is below the current unit
-    return d_pos[0] < u_pos[0] + dt;
-  });
-  let column = 0;
-  if (overlappingUnits.length == 1) {
-    column = 1;
+  const unitGroups = groupUnitsByMutualOverlap(units, tolerance);
+
+  const divisions: any[] = [];
+  // Serialize all groups' units to a single array
+  for (const group of unitGroups) {
+    divisions.push(...group.getUnits());
   }
 
-  return {
-    ...unit,
-    bottomOverlap,
-    column: unit.column ?? column,
-    overlappingUnits: overlappingUnits.map((d) => d.unit_id),
-  };
+  return divisions.map((d) =>
+    enhanceUnitWithClippingPosition(section, d, axisType),
+  );
+}
+
+export function enhanceUnitWithClippingPosition(section, d, axisType) {
+  const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
+  if (axisType == ColumnAxisType.AGE) {
+    if (b_pos > section.b_age) {
+      d.b_clip_pos = section.b_age;
+    }
+    if (t_pos < section.t_age) {
+      d.t_clip_pos = section.t_age;
+    }
+  }
+  if (axisType == ColumnAxisType.DEPTH) {
+    if (b_pos > section.b_pos) {
+      d.b_clip_pos = section.b_pos;
+    }
+    if (t_pos < section.t_pos) {
+      d.t_clip_pos = section.t_pos;
+    }
+  }
+  return d;
 }
 
 export function groupUnitsIntoSectionsBySectionID<T extends UnitLong>(
@@ -141,9 +189,10 @@ interface WorkingSection {
   heightRange?: [number, number];
 }
 
-export function groupUnitsIntoSectionsByOverlap<T extends UnitLong>(
+export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
   units: T[],
   axisType: ColumnAxisType = ColumnAxisType.AGE,
+  tolerance: number = dt,
 ): SectionInfo<T>[] {
   /** Group units into sections by overlap.
    * This creates "synthetic" sections that correspond to packages bound by scale gaps.
@@ -157,7 +206,7 @@ export function groupUnitsIntoSectionsByOverlap<T extends UnitLong>(
     const heightRange = getUnitHeightRange(unit, axisType);
     let section: WorkingSection | undefined = sectionList.find(
       (s) =>
-        compareAgeRanges(heightRange, s.heightRange) !==
+        compareAgeRanges(heightRange, s.heightRange, tolerance) !==
         AgeRangeRelationship.Disjoint,
     );
     if (section == null) {

package/src/prepare-units/index.ts

@@ -59,7 +59,7 @@ export function prepareColumnUnits(
     scale,
   } = options;
 
-  let _totalHeight = null;
+  let _totalHeight: number | null = null;
 
   if (scale != null) {
     // Set t_age and b_age based on scale domain if not already set

package/src/section.ts

@@ -164,7 +164,6 @@ function SectionUnits(props: SectionProps) {
       nColumns: Math.min(
         maxInternalColumns ?? Math.floor(width / 10),
         unitComponentProps?.nColumns ?? Infinity,
-        Math.max(...units.map((d) => d.column)) + 1,
       ),
       //axisType,
     };

package/src/unit-details/age-range.ts

@@ -114,6 +114,7 @@ export interface IntervalProportionsProps extends Omit<
   unit: UnitIntervalConstraints;
   showProportions?: boolean;
   calculateProportionsFromAges?: boolean;
+  onClickItem?: any;
 }
 
 export function IntervalProportions({

package/src/unit-details/identifiers.ts

@@ -0,0 +1,67 @@
+import { isClickable, ItemInteractionProps } from "@macrostrat/data-components";
+import h from "./panel.module.sass";
+import { ReactNode } from "react";
+import classNames from "classnames";
+
+export function ClickableText({
+  className,
+  ...rest
+}: {
+  className?: string;
+  children: ReactNode;
+} & ItemInteractionProps) {
+  /** An optionally clickable text element */
+  const clickable = isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return h(tag, { className: classNames(className, { clickable }), ...rest });
+}
+
+export function Identifier({
+  id,
+  className,
+  ...rest
+}: {
+  id: number | string;
+  className?: string;
+} & ItemInteractionProps) {
+  /** An item that displays a numeric identifier, optionally clickable */
+  return h(
+    ClickableText,
+    {
+      className: classNames("identifier", className),
+      ...rest,
+    },
+    id,
+  );
+}
+
+export type UnitInfo = {
+  unitID: number;
+  colID?: number;
+  name?: string;
+};
+
+export function UnitIdentifier({
+  unitID,
+  colID,
+  name,
+  ...interactionProps
+}: UnitInfo & ItemInteractionProps) {
+  if (name != null) {
+    return h(
+      ClickableText,
+      {
+        className: "unit-name",
+        ...interactionProps,
+      },
+      name,
+    );
+  }
+
+  return h(Identifier, {
+    className: "unit-id",
+    key: unitID,
+    id: unitID,
+    ...interactionProps,
+  });
+}

package/src/unit-details/index.ts

@@ -2,3 +2,5 @@ export * from "./panel";
 export * from "./popover";
 export * from "./modal-panel";
 export * from "./age-range";
+export * from "./strat-names";
+export * from "./identifiers";

package/src/unit-details/panel.ts

@@ -1,13 +1,9 @@
-import hyper from "@macrostrat/hyper";
-import styles from "./panel.module.sass";
 import { JSONView } from "@macrostrat/ui-components";
 import { Button, ButtonGroup } from "@blueprintjs/core";
 import { ReactNode, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
-  isClickable,
-  ItemInteractionProps,
   ItemList,
   LithologyList,
   LithologyTagFeature,
@@ -16,7 +12,6 @@ import {
   MacrostratItemIdentifier,
   Parenthetical,
   useInteractionManager,
-  useInteractionProps,
   Value,
 } from "@macrostrat/data-components";
 import { useColumnUnitsMap } from "../data-provider";
@@ -24,10 +19,10 @@ import {
   useMacrostratColumnInfo,
   useMacrostratData,
   useMacrostratDefs,
-  useStratNames,
 } from "@macrostrat/data-provider";
 import type {
   Environment,
+  EnvironmentIdentifier,
   Interval,
   Lithology,
   UnitLong,
@@ -37,8 +32,10 @@ import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
 import { AgeField, Duration, IntervalProportions } from "./age-range";
 import { formatRange, formatSignificance } from "./utils.ts";
-
-const h = hyper.styled(styles);
+import h from "./panel.module.sass";
+import { StratNameField } from "./strat-names.ts";
+import { Identifier, UnitIdentifier, UnitInfo } from "./identifiers.ts";
+import { LithologyIdentifier } from "@macrostrat/api-types/src/lithologies";
 
 export interface UnitDetailsPanelProps {
   unit: any;
@@ -51,6 +48,7 @@ export interface UnitDetailsPanelProps {
   onSelectUnit?: (unitID: number) => void;
   onClickItem?: MacrostratItemClickHandler;
   interactionManager?: MacrostratInteractionManager;
+  showJSON?: boolean;
 }
 
 export function UnitDetailsPanel({
@@ -68,11 +66,12 @@ export function UnitDetailsPanel({
   hiddenActions = null,
   onSelectUnit,
   onClickItem,
+  showJSON,
 }: UnitDetailsPanelProps) {
-  const [showJSON, setShowJSON] = useState(false);
+  const [_showJSON, setShowJSON] = useState(false);
 
-  let content = null;
-  if (showJSON) {
+  let content: ReactNode = null;
+  if (showJSON ?? _showJSON) {
     content = h(JSONView, { data: unit, showRoot: false });
   } else {
     content = h(UnitDetailsContent, {
@@ -120,7 +119,13 @@ export function UnitDetailsPanel({
       if ("unit_id" in item && !("col_id" in item)) {
         // We are selecting a unit within the column
         return (event: MouseEvent) => {
-          onSelectUnit(item.unit_id);
+          if (onSelectUnit != null) {
+            onSelectUnit(item.unit_id);
+          } else if (onClickItem != null) {
+            console.warn(
+              "Unit selection: onClickItem is defined but onSelectUnit is not; ignoring click",
+            );
+          }
           // Don't allow event to propagate further (e.g., to open a link)
           event.preventDefault();
         };
@@ -173,7 +178,7 @@ export function LegendPanelHeader({
       minimal: true,
       small: true,
       onClick() {
-        onClose();
+        onClose?.();
       },
     }),
   ]);
@@ -223,7 +228,7 @@ function UnitDetailsContent({
   const environments = enhanceEnvironments(unit.environ, envMap);
   const lithologies = enhanceLithologies(unit.lith ?? [], lithMap);
 
-  let outcropField = null;
+  let outcropField: ReactNode = null;
   if (features.has(UnitDetailsFeature.OutcropType)) {
     // Determine outcrop type
     let outcrop = unit.outcrop;
@@ -236,7 +241,7 @@ function UnitDetailsContent({
     });
   }
 
-  let thicknessOrHeightRange = null;
+  let thicknessOrHeightRange: ReactNode = null;
   const [thickness, thicknessUnit] = getThickness(unit);
   // Proxy for actual heights in t_pos and b_pos
   if (
@@ -281,7 +286,7 @@ function UnitDetailsContent({
     thicknessOrHeightRange,
     h.if(lithologies != null)(LithologyList, {
       label: "Lithology",
-      lithologies,
+      lithologies: lithologies ?? [],
       features: lithologyFeatures,
     }),
     h(AgeField, { unit }, [
@@ -363,53 +368,7 @@ export function ReferencesField({ refs, className = null, ...rest }) {
   );
 }
 
-function useStratNameData(strat_name_id: number) {
-  const stratNames = useStratNames([strat_name_id]);
-  return stratNames?.[0];
-}
-
-function StratNameField(
-  props: {
-    strat_name_id: number;
-    className?: string;
-  } & ItemInteractionProps,
-) {
-  /** Handling for stratigraphic name field */
-  const { strat_name_id, className, ...rest } = props;
-  const data = useStratNameData(strat_name_id);
-
-  const baseInteractionProps = useInteractionProps({ strat_name_id });
-
-  const coreProps = {
-    ...baseInteractionProps,
-    ...rest,
-  };
-
-  let inner: any = h(Identifier, { id: strat_name_id });
-  const name = data?.strat_name_long;
-  if (name != null) {
-    inner = h("span.strat-name", name);
-  }
-
-  const clickable = isClickable(coreProps);
-
-  return h(
-    DataField,
-    {
-      label: "Stratigraphic name",
-    },
-    h(
-      clickable ? "a" : "span",
-      {
-        className: classNames({ clickable }, className),
-        ...coreProps,
-      },
-      inner,
-    ),
-  );
-}
-
-function getThickness(unit): [string, string] {
+function getThickness(unit): [string, string | null] {
   let minThickness = unit.min_thick ?? 0;
   let maxThickness = unit.max_thick ?? unit.min_thick ?? 0;
   let _unit = "m";
@@ -480,8 +439,8 @@ function Citation({ data, tag = "p" }) {
 }
 
 function enhanceEnvironments(
-  environments: Partial<Environment>[] | null,
-  envMap: Map<number, Environment>,
+  environments?: EnvironmentIdentifier[] | null,
+  envMap?: Map<number, Environment> | null,
 ) {
   return environments?.map((env) => {
     return {
@@ -492,8 +451,8 @@ function enhanceEnvironments(
 }
 
 function enhanceLithologies(
-  lithologies: Partial<UnitLong["lith"]>,
-  lithMap: Map<number, any>,
+  lithologies?: LithologyIdentifier[] | null,
+  lithMap?: Map<number, any> | null,
 ) {
   return lithologies?.map((lith) => {
     return {
@@ -503,44 +462,6 @@ function enhanceLithologies(
   });
 }
 
-export function ClickableText({
-  className,
-  ...rest
-}: {
-  className?: string;
-  children: ReactNode;
-} & ItemInteractionProps) {
-  /** An optionally clickable text element */
-  const clickable = isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return h(tag, { className: classNames(className, { clickable }), ...rest });
-}
-
-export function Identifier({
-  id,
-  className,
-  ...rest
-}: {
-  id: number | string;
-  className?: string;
-} & ItemInteractionProps) {
-  /** An item that displays a numeric identifier, optionally clickable */
-  return h(
-    ClickableText,
-    {
-      className: classNames("identifier", className),
-      ...rest,
-    },
-    id,
-  );
-}
-
-type UnitInfo = {
-  unitID: number;
-  colID?: number;
-  name?: string;
-};
-
 function UnitIDList({ units, showNames = false }) {
   const unitsMap = useColumnUnitsMap();
 
@@ -551,7 +472,7 @@ function UnitIDList({ units, showNames = false }) {
     if (showNames) {
       return u1.map((unitID) => {
         const unitData = unitsMap?.get(unitID);
-        let name: string = undefined;
+        let name: string | null = null;
         if (unitData != null) {
           name = defaultNameFunction(unitData);
         }
@@ -586,28 +507,3 @@ function UnitIDList({ units, showNames = false }) {
     }),
   );
 }
-
-function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}: UnitInfo & ItemInteractionProps) {
-  if (name != null) {
-    return h(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps,
-      },
-      name,
-    );
-  }
-
-  return h(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps,
-  });
-}

package/src/unit-details/popover.ts

@@ -1,11 +1,7 @@
 import hyper from "@macrostrat/hyper";
 import { Popover } from "@blueprintjs/core";
 import styles from "./popover.module.sass";
-import {
-  useAtomOverlayPosition,
-  useSelectedUnit,
-  useUnitSelectionDispatch,
-} from "../data-provider";
+import { useAtomOverlayPosition, useUnitSelection } from "../data-provider";
 import {
   UnitDetailsFeature,
   UnitDetailsPanel,
@@ -66,8 +62,7 @@ function InteractionBarrier({ children }) {
 export function UnitSelectionPopover(
   props: Omit<UnitDetailsPanelProps, "onSelectUnit" | "unit">,
 ) {
-  const unit = useSelectedUnit();
-  const selectUnit = useUnitSelectionDispatch();
+  const [unit, selectUnit] = useUnitSelection();
   const position = useAtomOverlayPosition();
   if (unit == null) {
     return null;

package/src/unit-details/strat-names.ts

@@ -0,0 +1,57 @@
+import {
+  DataField,
+  isClickable,
+  ItemInteractionProps,
+  useInteractionProps,
+} from "@macrostrat/data-components";
+import h from "./panel.module.sass";
+import classNames from "classnames";
+import { useStratNames } from "@macrostrat/data-provider";
+import { Identifier } from "./identifiers.ts";
+
+function useStratNameData(strat_name_id: number) {
+  const stratNames = useStratNames([strat_name_id]);
+  return stratNames?.[0];
+}
+
+export function StratNameField(
+  props: {
+    strat_name_id: number;
+    className?: string;
+  } & ItemInteractionProps,
+) {
+  /** Handling for stratigraphic name field */
+  const { strat_name_id, className, ...rest } = props;
+
+  const data = useStratNameData(strat_name_id);
+
+  const baseInteractionProps = useInteractionProps({ strat_name_id });
+
+  const coreProps = {
+    ...baseInteractionProps,
+    ...rest,
+  };
+
+  let inner: any = h(Identifier, { id: strat_name_id });
+  const name = data?.strat_name_long;
+  if (name != null) {
+    inner = h("span.strat-name", name);
+  }
+
+  const clickable = isClickable(coreProps);
+
+  return h(
+    DataField,
+    {
+      label: "Stratigraphic name",
+    },
+    h(
+      clickable ? "a" : "span",
+      {
+        className: classNames({ clickable }, className),
+        ...coreProps,
+      },
+      inner,
+    ),
+  );
+}