Make column unit selection entirely optional

Author: davenquinn

packages/column-views/src/column.ts

@@ -53,6 +53,7 @@ export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
   b_age?: number;
   mergeSections?: MergeSectionsMode;
   showUnitPopover?: boolean;
+  allowUnitSelection?: boolean;
   selectedUnit?: number | null;
   onUnitSelected?: (unitID: number | null, unit: any) => void;
   // Unconformity height in pixels
@@ -77,6 +78,7 @@ export function Column(props: ColumnProps) {
     minPixelScale = 0.2,
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
+    allowUnitSelection,
     ...rest
   } = props;
   const ref = useRef<HTMLElement>();
@@ -106,18 +108,37 @@ export function Column(props: ColumnProps) {
     );
   }
 
+  let main: any = h(ColumnInner, { columnRef: ref, ...rest }, [
+    children,
+    h.if(showUnitPopover)(UnitSelectionPopover),
+    h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
+  ]);
+
+  /* By default, unit selection is disabled. However, if any related props are passed,
+   we enable it.
+   */
+  let _allowUnitSelection = allowUnitSelection ?? false;
+  if (showUnitPopover || selectedUnit != null || onUnitSelected != null) {
+    _allowUnitSelection = true;
+  }
+
+  if (_allowUnitSelection) {
+    main = h(
+      UnitSelectionProvider,
+      {
+        columnRef: ref,
+        onUnitSelected,
+        selectedUnit,
+        units,
+      },
+      main
+    );
+  }
+
   return h(
     MacrostratColumnDataProvider,
     { units, sections, totalHeight, axisType },
-    h(
-      UnitSelectionProvider,
-      { columnRef: ref, onUnitSelected, selectedUnit, units },
-      h(ColumnInner, { columnRef: ref, ...rest }, [
-        children,
-        h.if(showUnitPopover)(UnitSelectionPopover),
-        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
-      ])
-    )
+    main
   );
 }
 

packages/column-views/src/units/selection.ts

@@ -36,9 +36,7 @@ export function useUnitSelectionStore<T>(
 ): T {
   const store = useContext(UnitSelectionContext);
   if (store == null) {
-    throw new Error(
-      "useUnitSelectionStore must be used within a UnitSelectionProvider"
-    );
+    return null;
   }
   return useStore(store, selector);
 }

packages/column-views/stories/carbon-isotopes.stories.ts

@@ -18,7 +18,6 @@ function StableIsotopesOverlay(props) {
       label: "δ¹³C",
       width: 100,
       nTicks: 4,
-      showAxis: true,
     }),
     h(IsotopesColumn, {
       parameter: "D18O",
@@ -27,7 +26,6 @@ function StableIsotopesOverlay(props) {
       domain: [-40, 0],
       width: 100,
       nTicks: 4,
-      showAxis: true,
     }),
   ]);
 }
@@ -57,6 +55,7 @@ export const BasicCarbonIsotopesColumn = {
     inProcess: true,
     showTimescale: false,
     showLabelColumn: false,
+    allowUnitSelection: false,
   },
 };
 

packages/column-views/stories/column.stories.ts

@@ -236,7 +236,7 @@ export function ColumnClickHandler() {
 
   return h(FlexRow, { gap: "2em" }, [
     h(
-      BasicColumn,
+      StandaloneColumn,
       {
         id: 483,
         showLabelColumn: false,

packages/column-views/stories/sections.stories.ts

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ColoredUnitComponent } from "@macrostrat/column-views";
 import "@macrostrat/style-system";
 import { ColumnAxisType } from "@macrostrat/column-components";
-import { StandaloneColumn, StandaloneColumnProps } from "./standalone-column";
+import { StandaloneColumn, StandaloneColumnProps } from "./column-ui";
 
 type Story = StoryObj<typeof StandaloneColumn>;