Merge pull request #420 from visdesignlab/402-add-bgrect-collapse

402 add bgrect collapse
visdesignlab · Nov 14, 2024 · 031c462 · 031c462
2 parents 0548dcc + 7f8f128
commit 031c462
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git 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

diff --git 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,22 @@ 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={(e) => {
+              e.stopPropagation();
+              if (collapsedIds.includes(aggregateRow.id)) {
+                actions.removeCollapsed(aggregateRow.id);
+              } else {
+                actions.addCollapsed(aggregateRow.id);
+              }
+            }}
+          />
         </g>
         <text
           css={css`
@@ -138,14 +164,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>
   );