From ee9d650256a88d8389863635289114ed1aaf5b85 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Fri, 16 Dec 2022 10:29:24 -0600 Subject: [PATCH 1/2] Improve plots blocks tooltip * highlight table keys based off type * add copy button to table values --- extension/src/experiments/model/util.ts | 5 ++- extension/src/plots/model/util.ts | 13 ++++-- extension/src/plots/webview/contract.ts | 9 +++- .../src/test/fixtures/plotsDiff/index.ts | 32 +++++++++++++- .../test/suite/experiments/model/tree.test.ts | 42 +++++++++++++++++++ .../plots/components/ribbon/RibbonBlock.tsx | 14 +++++-- .../components/ribbon/styles.module.scss | 31 ++++++++++++++ 7 files changed, 137 insertions(+), 9 deletions(-) diff --git a/extension/src/experiments/model/util.ts b/extension/src/experiments/model/util.ts index 58af4943da..7acd4441fa 100644 --- a/extension/src/experiments/model/util.ts +++ b/extension/src/experiments/model/util.ts @@ -38,12 +38,15 @@ const getStringifiedValue = (value: Value): string => { export const getDataFromColumnPath = ( experiment: Experiment, columnPath: string -): { splitUpPath: string[]; value: string | null } => { +): { fullValue: string; splitUpPath: string[]; value: string | null } => { const splitUpPath = splitColumnPath(columnPath) const collectedVal = get(experiment, splitUpPath) const value = collectedVal?.value || collectedVal return { + fullValue: isLongNumber(value) + ? value.toString() + : getStringifiedValue(value), splitUpPath, value: columnPath === 'Created' && value === 'undefined' diff --git a/extension/src/plots/model/util.ts b/extension/src/plots/model/util.ts index 69dd74c1cf..67dc7d59bc 100644 --- a/extension/src/plots/model/util.ts +++ b/extension/src/plots/model/util.ts @@ -1,17 +1,24 @@ import { getDataFromColumnPath } from '../../experiments/model/util' import { Experiment } from '../../experiments/webview/contract' +import { RevisionFirstThreeColumns } from '../webview/contract' export const getRevisionFirstThreeColumns = ( firstThreeColumns: string[], experiment: Experiment ) => { - const columns: Array<{ path: string; value: string }> = [] + const columns: RevisionFirstThreeColumns = [] for (const path of firstThreeColumns) { - const { value, splitUpPath } = getDataFromColumnPath(experiment, path) - const [type] = splitUpPath + const { value, splitUpPath, fullValue } = getDataFromColumnPath( + experiment, + path + ) + const type = splitUpPath[0] + if (value) { columns.push({ + fullValue, path: path.slice(type.length + 1) || path, + type, value }) } diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts index 489c313521..7b0fafd5fd 100644 --- a/extension/src/plots/webview/contract.ts +++ b/extension/src/plots/webview/contract.ts @@ -35,13 +35,20 @@ export type ComparisonPlots = { revisions: ComparisonRevisionData }[] +export type RevisionFirstThreeColumns = Array<{ + path: string + value: string + fullValue: string + type: string +}> + export type Revision = { id?: string revision: string group?: string displayColor: Color fetched: boolean - firstThreeColumns: Array<{ path: string; value: string }> + firstThreeColumns: RevisionFirstThreeColumns } export interface PlotsComparisonData { diff --git a/extension/src/test/fixtures/plotsDiff/index.ts b/extension/src/test/fixtures/plotsDiff/index.ts index 4afd3cf3ae..328f8b0381 100644 --- a/extension/src/test/fixtures/plotsDiff/index.ts +++ b/extension/src/test/fixtures/plotsDiff/index.ts @@ -19,7 +19,7 @@ import { join } from '../../util/path' import { copyOriginalColors } from '../../../experiments/model/status/colors' import { getCLIBranchId, replaceBranchCLIId } from './util' import { formatDate } from '../../../util/date' -import { Row } from '../../../experiments/webview/contract' +import { ColumnType, Row } from '../../../experiments/webview/contract' const basicVega = { [join('logs', 'loss.tsv')]: [ @@ -541,14 +541,20 @@ export const getRevisions = (): Revision[] => { fetched: true, firstThreeColumns: [ { + type: 'Created', + fullValue: '-', path: 'Created', value: '-' }, { + type: ColumnType.METRICS, + fullValue: '1.9293040037155151', path: 'summary.json:loss', value: '1.9293' }, { + type: ColumnType.METRICS, + fullValue: '0.4668000042438507', path: 'summary.json:accuracy', value: '0.46680' } @@ -559,14 +565,20 @@ export const getRevisions = (): Revision[] => { fetched: true, firstThreeColumns: [ { + type: 'Created', + fullValue: formatDate(getMain().Created as string), path: 'Created', value: formatDate(getMain().Created as string) }, { + type: ColumnType.METRICS, + fullValue: '2.048856019973755', path: 'summary.json:loss', value: '2.0489' }, { + type: ColumnType.METRICS, + fullValue: '0.3484833240509033', path: 'summary.json:accuracy', value: '0.34848' } @@ -580,14 +592,20 @@ export const getRevisions = (): Revision[] => { fetched: true, firstThreeColumns: [ { + type: 'Created', + fullValue: findAndFormatCreated('exp-e7a67'), path: 'Created', value: findAndFormatCreated('exp-e7a67') }, { + type: ColumnType.METRICS, + fullValue: '2.0205044746398926', path: 'summary.json:loss', value: '2.0205' }, { + type: ColumnType.METRICS, + fullValue: '0.3724166750907898', path: 'summary.json:accuracy', value: '0.37242' } @@ -601,14 +619,20 @@ export const getRevisions = (): Revision[] => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('test-branch'), + type: 'Created', path: 'Created', value: findAndFormatCreated('test-branch') }, { + fullValue: '1.9293040037155151', + type: ColumnType.METRICS, path: 'summary.json:loss', value: '1.9293' }, { + fullValue: '0.4668000042438507', + type: ColumnType.METRICS, path: 'summary.json:accuracy', value: '0.46680' } @@ -622,14 +646,20 @@ export const getRevisions = (): Revision[] => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('exp-83425'), + type: 'Created', path: 'Created', value: findAndFormatCreated('exp-83425') }, { + fullValue: '1.775016188621521', + type: ColumnType.METRICS, path: 'summary.json:loss', value: '1.7750' }, { + fullValue: '0.5926499962806702', + type: ColumnType.METRICS, path: 'summary.json:accuracy', value: '0.59265' } diff --git a/extension/src/test/suite/experiments/model/tree.test.ts b/extension/src/test/suite/experiments/model/tree.test.ts index 3fe973661f..ace25eba70 100644 --- a/extension/src/test/suite/experiments/model/tree.test.ts +++ b/extension/src/test/suite/experiments/model/tree.test.ts @@ -410,15 +410,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: '-', path: 'Created', + type: 'Created', value: '-' }, { + fullValue: '1.9293040037155151', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '1.9293' }, { + fullValue: '0.4668000042438507', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.46680' } ], @@ -431,15 +437,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('exp-e7a67'), path: 'Created', + type: 'Created', value: findAndFormatCreated('exp-e7a67') }, { + fullValue: '2.0205044746398926', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '2.0205' }, { + fullValue: '0.3724166750907898', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.37242' } ], @@ -452,15 +464,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('exp-e7a67'), path: 'Created', + type: 'Created', value: findAndFormatCreated('exp-e7a67') }, { + fullValue: '2.0205044746398926', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '2.0205' }, { + fullValue: '0.3724166750907898', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.37242' } ], @@ -473,15 +491,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('test-branch'), path: 'Created', + type: 'Created', value: findAndFormatCreated('test-branch') }, { + fullValue: '1.9293040037155151', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '1.9293' }, { + fullValue: '0.4668000042438507', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.46680' } ], @@ -494,15 +518,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('exp-e7a67'), path: 'Created', + type: 'Created', value: findAndFormatCreated('exp-e7a67') }, { + fullValue: '2.020392894744873', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '2.0204' }, { + fullValue: '0.3723166584968567', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.37232' } ], @@ -515,15 +545,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('test-branch'), path: 'Created', + type: 'Created', value: findAndFormatCreated('test-branch') }, { + fullValue: '1.9293040037155151', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '1.9293' }, { + fullValue: '0.4668000042438507', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.46680' } ], @@ -536,15 +572,21 @@ suite('Experiments Tree Test Suite', () => { fetched: true, firstThreeColumns: [ { + fullValue: findAndFormatCreated('test-branch'), path: 'Created', + type: 'Created', value: findAndFormatCreated('test-branch') }, { + fullValue: '1.9882521629333496', path: 'summary.json:loss', + type: ColumnType.METRICS, value: '1.9883' }, { + fullValue: '0.4083833396434784', path: 'summary.json:accuracy', + type: ColumnType.METRICS, value: '0.40838' } ], diff --git a/webview/src/plots/components/ribbon/RibbonBlock.tsx b/webview/src/plots/components/ribbon/RibbonBlock.tsx index ac3a15df77..88f6eabaeb 100644 --- a/webview/src/plots/components/ribbon/RibbonBlock.tsx +++ b/webview/src/plots/components/ribbon/RibbonBlock.tsx @@ -1,5 +1,6 @@ import { Revision } from 'dvc/src/plots/webview/contract' import React from 'react' +import cn from 'classnames' import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react' import { truncate } from 'vega' import styles from './styles.module.scss' @@ -27,10 +28,17 @@ export const RibbonBlock: React.FC = ({ const tooltipContent = ( - {revision.firstThreeColumns.map(({ path, value }) => ( + {revision.firstThreeColumns.map(({ path, value, type, fullValue }) => ( - - + + ))} diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss index f4fd237896..85a0084ae3 100644 --- a/webview/src/plots/components/ribbon/styles.module.scss +++ b/webview/src/plots/components/ribbon/styles.module.scss @@ -14,6 +14,37 @@ &:first-child { text-align: left; } + + &.depsKey { + color: $deps-color; + } + + &.metricsKey { + color: $metrics-color; + } + + &.paramsKey { + color: $params-color; + } + + svg { + display: block; + min-width: 100%; + min-height: 100%; + } + + .copyButton { + opacity: 0; + display: inline; + position: static; + margin-top: 2px; + font-size: 0.8125rem; + } + + &:hover .copyButton { + opacity: 1; + font-size: 0.8125rem; + } } } From 60026df814fdc8df8d3c39705774c87c3261dfe4 Mon Sep 17 00:00:00 2001 From: julieg18 Date: Fri, 16 Dec 2022 10:39:59 -0600 Subject: [PATCH 2/2] Delete unneeded css line --- webview/src/plots/components/ribbon/styles.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/webview/src/plots/components/ribbon/styles.module.scss b/webview/src/plots/components/ribbon/styles.module.scss index 85a0084ae3..97a326696e 100644 --- a/webview/src/plots/components/ribbon/styles.module.scss +++ b/webview/src/plots/components/ribbon/styles.module.scss @@ -43,7 +43,6 @@ &:hover .copyButton { opacity: 1; - font-size: 0.8125rem; } } }
{truncate(path, 45, 'left')}{value} + {truncate(path, 45, 'left')} + + {value} + {value === '-' || ( + + )} +