In-plot tooltips

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>
   );

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>
   );
 };