Deselect the current intersection when the plot is clicked somewhere …

…that causes no other action

packages/upset/src/components/Header/AttributeButton.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react';
+import React, { FC, useContext } from 'react';
 import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { SortByOrder, AttributePlotType } from '@visdesignlab/upset2-core';
 
@@ -63,12 +63,14 @@ export const AttributeButton: FC<Props> = ({ label, tooltip }) => {
    * If the attribute is not currently sorted, it sorts it in ascending order.
    * If the attribute is already sorted, it toggles between ascending and descending order.
    */
-  const handleOnClick = () => {
+  const handleOnClick = (e: React.MouseEvent<SVGElement>) => {
     if (sortBy !== label) {
       sortByHeader('Ascending');
     } else {
       sortByHeader(sortByOrder === 'Ascending' ? 'Descending' : 'Ascending');
     }
+    // To prevent the handler on SvgBase that deselects the current intersection
+    e.stopPropagation();
   };
 
   /**

packages/upset/src/components/Header/DegreeHeader.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { Tooltip } from '@mui/material';
 import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAtom';
 import translate from '../../utils/transform';
@@ -23,12 +23,14 @@ export const DegreeHeader = () => {
     actions.sortBy('Degree', order);
   };
 
-  const handleOnClick = () => {
+  const handleOnClick = (e: React.MouseEvent<SVGElement>) => {
     if (sortBy !== 'Degree') {
       sortByDegree('Ascending');
     } else {
       sortByDegree(sortByOrder === 'Ascending' ? 'Descending' : 'Ascending');
     }
+    // To prevent the handler on SvgBase that deselects the current intersection
+    e.stopPropagation();
   };
 
   const handleContextMenuClose = () => {

packages/upset/src/components/Header/SizeHeader.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
-import {
+import React, {
   FC, useContext, useEffect, useRef, useState,
 } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
@@ -51,12 +51,14 @@ export const SizeHeader: FC = () => {
     actions.sortBy('Size', order);
   };
 
-  const handleOnClick = () => {
+  const handleOnClick = (e: React.MouseEvent<SVGElement>) => {
     if (sortBy !== 'Size') {
       sortBySize('Ascending');
     } else {
       sortBySize(sortByOrder === 'Ascending' ? 'Descending' : 'Ascending');
     }
+    // To prevent the handler on SvgBase that deselects the current intersection
+    e.stopPropagation();
   };
 
   const handleContextMenuClose = () => {

packages/upset/src/components/Rows/AggregateRow.tsx

@@ -7,7 +7,7 @@ import SvgIcon from '@mui/material/SvgIcon';
 
 import { visibleSetSelector } from '../../atoms/config/visibleSetsAtoms';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
-import { bookmarkSelector, currentIntersectionSelector } from '../../atoms/config/currentIntersectionAtom';
+import { currentIntersectionSelector } from '../../atoms/config/currentIntersectionAtom';
 import translate from '../../utils/transform';
 import { highlight, mousePointer } from '../../utils/styles';
 import { SizeBar } from '../Columns/SizeBar';
@@ -107,12 +107,14 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
           strokeWidth="1px"
         />
         <g
-          onClick={() => {
+          onClick={(e) => {
             if (collapsedIds.includes(aggregateRow.id)) {
               actions.removeCollapsed(aggregateRow.id);
             } else {
               actions.addCollapsed(aggregateRow.id);
             }
+            // To prevent the handler on SvgBase that deselects the current intersection
+            e.stopPropagation();
           }}
         >
           { collapsedIds.includes(aggregateRow.id) ? collapsed : expanded}

packages/upset/src/components/SvgBase.tsx

@@ -1,9 +1,11 @@
 import { css } from '@emotion/react';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import translate from '../utils/transform';
 import { dimensionsSelector } from '../atoms/dimensionsAtom';
+import { ProvenanceContext } from './Root';
+import { currentIntersectionSelector } from '../atoms/config/currentIntersectionAtom';
 
 /** @jsxImportSource @emotion/react */
 type SvgBaseSettings = {
@@ -18,13 +20,18 @@ type Props = {
 
 export const SvgBase: FC<Props> = ({ children, defaultSettings }) => {
   const { height, width, margin } = defaultSettings || useRecoilValue(dimensionsSelector);
+  const { actions } = useContext(ProvenanceContext);
+  const selectedIntersection = useRecoilValue(currentIntersectionSelector);
 
   return (
+    // These rules are for accessibility; unnecessary here as the plot is not accessible anyway.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       css={css`
         height: 100%;
         width: 100%;
       `}
+      onClick={() => { if (selectedIntersection != null) actions.setSelected(null); }}
     >
       <svg id="upset-svg" height={height + 50 * margin} width={width + 2 * margin} xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" fontFamily="Roboto, Arial">
         <g transform={translate(margin)}>