@macrostrat/column-views 3.6.1 → 3.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"unit-selection.cjs","sources":["../../src/data-provider/unit-selection.ts"],"sourcesContent":["import type { BaseUnit, UnitLong } from \"@macrostrat/api-types\";\nimport { useKeyHandler } from \"@macrostrat/ui-components\";\nimport { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport type { RectBounds, IUnit } from \"../units/types\";\nimport { atom } from \"jotai\";\nimport { scope, columnUnitsMapAtom } from \"./store\";\nimport {\n  AgeRangeQuantifiedDifference,\n  ageRangeQuantifiedDifference,\n  AgeRangeRelationship,\n} from \"@macrostrat/stratigraphy-utils\";\nimport type { ColumnData } from \"@macrostrat/data-provider\";\n\ntype UnitSelectDispatch = (\n  unit: number | BaseUnit | null,\n  target: HTMLElement | null,\n) => void;\n\nexport function useUnitSelection() {\n  return scope.use(selectedUnitAtom);\n}\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  return scope.useSetAtom(selectedUnitAtom);\n}\n\nexport function useSelectedUnit() {\n  return scope.useAtomValue(selectedUnitAtom);\n}\n\nexport interface ColumnClickData {\n  unitID: number | null;\n  unit: BaseUnit | null;\n  target: HTMLElement | null;\n  height: number;\n  // Room for boundary IDs eventually\n}\n\nexport interface UnitSelectionCallbacks {\n  // It's sort of unfortunate that we need to pass in the column ref here\n  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;\n  onUnitSelected?: <T extends BaseUnit>(\n    unitID: number | null,\n    unit: T | null,\n  ) => void;\n}\n\nexport const allowUnitSelectionAtom = atom<boolean>(true);\n\nexport const selectedUnitIDAtom = atom<number | null>();\nexport const selectedUnitElementAtom = atom<HTMLElement | null>();\n\nconst overlayPositionAtom = atom<RectBounds | null>();\n\nconst columnRefAtom = atom<{ current: HTMLElement | null }>({ current: null });\n\nexport function useColumnRef() {\n  return scope.useAtomValue(columnRefAtom);\n}\n\nconst selectedUnitAtom = atom(\n  (get) => {\n    if (!get(allowUnitSelectionAtom)) return null;\n\n    const unitID = get(selectedUnitIDAtom);\n    if (unitID == null) return null;\n    const unitsMap = get(columnUnitsMapAtom);\n    return unitsMap?.get(unitID) || null;\n  },\n  (\n    get,\n    set,\n    selectedUnit: number | BaseUnit | null,\n    target: HTMLElement | null = null,\n  ): BaseUnit | null => {\n    if (!get(allowUnitSelectionAtom)) {\n      console.error(\"Unit selection is disabled.\");\n      return null;\n    }\n\n    let unitID: number | null = null;\n    let unit: BaseUnit | null = null;\n    if (selectedUnit == null) {\n      unitID = null;\n    } else if (typeof selectedUnit === \"number\") {\n      unitID = selectedUnit;\n    } else if (\"unit_id\" in selectedUnit) {\n      unitID = selectedUnit.unit_id;\n    }\n\n    if (unitID != null) {\n      const unitsMap = get(columnUnitsMapAtom);\n      // Verify that the unit exists in the current colum, else throw\n      if (!unitsMap?.has(unitID)) {\n        throw new Error(\n          `Unit with ID ${unitID} not found in current column units.`,\n        );\n      }\n      unit = unitsMap.get(unitID) ?? null;\n    }\n\n    let overlayPosition: RectBounds | null = null;\n\n    const columnEl = get(columnRefAtom)?.current;\n\n    if (unit != null && columnEl != null && target != null) {\n      const rect = columnEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n      overlayPosition = {\n        x: targetRect.left - rect.left,\n        y: targetRect.top - rect.top,\n        width: targetRect.width,\n        height: targetRect.height,\n      };\n    }\n\n    set(selectedUnitElementAtom, target);\n    set(selectedUnitIDAtom, unitID);\n    set(overlayPositionAtom, overlayPosition);\n\n    return unit;\n  },\n);\n\nexport function useAtomOverlayPosition() {\n  return scope.useAtomValue(overlayPositionAtom);\n}\n\nexport function UnitSelectionCallbackManager({\n  onUnitSelected,\n}: UnitSelectionCallbacks) {\n  const selectedUnit = scope.useAtomValue(selectedUnitAtom);\n  useEffect(() => {\n    onUnitSelected?.(selectedUnit?.unit_id ?? null, selectedUnit ?? null);\n  }, [selectedUnit?.unit_id]);\n  return null;\n}\n\n/** TODO: figure out if onClickedColumn is still needed\n /** This is not the natural place to get positions within the column,\n * but it will work for now.\nif (props.onClickedColumn) {\n  // Infer height from top and bottom height of unit (because that's passed back with the call)\n  //const py = event.y;\n  //const [bottom, top] = getUnitHeightRange(unit, axisType);\n  //const height = Math.abs(bottom - top);\n\n  const columnClickData: ColumnClickData = {\n    unitID: unit?.unit_id,\n    unit,\n    target,\n    height: el?.getBoundingClientRect().height || 0,\n  };\n  props.onClickedColumn(columnClickData, event);\n}*/\n\nexport function useUnitSelectionTarget(\n  unit: IUnit,\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {\n  const ref = useRef<HTMLElement>(null);\n  const [selectedUnit, selectUnit] = useUnitSelection();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      selectUnit?.(unit, ref.current);\n      evt.stopPropagation();\n    },\n    [unit, selectUnit],\n  );\n\n  useEffect(() => {\n    // Sync selection with unit element...\n    if (!selected) return;\n    selectUnit?.(unit, ref.current);\n  }, [ref.current, selected, selectUnit]);\n\n  useEffect(() => {\n    // Scroll the unit into view\n    selectedUnitElement?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selectedUnitElement]);\n\n  return [ref, selected, onClick];\n}\n\nexport function UnitKeyboardNavigation({\n  columnData,\n  units,\n  allowHorizontalNavigation,\n}: {\n  columnData?: ColumnData[];\n  units?: UnitLong[];\n  allowHorizontalNavigation?: boolean;\n}) {\n  if (units == null && columnData == null) {\n    throw new Error(\"Either units or columnData must be provided.\");\n  }\n\n  let _columnData: ColumnData[] = useMemo(() => {\n    if (columnData != null) return columnData;\n    // Build column data from units\n    const colMap = new Map<number, UnitLong[]>();\n    for (const unit of units!) {\n      if (!colMap.has(unit.col_id)) {\n        colMap.set(unit.col_id, []);\n      }\n      colMap.get(unit.col_id)!.push(unit);\n    }\n    const cols: ColumnData[] = [];\n    for (const [colID, units] of colMap) {\n      cols.push({ columnID: colID, units });\n    }\n    // Sort columns by columnID\n    cols.sort((a, b) => a.columnID - b.columnID);\n    return cols;\n  }, [columnData, units]);\n\n  // Default to allowing horizontal navigation only if columnData is provided\n  const _allowHorizontalNavigation =\n    allowHorizontalNavigation ?? columnData != null;\n\n  const selectedUnit = useSelectedUnit() as UnitLong | null;\n  const selectUnit = useUnitSelectionDispatch();\n\n  const keyMap: Record<number, Direction> = {\n    38: \"up\",\n    40: \"down\",\n  };\n  if (_allowHorizontalNavigation) {\n    keyMap[37] = \"left\";\n    keyMap[39] = \"right\";\n  }\n\n  useKeyHandler(\n    (event) => {\n      const direction = keyMap[event.keyCode];\n      if (direction == null) return;\n      const nextUnit = getBestUnit(_columnData, selectedUnit, direction);\n      if (nextUnit == null) return;\n      selectUnit(nextUnit, null);\n      event.stopPropagation();\n    },\n    [_columnData, selectedUnit],\n  );\n  return null;\n}\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getBestUnit(\n  columnData: ColumnData[],\n  targetUnit: UnitLong,\n  direction: Direction,\n): UnitLong | null {\n  const thisColIndex = columnData.findIndex(\n    (col) => col.columnID === targetUnit.col_id,\n  );\n  if (thisColIndex === -1) return null;\n\n  // If up or down, stay in the same column\n  if (direction === \"up\" || direction === \"down\") {\n    const units = columnData[thisColIndex].units;\n    const ix = units.findIndex((unit) => unit.unit_id === targetUnit.unit_id);\n    if (ix === -1) return null;\n    if (direction === \"up\") {\n      return units[ix - 1] || null;\n    } else {\n      return units[ix + 1] || null;\n    }\n  }\n\n  // If left or right, move to adjacent column\n  let adjacentColIndex: number;\n  if (direction === \"left\") {\n    adjacentColIndex =\n      (thisColIndex - 1 + columnData.length) % columnData.length;\n  } else {\n    adjacentColIndex = (thisColIndex + 1) % columnData.length;\n  }\n\n  const adjacentColUnits = columnData[adjacentColIndex].units;\n  return getMostOverlappingUnit(targetUnit, adjacentColUnits);\n}\n\ntype UnitAgeRangeRelationship = AgeRangeQuantifiedDifference & {\n  unit: UnitLong;\n};\n\nfunction getMostOverlappingUnit(\n  targetUnit: UnitLong,\n  candidateUnits: UnitLong[],\n): UnitLong | null {\n  const targetAgeRange = [targetUnit.b_age, targetUnit.t_age];\n\n  const overlaps: UnitAgeRangeRelationship[] = [];\n  for (const candidate of candidateUnits) {\n    const candidateAgeRange = [candidate.b_age, candidate.t_age];\n\n    const rel = ageRangeQuantifiedDifference(targetAgeRange, candidateAgeRange);\n    if (rel.type === AgeRangeRelationship.Identical) {\n      return candidate;\n    }\n    overlaps.push({ ...rel, unit: candidate });\n  }\n\n  let bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Containing,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Contained,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.PartialOverlap,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Disjoint,\n  );\n  bestOverlaps.sort((a, b) => a.distance - b.distance);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n  return null;\n}\n"],"names":["scope","atom","columnUnitsMapAtom","useEffect","useRef","useCallback","useMemo","units","useKeyHandler","ageRangeQuantifiedDifference","AgeRangeRelationship"],"mappings":"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"}
+{"version":3,"file":"unit-selection.cjs","sources":["../../src/data-provider/unit-selection.ts"],"sourcesContent":["import type { BaseUnit, UnitLong } from \"@macrostrat/api-types\";\nimport { useKeyHandler } from \"@macrostrat/ui-components\";\nimport { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport type { RectBounds, IUnit } from \"../units/types\";\nimport { atom } from \"jotai\";\nimport { scope, columnUnitsMapAtom } from \"./store\";\nimport {\n  AgeRangeQuantifiedDifference,\n  ageRangeQuantifiedDifference,\n  AgeRangeRelationship,\n} from \"@macrostrat/stratigraphy-utils\";\nimport type { ColumnData } from \"@macrostrat/data-provider\";\n\ntype UnitSelectDispatch = (\n  unit: number | BaseUnit | null,\n  target: HTMLElement | null,\n) => void;\n\nexport function useUnitSelection() {\n  return scope.use(selectedUnitAtom);\n}\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  return scope.useSetAtom(selectedUnitAtom);\n}\n\nexport function useSelectedUnit() {\n  return scope.useAtomValue(selectedUnitAtom);\n}\n\nexport interface ColumnClickData {\n  unitID: number | null;\n  unit: BaseUnit | null;\n  target: HTMLElement | null;\n  height: number;\n  // Room for boundary IDs eventually\n}\n\nexport interface UnitSelectionCallbacks {\n  // It's sort of unfortunate that we need to pass in the column ref here\n  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;\n  onUnitSelected?: <T extends BaseUnit>(\n    unitID: number | null,\n    unit: T | null,\n  ) => void;\n}\n\nexport const allowUnitSelectionAtom = atom<boolean>(true);\n\nexport const selectedUnitIDAtom = atom<number | null>();\nexport const selectedUnitElementAtom = atom<HTMLElement | null>();\n\nconst overlayPositionAtom = atom<RectBounds | null>();\n\nconst columnRefAtom = atom<{ current: HTMLElement | null }>({ current: null });\n\nexport function useColumnRef() {\n  return scope.useAtomValue(columnRefAtom);\n}\n\nconst selectedUnitAtom = atom(\n  (get) => {\n    if (!get(allowUnitSelectionAtom)) return null;\n\n    const unitID = get(selectedUnitIDAtom);\n    if (unitID == null) return null;\n    const unitsMap = get(columnUnitsMapAtom);\n    return unitsMap?.get(unitID) || null;\n  },\n  (\n    get,\n    set,\n    selectedUnit: number | BaseUnit | null,\n    target: HTMLElement | null = null,\n  ): BaseUnit | null => {\n    if (!get(allowUnitSelectionAtom)) {\n      console.error(\"Unit selection is disabled.\");\n      return null;\n    }\n\n    let unitID: number | null = null;\n    let unit: BaseUnit | null = null;\n    if (selectedUnit == null) {\n      unitID = null;\n    } else if (typeof selectedUnit === \"number\") {\n      unitID = selectedUnit;\n    } else if (\"unit_id\" in selectedUnit) {\n      unitID = selectedUnit.unit_id;\n    }\n\n    if (unitID != null) {\n      const unitsMap = get(columnUnitsMapAtom);\n      // Verify that the unit exists in the current colum, else throw\n      if (!unitsMap?.has(unitID)) {\n        throw new Error(\n          `Unit with ID ${unitID} not found in current column units.`,\n        );\n      }\n      unit = unitsMap.get(unitID) ?? null;\n    }\n\n    let overlayPosition: RectBounds | null = null;\n\n    const columnEl = get(columnRefAtom)?.current;\n\n    if (unit != null && columnEl != null && target != null) {\n      const rect = columnEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n      overlayPosition = {\n        x: targetRect.left - rect.left,\n        y: targetRect.top - rect.top,\n        width: targetRect.width,\n        height: targetRect.height,\n      };\n    }\n\n    set(selectedUnitElementAtom, target);\n    set(selectedUnitIDAtom, unitID);\n    set(overlayPositionAtom, overlayPosition);\n\n    return unit;\n  },\n);\n\nexport function useAtomOverlayPosition() {\n  return scope.useAtomValue(overlayPositionAtom);\n}\n\nexport function UnitSelectionCallbackManager({\n  onUnitSelected,\n}: UnitSelectionCallbacks) {\n  const selectedUnit = scope.useAtomValue(selectedUnitAtom);\n  useEffect(() => {\n    onUnitSelected?.(selectedUnit?.unit_id ?? null, selectedUnit ?? null);\n  }, [selectedUnit?.unit_id]);\n  return null;\n}\n\n/** TODO: figure out if onClickedColumn is still needed\n /** This is not the natural place to get positions within the column,\n * but it will work for now.\nif (props.onClickedColumn) {\n  // Infer height from top and bottom height of unit (because that's passed back with the call)\n  //const py = event.y;\n  //const [bottom, top] = getUnitHeightRange(unit, axisType);\n  //const height = Math.abs(bottom - top);\n\n  const columnClickData: ColumnClickData = {\n    unitID: unit?.unit_id,\n    unit,\n    target,\n    height: el?.getBoundingClientRect().height || 0,\n  };\n  props.onClickedColumn(columnClickData, event);\n}*/\n\nexport function useUnitSelectionTarget(\n  unit: IUnit,\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void, boolean] {\n  const ref = useRef<HTMLElement>(null);\n  const [selectedUnit, selectUnit] = useUnitSelection();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);\n\n  // \"Linked\" units share a stratigraphic name with the selected unit (e.g.\n  // the same formation correlated across columns), but are not the selection\n  // itself. They receive a subtler highlight.\n  const selectedStratName = (selectedUnit as any)?.strat_name_id;\n  const unitStratName = (unit as any)?.strat_name_id;\n  const linked =\n    !selected &&\n    selectedStratName != null &&\n    unitStratName != null &&\n    unitStratName === selectedStratName;\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      selectUnit?.(unit, ref.current);\n      evt.stopPropagation();\n    },\n    [unit, selectUnit],\n  );\n\n  useEffect(() => {\n    // Sync selection with unit element...\n    if (!selected) return;\n    selectUnit?.(unit, ref.current);\n  }, [ref.current, selected, selectUnit]);\n\n  useEffect(() => {\n    // Scroll the unit into view\n    selectedUnitElement?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selectedUnitElement]);\n\n  return [ref, selected, onClick, linked];\n}\n\nexport function UnitKeyboardNavigation({\n  columnData,\n  units,\n  allowHorizontalNavigation,\n}: {\n  columnData?: ColumnData[];\n  units?: UnitLong[];\n  allowHorizontalNavigation?: boolean;\n}) {\n  if (units == null && columnData == null) {\n    throw new Error(\"Either units or columnData must be provided.\");\n  }\n\n  let _columnData: ColumnData[] = useMemo(() => {\n    if (columnData != null) return columnData;\n    // Build column data from units\n    const colMap = new Map<number, UnitLong[]>();\n    for (const unit of units!) {\n      if (!colMap.has(unit.col_id)) {\n        colMap.set(unit.col_id, []);\n      }\n      colMap.get(unit.col_id)!.push(unit);\n    }\n    const cols: ColumnData[] = [];\n    for (const [colID, units] of colMap) {\n      cols.push({ columnID: colID, units });\n    }\n    // Sort columns by columnID\n    cols.sort((a, b) => a.columnID - b.columnID);\n    return cols;\n  }, [columnData, units]);\n\n  // Default to allowing horizontal navigation only if columnData is provided\n  const _allowHorizontalNavigation =\n    allowHorizontalNavigation ?? columnData != null;\n\n  const selectedUnit = useSelectedUnit() as UnitLong | null;\n  const selectUnit = useUnitSelectionDispatch();\n\n  const keyMap: Record<number, Direction> = {\n    38: \"up\",\n    40: \"down\",\n  };\n  if (_allowHorizontalNavigation) {\n    keyMap[37] = \"left\";\n    keyMap[39] = \"right\";\n  }\n\n  useKeyHandler(\n    (event) => {\n      const direction = keyMap[event.keyCode];\n      if (direction == null) return;\n      const nextUnit = getBestUnit(_columnData, selectedUnit, direction);\n      if (nextUnit == null) return;\n      selectUnit(nextUnit, null);\n      event.stopPropagation();\n    },\n    [_columnData, selectedUnit],\n  );\n  return null;\n}\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getBestUnit(\n  columnData: ColumnData[],\n  targetUnit: UnitLong,\n  direction: Direction,\n): UnitLong | null {\n  const thisColIndex = columnData.findIndex(\n    (col) => col.columnID === targetUnit.col_id,\n  );\n  if (thisColIndex === -1) return null;\n\n  // If up or down, stay in the same column\n  if (direction === \"up\" || direction === \"down\") {\n    const units = columnData[thisColIndex].units;\n    const ix = units.findIndex((unit) => unit.unit_id === targetUnit.unit_id);\n    if (ix === -1) return null;\n    if (direction === \"up\") {\n      return units[ix - 1] || null;\n    } else {\n      return units[ix + 1] || null;\n    }\n  }\n\n  // If left or right, move to adjacent column\n  let adjacentColIndex: number;\n  if (direction === \"left\") {\n    adjacentColIndex =\n      (thisColIndex - 1 + columnData.length) % columnData.length;\n  } else {\n    adjacentColIndex = (thisColIndex + 1) % columnData.length;\n  }\n\n  const adjacentColUnits = columnData[adjacentColIndex].units;\n  return getMostOverlappingUnit(targetUnit, adjacentColUnits);\n}\n\ntype UnitAgeRangeRelationship = AgeRangeQuantifiedDifference & {\n  unit: UnitLong;\n};\n\nfunction getMostOverlappingUnit(\n  targetUnit: UnitLong,\n  candidateUnits: UnitLong[],\n): UnitLong | null {\n  const targetAgeRange = [targetUnit.b_age, targetUnit.t_age];\n\n  const overlaps: UnitAgeRangeRelationship[] = [];\n  for (const candidate of candidateUnits) {\n    const candidateAgeRange = [candidate.b_age, candidate.t_age];\n\n    const rel = ageRangeQuantifiedDifference(targetAgeRange, candidateAgeRange);\n    if (rel.type === AgeRangeRelationship.Identical) {\n      return candidate;\n    }\n    overlaps.push({ ...rel, unit: candidate });\n  }\n\n  let bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Containing,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Contained,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.PartialOverlap,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Disjoint,\n  );\n  bestOverlaps.sort((a, b) => a.distance - b.distance);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n  return null;\n}\n"],"names":["scope","atom","columnUnitsMapAtom","useEffect","useRef","useCallback","useMemo","units","useKeyHandler","ageRangeQuantifiedDifference","AgeRangeRelationship"],"mappings":"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"}

package/dist/data-provider/unit-selection.d.ts

@@ -44,7 +44,7 @@ if (props.onClickedColumn) {
   };
   props.onClickedColumn(columnClickData, event);
 }*/
-export declare function useUnitSelectionTarget(unit: IUnit): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void];
+export declare function useUnitSelectionTarget(unit: IUnit): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void, boolean];
 export declare function UnitKeyboardNavigation({ columnData, units, allowHorizontalNavigation, }: {
     columnData?: ColumnData[];
     units?: UnitLong[];

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

@@ -86,6 +86,9 @@ function useUnitSelectionTarget(unit) {
   const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
   const selectedUnitElement = 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 = useCallback(
     (evt) => {
       selectUnit?.(unit, ref.current);
@@ -104,7 +107,7 @@ function useUnitSelectionTarget(unit) {
       inline: "nearest"
     });
   }, [selectedUnitElement]);
-  return [ref, selected, onClick];
+  return [ref, selected, onClick, linked];
 }
 function UnitKeyboardNavigation({
   columnData,

package/dist/data-provider/unit-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"unit-selection.js","sources":["../../src/data-provider/unit-selection.ts"],"sourcesContent":["import type { BaseUnit, UnitLong } from \"@macrostrat/api-types\";\nimport { useKeyHandler } from \"@macrostrat/ui-components\";\nimport { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport type { RectBounds, IUnit } from \"../units/types\";\nimport { atom } from \"jotai\";\nimport { scope, columnUnitsMapAtom } from \"./store\";\nimport {\n  AgeRangeQuantifiedDifference,\n  ageRangeQuantifiedDifference,\n  AgeRangeRelationship,\n} from \"@macrostrat/stratigraphy-utils\";\nimport type { ColumnData } from \"@macrostrat/data-provider\";\n\ntype UnitSelectDispatch = (\n  unit: number | BaseUnit | null,\n  target: HTMLElement | null,\n) => void;\n\nexport function useUnitSelection() {\n  return scope.use(selectedUnitAtom);\n}\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  return scope.useSetAtom(selectedUnitAtom);\n}\n\nexport function useSelectedUnit() {\n  return scope.useAtomValue(selectedUnitAtom);\n}\n\nexport interface ColumnClickData {\n  unitID: number | null;\n  unit: BaseUnit | null;\n  target: HTMLElement | null;\n  height: number;\n  // Room for boundary IDs eventually\n}\n\nexport interface UnitSelectionCallbacks {\n  // It's sort of unfortunate that we need to pass in the column ref here\n  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;\n  onUnitSelected?: <T extends BaseUnit>(\n    unitID: number | null,\n    unit: T | null,\n  ) => void;\n}\n\nexport const allowUnitSelectionAtom = atom<boolean>(true);\n\nexport const selectedUnitIDAtom = atom<number | null>();\nexport const selectedUnitElementAtom = atom<HTMLElement | null>();\n\nconst overlayPositionAtom = atom<RectBounds | null>();\n\nconst columnRefAtom = atom<{ current: HTMLElement | null }>({ current: null });\n\nexport function useColumnRef() {\n  return scope.useAtomValue(columnRefAtom);\n}\n\nconst selectedUnitAtom = atom(\n  (get) => {\n    if (!get(allowUnitSelectionAtom)) return null;\n\n    const unitID = get(selectedUnitIDAtom);\n    if (unitID == null) return null;\n    const unitsMap = get(columnUnitsMapAtom);\n    return unitsMap?.get(unitID) || null;\n  },\n  (\n    get,\n    set,\n    selectedUnit: number | BaseUnit | null,\n    target: HTMLElement | null = null,\n  ): BaseUnit | null => {\n    if (!get(allowUnitSelectionAtom)) {\n      console.error(\"Unit selection is disabled.\");\n      return null;\n    }\n\n    let unitID: number | null = null;\n    let unit: BaseUnit | null = null;\n    if (selectedUnit == null) {\n      unitID = null;\n    } else if (typeof selectedUnit === \"number\") {\n      unitID = selectedUnit;\n    } else if (\"unit_id\" in selectedUnit) {\n      unitID = selectedUnit.unit_id;\n    }\n\n    if (unitID != null) {\n      const unitsMap = get(columnUnitsMapAtom);\n      // Verify that the unit exists in the current colum, else throw\n      if (!unitsMap?.has(unitID)) {\n        throw new Error(\n          `Unit with ID ${unitID} not found in current column units.`,\n        );\n      }\n      unit = unitsMap.get(unitID) ?? null;\n    }\n\n    let overlayPosition: RectBounds | null = null;\n\n    const columnEl = get(columnRefAtom)?.current;\n\n    if (unit != null && columnEl != null && target != null) {\n      const rect = columnEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n      overlayPosition = {\n        x: targetRect.left - rect.left,\n        y: targetRect.top - rect.top,\n        width: targetRect.width,\n        height: targetRect.height,\n      };\n    }\n\n    set(selectedUnitElementAtom, target);\n    set(selectedUnitIDAtom, unitID);\n    set(overlayPositionAtom, overlayPosition);\n\n    return unit;\n  },\n);\n\nexport function useAtomOverlayPosition() {\n  return scope.useAtomValue(overlayPositionAtom);\n}\n\nexport function UnitSelectionCallbackManager({\n  onUnitSelected,\n}: UnitSelectionCallbacks) {\n  const selectedUnit = scope.useAtomValue(selectedUnitAtom);\n  useEffect(() => {\n    onUnitSelected?.(selectedUnit?.unit_id ?? null, selectedUnit ?? null);\n  }, [selectedUnit?.unit_id]);\n  return null;\n}\n\n/** TODO: figure out if onClickedColumn is still needed\n /** This is not the natural place to get positions within the column,\n * but it will work for now.\nif (props.onClickedColumn) {\n  // Infer height from top and bottom height of unit (because that's passed back with the call)\n  //const py = event.y;\n  //const [bottom, top] = getUnitHeightRange(unit, axisType);\n  //const height = Math.abs(bottom - top);\n\n  const columnClickData: ColumnClickData = {\n    unitID: unit?.unit_id,\n    unit,\n    target,\n    height: el?.getBoundingClientRect().height || 0,\n  };\n  props.onClickedColumn(columnClickData, event);\n}*/\n\nexport function useUnitSelectionTarget(\n  unit: IUnit,\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {\n  const ref = useRef<HTMLElement>(null);\n  const [selectedUnit, selectUnit] = useUnitSelection();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      selectUnit?.(unit, ref.current);\n      evt.stopPropagation();\n    },\n    [unit, selectUnit],\n  );\n\n  useEffect(() => {\n    // Sync selection with unit element...\n    if (!selected) return;\n    selectUnit?.(unit, ref.current);\n  }, [ref.current, selected, selectUnit]);\n\n  useEffect(() => {\n    // Scroll the unit into view\n    selectedUnitElement?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selectedUnitElement]);\n\n  return [ref, selected, onClick];\n}\n\nexport function UnitKeyboardNavigation({\n  columnData,\n  units,\n  allowHorizontalNavigation,\n}: {\n  columnData?: ColumnData[];\n  units?: UnitLong[];\n  allowHorizontalNavigation?: boolean;\n}) {\n  if (units == null && columnData == null) {\n    throw new Error(\"Either units or columnData must be provided.\");\n  }\n\n  let _columnData: ColumnData[] = useMemo(() => {\n    if (columnData != null) return columnData;\n    // Build column data from units\n    const colMap = new Map<number, UnitLong[]>();\n    for (const unit of units!) {\n      if (!colMap.has(unit.col_id)) {\n        colMap.set(unit.col_id, []);\n      }\n      colMap.get(unit.col_id)!.push(unit);\n    }\n    const cols: ColumnData[] = [];\n    for (const [colID, units] of colMap) {\n      cols.push({ columnID: colID, units });\n    }\n    // Sort columns by columnID\n    cols.sort((a, b) => a.columnID - b.columnID);\n    return cols;\n  }, [columnData, units]);\n\n  // Default to allowing horizontal navigation only if columnData is provided\n  const _allowHorizontalNavigation =\n    allowHorizontalNavigation ?? columnData != null;\n\n  const selectedUnit = useSelectedUnit() as UnitLong | null;\n  const selectUnit = useUnitSelectionDispatch();\n\n  const keyMap: Record<number, Direction> = {\n    38: \"up\",\n    40: \"down\",\n  };\n  if (_allowHorizontalNavigation) {\n    keyMap[37] = \"left\";\n    keyMap[39] = \"right\";\n  }\n\n  useKeyHandler(\n    (event) => {\n      const direction = keyMap[event.keyCode];\n      if (direction == null) return;\n      const nextUnit = getBestUnit(_columnData, selectedUnit, direction);\n      if (nextUnit == null) return;\n      selectUnit(nextUnit, null);\n      event.stopPropagation();\n    },\n    [_columnData, selectedUnit],\n  );\n  return null;\n}\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getBestUnit(\n  columnData: ColumnData[],\n  targetUnit: UnitLong,\n  direction: Direction,\n): UnitLong | null {\n  const thisColIndex = columnData.findIndex(\n    (col) => col.columnID === targetUnit.col_id,\n  );\n  if (thisColIndex === -1) return null;\n\n  // If up or down, stay in the same column\n  if (direction === \"up\" || direction === \"down\") {\n    const units = columnData[thisColIndex].units;\n    const ix = units.findIndex((unit) => unit.unit_id === targetUnit.unit_id);\n    if (ix === -1) return null;\n    if (direction === \"up\") {\n      return units[ix - 1] || null;\n    } else {\n      return units[ix + 1] || null;\n    }\n  }\n\n  // If left or right, move to adjacent column\n  let adjacentColIndex: number;\n  if (direction === \"left\") {\n    adjacentColIndex =\n      (thisColIndex - 1 + columnData.length) % columnData.length;\n  } else {\n    adjacentColIndex = (thisColIndex + 1) % columnData.length;\n  }\n\n  const adjacentColUnits = columnData[adjacentColIndex].units;\n  return getMostOverlappingUnit(targetUnit, adjacentColUnits);\n}\n\ntype UnitAgeRangeRelationship = AgeRangeQuantifiedDifference & {\n  unit: UnitLong;\n};\n\nfunction getMostOverlappingUnit(\n  targetUnit: UnitLong,\n  candidateUnits: UnitLong[],\n): UnitLong | null {\n  const targetAgeRange = [targetUnit.b_age, targetUnit.t_age];\n\n  const overlaps: UnitAgeRangeRelationship[] = [];\n  for (const candidate of candidateUnits) {\n    const candidateAgeRange = [candidate.b_age, candidate.t_age];\n\n    const rel = ageRangeQuantifiedDifference(targetAgeRange, candidateAgeRange);\n    if (rel.type === AgeRangeRelationship.Identical) {\n      return candidate;\n    }\n    overlaps.push({ ...rel, unit: candidate });\n  }\n\n  let bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Containing,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Contained,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.PartialOverlap,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Disjoint,\n  );\n  bestOverlaps.sort((a, b) => a.distance - b.distance);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n  return null;\n}\n"],"names":["units"],"mappings":"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"}
+{"version":3,"file":"unit-selection.js","sources":["../../src/data-provider/unit-selection.ts"],"sourcesContent":["import type { BaseUnit, UnitLong } from \"@macrostrat/api-types\";\nimport { useKeyHandler } from \"@macrostrat/ui-components\";\nimport { useEffect, useRef, useCallback, useMemo } from \"react\";\nimport type { RectBounds, IUnit } from \"../units/types\";\nimport { atom } from \"jotai\";\nimport { scope, columnUnitsMapAtom } from \"./store\";\nimport {\n  AgeRangeQuantifiedDifference,\n  ageRangeQuantifiedDifference,\n  AgeRangeRelationship,\n} from \"@macrostrat/stratigraphy-utils\";\nimport type { ColumnData } from \"@macrostrat/data-provider\";\n\ntype UnitSelectDispatch = (\n  unit: number | BaseUnit | null,\n  target: HTMLElement | null,\n) => void;\n\nexport function useUnitSelection() {\n  return scope.use(selectedUnitAtom);\n}\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  return scope.useSetAtom(selectedUnitAtom);\n}\n\nexport function useSelectedUnit() {\n  return scope.useAtomValue(selectedUnitAtom);\n}\n\nexport interface ColumnClickData {\n  unitID: number | null;\n  unit: BaseUnit | null;\n  target: HTMLElement | null;\n  height: number;\n  // Room for boundary IDs eventually\n}\n\nexport interface UnitSelectionCallbacks {\n  // It's sort of unfortunate that we need to pass in the column ref here\n  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;\n  onUnitSelected?: <T extends BaseUnit>(\n    unitID: number | null,\n    unit: T | null,\n  ) => void;\n}\n\nexport const allowUnitSelectionAtom = atom<boolean>(true);\n\nexport const selectedUnitIDAtom = atom<number | null>();\nexport const selectedUnitElementAtom = atom<HTMLElement | null>();\n\nconst overlayPositionAtom = atom<RectBounds | null>();\n\nconst columnRefAtom = atom<{ current: HTMLElement | null }>({ current: null });\n\nexport function useColumnRef() {\n  return scope.useAtomValue(columnRefAtom);\n}\n\nconst selectedUnitAtom = atom(\n  (get) => {\n    if (!get(allowUnitSelectionAtom)) return null;\n\n    const unitID = get(selectedUnitIDAtom);\n    if (unitID == null) return null;\n    const unitsMap = get(columnUnitsMapAtom);\n    return unitsMap?.get(unitID) || null;\n  },\n  (\n    get,\n    set,\n    selectedUnit: number | BaseUnit | null,\n    target: HTMLElement | null = null,\n  ): BaseUnit | null => {\n    if (!get(allowUnitSelectionAtom)) {\n      console.error(\"Unit selection is disabled.\");\n      return null;\n    }\n\n    let unitID: number | null = null;\n    let unit: BaseUnit | null = null;\n    if (selectedUnit == null) {\n      unitID = null;\n    } else if (typeof selectedUnit === \"number\") {\n      unitID = selectedUnit;\n    } else if (\"unit_id\" in selectedUnit) {\n      unitID = selectedUnit.unit_id;\n    }\n\n    if (unitID != null) {\n      const unitsMap = get(columnUnitsMapAtom);\n      // Verify that the unit exists in the current colum, else throw\n      if (!unitsMap?.has(unitID)) {\n        throw new Error(\n          `Unit with ID ${unitID} not found in current column units.`,\n        );\n      }\n      unit = unitsMap.get(unitID) ?? null;\n    }\n\n    let overlayPosition: RectBounds | null = null;\n\n    const columnEl = get(columnRefAtom)?.current;\n\n    if (unit != null && columnEl != null && target != null) {\n      const rect = columnEl.getBoundingClientRect();\n      const targetRect = target.getBoundingClientRect();\n      overlayPosition = {\n        x: targetRect.left - rect.left,\n        y: targetRect.top - rect.top,\n        width: targetRect.width,\n        height: targetRect.height,\n      };\n    }\n\n    set(selectedUnitElementAtom, target);\n    set(selectedUnitIDAtom, unitID);\n    set(overlayPositionAtom, overlayPosition);\n\n    return unit;\n  },\n);\n\nexport function useAtomOverlayPosition() {\n  return scope.useAtomValue(overlayPositionAtom);\n}\n\nexport function UnitSelectionCallbackManager({\n  onUnitSelected,\n}: UnitSelectionCallbacks) {\n  const selectedUnit = scope.useAtomValue(selectedUnitAtom);\n  useEffect(() => {\n    onUnitSelected?.(selectedUnit?.unit_id ?? null, selectedUnit ?? null);\n  }, [selectedUnit?.unit_id]);\n  return null;\n}\n\n/** TODO: figure out if onClickedColumn is still needed\n /** This is not the natural place to get positions within the column,\n * but it will work for now.\nif (props.onClickedColumn) {\n  // Infer height from top and bottom height of unit (because that's passed back with the call)\n  //const py = event.y;\n  //const [bottom, top] = getUnitHeightRange(unit, axisType);\n  //const height = Math.abs(bottom - top);\n\n  const columnClickData: ColumnClickData = {\n    unitID: unit?.unit_id,\n    unit,\n    target,\n    height: el?.getBoundingClientRect().height || 0,\n  };\n  props.onClickedColumn(columnClickData, event);\n}*/\n\nexport function useUnitSelectionTarget(\n  unit: IUnit,\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void, boolean] {\n  const ref = useRef<HTMLElement>(null);\n  const [selectedUnit, selectUnit] = useUnitSelection();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n  const selectedUnitElement = scope.useAtomValue(selectedUnitElementAtom);\n\n  // \"Linked\" units share a stratigraphic name with the selected unit (e.g.\n  // the same formation correlated across columns), but are not the selection\n  // itself. They receive a subtler highlight.\n  const selectedStratName = (selectedUnit as any)?.strat_name_id;\n  const unitStratName = (unit as any)?.strat_name_id;\n  const linked =\n    !selected &&\n    selectedStratName != null &&\n    unitStratName != null &&\n    unitStratName === selectedStratName;\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      selectUnit?.(unit, ref.current);\n      evt.stopPropagation();\n    },\n    [unit, selectUnit],\n  );\n\n  useEffect(() => {\n    // Sync selection with unit element...\n    if (!selected) return;\n    selectUnit?.(unit, ref.current);\n  }, [ref.current, selected, selectUnit]);\n\n  useEffect(() => {\n    // Scroll the unit into view\n    selectedUnitElement?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selectedUnitElement]);\n\n  return [ref, selected, onClick, linked];\n}\n\nexport function UnitKeyboardNavigation({\n  columnData,\n  units,\n  allowHorizontalNavigation,\n}: {\n  columnData?: ColumnData[];\n  units?: UnitLong[];\n  allowHorizontalNavigation?: boolean;\n}) {\n  if (units == null && columnData == null) {\n    throw new Error(\"Either units or columnData must be provided.\");\n  }\n\n  let _columnData: ColumnData[] = useMemo(() => {\n    if (columnData != null) return columnData;\n    // Build column data from units\n    const colMap = new Map<number, UnitLong[]>();\n    for (const unit of units!) {\n      if (!colMap.has(unit.col_id)) {\n        colMap.set(unit.col_id, []);\n      }\n      colMap.get(unit.col_id)!.push(unit);\n    }\n    const cols: ColumnData[] = [];\n    for (const [colID, units] of colMap) {\n      cols.push({ columnID: colID, units });\n    }\n    // Sort columns by columnID\n    cols.sort((a, b) => a.columnID - b.columnID);\n    return cols;\n  }, [columnData, units]);\n\n  // Default to allowing horizontal navigation only if columnData is provided\n  const _allowHorizontalNavigation =\n    allowHorizontalNavigation ?? columnData != null;\n\n  const selectedUnit = useSelectedUnit() as UnitLong | null;\n  const selectUnit = useUnitSelectionDispatch();\n\n  const keyMap: Record<number, Direction> = {\n    38: \"up\",\n    40: \"down\",\n  };\n  if (_allowHorizontalNavigation) {\n    keyMap[37] = \"left\";\n    keyMap[39] = \"right\";\n  }\n\n  useKeyHandler(\n    (event) => {\n      const direction = keyMap[event.keyCode];\n      if (direction == null) return;\n      const nextUnit = getBestUnit(_columnData, selectedUnit, direction);\n      if (nextUnit == null) return;\n      selectUnit(nextUnit, null);\n      event.stopPropagation();\n    },\n    [_columnData, selectedUnit],\n  );\n  return null;\n}\n\ntype Direction = \"up\" | \"down\" | \"left\" | \"right\";\n\nfunction getBestUnit(\n  columnData: ColumnData[],\n  targetUnit: UnitLong,\n  direction: Direction,\n): UnitLong | null {\n  const thisColIndex = columnData.findIndex(\n    (col) => col.columnID === targetUnit.col_id,\n  );\n  if (thisColIndex === -1) return null;\n\n  // If up or down, stay in the same column\n  if (direction === \"up\" || direction === \"down\") {\n    const units = columnData[thisColIndex].units;\n    const ix = units.findIndex((unit) => unit.unit_id === targetUnit.unit_id);\n    if (ix === -1) return null;\n    if (direction === \"up\") {\n      return units[ix - 1] || null;\n    } else {\n      return units[ix + 1] || null;\n    }\n  }\n\n  // If left or right, move to adjacent column\n  let adjacentColIndex: number;\n  if (direction === \"left\") {\n    adjacentColIndex =\n      (thisColIndex - 1 + columnData.length) % columnData.length;\n  } else {\n    adjacentColIndex = (thisColIndex + 1) % columnData.length;\n  }\n\n  const adjacentColUnits = columnData[adjacentColIndex].units;\n  return getMostOverlappingUnit(targetUnit, adjacentColUnits);\n}\n\ntype UnitAgeRangeRelationship = AgeRangeQuantifiedDifference & {\n  unit: UnitLong;\n};\n\nfunction getMostOverlappingUnit(\n  targetUnit: UnitLong,\n  candidateUnits: UnitLong[],\n): UnitLong | null {\n  const targetAgeRange = [targetUnit.b_age, targetUnit.t_age];\n\n  const overlaps: UnitAgeRangeRelationship[] = [];\n  for (const candidate of candidateUnits) {\n    const candidateAgeRange = [candidate.b_age, candidate.t_age];\n\n    const rel = ageRangeQuantifiedDifference(targetAgeRange, candidateAgeRange);\n    if (rel.type === AgeRangeRelationship.Identical) {\n      return candidate;\n    }\n    overlaps.push({ ...rel, unit: candidate });\n  }\n\n  let bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Containing,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Contained,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.PartialOverlap,\n  );\n  bestOverlaps.sort((a, b) => b.overlap - a.overlap);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n\n  bestOverlaps = overlaps.filter(\n    (d) => d.type === AgeRangeRelationship.Disjoint,\n  );\n  bestOverlaps.sort((a, b) => a.distance - b.distance);\n  if (bestOverlaps.length > 0) {\n    return bestOverlaps[0].unit;\n  }\n  return null;\n}\n"],"names":["units"],"mappings":";;;;;AAkBO,SAAS,mBAAmB;AACjC,SAAO,MAAM,IAAI,gBAAgB;AACnC;AAEO,SAAS,2BAA+C;AAC7D,SAAO,MAAM,WAAW,gBAAgB;AAC1C;AAEO,SAAS,kBAAkB;AAChC,SAAO,MAAM,aAAa,gBAAgB;AAC5C;AAmBO,MAAM,yBAAyB,KAAc,IAAI;AAEjD,MAAM,qBAAqB,KAAA;AAC3B,MAAM,0BAA0B,KAAA;AAEvC,MAAM,sBAAsB,KAAA;AAE5B,MAAM,gBAAgB,KAAsC,EAAE,SAAS,MAAM;AAEtE,SAAS,eAAe;AAC7B,SAAO,MAAM,aAAa,aAAa;AACzC;AAEA,MAAM,mBAAmB;AAAA,EACvB,CAAC,QAAQ;AACP,QAAI,CAAC,IAAI,sBAAsB,EAAG,QAAO;AAEzC,UAAM,SAAS,IAAI,kBAAkB;AACrC,QAAI,UAAU,KAAM,QAAO;AAC3B,UAAM,WAAW,IAAI,kBAAkB;AACvC,WAAO,UAAU,IAAI,MAAM,KAAK;AAAA,EAClC;AAAA,EACA,CACE,KACA,KACA,cACA,SAA6B,SACT;AACpB,QAAI,CAAC,IAAI,sBAAsB,GAAG;AAChC,cAAQ,MAAM,6BAA6B;AAC3C,aAAO;AAAA,IACT;AAEA,QAAI,SAAwB;AAC5B,QAAI,OAAwB;AAC5B,QAAI,gBAAgB,MAAM;AACxB,eAAS;AAAA,IACX,WAAW,OAAO,iBAAiB,UAAU;AAC3C,eAAS;AAAA,IACX,WAAW,aAAa,cAAc;AACpC,eAAS,aAAa;AAAA,IACxB;AAEA,QAAI,UAAU,MAAM;AAClB,YAAM,WAAW,IAAI,kBAAkB;AAEvC,UAAI,CAAC,UAAU,IAAI,MAAM,GAAG;AAC1B,cAAM,IAAI;AAAA,UACR,gBAAgB,MAAM;AAAA,QAAA;AAAA,MAE1B;AACA,aAAO,SAAS,IAAI,MAAM,KAAK;AAAA,IACjC;AAEA,QAAI,kBAAqC;AAEzC,UAAM,WAAW,IAAI,aAAa,GAAG;AAErC,QAAI,QAAQ,QAAQ,YAAY,QAAQ,UAAU,MAAM;AACtD,YAAM,OAAO,SAAS,sBAAA;AACtB,YAAM,aAAa,OAAO,sBAAA;AAC1B,wBAAkB;AAAA,QAChB,GAAG,WAAW,OAAO,KAAK;AAAA,QAC1B,GAAG,WAAW,MAAM,KAAK;AAAA,QACzB,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,MAAA;AAAA,IAEvB;AAEA,QAAI,yBAAyB,MAAM;AACnC,QAAI,oBAAoB,MAAM;AAC9B,QAAI,qBAAqB,eAAe;AAExC,WAAO;AAAA,EACT;AACF;AAEO,SAAS,yBAAyB;AACvC,SAAO,MAAM,aAAa,mBAAmB;AAC/C;AAEO,SAAS,6BAA6B;AAAA,EAC3C;AACF,GAA2B;AACzB,QAAM,eAAe,MAAM,aAAa,gBAAgB;AACxD,YAAU,MAAM;AACd,qBAAiB,cAAc,WAAW,MAAM,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,cAAc,OAAO,CAAC;AAC1B,SAAO;AACT;AAoBO,SAAS,uBACd,MACwE;AACxE,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,CAAC,cAAc,UAAU,IAAI,iBAAA;AACnC,QAAM,WAAW,cAAc,WAAW,KAAK;AAC/C,QAAM,sBAAsB,MAAM,aAAa,uBAAuB;AAKtE,QAAM,oBAAqB,cAAsB;AACjD,QAAM,gBAAiB,MAAc;AACrC,QAAM,SACJ,CAAC,YACD,qBAAqB,QACrB,iBAAiB,QACjB,kBAAkB;AAEpB,QAAM,UAAU;AAAA,IACd,CAAC,QAAe;AACd,mBAAa,MAAM,IAAI,OAAO;AAC9B,UAAI,gBAAA;AAAA,IACN;AAAA,IACA,CAAC,MAAM,UAAU;AAAA,EAAA;AAGnB,YAAU,MAAM;AAEd,QAAI,CAAC,SAAU;AACf,iBAAa,MAAM,IAAI,OAAO;AAAA,EAChC,GAAG,CAAC,IAAI,SAAS,UAAU,UAAU,CAAC;AAEtC,YAAU,MAAM;AAEd,yBAAqB,eAAe;AAAA,MAClC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA,CACT;AAAA,EACH,GAAG,CAAC,mBAAmB,CAAC;AAExB,SAAO,CAAC,KAAK,UAAU,SAAS,MAAM;AACxC;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,SAAS,QAAQ,cAAc,MAAM;AACvC,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AAEA,MAAI,cAA4B,QAAQ,MAAM;AAC5C,QAAI,cAAc,KAAM,QAAO;AAE/B,UAAM,6BAAa,IAAA;AACnB,eAAW,QAAQ,OAAQ;AACzB,UAAI,CAAC,OAAO,IAAI,KAAK,MAAM,GAAG;AAC5B,eAAO,IAAI,KAAK,QAAQ,CAAA,CAAE;AAAA,MAC5B;AACA,aAAO,IAAI,KAAK,MAAM,EAAG,KAAK,IAAI;AAAA,IACpC;AACA,UAAM,OAAqB,CAAA;AAC3B,eAAW,CAAC,OAAOA,MAAK,KAAK,QAAQ;AACnC,WAAK,KAAK,EAAE,UAAU,OAAO,OAAAA,QAAO;AAAA,IACtC;AAEA,SAAK,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;AAC3C,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAGtB,QAAM,6BACJ,6BAA6B,cAAc;AAE7C,QAAM,eAAe,gBAAA;AACrB,QAAM,aAAa,yBAAA;AAEnB,QAAM,SAAoC;AAAA,IACxC,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAEN,MAAI,4BAA4B;AAC9B,WAAO,EAAE,IAAI;AACb,WAAO,EAAE,IAAI;AAAA,EACf;AAEA;AAAA,IACE,CAAC,UAAU;AACT,YAAM,YAAY,OAAO,MAAM,OAAO;AACtC,UAAI,aAAa,KAAM;AACvB,YAAM,WAAW,YAAY,aAAa,cAAc,SAAS;AACjE,UAAI,YAAY,KAAM;AACtB,iBAAW,UAAU,IAAI;AACzB,YAAM,gBAAA;AAAA,IACR;AAAA,IACA,CAAC,aAAa,YAAY;AAAA,EAAA;AAE5B,SAAO;AACT;AAIA,SAAS,YACP,YACA,YACA,WACiB;AACjB,QAAM,eAAe,WAAW;AAAA,IAC9B,CAAC,QAAQ,IAAI,aAAa,WAAW;AAAA,EAAA;AAEvC,MAAI,iBAAiB,GAAI,QAAO;AAGhC,MAAI,cAAc,QAAQ,cAAc,QAAQ;AAC9C,UAAM,QAAQ,WAAW,YAAY,EAAE;AACvC,UAAM,KAAK,MAAM,UAAU,CAAC,SAAS,KAAK,YAAY,WAAW,OAAO;AACxE,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,cAAc,MAAM;AACtB,aAAO,MAAM,KAAK,CAAC,KAAK;AAAA,IAC1B,OAAO;AACL,aAAO,MAAM,KAAK,CAAC,KAAK;AAAA,IAC1B;AAAA,EACF;AAGA,MAAI;AACJ,MAAI,cAAc,QAAQ;AACxB,wBACG,eAAe,IAAI,WAAW,UAAU,WAAW;AAAA,EACxD,OAAO;AACL,wBAAoB,eAAe,KAAK,WAAW;AAAA,EACrD;AAEA,QAAM,mBAAmB,WAAW,gBAAgB,EAAE;AACtD,SAAO,uBAAuB,YAAY,gBAAgB;AAC5D;AAMA,SAAS,uBACP,YACA,gBACiB;AACjB,QAAM,iBAAiB,CAAC,WAAW,OAAO,WAAW,KAAK;AAE1D,QAAM,WAAuC,CAAA;AAC7C,aAAW,aAAa,gBAAgB;AACtC,UAAM,oBAAoB,CAAC,UAAU,OAAO,UAAU,KAAK;AAE3D,UAAM,MAAM,6BAA6B,gBAAgB,iBAAiB;AAC1E,QAAI,IAAI,SAAS,qBAAqB,WAAW;AAC/C,aAAO;AAAA,IACT;AACA,aAAS,KAAK,EAAE,GAAG,KAAK,MAAM,WAAW;AAAA,EAC3C;AAEA,MAAI,eAAe,SAAS;AAAA,IAC1B,CAAC,MAAM,EAAE,SAAS,qBAAqB;AAAA,EAAA;AAEzC,eAAa,KAAK,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,OAAO;AACjD,MAAI,aAAa,SAAS,GAAG;AAC3B,WAAO,aAAa,CAAC,EAAE;AAAA,EACzB;AAEA,iBAAe,SAAS;AAAA,IACtB,CAAC,MAAM,EAAE,SAAS,qBAAqB;AAAA,EAAA;AAEzC,eAAa,KAAK,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,OAAO;AACjD,MAAI,aAAa,SAAS,GAAG;AAC3B,WAAO,aAAa,CAAC,EAAE;AAAA,EACzB;AAEA,iBAAe,SAAS;AAAA,IACtB,CAAC,MAAM,EAAE,SAAS,qBAAqB;AAAA,EAAA;AAEzC,eAAa,KAAK,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,OAAO;AACjD,MAAI,aAAa,SAAS,GAAG;AAC3B,WAAO,aAAa,CAAC,EAAE;AAAA,EACzB;AAEA,iBAAe,SAAS;AAAA,IACtB,CAAC,MAAM,EAAE,SAAS,qBAAqB;AAAA,EAAA;AAEzC,eAAa,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;AACnD,MAAI,aAAa,SAAS,GAAG;AAC3B,WAAO,aAAa,CAAC,EAAE;AAAA,EACzB;AACA,SAAO;AACT;"}

package/dist/index.cjs

@@ -10,7 +10,7 @@ const ageRange = require("./unit-details/age-range.cjs");
 const composite = require("./units/composite.cjs");
 const columns = require("./maps/layers/columns.cjs");
 const base = require("./facets/measurements/base.cjs");
-const identifiers = require("./unit-details/identifiers.cjs");
+const dataComponents = require("@macrostrat/data-components");
 const layers = require("./maps/column-navigation/svg/layers.cjs");
 const core = require("./maps/column-correlation/core.cjs");
 const state = require("./maps/column-correlation/state.cjs");
@@ -81,9 +81,18 @@ exports.TruncatedList = base.TruncatedList;
 exports.groupNotesByPixelDistance = base.groupNotesByPixelDistance;
 exports.mergeHeightRanges = base.mergeHeightRanges;
 exports.standardizeMeasurementHeight = base.standardizeMeasurementHeight;
-exports.ClickableText = identifiers.ClickableText;
-exports.Identifier = identifiers.Identifier;
-exports.UnitIdentifier = identifiers.UnitIdentifier;
+Object.defineProperty(exports, "ClickableText", {
+  enumerable: true,
+  get: () => dataComponents.ClickableText
+});
+Object.defineProperty(exports, "Identifier", {
+  enumerable: true,
+  get: () => dataComponents.Identifier
+});
+Object.defineProperty(exports, "UnitIdentifier", {
+  enumerable: true,
+  get: () => dataComponents.UnitIdentifier
+});
 exports.ColumnCenters = layers.ColumnCenters;
 exports.ColumnFeatures = layers.ColumnFeatures;
 exports.ColumnKeyboardNavigation = layers.ColumnKeyboardNavigation;
@@ -92,6 +101,7 @@ exports.CurrentColumn = layers.CurrentColumn;
 exports.MeasurementsLayer = layers.MeasurementsLayer;
 exports.ColumnCorrelationMap = core.ColumnCorrelationMap;
 exports.ColumnCorrelationProvider = state.ColumnCorrelationProvider;
+exports.useColumnMapLink = state.useColumnMapLink;
 exports.useCorrelationMapStore = state.useCorrelationMapStore;
 exports.ColumnHoverInteraction = index$1.ColumnHoverInteraction;
 exports.ColumnNavigationMap = index$1.ColumnNavigationMap;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -8,10 +8,10 @@ import { AgeField, AgeLabel, AgeRange, Duration, IntervalProportions, getAge, ge
 import { AnnotatedUnitsColumn, ColumnNotesProvider, CompositeUnitComponent, CompositeUnitsColumn, LabelTrackerProvider, SectionLabelsColumn, TrackedLabeledUnit } from "./units/composite.js";
 import { BaseColumnsLayer, SelectedColumnOverlay, buildColumnsStyle } from "./maps/layers/columns.js";
 import { BaseMeasurementsColumn, TruncatedList, groupNotesByPixelDistance, mergeHeightRanges, standardizeMeasurementHeight } from "./facets/measurements/base.js";
-import { ClickableText, Identifier, UnitIdentifier } from "./unit-details/identifiers.js";
+import { ClickableText, Identifier, UnitIdentifier } from "@macrostrat/data-components";
 import { ColumnCenters, ColumnFeatures, ColumnKeyboardNavigation, Columns, CurrentColumn, MeasurementsLayer } from "./maps/column-navigation/svg/layers.js";
 import { ColumnCorrelationMap } from "./maps/column-correlation/core.js";
-import { ColumnCorrelationProvider, useCorrelationMapStore } from "./maps/column-correlation/state.js";
+import { ColumnCorrelationProvider, useColumnMapLink, useCorrelationMapStore } from "./maps/column-correlation/state.js";
 import { ColumnHoverInteraction, ColumnNavigationMap, ColumnSelectionManager, ColumnsNavigationLayer } from "./maps/column-navigation/mapbox/index.js";
 import { ColumnNavProvider, useColumnNav } from "./data-provider/column-nav.js";
 import { ColumnNavigationSVGMap, ResizableMapFrame } from "./maps/column-navigation/svg/index.js";
@@ -148,6 +148,7 @@ export {
   stringifyLine,
   unitsOverlap,
   useAtomOverlayPosition,
+  useColumnMapLink,
   useColumnNav,
   useColumnRef,
   useColumnUnitsMap,

package/dist/maps/column-correlation/core.cjs

@@ -24,11 +24,40 @@ function ColumnCorrelationMap(props) {
       h__default.default(ColumnsLayer, { color: columnColor }),
       h__default.default(SelectedColumnsLayer),
       h__default.default(MapClickHandler),
+      h__default.default(ColumnInteractionHandler),
+      h__default.default(HoveredColumnHighlight),
+      h__default.default(ColumnZoomer, { padding }),
       h__default.default(SectionLine, { padding }),
       children
     ]
   );
 }
+function ColumnZoomer({ padding }) {
+  const zoomColumn = state.useCorrelationMapStore((state2) => state2.zoomColumn);
+  const zoomNonce = state.useCorrelationMapStore((state2) => state2.zoomNonce);
+  const columns2 = state.useCorrelationMapStore((state2) => state2.columns);
+  const bounds = React.useMemo(() => {
+    if (zoomColumn == null || columns2 == null) return null;
+    const col = columns2.find((c) => c.properties?.col_id === zoomColumn);
+    if (col?.geometry == null) return null;
+    const b = new mapboxGl.LngLatBounds();
+    forEachCoordinate(col.geometry, (coord) => b.extend(coord));
+    return b.isEmpty() ? null : b;
+  }, [zoomColumn, zoomNonce, columns2]);
+  mapboxReact.useMapEaseTo({ bounds, padding: padding * 2 });
+  return null;
+}
+function forEachCoordinate(geometry, fn) {
+  const walk = (coords) => {
+    if (typeof coords[0] === "number") {
+      fn(coords);
+    } else {
+      for (const c of coords) walk(c);
+    }
+  };
+  if (geometry?.coordinates != null) walk(geometry.coordinates);
+}
+const columnLayers = ["columns-fill", "columns-points"];
 function MapClickHandler() {
   const onClickMap = state.useCorrelationMapStore((state2) => state2.onClickMap);
   mapboxReact.useMapClickHandler(
@@ -39,6 +68,90 @@ function MapClickHandler() {
   );
   return null;
 }
+function ColumnInteractionHandler() {
+  const toggleColumn = state.useCorrelationMapStore((state2) => state2.toggleColumn);
+  const setHoveredColumn = state.useCorrelationMapStore(
+    (state2) => state2.setHoveredColumn
+  );
+  const isManual = state.useCorrelationMapStore(
+    (state2) => state2.selectionMode === "manual"
+  );
+  const hoveredRef = React.useRef(null);
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      if (!isManual) return;
+      const onClick = (e) => {
+        const colID = e.features?.[0]?.properties?.col_id;
+        if (colID != null) toggleColumn(colID);
+      };
+      map.on("click", columnLayers, onClick);
+      return () => map.off("click", columnLayers, onClick);
+    },
+    [isManual, toggleColumn]
+  );
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      const clearHover = () => {
+        if (hoveredRef.current != null) {
+          map.setFeatureState(
+            { source: "columns", id: hoveredRef.current },
+            { hover: false }
+          );
+          hoveredRef.current = null;
+        }
+      };
+      const onMove = (e) => {
+        const f = e.features?.[0];
+        if (f == null) return;
+        if (hoveredRef.current !== f.id) {
+          clearHover();
+          map.setFeatureState({ source: "columns", id: f.id }, { hover: true });
+          hoveredRef.current = f.id;
+        }
+        setHoveredColumn(f.properties?.col_id ?? null);
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const onLeave = () => {
+        clearHover();
+        setHoveredColumn(null);
+        map.getCanvas().style.cursor = "";
+      };
+      map.on("mousemove", columnLayers, onMove);
+      map.on("mouseleave", columnLayers, onLeave);
+      return () => {
+        map.off("mousemove", columnLayers, onMove);
+        map.off("mouseleave", columnLayers, onLeave);
+        clearHover();
+      };
+    },
+    [setHoveredColumn]
+  );
+  return null;
+}
+function HoveredColumnHighlight() {
+  const hoveredColumn = state.useCorrelationMapStore((state2) => state2.hoveredColumn);
+  const columns2 = state.useCorrelationMapStore((state2) => state2.columns);
+  const appliedRef = React.useRef(null);
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      if (appliedRef.current != null) {
+        map.setFeatureState(
+          { source: "columns", id: appliedRef.current },
+          { highlighted: false }
+        );
+        appliedRef.current = null;
+      }
+      if (hoveredColumn == null || columns2 == null) return;
+      const col = columns2.find((c) => c.properties?.col_id === hoveredColumn);
+      const id = col?.id ?? col?.properties?.col_id;
+      if (id == null) return;
+      map.setFeatureState({ source: "columns", id }, { highlighted: true });
+      appliedRef.current = id;
+    },
+    [hoveredColumn, columns2]
+  );
+  return null;
+}
 function SelectedColumnsLayer() {
   mapboxReact.useOverlayStyle(() => selectedColumnsStyle, []);
   const focusedColumns = state.useCorrelationMapStore(
@@ -123,9 +236,14 @@ const lineOfSectionStyle = {
 function SectionLine({ padding }) {
   mapboxReact.useOverlayStyle(() => lineOfSectionStyle, []);
   const focusedLine = state.useCorrelationMapStore((state2) => state2.focusedLine);
+  const focusedColumns = state.useCorrelationMapStore(
+    (state2) => state2.focusedColumns
+  );
   mapboxReact.useMapStyleOperator(
     (map) => {
       if (focusedLine == null) {
+        mapboxUtils.setGeoJSON(map, "crossSectionLine", emptyFeatureCollection);
+        mapboxUtils.setGeoJSON(map, "crossSectionEndpoints", emptyFeatureCollection);
         return;
       }
       const data = {
@@ -151,17 +269,20 @@ function SectionLine({ padding }) {
     [focusedLine]
   );
   const bounds = React.useMemo(() => {
-    if (focusedLine == null || focusedLine?.coordinates.length < 2) {
-      return null;
-    }
-    let bounds2 = new mapboxGl.LngLatBounds();
-    for (let coord of focusedLine.coordinates) {
+    const coords = focusedLine != null && focusedLine.coordinates.length >= 2 ? focusedLine.coordinates : focusedColumns.map((c) => c.properties.centroid.geometry.coordinates);
+    if (coords.length < 2) return null;
+    const bounds2 = new mapboxGl.LngLatBounds();
+    for (const coord of coords) {
       bounds2.extend(coord);
     }
     return bounds2;
-  }, [focusedLine]);
+  }, [focusedLine, focusedColumns]);
   mapboxReact.useMapEaseTo({ bounds, padding, trackResize: true });
   return null;
 }
+const emptyFeatureCollection = {
+  type: "FeatureCollection",
+  features: []
+};
 exports.ColumnCorrelationMap = ColumnCorrelationMap;
 //# sourceMappingURL=core.cjs.map

package/dist/maps/column-correlation/core.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../inset-map\";\nimport { BaseColumnsLayer } from \"../layers\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsLayer, { color: columnColor }),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  useOverlayStyle(() => selectedColumnsStyle, []);\n\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true, color }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n  return h(BaseColumnsLayer, { enabled, color, columns });\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  useOverlayStyle(() => lineOfSectionStyle, []);\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n\n  // Setup focused line\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    if (focusedLine == null || focusedLine?.coordinates.length < 2) {\n      return null;\n    }\n    let bounds = new LngLatBounds();\n    for (let coord of focusedLine.coordinates) {\n      bounds.extend(coord);\n    }\n    return bounds;\n  }, [focusedLine]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n"],"names":["h","InsetMap","useCorrelationMapStore","state","useMapClickHandler","useOverlayStyle","useMapStyleOperator","setGeoJSON","columns","BaseColumnsLayer","buildGeoJSONSource","buildCrossSectionLayers","useMemo","bounds","LngLatBounds","useMapEaseTo"],"mappings":"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"}
+{"version":3,"file":"core.cjs","sources":["../../../src/maps/column-correlation/core.ts"],"sourcesContent":["import {\n  useMapClickHandler,\n  useMapEaseTo,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { LngLatBounds, Style } from \"mapbox-gl\";\nimport h from \"@macrostrat/hyper\";\nimport { Feature, FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo, useRef } from \"react\";\nimport { setGeoJSON, buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\n\nimport { useCorrelationMapStore } from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../inset-map\";\nimport { BaseColumnsLayer } from \"../layers\";\nimport { buildCrossSectionLayers } from \"@macrostrat/map-styles\";\n\nexport interface CorrelationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  columnColor?: string;\n}\n\nexport function ColumnCorrelationMap(props: CorrelationMapProps) {\n  const { padding = 50, children, columnColor, projectID, ...rest } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsLayer, { color: columnColor }),\n      h(SelectedColumnsLayer),\n      h(MapClickHandler),\n      h(ColumnInteractionHandler),\n      h(HoveredColumnHighlight),\n      h(ColumnZoomer, { padding }),\n      h(SectionLine, { padding }),\n      children,\n    ],\n  );\n}\n\nfunction ColumnZoomer({ padding }: { padding: number }) {\n  /** Frame a single column when `zoomColumn` is set (e.g. header click). */\n  const zoomColumn = useCorrelationMapStore((state) => state.zoomColumn);\n  const zoomNonce = useCorrelationMapStore((state) => state.zoomNonce);\n  const columns = useCorrelationMapStore((state) => state.columns);\n\n  const bounds = useMemo(() => {\n    if (zoomColumn == null || columns == null) return null;\n    const col = columns.find((c) => c.properties?.col_id === zoomColumn);\n    if (col?.geometry == null) return null;\n    const b = new LngLatBounds();\n    forEachCoordinate(col.geometry, (coord) => b.extend(coord as [number, number]));\n    return b.isEmpty() ? null : b;\n    // zoomNonce forces a fresh bounds object so repeat clicks re-frame\n  }, [zoomColumn, zoomNonce, columns]);\n\n  useMapEaseTo({ bounds, padding: padding * 2 });\n  return null;\n}\n\nfunction forEachCoordinate(geometry: any, fn: (coord: number[]) => void) {\n  const walk = (coords: any) => {\n    if (typeof coords[0] === \"number\") {\n      fn(coords);\n    } else {\n      for (const c of coords) walk(c);\n    }\n  };\n  if (geometry?.coordinates != null) walk(geometry.coordinates);\n}\n\nconst columnLayers = [\"columns-fill\", \"columns-points\"];\n\nfunction MapClickHandler() {\n  const onClickMap = useCorrelationMapStore((state) => state.onClickMap);\n\n  useMapClickHandler(\n    (e) => {\n      onClickMap(e, { type: \"Point\", coordinates: e.lngLat.toArray() });\n    },\n    [onClickMap],\n  );\n\n  return null;\n}\n\nfunction ColumnInteractionHandler() {\n  /** Per-column click (manual selection) and hover highlighting. */\n  const toggleColumn = useCorrelationMapStore((state) => state.toggleColumn);\n  const setHoveredColumn = useCorrelationMapStore(\n    (state) => state.setHoveredColumn,\n  );\n  const isManual = useCorrelationMapStore(\n    (state) => state.selectionMode === \"manual\",\n  );\n  const hoveredRef = useRef<number | string | null>(null);\n\n  // Click a column to toggle it in/out of the selection (manual mode only)\n  useMapStyleOperator(\n    (map) => {\n      if (!isManual) return;\n      const onClick = (e) => {\n        const colID = e.features?.[0]?.properties?.col_id;\n        if (colID != null) toggleColumn(colID);\n      };\n      map.on(\"click\", columnLayers, onClick);\n      return () => map.off(\"click\", columnLayers, onClick);\n    },\n    [isManual, toggleColumn],\n  );\n\n  // Hover highlighting (via the columns layer's `hover` feature-state)\n  useMapStyleOperator(\n    (map) => {\n      const clearHover = () => {\n        if (hoveredRef.current != null) {\n          map.setFeatureState(\n            { source: \"columns\", id: hoveredRef.current },\n            { hover: false },\n          );\n          hoveredRef.current = null;\n        }\n      };\n      const onMove = (e) => {\n        const f = e.features?.[0];\n        if (f == null) return;\n        if (hoveredRef.current !== f.id) {\n          clearHover();\n          map.setFeatureState({ source: \"columns\", id: f.id }, { hover: true });\n          hoveredRef.current = f.id;\n        }\n        setHoveredColumn(f.properties?.col_id ?? null);\n        map.getCanvas().style.cursor = \"pointer\";\n      };\n      const onLeave = () => {\n        clearHover();\n        setHoveredColumn(null);\n        map.getCanvas().style.cursor = \"\";\n      };\n      map.on(\"mousemove\", columnLayers, onMove);\n      map.on(\"mouseleave\", columnLayers, onLeave);\n      return () => {\n        map.off(\"mousemove\", columnLayers, onMove);\n        map.off(\"mouseleave\", columnLayers, onLeave);\n        clearHover();\n      };\n    },\n    [setHoveredColumn],\n  );\n\n  return null;\n}\n\nfunction HoveredColumnHighlight() {\n  /** Reflects the store's `hoveredColumn` on the map (e.g. when a column is\n   * hovered elsewhere in the UI) using the `highlighted` feature-state. */\n  const hoveredColumn = useCorrelationMapStore((state) => state.hoveredColumn);\n  const columns = useCorrelationMapStore((state) => state.columns);\n  const appliedRef = useRef<number | string | null>(null);\n\n  useMapStyleOperator(\n    (map) => {\n      if (appliedRef.current != null) {\n        map.setFeatureState(\n          { source: \"columns\", id: appliedRef.current },\n          { highlighted: false },\n        );\n        appliedRef.current = null;\n      }\n      if (hoveredColumn == null || columns == null) return;\n      const col = columns.find((c) => c.properties?.col_id === hoveredColumn);\n      const id = (col as any)?.id ?? col?.properties?.col_id;\n      if (id == null) return;\n      map.setFeatureState({ source: \"columns\", id }, { highlighted: true });\n      appliedRef.current = id;\n    },\n    [hoveredColumn, columns],\n  );\n\n  return null;\n}\n\nfunction SelectedColumnsLayer() {\n  useOverlayStyle(() => selectedColumnsStyle, []);\n\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      let features = focusedColumns;\n\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features,\n      };\n\n      const columnCentroidLine: Feature = {\n        type: \"Feature\",\n        geometry: {\n          type: \"LineString\",\n          coordinates: features.map(\n            (col) => col.properties.centroid.geometry.coordinates,\n          ),\n        },\n        properties: {},\n      };\n\n      setGeoJSON(map, \"selected-columns\", data);\n      setGeoJSON(map, \"selected-column-centroids\", {\n        type: \"FeatureCollection\",\n        features: [columnCentroidLine],\n      });\n    },\n    [focusedColumns],\n  );\n  return null;\n}\n\nfunction ColumnsLayer({ enabled = true, color }) {\n  const columns = useCorrelationMapStore((state) => state.columns);\n  return h(BaseColumnsLayer, { enabled, color, columns });\n}\n\nconst selectedColumnsStyle: Style = {\n  version: 8,\n  sources: {\n    \"selected-columns\": buildGeoJSONSource(),\n    \"selected-column-centroids\": buildGeoJSONSource(),\n  },\n  layers: [\n    {\n      id: \"selected-columns-fill\",\n      type: \"fill\",\n      source: \"selected-columns\",\n      paint: {\n        \"fill-color\": \"rgba(255, 0, 0, 0.1)\",\n      },\n    },\n    {\n      id: \"selected-column-centroids-line\",\n      type: \"line\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"line-color\": \"rgba(255, 0, 0, 0.8)\",\n        \"line-width\": 2,\n        \"line-dasharray\": [2, 2],\n      },\n    },\n    {\n      id: \"selected-column-centroids-points\",\n      type: \"circle\",\n      source: \"selected-column-centroids\",\n      paint: {\n        \"circle-radius\": 4,\n        \"circle-color\": \"rgba(255, 0, 0, 0.8)\",\n      },\n    },\n  ],\n};\n\nconst lineOfSectionStyle: Style = {\n  version: 8,\n  sources: {\n    elevationMarker: buildGeoJSONSource(),\n    crossSectionLine: buildGeoJSONSource(),\n    crossSectionEndpoints: buildGeoJSONSource(),\n  },\n  layers: buildCrossSectionLayers(),\n};\n\nfunction SectionLine({ padding }: { padding: number }) {\n  useOverlayStyle(() => lineOfSectionStyle, []);\n  const focusedLine = useCorrelationMapStore((state) => state.focusedLine);\n  const focusedColumns = useCorrelationMapStore(\n    (state) => state.focusedColumns,\n  );\n\n  // Setup focused line (only drawn in line-of-section mode)\n  useMapStyleOperator(\n    (map) => {\n      if (focusedLine == null) {\n        // Clear any previously-drawn line (e.g. after switching to manual mode)\n        setGeoJSON(map, \"crossSectionLine\", emptyFeatureCollection);\n        setGeoJSON(map, \"crossSectionEndpoints\", emptyFeatureCollection);\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: [\n          {\n            type: \"Feature\",\n            geometry: focusedLine,\n            properties: { id: \"focusedLine\" },\n          },\n        ],\n      };\n\n      setGeoJSON(map, \"crossSectionLine\", data);\n      setGeoJSON(map, \"crossSectionEndpoints\", {\n        type: \"FeatureCollection\",\n        features: focusedLine.coordinates.map((coord) => ({\n          type: \"Feature\",\n          geometry: { type: \"Point\", coordinates: coord },\n          properties: {},\n        })),\n      });\n    },\n    [focusedLine],\n  );\n\n  const bounds = useMemo(() => {\n    // In line mode, frame the line; in manual mode, frame the selected columns\n    const coords: number[][] =\n      focusedLine != null && focusedLine.coordinates.length >= 2\n        ? focusedLine.coordinates\n        : focusedColumns.map((c) => c.properties.centroid.geometry.coordinates);\n    if (coords.length < 2) return null;\n    const bounds = new LngLatBounds();\n    for (const coord of coords) {\n      bounds.extend(coord as [number, number]);\n    }\n    return bounds;\n  }, [focusedLine, focusedColumns]);\n\n  useMapEaseTo({ bounds, padding, trackResize: true });\n\n  return null;\n}\n\nconst emptyFeatureCollection: FeatureCollection = {\n  type: \"FeatureCollection\",\n  features: [],\n};\n"],"names":["h","InsetMap","useCorrelationMapStore","state","columns","useMemo","LngLatBounds","useMapEaseTo","useMapClickHandler","useRef","useMapStyleOperator","useOverlayStyle","setGeoJSON","BaseColumnsLayer","buildGeoJSONSource","buildCrossSectionLayers","bounds"],"mappings":"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"}