@macrostrat/column-views 3.6.1 → 3.8.0

package/dist/correlation-chart/main.d.ts

@@ -1,6 +1,25 @@
 import { CorrelationChartSettings } from './prepare-data';
-import { ColumnData } from '../data-provider';
+import { ColumnData } from '@macrostrat/data-provider';
 import { BaseUnit } from '@macrostrat/api-types';
+import { ExtUnit } from '../prepare-units/types';
+import { TimescaleClickHandler } from '@macrostrat/timescale';
+/** 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[];
     columnWidth?: number;
@@ -10,6 +29,18 @@ 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;
     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;
 }
-export declare function CorrelationChart({ data, columnSpacing, columnWidth, unconformityLabels, showUnitPopover, selectedUnit, onUnitSelected, unitComponent, ...scaleProps }: CorrelationChartProps): import('react').FunctionComponentElement<import('..').ColumnContainerProps> | null;
+export declare function CorrelationChart({ data, columnSpacing, columnWidth, unconformityLabels, showUnitPopover, selectedUnit, onUnitSelected, unitComponent, columnHeaderComponent, axisTopContent, onClickTimescaleInterval, onColumnMouseOver, onColumnClick, ...scaleProps }: CorrelationChartProps): import('react').FunctionComponentElement<import('..').ColumnContainerProps> | null;

package/dist/correlation-chart/main.js

@@ -1,5 +1,4 @@
-import h$1 from "@macrostrat/hyper";
-import h$2 from "./main.module.sass.js";
+import h from "./main.module.sass.js";
 import { useMemo } from "react";
 import { useInDarkMode } from "@macrostrat/ui-components";
 import { CompositeTimescaleCore } from "../section.js";
@@ -10,11 +9,12 @@ import { SVG, ColumnProvider, ColumnAxisType } from "@macrostrat/column-componen
 import { ColoredUnitComponent } from "../units/index.js";
 import { UnitBoxes } from "../units/boxes.js";
 import { ColumnContainer } from "../column.js";
+import { useMacrostratColumnInfo } from "@macrostrat/data-provider";
 import { UnitSelectionProvider } from "../data-provider/store.js";
 import { UnitDetailsFeature } from "../unit-details/panel.js";
 import { UnitSelectionPopover } from "../unit-details/popover.js";
 import { UnitKeyboardNavigation, useUnitSelectionDispatch, useColumnRef } from "../data-provider/unit-selection.js";
-const h = h$1.styled(h$2);
+const chartPaddingH = 4;
 function MainChartArea({ children }) {
   const columnRef = useColumnRef();
   return h("div.main-chart", { ref: columnRef }, children);
@@ -34,6 +34,11 @@ function CorrelationChart({
   selectedUnit,
   onUnitSelected,
   unitComponent,
+  columnHeaderComponent,
+  axisTopContent,
+  onClickTimescaleInterval,
+  onColumnMouseOver,
+  onColumnClick,
   ...scaleProps
 }) {
   const defaultScaleProps = {
@@ -69,9 +74,9 @@ function CorrelationChart({
       { selectedUnit, onUnitSelected, units },
       h(ChartArea, [
         h(TimescaleColumn, {
-          key: "timescale",
           scaleInfo,
-          unconformityLabels
+          unconformityLabels,
+          onClickInterval: onClickTimescaleInterval
         }),
         h(MainChartArea, [
           h(
@@ -80,7 +85,7 @@ function CorrelationChart({
               className,
               innerWidth: mainWidth,
               height: scaleInfo.totalHeight,
-              paddingH: 4
+              paddingH: chartPaddingH
             },
             packages.map((pkg, i) => {
               const { offset, domain, pixelScale, scale, key } = scaleInfo.packages[i];
@@ -93,7 +98,8 @@ function CorrelationChart({
                 domain,
                 pixelScale,
                 scale,
-                unitComponent
+                unitComponent,
+                onColumnMouseOver
               });
             })
           ),
@@ -102,7 +108,18 @@ 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
+        })
       ])
     )
   );
@@ -115,7 +132,8 @@ function Package({
   offset,
   domain,
   pixelScale,
-  scale
+  scale,
+  onColumnMouseOver
 }) {
   return h("g.package", { transform: `translate(0 ${offset})` }, [
     // Disable the SVG overlay for now
@@ -124,13 +142,15 @@ function Package({
       columnData.map((data, i) => {
         return h(Column, {
           units: data.units,
+          columnID: data.columnID,
           unitComponent,
           width: columnWidth,
           key: i,
           domain,
           pixelScale,
           scale,
-          offsetLeft: i * (columnWidth + columnSpacing)
+          offsetLeft: i * (columnWidth + columnSpacing),
+          onColumnMouseOver
         });
       })
     ])
@@ -139,21 +159,28 @@ function Package({
 function Column(props) {
   const {
     units,
+    columnID,
     width = 150,
     offsetLeft,
     domain,
     pixelScale,
     scale,
-    unitComponent = ColoredUnitComponent
+    unitComponent = ColoredUnitComponent,
+    onColumnMouseOver
   } = props;
   const columnWidth = width;
   if (units.length == 0) {
     return null;
   }
+  const hoverHandlers = onColumnMouseOver != null && columnID != null ? {
+    onMouseEnter: () => onColumnMouseOver(columnID),
+    onMouseLeave: () => onColumnMouseOver(null)
+  } : {};
   return h(
     "g.section",
     {
-      transform: `translate(${offsetLeft} 0)`
+      transform: `translate(${offsetLeft} 0)`,
+      ...hoverHandlers
     },
     h(
       ColumnProvider,
@@ -169,7 +196,6 @@ function Column(props) {
       h(UnitBoxes, {
         unitComponent,
         unitComponentProps: {
-          nColumns: 2,
           width: columnWidth,
           showLabel: true
         }
@@ -189,11 +215,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 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,
+          onColumnMouseOver,
+          onColumnClick
+        });
+      })
+    )
+  ]);
+}
+function ColumnHeaderCell({
+  column,
+  columnIndex,
+  columnWidth,
+  Component,
+  onColumnMouseOver,
+  onColumnClick
+}) {
+  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) => {
+        e.stopPropagation();
+        onColumnClick(columnID);
+      } : void 0
+    },
+    h(Component, {
+      column,
+      columnID,
+      columnIndex,
+      units: column.units,
+      width: columnWidth,
+      columnName: info?.col_name ?? null
+    })
+  );
+}
 function TimescaleColumn(props) {
-  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
+    })
   ]);
 }
 export {

package/dist/correlation-chart/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../../src/correlation-chart/main.ts"],"sourcesContent":["/** Correlation chart */\nimport {\n  UnitSelectionProvider,\n  UnitKeyboardNavigation,\n  useUnitSelectionDispatch,\n  useColumnRef,\n} from \"../data-provider\";\nimport { UnitDetailsFeature, UnitSelectionPopover } from \"../unit-details\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMemo } from \"react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { CompositeTimescaleCore } from \"../section\";\nimport classNames from \"classnames\";\nimport {\n  findLaterallyExtensiveUnits,\n  splitStratIntoBoxes,\n  UnitGroupBox,\n  CorrelationChartSettings,\n  buildCorrelationChartData,\n} from \"./prepare-data\";\nimport {\n  CompositeAgeAxisCore,\n  CompositeStratigraphicScaleInfo,\n} from \"../age-axis\";\nimport {\n  ColumnAxisType,\n  ColumnProvider,\n  SVG,\n} from \"@macrostrat/column-components\";\nimport { ColoredUnitComponent } from \"../units\";\nimport { UnitBoxes } from \"../units/boxes\";\nimport { ColumnContainer } from \"../column\";\nimport { ColumnData } from \"../data-provider\";\nimport { BaseUnit } from \"@macrostrat/api-types\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\nimport { ExtUnit } from \"../prepare-units/types\";\n\nconst h = hyper.styled(styles);\n\nexport interface CorrelationChartProps extends CorrelationChartSettings {\n  data: ColumnData[];\n  columnWidth?: number;\n  columnSpacing?: number;\n  targetUnitHeight?: number;\n  unconformityLabels?: boolean;\n  selectedUnit?: number | null;\n  showUnitPopover?: boolean;\n  unitComponent?: any;\n  onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;\n}\n\nfunction MainChartArea({ children }) {\n  const columnRef = useColumnRef();\n  return h(\"div.main-chart\", { ref: columnRef }, children);\n}\n\nconst unitPopoverFeatures = new Set([\n  UnitDetailsFeature.AdjacentUnits,\n  UnitDetailsFeature.OutcropType,\n  UnitDetailsFeature.DepthRange,\n  UnitDetailsFeature.ColumnName,\n]);\n\nexport function CorrelationChart({\n  data,\n  columnSpacing = 0,\n  columnWidth = 130,\n  unconformityLabels = true,\n  showUnitPopover = true,\n  selectedUnit,\n  onUnitSelected,\n  unitComponent,\n  ...scaleProps\n}: CorrelationChartProps) {\n  const defaultScaleProps = {\n    targetUnitHeight: 10,\n    unconformityHeight: 60,\n    minSectionHeight: 60,\n    collapseSmallUnconformities: true,\n  };\n\n  const chartData = useMemo(() => {\n    if (!data) return null;\n    return buildCorrelationChartData(data, {\n      ...defaultScaleProps,\n      ...scaleProps,\n    });\n  }, [data, ...Object.values(scaleProps)]);\n\n  // A flattened units array is used to support keyboard navigation\n  const units = useMemo(() => {\n    return data?.map((d0) => d0.units).flat() ?? [];\n  }, [data]);\n\n  const inDarkMode = useInDarkMode();\n\n  const className = classNames({\n    \"dark-mode\": inDarkMode,\n  });\n\n  if (chartData == null) {\n    return null;\n  }\n\n  const { packages, scaleInfo, nColumns } = chartData;\n\n  const mainWidth = (columnWidth + columnSpacing) * nColumns;\n\n  return h(\n    ColumnContainer,\n    { className: \"correlation-diagram\" },\n    h(\n      UnitSelectionProvider,\n      { selectedUnit, onUnitSelected, units },\n      h(ChartArea, [\n        h(TimescaleColumn, {\n          key: \"timescale\",\n          scaleInfo,\n          unconformityLabels,\n        }),\n        h(MainChartArea, [\n          h(\n            SVG,\n            {\n              className,\n              innerWidth: mainWidth,\n              height: scaleInfo.totalHeight,\n              paddingH: 4,\n            },\n            packages.map((pkg, i) => {\n              const { offset, domain, pixelScale, scale, key } =\n                scaleInfo.packages[i];\n              return h(Package, {\n                columnData: pkg.columnData,\n                key,\n                columnWidth,\n                columnSpacing,\n                offset,\n                domain,\n                pixelScale,\n                scale,\n                unitComponent,\n              });\n            }),\n          ),\n          h.if(showUnitPopover)(UnitSelectionPopover, {\n            features: unitPopoverFeatures,\n          }),\n          // Navigation only works within a column for now...\n          h(UnitKeyboardNavigation, { columnData: data }),\n        ]),\n      ]),\n    ),\n  );\n}\n\nfunction Package({\n  columnData,\n  columnSpacing,\n  columnWidth,\n  unitComponent,\n  offset,\n  domain,\n  pixelScale,\n  scale,\n}) {\n  return h(\"g.package\", { transform: `translate(0 ${offset})` }, [\n    // Disable the SVG overlay for now\n    //h(PackageSVGOverlay, { columnData, columnSpacing }),\n    h(\"g.column-units\", [\n      columnData.map((data, i) => {\n        return h(Column, {\n          units: data.units,\n          unitComponent,\n          width: columnWidth,\n          key: i,\n          domain,\n          pixelScale,\n          scale,\n          offsetLeft: i * (columnWidth + columnSpacing),\n        });\n      }),\n    ]),\n  ]);\n}\n\ninterface ColumnProps {\n  units: ExtUnit[];\n  unitComponent?: React.FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  columnSpacing?: number;\n  targetUnitHeight?: number;\n  offsetLeft?: number;\n  domain: [number, number];\n  pixelScale: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n}\n\nfunction Column(props: ColumnProps) {\n  const {\n    units,\n    width = 150,\n    offsetLeft,\n    domain,\n    pixelScale,\n    scale,\n    unitComponent = ColoredUnitComponent,\n  } = props;\n\n  const columnWidth = width;\n\n  if (units.length == 0) {\n    return null;\n  }\n\n  return h(\n    \"g.section\",\n    {\n      transform: `translate(${offsetLeft} 0)`,\n    },\n    h(\n      ColumnProvider,\n      {\n        // Need to tighten up types here...\n        divisions: units as any[],\n        range: domain,\n        scale,\n        pixelsPerMeter: pixelScale, // Actually pixels per myr\n        axisType: ColumnAxisType.AGE,\n      },\n      h(UnitBoxes, {\n        unitComponent,\n        unitComponentProps: {\n          nColumns: 2,\n          width: columnWidth,\n          showLabel: true,\n        },\n      }),\n    ),\n  );\n}\n\nfunction PackageSVGOverlay({ data, columnWidth = 100, columnSpacing = 0 }) {\n  const { b_age, t_age, bestPixelScale, columnData } = data;\n\n  const width = (columnWidth + columnSpacing) * columnData.length;\n  const height = Math.ceil((b_age - t_age) * bestPixelScale) + 2;\n\n  const extensiveUnits = findLaterallyExtensiveUnits(data);\n\n  const scale = (val: number) => {\n    return (val - t_age) * bestPixelScale;\n  };\n\n  return h(\n    \"div.package-overlay\",\n    { style: { width, height } },\n    extensiveUnits.map((d) => {\n      return h(LaterallyExtensiveUnit, {\n        data: d,\n        scale,\n        pixelScale: bestPixelScale,\n        columnSpacing,\n      });\n    }),\n  );\n}\n\nfunction LaterallyExtensiveUnit({ data, scale, pixelScale, columnSpacing }) {\n  const { b_age, t_age, strat_name_long, units } = data;\n  // Build boxes by column groups\n  const boxes: UnitGroupBox[] = splitStratIntoBoxes(data);\n\n  return h(\n    \"div.laterally-extensive-unit\",\n    boxes.map((d, i) => {\n      return h(StratColSpan, {\n        scale,\n        data: d,\n        pixelScale,\n        key: i,\n        columnSpacing,\n      });\n    }),\n  );\n}\n\nfunction StratColSpan({\n  data,\n  scale,\n  columnWidth = 100,\n  columnSpacing = 0,\n  pixelScale = 1,\n}) {\n  const { startCol, endCol, strat_name_long, t_age, b_age } = data;\n  const top = scale(t_age);\n  const left = startCol * (columnWidth + columnSpacing);\n  const width = (endCol - startCol + 1) * (columnWidth + columnSpacing);\n  const height = (b_age - t_age) * pixelScale;\n  return h(\n    \"div.strat-col-span\",\n    { style: { top, height, width, left } },\n    strat_name_long,\n  );\n}\n\nfunction ChartArea({ children }) {\n  const setSelectedUnit = useUnitSelectionDispatch();\n\n  return h(\n    \"div.correlation-chart-inner\",\n    {\n      onClick() {\n        setSelectedUnit(null, null);\n      },\n    },\n    children,\n  );\n}\n\ninterface TimescaleColumnProps {\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  showLabels?: boolean;\n  unconformityLabels?: boolean;\n}\n\nfunction TimescaleColumn(props: TimescaleColumnProps) {\n  const { scaleInfo, unconformityLabels = true } = props;\n  return h(\"div.column-container.age-axis-container\", [\n    h(CompositeAgeAxisCore, { ...scaleInfo }),\n    h(CompositeTimescaleCore, { ...scaleInfo, unconformityLabels }),\n  ]);\n}\n"],"names":["hyper","styles"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../../src/correlation-chart/main.ts"],"sourcesContent":["/** Correlation chart */\nimport {\n  UnitSelectionProvider,\n  UnitKeyboardNavigation,\n  useUnitSelectionDispatch,\n  useColumnRef,\n} from \"../data-provider\";\nimport { UnitDetailsFeature, UnitSelectionPopover } from \"../unit-details\";\nimport h from \"./main.module.sass\";\nimport { useMemo } from \"react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { CompositeTimescaleCore } from \"../section\";\nimport classNames from \"classnames\";\nimport {\n  findLaterallyExtensiveUnits,\n  splitStratIntoBoxes,\n  UnitGroupBox,\n  CorrelationChartSettings,\n  buildCorrelationChartData,\n} from \"./prepare-data\";\nimport {\n  CompositeAgeAxisCore,\n  CompositeStratigraphicScaleInfo,\n} from \"../age-axis\";\nimport {\n  ColumnAxisType,\n  ColumnProvider,\n  SVG,\n} from \"@macrostrat/column-components\";\nimport { ColoredUnitComponent } from \"../units\";\nimport { UnitBoxes } from \"../units/boxes\";\nimport { ColumnContainer } from \"../column\";\nimport type { ColumnData } from \"@macrostrat/data-provider\";\nimport { BaseUnit } from \"@macrostrat/api-types\";\nimport { ScaleContinuousNumeric } from \"d3-scale\";\nimport { ExtUnit } from \"../prepare-units/types\";\nimport type { TimescaleClickHandler } from \"@macrostrat/timescale\";\nimport { useMacrostratColumnInfo } from \"@macrostrat/data-provider\";\n\n/** Standard props passed to a `columnHeaderComponent`. Everything a header\n * needs is provided here, so the component can be a pure function of its props\n * (no hooks required). Column-level hover/click are handled by the chart. */\nexport interface ColumnHeaderProps {\n  /** The column data (units + identifier) for this column */\n  column: ColumnData;\n  /** The column's ID (col_id) */\n  columnID: number;\n  /** The column's index (left-to-right) within the chart */\n  columnIndex: number;\n  /** The units within the column */\n  units: ExtUnit[];\n  /** The rendered width of the column, in pixels */\n  width: number;\n  /** The column's name, resolved from column metadata when available */\n  columnName?: string | null;\n}\n\nexport interface CorrelationChartProps extends CorrelationChartSettings {\n  data: ColumnData[];\n  columnWidth?: number;\n  columnSpacing?: number;\n  targetUnitHeight?: number;\n  unconformityLabels?: boolean;\n  selectedUnit?: number | null;\n  showUnitPopover?: boolean;\n  unitComponent?: any;\n  /** Arbitrary content (e.g. column title and/or ID) rendered above each column */\n  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;\n  /** Content rendered above the timescale axis (top-left), beside the column\n   * headers — e.g. a zoom/filter indicator. */\n  axisTopContent?: React.ReactNode;\n  onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;\n  /** Called when a timescale interval is clicked (e.g. to zoom the age range) */\n  onClickTimescaleInterval?: TimescaleClickHandler;\n  /** Called when the pointer enters/leaves a column (header or body). Passes\n   * the column ID, or null on leave. */\n  onColumnMouseOver?: (columnID: number | null) => void;\n  /** Called when a column header is clicked (e.g. to frame it on a map) */\n  onColumnClick?: (columnID: number) => void;\n}\n\n/** Horizontal padding of the main chart SVG. Column headers are aligned to\n * this so that they line up with the columns beneath them. */\nconst chartPaddingH = 4;\n\nfunction MainChartArea({ children }) {\n  const columnRef = useColumnRef();\n  return h(\"div.main-chart\", { ref: columnRef }, children);\n}\n\nconst unitPopoverFeatures = new Set([\n  UnitDetailsFeature.AdjacentUnits,\n  UnitDetailsFeature.OutcropType,\n  UnitDetailsFeature.DepthRange,\n  UnitDetailsFeature.ColumnName,\n]);\n\nexport function CorrelationChart({\n  data,\n  columnSpacing = 0,\n  columnWidth = 130,\n  unconformityLabels = true,\n  showUnitPopover = true,\n  selectedUnit,\n  onUnitSelected,\n  unitComponent,\n  columnHeaderComponent,\n  axisTopContent,\n  onClickTimescaleInterval,\n  onColumnMouseOver,\n  onColumnClick,\n  ...scaleProps\n}: CorrelationChartProps) {\n  const defaultScaleProps = {\n    targetUnitHeight: 10,\n    unconformityHeight: 60,\n    minSectionHeight: 60,\n    collapseSmallUnconformities: true,\n  };\n\n  const chartData = useMemo(() => {\n    if (!data) return null;\n    return buildCorrelationChartData(data, {\n      ...defaultScaleProps,\n      ...scaleProps,\n    });\n  }, [data, ...Object.values(scaleProps)]);\n\n  // A flattened units array is used to support keyboard navigation\n  const units = useMemo(() => {\n    return data?.map((d0) => d0.units).flat() ?? [];\n  }, [data]);\n\n  const inDarkMode = useInDarkMode();\n\n  const className = classNames({\n    \"dark-mode\": inDarkMode,\n  });\n\n  if (chartData == null) {\n    return null;\n  }\n\n  const { packages, scaleInfo, nColumns } = chartData;\n\n  const mainWidth = (columnWidth + columnSpacing) * nColumns;\n\n  return h(\n    ColumnContainer,\n    { className: \"correlation-diagram\" },\n    h(\n      UnitSelectionProvider,\n      { selectedUnit, onUnitSelected, units },\n      h(ChartArea, [\n        h(TimescaleColumn, {\n          scaleInfo,\n          unconformityLabels,\n          onClickInterval: onClickTimescaleInterval,\n        }),\n        h(MainChartArea, [\n          h(\n            SVG,\n            {\n              className,\n              innerWidth: mainWidth,\n              height: scaleInfo.totalHeight,\n              paddingH: chartPaddingH,\n            },\n            packages.map((pkg, i) => {\n              const { offset, domain, pixelScale, scale, key } =\n                scaleInfo.packages[i];\n              return h(Package, {\n                columnData: pkg.columnData,\n                key,\n                columnWidth,\n                columnSpacing,\n                offset,\n                domain,\n                pixelScale,\n                scale,\n                unitComponent,\n                onColumnMouseOver,\n              });\n            }),\n          ),\n          h.if(showUnitPopover)(UnitSelectionPopover, {\n            features: unitPopoverFeatures,\n          }),\n          // Navigation only works within a column for now...\n          h(UnitKeyboardNavigation, { columnData: data }),\n        ]),\n        // Rendered last so the sticky header paints above the unit boxes\n        // (positioned siblings paint in document order at the same z-index)\n        h(ColumnHeaderRow, {\n          data,\n          columnWidth,\n          columnSpacing,\n          columnHeaderComponent,\n          axisTopContent,\n          onColumnMouseOver,\n          onColumnClick,\n        }),\n      ]),\n    ),\n  );\n}\n\nfunction Package({\n  columnData,\n  columnSpacing,\n  columnWidth,\n  unitComponent,\n  offset,\n  domain,\n  pixelScale,\n  scale,\n  onColumnMouseOver,\n}) {\n  return h(\"g.package\", { transform: `translate(0 ${offset})` }, [\n    // Disable the SVG overlay for now\n    //h(PackageSVGOverlay, { columnData, columnSpacing }),\n    h(\"g.column-units\", [\n      columnData.map((data, i) => {\n        return h(Column, {\n          units: data.units,\n          columnID: data.columnID,\n          unitComponent,\n          width: columnWidth,\n          key: i,\n          domain,\n          pixelScale,\n          scale,\n          offsetLeft: i * (columnWidth + columnSpacing),\n          onColumnMouseOver,\n        });\n      }),\n    ]),\n  ]);\n}\n\ninterface ColumnProps {\n  units: ExtUnit[];\n  columnID?: number;\n  unitComponent?: React.FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  columnSpacing?: number;\n  targetUnitHeight?: number;\n  offsetLeft?: number;\n  domain: [number, number];\n  pixelScale: number;\n  scale?: ScaleContinuousNumeric<number, number>;\n  onColumnMouseOver?: (columnID: number | null) => void;\n}\n\nfunction Column(props: ColumnProps) {\n  const {\n    units,\n    columnID,\n    width = 150,\n    offsetLeft,\n    domain,\n    pixelScale,\n    scale,\n    unitComponent = ColoredUnitComponent,\n    onColumnMouseOver,\n  } = props;\n\n  const columnWidth = width;\n\n  if (units.length == 0) {\n    return null;\n  }\n\n  const hoverHandlers =\n    onColumnMouseOver != null && columnID != null\n      ? {\n          onMouseEnter: () => onColumnMouseOver(columnID),\n          onMouseLeave: () => onColumnMouseOver(null),\n        }\n      : {};\n\n  return h(\n    \"g.section\",\n    {\n      transform: `translate(${offsetLeft} 0)`,\n      ...hoverHandlers,\n    },\n    h(\n      ColumnProvider,\n      {\n        // Need to tighten up types here...\n        divisions: units as any[],\n        range: domain,\n        scale,\n        pixelsPerMeter: pixelScale, // Actually pixels per myr\n        axisType: ColumnAxisType.AGE,\n      },\n      h(UnitBoxes, {\n        unitComponent,\n        unitComponentProps: {\n          width: columnWidth,\n          showLabel: true,\n        },\n      }),\n    ),\n  );\n}\n\nfunction PackageSVGOverlay({ data, columnWidth = 100, columnSpacing = 0 }) {\n  const { b_age, t_age, bestPixelScale, columnData } = data;\n\n  const width = (columnWidth + columnSpacing) * columnData.length;\n  const height = Math.ceil((b_age - t_age) * bestPixelScale) + 2;\n\n  const extensiveUnits = findLaterallyExtensiveUnits(data);\n\n  const scale = (val: number) => {\n    return (val - t_age) * bestPixelScale;\n  };\n\n  return h(\n    \"div.package-overlay\",\n    { style: { width, height } },\n    extensiveUnits.map((d) => {\n      return h(LaterallyExtensiveUnit, {\n        data: d,\n        scale,\n        pixelScale: bestPixelScale,\n        columnSpacing,\n      });\n    }),\n  );\n}\n\nfunction LaterallyExtensiveUnit({ data, scale, pixelScale, columnSpacing }) {\n  const { b_age, t_age, strat_name_long, units } = data;\n  // Build boxes by column groups\n  const boxes: UnitGroupBox[] = splitStratIntoBoxes(data);\n\n  return h(\n    \"div.laterally-extensive-unit\",\n    boxes.map((d, i) => {\n      return h(StratColSpan, {\n        scale,\n        data: d,\n        pixelScale,\n        key: i,\n        columnSpacing,\n      });\n    }),\n  );\n}\n\nfunction StratColSpan({\n  data,\n  scale,\n  columnWidth = 100,\n  columnSpacing = 0,\n  pixelScale = 1,\n}) {\n  const { startCol, endCol, strat_name_long, t_age, b_age } = data;\n  const top = scale(t_age);\n  const left = startCol * (columnWidth + columnSpacing);\n  const width = (endCol - startCol + 1) * (columnWidth + columnSpacing);\n  const height = (b_age - t_age) * pixelScale;\n  return h(\n    \"div.strat-col-span\",\n    { style: { top, height, width, left } },\n    strat_name_long,\n  );\n}\n\nfunction ChartArea({ children }) {\n  const setSelectedUnit = useUnitSelectionDispatch();\n\n  return h(\n    \"div.correlation-chart-inner\",\n    {\n      onClick() {\n        setSelectedUnit(null, null);\n      },\n    },\n    children,\n  );\n}\n\ninterface ColumnHeaderRowProps {\n  data: ColumnData[];\n  columnWidth: number;\n  columnSpacing: number;\n  columnHeaderComponent?: React.ComponentType<ColumnHeaderProps>;\n  axisTopContent?: React.ReactNode;\n  onColumnMouseOver?: (columnID: number | null) => void;\n  onColumnClick?: (columnID: number) => void;\n}\n\nfunction ColumnHeaderRow({\n  data,\n  columnWidth,\n  columnSpacing,\n  columnHeaderComponent,\n  axisTopContent,\n  onColumnMouseOver,\n  onColumnClick,\n}: ColumnHeaderRowProps) {\n  /** The top grid row: arbitrary content above the timescale axis (top-left)\n   * and, when a header component is provided, per-column headers aligned with\n   * the columns. Collapses to nothing when neither is present. */\n  const Component = columnHeaderComponent;\n  if (Component == null && axisTopContent == null) {\n    return null;\n  }\n\n  return h([\n    h(\"div.column-header-spacer\", axisTopContent),\n    h.if(Component != null)(\n      \"div.column-header-row\",\n      {\n        style: {\n          paddingLeft: chartPaddingH,\n          paddingRight: chartPaddingH,\n          gap: columnSpacing,\n        },\n      },\n      data.map((column, i) => {\n        return h(ColumnHeaderCell, {\n          key: column.columnID ?? i,\n          column,\n          columnIndex: i,\n          columnWidth,\n          Component: Component!,\n          onColumnMouseOver,\n          onColumnClick,\n        });\n      }),\n    ),\n  ]);\n}\n\nfunction ColumnHeaderCell({\n  column,\n  columnIndex,\n  columnWidth,\n  Component,\n  onColumnMouseOver,\n  onColumnClick,\n}: {\n  column: ColumnData;\n  columnIndex: number;\n  columnWidth: number;\n  Component: React.ComponentType<ColumnHeaderProps>;\n  onColumnMouseOver?: (columnID: number | null) => void;\n  onColumnClick?: (columnID: number) => void;\n}) {\n  /** Resolves the column name and wires column-level hover/click so the header\n   * component itself can stay a pure function of props. */\n  const columnID = column.columnID;\n  const info = useMacrostratColumnInfo(columnID);\n\n  return h(\n    \"div.column-header-cell\",\n    {\n      style: {\n        width: columnWidth,\n        minWidth: columnWidth,\n        maxWidth: columnWidth,\n      },\n      onMouseEnter: () => onColumnMouseOver?.(columnID),\n      onMouseLeave: () => onColumnMouseOver?.(null),\n      onClick: onColumnClick\n        ? (e: React.MouseEvent) => {\n            e.stopPropagation();\n            onColumnClick(columnID);\n          }\n        : undefined,\n    },\n    h(Component, {\n      column,\n      columnID,\n      columnIndex,\n      units: column.units as ExtUnit[],\n      width: columnWidth,\n      columnName: info?.col_name ?? null,\n    }),\n  );\n}\n\ninterface TimescaleColumnProps {\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  showLabels?: boolean;\n  unconformityLabels?: boolean;\n  onClickInterval?: TimescaleClickHandler;\n}\n\nfunction TimescaleColumn(props: TimescaleColumnProps) {\n  const { scaleInfo, unconformityLabels = true, onClickInterval } = props;\n  return h(\"div.column-container.age-axis-container\", [\n    h(CompositeAgeAxisCore, { ...scaleInfo }),\n    h(CompositeTimescaleCore, {\n      ...scaleInfo,\n      unconformityLabels,\n      onClickInterval,\n    }),\n  ]);\n}\n"],"names":[],"mappings":"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"}

package/dist/correlation-chart/main.module.sass.cjs

@@ -3,28 +3,31 @@ 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 assistant = "_assistant_jnc7r_26";
+const assistant = "_assistant_17ryg_26";
 const styles = {
-  "page-header": "_page-header_jnc7r_1",
-  "diagram-container": "_diagram-container_jnc7r_8",
-  "map-inset": "_map-inset_jnc7r_14",
-  "column-selection-map": "_column-selection-map_jnc7r_14",
-  "map-expanded": "_map-expanded_jnc7r_22",
+  "page-header": "_page-header_17ryg_1",
+  "diagram-container": "_diagram-container_17ryg_8",
+  "map-inset": "_map-inset_17ryg_14",
+  "column-selection-map": "_column-selection-map_17ryg_14",
+  "map-expanded": "_map-expanded_17ryg_22",
   assistant,
-  "unit-details-panel": "_unit-details-panel_jnc7r_31",
-  "main-area": "_main-area_jnc7r_31",
-  "correlation-map": "_correlation-map_jnc7r_46",
-  "correlation-diagram": "_correlation-diagram_jnc7r_68",
-  "package": "_package_jnc7r_76",
-  "package-overlay": "_package-overlay_jnc7r_79",
-  "laterally-extensive-unit": "_laterally-extensive-unit_jnc7r_85",
-  "strat-col-span": "_strat-col-span_jnc7r_85",
-  "column-container": "_column-container_jnc7r_89",
-  "map-expanded-button": "_map-expanded-button_jnc7r_94",
-  "main-panel": "_main-panel_jnc7r_101",
-  "main-chart": "_main-chart_jnc7r_108",
-  "correlation-chart-inner": "_correlation-chart-inner_jnc7r_112",
-  "age-axis-container": "_age-axis-container_jnc7r_118"
+  "unit-details-panel": "_unit-details-panel_17ryg_31",
+  "main-area": "_main-area_17ryg_31",
+  "correlation-map": "_correlation-map_17ryg_46",
+  "correlation-diagram": "_correlation-diagram_17ryg_68",
+  "package": "_package_17ryg_76",
+  "package-overlay": "_package-overlay_17ryg_79",
+  "laterally-extensive-unit": "_laterally-extensive-unit_17ryg_85",
+  "strat-col-span": "_strat-col-span_17ryg_85",
+  "column-container": "_column-container_17ryg_89",
+  "map-expanded-button": "_map-expanded-button_17ryg_94",
+  "main-panel": "_main-panel_17ryg_101",
+  "main-chart": "_main-chart_17ryg_108",
+  "correlation-chart-inner": "_correlation-chart-inner_17ryg_114",
+  "age-axis-container": "_age-axis-container_17ryg_122",
+  "column-header-spacer": "_column-header-spacer_17ryg_135",
+  "column-header-row": "_column-header-row_17ryg_141",
+  "column-header-cell": "_column-header-cell_17ryg_152"
 };
 let h = h__default.default.styled(styles);
 Object.assign(h, styles);

package/dist/correlation-chart/main.module.sass.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/correlation-chart/main.module.sass.js

@@ -1,26 +1,29 @@
 import h$1 from "@macrostrat/hyper";
-const assistant = "_assistant_jnc7r_26";
+const assistant = "_assistant_17ryg_26";
 const styles = {
-  "page-header": "_page-header_jnc7r_1",
-  "diagram-container": "_diagram-container_jnc7r_8",
-  "map-inset": "_map-inset_jnc7r_14",
-  "column-selection-map": "_column-selection-map_jnc7r_14",
-  "map-expanded": "_map-expanded_jnc7r_22",
+  "page-header": "_page-header_17ryg_1",
+  "diagram-container": "_diagram-container_17ryg_8",
+  "map-inset": "_map-inset_17ryg_14",
+  "column-selection-map": "_column-selection-map_17ryg_14",
+  "map-expanded": "_map-expanded_17ryg_22",
   assistant,
-  "unit-details-panel": "_unit-details-panel_jnc7r_31",
-  "main-area": "_main-area_jnc7r_31",
-  "correlation-map": "_correlation-map_jnc7r_46",
-  "correlation-diagram": "_correlation-diagram_jnc7r_68",
-  "package": "_package_jnc7r_76",
-  "package-overlay": "_package-overlay_jnc7r_79",
-  "laterally-extensive-unit": "_laterally-extensive-unit_jnc7r_85",
-  "strat-col-span": "_strat-col-span_jnc7r_85",
-  "column-container": "_column-container_jnc7r_89",
-  "map-expanded-button": "_map-expanded-button_jnc7r_94",
-  "main-panel": "_main-panel_jnc7r_101",
-  "main-chart": "_main-chart_jnc7r_108",
-  "correlation-chart-inner": "_correlation-chart-inner_jnc7r_112",
-  "age-axis-container": "_age-axis-container_jnc7r_118"
+  "unit-details-panel": "_unit-details-panel_17ryg_31",
+  "main-area": "_main-area_17ryg_31",
+  "correlation-map": "_correlation-map_17ryg_46",
+  "correlation-diagram": "_correlation-diagram_17ryg_68",
+  "package": "_package_17ryg_76",
+  "package-overlay": "_package-overlay_17ryg_79",
+  "laterally-extensive-unit": "_laterally-extensive-unit_17ryg_85",
+  "strat-col-span": "_strat-col-span_17ryg_85",
+  "column-container": "_column-container_17ryg_89",
+  "map-expanded-button": "_map-expanded-button_17ryg_94",
+  "main-panel": "_main-panel_17ryg_101",
+  "main-chart": "_main-chart_17ryg_108",
+  "correlation-chart-inner": "_correlation-chart-inner_17ryg_114",
+  "age-axis-container": "_age-axis-container_17ryg_122",
+  "column-header-spacer": "_column-header-spacer_17ryg_135",
+  "column-header-row": "_column-header-row_17ryg_141",
+  "column-header-cell": "_column-header-cell_17ryg_152"
 };
 let h = h$1.styled(styles);
 Object.assign(h, styles);

package/dist/correlation-chart/main.module.sass.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/correlation-chart/prepare-data.cjs

@@ -6,7 +6,6 @@ require("@macrostrat/stratigraphy-utils");
 const utils = require("../prepare-units/utils.cjs");
 const helpers = require("../prepare-units/helpers.cjs");
 function buildCorrelationChartData(columns, settings) {
-  console.log(settings);
   const {
     mergeSections = utils.MergeSectionsMode.OVERLAPPING,
     targetUnitHeight,

package/dist/correlation-chart/prepare-data.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"prepare-data.cjs","sources":["../../src/correlation-chart/prepare-data.ts"],"sourcesContent":["import { CompositeStratigraphicScaleInfo } from \"../age-axis\";\nimport { ColumnAxisType } from \"@macrostrat/column-components\";\nimport { type ColumnGeoJSONRecord, UnitLong } from \"@macrostrat/api-types\";\nimport {\n  MergeSectionsMode,\n  PrepareColumnOptions,\n  prepareColumnUnits,\n  preprocessUnits,\n} from \"../prepare-units\";\nimport { mergeAgeRanges } from \"@macrostrat/stratigraphy-utils\";\nimport { PackageLayoutData } from \"../prepare-units/types\";\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\ninterface ColumnData {\n  columnID: number;\n  units: UnitLong[];\n}\n\nexport interface CorrelationChartSettings extends Omit<\n  PrepareColumnOptions,\n  \"axisType\"\n> {\n  targetUnitHeight?: number;\n}\n\nexport interface CorrelationChartData {\n  packages: MultiColumnPackageData[];\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  nColumns: number;\n}\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\nexport function buildCorrelationChartData(\n  columns: ColumnData[],\n  settings: CorrelationChartSettings,\n): CorrelationChartData {\n  console.log(settings);\n  const {\n    mergeSections = MergeSectionsMode.OVERLAPPING,\n    targetUnitHeight,\n    ...rest\n  } = settings;\n\n  const opts: PrepareColumnOptions = {\n    axisType: ColumnAxisType.AGE,\n    targetUnitHeight,\n    mergeSections,\n    ...rest,\n  };\n\n  if (columns.length == 0) {\n    return null;\n  }\n\n  // Flatten the units array to pretend that all units are in the same column\n  const _units = columns.map((d) => d.units).flat();\n\n  const columnIDs = columns.map((d) => d.columnID);\n\n  const preparedUnits = prepareColumnUnits(_units, opts);\n\n  const { sections, totalHeight } = preparedUnits;\n\n  const scaleInfo: CompositeStratigraphicScaleInfo = {\n    axisType: ColumnAxisType.AGE,\n    totalHeight,\n    packages: sections.map((d) => d.scaleInfo),\n  };\n\n  const packages = sections.map((d) => {\n    return separateColumns(d, columnIDs);\n  });\n\n  return { scaleInfo, packages, nColumns: columnIDs.length };\n}\n\ninterface UnitGroup {\n  b_age: number;\n  t_age: number;\n  strat_name_id: number;\n  strat_name_long: string;\n  units: (UnitLong | null)[];\n}\n\nexport interface UnitGroupBox extends UnitGroup {\n  units: UnitLong[];\n  startCol: number;\n  endCol: number;\n}\n\ninterface ColumnExt {\n  columnID: number;\n  units: UnitLong[];\n}\n\ninterface MultiColumnPackageData {\n  columnData: ColumnExt[];\n  bestPixelScale?: number;\n  b_age: number;\n  t_age: number;\n}\n\nexport function findLaterallyExtensiveUnits(\n  pkg: MultiColumnPackageData,\n): UnitGroup[] {\n  const { columnData, b_age, t_age } = pkg;\n  // Group units by strat_name_id\n  const unitIndex = new Map<number, Map<number, UnitLong>>();\n  for (const column of columnData) {\n    const { units } = column;\n    for (const unit of units) {\n      if (unit.strat_name_id == null) continue;\n      if (!unitIndex.has(unit.strat_name_id)) {\n        unitIndex.set(unit.strat_name_id, new Map());\n      }\n      unitIndex.get(unit.strat_name_id).set(column.columnID, unit);\n    }\n  }\n\n  // Prepare grouped units for rendering\n  const unitGroups: UnitGroup[] = [];\n  for (const [strat_name_id, unitIndex0] of unitIndex) {\n    const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);\n    const filteredUnits = units.filter((d) => d != null);\n    const [t_age, b_age] = mergeAgeRanges(\n      filteredUnits.map((d) => [d.t_age, d.b_age]),\n    );\n    if (filteredUnits.length <= 1) continue;\n\n    unitGroups.push({\n      b_age,\n      t_age,\n      strat_name_id,\n      strat_name_long: filteredUnits[0].strat_name_long,\n      units,\n    });\n  }\n\n  return unitGroups;\n}\n\nexport function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {\n  const { strat_name_long, strat_name_id, units } = pkg;\n  const boxes: UnitGroupBox[] = [];\n  let currentBox: UnitGroupBox = null;\n  for (let i = 0; i < units.length; i++) {\n    const unit = units[i];\n    if (unit == null) {\n      if (currentBox != null) {\n        boxes.push(currentBox);\n        currentBox = null;\n      }\n      continue;\n    }\n    if (currentBox == null) {\n      currentBox = {\n        startCol: i,\n        endCol: i,\n        strat_name_id,\n        strat_name_long,\n        t_age: unit.t_age,\n        b_age: unit.b_age,\n        units: [],\n      };\n    } else {\n      currentBox.endCol = i;\n    }\n    currentBox.units.push(unit);\n  }\n  return boxes;\n}\n\nfunction separateColumns(\n  pkg: PackageLayoutData,\n  columnIDs: number[],\n): MultiColumnPackageData {\n  /** Separate columns by col_id */\n  const { units, t_age, b_age } = pkg;\n\n  return {\n    columnData: columnIDs.map((d) => {\n      const u1 = units.filter((unit) => unit.col_id == d);\n      u1.sort((a, b) => a.t_age - b.t_age);\n      return {\n        columnID: d,\n        // Ensure that the units correctly show overlap\n        units: preprocessUnits(\n          {\n            ...pkg,\n            units: u1,\n          },\n          ColumnAxisType.AGE,\n        ),\n      };\n    }),\n    bestPixelScale: pkg.scaleInfo.pixelScale,\n    t_age,\n    b_age,\n  };\n}\n\nexport function columnGeoJSONRecordToColumnIdentifier(\n  col: ColumnGeoJSONRecord,\n): ColumnIdentifier {\n  return {\n    col_id: col.properties.col_id,\n    col_name: col.properties.col_name,\n    project_id: col.properties.project_id,\n  };\n}\n"],"names":["MergeSectionsMode","ColumnAxisType","prepareColumnUnits","preprocessUnits"],"mappings":";;;;;;;AA0CO,SAAS,0BACd,SACA,UACsB;AACtB,UAAQ,IAAI,QAAQ;AACpB,QAAM;AAAA,IACJ,gBAAgBA,MAAAA,kBAAkB;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAA6B;AAAA,IACjC,UAAUC,iBAAAA,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,MAAI,QAAQ,UAAU,GAAG;AACvB,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAA;AAE3C,QAAM,YAAY,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ;AAE/C,QAAM,gBAAgBC,MAAAA,mBAAmB,QAAQ,IAAI;AAErD,QAAM,EAAE,UAAU,YAAA,IAAgB;AAElC,QAAM,YAA6C;AAAA,IACjD,UAAUD,iBAAAA,eAAe;AAAA,IACzB;AAAA,IACA,UAAU,SAAS,IAAI,CAAC,MAAM,EAAE,SAAS;AAAA,EAAA;AAG3C,QAAM,WAAW,SAAS,IAAI,CAAC,MAAM;AACnC,WAAO,gBAAgB,GAAG,SAAS;AAAA,EACrC,CAAC;AAED,SAAO,EAAE,WAAW,UAAU,UAAU,UAAU,OAAA;AACpD;AAkGA,SAAS,gBACP,KACA,WACwB;AAExB,QAAM,EAAE,OAAO,OAAO,MAAA,IAAU;AAEhC,SAAO;AAAA,IACL,YAAY,UAAU,IAAI,CAAC,MAAM;AAC/B,YAAM,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC;AAClD,SAAG,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACnC,aAAO;AAAA,QACL,UAAU;AAAA;AAAA,QAEV,OAAOE,QAAAA;AAAAA,UACL;AAAA,YACE,GAAG;AAAA,YACH,OAAO;AAAA,UAAA;AAAA,UAETF,gCAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAgB,IAAI,UAAU;AAAA,IAC9B;AAAA,IACA;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"prepare-data.cjs","sources":["../../src/correlation-chart/prepare-data.ts"],"sourcesContent":["import { CompositeStratigraphicScaleInfo } from \"../age-axis\";\nimport { ColumnAxisType } from \"@macrostrat/column-components\";\nimport { type ColumnGeoJSONRecord, UnitLong } from \"@macrostrat/api-types\";\nimport {\n  MergeSectionsMode,\n  PrepareColumnOptions,\n  prepareColumnUnits,\n  preprocessUnits,\n} from \"../prepare-units\";\nimport { mergeAgeRanges } from \"@macrostrat/stratigraphy-utils\";\nimport { PackageLayoutData } from \"../prepare-units/types\";\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\ninterface ColumnData {\n  columnID: number;\n  units: UnitLong[];\n}\n\nexport interface CorrelationChartSettings extends Omit<\n  PrepareColumnOptions,\n  \"axisType\"\n> {\n  targetUnitHeight?: number;\n}\n\nexport interface CorrelationChartData {\n  packages: MultiColumnPackageData[];\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  nColumns: number;\n}\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\nexport function buildCorrelationChartData(\n  columns: ColumnData[],\n  settings: CorrelationChartSettings,\n): CorrelationChartData {\n  const {\n    mergeSections = MergeSectionsMode.OVERLAPPING,\n    targetUnitHeight,\n    ...rest\n  } = settings;\n\n  const opts: PrepareColumnOptions = {\n    axisType: ColumnAxisType.AGE,\n    targetUnitHeight,\n    mergeSections,\n    ...rest,\n  };\n\n  if (columns.length == 0) {\n    return null;\n  }\n\n  // Flatten the units array to pretend that all units are in the same column\n  const _units = columns.map((d) => d.units).flat();\n\n  const columnIDs = columns.map((d) => d.columnID);\n\n  const preparedUnits = prepareColumnUnits(_units, opts);\n\n  const { sections, totalHeight } = preparedUnits;\n\n  const scaleInfo: CompositeStratigraphicScaleInfo = {\n    axisType: ColumnAxisType.AGE,\n    totalHeight,\n    packages: sections.map((d) => d.scaleInfo),\n  };\n\n  const packages = sections.map((d) => {\n    return separateColumns(d, columnIDs);\n  });\n\n  return { scaleInfo, packages, nColumns: columnIDs.length };\n}\n\ninterface UnitGroup {\n  b_age: number;\n  t_age: number;\n  strat_name_id: number;\n  strat_name_long: string;\n  units: (UnitLong | null)[];\n}\n\nexport interface UnitGroupBox extends UnitGroup {\n  units: UnitLong[];\n  startCol: number;\n  endCol: number;\n}\n\ninterface ColumnExt {\n  columnID: number;\n  units: UnitLong[];\n}\n\ninterface MultiColumnPackageData {\n  columnData: ColumnExt[];\n  bestPixelScale?: number;\n  b_age: number;\n  t_age: number;\n}\n\nexport function findLaterallyExtensiveUnits(\n  pkg: MultiColumnPackageData,\n): UnitGroup[] {\n  const { columnData, b_age, t_age } = pkg;\n  // Group units by strat_name_id\n  const unitIndex = new Map<number, Map<number, UnitLong>>();\n  for (const column of columnData) {\n    const { units } = column;\n    for (const unit of units) {\n      if (unit.strat_name_id == null) continue;\n      if (!unitIndex.has(unit.strat_name_id)) {\n        unitIndex.set(unit.strat_name_id, new Map());\n      }\n      unitIndex.get(unit.strat_name_id).set(column.columnID, unit);\n    }\n  }\n\n  // Prepare grouped units for rendering\n  const unitGroups: UnitGroup[] = [];\n  for (const [strat_name_id, unitIndex0] of unitIndex) {\n    const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);\n    const filteredUnits = units.filter((d) => d != null);\n    const [t_age, b_age] = mergeAgeRanges(\n      filteredUnits.map((d) => [d.t_age, d.b_age]),\n    );\n    if (filteredUnits.length <= 1) continue;\n\n    unitGroups.push({\n      b_age,\n      t_age,\n      strat_name_id,\n      strat_name_long: filteredUnits[0].strat_name_long,\n      units,\n    });\n  }\n\n  return unitGroups;\n}\n\nexport function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {\n  const { strat_name_long, strat_name_id, units } = pkg;\n  const boxes: UnitGroupBox[] = [];\n  let currentBox: UnitGroupBox = null;\n  for (let i = 0; i < units.length; i++) {\n    const unit = units[i];\n    if (unit == null) {\n      if (currentBox != null) {\n        boxes.push(currentBox);\n        currentBox = null;\n      }\n      continue;\n    }\n    if (currentBox == null) {\n      currentBox = {\n        startCol: i,\n        endCol: i,\n        strat_name_id,\n        strat_name_long,\n        t_age: unit.t_age,\n        b_age: unit.b_age,\n        units: [],\n      };\n    } else {\n      currentBox.endCol = i;\n    }\n    currentBox.units.push(unit);\n  }\n  return boxes;\n}\n\nfunction separateColumns(\n  pkg: PackageLayoutData,\n  columnIDs: number[],\n): MultiColumnPackageData {\n  /** Separate columns by col_id */\n  const { units, t_age, b_age } = pkg;\n\n  return {\n    columnData: columnIDs.map((d) => {\n      const u1 = units.filter((unit) => unit.col_id == d);\n      u1.sort((a, b) => a.t_age - b.t_age);\n      return {\n        columnID: d,\n        // Ensure that the units correctly show overlap\n        units: preprocessUnits(\n          {\n            ...pkg,\n            units: u1,\n          },\n          ColumnAxisType.AGE,\n        ),\n      };\n    }),\n    bestPixelScale: pkg.scaleInfo.pixelScale,\n    t_age,\n    b_age,\n  };\n}\n\nexport function columnGeoJSONRecordToColumnIdentifier(\n  col: ColumnGeoJSONRecord,\n): ColumnIdentifier {\n  return {\n    col_id: col.properties.col_id,\n    col_name: col.properties.col_name,\n    project_id: col.properties.project_id,\n  };\n}\n"],"names":["MergeSectionsMode","ColumnAxisType","prepareColumnUnits","preprocessUnits"],"mappings":";;;;;;;AA0CO,SAAS,0BACd,SACA,UACsB;AACtB,QAAM;AAAA,IACJ,gBAAgBA,MAAAA,kBAAkB;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAA6B;AAAA,IACjC,UAAUC,iBAAAA,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,MAAI,QAAQ,UAAU,GAAG;AACvB,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAA;AAE3C,QAAM,YAAY,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ;AAE/C,QAAM,gBAAgBC,MAAAA,mBAAmB,QAAQ,IAAI;AAErD,QAAM,EAAE,UAAU,YAAA,IAAgB;AAElC,QAAM,YAA6C;AAAA,IACjD,UAAUD,iBAAAA,eAAe;AAAA,IACzB;AAAA,IACA,UAAU,SAAS,IAAI,CAAC,MAAM,EAAE,SAAS;AAAA,EAAA;AAG3C,QAAM,WAAW,SAAS,IAAI,CAAC,MAAM;AACnC,WAAO,gBAAgB,GAAG,SAAS;AAAA,EACrC,CAAC;AAED,SAAO,EAAE,WAAW,UAAU,UAAU,UAAU,OAAA;AACpD;AAkGA,SAAS,gBACP,KACA,WACwB;AAExB,QAAM,EAAE,OAAO,OAAO,MAAA,IAAU;AAEhC,SAAO;AAAA,IACL,YAAY,UAAU,IAAI,CAAC,MAAM;AAC/B,YAAM,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC;AAClD,SAAG,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACnC,aAAO;AAAA,QACL,UAAU;AAAA;AAAA,QAEV,OAAOE,QAAAA;AAAAA,UACL;AAAA,YACE,GAAG;AAAA,YACH,OAAO;AAAA,UAAA;AAAA,UAETF,gCAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAgB,IAAI,UAAU;AAAA,IAC9B;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/correlation-chart/prepare-data.js

@@ -4,7 +4,6 @@ import "@macrostrat/stratigraphy-utils";
 import { MergeSectionsMode } from "../prepare-units/utils.js";
 import { preprocessUnits } from "../prepare-units/helpers.js";
 function buildCorrelationChartData(columns, settings) {
-  console.log(settings);
   const {
     mergeSections = MergeSectionsMode.OVERLAPPING,
     targetUnitHeight,

package/dist/correlation-chart/prepare-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"prepare-data.js","sources":["../../src/correlation-chart/prepare-data.ts"],"sourcesContent":["import { CompositeStratigraphicScaleInfo } from \"../age-axis\";\nimport { ColumnAxisType } from \"@macrostrat/column-components\";\nimport { type ColumnGeoJSONRecord, UnitLong } from \"@macrostrat/api-types\";\nimport {\n  MergeSectionsMode,\n  PrepareColumnOptions,\n  prepareColumnUnits,\n  preprocessUnits,\n} from \"../prepare-units\";\nimport { mergeAgeRanges } from \"@macrostrat/stratigraphy-utils\";\nimport { PackageLayoutData } from \"../prepare-units/types\";\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\ninterface ColumnData {\n  columnID: number;\n  units: UnitLong[];\n}\n\nexport interface CorrelationChartSettings extends Omit<\n  PrepareColumnOptions,\n  \"axisType\"\n> {\n  targetUnitHeight?: number;\n}\n\nexport interface CorrelationChartData {\n  packages: MultiColumnPackageData[];\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  nColumns: number;\n}\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\nexport function buildCorrelationChartData(\n  columns: ColumnData[],\n  settings: CorrelationChartSettings,\n): CorrelationChartData {\n  console.log(settings);\n  const {\n    mergeSections = MergeSectionsMode.OVERLAPPING,\n    targetUnitHeight,\n    ...rest\n  } = settings;\n\n  const opts: PrepareColumnOptions = {\n    axisType: ColumnAxisType.AGE,\n    targetUnitHeight,\n    mergeSections,\n    ...rest,\n  };\n\n  if (columns.length == 0) {\n    return null;\n  }\n\n  // Flatten the units array to pretend that all units are in the same column\n  const _units = columns.map((d) => d.units).flat();\n\n  const columnIDs = columns.map((d) => d.columnID);\n\n  const preparedUnits = prepareColumnUnits(_units, opts);\n\n  const { sections, totalHeight } = preparedUnits;\n\n  const scaleInfo: CompositeStratigraphicScaleInfo = {\n    axisType: ColumnAxisType.AGE,\n    totalHeight,\n    packages: sections.map((d) => d.scaleInfo),\n  };\n\n  const packages = sections.map((d) => {\n    return separateColumns(d, columnIDs);\n  });\n\n  return { scaleInfo, packages, nColumns: columnIDs.length };\n}\n\ninterface UnitGroup {\n  b_age: number;\n  t_age: number;\n  strat_name_id: number;\n  strat_name_long: string;\n  units: (UnitLong | null)[];\n}\n\nexport interface UnitGroupBox extends UnitGroup {\n  units: UnitLong[];\n  startCol: number;\n  endCol: number;\n}\n\ninterface ColumnExt {\n  columnID: number;\n  units: UnitLong[];\n}\n\ninterface MultiColumnPackageData {\n  columnData: ColumnExt[];\n  bestPixelScale?: number;\n  b_age: number;\n  t_age: number;\n}\n\nexport function findLaterallyExtensiveUnits(\n  pkg: MultiColumnPackageData,\n): UnitGroup[] {\n  const { columnData, b_age, t_age } = pkg;\n  // Group units by strat_name_id\n  const unitIndex = new Map<number, Map<number, UnitLong>>();\n  for (const column of columnData) {\n    const { units } = column;\n    for (const unit of units) {\n      if (unit.strat_name_id == null) continue;\n      if (!unitIndex.has(unit.strat_name_id)) {\n        unitIndex.set(unit.strat_name_id, new Map());\n      }\n      unitIndex.get(unit.strat_name_id).set(column.columnID, unit);\n    }\n  }\n\n  // Prepare grouped units for rendering\n  const unitGroups: UnitGroup[] = [];\n  for (const [strat_name_id, unitIndex0] of unitIndex) {\n    const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);\n    const filteredUnits = units.filter((d) => d != null);\n    const [t_age, b_age] = mergeAgeRanges(\n      filteredUnits.map((d) => [d.t_age, d.b_age]),\n    );\n    if (filteredUnits.length <= 1) continue;\n\n    unitGroups.push({\n      b_age,\n      t_age,\n      strat_name_id,\n      strat_name_long: filteredUnits[0].strat_name_long,\n      units,\n    });\n  }\n\n  return unitGroups;\n}\n\nexport function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {\n  const { strat_name_long, strat_name_id, units } = pkg;\n  const boxes: UnitGroupBox[] = [];\n  let currentBox: UnitGroupBox = null;\n  for (let i = 0; i < units.length; i++) {\n    const unit = units[i];\n    if (unit == null) {\n      if (currentBox != null) {\n        boxes.push(currentBox);\n        currentBox = null;\n      }\n      continue;\n    }\n    if (currentBox == null) {\n      currentBox = {\n        startCol: i,\n        endCol: i,\n        strat_name_id,\n        strat_name_long,\n        t_age: unit.t_age,\n        b_age: unit.b_age,\n        units: [],\n      };\n    } else {\n      currentBox.endCol = i;\n    }\n    currentBox.units.push(unit);\n  }\n  return boxes;\n}\n\nfunction separateColumns(\n  pkg: PackageLayoutData,\n  columnIDs: number[],\n): MultiColumnPackageData {\n  /** Separate columns by col_id */\n  const { units, t_age, b_age } = pkg;\n\n  return {\n    columnData: columnIDs.map((d) => {\n      const u1 = units.filter((unit) => unit.col_id == d);\n      u1.sort((a, b) => a.t_age - b.t_age);\n      return {\n        columnID: d,\n        // Ensure that the units correctly show overlap\n        units: preprocessUnits(\n          {\n            ...pkg,\n            units: u1,\n          },\n          ColumnAxisType.AGE,\n        ),\n      };\n    }),\n    bestPixelScale: pkg.scaleInfo.pixelScale,\n    t_age,\n    b_age,\n  };\n}\n\nexport function columnGeoJSONRecordToColumnIdentifier(\n  col: ColumnGeoJSONRecord,\n): ColumnIdentifier {\n  return {\n    col_id: col.properties.col_id,\n    col_name: col.properties.col_name,\n    project_id: col.properties.project_id,\n  };\n}\n"],"names":[],"mappings":";;;;;AA0CO,SAAS,0BACd,SACA,UACsB;AACtB,UAAQ,IAAI,QAAQ;AACpB,QAAM;AAAA,IACJ,gBAAgB,kBAAkB;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAA6B;AAAA,IACjC,UAAU,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,MAAI,QAAQ,UAAU,GAAG;AACvB,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAA;AAE3C,QAAM,YAAY,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ;AAE/C,QAAM,gBAAgB,mBAAmB,QAAQ,IAAI;AAErD,QAAM,EAAE,UAAU,YAAA,IAAgB;AAElC,QAAM,YAA6C;AAAA,IACjD,UAAU,eAAe;AAAA,IACzB;AAAA,IACA,UAAU,SAAS,IAAI,CAAC,MAAM,EAAE,SAAS;AAAA,EAAA;AAG3C,QAAM,WAAW,SAAS,IAAI,CAAC,MAAM;AACnC,WAAO,gBAAgB,GAAG,SAAS;AAAA,EACrC,CAAC;AAED,SAAO,EAAE,WAAW,UAAU,UAAU,UAAU,OAAA;AACpD;AAkGA,SAAS,gBACP,KACA,WACwB;AAExB,QAAM,EAAE,OAAO,OAAO,MAAA,IAAU;AAEhC,SAAO;AAAA,IACL,YAAY,UAAU,IAAI,CAAC,MAAM;AAC/B,YAAM,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC;AAClD,SAAG,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACnC,aAAO;AAAA,QACL,UAAU;AAAA;AAAA,QAEV,OAAO;AAAA,UACL;AAAA,YACE,GAAG;AAAA,YACH,OAAO;AAAA,UAAA;AAAA,UAET,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAgB,IAAI,UAAU;AAAA,IAC9B;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"prepare-data.js","sources":["../../src/correlation-chart/prepare-data.ts"],"sourcesContent":["import { CompositeStratigraphicScaleInfo } from \"../age-axis\";\nimport { ColumnAxisType } from \"@macrostrat/column-components\";\nimport { type ColumnGeoJSONRecord, UnitLong } from \"@macrostrat/api-types\";\nimport {\n  MergeSectionsMode,\n  PrepareColumnOptions,\n  prepareColumnUnits,\n  preprocessUnits,\n} from \"../prepare-units\";\nimport { mergeAgeRanges } from \"@macrostrat/stratigraphy-utils\";\nimport { PackageLayoutData } from \"../prepare-units/types\";\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\ninterface ColumnData {\n  columnID: number;\n  units: UnitLong[];\n}\n\nexport interface CorrelationChartSettings extends Omit<\n  PrepareColumnOptions,\n  \"axisType\"\n> {\n  targetUnitHeight?: number;\n}\n\nexport interface CorrelationChartData {\n  packages: MultiColumnPackageData[];\n  scaleInfo: CompositeStratigraphicScaleInfo;\n  nColumns: number;\n}\n\nexport interface ColumnIdentifier {\n  col_id: number;\n  col_name: string;\n  project_id: number;\n}\n\nexport function buildCorrelationChartData(\n  columns: ColumnData[],\n  settings: CorrelationChartSettings,\n): CorrelationChartData {\n  const {\n    mergeSections = MergeSectionsMode.OVERLAPPING,\n    targetUnitHeight,\n    ...rest\n  } = settings;\n\n  const opts: PrepareColumnOptions = {\n    axisType: ColumnAxisType.AGE,\n    targetUnitHeight,\n    mergeSections,\n    ...rest,\n  };\n\n  if (columns.length == 0) {\n    return null;\n  }\n\n  // Flatten the units array to pretend that all units are in the same column\n  const _units = columns.map((d) => d.units).flat();\n\n  const columnIDs = columns.map((d) => d.columnID);\n\n  const preparedUnits = prepareColumnUnits(_units, opts);\n\n  const { sections, totalHeight } = preparedUnits;\n\n  const scaleInfo: CompositeStratigraphicScaleInfo = {\n    axisType: ColumnAxisType.AGE,\n    totalHeight,\n    packages: sections.map((d) => d.scaleInfo),\n  };\n\n  const packages = sections.map((d) => {\n    return separateColumns(d, columnIDs);\n  });\n\n  return { scaleInfo, packages, nColumns: columnIDs.length };\n}\n\ninterface UnitGroup {\n  b_age: number;\n  t_age: number;\n  strat_name_id: number;\n  strat_name_long: string;\n  units: (UnitLong | null)[];\n}\n\nexport interface UnitGroupBox extends UnitGroup {\n  units: UnitLong[];\n  startCol: number;\n  endCol: number;\n}\n\ninterface ColumnExt {\n  columnID: number;\n  units: UnitLong[];\n}\n\ninterface MultiColumnPackageData {\n  columnData: ColumnExt[];\n  bestPixelScale?: number;\n  b_age: number;\n  t_age: number;\n}\n\nexport function findLaterallyExtensiveUnits(\n  pkg: MultiColumnPackageData,\n): UnitGroup[] {\n  const { columnData, b_age, t_age } = pkg;\n  // Group units by strat_name_id\n  const unitIndex = new Map<number, Map<number, UnitLong>>();\n  for (const column of columnData) {\n    const { units } = column;\n    for (const unit of units) {\n      if (unit.strat_name_id == null) continue;\n      if (!unitIndex.has(unit.strat_name_id)) {\n        unitIndex.set(unit.strat_name_id, new Map());\n      }\n      unitIndex.get(unit.strat_name_id).set(column.columnID, unit);\n    }\n  }\n\n  // Prepare grouped units for rendering\n  const unitGroups: UnitGroup[] = [];\n  for (const [strat_name_id, unitIndex0] of unitIndex) {\n    const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);\n    const filteredUnits = units.filter((d) => d != null);\n    const [t_age, b_age] = mergeAgeRanges(\n      filteredUnits.map((d) => [d.t_age, d.b_age]),\n    );\n    if (filteredUnits.length <= 1) continue;\n\n    unitGroups.push({\n      b_age,\n      t_age,\n      strat_name_id,\n      strat_name_long: filteredUnits[0].strat_name_long,\n      units,\n    });\n  }\n\n  return unitGroups;\n}\n\nexport function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {\n  const { strat_name_long, strat_name_id, units } = pkg;\n  const boxes: UnitGroupBox[] = [];\n  let currentBox: UnitGroupBox = null;\n  for (let i = 0; i < units.length; i++) {\n    const unit = units[i];\n    if (unit == null) {\n      if (currentBox != null) {\n        boxes.push(currentBox);\n        currentBox = null;\n      }\n      continue;\n    }\n    if (currentBox == null) {\n      currentBox = {\n        startCol: i,\n        endCol: i,\n        strat_name_id,\n        strat_name_long,\n        t_age: unit.t_age,\n        b_age: unit.b_age,\n        units: [],\n      };\n    } else {\n      currentBox.endCol = i;\n    }\n    currentBox.units.push(unit);\n  }\n  return boxes;\n}\n\nfunction separateColumns(\n  pkg: PackageLayoutData,\n  columnIDs: number[],\n): MultiColumnPackageData {\n  /** Separate columns by col_id */\n  const { units, t_age, b_age } = pkg;\n\n  return {\n    columnData: columnIDs.map((d) => {\n      const u1 = units.filter((unit) => unit.col_id == d);\n      u1.sort((a, b) => a.t_age - b.t_age);\n      return {\n        columnID: d,\n        // Ensure that the units correctly show overlap\n        units: preprocessUnits(\n          {\n            ...pkg,\n            units: u1,\n          },\n          ColumnAxisType.AGE,\n        ),\n      };\n    }),\n    bestPixelScale: pkg.scaleInfo.pixelScale,\n    t_age,\n    b_age,\n  };\n}\n\nexport function columnGeoJSONRecordToColumnIdentifier(\n  col: ColumnGeoJSONRecord,\n): ColumnIdentifier {\n  return {\n    col_id: col.properties.col_id,\n    col_name: col.properties.col_name,\n    project_id: col.properties.project_id,\n  };\n}\n"],"names":[],"mappings":";;;;;AA0CO,SAAS,0BACd,SACA,UACsB;AACtB,QAAM;AAAA,IACJ,gBAAgB,kBAAkB;AAAA,IAClC;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAA6B;AAAA,IACjC,UAAU,eAAe;AAAA,IACzB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA;AAGL,MAAI,QAAQ,UAAU,GAAG;AACvB,WAAO;AAAA,EACT;AAGA,QAAM,SAAS,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAA;AAE3C,QAAM,YAAY,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ;AAE/C,QAAM,gBAAgB,mBAAmB,QAAQ,IAAI;AAErD,QAAM,EAAE,UAAU,YAAA,IAAgB;AAElC,QAAM,YAA6C;AAAA,IACjD,UAAU,eAAe;AAAA,IACzB;AAAA,IACA,UAAU,SAAS,IAAI,CAAC,MAAM,EAAE,SAAS;AAAA,EAAA;AAG3C,QAAM,WAAW,SAAS,IAAI,CAAC,MAAM;AACnC,WAAO,gBAAgB,GAAG,SAAS;AAAA,EACrC,CAAC;AAED,SAAO,EAAE,WAAW,UAAU,UAAU,UAAU,OAAA;AACpD;AAkGA,SAAS,gBACP,KACA,WACwB;AAExB,QAAM,EAAE,OAAO,OAAO,MAAA,IAAU;AAEhC,SAAO;AAAA,IACL,YAAY,UAAU,IAAI,CAAC,MAAM;AAC/B,YAAM,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,UAAU,CAAC;AAClD,SAAG,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACnC,aAAO;AAAA,QACL,UAAU;AAAA;AAAA,QAEV,OAAO;AAAA,UACL;AAAA,YACE,GAAG;AAAA,YACH,OAAO;AAAA,UAAA;AAAA,UAET,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAgB,IAAI,UAAU;AAAA,IAC9B;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/data-provider/unit-selection.cjs

@@ -88,6 +88,9 @@ function useUnitSelectionTarget(unit) {
   const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
   const selectedUnitElement = store.scope.useAtomValue(selectedUnitElementAtom);
+  const selectedStratName = selectedUnit?.strat_name_id;
+  const unitStratName = unit?.strat_name_id;
+  const linked = !selected && selectedStratName != null && unitStratName != null && unitStratName === selectedStratName;
   const onClick = React.useCallback(
     (evt) => {
       selectUnit?.(unit, ref.current);
@@ -106,7 +109,7 @@ function useUnitSelectionTarget(unit) {
       inline: "nearest"
     });
   }, [selectedUnitElement]);
-  return [ref, selected, onClick];
+  return [ref, selected, onClick, linked];
 }
 function UnitKeyboardNavigation({
   columnData,