Merge pull request #357 from visdesignlab/343-selection-color

Update selected size bar color to match bookmark color
visdesignlab · May 2, 2024 · f288640 · f288640
2 parents def4a45 + 39a7b3a
commit f288640
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/upset/src/atoms/config/currentIntersectionAtom.ts b/packages/upset/src/atoms/config/currentIntersectionAtom.ts
@@ -27,6 +27,10 @@ export const bookmarkedIntersectionSelector = selector<Bookmark[]>({
   },
 });
 
+/**
+ * Represents the color palette for the bookmarked intersections.
+ * Maps intersection IDs to colors, both as strings.
+ */
 export const bookmarkedColorPalette = selector<{
   [intersection: string]: string;
 }>({
@@ -44,6 +48,10 @@ export const bookmarkedColorPalette = selector<{
   },
 });
 
+/**
+ * The next color to be used for a newly bookmarked intersection;
+ * comes from the queryColorPalette.
+ */
 export const nextColorSelector = selector<string>({
   key: 'color-selector',
   get: ({ get }) => {

diff --git a/packages/upset/src/components/Columns/SizeBar.tsx b/packages/upset/src/components/Columns/SizeBar.tsx
@@ -2,7 +2,7 @@ import { Row } from '@visdesignlab/upset2-core';
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { bookmarkedColorPalette, bookmarkedIntersectionSelector, currentIntersectionSelector } from '../../atoms/config/currentIntersectionAtom';
+import { bookmarkedColorPalette, bookmarkedIntersectionSelector, currentIntersectionSelector, nextColorSelector } from '../../atoms/config/currentIntersectionAtom';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { maxSize } from '../../atoms/maxSizeAtom';
 import { useScale } from '../../hooks/useScale';
@@ -24,6 +24,7 @@ export const SizeBar: FC<Props> = ({ row, size }) => {
   const currentIntersection = useRecoilValue(currentIntersectionSelector);
   const bookmarkedIntersections = useRecoilValue(bookmarkedIntersectionSelector);
   const bookmarkedColorPallete = useRecoilValue(bookmarkedColorPalette);
+  const nextColor = useRecoilValue(nextColorSelector);
 
   const scale = useScale(
     [0, sizeDomain],
@@ -58,7 +59,7 @@ export const SizeBar: FC<Props> = ({ row, size }) => {
 
     // We don't want to evaluate this to true if both currentIntersection and row are undefined, hence the 1st condition
     if (currentIntersection && currentIntersection?.id === row?.id) { // if currently selected, use the highlight colors
-      return highlightColors[index];
+      return nextColor;
     }
     return colors[index];
   }

diff --git a/packages/upset/src/components/Rows/MatrixRows.tsx b/packages/upset/src/components/Rows/MatrixRows.tsx
@@ -13,6 +13,11 @@ type Props = {
   rows: RenderRow[];
 };
 
+/**
+ * Renders a row based on its type.
+ * @param row - The row to be rendered.
+ * @returns The rendered row component.
+ */
 export function rowRenderer(row: Row) {
   if (isRowAggregate(row)) {
     return <AggregateRow aggregateRow={row} />;