@macrostrat/column-views 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # Changelog
 
+## [3.9.0] - 2026-08-25 [_changes_](https://github.com/UW-Macrostrat/web-components/compare/@macrostrat/column-views-v3.8.0...@macrostrat/column-views-v3.9.0)
+
+### Minor Changes
+
+- Add `useAnimatedAgeWindow`: animates a column/correlation-chart's rendered
+  `t_age`/`b_age` for smooth pan-and-contract navigation at constant
+  `pixelScale` (density), driving the existing clipping + zig-zag unit edges. It
+  runs on the shared `useAnimatedDomain` core from `@macrostrat/timescale`.
+  Threads `isTransitioning` / `hideLabelsWhileTransitioning` flags through
+  `Column`/`CorrelationChart` → `ColumnProvider`; labels stay visible through
+  the animation by default, with an opt-in toggle to hide them. New stories for
+  the correlation chart and a single stratigraphic column, each with a
+  fixed-`pixelScale` variant and a label-hiding toggle.
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+
+  Add `windowPadding` (px): how much of the sections abutting the rendered
+  `t_age`/`b_age` window to reveal, so neighboring stratigraphy — and its
+  timescale intervals — stay visible and navigable when zoomed in. Available on
+  `Column` and `CorrelationChart`.
+
+  Unit density is now derived from the units the rendered window actually shows,
+  measured by their visible duration — so `targetUnitHeight` describes the units
+  on screen at any zoom depth, rather than the containing section's overall
+  average. A section the window doesn't reach falls back to its own units at
+  full duration and is drawn at its own scale. This removes the need for any
+  zoom-factor input: clipping shortens visible durations, which raises density,
+  so a column renders identically whether a window was animated to or set
+  directly.
+
+  Age columns now lay every section out at its **full extent** and apply the
+  rendered window as the last step, rather than clipping units and section
+  bounds up front. A section abutting the window therefore keeps its own density
+  and `minSectionHeight`, and is then trimmed to exactly the requested sliver —
+  previously such a fragment had its density re-derived from the few units that
+  survived the clip and was re-inflated to the floor, with its scale stretched
+  to match. Sections clipped by the window itself still honor
+  `minSectionHeight`, expanding their scale rather than rendering a sliver; only
+  the padding margin past the window renders at exactly its requested pixels.
+  Those final densities are resolved before the padding budget is spent, so a
+  margin measures the pixels requested rather than those pixels times whatever
+  stretch its neighbor needed — otherwise a short interval (a Holocene beside a
+  Pleistocene) is swallowed by its own margin. This also makes `windowPadding`
+  exact (it is spent against real section pixel heights; unconformity gaps
+  aren't charged, so padding smaller than `unconformityHeight` can still reach
+  across one) and stops unconformity-collapse decisions from shifting as the
+  window moves. Hybrid and externally-supplied scales keep the previous
+  clip-then-lay-out path.
+
+  Stabilize composite-scale package keys (positional index instead of
+  `package-${b_age}-${t_age}`) so the correlation chart's packages, columns, and
+  timescale reconcile instead of remounting on every animation frame. Unit
+  labels re-fit when a transition settles (via `SizeAwareLabel`'s
+  `remeasureKey`), not on intermediate frames.
+
+  `Column` now forwards `onClickTimescaleInterval` and `timescaleIntervalStyle`
+  to its composite timescale (via `CompositeTimescale`'s new
+  `onClickInterval`/`intervalStyle` props), so a standalone column supports
+  click-to-zoom interval navigation and per-interval styling (e.g. bolding the
+  selected interval).
+
+  Add an interval-zoom story (grouped with the other animation stories under
+  `Column views/Column animations`): clicking a timescale interval animates the
+  window to it, a preceding/postdating interval moves along the timescale, and
+  clicking the selected interval zooms out a level. The timescale shows a fixed
+  3-level window that slides with the selected interval's rank (always one
+  coarser level to navigate up, one finer to drill down), independent of the
+  layout. `targetUnitHeight`, `minSectionHeight` and `windowPadding` are plain
+  display controls — there is no zoom-level input.
+
+### Patch Changes
+
+- Fix two zoom-sync issues exposed by animated age-window zoom:
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+
+  - Age-axis (`AgeAxis`) now redraws when the scale's domain/range changes (not
+    just its object identity), and builds a fresh d3 axis generator each render.
+    Reusing the generator retained stale `.tickValues()` config, so a section
+    that was short (explicit first/last ticks) and later stretched kept those
+    out-of-domain tick values — leaving some axes with no labels. Both surfaced
+    once stable React keys stopped the axis remounting per frame.
+  - The inline-label/note tracker (`LabelTrackerProvider`) re-syncs to the
+    _current_ visible unit set on zoom. Its stale gate froze the "unlabeled" set
+    once the unit set changed, so a unit whose label now fit inline also kept
+    rendering as a note; it now recomputes over current units.
+
+- Updated dependencies
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+- Updated dependencies
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+- Updated dependencies
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+- Updated dependencies
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+- Updated dependencies
+  [0247a5a2](https://github.com/UW-Macrostrat/web-components/commit/0247a5a2e12062fdb5e586b4b5dca9c3c6490127)
+  - @macrostrat/timescale@3.2.0
+  - @macrostrat/column-components@2.1.0
+  - @macrostrat/ui-components@5.2.0
+  - @macrostrat/map-styles@2.2.7
+
 ## [3.8.0] - 2026-08-02 [_changes_](https://github.com/UW-Macrostrat/web-components/compare/@macrostrat/column-views-v3.7.0...@macrostrat/column-views-v3.8.0)
 
 ### Minor Changes

package/dist/animated-age-window.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const timescale = require("@macrostrat/timescale");
+function useAnimatedAgeWindow(options) {
+  const { fullExtent, duration } = options;
+  const extent = React.useMemo(() => toDomain(fullExtent), [
+    fullExtent?.t_age,
+    fullExtent?.b_age
+  ]);
+  const anim = timescale.useAnimatedDomain({ extent, duration });
+  const zoomToWindow = React.useCallback(
+    (target, opts = {}) => {
+      anim.animateTo([target.b_age, target.t_age], {
+        duration: opts.duration
+      });
+    },
+    [anim.animateTo]
+  );
+  const zoomToInterval = React.useCallback(
+    (interval, opts = {}) => {
+      zoomToWindow({ t_age: interval.lag, b_age: interval.eag }, opts);
+    },
+    [zoomToWindow]
+  );
+  const reset = React.useCallback(
+    (opts = {}) => {
+      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
+  };
+}
+function toDomain(w) {
+  if (w == null) return null;
+  return [w.b_age, w.t_age];
+}
+function toWindow(d) {
+  if (d == null) return null;
+  return { t_age: d[1], b_age: d[0] };
+}
+exports.useAnimatedAgeWindow = useAnimatedAgeWindow;
+//# sourceMappingURL=animated-age-window.cjs.map

package/dist/animated-age-window.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-age-window.cjs","sources":["../src/animated-age-window.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { AgeDomain, useAnimatedDomain } from \"@macrostrat/timescale\";\n\n/** A rendered age window, ordered as the column props expect:\n * `t_age` is the younger (top) bound, `b_age` the older (bottom) bound. */\nexport interface AgeWindow {\n  t_age: number;\n  b_age: number;\n}\n\nexport interface AnimateWindowOptions {\n  duration?: number;\n}\n\nexport interface UseAnimatedAgeWindowOptions {\n  /** The full data extent — the window to reset to, and the initial window.\n   * `null` until the data (and hence extent) is known. */\n  fullExtent: AgeWindow | null;\n  /** Animation duration in ms (default 750). */\n  duration?: number;\n}\n\nexport interface AnimatedAgeWindow {\n  /** The current animated window to feed to `t_age`/`b_age` column props\n   * (`null` until `fullExtent` is known). */\n  window: AgeWindow | null;\n  isAnimating: boolean;\n  /** True when the window is (approximately) the full extent. */\n  isFullExtent: boolean;\n  /** Pan-and-contract to an explicit window (clamped to the full extent).\n   * Density (`pixelScale`) is left untouched — this is not a zoom. */\n  zoomToWindow(target: AgeWindow, opts?: AnimateWindowOptions): void;\n  /** Pan-and-contract to a timescale interval, using `eag`/`lag`. */\n  zoomToInterval(\n    interval: { eag: number; lag: number },\n    opts?: AnimateWindowOptions,\n  ): void;\n  /** Ease back to the full extent. */\n  reset(opts?: AnimateWindowOptions): void;\n}\n\n/**\n * Animate the rendered age window (`t_age`/`b_age`) of a column or correlation\n * chart. This is the \"animate the current zoom approach\" model: narrowing the\n * window re-lays-out the column with explicit clipping — units past the bounds\n * get a zig-zag edge, unconformities keep their fixed `unconformityHeight`, and\n * `pixelScale` (density) is untouched, so a sub-interval click **pans and\n * contracts** at constant density rather than zooming. Joint domain/range\n * change (true zoom) stays under the user's direct control via `pixelScale`.\n *\n * The animation itself is `useAnimatedDomain` from `@macrostrat/timescale` —\n * the same state machine that drives the timescale's `useZoomableScale`. This\n * hook only maps an `[older, younger]` domain onto `{ b_age, t_age }`; it\n * animates the window you ask for and nothing more. Revealing a margin of the\n * neighboring column is the *layout's* job, via the `windowPadding` prop (px),\n * which is resolved against real section heights rather than predicted here.\n */\nexport function useAnimatedAgeWindow(\n  options: UseAnimatedAgeWindowOptions,\n): AnimatedAgeWindow {\n  const { fullExtent, duration } = options;\n\n  const extent = useMemo(() => toDomain(fullExtent), [\n    fullExtent?.t_age,\n    fullExtent?.b_age,\n  ]);\n\n  const anim = useAnimatedDomain({ extent, duration });\n\n  const zoomToWindow = useCallback(\n    (target: AgeWindow, opts: AnimateWindowOptions = {}) => {\n      anim.animateTo([target.b_age, target.t_age], {\n        duration: opts.duration,\n      });\n    },\n    [anim.animateTo],\n  );\n\n  const zoomToInterval = useCallback(\n    (\n      interval: { eag: number; lag: number },\n      opts: AnimateWindowOptions = {},\n    ) => {\n      zoomToWindow({ t_age: interval.lag, b_age: interval.eag }, opts);\n    },\n    [zoomToWindow],\n  );\n\n  const reset = useCallback(\n    (opts: AnimateWindowOptions = {}) => {\n      if (fullExtent == null) return;\n      zoomToWindow(fullExtent, opts);\n    },\n    [zoomToWindow, fullExtent?.t_age, fullExtent?.b_age],\n  );\n\n  return {\n    window: toWindow(anim.domain),\n    isAnimating: anim.isAnimating,\n    isFullExtent: anim.isFullExtent,\n    zoomToWindow,\n    zoomToInterval,\n    reset,\n  };\n}\n\n/** `{t_age, b_age}` ↔ the core's `[older, younger]` domain. */\nfunction toDomain(w: AgeWindow): AgeDomain;\nfunction toDomain(w: AgeWindow | null): AgeDomain | null;\nfunction toDomain(w: AgeWindow | null): AgeDomain | null {\n  if (w == null) return null;\n  return [w.b_age, w.t_age];\n}\n\nfunction toWindow(d: AgeDomain): AgeWindow;\nfunction toWindow(d: AgeDomain | null): AgeWindow | null;\nfunction toWindow(d: AgeDomain | null): AgeWindow | null {\n  if (d == null) return null;\n  return { t_age: d[1], b_age: d[0] };\n}\n"],"names":["useMemo","useAnimatedDomain","useCallback"],"mappings":";;;;AAyDO,SAAS,qBACd,SACmB;AACnB,QAAM,EAAE,YAAY,SAAA,IAAa;AAEjC,QAAM,SAASA,MAAAA,QAAQ,MAAM,SAAS,UAAU,GAAG;AAAA,IACjD,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA,CACb;AAED,QAAM,OAAOC,UAAAA,kBAAkB,EAAE,QAAQ,UAAU;AAEnD,QAAM,eAAeC,MAAAA;AAAAA,IACnB,CAAC,QAAmB,OAA6B,OAAO;AACtD,WAAK,UAAU,CAAC,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,QAC3C,UAAU,KAAK;AAAA,MAAA,CAChB;AAAA,IACH;AAAA,IACA,CAAC,KAAK,SAAS;AAAA,EAAA;AAGjB,QAAM,iBAAiBA,MAAAA;AAAAA,IACrB,CACE,UACA,OAA6B,OAC1B;AACH,mBAAa,EAAE,OAAO,SAAS,KAAK,OAAO,SAAS,IAAA,GAAO,IAAI;AAAA,IACjE;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,QAAQA,MAAAA;AAAAA,IACZ,CAAC,OAA6B,CAAA,MAAO;AACnC,UAAI,cAAc,KAAM;AACxB,mBAAa,YAAY,IAAI;AAAA,IAC/B;AAAA,IACA,CAAC,cAAc,YAAY,OAAO,YAAY,KAAK;AAAA,EAAA;AAGrD,SAAO;AAAA,IACL,QAAQ,SAAS,KAAK,MAAM;AAAA,IAC5B,aAAa,KAAK;AAAA,IAClB,cAAc,KAAK;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AAKA,SAAS,SAAS,GAAuC;AACvD,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,CAAC,EAAE,OAAO,EAAE,KAAK;AAC1B;AAIA,SAAS,SAAS,GAAuC;AACvD,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAA;AAClC;;"}

package/dist/animated-age-window.d.ts

@@ -0,0 +1,51 @@
+/** 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 declare function useAnimatedAgeWindow(options: UseAnimatedAgeWindowOptions): AnimatedAgeWindow;

package/dist/animated-age-window.js

@@ -0,0 +1,51 @@
+import { useMemo, useCallback } from "react";
+import { useAnimatedDomain } from "@macrostrat/timescale";
+function useAnimatedAgeWindow(options) {
+  const { fullExtent, duration } = options;
+  const extent = useMemo(() => toDomain(fullExtent), [
+    fullExtent?.t_age,
+    fullExtent?.b_age
+  ]);
+  const anim = useAnimatedDomain({ extent, duration });
+  const zoomToWindow = useCallback(
+    (target, opts = {}) => {
+      anim.animateTo([target.b_age, target.t_age], {
+        duration: opts.duration
+      });
+    },
+    [anim.animateTo]
+  );
+  const zoomToInterval = useCallback(
+    (interval, opts = {}) => {
+      zoomToWindow({ t_age: interval.lag, b_age: interval.eag }, opts);
+    },
+    [zoomToWindow]
+  );
+  const reset = useCallback(
+    (opts = {}) => {
+      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
+  };
+}
+function toDomain(w) {
+  if (w == null) return null;
+  return [w.b_age, w.t_age];
+}
+function toWindow(d) {
+  if (d == null) return null;
+  return { t_age: d[1], b_age: d[0] };
+}
+export {
+  useAnimatedAgeWindow
+};
+//# sourceMappingURL=animated-age-window.js.map

package/dist/animated-age-window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-age-window.js","sources":["../src/animated-age-window.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { AgeDomain, useAnimatedDomain } from \"@macrostrat/timescale\";\n\n/** A rendered age window, ordered as the column props expect:\n * `t_age` is the younger (top) bound, `b_age` the older (bottom) bound. */\nexport interface AgeWindow {\n  t_age: number;\n  b_age: number;\n}\n\nexport interface AnimateWindowOptions {\n  duration?: number;\n}\n\nexport interface UseAnimatedAgeWindowOptions {\n  /** The full data extent — the window to reset to, and the initial window.\n   * `null` until the data (and hence extent) is known. */\n  fullExtent: AgeWindow | null;\n  /** Animation duration in ms (default 750). */\n  duration?: number;\n}\n\nexport interface AnimatedAgeWindow {\n  /** The current animated window to feed to `t_age`/`b_age` column props\n   * (`null` until `fullExtent` is known). */\n  window: AgeWindow | null;\n  isAnimating: boolean;\n  /** True when the window is (approximately) the full extent. */\n  isFullExtent: boolean;\n  /** Pan-and-contract to an explicit window (clamped to the full extent).\n   * Density (`pixelScale`) is left untouched — this is not a zoom. */\n  zoomToWindow(target: AgeWindow, opts?: AnimateWindowOptions): void;\n  /** Pan-and-contract to a timescale interval, using `eag`/`lag`. */\n  zoomToInterval(\n    interval: { eag: number; lag: number },\n    opts?: AnimateWindowOptions,\n  ): void;\n  /** Ease back to the full extent. */\n  reset(opts?: AnimateWindowOptions): void;\n}\n\n/**\n * Animate the rendered age window (`t_age`/`b_age`) of a column or correlation\n * chart. This is the \"animate the current zoom approach\" model: narrowing the\n * window re-lays-out the column with explicit clipping — units past the bounds\n * get a zig-zag edge, unconformities keep their fixed `unconformityHeight`, and\n * `pixelScale` (density) is untouched, so a sub-interval click **pans and\n * contracts** at constant density rather than zooming. Joint domain/range\n * change (true zoom) stays under the user's direct control via `pixelScale`.\n *\n * The animation itself is `useAnimatedDomain` from `@macrostrat/timescale` —\n * the same state machine that drives the timescale's `useZoomableScale`. This\n * hook only maps an `[older, younger]` domain onto `{ b_age, t_age }`; it\n * animates the window you ask for and nothing more. Revealing a margin of the\n * neighboring column is the *layout's* job, via the `windowPadding` prop (px),\n * which is resolved against real section heights rather than predicted here.\n */\nexport function useAnimatedAgeWindow(\n  options: UseAnimatedAgeWindowOptions,\n): AnimatedAgeWindow {\n  const { fullExtent, duration } = options;\n\n  const extent = useMemo(() => toDomain(fullExtent), [\n    fullExtent?.t_age,\n    fullExtent?.b_age,\n  ]);\n\n  const anim = useAnimatedDomain({ extent, duration });\n\n  const zoomToWindow = useCallback(\n    (target: AgeWindow, opts: AnimateWindowOptions = {}) => {\n      anim.animateTo([target.b_age, target.t_age], {\n        duration: opts.duration,\n      });\n    },\n    [anim.animateTo],\n  );\n\n  const zoomToInterval = useCallback(\n    (\n      interval: { eag: number; lag: number },\n      opts: AnimateWindowOptions = {},\n    ) => {\n      zoomToWindow({ t_age: interval.lag, b_age: interval.eag }, opts);\n    },\n    [zoomToWindow],\n  );\n\n  const reset = useCallback(\n    (opts: AnimateWindowOptions = {}) => {\n      if (fullExtent == null) return;\n      zoomToWindow(fullExtent, opts);\n    },\n    [zoomToWindow, fullExtent?.t_age, fullExtent?.b_age],\n  );\n\n  return {\n    window: toWindow(anim.domain),\n    isAnimating: anim.isAnimating,\n    isFullExtent: anim.isFullExtent,\n    zoomToWindow,\n    zoomToInterval,\n    reset,\n  };\n}\n\n/** `{t_age, b_age}` ↔ the core's `[older, younger]` domain. */\nfunction toDomain(w: AgeWindow): AgeDomain;\nfunction toDomain(w: AgeWindow | null): AgeDomain | null;\nfunction toDomain(w: AgeWindow | null): AgeDomain | null {\n  if (w == null) return null;\n  return [w.b_age, w.t_age];\n}\n\nfunction toWindow(d: AgeDomain): AgeWindow;\nfunction toWindow(d: AgeDomain | null): AgeWindow | null;\nfunction toWindow(d: AgeDomain | null): AgeWindow | null {\n  if (d == null) return null;\n  return { t_age: d[1], b_age: d[0] };\n}\n"],"names":[],"mappings":";;AAyDO,SAAS,qBACd,SACmB;AACnB,QAAM,EAAE,YAAY,SAAA,IAAa;AAEjC,QAAM,SAAS,QAAQ,MAAM,SAAS,UAAU,GAAG;AAAA,IACjD,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA,CACb;AAED,QAAM,OAAO,kBAAkB,EAAE,QAAQ,UAAU;AAEnD,QAAM,eAAe;AAAA,IACnB,CAAC,QAAmB,OAA6B,OAAO;AACtD,WAAK,UAAU,CAAC,OAAO,OAAO,OAAO,KAAK,GAAG;AAAA,QAC3C,UAAU,KAAK;AAAA,MAAA,CAChB;AAAA,IACH;AAAA,IACA,CAAC,KAAK,SAAS;AAAA,EAAA;AAGjB,QAAM,iBAAiB;AAAA,IACrB,CACE,UACA,OAA6B,OAC1B;AACH,mBAAa,EAAE,OAAO,SAAS,KAAK,OAAO,SAAS,IAAA,GAAO,IAAI;AAAA,IACjE;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,QAAQ;AAAA,IACZ,CAAC,OAA6B,CAAA,MAAO;AACnC,UAAI,cAAc,KAAM;AACxB,mBAAa,YAAY,IAAI;AAAA,IAC/B;AAAA,IACA,CAAC,cAAc,YAAY,OAAO,YAAY,KAAK;AAAA,EAAA;AAGrD,SAAO;AAAA,IACL,QAAQ,SAAS,KAAK,MAAM;AAAA,IAC5B,aAAa,KAAK;AAAA,IAClB,cAAc,KAAK;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AAKA,SAAS,SAAS,GAAuC;AACvD,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,CAAC,EAAE,OAAO,EAAE,KAAK;AAC1B;AAIA,SAAS,SAAS,GAAuC;AACvD,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAA;AAClC;"}

package/dist/column.cjs

@@ -36,11 +36,14 @@ function Column(props) {
     pixelScale,
     minPixelScale = 0.2,
     minSectionHeight = 50,
+    windowPadding = 0,
     collapseSmallUnconformities = true,
     allowUnitSelection = false,
     hybridScale,
     scale,
     axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
     ref,
     ...rest
   } = props;
@@ -70,6 +73,7 @@ function Column(props) {
     pixelScale,
     minPixelScale: _minPixelScale,
     minSectionHeight: _minSectionHeight,
+    windowPadding,
     collapseSmallUnconformities,
     // TODO: consider unifying scale and hybridScale options
     scale,
@@ -95,6 +99,8 @@ function Column(props) {
       allowUnitSelection: showUnitPopover || allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
       ref
     },
     column_module.default(ColumnInner, { ageAxisComponent, ...rest }, [
@@ -126,6 +132,8 @@ function ColumnInner(props) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
     ageAxisComponent = ageAxis.CompositeAgeAxis
   } = props;
   const { axisType } = store.useMacrostratColumnData();
@@ -162,7 +170,9 @@ function ColumnInner(props) {
       column_module.default(ageAxisComponent),
       column_module.default.if(_showTimescale)(section.CompositeTimescale, {
         levels: timescaleLevels,
-        unconformityLabels: _timescaleUnconformityLabels
+        unconformityLabels: _timescaleUnconformityLabels,
+        onClickInterval: onClickTimescaleInterval,
+        intervalStyle: timescaleIntervalStyle
       }),
       column_module.default(section.SectionsColumn, {
         unitComponent,

package/dist/column.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"column.cjs","sources":["../src/column.ts"],"sourcesContent":["import { ColumnAxisType } from \"@macrostrat/column-components\";\nimport {\n  Box,\n  extractPadding,\n  Padding,\n  useDarkMode,\n} from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport {\n  HTMLAttributes,\n  useCallback,\n  CSSProperties,\n  ComponentType,\n  RefObject,\n} from \"react\";\nimport h from \"./column.module.sass\";\nimport { UnitComponent } from \"./units\";\nimport {\n  ColumnRef,\n  UnitKeyboardNavigation,\n  useColumnRef,\n  useUnitSelectionDispatch,\n} from \"./data-provider\";\n\nimport {\n  Identifier,\n  ReferencesField,\n  UnitSelectionPopover,\n} from \"./unit-details\";\nimport {\n  MacrostratColumnDataProvider,\n  useCompositeScale,\n  useMacrostratColumnData,\n} from \"./data-provider\";\nimport {\n  SectionSharedProps,\n  CompositeTimescale,\n  SectionsColumn,\n} from \"./section\";\nimport { ApproximateHeightAxis, CompositeAgeAxis } from \"./age-axis\";\nimport {\n  MergeSectionsMode,\n  usePreparedColumnUnits,\n  HybridScaleType,\n  ColumnHeightScaleOptions,\n} from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nimport { NonIdealState } from \"@blueprintjs/core\";\nimport { DataField } from \"@macrostrat/data-components\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\n\ninterface BaseColumnProps extends Omit<\n  SectionSharedProps,\n  \"unconformityLabels\"\n> {\n  className?: string;\n  showLabelColumn?: boolean;\n  keyboardNavigation?: boolean;\n  showLabels?: boolean;\n  maxInternalColumns?: number;\n  // Timescale properties\n  showTimescale?: boolean;\n  timescaleLevels?: number | [number, number];\n  unconformityLabels?: boolean | UnconformityLabelPlacement;\n  onMouseOver?: (\n    unit: UnitLong | null,\n    height: number | null,\n    evt: MouseEvent,\n  ) => void;\n}\n\nexport type UnconformityLabelPlacement = \"minimal\" | \"prominent\" | \"none\";\n\nexport interface ColumnProps\n  extends Padding, BaseColumnProps, ColumnHeightScaleOptions {\n  // Macrostrat units\n  units: UnitLong[];\n  t_age?: number;\n  b_age?: number;\n  t_pos?: number;\n  b_pos?: number;\n  mergeSections?: MergeSectionsMode;\n  showUnitPopover?: boolean;\n  allowUnitSelection?: boolean;\n  selectedUnit?: number | null;\n  onUnitSelected?: (unitID: number | null, unit: any) => void;\n  // Unconformity height in pixels\n  unconformityHeight?: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n  ref?: RefObject<ColumnRef>;\n}\n\nexport function Column(props: ColumnProps) {\n  const {\n    showUnitPopover = false,\n    keyboardNavigation = false,\n    mergeSections,\n    onUnitSelected,\n    selectedUnit,\n    children,\n    units: rawUnits,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    unconformityHeight = 30,\n    targetUnitHeight = 20,\n    pixelScale,\n    minPixelScale = 0.2,\n    minSectionHeight = 50,\n    collapseSmallUnconformities = true,\n    allowUnitSelection = false,\n    hybridScale,\n    scale,\n    axisType,\n    ref,\n    ...rest\n  } = props;\n\n  /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies\n   * standardization of scales in all sections */\n  let _targetUnitHeight: number | null = targetUnitHeight;\n  let _minSectionHeight = minSectionHeight;\n  let _minPixelScale = minPixelScale;\n  if (pixelScale != null) {\n    _targetUnitHeight = null;\n    _minSectionHeight = 0;\n    _minPixelScale = pixelScale;\n  }\n\n  // Handle special cases for hybrid scales (WIP, we need to regularize this)\n  let _axisType = axisType ?? ColumnAxisType.AGE;\n  let ageAxisComponent = CompositeAgeAxis;\n  if (\n    hybridScale?.type === HybridScaleType.ApproximateHeight &&\n    _axisType != ColumnAxisType.AGE\n  ) {\n    // Use approximate height axis for non-age columns if a non-age axis type is requested\n    ageAxisComponent = ApproximateHeightAxis;\n    _axisType = ColumnAxisType.AGE;\n  }\n\n  const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {\n    axisType: _axisType,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    mergeSections,\n    targetUnitHeight: _targetUnitHeight,\n    unconformityHeight,\n    pixelScale,\n    minPixelScale: _minPixelScale,\n    minSectionHeight: _minSectionHeight,\n    collapseSmallUnconformities,\n    // TODO: consider unifying scale and hybridScale options\n    scale,\n    hybridScale,\n  });\n\n  if (sections.length === 0) {\n    return h(\n      \"div.column-container.empty\",\n      h(NonIdealState, {\n        title: \"Empty column\",\n        description: \"No sections found in this column.\",\n        icon: \"warning-sign\",\n      }),\n    );\n  }\n\n  return h(\n    MacrostratColumnDataProvider,\n    {\n      units,\n      sections,\n      totalHeight,\n      axisType: _axisType,\n      allowUnitSelection: showUnitPopover || allowUnitSelection,\n      onUnitSelected,\n      selectedUnit,\n      ref,\n    },\n    h(ColumnInner, { ageAxisComponent, ...rest }, [\n      children,\n      h.if(showUnitPopover)(UnitSelectionPopover),\n      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),\n    ]),\n  );\n}\n\ninterface ColumnInnerProps extends BaseColumnProps {\n  ageAxisComponent?: ComponentType;\n}\n\nfunction ColumnInner(props: ColumnInnerProps) {\n  const padding = extractPadding(props);\n\n  // TODO: integrate padding vars more closely with the rest of the spacing (right now padding is a bit ad-hoc)\n  const paddingVars: any = {\n    \"--column-padding-top\": `${padding.paddingTop}px`,\n    \"--column-padding-bottom\": `${padding.paddingBottom}px`,\n    \"--column-padding-left\": `${padding.paddingLeft}px`,\n    \"--column-padding-right\": `${padding.paddingRight}px`,\n  };\n\n  const {\n    unitComponent = UnitComponent,\n    unconformityLabels = \"minimal\",\n    showLabels = true,\n    width: _width = 300,\n    columnWidth: _columnWidth = 150,\n    showLabelColumn: _showLabelColumn = true,\n    className,\n    clipUnits = false,\n    children,\n    showTimescale,\n    timescaleLevels,\n    maxInternalColumns,\n    onMouseOver,\n    ageAxisComponent = CompositeAgeAxis,\n  } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  const columnRef = useColumnRef();\n\n  // Coalesce unconformity label setting to a boolean\n  let _timescaleUnconformityLabels = false;\n  let _sectionUnconformityLabels = false;\n  if (unconformityLabels === true || unconformityLabels === \"prominent\") {\n    _sectionUnconformityLabels = true;\n  } else if (unconformityLabels === \"minimal\") {\n    _timescaleUnconformityLabels = true;\n  }\n\n  let width = _width;\n  let columnWidth = _columnWidth;\n  if (columnWidth > width) {\n    columnWidth = width;\n  }\n  let showLabelColumn = _showLabelColumn;\n  if (columnWidth > width - 10) {\n    showLabelColumn = false;\n  }\n\n  let _showTimescale = showTimescale ?? true;\n  if (timescaleLevels != null) {\n    _showTimescale = true;\n  }\n  _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;\n\n  return h(\n    ColumnContainer,\n    {\n      ...useMouseEventHandlers(onMouseOver),\n      style: paddingVars,\n      className,\n    },\n    h(\"div.column\", { ref: columnRef }, [\n      h(ageAxisComponent),\n      h.if(_showTimescale)(CompositeTimescale, {\n        levels: timescaleLevels,\n        unconformityLabels: _timescaleUnconformityLabels,\n      }),\n      h(SectionsColumn, {\n        unitComponent,\n        showLabels,\n        width,\n        columnWidth,\n        showLabelColumn,\n        clipUnits,\n        unconformityLabels: _sectionUnconformityLabels,\n        maxInternalColumns,\n      }),\n      children,\n    ]),\n  );\n}\n\ntype ColumnMouseOverHandler = (\n  unit: UnitLong | null,\n  height: number | null,\n  evt: MouseEvent,\n) => void;\n\nfunction useMouseEventHandlers(\n  _onMouseOver: ColumnMouseOverHandler | null = null,\n) {\n  /** Click event handler */\n\n  // Click handler for unit selection\n  const dispatch = useUnitSelectionDispatch();\n  const onClick = useCallback(\n    (evt) => {\n      dispatch?.(null, null);\n    },\n    [dispatch],\n  );\n\n  /** Hover event handlers */\n  const scale = useCompositeScale();\n\n  const onMouseOver = useCallback(\n    (evt) => {\n      const height = scale.invert(\n        evt.clientY - evt.currentTarget.getBoundingClientRect().top,\n      );\n      _onMouseOver?.(null, height, evt);\n    },\n    [scale, _onMouseOver],\n  );\n\n  const onMouseOut = useCallback(() => {\n    _onMouseOver?.(null, null, null);\n  }, [_onMouseOver]);\n\n  if (_onMouseOver == null) {\n    return {\n      onClick,\n      onMouseOver: undefined,\n      onMouseMove: undefined,\n      onMouseOut: undefined,\n    };\n  }\n\n  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };\n}\n\nexport interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ColumnContainer(props: ColumnContainerProps) {\n  const { className, ...rest } = props;\n  const darkMode = useDarkMode();\n\n  return h(Box, {\n    className: classNames(\n      className,\n      {\n        \"dark-mode\": darkMode?.isEnabled ?? false,\n      },\n      \"column-container\",\n    ),\n    ...rest,\n  });\n}\n\nexport function ColumnBasicInfo({\n  data,\n  showColumnID = true,\n  showReferences = true,\n}) {\n  if (data == null) return null;\n  return h(\"div.column-info\", [\n    h(\"div.column-title-row\", [\n      h(\"h2\", data.col_name),\n      h.if(showColumnID)(\"h4\", h(Identifier, { id: data.col_id })),\n    ]),\n    h(DataField, { row: true, label: \"Group\", value: data.col_group }),\n    h.if(showReferences)(ReferencesField, {\n      refs: data.refs,\n      inline: false,\n      row: false,\n      className: \"column-refs\",\n    }),\n  ]);\n}\n"],"names":["ColumnAxisType","CompositeAgeAxis","HybridScaleType","ApproximateHeightAxis","usePreparedColumnUnits","h","NonIdealState","MacrostratColumnDataProvider","UnitSelectionPopover","UnitKeyboardNavigation","extractPadding","UnitComponent","useMacrostratColumnData","useColumnRef","CompositeTimescale","SectionsColumn","useUnitSelectionDispatch","useCallback","useCompositeScale","useDarkMode","Box","classNames","Identifier","DataField","ReferencesField"],"mappings":"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"}
+{"version":3,"file":"column.cjs","sources":["../src/column.ts"],"sourcesContent":["import { ColumnAxisType } from \"@macrostrat/column-components\";\nimport {\n  Box,\n  extractPadding,\n  Padding,\n  useDarkMode,\n} from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport {\n  HTMLAttributes,\n  useCallback,\n  CSSProperties,\n  ComponentType,\n  RefObject,\n} from \"react\";\nimport h from \"./column.module.sass\";\nimport { UnitComponent } from \"./units\";\nimport {\n  ColumnRef,\n  UnitKeyboardNavigation,\n  useColumnRef,\n  useUnitSelectionDispatch,\n} from \"./data-provider\";\n\nimport {\n  Identifier,\n  ReferencesField,\n  UnitSelectionPopover,\n} from \"./unit-details\";\nimport {\n  MacrostratColumnDataProvider,\n  useCompositeScale,\n  useMacrostratColumnData,\n} from \"./data-provider\";\nimport {\n  SectionSharedProps,\n  CompositeTimescale,\n  SectionsColumn,\n} from \"./section\";\nimport { ApproximateHeightAxis, CompositeAgeAxis } from \"./age-axis\";\nimport {\n  MergeSectionsMode,\n  usePreparedColumnUnits,\n  HybridScaleType,\n  ColumnHeightScaleOptions,\n} from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nimport type {\n  TimescaleClickHandler,\n  IntervalStyleBuilder,\n} from \"@macrostrat/timescale\";\nimport { NonIdealState } from \"@blueprintjs/core\";\nimport { DataField } from \"@macrostrat/data-components\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\n\ninterface BaseColumnProps extends Omit<\n  SectionSharedProps,\n  \"unconformityLabels\"\n> {\n  className?: string;\n  showLabelColumn?: boolean;\n  keyboardNavigation?: boolean;\n  showLabels?: boolean;\n  maxInternalColumns?: number;\n  // Timescale properties\n  showTimescale?: boolean;\n  timescaleLevels?: number | [number, number];\n  /** Called when a timescale interval is clicked (e.g. to zoom the age range). */\n  onClickTimescaleInterval?: TimescaleClickHandler;\n  /** Per-interval style for the timescale (e.g. to bold the selected interval). */\n  timescaleIntervalStyle?: IntervalStyleBuilder;\n  unconformityLabels?: boolean | UnconformityLabelPlacement;\n  onMouseOver?: (\n    unit: UnitLong | null,\n    height: number | null,\n    evt: MouseEvent,\n  ) => void;\n}\n\nexport type UnconformityLabelPlacement = \"minimal\" | \"prominent\" | \"none\";\n\nexport interface ColumnProps\n  extends Padding, BaseColumnProps, ColumnHeightScaleOptions {\n  // Macrostrat units\n  units: UnitLong[];\n  t_age?: number;\n  b_age?: number;\n  t_pos?: number;\n  b_pos?: number;\n  mergeSections?: MergeSectionsMode;\n  showUnitPopover?: boolean;\n  allowUnitSelection?: boolean;\n  selectedUnit?: number | null;\n  onUnitSelected?: (unitID: number | null, unit: any) => void;\n  // Unconformity height in pixels\n  unconformityHeight?: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n  /** True while the age window is animating (e.g. from `useAnimatedAgeWindow`),\n   * so per-frame label/pattern recalculation can be skipped. */\n  isTransitioning?: boolean;\n  /** Hide unit labels while transitioning (perf escape hatch; default false —\n   * labels stay visible through the animation). */\n  hideLabelsWhileTransitioning?: boolean;\n  ref?: RefObject<ColumnRef>;\n}\n\nexport function Column(props: ColumnProps) {\n  const {\n    showUnitPopover = false,\n    keyboardNavigation = false,\n    mergeSections,\n    onUnitSelected,\n    selectedUnit,\n    children,\n    units: rawUnits,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    unconformityHeight = 30,\n    targetUnitHeight = 20,\n    pixelScale,\n    minPixelScale = 0.2,\n    minSectionHeight = 50,\n    windowPadding = 0,\n    collapseSmallUnconformities = true,\n    allowUnitSelection = false,\n    hybridScale,\n    scale,\n    axisType,\n    isTransitioning,\n    hideLabelsWhileTransitioning,\n    ref,\n    ...rest\n  } = props;\n\n  /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies\n   * standardization of scales in all sections */\n  let _targetUnitHeight: number | null = targetUnitHeight;\n  let _minSectionHeight = minSectionHeight;\n  let _minPixelScale = minPixelScale;\n  if (pixelScale != null) {\n    _targetUnitHeight = null;\n    _minSectionHeight = 0;\n    _minPixelScale = pixelScale;\n  }\n\n  // Handle special cases for hybrid scales (WIP, we need to regularize this)\n  let _axisType = axisType ?? ColumnAxisType.AGE;\n  let ageAxisComponent = CompositeAgeAxis;\n  if (\n    hybridScale?.type === HybridScaleType.ApproximateHeight &&\n    _axisType != ColumnAxisType.AGE\n  ) {\n    // Use approximate height axis for non-age columns if a non-age axis type is requested\n    ageAxisComponent = ApproximateHeightAxis;\n    _axisType = ColumnAxisType.AGE;\n  }\n\n  const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {\n    axisType: _axisType,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    mergeSections,\n    targetUnitHeight: _targetUnitHeight,\n    unconformityHeight,\n    pixelScale,\n    minPixelScale: _minPixelScale,\n    minSectionHeight: _minSectionHeight,\n    windowPadding,\n    collapseSmallUnconformities,\n    // TODO: consider unifying scale and hybridScale options\n    scale,\n    hybridScale,\n  });\n\n  if (sections.length === 0) {\n    return h(\n      \"div.column-container.empty\",\n      h(NonIdealState, {\n        title: \"Empty column\",\n        description: \"No sections found in this column.\",\n        icon: \"warning-sign\",\n      }),\n    );\n  }\n\n  return h(\n    MacrostratColumnDataProvider,\n    {\n      units,\n      sections,\n      totalHeight,\n      axisType: _axisType,\n      allowUnitSelection: showUnitPopover || allowUnitSelection,\n      onUnitSelected,\n      selectedUnit,\n      isTransitioning,\n      hideLabelsWhileTransitioning,\n      ref,\n    },\n    h(ColumnInner, { ageAxisComponent, ...rest }, [\n      children,\n      h.if(showUnitPopover)(UnitSelectionPopover),\n      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),\n    ]),\n  );\n}\n\ninterface ColumnInnerProps extends BaseColumnProps {\n  ageAxisComponent?: ComponentType;\n}\n\nfunction ColumnInner(props: ColumnInnerProps) {\n  const padding = extractPadding(props);\n\n  // TODO: integrate padding vars more closely with the rest of the spacing (right now padding is a bit ad-hoc)\n  const paddingVars: any = {\n    \"--column-padding-top\": `${padding.paddingTop}px`,\n    \"--column-padding-bottom\": `${padding.paddingBottom}px`,\n    \"--column-padding-left\": `${padding.paddingLeft}px`,\n    \"--column-padding-right\": `${padding.paddingRight}px`,\n  };\n\n  const {\n    unitComponent = UnitComponent,\n    unconformityLabels = \"minimal\",\n    showLabels = true,\n    width: _width = 300,\n    columnWidth: _columnWidth = 150,\n    showLabelColumn: _showLabelColumn = true,\n    className,\n    clipUnits = false,\n    children,\n    showTimescale,\n    timescaleLevels,\n    maxInternalColumns,\n    onMouseOver,\n    onClickTimescaleInterval,\n    timescaleIntervalStyle,\n    ageAxisComponent = CompositeAgeAxis,\n  } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  const columnRef = useColumnRef();\n\n  // Coalesce unconformity label setting to a boolean\n  let _timescaleUnconformityLabels = false;\n  let _sectionUnconformityLabels = false;\n  if (unconformityLabels === true || unconformityLabels === \"prominent\") {\n    _sectionUnconformityLabels = true;\n  } else if (unconformityLabels === \"minimal\") {\n    _timescaleUnconformityLabels = true;\n  }\n\n  let width = _width;\n  let columnWidth = _columnWidth;\n  if (columnWidth > width) {\n    columnWidth = width;\n  }\n  let showLabelColumn = _showLabelColumn;\n  if (columnWidth > width - 10) {\n    showLabelColumn = false;\n  }\n\n  let _showTimescale = showTimescale ?? true;\n  if (timescaleLevels != null) {\n    _showTimescale = true;\n  }\n  _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;\n\n  return h(\n    ColumnContainer,\n    {\n      ...useMouseEventHandlers(onMouseOver),\n      style: paddingVars,\n      className,\n    },\n    h(\"div.column\", { ref: columnRef }, [\n      h(ageAxisComponent),\n      h.if(_showTimescale)(CompositeTimescale, {\n        levels: timescaleLevels,\n        unconformityLabels: _timescaleUnconformityLabels,\n        onClickInterval: onClickTimescaleInterval,\n        intervalStyle: timescaleIntervalStyle,\n      }),\n      h(SectionsColumn, {\n        unitComponent,\n        showLabels,\n        width,\n        columnWidth,\n        showLabelColumn,\n        clipUnits,\n        unconformityLabels: _sectionUnconformityLabels,\n        maxInternalColumns,\n      }),\n      children,\n    ]),\n  );\n}\n\ntype ColumnMouseOverHandler = (\n  unit: UnitLong | null,\n  height: number | null,\n  evt: MouseEvent,\n) => void;\n\nfunction useMouseEventHandlers(\n  _onMouseOver: ColumnMouseOverHandler | null = null,\n) {\n  /** Click event handler */\n\n  // Click handler for unit selection\n  const dispatch = useUnitSelectionDispatch();\n  const onClick = useCallback(\n    (evt) => {\n      dispatch?.(null, null);\n    },\n    [dispatch],\n  );\n\n  /** Hover event handlers */\n  const scale = useCompositeScale();\n\n  const onMouseOver = useCallback(\n    (evt) => {\n      const height = scale.invert(\n        evt.clientY - evt.currentTarget.getBoundingClientRect().top,\n      );\n      _onMouseOver?.(null, height, evt);\n    },\n    [scale, _onMouseOver],\n  );\n\n  const onMouseOut = useCallback(() => {\n    _onMouseOver?.(null, null, null);\n  }, [_onMouseOver]);\n\n  if (_onMouseOver == null) {\n    return {\n      onClick,\n      onMouseOver: undefined,\n      onMouseMove: undefined,\n      onMouseOut: undefined,\n    };\n  }\n\n  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };\n}\n\nexport interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ColumnContainer(props: ColumnContainerProps) {\n  const { className, ...rest } = props;\n  const darkMode = useDarkMode();\n\n  return h(Box, {\n    className: classNames(\n      className,\n      {\n        \"dark-mode\": darkMode?.isEnabled ?? false,\n      },\n      \"column-container\",\n    ),\n    ...rest,\n  });\n}\n\nexport function ColumnBasicInfo({\n  data,\n  showColumnID = true,\n  showReferences = true,\n}) {\n  if (data == null) return null;\n  return h(\"div.column-info\", [\n    h(\"div.column-title-row\", [\n      h(\"h2\", data.col_name),\n      h.if(showColumnID)(\"h4\", h(Identifier, { id: data.col_id })),\n    ]),\n    h(DataField, { row: true, label: \"Group\", value: data.col_group }),\n    h.if(showReferences)(ReferencesField, {\n      refs: data.refs,\n      inline: false,\n      row: false,\n      className: \"column-refs\",\n    }),\n  ]);\n}\n"],"names":["ColumnAxisType","CompositeAgeAxis","HybridScaleType","ApproximateHeightAxis","usePreparedColumnUnits","h","NonIdealState","MacrostratColumnDataProvider","UnitSelectionPopover","UnitKeyboardNavigation","extractPadding","UnitComponent","useMacrostratColumnData","useColumnRef","CompositeTimescale","SectionsColumn","useUnitSelectionDispatch","useCallback","useCompositeScale","useDarkMode","Box","classNames","Identifier","DataField","ReferencesField"],"mappings":"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"}

package/dist/column.d.ts

@@ -4,6 +4,7 @@ import { ColumnRef } from './data-provider';
 import { SectionSharedProps } from './section';
 import { MergeSectionsMode, ColumnHeightScaleOptions } from './prepare-units';
 import { UnitLong } from '@macrostrat/api-types';
+import { TimescaleClickHandler, IntervalStyleBuilder } from '@macrostrat/timescale';
 import { ScaleContinuousNumeric } from 'd3-scale';
 interface BaseColumnProps extends Omit<SectionSharedProps, "unconformityLabels"> {
     className?: string;
@@ -13,6 +14,10 @@ interface BaseColumnProps extends Omit<SectionSharedProps, "unconformityLabels">
     maxInternalColumns?: number;
     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, height: number | null, evt: MouseEvent) => void;
 }
@@ -30,6 +35,12 @@ export interface ColumnProps extends Padding, BaseColumnProps, ColumnHeightScale
     onUnitSelected?: (unitID: number | null, unit: any) => void;
     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>;
 }
 export declare function Column(props: ColumnProps): import('react').ReactElement<import('react').FunctionComponentElement<import('@blueprintjs/core').NonIdealStateProps>, string | import('react').JSXElementConstructor<any>> | import('react').FunctionComponentElement<import('./data-provider').ColumnDataProviderProps<import('@macrostrat/api-types').BaseUnit>>;

package/dist/column.js

@@ -32,11 +32,14 @@ function Column(props) {
     pixelScale,
     minPixelScale = 0.2,
     minSectionHeight = 50,
+    windowPadding = 0,
     collapseSmallUnconformities = true,
     allowUnitSelection = false,
     hybridScale,
     scale,
     axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
     ref,
     ...rest
   } = props;
@@ -66,6 +69,7 @@ function Column(props) {
     pixelScale,
     minPixelScale: _minPixelScale,
     minSectionHeight: _minSectionHeight,
+    windowPadding,
     collapseSmallUnconformities,
     // TODO: consider unifying scale and hybridScale options
     scale,
@@ -91,6 +95,8 @@ function Column(props) {
       allowUnitSelection: showUnitPopover || allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
       ref
     },
     h(ColumnInner, { ageAxisComponent, ...rest }, [
@@ -122,6 +128,8 @@ function ColumnInner(props) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
     ageAxisComponent = CompositeAgeAxis
   } = props;
   const { axisType } = useMacrostratColumnData();
@@ -158,7 +166,9 @@ function ColumnInner(props) {
       h(ageAxisComponent),
       h.if(_showTimescale)(CompositeTimescale, {
         levels: timescaleLevels,
-        unconformityLabels: _timescaleUnconformityLabels
+        unconformityLabels: _timescaleUnconformityLabels,
+        onClickInterval: onClickTimescaleInterval,
+        intervalStyle: timescaleIntervalStyle
       }),
       h(SectionsColumn, {
         unitComponent,

package/dist/column.js.map

@@ -1 +1 @@
-{"version":3,"file":"column.js","sources":["../src/column.ts"],"sourcesContent":["import { ColumnAxisType } from \"@macrostrat/column-components\";\nimport {\n  Box,\n  extractPadding,\n  Padding,\n  useDarkMode,\n} from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport {\n  HTMLAttributes,\n  useCallback,\n  CSSProperties,\n  ComponentType,\n  RefObject,\n} from \"react\";\nimport h from \"./column.module.sass\";\nimport { UnitComponent } from \"./units\";\nimport {\n  ColumnRef,\n  UnitKeyboardNavigation,\n  useColumnRef,\n  useUnitSelectionDispatch,\n} from \"./data-provider\";\n\nimport {\n  Identifier,\n  ReferencesField,\n  UnitSelectionPopover,\n} from \"./unit-details\";\nimport {\n  MacrostratColumnDataProvider,\n  useCompositeScale,\n  useMacrostratColumnData,\n} from \"./data-provider\";\nimport {\n  SectionSharedProps,\n  CompositeTimescale,\n  SectionsColumn,\n} from \"./section\";\nimport { ApproximateHeightAxis, CompositeAgeAxis } from \"./age-axis\";\nimport {\n  MergeSectionsMode,\n  usePreparedColumnUnits,\n  HybridScaleType,\n  ColumnHeightScaleOptions,\n} from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nimport { NonIdealState } from \"@blueprintjs/core\";\nimport { DataField } from \"@macrostrat/data-components\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\n\ninterface BaseColumnProps extends Omit<\n  SectionSharedProps,\n  \"unconformityLabels\"\n> {\n  className?: string;\n  showLabelColumn?: boolean;\n  keyboardNavigation?: boolean;\n  showLabels?: boolean;\n  maxInternalColumns?: number;\n  // Timescale properties\n  showTimescale?: boolean;\n  timescaleLevels?: number | [number, number];\n  unconformityLabels?: boolean | UnconformityLabelPlacement;\n  onMouseOver?: (\n    unit: UnitLong | null,\n    height: number | null,\n    evt: MouseEvent,\n  ) => void;\n}\n\nexport type UnconformityLabelPlacement = \"minimal\" | \"prominent\" | \"none\";\n\nexport interface ColumnProps\n  extends Padding, BaseColumnProps, ColumnHeightScaleOptions {\n  // Macrostrat units\n  units: UnitLong[];\n  t_age?: number;\n  b_age?: number;\n  t_pos?: number;\n  b_pos?: number;\n  mergeSections?: MergeSectionsMode;\n  showUnitPopover?: boolean;\n  allowUnitSelection?: boolean;\n  selectedUnit?: number | null;\n  onUnitSelected?: (unitID: number | null, unit: any) => void;\n  // Unconformity height in pixels\n  unconformityHeight?: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n  ref?: RefObject<ColumnRef>;\n}\n\nexport function Column(props: ColumnProps) {\n  const {\n    showUnitPopover = false,\n    keyboardNavigation = false,\n    mergeSections,\n    onUnitSelected,\n    selectedUnit,\n    children,\n    units: rawUnits,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    unconformityHeight = 30,\n    targetUnitHeight = 20,\n    pixelScale,\n    minPixelScale = 0.2,\n    minSectionHeight = 50,\n    collapseSmallUnconformities = true,\n    allowUnitSelection = false,\n    hybridScale,\n    scale,\n    axisType,\n    ref,\n    ...rest\n  } = props;\n\n  /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies\n   * standardization of scales in all sections */\n  let _targetUnitHeight: number | null = targetUnitHeight;\n  let _minSectionHeight = minSectionHeight;\n  let _minPixelScale = minPixelScale;\n  if (pixelScale != null) {\n    _targetUnitHeight = null;\n    _minSectionHeight = 0;\n    _minPixelScale = pixelScale;\n  }\n\n  // Handle special cases for hybrid scales (WIP, we need to regularize this)\n  let _axisType = axisType ?? ColumnAxisType.AGE;\n  let ageAxisComponent = CompositeAgeAxis;\n  if (\n    hybridScale?.type === HybridScaleType.ApproximateHeight &&\n    _axisType != ColumnAxisType.AGE\n  ) {\n    // Use approximate height axis for non-age columns if a non-age axis type is requested\n    ageAxisComponent = ApproximateHeightAxis;\n    _axisType = ColumnAxisType.AGE;\n  }\n\n  const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {\n    axisType: _axisType,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    mergeSections,\n    targetUnitHeight: _targetUnitHeight,\n    unconformityHeight,\n    pixelScale,\n    minPixelScale: _minPixelScale,\n    minSectionHeight: _minSectionHeight,\n    collapseSmallUnconformities,\n    // TODO: consider unifying scale and hybridScale options\n    scale,\n    hybridScale,\n  });\n\n  if (sections.length === 0) {\n    return h(\n      \"div.column-container.empty\",\n      h(NonIdealState, {\n        title: \"Empty column\",\n        description: \"No sections found in this column.\",\n        icon: \"warning-sign\",\n      }),\n    );\n  }\n\n  return h(\n    MacrostratColumnDataProvider,\n    {\n      units,\n      sections,\n      totalHeight,\n      axisType: _axisType,\n      allowUnitSelection: showUnitPopover || allowUnitSelection,\n      onUnitSelected,\n      selectedUnit,\n      ref,\n    },\n    h(ColumnInner, { ageAxisComponent, ...rest }, [\n      children,\n      h.if(showUnitPopover)(UnitSelectionPopover),\n      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),\n    ]),\n  );\n}\n\ninterface ColumnInnerProps extends BaseColumnProps {\n  ageAxisComponent?: ComponentType;\n}\n\nfunction ColumnInner(props: ColumnInnerProps) {\n  const padding = extractPadding(props);\n\n  // TODO: integrate padding vars more closely with the rest of the spacing (right now padding is a bit ad-hoc)\n  const paddingVars: any = {\n    \"--column-padding-top\": `${padding.paddingTop}px`,\n    \"--column-padding-bottom\": `${padding.paddingBottom}px`,\n    \"--column-padding-left\": `${padding.paddingLeft}px`,\n    \"--column-padding-right\": `${padding.paddingRight}px`,\n  };\n\n  const {\n    unitComponent = UnitComponent,\n    unconformityLabels = \"minimal\",\n    showLabels = true,\n    width: _width = 300,\n    columnWidth: _columnWidth = 150,\n    showLabelColumn: _showLabelColumn = true,\n    className,\n    clipUnits = false,\n    children,\n    showTimescale,\n    timescaleLevels,\n    maxInternalColumns,\n    onMouseOver,\n    ageAxisComponent = CompositeAgeAxis,\n  } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  const columnRef = useColumnRef();\n\n  // Coalesce unconformity label setting to a boolean\n  let _timescaleUnconformityLabels = false;\n  let _sectionUnconformityLabels = false;\n  if (unconformityLabels === true || unconformityLabels === \"prominent\") {\n    _sectionUnconformityLabels = true;\n  } else if (unconformityLabels === \"minimal\") {\n    _timescaleUnconformityLabels = true;\n  }\n\n  let width = _width;\n  let columnWidth = _columnWidth;\n  if (columnWidth > width) {\n    columnWidth = width;\n  }\n  let showLabelColumn = _showLabelColumn;\n  if (columnWidth > width - 10) {\n    showLabelColumn = false;\n  }\n\n  let _showTimescale = showTimescale ?? true;\n  if (timescaleLevels != null) {\n    _showTimescale = true;\n  }\n  _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;\n\n  return h(\n    ColumnContainer,\n    {\n      ...useMouseEventHandlers(onMouseOver),\n      style: paddingVars,\n      className,\n    },\n    h(\"div.column\", { ref: columnRef }, [\n      h(ageAxisComponent),\n      h.if(_showTimescale)(CompositeTimescale, {\n        levels: timescaleLevels,\n        unconformityLabels: _timescaleUnconformityLabels,\n      }),\n      h(SectionsColumn, {\n        unitComponent,\n        showLabels,\n        width,\n        columnWidth,\n        showLabelColumn,\n        clipUnits,\n        unconformityLabels: _sectionUnconformityLabels,\n        maxInternalColumns,\n      }),\n      children,\n    ]),\n  );\n}\n\ntype ColumnMouseOverHandler = (\n  unit: UnitLong | null,\n  height: number | null,\n  evt: MouseEvent,\n) => void;\n\nfunction useMouseEventHandlers(\n  _onMouseOver: ColumnMouseOverHandler | null = null,\n) {\n  /** Click event handler */\n\n  // Click handler for unit selection\n  const dispatch = useUnitSelectionDispatch();\n  const onClick = useCallback(\n    (evt) => {\n      dispatch?.(null, null);\n    },\n    [dispatch],\n  );\n\n  /** Hover event handlers */\n  const scale = useCompositeScale();\n\n  const onMouseOver = useCallback(\n    (evt) => {\n      const height = scale.invert(\n        evt.clientY - evt.currentTarget.getBoundingClientRect().top,\n      );\n      _onMouseOver?.(null, height, evt);\n    },\n    [scale, _onMouseOver],\n  );\n\n  const onMouseOut = useCallback(() => {\n    _onMouseOver?.(null, null, null);\n  }, [_onMouseOver]);\n\n  if (_onMouseOver == null) {\n    return {\n      onClick,\n      onMouseOver: undefined,\n      onMouseMove: undefined,\n      onMouseOut: undefined,\n    };\n  }\n\n  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };\n}\n\nexport interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ColumnContainer(props: ColumnContainerProps) {\n  const { className, ...rest } = props;\n  const darkMode = useDarkMode();\n\n  return h(Box, {\n    className: classNames(\n      className,\n      {\n        \"dark-mode\": darkMode?.isEnabled ?? false,\n      },\n      \"column-container\",\n    ),\n    ...rest,\n  });\n}\n\nexport function ColumnBasicInfo({\n  data,\n  showColumnID = true,\n  showReferences = true,\n}) {\n  if (data == null) return null;\n  return h(\"div.column-info\", [\n    h(\"div.column-title-row\", [\n      h(\"h2\", data.col_name),\n      h.if(showColumnID)(\"h4\", h(Identifier, { id: data.col_id })),\n    ]),\n    h(DataField, { row: true, label: \"Group\", value: data.col_group }),\n    h.if(showReferences)(ReferencesField, {\n      refs: data.refs,\n      inline: false,\n      row: false,\n      className: \"column-refs\",\n    }),\n  ]);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"column.js","sources":["../src/column.ts"],"sourcesContent":["import { ColumnAxisType } from \"@macrostrat/column-components\";\nimport {\n  Box,\n  extractPadding,\n  Padding,\n  useDarkMode,\n} from \"@macrostrat/ui-components\";\nimport classNames from \"classnames\";\nimport {\n  HTMLAttributes,\n  useCallback,\n  CSSProperties,\n  ComponentType,\n  RefObject,\n} from \"react\";\nimport h from \"./column.module.sass\";\nimport { UnitComponent } from \"./units\";\nimport {\n  ColumnRef,\n  UnitKeyboardNavigation,\n  useColumnRef,\n  useUnitSelectionDispatch,\n} from \"./data-provider\";\n\nimport {\n  Identifier,\n  ReferencesField,\n  UnitSelectionPopover,\n} from \"./unit-details\";\nimport {\n  MacrostratColumnDataProvider,\n  useCompositeScale,\n  useMacrostratColumnData,\n} from \"./data-provider\";\nimport {\n  SectionSharedProps,\n  CompositeTimescale,\n  SectionsColumn,\n} from \"./section\";\nimport { ApproximateHeightAxis, CompositeAgeAxis } from \"./age-axis\";\nimport {\n  MergeSectionsMode,\n  usePreparedColumnUnits,\n  HybridScaleType,\n  ColumnHeightScaleOptions,\n} from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nimport type {\n  TimescaleClickHandler,\n  IntervalStyleBuilder,\n} from \"@macrostrat/timescale\";\nimport { NonIdealState } from \"@blueprintjs/core\";\nimport { DataField } from \"@macrostrat/data-components\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\n\ninterface BaseColumnProps extends Omit<\n  SectionSharedProps,\n  \"unconformityLabels\"\n> {\n  className?: string;\n  showLabelColumn?: boolean;\n  keyboardNavigation?: boolean;\n  showLabels?: boolean;\n  maxInternalColumns?: number;\n  // Timescale properties\n  showTimescale?: boolean;\n  timescaleLevels?: number | [number, number];\n  /** Called when a timescale interval is clicked (e.g. to zoom the age range). */\n  onClickTimescaleInterval?: TimescaleClickHandler;\n  /** Per-interval style for the timescale (e.g. to bold the selected interval). */\n  timescaleIntervalStyle?: IntervalStyleBuilder;\n  unconformityLabels?: boolean | UnconformityLabelPlacement;\n  onMouseOver?: (\n    unit: UnitLong | null,\n    height: number | null,\n    evt: MouseEvent,\n  ) => void;\n}\n\nexport type UnconformityLabelPlacement = \"minimal\" | \"prominent\" | \"none\";\n\nexport interface ColumnProps\n  extends Padding, BaseColumnProps, ColumnHeightScaleOptions {\n  // Macrostrat units\n  units: UnitLong[];\n  t_age?: number;\n  b_age?: number;\n  t_pos?: number;\n  b_pos?: number;\n  mergeSections?: MergeSectionsMode;\n  showUnitPopover?: boolean;\n  allowUnitSelection?: boolean;\n  selectedUnit?: number | null;\n  onUnitSelected?: (unitID: number | null, unit: any) => void;\n  // Unconformity height in pixels\n  unconformityHeight?: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n  /** True while the age window is animating (e.g. from `useAnimatedAgeWindow`),\n   * so per-frame label/pattern recalculation can be skipped. */\n  isTransitioning?: boolean;\n  /** Hide unit labels while transitioning (perf escape hatch; default false —\n   * labels stay visible through the animation). */\n  hideLabelsWhileTransitioning?: boolean;\n  ref?: RefObject<ColumnRef>;\n}\n\nexport function Column(props: ColumnProps) {\n  const {\n    showUnitPopover = false,\n    keyboardNavigation = false,\n    mergeSections,\n    onUnitSelected,\n    selectedUnit,\n    children,\n    units: rawUnits,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    unconformityHeight = 30,\n    targetUnitHeight = 20,\n    pixelScale,\n    minPixelScale = 0.2,\n    minSectionHeight = 50,\n    windowPadding = 0,\n    collapseSmallUnconformities = true,\n    allowUnitSelection = false,\n    hybridScale,\n    scale,\n    axisType,\n    isTransitioning,\n    hideLabelsWhileTransitioning,\n    ref,\n    ...rest\n  } = props;\n\n  /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies\n   * standardization of scales in all sections */\n  let _targetUnitHeight: number | null = targetUnitHeight;\n  let _minSectionHeight = minSectionHeight;\n  let _minPixelScale = minPixelScale;\n  if (pixelScale != null) {\n    _targetUnitHeight = null;\n    _minSectionHeight = 0;\n    _minPixelScale = pixelScale;\n  }\n\n  // Handle special cases for hybrid scales (WIP, we need to regularize this)\n  let _axisType = axisType ?? ColumnAxisType.AGE;\n  let ageAxisComponent = CompositeAgeAxis;\n  if (\n    hybridScale?.type === HybridScaleType.ApproximateHeight &&\n    _axisType != ColumnAxisType.AGE\n  ) {\n    // Use approximate height axis for non-age columns if a non-age axis type is requested\n    ageAxisComponent = ApproximateHeightAxis;\n    _axisType = ColumnAxisType.AGE;\n  }\n\n  const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {\n    axisType: _axisType,\n    t_age,\n    b_age,\n    t_pos,\n    b_pos,\n    mergeSections,\n    targetUnitHeight: _targetUnitHeight,\n    unconformityHeight,\n    pixelScale,\n    minPixelScale: _minPixelScale,\n    minSectionHeight: _minSectionHeight,\n    windowPadding,\n    collapseSmallUnconformities,\n    // TODO: consider unifying scale and hybridScale options\n    scale,\n    hybridScale,\n  });\n\n  if (sections.length === 0) {\n    return h(\n      \"div.column-container.empty\",\n      h(NonIdealState, {\n        title: \"Empty column\",\n        description: \"No sections found in this column.\",\n        icon: \"warning-sign\",\n      }),\n    );\n  }\n\n  return h(\n    MacrostratColumnDataProvider,\n    {\n      units,\n      sections,\n      totalHeight,\n      axisType: _axisType,\n      allowUnitSelection: showUnitPopover || allowUnitSelection,\n      onUnitSelected,\n      selectedUnit,\n      isTransitioning,\n      hideLabelsWhileTransitioning,\n      ref,\n    },\n    h(ColumnInner, { ageAxisComponent, ...rest }, [\n      children,\n      h.if(showUnitPopover)(UnitSelectionPopover),\n      h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),\n    ]),\n  );\n}\n\ninterface ColumnInnerProps extends BaseColumnProps {\n  ageAxisComponent?: ComponentType;\n}\n\nfunction ColumnInner(props: ColumnInnerProps) {\n  const padding = extractPadding(props);\n\n  // TODO: integrate padding vars more closely with the rest of the spacing (right now padding is a bit ad-hoc)\n  const paddingVars: any = {\n    \"--column-padding-top\": `${padding.paddingTop}px`,\n    \"--column-padding-bottom\": `${padding.paddingBottom}px`,\n    \"--column-padding-left\": `${padding.paddingLeft}px`,\n    \"--column-padding-right\": `${padding.paddingRight}px`,\n  };\n\n  const {\n    unitComponent = UnitComponent,\n    unconformityLabels = \"minimal\",\n    showLabels = true,\n    width: _width = 300,\n    columnWidth: _columnWidth = 150,\n    showLabelColumn: _showLabelColumn = true,\n    className,\n    clipUnits = false,\n    children,\n    showTimescale,\n    timescaleLevels,\n    maxInternalColumns,\n    onMouseOver,\n    onClickTimescaleInterval,\n    timescaleIntervalStyle,\n    ageAxisComponent = CompositeAgeAxis,\n  } = props;\n\n  const { axisType } = useMacrostratColumnData();\n\n  const columnRef = useColumnRef();\n\n  // Coalesce unconformity label setting to a boolean\n  let _timescaleUnconformityLabels = false;\n  let _sectionUnconformityLabels = false;\n  if (unconformityLabels === true || unconformityLabels === \"prominent\") {\n    _sectionUnconformityLabels = true;\n  } else if (unconformityLabels === \"minimal\") {\n    _timescaleUnconformityLabels = true;\n  }\n\n  let width = _width;\n  let columnWidth = _columnWidth;\n  if (columnWidth > width) {\n    columnWidth = width;\n  }\n  let showLabelColumn = _showLabelColumn;\n  if (columnWidth > width - 10) {\n    showLabelColumn = false;\n  }\n\n  let _showTimescale = showTimescale ?? true;\n  if (timescaleLevels != null) {\n    _showTimescale = true;\n  }\n  _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;\n\n  return h(\n    ColumnContainer,\n    {\n      ...useMouseEventHandlers(onMouseOver),\n      style: paddingVars,\n      className,\n    },\n    h(\"div.column\", { ref: columnRef }, [\n      h(ageAxisComponent),\n      h.if(_showTimescale)(CompositeTimescale, {\n        levels: timescaleLevels,\n        unconformityLabels: _timescaleUnconformityLabels,\n        onClickInterval: onClickTimescaleInterval,\n        intervalStyle: timescaleIntervalStyle,\n      }),\n      h(SectionsColumn, {\n        unitComponent,\n        showLabels,\n        width,\n        columnWidth,\n        showLabelColumn,\n        clipUnits,\n        unconformityLabels: _sectionUnconformityLabels,\n        maxInternalColumns,\n      }),\n      children,\n    ]),\n  );\n}\n\ntype ColumnMouseOverHandler = (\n  unit: UnitLong | null,\n  height: number | null,\n  evt: MouseEvent,\n) => void;\n\nfunction useMouseEventHandlers(\n  _onMouseOver: ColumnMouseOverHandler | null = null,\n) {\n  /** Click event handler */\n\n  // Click handler for unit selection\n  const dispatch = useUnitSelectionDispatch();\n  const onClick = useCallback(\n    (evt) => {\n      dispatch?.(null, null);\n    },\n    [dispatch],\n  );\n\n  /** Hover event handlers */\n  const scale = useCompositeScale();\n\n  const onMouseOver = useCallback(\n    (evt) => {\n      const height = scale.invert(\n        evt.clientY - evt.currentTarget.getBoundingClientRect().top,\n      );\n      _onMouseOver?.(null, height, evt);\n    },\n    [scale, _onMouseOver],\n  );\n\n  const onMouseOut = useCallback(() => {\n    _onMouseOver?.(null, null, null);\n  }, [_onMouseOver]);\n\n  if (_onMouseOver == null) {\n    return {\n      onClick,\n      onMouseOver: undefined,\n      onMouseMove: undefined,\n      onMouseOut: undefined,\n    };\n  }\n\n  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };\n}\n\nexport interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ColumnContainer(props: ColumnContainerProps) {\n  const { className, ...rest } = props;\n  const darkMode = useDarkMode();\n\n  return h(Box, {\n    className: classNames(\n      className,\n      {\n        \"dark-mode\": darkMode?.isEnabled ?? false,\n      },\n      \"column-container\",\n    ),\n    ...rest,\n  });\n}\n\nexport function ColumnBasicInfo({\n  data,\n  showColumnID = true,\n  showReferences = true,\n}) {\n  if (data == null) return null;\n  return h(\"div.column-info\", [\n    h(\"div.column-title-row\", [\n      h(\"h2\", data.col_name),\n      h.if(showColumnID)(\"h4\", h(Identifier, { id: data.col_id })),\n    ]),\n    h(DataField, { row: true, label: \"Group\", value: data.col_group }),\n    h.if(showReferences)(ReferencesField, {\n      refs: data.refs,\n      inline: false,\n      row: false,\n      className: \"column-refs\",\n    }),\n  ]);\n}\n"],"names":[],"mappings":"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"}