@macrostrat/column-views 3.8.0 → 3.10.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

@@ -9,6 +9,7 @@ import {
   TimescaleOrientation,
   TimescaleClickHandler,
   useMacrostratIntervals,
+  type IntervalStyleBuilder,
 } from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import hyper from "@macrostrat/hyper";
@@ -203,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) {
@@ -228,6 +232,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
     packages,
     unconformityLabels = false,
     onClickInterval,
+    intervalStyle,
   } = props;
 
   // Use intervals from Macrostrat API
@@ -262,6 +267,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               scale,
               intervals,
               onClick: onClickInterval,
+              intervalStyle,
             }),
           ],
         );

package/src/units/boxes.ts

@@ -2,27 +2,36 @@ import {
   ColumnAxisType,
   ColumnContext,
   ColumnLayoutContext,
+  ClippableRect,
   ForeignObject,
   PatternDefsProvider,
   useColumn,
   useGeologicPattern,
-  zigZagBoxPath,
 } from "@macrostrat/column-components";
 import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
-import { forwardRef, ReactNode, useContext, useMemo } from "react";
-import { resolveID, scalePattern } from "./resolvers";
+import { ReactNode, useContext, useMemo } from "react";
 import { useUnitSelectionTarget } from "../data-provider";
 import { useLithologies } from "@macrostrat/data-provider";
 import { IUnit } from "./types";
 import styles from "./boxes.module.sass";
 import classNames from "classnames";
 import { getUnitHeightRange } from "../prepare-units/utils";
-import { getMixedUnitColor } from "./colors";
 import type { RectBounds } from "./types";
+import {
+  getBestFGDCPatternForUnit,
+  scalePattern,
+  getMixedUnitColor,
+} from "@macrostrat/stratigraphy-utils";
 
 const h = hyper.styled(styles);
 
+/** Resolve a class name through this file's CSS module exactly as the styled
+ * `h` would (module-scoped classes are hashed; unknown/global classes pass
+ * through). Needed because `ClippableRect` renders the element in
+ * `@macrostrat/column-components`, so class resolution must happen here. */
+const cls = (name: string): string => (styles as any)[name] ?? name;
+
 interface UnitRectOptions {
   widthFraction?: number;
   axisType?: ColumnAxisType;
@@ -152,7 +161,7 @@ function Unit(props: UnitProps) {
     overflowTop: hasOverflowTop,
     overflowBottom: hasOverflowBottom,
   };
-  const _patternID = patternID ?? resolveID(d);
+  const _patternID = patternID ?? getBestFGDCPatternForUnit(d);
   let _fill = fill ?? useGeologicPattern(_patternID, defaultFill);
 
   const hasBackgroundColor = backgroundColor != null;
@@ -170,70 +179,34 @@ function Unit(props: UnitProps) {
       },
     },
     [
-      h(UnitRect, {
+      h(ClippableRect, {
         ...bounds,
         fill: backgroundColor,
         onClick,
-        className: "background",
+        className: cls("background"),
       }),
-      h(UnitRect, {
+      h(ClippableRect, {
         ref,
         ...bounds,
         fill: _fill,
         //mask,
         onClick,
-        className: "unit",
+        className: cls("unit"),
+      }),
+      h.if(linked)(ClippableRect, {
+        ...bounds,
+        className: cls("linked-overlay"),
+      }),
+      h.if(selected)(ClippableRect, {
+        ...bounds,
+        className: cls("selection-overlay"),
       }),
-      h.if(linked)(UnitRect, { ...bounds, className: "linked-overlay" }),
-      h.if(selected)(UnitRect, { ...bounds, className: "selection-overlay" }),
       //defs,
       children,
     ],
   );
 }
 
-interface UnitRectProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  className: string;
-  // Used to determine if the rect should have a zig-zag edge on the top or bottom
-  overflowTop?: boolean;
-  overflowBottom?: boolean;
-  [key: string]: any;
-}
-
-const UnitRect = forwardRef((props: UnitRectProps, ref) => {
-  const {
-    x,
-    y,
-    width,
-    height,
-    overflowTop = false,
-    overflowBottom = false,
-    ...rest
-  } = props;
-
-  if (!overflowTop && !overflowBottom) {
-    return h("rect", {
-      x,
-      y,
-      width,
-      height,
-      ref,
-      ...rest,
-    });
-  } else {
-    const d = zigZagBoxPath(x, y, width, height, overflowTop, overflowBottom);
-    return h("path", {
-      d,
-      ref,
-      ...rest,
-    });
-  }
-});
-
 function LabeledUnit(props: LabeledUnitProps) {
   const {
     division,
@@ -247,12 +220,17 @@ function LabeledUnit(props: LabeledUnitProps) {
     ...baseBounds
   } = props;
 
-  const { axisType } = useColumn();
+  const { axisType, isTransitioning, hideLabelsWhileTransitioning } =
+    useColumn();
   const bounds = {
     ...useUnitRect(division, { widthFraction, axisType }),
     ...baseBounds,
   };
   const { width, height } = bounds;
+  // Labels stay visible through the animation by default. `hideLabelsWhileTransitioning`
+  // is a perf escape hatch: when set, the `foreignObject` label (whose HTML
+  // reflows on every size change) is skipped mid-transition and restored on settle.
+  const skipLabel = isTransitioning && hideLabelsWhileTransitioning;
   return h(
     Unit,
     {
@@ -263,7 +241,7 @@ function LabeledUnit(props: LabeledUnitProps) {
       ...bounds,
     },
     [
-      h.if(showLabel)(
+      h.if(showLabel && !skipLabel)(
         ForeignObject,
         { ...bounds, className: "unit-label-container" },
         h(SizeAwareLabel, {
@@ -271,6 +249,9 @@ function LabeledUnit(props: LabeledUnitProps) {
           labelClassName: "unit-label",
           style: { width, height },
           label,
+          // Re-fit the label when a transition settles (isTransitioning flips),
+          // not on every intermediate frame.
+          remeasureKey: isTransitioning,
           onVisibilityChanged(viz) {
             onLabelUpdated(label, viz);
           },
@@ -311,7 +292,7 @@ function UnitBoxes<T>(props: {
 
   return h(
     PatternDefsProvider,
-    { resolveID, scalePattern },
+    { resolveID: getBestFGDCPatternForUnit, scalePattern },
     h("g.divisions", children),
   );
 }

package/src/units/composite.ts

@@ -42,23 +42,32 @@ export function LabelTrackerProvider(props) {
     BaseUnit[] | null
   >(null);
   const labelTrackerRef = useRef<LabelTracker>({});
+
+  const recompute = useCallback(() => {
+    // Recompute over the *current* unit set (which changes as the column zooms).
+    // The tracker ref accumulates entries for units seen at any zoom level, so
+    // we gate on whether every currently-visible unit has reported — not on the
+    // total number of tracked units, which would go stale and freeze the notes.
+    const tracker = labelTrackerRef.current;
+    const allReported = units.every((d) => findUnitID(d) in tracker);
+    if (!allReported) return;
+    setUnlabeledDivisions(units.filter((d) => tracker[findUnitID(d)] === false));
+  }, [units, findUnitID]);
+
   const trackLabelVisibility = useCallback(
     (div, visible) => {
-      const id = findUnitID(div);
-      labelTrackerRef.current[id] = visible;
-      if (Object.keys(labelTrackerRef.current).length == units.length) {
-        setUnlabeledDivisions(
-          // @ts-ignore
-          units.filter((d) => {
-            const id = findUnitID(d);
-            return labelTrackerRef.current[id] == false;
-          }),
-        );
-      }
+      labelTrackerRef.current[findUnitID(div)] = visible;
+      recompute();
     },
-    [labelTrackerRef, units, findUnitID],
+    [recompute, findUnitID],
   );
 
+  // Re-sync when the visible unit set changes (e.g. on zoom), so a unit whose
+  // label now fits inline stops also rendering as a note, and vice versa.
+  useEffect(() => {
+    recompute();
+  }, [recompute]);
+
   const value = trackLabelVisibility;
   return h(
     LabelTrackerContext.Provider,