Move towards Studio design

iterative · Jun 15, 2023 · 7b123e0 · 7b123e0
1 parent 45d893c
commit 7b123e0
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 88 deletions.
diff --git a/webview/src/experiments/components/table/body/Cell.tsx b/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

diff --git a/webview/src/experiments/components/table/body/CellRowActions.tsx b/webview/src/experiments/components/table/body/CellRowActions.tsx
@@ -1,13 +1,9 @@
 import React, { MouseEventHandler, ReactElement } from 'react'
-import {
-  VSCodeCheckbox,
-  VSCodeProgressRing
-} from '@vscode/webview-ui-toolkit/react'
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
 import cx from 'classnames'
 import {
   ExperimentStatus,
-  isQueued,
-  isRunning
+  isQueued
 } from 'dvc/src/experiments/webview/contract'
 import { CellHintTooltip } from './CellHintTooltip'
 import { Indicator } from '../Indicators'
@@ -20,6 +16,7 @@ import {
   StarEmpty,
   GraphScatter
 } from '../../../../shared/components/icons'
+import { Icon } from '../../../../shared/components/Icon'
 
 export type CellRowActionsProps = {
   isRowSelected: boolean
@@ -29,7 +26,6 @@ export type CellRowActionsProps = {
   status?: ExperimentStatus
   subRowStates: {
     plotSelections: number
-    running: number
     selections: number
     stars: number
   }
@@ -39,6 +35,7 @@ export type CellRowActionsProps = {
 }
 
 type CellRowActionProps = {
+  className?: string
   showSubRowStates: boolean
   subRowsAffected: number
   children: ReactElement
@@ -48,17 +45,18 @@ type CellRowActionProps = {
 }
 
 const CellRowAction: React.FC<CellRowActionProps> = ({
+  children,
+  className,
+  onClick,
   showSubRowStates,
   subRowsAffected,
-  children,
   testId,
-  tooltipContent,
-  onClick
+  tooltipContent
 }) => {
   const count = (showSubRowStates && subRowsAffected) || 0
 
   const action = (
-    <div className={styles.rowActions} data-testid={testId}>
+    <div className={cx(styles.rowActions, className)} data-testid={testId}>
       <Indicator onClick={onClick} count={count}>
         {children}
       </Indicator>
@@ -75,22 +73,6 @@ const CellRowAction: React.FC<CellRowActionProps> = ({
 const getTooltipContent = (determiner: boolean, action: string): string =>
   'Click to ' + (determiner ? `un${action}` : action)
 
-const getRunningTooltipContent = (
-  running: boolean,
-  showSubRowStates: boolean,
-  subRowsRunning: number
-): string | null => {
-  if (running) {
-    return 'Experiment is currently running'
-  }
-
-  if (showSubRowStates && subRowsRunning) {
-    return `There are currently ${subRowsRunning} running under this commit.`
-  }
-
-  return null
-}
-
 type ClickableTooltipContentProps = {
   clickableText: string
   helperText: string
@@ -118,12 +100,10 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
   isRowSelected,
   showSubRowStates,
   starred,
-  subRowStates: { plotSelections, running: subRowsRunning, selections, stars },
+  subRowStates: { plotSelections, selections, stars },
   toggleRowSelection,
   toggleStarred
 }) => {
-  const running = isRunning(status)
-
   return (
     <>
       <CellRowAction
@@ -137,47 +117,6 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
           checked={isRowSelected}
         />
       </CellRowAction>
-      <CellRowAction
-        showSubRowStates={showSubRowStates}
-        subRowsAffected={subRowsRunning}
-        testId="row-action-running-indicator"
-        tooltipContent={getRunningTooltipContent(
-          running,
-          showSubRowStates,
-          subRowsRunning
-        )}
-      >
-        {running ? (
-          <VSCodeProgressRing
-            className={cx(styles.running, 'chromatic-ignore')}
-          />
-        ) : (
-          <div />
-        )}
-      </CellRowAction>
-      <CellRowAction
-        showSubRowStates={showSubRowStates}
-        subRowsAffected={stars}
-        testId="row-action-star"
-        tooltipContent={
-          <ClickableTooltipContent
-            clickableText="Filter experiments by starred"
-            onClick={addStarredFilter}
-            helperText={getTooltipContent(!!starred, 'star')}
-          />
-        }
-      >
-        <div
-          className={styles.starSwitch}
-          role="switch"
-          aria-checked={starred}
-          tabIndex={0}
-          {...clickAndEnterProps(toggleStarred)}
-          data-testid="star-icon"
-        >
-          {starred ? <StarFull /> : <StarEmpty />}
-        </div>
-      </CellRowAction>
       {isQueued(status) ? (
         <div className={styles.rowActions}>
           <span className={styles.queued}>
@@ -198,12 +137,38 @@ export const CellRowActions: React.FC<CellRowActionsProps> = ({
           }
           onClick={toggleExperiment}
         >
-          <GraphScatter
+          <Icon
             style={{ fill: plotColor }}
-            className={styles.plotIcon}
+            className={styles.plotBox}
+            height={18}
+            width={18}
+            icon={GraphScatter}
           />
         </CellRowAction>
       )}
+      <CellRowAction
+        showSubRowStates={showSubRowStates}
+        subRowsAffected={stars}
+        testId="row-action-star"
+        tooltipContent={
+          <ClickableTooltipContent
+            clickableText="Filter experiments by starred"
+            onClick={addStarredFilter}
+            helperText={getTooltipContent(!!starred, 'star')}
+          />
+        }
+      >
+        <div
+          className={styles.starSwitch}
+          role="switch"
+          aria-checked={starred}
+          tabIndex={0}
+          {...clickAndEnterProps(toggleStarred)}
+          data-testid="star-icon"
+        >
+          {starred ? <StarFull /> : <StarEmpty />}
+        </div>
+      </CellRowAction>{' '}
     </>
   )
 }
diff --git a/webview/src/experiments/components/table/body/Row.tsx b/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 { isRunning } from 'dvc/src/experiments/webview/contract'
 import { FirstCell, CellWrapper } from './Cell'
 import { RowContextMenu } from './RowContextMenu'
 import styles from '../styles.module.scss'
@@ -52,9 +51,6 @@ export const RowContent: React.FC<
     const plotSelections =
       subRows?.filter(subRow => subRow.original.selected).length ?? 0
 
-    const running =
-      subRows?.filter(subRow => isRunning(subRow.original.status)).length ?? 0
-
     const selections =
       subRows?.filter(
         subRow =>
@@ -65,7 +61,6 @@ export const RowContent: React.FC<
 
     return {
       plotSelections,
-      running,
       selections,
       stars
     }

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -451,11 +451,7 @@ $badge-size: 0.85rem;
     visibility: hidden;
   }
 
-  .running {
-    visibility: visible;
-  }
-
-  .plotIcon {
+  .plotBox {
     visibility: visible;
   }
 
@@ -634,14 +630,21 @@ $badge-size: 0.85rem;
   font-size: 0.65rem;
 }
 
-.plotIcon {
-  margin-top: 4px;
+.plotBox {
+  height: $checkbox-size;
+  width: $checkbox-size;
+  background-color: $checkbox-background;
+  border-radius: $checkbox-border-radius;
+  border: $checkbox-border-width solid $checkbox-border;
+  cursor: pointer;
 }
 
 .running {
-  position: relative;
-  height: 16px;
-  width: 16px;
+  display: inline-flex;
+  height: 12px;
+  width: 12px;
+  margin-right: 8px;
+  margin-left: -20px;
 }
 
 .queued {

diff --git a/webview/src/shared/components/Icon.tsx b/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
 }

diff --git a/webview/src/shared/variables.scss b/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);