@macrostrat/column-views 3.3.5 → 3.4.0

package/dist/units/index.js

@@ -34,13 +34,27 @@ function BasicUnitComponent({ division, ...rest }) {
     patternID: division.patternID
   });
 }
-function UnitComponent({ division, nColumns = 2, ...rest }) {
+function UnitComponent({
+  division,
+  nColumns = 2,
+  ...rest
+}) {
   const width = rest.width ?? useColumnLayout()?.width;
-  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
-  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;
-  const columnIx = (division.column ?? 0) % _nColumns;
-  const reducedWidth = width / _nColumns;
-  const x = columnIx * width / _nColumns;
+  let _nColumns = nColumns;
+  if (isNaN(_nColumns)) {
+    _nColumns = 2;
+  }
+  let columnIx = 0;
+  let x = 0;
+  console.log(rest, _nColumns, width);
+  let reducedWidth = _nColumns;
+  if ("overlap" in division) {
+    const overlap = division.overlap;
+    _nColumns = Math.min(_nColumns, overlap.nColumns);
+    columnIx = overlap.column;
+    reducedWidth = width / _nColumns;
+    x = columnIx * width / _nColumns;
+  }
   return h(TrackedLabeledUnit, {
     division,
     ...rest,

package/dist/units/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { Lithology } from \"@macrostrat/api-types\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;\n  const columnIx = (division.column ?? 0) % _nColumns;\n  const reducedWidth = width / _nColumns;\n  const x = (columnIx * width) / _nColumns;\n\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { BaseUnit, Lithology } from \"@macrostrat/api-types\";\nimport { UnitWithDefinedOverlap } from \"../prepare-units/helpers.ts\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\ninterface UnitComponentProps<T extends BaseUnit> {\n  division: UnitWithDefinedOverlap<T> | T;\n  nColumns: number;\n  width?: number;\n}\n\nexport function UnitComponent<T extends BaseUnit>({\n  division,\n  nColumns = 2,\n  ...rest\n}: UnitComponentProps<T>) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  let _nColumns = nColumns;\n  if (isNaN(_nColumns)) {\n    _nColumns = 2;\n  }\n  let columnIx = 0;\n  let x = 0;\n\n  console.log(rest, _nColumns, width);\n\n  let reducedWidth = _nColumns;\n  //const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  if (\"overlap\" in division) {\n    const overlap = division.overlap;\n    _nColumns = Math.min(_nColumns, overlap.nColumns);\n    columnIx = overlap.column;\n    reducedWidth = width / _nColumns;\n    x = (columnIx * width) / _nColumns;\n  }\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.3.5",
+  "version": "3.4.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -45,21 +45,21 @@
     "react": "^18.0.0||^19.0.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^6.11.3",
-    "@macrostrat/api-types": "^1.1.6",
+    "@blueprintjs/core": "^6.14.0",
+    "@macrostrat/api-types": "^1.2.0",
     "@macrostrat/color-utils": "^1.2.2",
-    "@macrostrat/column-components": "^2.0.7",
-    "@macrostrat/data-components": "^1.1.9",
-    "@macrostrat/data-provider": "^1.0.3",
+    "@macrostrat/column-components": "^2.0.8",
+    "@macrostrat/data-components": "^1.1.10",
+    "@macrostrat/data-provider": "^1.0.4",
     "@macrostrat/hyper": "^3.1.1",
-    "@macrostrat/map-interface": "^2.2.5",
-    "@macrostrat/map-styles": "^2.2.2",
-    "@macrostrat/mapbox-react": "^3.2.1",
+    "@macrostrat/map-interface": "^2.2.6",
+    "@macrostrat/map-styles": "^2.2.3",
+    "@macrostrat/mapbox-react": "^3.2.2",
     "@macrostrat/mapbox-utils": "^1.7.4",
-    "@macrostrat/stratigraphy-utils": "^1.2.2",
+    "@macrostrat/stratigraphy-utils": "^1.3.0",
     "@macrostrat/svg-map-components": "^2.0.3",
     "@macrostrat/timescale": "^3.1.3",
-    "@macrostrat/ui-components": "^5.0.9",
+    "@macrostrat/ui-components": "^5.0.10",
     "@turf/boolean-point-in-polygon": "^7.3.2",
     "@turf/buffer": "^7.3.2",
     "@turf/centroid": "^7.3.2",
@@ -82,8 +82,7 @@
     "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "jotai": "^2.16.0",
-    "jotai-scope": "^0.10.0",
+    "jotai": "^2.20.0",
     "mapbox-gl": "^3.0.0",
     "p-map": "^7.0.4",
     "react-spring": "^9.7.5",
@@ -92,7 +91,8 @@
     "zustand-computed": "^2.0.2"
   },
   "devDependencies": {
-    "@macrostrat/web-components-bundler": "1.0.1"
+    "@macrostrat/web-components-bundler": "1.0.1",
+    "jotai-scope": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/column.ts

@@ -118,7 +118,7 @@ export function Column(props: ColumnProps) {
 
   /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies
    * standardization of scales in all sections */
-  let _targetUnitHeight = targetUnitHeight;
+  let _targetUnitHeight: number | null = targetUnitHeight;
   let _minSectionHeight = minSectionHeight;
   let _minPixelScale = minPixelScale;
   if (pixelScale != null) {

package/src/data-provider/unit-selection.ts

@@ -16,6 +16,10 @@ type UnitSelectDispatch = (
   target: HTMLElement | null,
 ) => void;
 
+export function useUnitSelection() {
+  return scope.use(selectedUnitAtom);
+}
+
 export function useUnitSelectionDispatch(): UnitSelectDispatch {
   return scope.useSetAtom(selectedUnitAtom);
 }
@@ -70,6 +74,7 @@ const selectedUnitAtom = atom(
   ): BaseUnit | null => {
     if (!get(allowUnitSelectionAtom)) {
       console.error("Unit selection is disabled.");
+      return null;
     }
 
     let unitID: number | null = null;
@@ -83,8 +88,8 @@ const selectedUnitAtom = atom(
     }
 
     if (unitID != null) {
-      // Verify that the unit exists in the current colum, else throw
       const unitsMap = get(columnUnitsMapAtom);
+      // Verify that the unit exists in the current colum, else throw
       if (!unitsMap?.has(unitID)) {
         throw new Error(
           `Unit with ID ${unitID} not found in current column units.`,
@@ -150,9 +155,8 @@ if (props.onClickedColumn) {
 export function useUnitSelectionTarget(
   unit: IUnit,
 ): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
-  const ref = useRef<HTMLElement>();
-  const selectedUnit = useSelectedUnit();
-  const selectUnit = useUnitSelectionDispatch();
+  const ref = useRef<HTMLElement>(null);
+  const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
 
   const onClick = useCallback(

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/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";