Move intersection notification to element vis

visdesignlab · Oct 22, 2024 · 76181f5 · 76181f5
1 parent bd2cdbd
commit 76181f5
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 112 deletions.
diff --git a/packages/upset/src/components/ElementView/BookmarkChips.tsx b/packages/upset/src/components/ElementView/BookmarkChips.tsx
@@ -1,7 +1,7 @@
 import SquareIcon from '@mui/icons-material/Square';
 import StarIcon from '@mui/icons-material/Star';
 import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Alert, Chip, Stack } from '@mui/material';
+import { Chip, Stack } from '@mui/material';
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 
@@ -53,118 +53,104 @@ export const BookmarkChips = () => {
   }
 
   return (
-    <>
-      {!currentIntersection && bookmarked.length === 0 && (
-        <Alert
-          severity="info"
-          variant="outlined"
-          role="generic"
-          sx={{
-            alignItems: 'center', margin: '0.5em 0', border: 'none', color: '#777777',
-          }}
-        >
-          Please click on intersections to select an intersection.
-        </Alert>
-      )}
-      <Stack direction="row" sx={{ flexFlow: 'row wrap' }}>
-        {/* All chips from bookmarks */}
-        {bookmarked.map((bookmark) => (
-          <Chip
-            disabled={bookmark.type === 'intersection' && rows[bookmark.id] === undefined}
-            sx={(theme) => ({
-              margin: theme.spacing(0.5),
-              '.MuiChip-icon': {
-                color: colorPallete[bookmark.id],
-              },
-              backgroundColor:
+    <Stack direction="row" sx={{ flexFlow: 'row wrap' }}>
+      {/* All chips from bookmarks */}
+      {bookmarked.map((bookmark) => (
+        <Chip
+          disabled={bookmark.type === 'intersection' && rows[bookmark.id] === undefined}
+          sx={(theme) => ({
+            margin: theme.spacing(0.5),
+            '.MuiChip-icon': {
+              color: colorPallete[bookmark.id],
+            },
+            backgroundColor:
                 bookmark.id === currentIntersection?.id || bookmark.id === currentSelection?.id
                   ? 'rgba(0,0,0,0.2)'
                   : 'default',
-            })}
-            key={bookmark.id}
-            aria-label={`Bookmarked intersection ${bookmark.label}${
-              isBookmarkedIntersection(bookmark) ? `, size ${bookmark.size}` : ''}`}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                chipClicked(bookmark);
-              }
-            }}
-            label={isBookmarkedIntersection(bookmark)
-              ? `${bookmark.label} - ${bookmark.size}` : `${bookmark.label}`}
-            icon={<SquareIcon fontSize={'1em' as any} />}
-            deleteIcon={<StarIcon />}
-            onClick={() => {
+          })}
+          key={bookmark.id}
+          aria-label={`Bookmarked intersection ${bookmark.label}${
+            isBookmarkedIntersection(bookmark) ? `, size ${bookmark.size}` : ''}`}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
               chipClicked(bookmark);
-            }}
-            onDelete={() => {
-              if (currentIntersection?.id === bookmark.id) {
-                actions.setSelected(null);
-              } else if (currentSelection?.id === bookmark.id) {
-                actions.setElementSelection(null);
-              }
-              actions.removeBookmark(bookmark);
-            }}
-          />
-        ))}
-        {/* Chip for the currently selected intersection */}
-        {currentIntersection && !bookmarked.find((b) => b.id === currentIntersection.id) && (
-          <Chip
-            sx={(theme) => ({
-              margin: theme.spacing(0.5),
-              '.MuiChip-icon': {
-                color: nextColor,
-              },
-              backgroundColor: 'rgba(0,0,0,0.2)',
-            })}
-            icon={<SquareIcon fontSize={'1em' as any} />}
-            aria-label={`Selected intersection ${currentIntersectionDisplayName}, size ${currentIntersection.size}`}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                actions.addBookmark<BookmarkedIntersection>({
-                  id: currentIntersection.id,
-                  label: currentIntersectionDisplayName,
-                  size: currentIntersection.size,
-                  type: 'intersection',
-                });
-              }
-            }}
-            label={`${currentIntersectionDisplayName} - ${currentIntersection.size}`}
-            onDelete={() => {
-              actions.addBookmark<BookmarkedIntersection>({
-                id: currentIntersection.id,
-                label: currentIntersectionDisplayName,
-                size: currentIntersection.size,
-                type: 'intersection',
-              });
-            }}
-            deleteIcon={<StarBorderIcon />}
-          />
-        )}
-        {/* Chip for the current element selection */}
-        {currentSelection && !bookmarked.find((b) => b.id === currentSelection.id) && (
-          <Chip
-            sx={(theme) => ({
-              margin: theme.spacing(0.5),
-              '.MuiChip-icon': {
-                color: elementSelectionColor,
-              },
-              backgroundColor: 'rgba(0,0,0,0.2)',
-            })}
-            icon={<SquareIcon fontSize={'1em' as any} />}
-            aria-label={`Selected elements ${currentSelection.label}`}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                actions.addBookmark(structuredClone(currentSelection));
-              }
-            }}
-            label={`${currentSelection.label}`}
-            onDelete={() => {
-              actions.addBookmark(structuredClone(currentSelection));
-            }}
-            deleteIcon={<StarBorderIcon />}
-          />
-        )}
-      </Stack>
-    </>
+            }
+          }}
+          label={isBookmarkedIntersection(bookmark)
+            ? `${bookmark.label} - ${bookmark.size}` : `${bookmark.label}`}
+          icon={<SquareIcon fontSize={'1em' as any} />}
+          deleteIcon={<StarIcon />}
+          onClick={() => {
+            chipClicked(bookmark);
+          }}
+          onDelete={() => {
+            if (currentIntersection?.id === bookmark.id) {
+              actions.setSelected(null);
+            } else if (currentSelection?.id === bookmark.id) {
+              actions.setElementSelection(null);
+            }
+            actions.removeBookmark(bookmark);
+          }}
+        />
+      ))}
+      {/* Chip for the currently selected intersection */}
+      {currentIntersection && !bookmarked.find((b) => b.id === currentIntersection.id) && (
+      <Chip
+        sx={(theme) => ({
+          margin: theme.spacing(0.5),
+          '.MuiChip-icon': {
+            color: nextColor,
+          },
+          backgroundColor: 'rgba(0,0,0,0.2)',
+        })}
+        icon={<SquareIcon fontSize={'1em' as any} />}
+        aria-label={`Selected intersection ${currentIntersectionDisplayName}, size ${currentIntersection.size}`}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            actions.addBookmark<BookmarkedIntersection>({
+              id: currentIntersection.id,
+              label: currentIntersectionDisplayName,
+              size: currentIntersection.size,
+              type: 'intersection',
+            });
+          }
+        }}
+        label={`${currentIntersectionDisplayName} - ${currentIntersection.size}`}
+        onDelete={() => {
+          actions.addBookmark<BookmarkedIntersection>({
+            id: currentIntersection.id,
+            label: currentIntersectionDisplayName,
+            size: currentIntersection.size,
+            type: 'intersection',
+          });
+        }}
+        deleteIcon={<StarBorderIcon />}
+      />
+      )}
+      {/* Chip for the current element selection */}
+      {currentSelection && !bookmarked.find((b) => b.id === currentSelection.id) && (
+      <Chip
+        sx={(theme) => ({
+          margin: theme.spacing(0.5),
+          '.MuiChip-icon': {
+            color: elementSelectionColor,
+          },
+          backgroundColor: 'rgba(0,0,0,0.2)',
+        })}
+        icon={<SquareIcon fontSize={'1em' as any} />}
+        aria-label={`Selected elements ${currentSelection.label}`}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            actions.addBookmark(structuredClone(currentSelection));
+          }
+        }}
+        label={`${currentSelection.label}`}
+        onDelete={() => {
+          actions.addBookmark(structuredClone(currentSelection));
+        }}
+        deleteIcon={<StarBorderIcon />}
+      />
+      )}
+    </Stack>
   );
 };
diff --git a/packages/upset/src/components/ElementView/ElementVisualization.tsx b/packages/upset/src/components/ElementView/ElementVisualization.tsx
@@ -7,8 +7,8 @@ import { SignalListener, VegaLite } from 'react-vega';
 import { useRecoilValue } from 'recoil';
 
 import { numericalQueryToBookmark, numericalQueriesEqual, isNumericalQuery } from '@visdesignlab/upset2-core';
-import { Button } from '@mui/material';
-import { bookmarkSelector, elementColorSelector } from '../../atoms/config/currentIntersectionAtom';
+import { Alert, Button } from '@mui/material';
+import { bookmarkSelector, currentIntersectionSelector, elementColorSelector } from '../../atoms/config/currentIntersectionAtom';
 import { histogramSelector, scatterplotsSelector } from '../../atoms/config/plotAtoms';
 import { elementItemMapSelector, currentNumericalQuery } from '../../atoms/elementsSelectors';
 import { AddPlotDialog } from './AddPlotDialog';
@@ -32,6 +32,7 @@ export const ElementVisualization = () => {
   const items = useRecoilValue(elementItemMapSelector(bookmarked.map((b) => b.id)));
   const numericalQuery = useRecoilValue(currentNumericalQuery);
   const selectColor = useRecoilValue(elementColorSelector);
+  const currentIntersection = useRecoilValue(currentIntersectionSelector);
   const { actions }: {actions: UpsetActions} = useContext(ProvenanceContext);
 
   /**
@@ -87,6 +88,18 @@ export const ElementVisualization = () => {
         draftSelection.current = undefined;
       }}
     >
+      {!currentIntersection && bookmarked.length === 0 && (
+        <Alert
+          severity="info"
+          variant="outlined"
+          role="generic"
+          sx={{
+            alignItems: 'center', margin: '0.5em 0', border: 'none', color: '#777777',
+          }}
+        >
+          Please click on intersections to select an intersection.
+        </Alert>
+      )}
       <Button onClick={() => setOpenAddPlot(true)}>Add Plot</Button>
       <AddPlotDialog open={openAddPlot} onClose={onClose} />
       <Box sx={{ overflowX: 'auto' }}>