@macrostrat/column-views 3.6.1 → 3.9.0

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.module.sass

@@ -57,6 +57,12 @@ body:global(.dark-mode) .column-container
     fill: var(--selection-overlay-color, red)
     fill-opacity: var(--selection-overlay-opacity, 0.5)
 
+  // Units sharing a stratigraphic name with the selection: a subtler highlight
+  .linked-overlay
+    fill: var(--linked-overlay-color, var(--selection-overlay-color, red))
+    fill-opacity: var(--linked-overlay-opacity, 0.18)
+    pointer-events: none
+
   g.lithology-column use.frame
     stroke: var(--column-stroke-color)
     stroke-width: 1.5px !important

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.module.sass

@@ -105,11 +105,16 @@ $map-size-inset: 12em
 
 .main-chart
   position: relative
+  grid-column: 2
+  grid-row: 2
 
 .correlation-chart-inner
-  display: flex
-  flex-direction: row
+  display: grid
+  // [age axis] [columns], with an optional header row above
+  grid-template-columns: auto auto
+  grid-template-rows: auto auto
   position: relative
+  width: fit-content
 
 .age-axis-container
   display: flex
@@ -117,6 +122,45 @@ $map-size-inset: 12em
   position: sticky
   left: 0
   z-index: 100
+  grid-column: 1
+  grid-row: 2
   padding-left: 1em
   padding-right: 2px
   background-color: var(--panel-secondary-background-color)
+
+// Arbitrary content rendered above each column, aligned with the columns below.
+.column-header-spacer
+  grid-column: 1
+  grid-row: 1
+  // Anchor for absolutely-positioned content (e.g. a zoom pill) so it can sit
+  // above the timescale without widening the axis column / shifting the chart
+  position: relative
+
+.column-header-row
+  grid-column: 2
+  grid-row: 1
+  display: flex
+  flex-direction: row
+  // Bottom-anchor cells so all labels share the neatline
+  align-items: flex-end
+  // Pin to the top while scrolling. It stays in flow (grid row 1) so it
+  // reserves space above the columns, keeping them aligned with the age axis.
+  position: sticky
+  top: 0
+  // `position: sticky` forms a stacking context; leaving z-index at auto keeps
+  // the row below later-painted floating UI (maps, popovers).
+  // Neatline separating the headers from the columns below
+  border-bottom: 1px solid var(--column-stroke-color, var(--text-color))
+  background-color: var(--panel-secondary-background-color)
+
+  .column-header-cell
+    box-sizing: border-box
+    display: flex
+    flex-direction: column
+    // Bottom-anchor content (nearest the columns), stretched to the column
+    // width so text wraps within it
+    justify-content: flex-end
+    align-items: stretch
+    // Cap very long content; excess is clipped
+    max-height: var(--column-header-max-height, 300px)
+    overflow: hidden

package/src/correlation-chart/main.ts

@@ -6,8 +6,7 @@ import {
   useColumnRef,
 } from "../data-provider";
 import { UnitDetailsFeature, UnitSelectionPopover } from "../unit-details";
-import hyper from "@macrostrat/hyper";
-import styles from "./main.module.sass";
+import h from "./main.module.sass";
 import { useMemo } from "react";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { CompositeTimescaleCore } from "../section";
@@ -31,12 +30,30 @@ import {
 import { ColoredUnitComponent } from "../units";
 import { UnitBoxes } from "../units/boxes";
 import { ColumnContainer } from "../column";
-import { ColumnData } from "../data-provider";
+import type { ColumnData } from "@macrostrat/data-provider";
 import { BaseUnit } from "@macrostrat/api-types";
 import { ScaleContinuousNumeric } from "d3-scale";
 import { ExtUnit } from "../prepare-units/types";
+import type { TimescaleClickHandler } from "@macrostrat/timescale";
+import { useMacrostratColumnInfo } from "@macrostrat/data-provider";
 
-const h = hyper.styled(styles);
+/** Standard props passed to a `columnHeaderComponent`. Everything a header
+ * needs is provided here, so the component can be a pure function of its props
+ * (no hooks required). Column-level hover/click are handled by the chart. */
+export interface ColumnHeaderProps {
+  /** The column data (units + identifier) for this column */
+  column: ColumnData;
+  /** The column's ID (col_id) */
+  columnID: number;
+  /** The column's index (left-to-right) within the chart */
+  columnIndex: number;
+  /** The units within the column */
+  units: ExtUnit[];
+  /** The rendered width of the column, in pixels */
+  width: number;
+  /** The column's name, resolved from column metadata when available */
+  columnName?: string | null;
+}
 
 export interface CorrelationChartProps extends CorrelationChartSettings {
   data: ColumnData[];
@@ -47,9 +64,40 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   selectedUnit?: number | null;
   showUnitPopover?: boolean;
   unitComponent?: any;
+  /** Arbitrary content (e.g. column title and/or ID) rendered above each column */
+  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;
+  /** 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;
+  /** Called when the pointer enters/leaves a column (header or body). Passes
+   * the column ID, or null on leave. */
+  onColumnMouseOver?: (columnID: number | null) => void;
+  /** Called when a column header is clicked (e.g. to frame it on a map) */
+  onColumnClick?: (columnID: number) => void;
 }
 
+/** Horizontal padding of the main chart SVG. Column headers are aligned to
+ * 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);
@@ -71,19 +119,19 @@ export function CorrelationChart({
   selectedUnit,
   onUnitSelected,
   unitComponent,
+  columnHeaderComponent,
+  axisTopContent,
+  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)]);
@@ -115,9 +163,9 @@ export function CorrelationChart({
       { selectedUnit, onUnitSelected, units },
       h(ChartArea, [
         h(TimescaleColumn, {
-          key: "timescale",
           scaleInfo,
           unconformityLabels,
+          onClickInterval: onClickTimescaleInterval,
         }),
         h(MainChartArea, [
           h(
@@ -126,7 +174,7 @@ export function CorrelationChart({
               className,
               innerWidth: mainWidth,
               height: scaleInfo.totalHeight,
-              paddingH: 4,
+              paddingH: chartPaddingH,
             },
             packages.map((pkg, i) => {
               const { offset, domain, pixelScale, scale, key } =
@@ -141,6 +189,9 @@ export function CorrelationChart({
                 pixelScale,
                 scale,
                 unitComponent,
+                onColumnMouseOver,
+                isTransitioning,
+                hideLabelsWhileTransitioning,
               });
             }),
           ),
@@ -150,6 +201,17 @@ export function CorrelationChart({
           // Navigation only works within a column for now...
           h(UnitKeyboardNavigation, { columnData: data }),
         ]),
+        // Rendered last so the sticky header paints above the unit boxes
+        // (positioned siblings paint in document order at the same z-index)
+        h(ColumnHeaderRow, {
+          data,
+          columnWidth,
+          columnSpacing,
+          columnHeaderComponent,
+          axisTopContent,
+          onColumnMouseOver,
+          onColumnClick,
+        }),
       ]),
     ),
   );
@@ -164,6 +226,9 @@ function Package({
   domain,
   pixelScale,
   scale,
+  onColumnMouseOver,
+  isTransitioning,
+  hideLabelsWhileTransitioning,
 }) {
   return h("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
@@ -172,6 +237,7 @@ function Package({
       columnData.map((data, i) => {
         return h(Column, {
           units: data.units,
+          columnID: data.columnID,
           unitComponent,
           width: columnWidth,
           key: i,
@@ -179,6 +245,9 @@ function Package({
           pixelScale,
           scale,
           offsetLeft: i * (columnWidth + columnSpacing),
+          onColumnMouseOver,
+          isTransitioning,
+          hideLabelsWhileTransitioning,
         });
       }),
     ]),
@@ -187,6 +256,7 @@ function Package({
 
 interface ColumnProps {
   units: ExtUnit[];
+  columnID?: number;
   unitComponent?: React.FunctionComponent<any>;
   unitComponentProps?: any;
   showLabels?: boolean;
@@ -198,17 +268,24 @@ interface ColumnProps {
   domain: [number, number];
   pixelScale: number;
   scale?: ScaleContinuousNumeric<number, number>;
+  onColumnMouseOver?: (columnID: number | null) => void;
+  isTransitioning?: boolean;
+  hideLabelsWhileTransitioning?: boolean;
 }
 
 function Column(props: ColumnProps) {
   const {
     units,
+    columnID,
     width = 150,
     offsetLeft,
     domain,
     pixelScale,
     scale,
     unitComponent = ColoredUnitComponent,
+    onColumnMouseOver,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
   } = props;
 
   const columnWidth = width;
@@ -217,10 +294,19 @@ function Column(props: ColumnProps) {
     return null;
   }
 
+  const hoverHandlers =
+    onColumnMouseOver != null && columnID != null
+      ? {
+          onMouseEnter: () => onColumnMouseOver(columnID),
+          onMouseLeave: () => onColumnMouseOver(null),
+        }
+      : {};
+
   return h(
     "g.section",
     {
       transform: `translate(${offsetLeft} 0)`,
+      ...hoverHandlers,
     },
     h(
       ColumnProvider,
@@ -231,11 +317,12 @@ function Column(props: ColumnProps) {
         scale,
         pixelsPerMeter: pixelScale, // Actually pixels per myr
         axisType: ColumnAxisType.AGE,
+        isTransitioning,
+        hideLabelsWhileTransitioning,
       },
       h(UnitBoxes, {
         unitComponent,
         unitComponentProps: {
-          nColumns: 2,
           width: columnWidth,
           showLabel: true,
         },
@@ -322,16 +409,122 @@ function ChartArea({ children }) {
   );
 }
 
+interface ColumnHeaderRowProps {
+  data: ColumnData[];
+  columnWidth: number;
+  columnSpacing: number;
+  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;
+  axisTopContent?: React.ReactNode;
+  onColumnMouseOver?: (columnID: number | null) => void;
+  onColumnClick?: (columnID: number) => void;
+}
+
+function ColumnHeaderRow({
+  data,
+  columnWidth,
+  columnSpacing,
+  columnHeaderComponent,
+  axisTopContent,
+  onColumnMouseOver,
+  onColumnClick,
+}: ColumnHeaderRowProps) {
+  /** The top grid row: arbitrary content above the timescale axis (top-left)
+   * and, when a header component is provided, per-column headers aligned with
+   * the columns. Collapses to nothing when neither is present. */
+  const Component = columnHeaderComponent;
+  if (Component == null && axisTopContent == null) {
+    return null;
+  }
+
+  return h([
+    h("div.column-header-spacer", axisTopContent),
+    h.if(Component != null)(
+      "div.column-header-row",
+      {
+        style: {
+          paddingLeft: chartPaddingH,
+          paddingRight: chartPaddingH,
+          gap: columnSpacing,
+        },
+      },
+      data.map((column, i) => {
+        return h(ColumnHeaderCell, {
+          key: column.columnID ?? i,
+          column,
+          columnIndex: i,
+          columnWidth,
+          Component: Component!,
+          onColumnMouseOver,
+          onColumnClick,
+        });
+      }),
+    ),
+  ]);
+}
+
+function ColumnHeaderCell({
+  column,
+  columnIndex,
+  columnWidth,
+  Component,
+  onColumnMouseOver,
+  onColumnClick,
+}: {
+  column: ColumnData;
+  columnIndex: number;
+  columnWidth: number;
+  Component: React.ComponentType<ColumnHeaderProps>;
+  onColumnMouseOver?: (columnID: number | null) => void;
+  onColumnClick?: (columnID: number) => void;
+}) {
+  /** Resolves the column name and wires column-level hover/click so the header
+   * component itself can stay a pure function of props. */
+  const columnID = column.columnID;
+  const info = useMacrostratColumnInfo(columnID);
+
+  return h(
+    "div.column-header-cell",
+    {
+      style: {
+        width: columnWidth,
+        minWidth: columnWidth,
+        maxWidth: columnWidth,
+      },
+      onMouseEnter: () => onColumnMouseOver?.(columnID),
+      onMouseLeave: () => onColumnMouseOver?.(null),
+      onClick: onColumnClick
+        ? (e: React.MouseEvent) => {
+            e.stopPropagation();
+            onColumnClick(columnID);
+          }
+        : undefined,
+    },
+    h(Component, {
+      column,
+      columnID,
+      columnIndex,
+      units: column.units as ExtUnit[],
+      width: columnWidth,
+      columnName: info?.col_name ?? null,
+    }),
+  );
+}
+
 interface TimescaleColumnProps {
   scaleInfo: CompositeStratigraphicScaleInfo;
   showLabels?: boolean;
   unconformityLabels?: boolean;
+  onClickInterval?: TimescaleClickHandler;
 }
 
 function TimescaleColumn(props: TimescaleColumnProps) {
-  const { scaleInfo, unconformityLabels = true } = props;
+  const { scaleInfo, unconformityLabels = true, onClickInterval } = props;
   return h("div.column-container.age-axis-container", [
     h(CompositeAgeAxisCore, { ...scaleInfo }),
-    h(CompositeTimescaleCore, { ...scaleInfo, unconformityLabels }),
+    h(CompositeTimescaleCore, {
+      ...scaleInfo,
+      unconformityLabels,
+      onClickInterval,
+    }),
   ]);
 }

package/src/correlation-chart/prepare-data.ts

@@ -44,7 +44,6 @@ export function buildCorrelationChartData(
   columns: ColumnData[],
   settings: CorrelationChartSettings,
 ): CorrelationChartData {
-  console.log(settings);
   const {
     mergeSections = MergeSectionsMode.OVERLAPPING,
     targetUnitHeight,