From 39a7b3a47e4be9b2ce74d5e90a4bdca26df81ab9 Mon Sep 17 00:00:00 2001
From: Nate Lanza <natelanzadevelopment@gmail.com>
Date: Mon, 29 Apr 2024 21:53:18 -0600
Subject: [PATCH] Update selected size bar color to match bookmark color & add
 docs

---
 .../upset/src/atoms/config/currentIntersectionAtom.ts     | 8 ++++++++
 packages/upset/src/components/Columns/SizeBar.tsx         | 5 +++--
 packages/upset/src/components/Rows/MatrixRows.tsx         | 5 +++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/upset/src/atoms/config/currentIntersectionAtom.ts b/packages/upset/src/atoms/config/currentIntersectionAtom.ts
index ae27048f..1df2d1b7 100644
--- 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
index c7bdc4ea..3806c669 100644
--- 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
index ed5fec40..20c162f6 100644
--- 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} />;