Switch experiment table radio buttons to plot icons (#4121)

* switch experiment table radio buttons to plot icons

* move towards Studio design

* self review

* move fill to background color

* shrink icon and change selected color

Author: mattseddon

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

@@ -668,10 +668,10 @@ describe('App', () => {
 
       expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
 
-      const radioButton = within(getRow(EXPERIMENT_WORKSPACE_ID)).getByTestId(
+      const plotIcon = within(getRow(EXPERIMENT_WORKSPACE_ID)).getByTestId(
         'row-action-plot'
       )
-      fireEvent.mouseEnter(radioButton)
+      fireEvent.mouseEnter(plotIcon)
 
       advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
       const tooltip = screen.queryByRole('tooltip')
@@ -692,8 +692,8 @@ describe('App', () => {
 
       expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
 
-      const radioButton = within(getRow('main')).getByTestId('row-action-star')
-      fireEvent.mouseEnter(radioButton)
+      const starIcon = within(getRow('main')).getByTestId('row-action-star')
+      fireEvent.mouseEnter(starIcon)
 
       advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0])
       const tooltip = screen.queryByRole('tooltip')

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

@@ -1,6 +1,8 @@
 import { flexRender } from '@tanstack/react-table'
 import React, { ReactNode } from 'react'
+import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import cx from 'classnames'
+import { isRunning } from 'dvc/src/experiments/webview/contract'
 import { CellRowActionsProps, CellRowActions } from './CellRowActions'
 import styles from '../styles.module.scss'
 import { CellValue, isValueWithChanges } from '../content/Cell'
@@ -59,6 +61,12 @@ export const FirstCell: React.FC<
       <div className={styles.innerCell} style={{ width: getSize() }}>
         <CellRowActions status={status} {...rowActionsProps} />
         <RowExpansionButton row={row} />
+        {isRunning(status) && (
+          <VSCodeProgressRing
+            className={cx(styles.running, 'chromatic-ignore')}
+          />
+        )}
+
         {getIsPlaceholder() ? null : (
           <ErrorTooltip error={error}>
             <div

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

@@ -9,18 +9,24 @@ import { Indicator } from '../Indicators'
 import { addStarredFilter, openPlotsWebview } from '../../../util/messages'
 import styles from '../styles.module.scss'
 import { clickAndEnterProps } from '../../../../util/props'
-import { Clock, StarFull, StarEmpty } from '../../../../shared/components/icons'
+import {
+  Clock,
+  StarFull,
+  StarEmpty,
+  GraphScatter
+} from '../../../../shared/components/icons'
+import { Icon } from '../../../../shared/components/Icon'
 
 export type CellRowActionsProps = {
-  bulletColor?: string
   isRowSelected: boolean
+  plotColor?: string
   showSubRowStates: boolean
   starred?: boolean
   status?: ExperimentStatus
   subRowStates: {
+    plotSelections: number
     selections: number
     stars: number
-    plotSelections: number
   }
   toggleExperiment: () => void
   toggleRowSelection: () => void
@@ -37,12 +43,12 @@ type CellRowActionProps = {
 }
 
 const CellRowAction: React.FC<CellRowActionProps> = ({
+  children,
+  onClick,
   showSubRowStates,
   subRowsAffected,
-  children,
   testId,
-  tooltipContent,
-  onClick
+  tooltipContent
 }) => {
   const count = (showSubRowStates && subRowsAffected) || 0
 
@@ -81,13 +87,13 @@ const ClickableTooltipContent: React.FC<ClickableTooltipContentProps> = ({
 )
 
 export const CellRowActions: React.FC<CellRowActionsProps> = ({
-  bulletColor,
+  plotColor,
   status,
   toggleExperiment,
   isRowSelected,
   showSubRowStates,
   starred,
-  subRowStates: { selections, stars, plotSelections },
+  subRowStates: { plotSelections, selections, stars },
   toggleRowSelection,
   toggleStarred
 }) => {
@@ -104,6 +110,40 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
           checked={isRowSelected}
         />
       </CellRowAction>
+      {isQueued(status) ? (
+        <div className={styles.rowActions}>
+          <span className={styles.queued}>
+            <Clock />
+          </span>
+        </div>
+      ) : (
+        <CellRowAction
+          showSubRowStates={showSubRowStates}
+          subRowsAffected={plotSelections}
+          testId="row-action-plot"
+          tooltipContent={
+            <ClickableTooltipContent
+              clickableText="Open the plots view"
+              helperText={getTooltipContent(!!plotColor, 'plot')}
+              onClick={openPlotsWebview}
+            />
+          }
+          onClick={toggleExperiment}
+        >
+          <Icon
+            className={styles.plotBox}
+            style={
+              plotColor
+                ? {
+                    backgroundColor: plotColor,
+                    fill: 'var(--vscode-editor-foreground)'
+                  }
+                : {}
+            }
+            icon={GraphScatter}
+          />
+        </CellRowAction>
+      )}
       <CellRowAction
         showSubRowStates={showSubRowStates}
         subRowsAffected={stars}
@@ -127,29 +167,6 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
           {starred ? <StarFull /> : <StarEmpty />}
         </div>
       </CellRowAction>
-      {isQueued(status) ? (
-        <div className={styles.rowActions}>
-          <span className={styles.queued}>
-            <Clock />
-          </span>
-        </div>
-      ) : (
-        <CellRowAction
-          showSubRowStates={showSubRowStates}
-          subRowsAffected={plotSelections}
-          testId="row-action-plot"
-          tooltipContent={
-            <ClickableTooltipContent
-              clickableText="Open the plots view"
-              helperText={getTooltipContent(!!bulletColor, 'plot')}
-              onClick={openPlotsWebview}
-            />
-          }
-          onClick={toggleExperiment}
-        >
-          <span className={styles.bullet} style={{ color: bulletColor }} />
-        </CellRowAction>
-      )}
     </>
   )
 }

webview/src/experiments/components/table/body/Row.tsx

@@ -2,7 +2,6 @@ import cx from 'classnames'
 import React, { useCallback, useContext, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract'
-import { isQueued, isRunning } from 'dvc/src/experiments/webview/contract'
 import { FirstCell, CellWrapper } from './Cell'
 import { RowContextMenu } from './RowContextMenu'
 import styles from '../styles.module.scss'
@@ -24,9 +23,8 @@ export const RowContent: React.FC<
   const changes = useSelector(
     (state: ExperimentsState) => state.tableData.changes
   )
-  const { getVisibleCells, original, index, getIsExpanded, subRows } = row
-  const { branch, displayColor, error, starred, id, status, selected } =
-    original
+  const { getVisibleCells, original, getIsExpanded, subRows } = row
+  const { branch, displayColor, error, starred, id } = original
   const [firstCell, ...cells] = getVisibleCells()
   const isWorkspace = id === EXPERIMENT_WORKSPACE_ID
   const changesIfWorkspace = isWorkspace ? changes : undefined
@@ -68,11 +66,6 @@ export const RowContent: React.FC<
     }
   }, [subRows, selectedRows])
 
-  const running = isRunning(status)
-  const queued = isQueued(status)
-  const unselected = selected === false
-  const isOdd = index % 2 !== 0 && !isRowSelected
-
   return (
     <ContextMenu content={<RowContextMenu row={row} />}>
       <tr
@@ -82,14 +75,6 @@ export const RowContent: React.FC<
           styles.bodyRow,
           styles.row,
           {
-            [styles.runningExperiment]: running,
-            [styles.queuedExperiment]: queued,
-            [styles.unselectedExperiment]: !running && !queued && unselected,
-            [styles.normalExperiment]: !running && !queued && !unselected,
-            [styles.oddRow]: isOdd,
-            [styles.evenRow]: !isOdd,
-            [styles.workspaceRow]: isWorkspace,
-            [styles.normalRow]: !isWorkspace,
             [styles.rowSelected]: isRowSelected
           }
         )}
@@ -100,7 +85,7 @@ export const RowContent: React.FC<
         <FirstCell
           cell={firstCell}
           changesIfWorkspace={!!changesIfWorkspace?.length}
-          bulletColor={displayColor}
+          plotColor={displayColor}
           starred={starred}
           isRowSelected={isRowSelected}
           showSubRowStates={!getIsExpanded() && !isWorkspace}

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

@@ -10,7 +10,6 @@ $row-border: 1px solid $border-color;
 $edge-padding: 0.8rem;
 $cell-padding: 0.5rem;
 $workspace-row-edge-margin: $edge-padding - $cell-padding;
-$bullet-size: calc(var(--design-unit) * 4px);
 $badge-size: 0.85rem;
 
 // Extendable Silent Rules
@@ -451,6 +450,10 @@ $badge-size: 0.85rem;
     visibility: hidden;
   }
 
+  .plotBox {
+    visibility: visible;
+  }
+
   .timestampInnerCell {
     height: 42px;
   }
@@ -576,7 +579,7 @@ $badge-size: 0.85rem;
   height: 100%;
 
   &:first-child {
-    margin-right: 20px;
+    margin-right: 4px;
   }
 
   .nestedRow & {
@@ -626,57 +629,23 @@ $badge-size: 0.85rem;
   font-size: 0.65rem;
 }
 
-.bullet {
-  visibility: visible;
-  align-items: center;
-  background: $checkbox-background;
-  border-radius: $bullet-size;
-  border: calc(var(--border-width) * 1px) solid $checkbox-border;
-  color: $icon-color;
+.plotBox {
+  background-color: $checkbox-background;
+  border-radius: $checkbox-border-radius;
+  border: $checkbox-border-width solid $checkbox-border;
   cursor: pointer;
   display: flex;
-  height: $bullet-size;
-  justify-content: center;
-  outline: none;
-  padding: 0;
-  position: relative;
-  width: $bullet-size;
-
-  &::before {
-    display: inline-block;
-    position: relative;
-    content: '';
-    border-radius: 99px;
-    width: 6px;
-    height: 6px;
-    z-index: 2;
-
-    .normalExperiment & {
-      line-height: 0;
-      background: currentcolor;
-      border-radius: 100%;
-    }
-
-    .unselectedExperiment & {
-      width: 4px;
-      height: 4px;
-      vertical-align: middle;
-      border: 1px solid $icon-color;
-      background-color: $checkbox-background;
-    }
+  height: $checkbox-size;
+  width: $checkbox-size;
+  padding: 2px;
+}
 
-    .runningExperiment & {
-      width: 4px;
-      height: 4px;
-      vertical-align: middle;
-      border: 1.5px solid $checkbox-background;
-      border-radius: 100%;
-      border-right: 1.5px solid currentcolor;
-      border-top: 1.5px solid currentcolor;
-      animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
-      background-color: $checkbox-background;
-    }
-  }
+.running {
+  display: inline-flex;
+  height: 12px;
+  width: 12px;
+  margin-right: 8px;
+  margin-left: -20px;
 }
 
 .queued {

webview/src/plots/components/ribbon/RibbonBlock.tsx

@@ -1,5 +1,6 @@
 import { Revision } from 'dvc/src/plots/webview/contract'
 import React from 'react'
+import cx from 'classnames'
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import styles from './styles.module.scss'
 import { RibbonBlockTooltip } from './RibbonBlockTooltip'
@@ -19,7 +20,9 @@ const RevisionIcon: React.FC<{ fetched: boolean; errors?: string[] }> = ({
 }) => (
   <div className={styles.iconPlaceholder}>
     {fetched && errors && '!'}
-    {!fetched && <VSCodeProgressRing className={styles.fetching} />}
+    {!fetched && (
+      <VSCodeProgressRing className={cx(styles.fetching, 'chromatic-ignore')} />
+    )}
   </div>
 )
 

webview/src/shared/components/Icon.tsx

@@ -4,6 +4,7 @@ export type IconValue = (props: SVGProps<SVGSVGElement>) => JSX.Element
 interface IconProps {
   icon: IconValue
   className?: string
+  style?: { [key: string]: string | undefined }
   width?: number
   height?: number
 }

webview/src/shared/variables.scss

@@ -42,6 +42,9 @@ $selected-icon-color: var(
 $row-action-star-checked: var(--vscode-editorLightBulb-foreground);
 $checkbox-background: var(--checkbox-background);
 $checkbox-border: var(--checkbox-border);
+$checkbox-border-radius: calc(var(--checkbox-corner-radius) * 1px);
+$checkbox-border-width: calc(var(--border-width) * 1px);
+$checkbox-size: calc(var(--design-unit) * 4px + 2px);
 $indicator-badge-background: var(--vscode-activityBarBadge-background);
 $indicator-badge-foreground: var(--vscode-activityBarBadge-foreground);
 $disabled-opacity: var(--disabled-opacity);