Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve plots ribbon block tooltips #2956

Merged
merged 4 commits into from
Dec 19, 2022
Merged

Improve plots ribbon block tooltips #2956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee9d650
Improve plots blocks tooltip
julieg18 Dec 16, 2022
6b6a0ac
Merge branch 'main' into improve-plot-exp-block-tooltips
julieg18 Dec 16, 2022
60026df
Delete unneeded css line
julieg18 Dec 16, 2022
bdbe132
Merge branch 'main' into improve-plot-exp-block-tooltips
julieg18 Dec 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion extension/src/experiments/model/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
13 changes: 10 additions & 3 deletions extension/src/plots/model/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Q] Why not send only the raw data from the model and have the client(s) format it? See webview/src/experiments/util/buildDynamicColumns.tsx for how this is handled by the experiments table.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If not there is some commonality with ExperimentsTree.getTooltipTable. The duplication should be removed/combined.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It definitely would simplify the code a lot! Will do it in a followup :)

value
})
}
Expand Down
9 changes: 8 additions & 1 deletion extension/src/plots/webview/contract.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
32 changes: 31 additions & 1 deletion extension/src/test/fixtures/plotsDiff/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')]: [
Expand Down Expand Up @@ -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'
}
Expand All @@ -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'
}
Expand All @@ -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'
}
Expand All @@ -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'
}
Expand All @@ -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'
}
Expand Down
42 changes: 42 additions & 0 deletions extension/src/test/suite/experiments/model/tree.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
],
Expand All @@ -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'
}
],
Expand All @@ -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'
}
],
Expand All @@ -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'
}
],
Expand All @@ -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'
}
],
Expand All @@ -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'
}
],
Expand All @@ -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'
}
],
Expand Down
14 changes: 11 additions & 3 deletions webview/src/plots/components/ribbon/RibbonBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -27,10 +28,17 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({
const tooltipContent = (
<table className={styles.columnsTable}>
<tbody>
{revision.firstThreeColumns.map(({ path, value }) => (
{revision.firstThreeColumns.map(({ path, value, type, fullValue }) => (
<tr key={path}>
<td>{truncate(path, 45, 'left')}</td>
<td>{value}</td>
<td className={cn(styles[`${type}Key`])}>
{truncate(path, 45, 'left')}
</td>
<td>
{value}
{value === '-' || (
<CopyButton value={fullValue} className={styles.copyButton} />
)}
</td>
</tr>
))}
</tbody>
Expand Down
30 changes: 30 additions & 0 deletions webview/src/plots/components/ribbon/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,36 @@
&: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;
}
}
}

Expand Down