Merge pull request #325 from visdesignlab/307-selection-fixes

Fix row selection being removed when clicking off of chart
visdesignlab · Mar 28, 2024 · a3629eb · a3629eb
2 parents 70f2592 + 800125d
commit a3629eb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/upset/src/components/Root.tsx b/packages/upset/src/components/Root.tsx
@@ -11,10 +11,9 @@ import { columnsAtom } from '../atoms/columnAtom';
 import { itemsAtom } from '../atoms/itemsAtoms';
 import { setsAtom } from '../atoms/setsAtoms';
 import { dataAtom } from '../atoms/dataAtom';
-import { columnHoverAtom, columnSelectAtom } from '../atoms/highlightAtom';
+import { columnHoverAtom } from '../atoms/highlightAtom';
 import { contextMenuAtom } from '../atoms/contextMenuAtom';
 import { upsetConfigAtom } from '../atoms/config/upsetConfigAtoms';
-import { currentIntersectionAtom } from '../atoms/config/currentIntersectionAtom';
 import {
   getActions, initializeProvenanceTracking, UpsetActions, UpsetProvenance,
 } from '../provenance';
@@ -66,12 +65,10 @@ export const Root: FC<Props> = ({
 
   const [sets, setSets] = useRecoilState(setsAtom);
   const [items, setItems] = useRecoilState(itemsAtom);
+  const [columnHover, setColumnHover] = useRecoilState(columnHoverAtom);
   const setAttributeColumns = useSetRecoilState(attributeAtom);
   const setAllColumns = useSetRecoilState(columnsAtom);
   const setData = useSetRecoilState(dataAtom);
-  const setCurrentIntersection = useSetRecoilState(currentIntersectionAtom);
-  const setColumnHover = useSetRecoilState(columnHoverAtom);
-  const setColumnSelect = useSetRecoilState(columnSelectAtom);
   const setContextMenu = useSetRecoilState(contextMenuAtom);
 
   useEffect(() => {
@@ -106,11 +103,11 @@ export const Root: FC<Props> = ({
     setData(data);
   }, [data]);
 
-  // remove all current selections and highlight states
-  const removeSelections = () => {
-    setCurrentIntersection(null);
-    setColumnSelect([]);
-    setColumnHover([]);
+  // remove column hover state
+  const removeHover = () => {
+    if (columnHover.length > 0) {
+      setColumnHover([]);
+    }
   };
 
   // close all open context menus
@@ -119,11 +116,11 @@ export const Root: FC<Props> = ({
   };
 
   useEffect(() => {
-    document.addEventListener('click', removeSelections, false);
     document.addEventListener('contextmenu', removeContextMenu, false);
+    document.addEventListener('mousemove', removeHover, false);
 
     return function removeListeners() {
-      document.removeEventListener('click', removeSelections, false);
+      document.removeEventListener('mousemove', removeHover, false);
       document.removeEventListener('contextmenu', removeContextMenu, false);
     };
   }, []);

diff --git a/packages/upset/src/components/Rows/AggregateRow.tsx b/packages/upset/src/components/Rows/AggregateRow.tsx
@@ -65,6 +65,7 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
 
   return (
     <g
+      onMouseMove={(e) => e.stopPropagation()}
       onClick={() => aggregateRow && (setCurrentIntersectionAtom(aggregateRow))}
       css={mousePointer}
     >

diff --git a/packages/upset/src/components/Rows/SubsetRow.tsx b/packages/upset/src/components/Rows/SubsetRow.tsx
@@ -34,6 +34,7 @@ export const SubsetRow: FC<Props> = ({ subset }) => {
 
   return (
     <g
+      onMouseMove={(e) => e.stopPropagation()}
       onClick={
         () => {
           if (currentIntersection !== null && currentIntersection.id === subset.id) { // if the row is already selected, deselect it
@@ -53,7 +54,9 @@ export const SubsetRow: FC<Props> = ({ subset }) => {
           setColumnHighlight(getBelongingSetsFromSetMembership(subset.setMembership));
         }
       }
-      onMouseLeave={() => setHover(null)}
+      onMouseLeave={() => {
+        setHover(null);
+      }}
       css={mousePointer}
     >
       <rect