@macrostrat/column-views 3.2.2 → 3.3.1

package/dist/unit-details/age-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\n\nexport function AgeField({ unit, children }) {\n  const [b_age, t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(b_age, t_age),\n      unit: _unit,\n    },\n    children,\n  );\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\nexport function IntervalProportions({ unit, onClickItem }) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (\n    unit.b_int_id == null &&\n    unit.t_int_id == null &&\n    unit.b_prop == null &&\n    unit.t_prop == null\n  )\n    return null;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n  let b_prop = unit.b_prop ?? 0;\n  let t_prop = unit.t_prop ?? 1;\n\n  const intervalMap = useMacrostratDefs(\"intervals\");\n  const int0 = intervalMap?.get(i0) ?? {};\n\n  const interval0: IntervalShort = {\n    ...int0,\n    id: i0,\n    name: unit.b_int_name,\n  };\n\n  let p0: any = null;\n  const int1 = intervalMap?.get(i1) ?? {};\n  const p1: any = h(Proportion, { value: t_prop });\n\n  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n    // We have a single interval with undefined proportions\n    p0 = h(Proportion, { value: b_prop });\n  }\n\n  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n    p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n  }\n\n  const clickable = onClickItem != null;\n\n  const handleClick = (event: MouseEvent) => {\n    if (onClickItem) {\n      onClickItem(event, interval0);\n    }\n  };\n\n  return h(ItemList, { className: \"interval-proportions\" }, [\n    h(IntervalTag, {\n      className: clickable ? \"clickable\" : \"\",\n      onClick: clickable ? handleClick : undefined,\n      interval: interval0,\n      prefix: p0,\n    }),\n    h.if(i0 != i1)(\"span.discourage-break\", [\n      h(\"span.sep\", \" to \"),\n      h(IntervalTag, {\n        className: clickable ? \"clickable\" : \"\",\n        onClick: clickable ? handleClick : undefined,\n        interval: {\n          ...int1,\n          id: i1,\n          name: unit.t_int_name,\n        },\n        prefix: p1,\n      }),\n    ]),\n  ]);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n}\n\nexport function IntervalProportions({\n  unit,\n  className,\n  showProportions,\n  calculateProportionsFromAges = true,\n  ...rest\n}: IntervalProportionsProps) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (unit.b_int_id == null && unit.t_int_id == null) return null;\n\n  let _showProps = showProportions;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n\n  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\");\n  const [int0, int1] = useMemo(() => {\n    const int0 = intervalMap?.get(i0) ?? {};\n    if (i0 === i1) {\n      return [int0, int0];\n    }\n    const int1 = intervalMap?.get(i1) ?? {};\n    return [int0, int1];\n  }, [intervalMap, i0, i1]);\n\n  const interval0: IntervalShort = {\n    id: i0,\n    name: unit.b_int_name,\n    ...int0,\n  };\n\n  let b_prop = unit.b_prop;\n  let t_prop = unit.t_prop;\n\n  // If we have b_age and t_age, then we can calculate proportions if they are not given\n  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {\n    b_prop = getProportion(unit.b_age, int0);\n  }\n  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {\n    t_prop = getProportion(unit.t_age, int1);\n  }\n\n  // If there are no proportions given and we are not explicitly directed to show them,\n  // then we set them to hidden.\n  if (b_prop == null && t_prop == null) {\n    _showProps ??= false;\n  }\n\n  /*\n    Set default proportions to 0 and 1 if they are not given,\n    so that we can display \"base\" and \"top\" labels\n   */\n  b_prop ??= 0;\n  t_prop ??= 1;\n\n  let p0: any = null;\n  let p1: any = null;\n\n  if (_showProps !== false) {\n    p1 = h(Proportion, { value: t_prop });\n\n    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n      // We have a single interval with undefined proportions\n      p0 = h(Proportion, { value: b_prop });\n    }\n\n    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n      p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n    }\n  }\n\n  return h(\n    ItemList,\n    { className: classNames(\"interval-proportions\", className) },\n    [\n      h(IntervalTag, {\n        interval: interval0,\n        prefix: p0,\n        ...rest,\n      }),\n      h.if(i0 != i1)(\"span.discourage-break\", [\n        h(\"span.sep\", \" to \"),\n        h(IntervalTag, {\n          interval: {\n            id: i1,\n            name: unit.t_int_name,\n            ...int1,\n          },\n          prefix: p1,\n          ...rest,\n        }),\n      ]),\n    ],\n  );\n}\n\nfunction getProportion(age: number, interval: IntervalShort): number | null {\n  /** Get proportion with the age */\n  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["int0","int1"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.2.2",
+  "version": "3.3.1",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -49,12 +49,12 @@
     "@macrostrat/api-types": "^1.1.5",
     "@macrostrat/color-utils": "^1.2.1",
     "@macrostrat/column-components": "^2.0.4",
-    "@macrostrat/data-components": "^1.1.2",
+    "@macrostrat/data-components": "^1.1.3",
     "@macrostrat/data-provider": "^1.0.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "^2.1.0",
+    "@macrostrat/map-interface": "^2.2.0",
     "@macrostrat/map-styles": "^2.1.0",
-    "@macrostrat/mapbox-react": "^3.0.2",
+    "@macrostrat/mapbox-react": "^3.1.0",
     "@macrostrat/mapbox-utils": "^1.7.2",
     "@macrostrat/stratigraphy-utils": "^1.2.1",
     "@macrostrat/svg-map-components": "^2.0.1",

package/src/maps/column-correlation/core.ts

@@ -2,6 +2,7 @@ import {
   useMapClickHandler,
   useMapEaseTo,
   useMapStyleOperator,
+  useOverlayStyle,
 } from "@macrostrat/mapbox-react";
 import { LngLatBounds, Style } from "mapbox-gl";
 import h from "@macrostrat/hyper";
@@ -10,7 +11,8 @@ import { ReactNode, useMemo } from "react";
 import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 
 import { useCorrelationMapStore } from "./state";
-import { buildColumnsStyle, InsetMap, InsetMapProps } from "../_shared";
+import { InsetMap, type InsetMapProps } from "../inset-map";
+import { BaseColumnsLayer } from "../layers";
 import { buildCrossSectionLayers } from "@macrostrat/map-styles";
 
 export interface CorrelationMapProps extends InsetMapProps {
@@ -23,24 +25,15 @@ export interface CorrelationMapProps extends InsetMapProps {
 export function ColumnCorrelationMap(props: CorrelationMapProps) {
   const { padding = 50, children, columnColor, projectID, ...rest } = props;
 
-  const overlayStyles: Partial<Style>[] = useMemo(() => {
-    return [
-      buildColumnsStyle(columnColor) as Style,
-      selectedColumnsStyle as Style,
-      lineOfSectionStyle as Style,
-    ];
-  }, [columnColor]);
-
   return h(
     InsetMap,
     {
       ...rest,
       boxZoom: false,
       dragRotate: false,
-      overlayStyles,
     },
     [
-      h(ColumnsLayer),
+      h(ColumnsLayer, { color: columnColor }),
       h(SelectedColumnsLayer),
       h(MapClickHandler),
       h(SectionLine, { padding }),
@@ -63,6 +56,8 @@ function MapClickHandler() {
 }
 
 function SelectedColumnsLayer() {
+  useOverlayStyle(() => selectedColumnsStyle, []);
+
   const focusedColumns = useCorrelationMapStore(
     (state) => state.focusedColumns,
   );
@@ -98,25 +93,9 @@ function SelectedColumnsLayer() {
   return null;
 }
 
-function ColumnsLayer({ enabled = true }) {
+function ColumnsLayer({ enabled = true, color }) {
   const columns = useCorrelationMapStore((state) => state.columns);
-
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: columns,
-      };
-
-      console.log(" columns", data);
-      setGeoJSON(map, "columns", data);
-    },
-    [columns, enabled],
-  );
-  return null;
+  return h(BaseColumnsLayer, { enabled, color, columns });
 }
 
 const selectedColumnsStyle: Style = {
@@ -167,6 +146,7 @@ const lineOfSectionStyle: Style = {
 };
 
 function SectionLine({ padding }: { padding: number }) {
+  useOverlayStyle(() => lineOfSectionStyle, []);
   const focusedLine = useCorrelationMapStore((state) => state.focusedLine);
 
   // Setup focused line

package/src/maps/column-navigation/mapbox/index.ts

@@ -1,21 +1,17 @@
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
 import h from "@macrostrat/hyper";
-import { FeatureCollection } from "geojson";
-import { ReactNode, useMemo, useRef } from "react";
-import { buildColumnsStyle, InsetMapProps } from "../../_shared";
-import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
 
 import {
   ColumnNavigationProvider,
   NavigationProviderProps,
   useColumnNavigationStore,
 } from "./state";
-import { InsetMap } from "../../_shared";
+import { InsetMap, type InsetMapProps } from "../../inset-map";
 import { geoCentroid } from "d3-geo";
-import {
-  ColumnKeyboardNavigation,
-  buildKeyboardNavigationStyle,
-} from "./keyboard-navigation";
+import { BaseColumnsLayer, SelectedColumnOverlay } from "../../layers";
+import { ColumnKeyboardNavigation } from "./keyboard-navigation";
+import type { ColumnFeature } from "../../layers";
 
 export interface ColumnNavigationMapProps extends InsetMapProps {
   padding?: number;
@@ -27,14 +23,18 @@ export interface ColumnNavigationMapProps extends InsetMapProps {
   onHoverColumn?: (colID: number | null) => void;
   showTriangulation?: boolean;
   columnColor?: string;
-  triangulationColor?: string;
-  keyboardNavigation?: boolean;
 }
 
 export function ColumnNavigationMap(
   props: ColumnNavigationMapProps & NavigationProviderProps,
 ) {
   const {
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation = true,
     columns,
     columnIDs,
     onSelectColumn,
@@ -42,182 +42,235 @@ export function ColumnNavigationMap(
     selectedColumn,
     hoveredColumn,
     projectID,
-    children,
     inProcess,
     ...rest
   } = props;
 
-  return h(
-    ColumnNavigationProvider,
-    {
-      columns,
-      columnIDs,
-      onSelectColumn,
-      onHoverColumn,
-      selectedColumn,
-      hoveredColumn,
-      projectID,
-      inProcess,
-    },
-    h(_ColumnNavigationMap, props),
-  );
-}
-
-function _ColumnNavigationMap(props: ColumnNavigationMapProps) {
-  const {
-    padding = 50,
-    children,
-    columnColor,
-    showTriangulation,
-    triangulationColor,
-    keyboardNavigation = true,
-    ...rest
-  } = props;
-
-  const overlayStyles = useMemo(() => {
-    let styles: any[] = [buildColumnsStyle(columnColor)];
-    if (showTriangulation) {
-      styles.push(buildKeyboardNavigationStyle(triangulationColor));
-    }
-    return styles;
-  }, [columnColor, showTriangulation, triangulationColor]);
-
   return h(
     InsetMap,
     {
       ...rest,
       boxZoom: false,
       dragRotate: false,
-      overlayStyles,
     },
     [
-      h(ColumnsLayer),
+      h(ColumnsNavigationLayer, {
+        color: columnColor,
+        columns,
+        columnIDs,
+        onSelectColumn,
+        onHoverColumn,
+        selectedColumn,
+        hoveredColumn,
+        projectID,
+        inProcess,
+        keyboardNavigation,
+        showTriangulation,
+        triangulationColor,
+      }),
       children,
-      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
     ],
   );
 }
 
-function ColumnsLayer({ enabled = true }) {
+interface ColumnLayerProps {
+  enabled?: boolean;
+  color?: string;
+}
+
+interface ColumnKeyboardNavigationProps {
+  triangulationColor?: string;
+  keyboardNavigation?: boolean;
+  showTriangulation?: boolean;
+}
+
+export function ColumnsNavigationLayer(
+  props: NavigationProviderProps &
+    ColumnLayerProps &
+    ColumnKeyboardNavigationProps,
+) {
+  const {
+    enabled,
+    color,
+    keyboardNavigation,
+    showTriangulation,
+    triangulationColor,
+    ...providerProps
+  } = props;
+
+  return h(ColumnNavigationProvider, providerProps, [
+    h(_ColumnsNavigationLayer, { enabled, color }),
+    h.if(keyboardNavigation)(ColumnKeyboardNavigation, {
+      showTriangulation,
+      triangulationColor,
+    }),
+  ]);
+}
+
+const columnLayers = ["columns-points", "columns-fill"];
+
+function _ColumnsNavigationLayer({ enabled = true, color }) {
   const columns = useColumnNavigationStore((state) => state.columns);
-  const selectedColumn = useColumnNavigationStore(
+  const selectedColumnID = useColumnNavigationStore(
     (state) => state.selectedColumn,
   );
-  const hoveredColumn = useColumnNavigationStore(
-    (state) => state.hoveredColumn,
-  );
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
   const setHoveredColumn = useColumnNavigationStore(
     (state) => state.setHoveredColumn,
   );
 
+  const onHover = useCallback(
+    (event) => setHoveredColumn(event.features?.[0]?.id),
+    [setHoveredColumn],
+  );
+
+  /** Convert features into column IDs to pass to the selection manager */
+  const onSelectColumn = useCallback(
+    (column) => selectColumn(column.id),
+    [selectColumn],
+  );
+
+  const selectedColumnFeature = useMemo(() => {
+    if (columns == null || selectedColumnID == null) return null;
+    return columns.find((d) => d.id == selectedColumnID);
+  }, [selectedColumnID, columns]);
+
+  return h([
+    h(BaseColumnsLayer, { enabled, color, columns }),
+    h(ColumnSelectionManager, {
+      selectedColumn: selectedColumnFeature,
+      onSelectColumn,
+    }),
+    h(ColumnHoverInteraction, { onHover }),
+  ]);
+}
+
+export function ColumnSelectionManager({
+  selectedColumn,
+  onSelectColumn,
+  centerOnSelect = true,
+}: {
+  selectedColumn: ColumnFeature;
+  onSelectColumn: (column: ColumnFeature) => void;
+  centerOnSelect?: boolean;
+}) {
+  const onClick = useCallback(
+    (event) => {
+      if (event.features.length == 0) return;
+      const selectedColumn = event.features[0];
+      onSelectColumn(selectedColumn);
+    },
+    [onSelectColumn],
+  );
+
+  return h([
+    h.if(centerOnSelect)(SelectedColumnCenterer, {
+      selectedColumn,
+    }),
+    h(SelectedColumnOverlay, { selectedColumn }),
+    h(ClickInteraction, {
+      onClick,
+      layers: columnLayers,
+    }),
+  ]);
+}
+
+export function ColumnHoverInteraction({ onHover }) {
+  return h(HoverInteraction, { onHover, layers: columnLayers });
+}
+
+function ClickInteraction({ onClick, layers }) {
   useMapStyleOperator(
     (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data: FeatureCollection = {
-        type: "FeatureCollection",
-        features: columns,
+      // Setup hover styles on map
+      map.on("click", layers, onClick);
+      return () => {
+        map.off("click", layers, onClick);
       };
+    },
+    [layers, onClick],
+  );
+  return null;
+}
 
-      setGeoJSON(map, "columns", data);
+function HoverInteraction({ onHover, layers }) {
+  const hoveredFeaturesRef = useRef([]);
+  const updateFeatureState = useCallback((map, features) => {
+    // Reset hover state for previously hovered features
+    for (const f of hoveredFeaturesRef.current) {
+      map.setFeatureState(
+        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
+        { hover: false },
+      );
+    }
+    // Set hover state for new features
+    for (const f of features) {
+      map.setFeatureState(
+        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
+        { hover: true },
+      );
+    }
+    hoveredFeaturesRef.current = features;
+  }, []);
 
+  useMapStyleOperator(
+    (map) => {
       const mouseMove = (event) => {
         if (event.features.length == 0) return;
-        const hoveredFeature = event.features[0];
-        setHoveredColumn(hoveredFeature.id);
+        onHover?.(event);
+        updateFeatureState(map, event.features);
         map.getCanvas().style.cursor = "pointer";
       };
-      const mouseLeave = () => {
-        setHoveredColumn(null);
+      const mouseLeave = (event) => {
+        onHover?.(event);
+        updateFeatureState(map, event.features ?? []);
         map.getCanvas().style.cursor = "";
       };
 
-      const clickHandler = (event) => {
-        if (event.features.length == 0) return;
-        const selectedColumn = event.features[0];
-        const id = selectedColumn.id;
-        selectColumn(id);
-      };
-
       // Setup hover styles on map
-      const layers = ["columns-points", "columns-fill"];
       map.on("mousemove", layers, mouseMove);
       map.on("mouseleave", layers, mouseLeave);
-      map.on("click", layers, clickHandler);
 
       return () => {
         map.off("mouseenter", layers, mouseMove);
         map.off("mouseleave", layers, mouseLeave);
-        map.off("click", layers, clickHandler);
       };
     },
-    [columns, enabled],
+    [layers, onHover],
   );
+  return null;
+}
 
-  const hoveredColumnRef = useRef(null);
-  useMapStyleOperator(
-    (map) => {
-      const prevHoveredColumn = hoveredColumnRef.current;
-      if (hoveredColumn == prevHoveredColumn) return;
-      if (prevHoveredColumn != null) {
-        // Deselect previous column
-        map.setFeatureState(
-          { source: "columns", id: prevHoveredColumn },
-          { hover: false },
-        );
-      }
-      hoveredColumnRef.current = hoveredColumn;
-      // Select the current column
-      map.setFeatureState(
-        { source: "columns", id: hoveredColumn },
-        { hover: true },
-      );
-    },
-    [hoveredColumn, columns],
-  );
+function SelectedColumnCenterer({
+  selectedColumn,
+  easeDuration = 500,
+}: {
+  selectedColumn: ColumnFeature;
+  easeDuration?: number;
+}) {
+  const columnCenter = useMemo(() => {
+    const columnGeometry = selectedColumn?.geometry;
+    if (columnGeometry == null) return null;
+    return geoCentroid(columnGeometry);
+  }, [selectedColumn]);
 
-  /** Set feature state for selected columns */
-  const selectedColumnRef = useRef(null);
+  const mapRef = useMapRef();
+  const map = mapRef.current;
   const initialRenderRef = useRef(true);
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) return;
-      const prevSelectedColumn = selectedColumnRef.current;
-      if (selectedColumn == prevSelectedColumn) return;
-      if (prevSelectedColumn != null) {
-        // Deselect previous column
-        map.setFeatureState(
-          { source: "columns", id: prevSelectedColumn },
-          { selected: false },
-        );
-      }
-
-      selectedColumnRef.current = selectedColumn;
-
-      // Select the current column
-      map.setFeatureState(
-        { source: "columns", id: selectedColumn },
-        { selected: true },
-      );
-
-      // Center the selected column
-      const columnGeometry = columns.find(
-        (d) => d.id == selectedColumn,
-      )?.geometry;
-      if (columnGeometry == null) return;
-      const center = geoCentroid(columnGeometry);
-
-      const isInitialRender = initialRenderRef.current;
-
-      map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });
-      if (isInitialRender) {
-        initialRenderRef.current = false;
-      }
-    },
-    [selectedColumn, columns],
-  );
+  // Center the map on the selected column when it changes
+  useEffect(() => {
+    if (map == null) return;
+    const isInitialRender = initialRenderRef.current;
+    if (isInitialRender) initialRenderRef.current = false;
+    // If this is the first render of the map, jump to the location. Otherwise, ease to it.
+    if (columnCenter == null) return;
+    if (isInitialRender) {
+      map.setCenter(columnCenter);
+      initialRenderRef.current = false;
+    } else {
+      map.easeTo({ center: columnCenter }, { duration: easeDuration });
+    }
+  }, [mapRef.current, columnCenter]);
 
   return null;
 }

package/src/maps/column-navigation/mapbox/keyboard-navigation.ts

@@ -1,19 +1,25 @@
 import { useCallback, useEffect, useMemo } from "react";
 import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
-import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
+import {
+  useMapRef,
+  useMapStyleOperator,
+  useOverlayStyle,
+} from "@macrostrat/mapbox-react";
 import { useColumnNavigationStore } from "./state";
 import {
   buildTriangulation,
   buildKeyMapping,
 } from "../utils/keyboard-navigation";
+import { StyleSpecification } from "mapbox-gl";
 
 interface KeyboardNavProps {
   showTriangulation: boolean;
+  triangulationColor?: string;
 }
 
 export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
   /** Keyboard navigation of columns using a Delaunay triangulation */
-  const { showTriangulation = false } = props;
+  const { showTriangulation = false, triangulationColor } = props;
   const columns = useColumnNavigationStore((state) => state.columns);
   const col_id = useColumnNavigationStore((state) => state.selectedColumn);
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
@@ -26,6 +32,14 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
   const mapRef = useMapRef();
   const map = mapRef.current;
 
+  // Set up overlay style for triangulation
+  useOverlayStyle(() => {
+    if (!showTriangulation) return null;
+    return buildKeyboardNavigationStyle(
+      triangulationColor,
+    ) as Partial<StyleSpecification>;
+  }, [triangulationColor, showTriangulation]);
+
   const keyMapping = useMemo(() => {
     if (columns == null || voronoi == null || map == null) return null;
 
@@ -115,5 +129,5 @@ export function buildKeyboardNavigationStyle(color: string = "purple") {
         },
       },
     ],
-  };
+  } as Partial<StyleSpecification>;
 }

package/src/maps/index.ts

@@ -1,4 +1,4 @@
 export * from "./column-navigation";
 export * from "./column-correlation";
-export * from "./_shared";
-export * from "./units-overlay";
+export * from "./inset-map";
+export * from "./layers";