@macrostrat/column-views 3.6.1 → 3.9.0

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

@@ -8,12 +8,11 @@ import { CompositeTimescale, SectionsColumn } from "./section.js";
 import { CompositeAgeAxis, ApproximateHeightAxis } from "./age-axis.js";
 import { usePreparedColumnUnits } from "./prepare-units/index.js";
 import { NonIdealState } from "@blueprintjs/core";
-import { DataField } from "@macrostrat/data-components";
+import { Identifier, DataField } from "@macrostrat/data-components";
 import { HybridScaleType } from "./prepare-units/types.js";
 import { MacrostratColumnDataProvider, useMacrostratColumnData, useCompositeScale } from "./data-provider/store.js";
 import { UnitSelectionPopover } from "./unit-details/popover.js";
 import { UnitKeyboardNavigation, useColumnRef, useUnitSelectionDispatch } from "./data-provider/unit-selection.js";
-import { Identifier } from "./unit-details/identifiers.js";
 import { ReferencesField } from "./unit-details/panel.js";
 function Column(props) {
   const {
@@ -33,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;
@@ -67,6 +69,7 @@ function Column(props) {
     pixelScale,
     minPixelScale: _minPixelScale,
     minSectionHeight: _minSectionHeight,
+    windowPadding,
     collapseSmallUnconformities,
     // TODO: consider unifying scale and hybridScale options
     scale,
@@ -92,6 +95,8 @@ function Column(props) {
       allowUnitSelection: showUnitPopover || allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
       ref
     },
     h(ColumnInner, { ageAxisComponent, ...rest }, [
@@ -123,6 +128,8 @@ function ColumnInner(props) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
     ageAxisComponent = CompositeAgeAxis
   } = props;
   const { axisType } = useMacrostratColumnData();
@@ -159,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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"}

package/dist/column.module.sass.cjs

@@ -3,28 +3,28 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const h$1 = require("@macrostrat/hyper");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
-const unconformity = "_unconformity_15bga_131";
-const giga = "_giga_15bga_146";
-const mega = "_mega_15bga_149";
-const large = "_large_15bga_152";
-const small = "_small_15bga_155";
-const prefix = "_prefix_15bga_175";
+const unconformity = "_unconformity_1j8hh_136";
+const giga = "_giga_1j8hh_151";
+const mega = "_mega_1j8hh_154";
+const large = "_large_1j8hh_157";
+const small = "_small_1j8hh_160";
+const prefix = "_prefix_1j8hh_180";
 const styles = {
-  "column-container": "_column-container_15bga_1",
-  "timescale-column": "_timescale-column_15bga_114",
-  "section-main": "_section-main_15bga_118",
-  "section-units-container": "_section-units-container_15bga_123",
-  "main-column": "_main-column_15bga_127",
-  "unconformity-labels": "_unconformity-labels_15bga_131",
+  "column-container": "_column-container_1j8hh_1",
+  "timescale-column": "_timescale-column_1j8hh_119",
+  "section-main": "_section-main_1j8hh_123",
+  "section-units-container": "_section-units-container_1j8hh_128",
+  "main-column": "_main-column_1j8hh_132",
+  "unconformity-labels": "_unconformity-labels_1j8hh_136",
   unconformity,
   giga,
   mega,
   large,
   small,
-  "unconformity-inner": "_unconformity-inner_15bga_159",
-  "unconformity-text": "_unconformity-text_15bga_171",
+  "unconformity-inner": "_unconformity-inner_1j8hh_164",
+  "unconformity-text": "_unconformity-text_1j8hh_176",
   prefix,
-  "column-title-row": "_column-title-row_15bga_185"
+  "column-title-row": "_column-title-row_1j8hh_190"
 };
 let h = h__default.default.styled(styles);
 Object.assign(h, styles);

package/dist/column.module.sass.js

@@ -1,26 +1,26 @@
 import h$1 from "@macrostrat/hyper";
-const unconformity = "_unconformity_15bga_131";
-const giga = "_giga_15bga_146";
-const mega = "_mega_15bga_149";
-const large = "_large_15bga_152";
-const small = "_small_15bga_155";
-const prefix = "_prefix_15bga_175";
+const unconformity = "_unconformity_1j8hh_136";
+const giga = "_giga_1j8hh_151";
+const mega = "_mega_1j8hh_154";
+const large = "_large_1j8hh_157";
+const small = "_small_1j8hh_160";
+const prefix = "_prefix_1j8hh_180";
 const styles = {
-  "column-container": "_column-container_15bga_1",
-  "timescale-column": "_timescale-column_15bga_114",
-  "section-main": "_section-main_15bga_118",
-  "section-units-container": "_section-units-container_15bga_123",
-  "main-column": "_main-column_15bga_127",
-  "unconformity-labels": "_unconformity-labels_15bga_131",
+  "column-container": "_column-container_1j8hh_1",
+  "timescale-column": "_timescale-column_1j8hh_119",
+  "section-main": "_section-main_1j8hh_123",
+  "section-units-container": "_section-units-container_1j8hh_128",
+  "main-column": "_main-column_1j8hh_132",
+  "unconformity-labels": "_unconformity-labels_1j8hh_136",
   unconformity,
   giga,
   mega,
   large,
   small,
-  "unconformity-inner": "_unconformity-inner_15bga_159",
-  "unconformity-text": "_unconformity-text_15bga_171",
+  "unconformity-inner": "_unconformity-inner_1j8hh_164",
+  "unconformity-text": "_unconformity-text_1j8hh_176",
   prefix,
-  "column-title-row": "_column-title-row_15bga_185"
+  "column-title-row": "_column-title-row_1j8hh_190"
 };
 let h = h$1.styled(styles);
 Object.assign(h, styles);

package/dist/correlation-chart/main.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const h$1 = require("@macrostrat/hyper");
 const main_module = require("./main.module.sass.cjs");
 const React = require("react");
 const uiComponents = require("@macrostrat/ui-components");
@@ -12,17 +11,23 @@ const columnComponents = require("@macrostrat/column-components");
 const index = require("../units/index.cjs");
 const boxes = require("../units/boxes.cjs");
 const column = require("../column.cjs");
+const dataProvider = require("@macrostrat/data-provider");
 const store = require("../data-provider/store.cjs");
 const panel = require("../unit-details/panel.cjs");
 const popover = require("../unit-details/popover.cjs");
 const unitSelection = require("../data-provider/unit-selection.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
 const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
-const h = h__default.default.styled(main_module.default);
+const chartPaddingH = 4;
+const defaultCorrelationChartScaleProps = {
+  targetUnitHeight: 10,
+  unconformityHeight: 60,
+  minSectionHeight: 60,
+  collapseSmallUnconformities: true
+};
 function MainChartArea({ children }) {
   const columnRef = unitSelection.useColumnRef();
-  return h("div.main-chart", { ref: columnRef }, children);
+  return main_module.default("div.main-chart", { ref: columnRef }, children);
 }
 const unitPopoverFeatures = /* @__PURE__ */ new Set([
   panel.UnitDetailsFeature.AdjacentUnits,
@@ -39,18 +44,19 @@ function CorrelationChart({
   selectedUnit,
   onUnitSelected,
   unitComponent,
+  columnHeaderComponent,
+  axisTopContent,
+  onClickTimescaleInterval,
+  onColumnMouseOver,
+  onColumnClick,
+  isTransitioning = false,
+  hideLabelsWhileTransitioning = false,
   ...scaleProps
 }) {
-  const defaultScaleProps = {
-    targetUnitHeight: 10,
-    unconformityHeight: 60,
-    minSectionHeight: 60,
-    collapseSmallUnconformities: true
-  };
   const chartData = React.useMemo(() => {
     if (!data) return null;
     return prepareData.buildCorrelationChartData(data, {
-      ...defaultScaleProps,
+      ...defaultCorrelationChartScaleProps,
       ...scaleProps
     });
   }, [data, ...Object.values(scaleProps)]);
@@ -66,30 +72,30 @@ function CorrelationChart({
   }
   const { packages, scaleInfo, nColumns } = chartData;
   const mainWidth = (columnWidth + columnSpacing) * nColumns;
-  return h(
+  return main_module.default(
     column.ColumnContainer,
     { className: "correlation-diagram" },
-    h(
+    main_module.default(
       store.UnitSelectionProvider,
       { selectedUnit, onUnitSelected, units },
-      h(ChartArea, [
-        h(TimescaleColumn, {
-          key: "timescale",
+      main_module.default(ChartArea, [
+        main_module.default(TimescaleColumn, {
           scaleInfo,
-          unconformityLabels
+          unconformityLabels,
+          onClickInterval: onClickTimescaleInterval
         }),
-        h(MainChartArea, [
-          h(
+        main_module.default(MainChartArea, [
+          main_module.default(
             columnComponents.SVG,
             {
               className,
               innerWidth: mainWidth,
               height: scaleInfo.totalHeight,
-              paddingH: 4
+              paddingH: chartPaddingH
             },
             packages.map((pkg, i) => {
               const { offset, domain, pixelScale, scale, key } = scaleInfo.packages[i];
-              return h(Package, {
+              return main_module.default(Package, {
                 columnData: pkg.columnData,
                 key,
                 columnWidth,
@@ -98,16 +104,30 @@ function CorrelationChart({
                 domain,
                 pixelScale,
                 scale,
-                unitComponent
+                unitComponent,
+                onColumnMouseOver,
+                isTransitioning,
+                hideLabelsWhileTransitioning
               });
             })
           ),
-          h.if(showUnitPopover)(popover.UnitSelectionPopover, {
+          main_module.default.if(showUnitPopover)(popover.UnitSelectionPopover, {
             features: unitPopoverFeatures
           }),
           // Navigation only works within a column for now...
-          h(unitSelection.UnitKeyboardNavigation, { columnData: data })
-        ])
+          main_module.default(unitSelection.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)
+        main_module.default(ColumnHeaderRow, {
+          data,
+          columnWidth,
+          columnSpacing,
+          columnHeaderComponent,
+          axisTopContent,
+          onColumnMouseOver,
+          onColumnClick
+        })
       ])
     )
   );
@@ -120,22 +140,29 @@ function Package({
   offset,
   domain,
   pixelScale,
-  scale
+  scale,
+  onColumnMouseOver,
+  isTransitioning,
+  hideLabelsWhileTransitioning
 }) {
-  return h("g.package", { transform: `translate(0 ${offset})` }, [
+  return main_module.default("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
     //h(PackageSVGOverlay, { columnData, columnSpacing }),
-    h("g.column-units", [
+    main_module.default("g.column-units", [
       columnData.map((data, i) => {
-        return h(Column, {
+        return main_module.default(Column, {
           units: data.units,
+          columnID: data.columnID,
           unitComponent,
           width: columnWidth,
           key: i,
           domain,
           pixelScale,
           scale,
-          offsetLeft: i * (columnWidth + columnSpacing)
+          offsetLeft: i * (columnWidth + columnSpacing),
+          onColumnMouseOver,
+          isTransitioning,
+          hideLabelsWhileTransitioning
         });
       })
     ])
@@ -144,23 +171,32 @@ function Package({
 function Column(props) {
   const {
     units,
+    columnID,
     width = 150,
     offsetLeft,
     domain,
     pixelScale,
     scale,
-    unitComponent = index.ColoredUnitComponent
+    unitComponent = index.ColoredUnitComponent,
+    onColumnMouseOver,
+    isTransitioning,
+    hideLabelsWhileTransitioning
   } = props;
   const columnWidth = width;
   if (units.length == 0) {
     return null;
   }
-  return h(
+  const hoverHandlers = onColumnMouseOver != null && columnID != null ? {
+    onMouseEnter: () => onColumnMouseOver(columnID),
+    onMouseLeave: () => onColumnMouseOver(null)
+  } : {};
+  return main_module.default(
     "g.section",
     {
-      transform: `translate(${offsetLeft} 0)`
+      transform: `translate(${offsetLeft} 0)`,
+      ...hoverHandlers
     },
-    h(
+    main_module.default(
       columnComponents.ColumnProvider,
       {
         // Need to tighten up types here...
@@ -169,12 +205,13 @@ function Column(props) {
         scale,
         pixelsPerMeter: pixelScale,
         // Actually pixels per myr
-        axisType: columnComponents.ColumnAxisType.AGE
+        axisType: columnComponents.ColumnAxisType.AGE,
+        isTransitioning,
+        hideLabelsWhileTransitioning
       },
-      h(boxes.UnitBoxes, {
+      main_module.default(boxes.UnitBoxes, {
         unitComponent,
         unitComponentProps: {
-          nColumns: 2,
           width: columnWidth,
           showLabel: true
         }
@@ -184,7 +221,7 @@ function Column(props) {
 }
 function ChartArea({ children }) {
   const setSelectedUnit = unitSelection.useUnitSelectionDispatch();
-  return h(
+  return main_module.default(
     "div.correlation-chart-inner",
     {
       onClick() {
@@ -194,11 +231,88 @@ function ChartArea({ children }) {
     children
   );
 }
+function ColumnHeaderRow({
+  data,
+  columnWidth,
+  columnSpacing,
+  columnHeaderComponent,
+  axisTopContent,
+  onColumnMouseOver,
+  onColumnClick
+}) {
+  const Component = columnHeaderComponent;
+  if (Component == null && axisTopContent == null) {
+    return null;
+  }
+  return main_module.default([
+    main_module.default("div.column-header-spacer", axisTopContent),
+    main_module.default.if(Component != null)(
+      "div.column-header-row",
+      {
+        style: {
+          paddingLeft: chartPaddingH,
+          paddingRight: chartPaddingH,
+          gap: columnSpacing
+        }
+      },
+      data.map((column2, i) => {
+        return main_module.default(ColumnHeaderCell, {
+          key: column2.columnID ?? i,
+          column: column2,
+          columnIndex: i,
+          columnWidth,
+          Component,
+          onColumnMouseOver,
+          onColumnClick
+        });
+      })
+    )
+  ]);
+}
+function ColumnHeaderCell({
+  column: column2,
+  columnIndex,
+  columnWidth,
+  Component,
+  onColumnMouseOver,
+  onColumnClick
+}) {
+  const columnID = column2.columnID;
+  const info = dataProvider.useMacrostratColumnInfo(columnID);
+  return main_module.default(
+    "div.column-header-cell",
+    {
+      style: {
+        width: columnWidth,
+        minWidth: columnWidth,
+        maxWidth: columnWidth
+      },
+      onMouseEnter: () => onColumnMouseOver?.(columnID),
+      onMouseLeave: () => onColumnMouseOver?.(null),
+      onClick: onColumnClick ? (e) => {
+        e.stopPropagation();
+        onColumnClick(columnID);
+      } : void 0
+    },
+    main_module.default(Component, {
+      column: column2,
+      columnID,
+      columnIndex,
+      units: column2.units,
+      width: columnWidth,
+      columnName: info?.col_name ?? null
+    })
+  );
+}
 function TimescaleColumn(props) {
-  const { scaleInfo, unconformityLabels = true } = props;
-  return h("div.column-container.age-axis-container", [
-    h(ageAxis.CompositeAgeAxisCore, { ...scaleInfo }),
-    h(section.CompositeTimescaleCore, { ...scaleInfo, unconformityLabels })
+  const { scaleInfo, unconformityLabels = true, onClickInterval } = props;
+  return main_module.default("div.column-container.age-axis-container", [
+    main_module.default(ageAxis.CompositeAgeAxisCore, { ...scaleInfo }),
+    main_module.default(section.CompositeTimescaleCore, {
+      ...scaleInfo,
+      unconformityLabels,
+      onClickInterval
+    })
   ]);
 }
 exports.CorrelationChart = CorrelationChart;