Updated column boxes

Author: davenquinn

packages/column-views/src/index.ts

@@ -11,7 +11,11 @@ import { group } from "d3-array";
 import { RefObject, useContext, useMemo } from "react";
 import { AgeAxis } from "./age-axis";
 import styles from "./column.module.sass";
-import { CompositeUnitsColumn, TrackedLabeledUnit } from "./units";
+import {
+  CompositeUnitsColumn,
+  TrackedLabeledUnit,
+  useUnitSelectionDispatch,
+} from "./units";
 import { IUnit } from "./units/types";
 export * from "./units";
 export * from "./age-axis";
@@ -256,9 +260,17 @@ function Column(
     "dark-mode": darkMode?.isEnabled ?? false,
   });
 
+  // Clear unit selection on click outside of units, if we have a dispatch function
+  const dispatch = useUnitSelectionDispatch();
+
   return h(
     "div.column-container",
-    { className },
+    {
+      className,
+      onClick(evt) {
+        dispatch?.(null, null, evt);
+      },
+    },
     h("div.column", { ref: columnRef }, [
       h("div.age-axis-label", "Age (Ma)"),
       h(

packages/column-views/src/selection-popover.module.sass

@@ -1,12 +1,17 @@
 .popover-main
   position: absolute
-  outline: 2px solid #f22
+  pointer-events: none
+
+  :global(.bp5-overlay)
+    pointer-events: all
 
   :global(.bp5-popover-target)
     height: 100%
     width: 100%
     display: block
     line-height: 0
+    pointer-events: none
+    outline: 2px solid #f22
 
 .legend-panel-outer
   width: 25em

packages/column-views/src/units/boxes.module.sass

@@ -1,2 +1,3 @@
 .unit-label-container
   pointer-events: none
+

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

@@ -19,7 +19,7 @@ import {
   useRef,
 } from "react";
 import { resolveID, scalePattern } from "./resolvers";
-import { useSelectedUnit, useUnitSelector } from "./selection";
+import { useSelectedUnit, useUnitSelectionDispatch } from "./selection";
 import { IUnit, transformAxisType } from "./types";
 import styles from "./boxes.module.sass";
 
@@ -128,13 +128,15 @@ function useUnitSelectionManager(
 ): [boolean, () => void] {
   const selectedUnit = useSelectedUnit();
   const selected = selectedUnit?.unit_id == unit.unit_id;
-  const selectUnit = useUnitSelector(unit);
+
+  const dispatch = useUnitSelectionDispatch();
 
   const onClick = useCallback(
     (evt: Event) => {
-      selectUnit(ref.current, evt);
+      dispatch(unit, ref.current, evt);
+      evt.stopPropagation();
     },
-    [unit, ref, selectUnit]
+    [unit, ref, dispatch]
   );
 
   useEffect(() => {

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

@@ -10,10 +10,8 @@ import {
   useMemo,
   useState,
   ReactNode,
-  RefObject,
   useCallback,
 } from "react";
-import { IUnit } from "@macrostrat/column-views";
 
 type UnitSelectDispatch = (
   unit: BaseUnit | null,
@@ -24,13 +22,8 @@ type UnitSelectDispatch = (
 const UnitSelectionContext = createContext<BaseUnit | null>(null);
 const DispatchContext = createContext<UnitSelectDispatch | null>(null);
 
-export function useUnitSelector(u: BaseUnit | null) {
-  const dispatch = useContext(DispatchContext);
-  return (target: HTMLElement, evt: Event) => {
-    console.log("Dispatch", u, target, evt);
-    dispatch?.(u, target, evt);
-    evt.stopPropagation();
-  };
+export function useUnitSelectionDispatch() {
+  return useContext(DispatchContext);
 }
 
 export function useSelectedUnit() {
@@ -78,9 +71,15 @@ function BaseUnitSelectionProvider<T extends BaseUnit>({
   const value = useMemo(() => unit, [unit?.unit_id]);
 
   const _onUnitSelected = useCallback(
-    (unit: T, target: HTMLElement, event: Event) => {
-      setUnit(unit);
-      onUnitSelected?.(unit, target, event);
+    (u: T, target: HTMLElement, event: Event) => {
+      let newUnit = u;
+      if (u == unit) {
+        // If the same unit is selected, deselect it
+        newUnit = null;
+      }
+
+      setUnit(newUnit);
+      onUnitSelected?.(newUnit, target, event);
     },
     [setUnit, onUnitSelected]
   );

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

@@ -150,16 +150,10 @@ export function WithUnitSelectionPopover() {
   // Selected item position
   const [position, setPosition] = useState<RectBounds | null>(null);
 
-  useEffect(() => {
-    if (position == null) return;
-    console.log("Position", position);
-  }, [position]);
-
   return h(
     UnitSelectionProvider,
     {
       onUnitSelected: (unit, target: SVGElement | HTMLElement) => {
-        console.log(target);
         if (unit == null) {
           setPosition(null);
           return;