In-plot bookmarking

packages/upset/src/atoms/config/currentIntersectionAtom.ts

@@ -1,5 +1,5 @@
 import { Bookmark, Row } from '@visdesignlab/upset2-core';
-import { selector } from 'recoil';
+import { selector, selectorFamily } from 'recoil';
 
 import { queryColorPalette } from '../../utils/styles';
 import { upsetConfigAtom } from './upsetConfigAtoms';
@@ -64,6 +64,41 @@ export const nextColorSelector = selector<string>({
   },
 });
 
+/**
+ * Selector to determine if a row is bookmarked.
+ *
+ * This selector uses the `bookmarkSelector` to get the list of bookmarks and checks if the given row
+ * is present in that list by comparing the row's ID with the IDs of the bookmarks.
+ *
+ * @param row - The row to check for being bookmarked.
+ * @returns A boolean indicating whether the row is bookmarked.
+ */
+export const isRowBookmarkedSelector = selectorFamily<boolean, Row>({
+  key: 'is-row-bookmarked',
+  get: (row: Row) => ({ get }) => {
+    const bookmarks = get(bookmarkSelector);
+    return bookmarks.some(b => b.id === row.id);
+  },
+});
+
+/**
+ * Selector to get the color associated with a bookmarked row OR to get the next color if the row is not bookmarked.
+ *
+ * This selector uses the `bookmarkedColorPalette` to find the color for the given row.
+ * If the row does not have a color in the palette, it falls back to the `nextColorSelector`.
+ *
+ * @param row - The row for which the color is being selected.
+ * @returns The color associated with the given row.
+ */
+export const BookmarkedColorSelector = selectorFamily<string, Row>({
+  key: 'bookmarked-color-selector',
+  get: (row: Row) => ({ get }) => {
+    const palette = get(bookmarkedColorPalette);
+    const nextColor = get(nextColorSelector);
+    return palette[row.id] || nextColor;
+  },
+});
+
 /**
  * The color to use for the current element selection stored in the config
  */

packages/upset/src/components/Columns/BookmarkStar.tsx

@@ -1,20 +1,13 @@
 import { Row } from '@visdesignlab/upset2-core';
 import StarIcon from '@mui/icons-material/Star';
-import {
-  FC,
-  MouseEvent,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
+import { FC, MouseEvent, useContext, useMemo, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { ProvenanceContext } from '../Root';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import translate from '../../utils/transform';
 import {
-  bookmarkedColorPalette,
-  bookmarkSelector,
-  nextColorSelector,
+  BookmarkedColorSelector,
+  isRowBookmarkedSelector,
 } from '../../atoms/config/currentIntersectionAtom';
 
 type Props = {
@@ -39,23 +32,13 @@ const BOOKMARKED_OPACITY = 1.0;
  */
 export const BookmarkStar: FC<Props> = ({ row }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
-  const colorPallete = useRecoilValue(bookmarkedColorPalette);
-  const nextColor = useRecoilValue(nextColorSelector);
-  const bookmarks = useRecoilValue(bookmarkSelector);
+  const bookmarked = useRecoilValue(isRowBookmarkedSelector(row));
+  const color = useRecoilValue(BookmarkedColorSelector(row));
   const { actions } = useContext(ProvenanceContext);
 
-  const [hovered, setHovered] = useState(false);
-  const bookmarked = useMemo(() => bookmarks.find((b) => b.id === row.id), [
-    bookmarks,
-    row.id,
-  ]);
+  const rowDisplayName = row.elementName.replaceAll('~&~', ' & ') || '';
 
-  const color = useMemo(() => (bookmarked ? colorPallete[row.id] : nextColor), [
-    colorPallete,
-    row.id,
-    bookmarked,
-    nextColor,
-  ]);
+  const [hovered, setHovered] = useState(false);
 
   /**
    * Calculates the opacity value based on the bookmark and hover states.
@@ -98,14 +81,14 @@ export const BookmarkStar: FC<Props> = ({ row }) => {
     event.stopPropagation();
     if (bookmarked) {
       actions.removeBookmark(bookmarked);
-      return;
+    } else {
+      actions.addBookmark({
+        id: row.id,
+        label: rowDisplayName,
+        size: row.size,
+        type: 'intersection',
+      });
     }
-    actions.addBookmark({
-      id: row.id,
-      label: row.elementName,
-      size: row.size,
-      type: 'intersection',
-    });
   };
 
   return (
@@ -120,6 +103,11 @@ export const BookmarkStar: FC<Props> = ({ row }) => {
       onMouseLeave={handleMouseLeave}
       onClick={(e: any) => handleClick(e)}
     >
+      <rect
+        height={dimensions.body.rowHeight}
+        width={dimensions.set.width}
+        fill="transparent"
+      />
       <StarIcon
         height={dimensions.body.rowHeight}
         width={dimensions.set.width}