@macrostrat/column-views 3.8.0 → 3.9.0

package/dist/units/composite.js

@@ -14,22 +14,22 @@ function LabelTrackerProvider(props) {
   const { children, units, findUnitID = findMacrostratUnitID } = props;
   const [unlabeledDivisions, setUnlabeledDivisions] = useState(null);
   const labelTrackerRef = useRef({});
+  const recompute = useCallback(() => {
+    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 id2 = findUnitID(d);
-            return labelTrackerRef.current[id2] == false;
-          })
-        );
-      }
+      labelTrackerRef.current[findUnitID(div)] = visible;
+      recompute();
     },
-    [labelTrackerRef, units, findUnitID]
+    [recompute, findUnitID]
   );
+  useEffect(() => {
+    recompute();
+  }, [recompute]);
   const value = trackLabelVisibility;
   return h(
     LabelTrackerContext.Provider,

package/dist/units/composite.js.map

@@ -1 +1 @@
-{"version":3,"file":"composite.js","sources":["../../src/units/composite.ts"],"sourcesContent":["import { hyperStyled } from \"@macrostrat/hyper\";\nimport {\n  ColumnContext,\n  LithologyColumn,\n  SVG,\n} from \"@macrostrat/column-components\";\nimport { defaultNameFunction, UnitNamesColumn } from \"./names\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { BaseUnit } from \"@macrostrat/api-types\";\nimport { LabeledUnit, UnitBoxes } from \"./boxes\";\nimport styles from \"./composite.module.sass\";\nimport {\n  useCompositeScale,\n  useMacrostratColumnData,\n  useUnitSelectionDispatch,\n} from \"../data-provider\";\n\nconst h = hyperStyled(styles);\n\ninterface LabelTracker {\n  [key: number]: boolean;\n}\n\nconst LabelTrackerContext = createContext(null);\nconst UnlabeledDivisionsContext = createContext(null);\n\nconst findMacrostratUnitID = (u) => u.unit_id;\n\nexport function LabelTrackerProvider(props) {\n  /** Tracker for units to handle state for whether their labels fit inline or not.\n   * Designed to work for single or composite columns.\n   */\n  const { children, units, findUnitID = findMacrostratUnitID } = props;\n  const [unlabeledDivisions, setUnlabeledDivisions] = useState<\n    BaseUnit[] | null\n  >(null);\n  const labelTrackerRef = useRef<LabelTracker>({});\n  const trackLabelVisibility = useCallback(\n    (div, visible) => {\n      const id = findUnitID(div);\n      labelTrackerRef.current[id] = visible;\n      if (Object.keys(labelTrackerRef.current).length == units.length) {\n        setUnlabeledDivisions(\n          // @ts-ignore\n          units.filter((d) => {\n            const id = findUnitID(d);\n            return labelTrackerRef.current[id] == false;\n          }),\n        );\n      }\n    },\n    [labelTrackerRef, units, findUnitID],\n  );\n\n  const value = trackLabelVisibility;\n  return h(\n    LabelTrackerContext.Provider,\n    { value },\n    h(\n      UnlabeledDivisionsContext.Provider,\n      { value: unlabeledDivisions },\n      children,\n    ),\n  );\n}\n\nfunction TrackedLabeledUnit({\n  division,\n  nameForDivision = defaultNameFunction,\n  ...rest\n}) {\n  const trackLabelVisibility = useContext(LabelTrackerContext);\n  return h(LabeledUnit, {\n    division,\n    label: nameForDivision(division),\n    onLabelUpdated(label, visible) {\n      // If there is al LabelTrackerContext, update the label visibility\n      trackLabelVisibility?.(division, visible);\n    },\n    ...rest,\n  });\n}\n\nexport const CompositeUnitComponent = TrackedLabeledUnit;\n\ntype BaseUnitProps = {\n  width: number;\n  showLabels?: boolean;\n  columnWidth?: number;\n  clipToFrame?: boolean;\n};\n\ntype ICompositeUnitProps = BaseUnitProps & {\n  gutterWidth?: number;\n  labelOffset?: number;\n  paddingLeft?: number;\n  nameForDivision?: (division: BaseUnit) => string;\n  children?: React.ReactNode;\n  unitComponent?: React.FC<any>;\n  unitComponentProps?: any;\n  noteMode?: \"labeled\" | \"unlabeled\";\n  showLabelColumn?: boolean;\n  noteComponent?: React.FC<any>;\n  shouldRenderNote?: (d: any) => boolean;\n};\n\ninterface CompositeUnitProps {\n  unitComponent: React.FC<any>;\n  unitComponentProps?: any;\n  width: number;\n  showLabels?: boolean;\n  clipToFrame?: boolean;\n}\n\nexport function CompositeUnitsColumn(props: CompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const {\n    width,\n    unitComponent = TrackedLabeledUnit,\n    unitComponentProps,\n    clipToFrame,\n    ...rest\n  } = props;\n\n  return h(LithologyColumn, { width, clipToFrame }, [\n    h(UnitBoxes, {\n      unitComponent,\n      unitComponentProps,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function AnnotatedUnitsColumn(props: ICompositeUnitProps) {\n  useEffect(() => {\n    console.warn(\n      \"AnnotatedUnitsColumn is deprecated and currently renders a no-op for transition purposes\",\n    );\n  }, []);\n  return null;\n}\n\nexport function SectionLabelsColumn(props: ICompositeUnitProps) {\n  // Section with \"squishy\" time scale\n  const {\n    width = 300,\n    noteMode = \"unlabeled\",\n    labelOffset = 30,\n    noteComponent,\n    shouldRenderNote,\n  } = props;\n\n  const { totalHeight, axisType } = useMacrostratColumnData();\n  const _compositeScale = useCompositeScale();\n\n  const unlabeledUnits = useContext(UnlabeledDivisionsContext);\n  const unitsToLabel = noteMode == \"unlabeled\" ? unlabeledUnits : undefined;\n\n  const selectUnit = useUnitSelectionDispatch();\n\n  return h(\"div.section-labels-column\", [\n    h(\n      ColumnNotesProvider,\n      {\n        units: [],\n        scale: _compositeScale,\n        totalHeight,\n        axisType,\n      },\n      h(\n        SVG,\n        {\n          height: totalHeight,\n          innerWidth: width - 4,\n          paddingH: 1,\n          paddingLeft: 3,\n        },\n        h(UnitNamesColumn, {\n          divisions: unitsToLabel,\n          paddingLeft: labelOffset,\n          width,\n          noteComponent,\n          shouldRenderNote,\n          scale: _compositeScale,\n          onClickNote(note) {\n            selectUnit(note.data, null, null);\n          },\n        }),\n      ),\n    ),\n  ]);\n}\n\nexport function ColumnNotesProvider(props) {\n  // A fake column axis provider that allows scales to cross\n  const { children, scale, totalHeight, pixelScale } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  return h(\n    ColumnContext.Provider,\n    {\n      value: {\n        divisions: [],\n        scale,\n        scaleClamped: scale,\n        pixelHeight: totalHeight,\n        pixelsPerMeter: pixelScale,\n        axisType,\n        zoom: 1,\n      },\n    },\n    children,\n  );\n}\n\nexport { TrackedLabeledUnit, ICompositeUnitProps };\n"],"names":["styles","id"],"mappings":"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"}
+{"version":3,"file":"composite.js","sources":["../../src/units/composite.ts"],"sourcesContent":["import { hyperStyled } from \"@macrostrat/hyper\";\nimport {\n  ColumnContext,\n  LithologyColumn,\n  SVG,\n} from \"@macrostrat/column-components\";\nimport { defaultNameFunction, UnitNamesColumn } from \"./names\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { BaseUnit } from \"@macrostrat/api-types\";\nimport { LabeledUnit, UnitBoxes } from \"./boxes\";\nimport styles from \"./composite.module.sass\";\nimport {\n  useCompositeScale,\n  useMacrostratColumnData,\n  useUnitSelectionDispatch,\n} from \"../data-provider\";\n\nconst h = hyperStyled(styles);\n\ninterface LabelTracker {\n  [key: number]: boolean;\n}\n\nconst LabelTrackerContext = createContext(null);\nconst UnlabeledDivisionsContext = createContext(null);\n\nconst findMacrostratUnitID = (u) => u.unit_id;\n\nexport function LabelTrackerProvider(props) {\n  /** Tracker for units to handle state for whether their labels fit inline or not.\n   * Designed to work for single or composite columns.\n   */\n  const { children, units, findUnitID = findMacrostratUnitID } = props;\n  const [unlabeledDivisions, setUnlabeledDivisions] = useState<\n    BaseUnit[] | null\n  >(null);\n  const labelTrackerRef = useRef<LabelTracker>({});\n\n  const recompute = useCallback(() => {\n    // Recompute over the *current* unit set (which changes as the column zooms).\n    // The tracker ref accumulates entries for units seen at any zoom level, so\n    // we gate on whether every currently-visible unit has reported — not on the\n    // total number of tracked units, which would go stale and freeze the notes.\n    const tracker = labelTrackerRef.current;\n    const allReported = units.every((d) => findUnitID(d) in tracker);\n    if (!allReported) return;\n    setUnlabeledDivisions(units.filter((d) => tracker[findUnitID(d)] === false));\n  }, [units, findUnitID]);\n\n  const trackLabelVisibility = useCallback(\n    (div, visible) => {\n      labelTrackerRef.current[findUnitID(div)] = visible;\n      recompute();\n    },\n    [recompute, findUnitID],\n  );\n\n  // Re-sync when the visible unit set changes (e.g. on zoom), so a unit whose\n  // label now fits inline stops also rendering as a note, and vice versa.\n  useEffect(() => {\n    recompute();\n  }, [recompute]);\n\n  const value = trackLabelVisibility;\n  return h(\n    LabelTrackerContext.Provider,\n    { value },\n    h(\n      UnlabeledDivisionsContext.Provider,\n      { value: unlabeledDivisions },\n      children,\n    ),\n  );\n}\n\nfunction TrackedLabeledUnit({\n  division,\n  nameForDivision = defaultNameFunction,\n  ...rest\n}) {\n  const trackLabelVisibility = useContext(LabelTrackerContext);\n  return h(LabeledUnit, {\n    division,\n    label: nameForDivision(division),\n    onLabelUpdated(label, visible) {\n      // If there is al LabelTrackerContext, update the label visibility\n      trackLabelVisibility?.(division, visible);\n    },\n    ...rest,\n  });\n}\n\nexport const CompositeUnitComponent = TrackedLabeledUnit;\n\ntype BaseUnitProps = {\n  width: number;\n  showLabels?: boolean;\n  columnWidth?: number;\n  clipToFrame?: boolean;\n};\n\ntype ICompositeUnitProps = BaseUnitProps & {\n  gutterWidth?: number;\n  labelOffset?: number;\n  paddingLeft?: number;\n  nameForDivision?: (division: BaseUnit) => string;\n  children?: React.ReactNode;\n  unitComponent?: React.FC<any>;\n  unitComponentProps?: any;\n  noteMode?: \"labeled\" | \"unlabeled\";\n  showLabelColumn?: boolean;\n  noteComponent?: React.FC<any>;\n  shouldRenderNote?: (d: any) => boolean;\n};\n\ninterface CompositeUnitProps {\n  unitComponent: React.FC<any>;\n  unitComponentProps?: any;\n  width: number;\n  showLabels?: boolean;\n  clipToFrame?: boolean;\n}\n\nexport function CompositeUnitsColumn(props: CompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const {\n    width,\n    unitComponent = TrackedLabeledUnit,\n    unitComponentProps,\n    clipToFrame,\n    ...rest\n  } = props;\n\n  return h(LithologyColumn, { width, clipToFrame }, [\n    h(UnitBoxes, {\n      unitComponent,\n      unitComponentProps,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function AnnotatedUnitsColumn(props: ICompositeUnitProps) {\n  useEffect(() => {\n    console.warn(\n      \"AnnotatedUnitsColumn is deprecated and currently renders a no-op for transition purposes\",\n    );\n  }, []);\n  return null;\n}\n\nexport function SectionLabelsColumn(props: ICompositeUnitProps) {\n  // Section with \"squishy\" time scale\n  const {\n    width = 300,\n    noteMode = \"unlabeled\",\n    labelOffset = 30,\n    noteComponent,\n    shouldRenderNote,\n  } = props;\n\n  const { totalHeight, axisType } = useMacrostratColumnData();\n  const _compositeScale = useCompositeScale();\n\n  const unlabeledUnits = useContext(UnlabeledDivisionsContext);\n  const unitsToLabel = noteMode == \"unlabeled\" ? unlabeledUnits : undefined;\n\n  const selectUnit = useUnitSelectionDispatch();\n\n  return h(\"div.section-labels-column\", [\n    h(\n      ColumnNotesProvider,\n      {\n        units: [],\n        scale: _compositeScale,\n        totalHeight,\n        axisType,\n      },\n      h(\n        SVG,\n        {\n          height: totalHeight,\n          innerWidth: width - 4,\n          paddingH: 1,\n          paddingLeft: 3,\n        },\n        h(UnitNamesColumn, {\n          divisions: unitsToLabel,\n          paddingLeft: labelOffset,\n          width,\n          noteComponent,\n          shouldRenderNote,\n          scale: _compositeScale,\n          onClickNote(note) {\n            selectUnit(note.data, null, null);\n          },\n        }),\n      ),\n    ),\n  ]);\n}\n\nexport function ColumnNotesProvider(props) {\n  // A fake column axis provider that allows scales to cross\n  const { children, scale, totalHeight, pixelScale } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  return h(\n    ColumnContext.Provider,\n    {\n      value: {\n        divisions: [],\n        scale,\n        scaleClamped: scale,\n        pixelHeight: totalHeight,\n        pixelsPerMeter: pixelScale,\n        axisType,\n        zoom: 1,\n      },\n    },\n    children,\n  );\n}\n\nexport { TrackedLabeledUnit, ICompositeUnitProps };\n"],"names":["styles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -48,19 +48,19 @@
     "@blueprintjs/core": "^6.14.0",
     "@macrostrat/api-types": "^1.2.0",
     "@macrostrat/color-utils": "^1.2.2",
-    "@macrostrat/column-components": "^2.0.10",
-    "@macrostrat/data-components": "^1.5.0",
+    "@macrostrat/column-components": "^2.1.0",
+    "@macrostrat/data-components": "^1.5.1",
     "@macrostrat/data-provider": "^1.2.0",
     "@macrostrat/hyper": "^3.1.1",
     "@macrostrat/map-interface": "^2.3.1",
-    "@macrostrat/map-styles": "^2.2.6",
+    "@macrostrat/map-styles": "^2.2.7",
     "@macrostrat/mapbox-react": "^3.3.3",
     "@macrostrat/mapbox-utils": "^1.8.0",
     "@macrostrat/scoped-store": "^1.0.1",
     "@macrostrat/stratigraphy-utils": "^1.3.0",
     "@macrostrat/svg-map-components": "^2.0.3",
-    "@macrostrat/timescale": "^3.1.6",
-    "@macrostrat/ui-components": "^5.1.0",
+    "@macrostrat/timescale": "^3.2.0",
+    "@macrostrat/ui-components": "^5.2.0",
     "@turf/boolean-point-in-polygon": "^7.3.2",
     "@turf/buffer": "^7.3.2",
     "@turf/centroid": "^7.3.2",

package/src/animated-age-window.ts

@@ -0,0 +1,120 @@
+import { useCallback, useMemo } from "react";
+import { AgeDomain, useAnimatedDomain } from "@macrostrat/timescale";
+
+/** A rendered age window, ordered as the column props expect:
+ * `t_age` is the younger (top) bound, `b_age` the older (bottom) bound. */
+export interface AgeWindow {
+  t_age: number;
+  b_age: number;
+}
+
+export interface AnimateWindowOptions {
+  duration?: number;
+}
+
+export interface UseAnimatedAgeWindowOptions {
+  /** The full data extent — the window to reset to, and the initial window.
+   * `null` until the data (and hence extent) is known. */
+  fullExtent: AgeWindow | null;
+  /** Animation duration in ms (default 750). */
+  duration?: number;
+}
+
+export interface AnimatedAgeWindow {
+  /** The current animated window to feed to `t_age`/`b_age` column props
+   * (`null` until `fullExtent` is known). */
+  window: AgeWindow | null;
+  isAnimating: boolean;
+  /** True when the window is (approximately) the full extent. */
+  isFullExtent: boolean;
+  /** Pan-and-contract to an explicit window (clamped to the full extent).
+   * Density (`pixelScale`) is left untouched — this is not a zoom. */
+  zoomToWindow(target: AgeWindow, opts?: AnimateWindowOptions): void;
+  /** Pan-and-contract to a timescale interval, using `eag`/`lag`. */
+  zoomToInterval(
+    interval: { eag: number; lag: number },
+    opts?: AnimateWindowOptions,
+  ): void;
+  /** Ease back to the full extent. */
+  reset(opts?: AnimateWindowOptions): void;
+}
+
+/**
+ * Animate the rendered age window (`t_age`/`b_age`) of a column or correlation
+ * chart. This is the "animate the current zoom approach" model: narrowing the
+ * window re-lays-out the column with explicit clipping — units past the bounds
+ * get a zig-zag edge, unconformities keep their fixed `unconformityHeight`, and
+ * `pixelScale` (density) is untouched, so a sub-interval click **pans and
+ * contracts** at constant density rather than zooming. Joint domain/range
+ * change (true zoom) stays under the user's direct control via `pixelScale`.
+ *
+ * The animation itself is `useAnimatedDomain` from `@macrostrat/timescale` —
+ * the same state machine that drives the timescale's `useZoomableScale`. This
+ * hook only maps an `[older, younger]` domain onto `{ b_age, t_age }`; it
+ * animates the window you ask for and nothing more. Revealing a margin of the
+ * neighboring column is the *layout's* job, via the `windowPadding` prop (px),
+ * which is resolved against real section heights rather than predicted here.
+ */
+export function useAnimatedAgeWindow(
+  options: UseAnimatedAgeWindowOptions,
+): AnimatedAgeWindow {
+  const { fullExtent, duration } = options;
+
+  const extent = useMemo(() => toDomain(fullExtent), [
+    fullExtent?.t_age,
+    fullExtent?.b_age,
+  ]);
+
+  const anim = useAnimatedDomain({ extent, duration });
+
+  const zoomToWindow = useCallback(
+    (target: AgeWindow, opts: AnimateWindowOptions = {}) => {
+      anim.animateTo([target.b_age, target.t_age], {
+        duration: opts.duration,
+      });
+    },
+    [anim.animateTo],
+  );
+
+  const zoomToInterval = useCallback(
+    (
+      interval: { eag: number; lag: number },
+      opts: AnimateWindowOptions = {},
+    ) => {
+      zoomToWindow({ t_age: interval.lag, b_age: interval.eag }, opts);
+    },
+    [zoomToWindow],
+  );
+
+  const reset = useCallback(
+    (opts: AnimateWindowOptions = {}) => {
+      if (fullExtent == null) return;
+      zoomToWindow(fullExtent, opts);
+    },
+    [zoomToWindow, fullExtent?.t_age, fullExtent?.b_age],
+  );
+
+  return {
+    window: toWindow(anim.domain),
+    isAnimating: anim.isAnimating,
+    isFullExtent: anim.isFullExtent,
+    zoomToWindow,
+    zoomToInterval,
+    reset,
+  };
+}
+
+/** `{t_age, b_age}` ↔ the core's `[older, younger]` domain. */
+function toDomain(w: AgeWindow): AgeDomain;
+function toDomain(w: AgeWindow | null): AgeDomain | null;
+function toDomain(w: AgeWindow | null): AgeDomain | null {
+  if (w == null) return null;
+  return [w.b_age, w.t_age];
+}
+
+function toWindow(d: AgeDomain): AgeWindow;
+function toWindow(d: AgeDomain | null): AgeWindow | null;
+function toWindow(d: AgeDomain | null): AgeWindow | null {
+  if (d == null) return null;
+  return { t_age: d[1], b_age: d[0] };
+}

package/src/column.ts

@@ -45,6 +45,10 @@ import {
   ColumnHeightScaleOptions,
 } from "./prepare-units";
 import { UnitLong } from "@macrostrat/api-types";
+import type {
+  TimescaleClickHandler,
+  IntervalStyleBuilder,
+} from "@macrostrat/timescale";
 import { NonIdealState } from "@blueprintjs/core";
 import { DataField } from "@macrostrat/data-components";
 import { ScaleContinuousNumeric } from "d3-scale";
@@ -61,6 +65,10 @@ interface BaseColumnProps extends Omit<
   // Timescale properties
   showTimescale?: boolean;
   timescaleLevels?: number | [number, number];
+  /** Called when a timescale interval is clicked (e.g. to zoom the age range). */
+  onClickTimescaleInterval?: TimescaleClickHandler;
+  /** Per-interval style for the timescale (e.g. to bold the selected interval). */
+  timescaleIntervalStyle?: IntervalStyleBuilder;
   unconformityLabels?: boolean | UnconformityLabelPlacement;
   onMouseOver?: (
     unit: UnitLong | null,
@@ -87,6 +95,12 @@ export interface ColumnProps
   // Unconformity height in pixels
   unconformityHeight?: number;
   scale?: ScaleContinuousNumeric<number, number>;
+  /** True while the age window is animating (e.g. from `useAnimatedAgeWindow`),
+   * so per-frame label/pattern recalculation can be skipped. */
+  isTransitioning?: boolean;
+  /** Hide unit labels while transitioning (perf escape hatch; default false —
+   * labels stay visible through the animation). */
+  hideLabelsWhileTransitioning?: boolean;
   ref?: RefObject<ColumnRef>;
 }
 
@@ -108,11 +122,14 @@ export function Column(props: ColumnProps) {
     pixelScale,
     minPixelScale = 0.2,
     minSectionHeight = 50,
+    windowPadding = 0,
     collapseSmallUnconformities = true,
     allowUnitSelection = false,
     hybridScale,
     scale,
     axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
     ref,
     ...rest
   } = props;
@@ -152,6 +169,7 @@ export function Column(props: ColumnProps) {
     pixelScale,
     minPixelScale: _minPixelScale,
     minSectionHeight: _minSectionHeight,
+    windowPadding,
     collapseSmallUnconformities,
     // TODO: consider unifying scale and hybridScale options
     scale,
@@ -179,6 +197,8 @@ export function Column(props: ColumnProps) {
       allowUnitSelection: showUnitPopover || allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
       ref,
     },
     h(ColumnInner, { ageAxisComponent, ...rest }, [
@@ -218,6 +238,8 @@ function ColumnInner(props: ColumnInnerProps) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
     ageAxisComponent = CompositeAgeAxis,
   } = props;
 
@@ -262,6 +284,8 @@ function ColumnInner(props: ColumnInnerProps) {
       h.if(_showTimescale)(CompositeTimescale, {
         levels: timescaleLevels,
         unconformityLabels: _timescaleUnconformityLabels,
+        onClickInterval: onClickTimescaleInterval,
+        intervalStyle: timescaleIntervalStyle,
       }),
       h(SectionsColumn, {
         unitComponent,

package/src/correlation-chart/main.ts

@@ -69,6 +69,13 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   /** Content rendered above the timescale axis (top-left), beside the column
    * headers — e.g. a zoom/filter indicator. */
   axisTopContent?: React.ReactNode;
+  /** True while the age window is animating (e.g. from `useAnimatedAgeWindow`).
+   * Propagated to each column's context so per-frame label/pattern work can be
+   * skipped during the transition. */
+  isTransitioning?: boolean;
+  /** Hide unit labels while transitioning (perf escape hatch; default false —
+   * labels stay visible through the animation). */
+  hideLabelsWhileTransitioning?: boolean;
   onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
   /** Called when a timescale interval is clicked (e.g. to zoom the age range) */
   onClickTimescaleInterval?: TimescaleClickHandler;
@@ -83,6 +90,14 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
  * this so that they line up with the columns beneath them. */
 const chartPaddingH = 4;
 
+/** Default scale settings for the correlation chart. */
+const defaultCorrelationChartScaleProps = {
+  targetUnitHeight: 10,
+  unconformityHeight: 60,
+  minSectionHeight: 60,
+  collapseSmallUnconformities: true,
+};
+
 function MainChartArea({ children }) {
   const columnRef = useColumnRef();
   return h("div.main-chart", { ref: columnRef }, children);
@@ -109,19 +124,14 @@ export function CorrelationChart({
   onClickTimescaleInterval,
   onColumnMouseOver,
   onColumnClick,
+  isTransitioning = false,
+  hideLabelsWhileTransitioning = false,
   ...scaleProps
 }: CorrelationChartProps) {
-  const defaultScaleProps = {
-    targetUnitHeight: 10,
-    unconformityHeight: 60,
-    minSectionHeight: 60,
-    collapseSmallUnconformities: true,
-  };
-
   const chartData = useMemo(() => {
     if (!data) return null;
     return buildCorrelationChartData(data, {
-      ...defaultScaleProps,
+      ...defaultCorrelationChartScaleProps,
       ...scaleProps,
     });
   }, [data, ...Object.values(scaleProps)]);
@@ -180,6 +190,8 @@ export function CorrelationChart({
                 scale,
                 unitComponent,
                 onColumnMouseOver,
+                isTransitioning,
+                hideLabelsWhileTransitioning,
               });
             }),
           ),
@@ -215,6 +227,8 @@ function Package({
   pixelScale,
   scale,
   onColumnMouseOver,
+  isTransitioning,
+  hideLabelsWhileTransitioning,
 }) {
   return h("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
@@ -232,6 +246,8 @@ function Package({
           scale,
           offsetLeft: i * (columnWidth + columnSpacing),
           onColumnMouseOver,
+          isTransitioning,
+          hideLabelsWhileTransitioning,
         });
       }),
     ]),
@@ -253,6 +269,8 @@ interface ColumnProps {
   pixelScale: number;
   scale?: ScaleContinuousNumeric<number, number>;
   onColumnMouseOver?: (columnID: number | null) => void;
+  isTransitioning?: boolean;
+  hideLabelsWhileTransitioning?: boolean;
 }
 
 function Column(props: ColumnProps) {
@@ -266,6 +284,8 @@ function Column(props: ColumnProps) {
     scale,
     unitComponent = ColoredUnitComponent,
     onColumnMouseOver,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
   } = props;
 
   const columnWidth = width;
@@ -297,6 +317,8 @@ function Column(props: ColumnProps) {
         scale,
         pixelsPerMeter: pixelScale, // Actually pixels per myr
         axisType: ColumnAxisType.AGE,
+        isTransitioning,
+        hideLabelsWhileTransitioning,
       },
       h(UnitBoxes, {
         unitComponent,

package/src/data-provider/store.ts

@@ -118,6 +118,11 @@ export interface MacrostratColumnDataContext<T extends BaseUnit> {
   totalHeight?: number;
   axisType?: ColumnAxisType;
   allowUnitSelection?: boolean;
+  /** True while the age window is animating; propagated to each section's
+   * `ColumnProvider` so per-frame label/pattern work can be skipped. */
+  isTransitioning?: boolean;
+  /** Hide unit labels while transitioning (perf escape hatch; default false). */
+  hideLabelsWhileTransitioning?: boolean;
 }
 
 export interface ColumnDataProviderProps<T extends BaseUnit>
@@ -138,6 +143,8 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
   allowUnitSelection,
   onUnitSelected,
   selectedUnit,
+  isTransitioning,
+  hideLabelsWhileTransitioning,
   ref,
 }: ColumnDataProviderProps<T>) {
   /** Internal provider for Macrostrat column data.
@@ -158,8 +165,17 @@ export function MacrostratColumnDataProvider<T extends BaseUnit>({
       sections,
       totalHeight,
       axisType,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
     };
-  }, [units, sections, totalHeight, axisType]);
+  }, [
+    units,
+    sections,
+    totalHeight,
+    axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
+  ]);
 
   return h(
     MacrostratColumnStateProvider,
@@ -242,7 +258,8 @@ export function MacrostratColumnProvider(props) {
    * generic concepts to Macrostrat-specific ones.
    */
 
-  const { axisType } = useMacrostratColumnData();
+  const { axisType, isTransitioning, hideLabelsWhileTransitioning } =
+    useMacrostratColumnData();
   const { units, domain, pixelScale, scale, children } = props;
   return h(
     ColumnProvider,
@@ -252,6 +269,8 @@ export function MacrostratColumnProvider(props) {
       range: domain,
       pixelsPerMeter: pixelScale,
       scale,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
     },
     children,
   );

package/src/index.ts

@@ -2,6 +2,7 @@ export * from "./units";
 export * from "./data-provider";
 export * from "./age-axis";
 export * from "./prepare-units";
+export * from "./animated-age-window";
 export * from "./column";
 export * from "./unit-details";
 export * from "./maps";