Add better help tooltips to column headers

e2e-tests/alttext.spec.ts

@@ -31,7 +31,7 @@ test('Alt Text', async ({ page }) => {
   await page.getByRole('radio', { name: 'None' }).check();
 
   /// Attribute Sort
-  await page.getByLabel('Age').locator('rect').dispatchEvent('click');
+  await page.getByText('Age', { exact: true }).click({ force: true });
   const attrSortErrMsg = page.getByText('Alt text generation is not yet supported for attribute sorting. To generate an alt text, sort by Size, Degree, or Deviation.');
   await expect(attrSortErrMsg).toBeVisible();
 

e2e-tests/attributeSelector.spec.ts

@@ -19,7 +19,7 @@ test('Attribute Dropdown', async ({ page }) => {
   await page.getByLabel('Attributes selection menu').click();
   await page.getByLabel('Age').check();
   await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByLabel('Age').locator('rect')).toBeVisible();
+  await expect(page.getByText('Age', { exact: true })).toBeVisible();
 
   /// /////////////////
   // Degree
@@ -28,13 +28,13 @@ test('Attribute Dropdown', async ({ page }) => {
   await page.getByLabel('Attributes selection menu').click();
   await page.getByRole('checkbox', { name: 'Degree' }).uncheck();
   await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.locator('#upset-svg').getByLabel('Degree').locator('rect')).toHaveCount(0);
+  await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
   await page.getByLabel('Attributes selection menu').click();
   await page.getByRole('checkbox', { name: 'Degree' }).check();
   await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.locator('#upset-svg').getByLabel('Degree').locator('rect')).toBeVisible();
+  await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toBeVisible();
 
   /// /////////////////
   // Deviation
@@ -49,5 +49,5 @@ test('Attribute Dropdown', async ({ page }) => {
   await page.getByLabel('Attributes selection menu').click();
   await page.getByRole('checkbox', { name: 'Deviation' }).check();
   await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByLabel('Deviation', { exact: true }).locator('rect')).toBeVisible();
+  await expect(page.getByText('Deviation', { exact: true })).toBeVisible();
 });

e2e-tests/plot.spec.ts

@@ -91,7 +91,7 @@ test('Attribute Plot Types', async ({ page }) => {
   // remove 'Male' set so that there are attributes with at least 6 items (threshold for dotplot)
   await removeSetByName(page, 'Male');
 
-  const ageAttributeHeader = page.getByLabel('Age').locator('rect');
+  const ageAttributeHeader = page.locator('#header-text-Age');
 
   await ageAttributeHeader.click({ button: 'right', force: true });
 

e2e-tests/sort.spec.ts

@@ -124,11 +124,11 @@ test('Sort by Deviation', async ({ page }) => {
   await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
 
   /// Ascending
-  await page.getByLabel('Deviation', { exact: true }).locator('rect').dispatchEvent('click');
+  await page.getByText('Deviation', { exact: true }).dispatchEvent('click');
   await compareSortedElements(page, DEVIATION_ORDER.Ascending);
 
   /// Descending
-  await page.getByLabel('Deviation', { exact: true }).locator('rect').dispatchEvent('click');
+  await page.getByText('Deviation', { exact: true }).dispatchEvent('click');
   await compareSortedElements(page, DEVIATION_ORDER.Descending);
 });
 

packages/upset/src/components/Header/AttributeButton.tsx

@@ -19,6 +19,12 @@ type Props = {
    * Text to display on the attribute button
    */
   label: string;
+  /**
+   * Text to display on the attribute button tooltip.
+   * Optional, defaults to label
+   * HTML will be rendered in the tooltip
+   */
+  tooltip?: string;
 };
 
 /**
@@ -30,7 +36,7 @@ type Props = {
  *   <AttributeButton label="Name" />
  * )
  */
-export const AttributeButton: FC<Props> = ({ label }) => {
+export const AttributeButton: FC<Props> = ({ label, tooltip }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const { actions } = useContext(
     ProvenanceContext,
@@ -147,7 +153,7 @@ export const AttributeButton: FC<Props> = ({ label }) => {
   };
 
   return (
-    <Tooltip title={label} arrow placement="top">
+    <Tooltip title={<div dangerouslySetInnerHTML={{ __html: tooltip ?? label }} />} arrow placement="top">
       <g
         css={{
           '&:hover': {

packages/upset/src/components/Header/DegreeHeader.tsx

@@ -89,7 +89,7 @@ export const DegreeHeader = () => {
       )}
 
     >
-      <Tooltip title="Degree" arrow placement="top">
+      <Tooltip title="Number of intersecting sets" arrow placement="top">
         <g
           className="degree-button"
           css={css`

packages/upset/src/components/Header/DeviationHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
@@ -13,7 +12,10 @@ export const DeviationHeader = () => {
 
   return (
     <g>
-      <AttributeButton label="Deviation" />
+      <AttributeButton
+        label="Deviation"
+        tooltip='Measure for how "surprising" the size of an intersection is. This also considers the size of the sets. For more information visit <a href="https://upset.app/advanced/">https://upset.app/advanced/</a>'
+      />
       <g
         transform={translate(
           0,

packages/upset/src/components/Header/SizeHeader.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { Tooltip } from '@mui/material';
 import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAtom';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { itemsAtom } from '../../atoms/itemsAtoms';
@@ -103,7 +104,7 @@ export const SizeHeader: FC = () => {
 
   /**
    * Updates the scale of the header based on the largest subset as long as the advanced scale slider hasn't taken
-   * control and set a value 
+   * control and set a value
    */
   useEffect(() => {
     if (advancedScale) return;
@@ -226,55 +227,57 @@ export const SizeHeader: FC = () => {
             2 * dimensions.size.gap} H ${dimensions.attribute.width} z`}
         />
       </g>
-      <g
-        className="size-button"
-        css={css`
+      <Tooltip title="Size (cardinality)" arrow placement="top">
+        <g
+          className="size-button"
+          css={css`
           ${sliding ? hide : show};
           cursor: context-menu;
           &:hover {
             opacity: 0.7;
             transition: opacity 0s;
-          }
-        `}
-        transform={translate(
-          0,
-          dimensions.size.scaleHeight + dimensions.size.gap,
-        )}
-        onContextMenu={(e: any) => {
-          e.preventDefault();
-          e.stopPropagation();
-          openContextMenu(e);
-        }}
-        onClick={handleOnClick}
-      >
-        <rect
-          fill="#ccc"
-          stroke="#000"
-          opacity="0.5"
-          strokeWidth="0.3px"
-          height={dimensions.size.buttonHeight}
-          width={dimensions.attribute.width}
-        />
-        <g
+            }
+            `}
           transform={translate(
-            dimensions.attribute.width / 2,
-            dimensions.size.buttonHeight / 2,
+            0,
+            dimensions.size.scaleHeight + dimensions.size.gap,
           )}
+          onContextMenu={(e: any) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openContextMenu(e);
+          }}
+          onClick={handleOnClick}
         >
-          <text
-            id="header-text"
-            css={css`
-              pointer-event: none;
-            `}
-            dominantBaseline="middle"
-            textAnchor="middle"
+          <rect
+            fill="#ccc"
+            stroke="#000"
+            opacity="0.5"
+            strokeWidth="0.3px"
+            height={dimensions.size.buttonHeight}
+            width={dimensions.attribute.width}
+          />
+          <g
+            transform={translate(
+              dimensions.attribute.width / 2,
+              dimensions.size.buttonHeight / 2,
+            )}
           >
-            Size
-          </text>
-          { sortBy === 'Size' &&
+            <text
+              id="header-text"
+              css={css`
+              pointer-event: none;
+              `}
+              dominantBaseline="middle"
+              textAnchor="middle"
+            >
+              Size
+            </text>
+            { sortBy === 'Size' &&
             <HeaderSortArrow />}
+          </g>
         </g>
-      </g>
+      </Tooltip>
       <g
         className="details-scale"
         transform={translate(