Merge pull request #473 from visdesignlab/430-tooltips

In-plot tooltips
visdesignlab · Feb 11, 2025 · 835a285 · 835a285
2 parents 5adb356 + 9ccdce2
commit 835a285
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 28 deletions.
diff --git a/e2e-tests/elementView.spec.ts b/e2e-tests/elementView.spec.ts
@@ -217,7 +217,7 @@ async function setQuery(page: Page, att: string, type: string, query: string): P
 test('Query Selection', async ({ page }) => {
   await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
   await page.getByLabel('Element View Sidebar Toggle').click();
-  await page.locator('[id="Subset_School\\~\\&\\~Male"] g').filter({ hasText: /^Blue Hair$/ }).locator('circle').click();
+  await page.locator('[id="Subset_School\\~\\&\\~Male"]').getByLabel('Blue Hair').locator('circle').click();
 
   // Selected elements for testing
   const ralphCell = page.getByRole('cell', { name: 'Ralph' });

diff --git a/packages/upset/src/components/Columns/Attribute/AttributeBar.tsx b/packages/upset/src/components/Columns/Attribute/AttributeBar.tsx
@@ -3,6 +3,7 @@ import {
 } from '@visdesignlab/upset2-core';
 import React, { FC } from 'react';
 import { useRecoilValue } from 'recoil';
+import { Tooltip } from '@mui/material';
 import { attributeMinMaxSelector } from '../../../atoms/attributeAtom';
 import { dimensionsSelector } from '../../../atoms/dimensionsAtom';
 import { useScale } from '../../../hooks/useScale';
@@ -87,12 +88,33 @@ export const AttributeBar: FC<Props> = ({ attribute, summary, row }) => {
     return <BoxPlot scale={scale} summary={summary as SixNumberSummary} />;
   }
 
+  /**
+   * Round a number to 3 decimal places
+   */
+  function round3(num: number | undefined): number {
+    if (num === undefined) {
+      return NaN;
+    }
+    return Math.round(num * 1000) / 1000;
+  }
+
   return (
     <g transform={translate(0, dimensions.attribute.plotHeight / 2)}>
       {
         typeof summary === 'number' ?
           <DeviationBar deviation={summary} /> :
-          getAttributePlotToRender()
+          <Tooltip
+            title={
+              <div style={{ whiteSpace: 'pre-line' }}>
+                {`Q1: ${round3(summary.first)}\nMean: ${round3(summary.mean)}\nMedian: ${round3(summary.median)}\nQ3: ${round3(summary.third)}`}
+              </div>
+            }
+          >
+            {/* Wrapping <g> is necessary for the Tooltip to work (it needs a specific contained component that can take a ref) */}
+            <g>
+              {getAttributePlotToRender()}
+            </g>
+          </Tooltip>
       }
     </g>
   );

diff --git a/packages/upset/src/components/Columns/Attribute/AttributePlots/DensityPlot.tsx b/packages/upset/src/components/Columns/Attribute/AttributePlots/DensityPlot.tsx
@@ -72,7 +72,7 @@ export const DensityPlot: FC<Props> = ({
       id="Density"
       transform={`translate(0, ${-dimensions.attribute.plotHeight / 1.5})`}
     >
-      <foreignObject width={dimensions.attribute.width} height={dimensions.attribute.plotHeight + 20}>
+      <foreignObject width={dimensions.attribute.width} height={dimensions.attribute.plotHeight}>
         <MemoizedDensityVega
           values={values}
           fillColor={fillColor}

diff --git a/packages/upset/src/components/Columns/DeviationBar.tsx b/packages/upset/src/components/Columns/DeviationBar.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 
+import { Tooltip } from '@mui/material';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { deviationScaleAtom } from '../../atoms/scaleAtoms';
 import translate from '../../utils/transform';
@@ -21,21 +22,23 @@ export const DeviationBar: FC<Props> = ({ deviation }) => {
   deviationScale.range([0, dimensions.attribute.width]);
 
   return (
-    <g
-      transform={translate(
-        dimensions.attribute.width / 2,
-        0,
-      )}
-    >
-      <rect
-        fill={(deviation > 0) ? positiveDeviation : negativeDeviation}
+    <Tooltip title={`${Math.round(deviation * 1000) / 1000}`}>
+      <g
         transform={translate(
-          deviation > 0 ? 0 : -deviationScale(Math.abs(deviation)) + dimensions.attribute.width / 2,
+          dimensions.attribute.width / 2,
           0,
         )}
-        height={dimensions.attribute.plotHeight}
-        width={deviationScale(Math.abs(deviation)) - dimensions.attribute.width / 2}
-      />
-    </g>
+      >
+        <rect
+          fill={(deviation > 0) ? positiveDeviation : negativeDeviation}
+          transform={translate(
+            deviation > 0 ? 0 : -deviationScale(Math.abs(deviation)) + dimensions.attribute.width / 2,
+            0,
+          )}
+          height={dimensions.attribute.plotHeight}
+          width={deviationScale(Math.abs(deviation)) - dimensions.attribute.width / 2}
+        />
+      </g>
+    </Tooltip>
   );
 };
diff --git a/packages/upset/src/components/Columns/Matrix/Matrix.tsx b/packages/upset/src/components/Columns/Matrix/Matrix.tsx
@@ -4,6 +4,7 @@ import {
 import { FC } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { Tooltip } from '@mui/material';
 import { dimensionsSelector } from '../../../atoms/dimensionsAtom';
 import { columnHoverAtom, columnSelectAtom } from '../../../atoms/highlightAtom';
 import ConnectingLine from './ConnectingLine';
@@ -59,9 +60,6 @@ export const Matrix: FC<Props> = ({
               }
               onMouseLeave={() => setColumnHover([])}
             >
-              <title>
-                {setList[set].elementName}
-              </title>
               <rect
                 transform={translate(idx * dimensions.set.width - dimensions.set.width / 2, 0)}
                 height={dimensions.body.rowHeight}
@@ -73,15 +71,19 @@ export const Matrix: FC<Props> = ({
                 }
                 fillOpacity="0.0"
               />
-              <MemberShipCircle
-                key={`circle ${set}`}
-                membershipStatus={membershipStatus}
-                cx={idx * dimensions.set.width}
-                cy={dimensions.body.rowHeight / 2}
-                pointerEvents="all"
-                showoutline={isRowAggregate(subset)}
-                fillOpacity="1.0"
-              />
+              <Tooltip title={setList[set].elementName}>
+                <g>
+                  <MemberShipCircle
+                    key={`circle ${set}`}
+                    membershipStatus={membershipStatus}
+                    cx={idx * dimensions.set.width}
+                    cy={dimensions.body.rowHeight / 2}
+                    pointerEvents="all"
+                    showoutline={isRowAggregate(subset)}
+                    fillOpacity="1.0"
+                  />
+                </g>
+              </Tooltip>
             </Group>
           );
         })}