@macrostrat/column-views 3.8.0 → 3.10.0

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 { BaseUnit, Lithology } from \"@macrostrat/api-types\";\nimport { UnitWithLayoutParameters } 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: UnitWithLayoutParameters<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  let reducedWidth = _nColumns;\n  if (\"layout\" in division) {\n    const layout = division.layout;\n    _nColumns = Math.min(_nColumns, layout.totalColumns);\n    columnIx = layout.column;\n    reducedWidth = width / layout.totalColumns / layout.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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"}
+{"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 } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport {\n  getBestFGDCPatternForUnit,\n  getMixedUnitColor,\n} from \"@macrostrat/stratigraphy-utils\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { BaseUnit, Lithology } from \"@macrostrat/api-types\";\nimport { UnitWithLayoutParameters } from \"../prepare-units/helpers.ts\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\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: UnitWithLayoutParameters<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  let reducedWidth = _nColumns;\n  if (\"layout\" in division) {\n    const layout = division.layout;\n    _nColumns = layout.totalColumns;\n    columnIx = layout.column;\n    reducedWidth = width / layout.totalColumns / layout.nColumns;\n    x = (columnIx * width) / _nColumns;\n  }\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 getBestFGDCPatternForUnit(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 getBestFGDCPatternForUnit(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"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -46,50 +46,29 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^6.14.0",
-    "@macrostrat/api-types": "^1.2.0",
+    "@macrostrat/api-types": "^1.3.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/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",
-    "@turf/boolean-point-in-polygon": "^7.3.2",
-    "@turf/buffer": "^7.3.2",
-    "@turf/centroid": "^7.3.2",
-    "@turf/distance": "^7.3.2",
-    "@turf/line-intersect": "^7.3.2",
-    "@turf/nearest-point-on-line": "^7.3.2",
+    "@macrostrat/map-views": "^1.0.0",
+    "@macrostrat/scoped-store": "^1.1.0",
+    "@macrostrat/stratigraphy-utils": "^1.4.0",
+    "@macrostrat/timescale": "^3.2.0",
+    "@macrostrat/ui-components": "^5.2.0",
     "@types/chroma-js": "^3.1.1",
     "@types/d3-format": "^3.0.4",
-    "@types/d3-geo": "^3.1.0",
     "@types/d3-shape": "^3.1.7",
-    "@types/topojson-client": "^3.1.5",
     "@visx/axis": "^3.12.0",
     "chroma-js": "^3.2.0",
     "classnames": "^2.5.1",
-    "cross-fetch": "^4.1.0",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.2",
-    "d3-geo": "^3.1.1",
-    "d3-geo-voronoi": "^2.1.0",
     "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "jotai": "^2.20.0",
-    "mapbox-gl": "^3.0.0",
-    "p-map": "^7.0.4",
-    "react-spring": "^9.7.5",
-    "topojson-client": "^3.1.0",
-    "zustand": "^5.0.3",
-    "zustand-computed": "^2.0.2"
+    "jotai": "^2.20.0"
   },
   "devDependencies": {
     "@macrostrat/web-components-bundler": "1.0.1",

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,10 +2,13 @@ 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";
 export * from "./age-model-overlay";
 export * from "./correlation-chart";
 export * from "./notes";
 export * from "./facets";
+
+/** Legacy views */
+export * from "@macrostrat/map-views";