From 11e04f88442e33a4aa5e9eebbd97af57b70aa4be Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Thu, 7 Nov 2024 16:02:10 -0700
Subject: [PATCH 1/3] Add background rect element for onclick zone in aggregate
 row collapse icon

---
 .../src/components/Rows/AggregateRow.tsx      | 79 +++++++++++++------
 1 file changed, 57 insertions(+), 22 deletions(-)

diff --git a/packages/upset/src/components/Rows/AggregateRow.tsx b/packages/upset/src/components/Rows/AggregateRow.tsx
index b488f671..6d33a57a 100644
--- a/packages/upset/src/components/Rows/AggregateRow.tsx
+++ b/packages/upset/src/components/Rows/AggregateRow.tsx
@@ -7,7 +7,10 @@ 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 {
+  bookmarkSelector,
+  currentIntersectionSelector,
+} from '../../atoms/config/currentIntersectionAtom';
 import translate from '../../utils/transform';
 import { highlight, mousePointer } from '../../utils/styles';
 import { SizeBar } from '../Columns/SizeBar';
@@ -43,7 +46,15 @@ const expanded = (
  * Collapsed icon for the AggregateRow component.
  */
 export const collapsed = (
-  <g transform={`rotate(180) translate(-${iconSize.replace('px', '')}, -${iconSize.replace('px', '')})`} className="icon" textAnchor="middle" dominantBaseline="middle">
+  <g
+    transform={`rotate(180) translate(-${iconSize.replace(
+      'px',
+      '',
+    )}, -${iconSize.replace('px', '')})`}
+    className="icon"
+    textAnchor="middle"
+    dominantBaseline="middle"
+  >
     <SvgIcon height={iconSize} width={iconSize}>
       <KeyboardArrowDownIcon />
     </SvgIcon>
@@ -85,19 +96,28 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
   return (
     <g
       id={aggregateRow.id}
-      onClick={() => aggregateRow &&
-        (currentIntersection?.id === aggregateRow.id ?
-          actions.setSelected(null) : actions.setSelected(aggregateRow))}
+      onClick={() =>
+        aggregateRow &&
+        (currentIntersection?.id === aggregateRow.id
+          ? actions.setSelected(null)
+          : actions.setSelected(aggregateRow))
+      }
       css={mousePointer}
     >
-      <g transform={translate(aggregateRow.level === 2 ? secondLevelXOffset : 2, 0)}>
+      <g
+        transform={translate(
+          aggregateRow.level === 2 ? secondLevelXOffset : 2,
+          0,
+        )}
+      >
         <rect
           transform={translate(0, 2)}
-          css={
-            (currentIntersection?.id === aggregateRow.id) &&
-              highlight
+          css={currentIntersection?.id === aggregateRow.id && highlight}
+          height={
+            ['Sets', 'Overlaps'].includes(aggregateRow.aggregateBy)
+              ? (dimensions.body.rowHeight - 4) * 2
+              : dimensions.body.rowHeight - 4
           }
-          height={(['Sets', 'Overlaps'].includes(aggregateRow.aggregateBy)) ? (dimensions.body.rowHeight - 4) * 2 : dimensions.body.rowHeight - 4}
           width={width}
           rx={5}
           ry={10}
@@ -106,16 +126,21 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
           stroke="#555555"
           strokeWidth="1px"
         />
-        <g
-          onClick={() => {
-            if (collapsedIds.includes(aggregateRow.id)) {
-              actions.removeCollapsed(aggregateRow.id);
-            } else {
-              actions.addCollapsed(aggregateRow.id);
-            }
-          }}
-        >
-          { collapsedIds.includes(aggregateRow.id) ? collapsed : expanded}
+        <g>
+          {collapsedIds.includes(aggregateRow.id) ? collapsed : expanded}
+          {/* onclick background element */}
+          <rect
+            width={iconSize}
+            height={iconSize}
+            fill="transparent"
+            onClick={() => {
+              if (collapsedIds.includes(aggregateRow.id)) {
+                actions.removeCollapsed(aggregateRow.id);
+              } else {
+                actions.addCollapsed(aggregateRow.id);
+              }
+            }}
+          />
         </g>
         <text
           css={css`
@@ -138,14 +163,24 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
           />
         </g>
       )}
-      <g transform={translate(0, (['Sets', 'Overlaps'].includes(aggregateRow.aggregateBy)) ? dimensions.body.rowHeight - 5 : 0)}>
+      <g
+        transform={translate(
+          0,
+          ['Sets', 'Overlaps'].includes(aggregateRow.aggregateBy)
+            ? dimensions.body.rowHeight - 5
+            : 0,
+        )}
+      >
         <BookmarkStar row={aggregateRow} />
         <SizeBar
           row={aggregateRow}
           size={aggregateRow.size}
           selected={selected}
         />
-        <AttributeBars attributes={aggregateRow.attributes} row={aggregateRow} />
+        <AttributeBars
+          attributes={aggregateRow.attributes}
+          row={aggregateRow}
+        />
       </g>
     </g>
   );

From 28f0e3be3baea49015f32593ad3341c848d79c90 Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Thu, 7 Nov 2024 16:34:10 -0700
Subject: [PATCH 2/3] Prevent rowclick propagation on click for aggregate row
 collapse icon

---
 packages/upset/src/components/Rows/AggregateRow.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/upset/src/components/Rows/AggregateRow.tsx b/packages/upset/src/components/Rows/AggregateRow.tsx
index 6d33a57a..70830599 100644
--- a/packages/upset/src/components/Rows/AggregateRow.tsx
+++ b/packages/upset/src/components/Rows/AggregateRow.tsx
@@ -133,7 +133,8 @@ export const AggregateRow: FC<Props> = ({ aggregateRow }) => {
             width={iconSize}
             height={iconSize}
             fill="transparent"
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation();
               if (collapsedIds.includes(aggregateRow.id)) {
                 actions.removeCollapsed(aggregateRow.id);
               } else {

From 6382dd1c73f75306af95976ded6134d0eb2683a3 Mon Sep 17 00:00:00 2001
From: Jake Wagoner <jakewagoneredu@gmail.com>
Date: Thu, 14 Nov 2024 14:45:06 -0700
Subject: [PATCH 3/3] Update selector for aggregate row selection in e2e
 testing

---
 e2e-tests/provenance.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e-tests/provenance.spec.ts b/e2e-tests/provenance.spec.ts
index 2804675f..c825a877 100644
--- a/e2e-tests/provenance.spec.ts
+++ b/e2e-tests/provenance.spec.ts
@@ -24,9 +24,9 @@ test('Selection History', async ({ page }) => {
 
   // Testing history for an aggregate row selection & deselection
   await page.getByRole('radio', { name: 'Degree' }).check();
-  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').click();
+  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0).click();
   await expect(page.locator('div').filter({ hasText: /^Select intersection "Degree 3"$/ }).nth(2)).toBeVisible();
-  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').click();
+  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0).click();
   await expect(page.getByText('Deselect intersection').nth(1)).toBeVisible();
 
   // Check that selections are maintained after de-aggregation