Move tooltip to its own component

webview/src/experiments/components/cell/Cell.tsx

@@ -1,32 +1,14 @@
 import { Experiment } from 'dvc/src/experiments/webview/contract'
 import React from 'react'
 import { Cell } from 'react-table'
+import { CellTooltip } from './CellTooltip'
 import { CopyButton } from '../copyButton/CopyButton'
 import Tooltip, {
   CELL_TOOLTIP_DELAY
 } from '../../../shared/components/tooltip/Tooltip'
 import { formatFloat } from '../../util/numberFormatting'
 import styles from '../table/styles.module.scss'
 
-const groupLabels: Record<string, string> = {
-  metrics: 'Metric',
-  params: 'Parameter'
-}
-
-const CellTooltip: React.FC<{
-  cell: Cell<Experiment, string | number>
-}> = ({ cell }) => {
-  const {
-    column: { group },
-    value
-  } = cell
-  return (
-    <>
-      {groupLabels[group as string]}: {value}
-    </>
-  )
-}
-
 const UndefinedCell = (
   <div className={styles.innerCell}>
     <span className={styles.cellContents}>. . .</span>

webview/src/experiments/components/cell/CellTooltip.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Cell } from 'react-table'
+import { Experiment } from 'dvc/src/experiments/webview/contract'
+
+const groupLabels: Record<string, string> = {
+  metrics: 'Metric',
+  params: 'Parameter'
+}
+
+export const CellTooltip: React.FC<{
+  cell: Cell<Experiment, string | number>
+}> = ({ cell }) => {
+  const {
+    column: { group },
+    value
+  } = cell
+  return (
+    <>
+      {groupLabels[group as string]}: {value}
+    </>
+  )
+}