Update cell hint styles and context menu position (#2384)

* make cell hint text smaller
* add hint to first cell bullet
* take off cell indicator tooltips
* have context menu appear based off of cursor position

Author: julieg18

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

@@ -5,9 +5,9 @@ import { IndicatorWithJustTheCounter } from './Indicators'
 import styles from './styles.module.scss'
 import { CellProp, RowProp } from './interfaces'
 import { CellRowActionsProps, CellRowActions } from './CellRowActions'
+import { CellHintTooltip } from './CellHintTooltip'
 import { clickAndEnterProps } from '../../../util/props'
 import { Clock } from '../../../shared/components/icons'
-import { pluralize } from '../../../util/strings'
 import { cellHasChanges } from '../../util/buildDynamicColumns'
 
 const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
@@ -63,21 +63,20 @@ export const FirstCell: React.FC<
       <div className={styles.innerCell}>
         <CellRowActions {...rowActionsProps} />
         <RowExpansionButton row={row} />
-        <span
-          className={styles.bullet}
-          style={{ color: bulletColor }}
-          {...clickAndEnterProps(toggleExperiment)}
-        >
-          <IndicatorWithJustTheCounter
-            aria-label={'Sub-rows selected for plots'}
-            count={plotSelections}
-            tooltipContent={`${plotSelections} ${pluralize(
-              'sub-row',
-              plotSelections
-            )} selected for plots.`}
-          />
-          {queued && <Clock />}
-        </span>
+        <CellHintTooltip tooltipContent={bulletColor ? 'Unplot' : 'Plot'}>
+          <span
+            className={styles.bullet}
+            style={{ color: bulletColor }}
+            {...clickAndEnterProps(toggleExperiment)}
+          >
+            <IndicatorWithJustTheCounter
+              aria-label={'Sub-rows selected for plots'}
+              count={plotSelections}
+              tooltipContent={''}
+            />
+            {queued && <Clock />}
+          </span>
+        </CellHintTooltip>
         {isPlaceholder ? null : (
           <ErrorTooltip error={error}>
             <div

webview/src/experiments/components/table/CellHintTooltip.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode, ReactElement } from 'react'
+import styles from './styles.module.scss'
+import Tooltip, {
+  CELL_TOOLTIP_DELAY
+} from '../../../shared/components/tooltip/Tooltip'
+
+export const CellHintTooltip: React.FC<{
+  tooltipContent: ReactNode
+  children: ReactElement
+}> = ({ tooltipContent, children }) => {
+  return (
+    <Tooltip
+      content={<span className={styles.cellHintTooltip}>{tooltipContent}</span>}
+      placement="bottom-start"
+      offset={[0, -2]}
+      delay={[CELL_TOOLTIP_DELAY, 0]}
+    >
+      {children}
+    </Tooltip>
+  )
+}

webview/src/experiments/components/table/CellRowActions.tsx

@@ -3,12 +3,9 @@ import cx from 'classnames'
 import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
 import { Indicator } from './Indicators'
 import styles from './styles.module.scss'
+import { CellHintTooltip } from './CellHintTooltip'
 import { clickAndEnterProps } from '../../../util/props'
 import { StarFull, StarEmpty } from '../../../shared/components/icons'
-import { pluralize } from '../../../util/strings'
-import Tooltip, {
-  CELL_TOOLTIP_DELAY
-} from '../../../shared/components/tooltip/Tooltip'
 
 export type CellRowActionsProps = {
   isRowSelected: boolean
@@ -26,7 +23,6 @@ export type CellRowActionsProps = {
 export type CellRowActionProps = {
   showSubRowStates: boolean
   subRowsAffected: number
-  actionAppliedLabel: string
   children: React.ReactElement
   hidden?: boolean
   testId?: string
@@ -36,7 +32,6 @@ export type CellRowActionProps = {
 export const CellRowAction: React.FC<CellRowActionProps> = ({
   showSubRowStates,
   subRowsAffected,
-  actionAppliedLabel,
   children,
   hidden,
   testId,
@@ -45,26 +40,16 @@ export const CellRowAction: React.FC<CellRowActionProps> = ({
   const count = (showSubRowStates && subRowsAffected) || 0
 
   return (
-    <Tooltip
-      content={tooltipContent}
-      placement="bottom-end"
-      delay={[CELL_TOOLTIP_DELAY, 0]}
-    >
+    <CellHintTooltip tooltipContent={tooltipContent}>
       <div
         className={cx(styles.rowActions, hidden && styles.hidden)}
         data-testid={testId}
       >
-        <Indicator
-          count={count}
-          tooltipContent={
-            count &&
-            `${count} ${pluralize('sub-row', count)} ${actionAppliedLabel}.`
-          }
-        >
+        <Indicator tooltipContent="" count={count}>
           {children}
         </Indicator>
       </div>
-    </Tooltip>
+    </CellHintTooltip>
   )
 }
 
@@ -81,7 +66,6 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
       <CellRowAction
         showSubRowStates={showSubRowStates}
         subRowsAffected={selections}
-        actionAppliedLabel={'selected'}
         testId={'row-action-checkbox'}
         tooltipContent={isRowSelected ? 'Unselect' : 'Select'}
       >
@@ -93,9 +77,8 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
       <CellRowAction
         showSubRowStates={showSubRowStates}
         subRowsAffected={stars}
-        actionAppliedLabel={'starred'}
         testId={'row-action-star'}
-        tooltipContent={starred ? 'Remove Star' : 'Add Star'}
+        tooltipContent={starred ? 'Star' : 'Unstar'}
       >
         <div
           className={styles.starSwitch}

webview/src/experiments/components/table/styles.module.scss

@@ -613,6 +613,10 @@ $workspace-row-edge-margin: $edge-padding - $cell-padding;
   }
 }
 
+.cellHintTooltip {
+  font-size: 0.65rem;
+}
+
 .webviewHeader {
   display: flex;
   justify-content: space-between;

webview/src/shared/components/contextMenu/ContextMenu.tsx

@@ -56,7 +56,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
   <Tooltip
     trigger={trigger}
     delay={[100, 200]}
-    placement={'right-start'}
+    placement={'bottom-start'}
     interactive
     isContextMenu={true}
     onTrigger={positionContextMenuAndDisableEvents}
@@ -66,6 +66,8 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     onShow={onShow}
     disabled={!content || disabled}
     appendTo={'parent'}
+    followCursor={'initial'}
+    offset={[0, 0]}
   >
     {children}
   </Tooltip>

webview/src/shared/components/tooltip/Tooltip.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, Ref } from 'react'
+import { followCursor } from 'tippy.js'
 import Tippy, { TippyProps } from '@tippyjs/react'
 import styles from './styles.module.scss'
 import 'tippy.js/dist/tippy.css'
@@ -49,7 +50,9 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     onTrigger,
     appendTo,
     isContextMenu = false,
-    animation = false
+    animation = false,
+    followCursor: followCursorVal,
+    offset
   },
   ref
 ) => (
@@ -78,7 +81,9 @@ const TooltipRenderFunction: React.ForwardRefRenderFunction<
     onShow={onShow}
     onHide={onHide}
     ref={ref as Ref<Element>}
-    plugins={[hideOnEsc]}
+    followCursor={followCursorVal}
+    plugins={[hideOnEsc, followCursor]}
+    offset={offset}
   >
     {children}
   </Tippy>

webview/src/stories/Table.stories.tsx

@@ -154,9 +154,12 @@ const contextMenuPlay = async ({
   canvasElement: HTMLElement
 }) => {
   const experiment = await within(canvasElement).findByText('[exp-e7a67]')
+  const clientRect = experiment.getBoundingClientRect()
   userEvent.click(experiment, {
     bubbles: true,
-    button: 2
+    button: 2,
+    clientX: clientRect.left,
+    clientY: clientRect.top
   })
 }