Small table cell tooltip changes (#1967)

* Simplify cell tooltip labels and make them interactive

* Re-add CellTooltip with stopPropagation

Author: rogermparent

webview/src/experiments/components/App.test.tsx

@@ -637,7 +637,7 @@ describe('App', () => {
       const tooltip = screen.getByRole('tooltip')
       expect(tooltip).toBeInTheDocument()
 
-      expect(tooltip).toHaveTextContent(`Parameter: ${testParamStringValue}`)
+      expect(tooltip).toHaveTextContent(testParamStringValue)
 
       fireEvent.mouseLeave(testParamCell, { bubbles: true })
 
@@ -665,9 +665,7 @@ describe('App', () => {
       jest.advanceTimersByTime(CELL_TOOLTIP_DELAY)
       const tooltip = screen.getByRole('tooltip')
       expect(tooltip).toBeInTheDocument()
-      expect(tooltip).toHaveTextContent(
-        `Metric: ${String(testMetricNumberValue)}`
-      )
+      expect(tooltip).toHaveTextContent(String(testMetricNumberValue))
     })
   })
 

webview/src/experiments/util/buildDynamicColumns.tsx

@@ -22,23 +22,23 @@ const UndefinedCell = (
   </div>
 )
 
-const groupLabels: Record<string, string> = {
-  deps: 'Dep',
-  metrics: 'Metric',
-  params: 'Parameter'
-}
-
 const CellTooltip: React.FC<{
   cell: Cell<Experiment, string | number>
 }> = ({ cell }) => {
-  const {
-    column: { group },
-    value
-  } = cell
+  const { value } = cell
   return (
-    <>
-      {groupLabels[group as string]}: {value}
-    </>
+    <div
+      role="textbox"
+      tabIndex={0}
+      onClick={e => {
+        e.stopPropagation()
+      }}
+      onKeyDown={e => {
+        e.stopPropagation()
+      }}
+    >
+      {value}
+    </div>
   )
 }
 
@@ -62,6 +62,7 @@ const Cell: React.FC<Cell<Experiment, string | number>> = cell => {
       placement="bottom"
       arrow={true}
       delay={[CELL_TOOLTIP_DELAY, 0]}
+      interactive={true}
     >
       <div className={styles.innerCell}>
         <CopyButton

webview/src/shared/components/tooltip/styles.module.scss

@@ -17,7 +17,7 @@ $font: var(--vscode-font-family);
   white-space: nowrap;
   & > :global(.tippy-arrow) {
     color: $background;
-    z-index: 2;
+    z-index: 1;
     ::before {
       overflow: hidden;
     }
@@ -27,6 +27,6 @@ $font: var(--vscode-font-family);
     white-space: nowrap;
     padding: 0;
     background-color: $background;
-    z-index: 1;
+    z-index: 2;
   }
 }