@macrostrat/column-views 3.6.1 → 3.9.0

package/src/prepare-units/composite-scale.ts

@@ -1,5 +1,5 @@
 import { ColumnAxisType } from "@macrostrat/column-components";
-import { ensureArray, getUnitHeightRange } from "./utils";
+import { agesOverlap, ensureArray, getUnitHeightRange } from "./utils";
 import { ScaleContinuousNumeric, scaleLinear } from "d3-scale";
 import { UnitLong } from "@macrostrat/api-types";
 import { buildHybridScale } from "./dynamic-scales";
@@ -28,10 +28,15 @@ export function buildCompositeScaleInfo(
   let lastSectionTopHeight = 0;
 
   const packages2: PackageScaleLayoutData[] = [];
-  for (const group of inputScales) {
+  for (let i = 0; i < inputScales.length; i++) {
+    const group = inputScales[i];
     const { domain, scale } = group;
     const [b_age, t_age] = domain;
-    const key = `package-${b_age}-${t_age}`;
+    // Positionally stable key: packages are always emitted in age order, so the
+    // index is a stable identity. An age-based key (`package-${b_age}-${t_age}`)
+    // changes every frame while the age window animates, forcing every package,
+    // column, and timescale slice in the correlation chart to remount each frame.
+    const key = `package-${i}`;
 
     packages2.push({
       ...createPackageScale(group, totalHeight),
@@ -132,6 +137,7 @@ function buildSectionScale<T extends UnitLong>(
     minPixelScale = 0.2,
     axisType,
     minSectionHeight,
+    visibleWindow,
     scale,
     hybridScale,
   } = opts;
@@ -159,7 +165,7 @@ function buildSectionScale<T extends UnitLong>(
 
   if (scale == null) {
     if (_pixelScale == null) {
-      const avgAgeRange = findAverageUnitHeight(data, axisType);
+      const avgAgeRange = findAverageUnitHeight(data, axisType, visibleWindow);
       // Get pixel height necessary to render average unit at target height
       _pixelScale = Math.max(targetUnitHeight / avgAgeRange, minPixelScale);
 
@@ -171,7 +177,11 @@ function buildSectionScale<T extends UnitLong>(
     }
 
     let height = dAge * _pixelScale;
-    // If height is less than minSectionHeight, set it to minSectionHeight
+    // If height is less than minSectionHeight, set it to minSectionHeight.
+    // Sections reach here at their *full* extent (the rendered window is applied
+    // afterwards, by `trimSectionsToWindow`), so this floor only ever inflates a
+    // genuinely small section — which is what it's for — and never a sliver that
+    // the window happens to cut.
     const _minSectionHeight = minSectionHeight ?? targetUnitHeight ?? 0;
     pixelHeight = Math.max(height, _minSectionHeight);
     _pixelScale = pixelHeight / dAge;
@@ -186,6 +196,168 @@ function buildSectionScale<T extends UnitLong>(
   );
 }
 
+/**
+ * The density each section will actually render at once the window is applied.
+ *
+ * A section the window cuts short is still being *looked at*, so
+ * `minSectionHeight` applies to what remains — it's honored by expanding the
+ * section's scale, not by showing more of it. Resolving this **before** padding
+ * matters: padding is a pixel margin measured at the density it will render at,
+ * and a section stretched to the floor afterwards would multiply the margin
+ * along with everything else (a 20 px margin in a band stretched 4× renders at
+ * 80 px, and asymmetrically so whenever one side is truncated).
+ *
+ * Sections the window leaves whole keep their laid-out density — they already
+ * met the floor when they were sized.
+ */
+export function resolveWindowScales<T extends UnitLong>(
+  sections: SectionInfoWithScale<T>[],
+  focalWindow: [number, number],
+  floor: number,
+): Map<SectionInfoWithScale<T>, number> {
+  const [b_focal, t_focal] = focalWindow;
+  const scales = new Map<SectionInfoWithScale<T>, number>();
+
+  for (const section of sections) {
+    const t_age = Math.max(section.t_age, t_focal);
+    const b_age = Math.min(section.b_age, b_focal);
+    // Sections outside the focal window are visible only as padding; they keep
+    // their own density and render exactly the pixels asked for.
+    if (b_age <= t_age) continue;
+
+    const natural = section.scaleInfo.pixelScale;
+    if (!(natural > 0)) continue;
+
+    const isClipped = b_age < section.b_age || t_age > section.t_age;
+    const needed = isClipped && floor > 0 ? floor / (b_age - t_age) : 0;
+    scales.set(section, Math.max(natural, needed));
+  }
+  return scales;
+}
+
+/**
+ * Expand an age window outward by `padding` **pixels** of column, spending the
+ * budget against sections that are already laid out at full extent, at the
+ * densities they will finally render at (`scaleFor`).
+ *
+ * Because the layout is done, this is exact rather than predicted: each section
+ * contributes its own real pixel height. Padding collapses when the column runs
+ * out on that side.
+ *
+ * Unconformities between sections cost nothing. They render at a fixed height
+ * that's typically larger than the padding itself (30–60 px), so charging them
+ * would mean padding could never reach across a gap — which is the case it
+ * exists for: revealing the neighboring section keeps its timescale intervals
+ * navigable. The padding is a budget of neighboring *content*.
+ */
+export function padWindowByPixels<T extends UnitLong>(
+  sections: SectionInfoWithScale<T>[],
+  window: [number, number],
+  padding: number,
+  scaleFor: (section: SectionInfoWithScale<T>) => number,
+): [number, number] {
+  if (!(padding > 0) || sections.length === 0) return window;
+  const [b_age, t_age] = window;
+  return [
+    spendOutward(sections, b_age, 1, padding, scaleFor),
+    spendOutward(sections, t_age, -1, padding, scaleFor),
+  ];
+}
+
+/** Walk out from one edge of the window through laid-out sections, spending a
+ * pixel budget, and return the age it lands on. `direction` is +1 toward older
+ * ages, -1 toward younger. */
+function spendOutward<T extends UnitLong>(
+  sections: SectionInfoWithScale<T>[],
+  edge: number,
+  direction: 1 | -1,
+  padding: number,
+  scaleFor: (section: SectionInfoWithScale<T>) => number,
+): number {
+  // Sections ordered outward from the edge, keeping only what lies beyond it.
+  const beyond = sections
+    .filter(
+      (s) => direction * (s.b_age - edge) > 0 || direction * (s.t_age - edge) > 0,
+    )
+    .sort((a, b) => direction * (nearEdge(a, direction) - nearEdge(b, direction)));
+
+  let bound = edge;
+  let budget = padding;
+
+  for (const section of beyond) {
+    const pixelScale = scaleFor(section);
+    if (!(pixelScale > 0)) continue;
+
+    const from =
+      direction > 0
+        ? Math.max(section.t_age, bound)
+        : Math.min(section.b_age, bound);
+    const available = direction > 0 ? section.b_age - from : from - section.t_age;
+    if (available <= 0) continue;
+
+    const cost = available * pixelScale;
+    if (budget <= cost) return from + direction * (budget / pixelScale);
+
+    bound = direction > 0 ? section.b_age : section.t_age;
+    budget -= cost;
+  }
+  return bound;
+}
+
+/** The age at which a section starts, measured from the window edge outward. */
+function nearEdge<T extends UnitLong>(
+  section: SectionInfoWithScale<T>,
+  direction: 1 | -1,
+): number {
+  return direction > 0 ? section.t_age : section.b_age;
+}
+
+/**
+ * Clip laid-out sections to the rendered window — the last step of layout, so
+ * that every section has already been sized (and floored) at its full extent.
+ * Each section renders at the density `scaleFor` resolved for it, which is what
+ * keeps a padding margin the same number of pixels as the band it borders is
+ * stretched to meet `minSectionHeight`.
+ */
+export function trimSectionsToWindow<T extends UnitLong>(
+  sections: SectionInfoWithScale<T>[],
+  window: [number, number],
+  scaleFor: (section: SectionInfoWithScale<T>) => number,
+): SectionInfoWithScale<T>[] {
+  const [b_win, t_win] = window;
+  const out: SectionInfoWithScale<T>[] = [];
+
+  for (const section of sections) {
+    const t_age = Math.max(section.t_age, t_win);
+    const b_age = Math.min(section.b_age, b_win);
+    if (b_age <= t_age) continue;
+
+    const pixelScale = scaleFor(section);
+    if (
+      b_age === section.b_age &&
+      t_age === section.t_age &&
+      pixelScale === section.scaleInfo.pixelScale
+    ) {
+      out.push(section);
+      continue;
+    }
+
+    out.push({
+      ...section,
+      t_age,
+      b_age,
+      units: section.units.filter((u) => agesOverlap(u, { t_age, b_age })),
+      scaleInfo: createPackageScale({
+        domain: [b_age, t_age],
+        pixelScale,
+        pixelHeight: (b_age - t_age) * pixelScale,
+        scale: null,
+      }),
+    });
+  }
+  return out;
+}
+
 export function createPackageScale(
   def: PackageScaleInfo,
   offset: number = 0,
@@ -260,12 +432,40 @@ function findSectionHeightRange(
 function findAverageUnitHeight(
   data: UnitLong[],
   axisType: ColumnAxisType,
+  visibleWindow?: [number, number] | null,
 ): number {
-  const unitHeights = data.map((d) => {
-    const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
-    return Math.abs(b_pos - t_pos);
-  });
-  return unitHeights.reduce((a, b) => a + b, 0) / unitHeights.length;
+  /** The typical duration of a unit, which `targetUnitHeight` sizes.
+   *
+   * Measured over what the render window actually *shows* — units outside it
+   * are ignored and a unit it cuts through counts only for its visible part.
+   * That's what makes `targetUnitHeight` mean the same thing at every zoom
+   * depth: the units on screen are drawn at the target height whether they're
+   * whole or slivers of something much longer.
+   *
+   * A section the window doesn't reach has nothing visible to measure, so it
+   * falls back to its own units at full duration — it's drawn at its own scale.
+   * (Deriving it from the padded window instead would be circular: padding is
+   * measured in pixels, which is what we're trying to establish.)
+   */
+  const durations = (clip: boolean) =>
+    data
+      .map((d) => {
+        const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
+        if (!clip) return Math.abs(b_pos - t_pos);
+        const [b_win, t_win] = visibleWindow;
+        return Math.max(
+          0,
+          Math.min(b_pos, b_win) - Math.max(t_pos, t_win),
+        );
+      })
+      .filter((d) => d > 0);
+
+  const useWindow = visibleWindow != null && axisType === ColumnAxisType.AGE;
+  let heights = useWindow ? durations(true) : [];
+  if (heights.length === 0) heights = durations(false);
+  if (heights.length === 0) return 1;
+
+  return heights.reduce((a, b) => a + b, 0) / heights.length;
 }
 
 export interface CompositeColumnScale {

package/src/prepare-units/helpers.ts

@@ -69,8 +69,6 @@ function groupUnitsByMutualOverlap<T extends BaseUnit>(
 
   const sections = groupUnitsIntoSectionsByOverlap(units, axisType, tolerance);
 
-  console.log("Grouped sections", sections);
-
   return sections.map((d) => {
     return new UnitGroup(d.units, axisType);
   });

package/src/prepare-units/index.ts

@@ -15,6 +15,9 @@ import {
   collapseUnconformitiesByPixelHeight,
   computeSectionHeights,
   finalizeSectionHeights,
+  padWindowByPixels,
+  resolveWindowScales,
+  trimSectionsToWindow,
   type CompositeColumnScale,
 } from "./composite-scale";
 import {
@@ -58,6 +61,7 @@ export function prepareColumnUnits(
     collapseSmallUnconformities = false,
     hybridScale,
     scale,
+    windowPadding = 0,
   } = options;
 
   let _totalHeight: number | null = null;
@@ -76,19 +80,29 @@ export function prepareColumnUnits(
     }
   }
 
+  /** Age columns lay every section out at its full extent and clip to the
+   * window at the end (see below), so that a section abutting the window is
+   * sized by its own content rather than by the sliver that survives the clip.
+   * Hybrid and externally-supplied scales build their own mapping and can't be
+   * re-derived that way, so they keep the original clip-then-lay-out path. */
+  const clipBeforeLayout =
+    axisType != ColumnAxisType.AGE || hybridScale != null || scale != null;
+
   // 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 */
-  units1 = units1.filter((d) => {
-    // Filter units by t_age and b_age, inclusive
-    if (axisType == ColumnAxisType.AGE) {
-      return agesOverlap(d, { t_age, b_age });
-    } else {
-      return unitsOverlap(d, { t_pos, b_pos } as any, axisType);
-    }
-  });
+  if (clipBeforeLayout) {
+    /** Prototype filtering to age range */
+    units1 = units1.filter((d) => {
+      // Filter units by t_age and b_age, inclusive
+      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) {
@@ -123,7 +137,7 @@ export function prepareColumnUnits(
   }
 
   // Limit sections to the range specified by t_age/b_age or t_pos/b_pos global options
-  for (let section of sections0) {
+  for (let section of clipBeforeLayout ? 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);
@@ -152,11 +166,21 @@ export function prepareColumnUnits(
 
   // SCALES
 
+  /** The window we've been asked to render. Unit density is derived from what
+   * it shows (see `findAverageUnitHeight`), so it has to be known before any
+   * section is laid out — but nothing is *clipped* to it until the very end.
+   */
+  const focalWindow: [number, number] | null = clipBeforeLayout
+    ? null
+    : [b_age ?? Infinity, t_age ?? -Infinity];
+
+  const layoutOptions = { ...options, visibleWindow: focalWindow };
+
   /* Compute pixel scales etc. for sections
    * We need to do this now to determine which unconformities
    * are small enough to collapse.
    */
-  let sectionsWithScales = computeSectionHeights(sections, options);
+  let sectionsWithScales = computeSectionHeights(sections, layoutOptions);
 
   if (collapseSmallUnconformities && hybridScale == null) {
     // Collapse small unconformities in pixel height space
@@ -169,7 +193,39 @@ export function prepareColumnUnits(
     sectionsWithScales = collapseUnconformitiesByPixelHeight(
       sectionsWithScales,
       threshold,
-      options,
+      layoutOptions,
+    );
+  }
+
+  /** Now that every section is laid out at full extent — with its own density
+   * and `minSectionHeight` already settled — apply the rendered window. Padding
+   * is spent here, against real pixel heights, so `windowPadding` px of an
+   * abutting section is exactly that many pixels.
+   */
+  if (focalWindow != null && (t_age != null || b_age != null)) {
+    // Resolve final densities first (a section the window cuts short is
+    // stretched to `minSectionHeight`), then spend the padding budget against
+    // them, so a margin is the pixels asked for rather than those pixels times
+    // whatever stretch its neighbor happened to need.
+    const floor = options.minSectionHeight ?? options.targetUnitHeight ?? 0;
+    const scales = resolveWindowScales(sectionsWithScales, focalWindow, floor);
+    const scaleFor = (section) =>
+      scales.get(section) ?? section.scaleInfo.pixelScale;
+
+    const window =
+      windowPadding > 0
+        ? padWindowByPixels(
+            sectionsWithScales,
+            focalWindow,
+            windowPadding,
+            scaleFor,
+          )
+        : focalWindow;
+
+    sectionsWithScales = trimSectionsToWindow(
+      sectionsWithScales,
+      window,
+      scaleFor,
     );
   }
 
@@ -185,8 +241,6 @@ export function prepareColumnUnits(
    * We do this after merging sections so that we can
    * handle cases where there are overlapping units across sections
    * */
-  console.log(sections2, "sections");
-
   const sectionsOut = sections2.map((section) => {
     return {
       ...section,

package/src/prepare-units/types.ts

@@ -14,6 +14,19 @@ export interface ColumnHeightScaleOptions {
    * needed because small sections (<1-2 units) don't necessarily have space to comfortably
    * render two axis labels */
   minPixelScale?: number;
+  /** The requested render window, `[b_age, t_age]`, if there is one. Set
+   * internally by `prepareColumnUnits`: unit density is derived from the units
+   * this window actually shows, so `targetUnitHeight` describes the units you
+   * can see at any zoom depth rather than the section's overall average. */
+  visibleWindow?: [number, number];
+  /** Padding around the `t_age`/`b_age` window, in **pixels** of neighboring
+   * column: how much of the abutting sections to reveal past the window.
+   *
+   * Resolved after every section is laid out at full extent, so it's exact —
+   * each section's own density and each crossed unconformity's fixed height are
+   * spent from the pixel budget. Padding collapses where the column runs out.
+   * Ignored for hybrid or externally-supplied scales. */
+  windowPadding?: number;
   // Axis scale type
   axisType?: ColumnAxisType;
   // Unconformity height in pixels

package/src/section.ts

@@ -7,7 +7,9 @@ import { ReactNode, FunctionComponent, useMemo } from "react";
 import {
   Timescale,
   TimescaleOrientation,
+  TimescaleClickHandler,
   useMacrostratIntervals,
+  type IntervalStyleBuilder,
 } from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import hyper from "@macrostrat/hyper";
@@ -202,6 +204,9 @@ function SectionUnits(props: SectionProps) {
 interface CompositeTimescaleProps {
   levels?: [number, number] | number;
   unconformityLabels?: boolean;
+  onClickInterval?: TimescaleClickHandler;
+  /** Per-interval style (e.g. to highlight the currently selected interval). */
+  intervalStyle?: IntervalStyleBuilder;
 }
 
 export function CompositeTimescale(props: CompositeTimescaleProps) {
@@ -218,10 +223,17 @@ export function CompositeTimescale(props: CompositeTimescaleProps) {
 
 type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
   packages: PackageScaleLayoutData[];
+  onClickInterval?: TimescaleClickHandler;
 };
 
 export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
-  const { levels = 3, packages, unconformityLabels = false } = props;
+  const {
+    levels = 3,
+    packages,
+    unconformityLabels = false,
+    onClickInterval,
+    intervalStyle,
+  } = props;
 
   // Use intervals from Macrostrat API
   const baseURL = useMacrostratBaseURL();
@@ -254,6 +266,8 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               showAgeAxis: false,
               scale,
               intervals,
+              onClick: onClickInterval,
+              intervalStyle,
             }),
           ],
         );

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

@@ -132,8 +132,10 @@ export function IntervalProportions({
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
 
+  const ints = new Set([i0, i1]);
+
   /** Get interval information */
-  const intervalMap = useMacrostratDefs("intervals");
+  const intervalMap = useMacrostratDefs("intervals", Array.from(ints), null);
   const [int0, int1] = useMemo(() => {
     const int0 = intervalMap?.get(i0) ?? {};
     if (i0 === i1) {

package/src/unit-details/index.ts

@@ -3,4 +3,10 @@ export * from "./popover";
 export * from "./modal-panel";
 export * from "./age-range";
 export * from "./strat-names";
-export * from "./identifiers";
+
+// Backwards compatibility
+export {
+  ClickableText,
+  Identifier,
+  UnitIdentifier,
+} from "@macrostrat/data-components";

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

@@ -61,14 +61,6 @@
   color: var(--secondary-color)
   font-style: italic
 
-.strat-name-id, .identifier
-  font-family: var(--monospace-font)
-  color: var(--secondary-color)
-
-  &::before
-    content: '#'
-    color: var(--tertiary-color)
-
 .color-swatch
   width: 1em
   height: 1em

package/src/unit-details/panel.ts

@@ -34,7 +34,11 @@ import { AgeField, Duration, IntervalProportions } from "./age-range";
 import { formatRange, formatSignificance } from "./utils.ts";
 import h from "./panel.module.sass";
 import { StratNameField } from "./strat-names.ts";
-import { Identifier, UnitIdentifier, UnitInfo } from "./identifiers.ts";
+import {
+  Identifier,
+  UnitIdentifier,
+  UnitInfo,
+} from "@macrostrat/data-components";
 import { LithologyIdentifier } from "@macrostrat/api-types/src/lithologies";
 
 export interface UnitDetailsPanelProps {
@@ -196,11 +200,7 @@ export enum UnitDetailsFeature {
 export type MacrostratItemClickHandler = (
   event: MouseEvent,
   item:
-    | Lithology
-    | Environment
-    | UnitLong
-    | Interval
-    | { strat_name_id: number },
+    Lithology | Environment | UnitLong | Interval | { strat_name_id: number },
 ) => void;
 
 function UnitDetailsContent({

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

@@ -3,11 +3,11 @@ import {
   isClickable,
   ItemInteractionProps,
   useInteractionProps,
+  Identifier,
 } 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]);