diff --git a/webview/src/experiments/components/table/body/Cell.tsx b/webview/src/experiments/components/table/body/Cell.tsx index 4cf6f13f47..e9358e26ed 100644 --- 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<
+ {isRunning(status) && ( + + )} + {getIsPlaceholder() ? null : (
= ({ + children, + className, + onClick, showSubRowStates, subRowsAffected, - children, testId, - tooltipContent, - onClick + tooltipContent }) => { const count = (showSubRowStates && subRowsAffected) || 0 const action = ( -
+
{children} @@ -75,22 +73,6 @@ const CellRowAction: React.FC = ({ 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 = ({ isRowSelected, showSubRowStates, starred, - subRowStates: { plotSelections, running: subRowsRunning, selections, stars }, + subRowStates: { plotSelections, selections, stars }, toggleRowSelection, toggleStarred }) => { - const running = isRunning(status) - return ( <> = ({ checked={isRowSelected} /> - - {running ? ( - - ) : ( -
- )} - - - } - > -
- {starred ? : } -
-
{isQueued(status) ? (
@@ -198,12 +137,38 @@ export const CellRowActions: React.FC = ({ } onClick={toggleExperiment} > - )} + + } + > +
+ {starred ? : } +
+
{' '} ) } diff --git a/webview/src/experiments/components/table/body/Row.tsx b/webview/src/experiments/components/table/body/Row.tsx index b644f8bfe4..499ba215ec 100644 --- 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 index fe1826cc98..ebf20af871 100644 --- 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 index b7e6d29f9e..a79d392602 100644 --- a/webview/src/shared/components/Icon.tsx +++ b/webview/src/shared/components/Icon.tsx @@ -4,6 +4,7 @@ export type IconValue = (props: SVGProps) => 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 index dea3d5858f..c8eb17a158 100644 --- 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);