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);