Skip to content

Commit ee28d1c

Browse files
julieg18julieg18
authored
Improve plots ribbon block tooltips (#2956)
* highlight table keys based off type * add copy button to table values
1 parent 2440c5c commit ee28d1c

File tree

7 files changed

+136
-9
lines changed

7 files changed

+136
-9
lines changed

‎extension/src/experiments/model/util.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,15 @@ const getStringifiedValue = (value: Value): string => {
3838
export const getDataFromColumnPath = (
3939
experiment: Experiment,
4040
columnPath: string
41-
): { splitUpPath: string[]; value: string | null } => {
41+
): { fullValue: string; splitUpPath: string[]; value: string | null } => {
4242
const splitUpPath = splitColumnPath(columnPath)
4343
const collectedVal = get(experiment, splitUpPath)
4444
const value = collectedVal?.value || collectedVal
4545

4646
return {
47+
fullValue: isLongNumber(value)
48+
? value.toString()
49+
: getStringifiedValue(value),
4750
splitUpPath,
4851
value:
4952
columnPath === 'Created' && value === 'undefined'

‎extension/src/plots/model/util.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,24 @@
11
import { getDataFromColumnPath } from '../../experiments/model/util'
22
import { Experiment } from '../../experiments/webview/contract'
3+
import { RevisionFirstThreeColumns } from '../webview/contract'
34

45
export const getRevisionFirstThreeColumns = (
56
firstThreeColumns: string[],
67
experiment: Experiment
78
) => {
8-
const columns: Array<{ path: string; value: string }> = []
9+
const columns: RevisionFirstThreeColumns = []
910
for (const path of firstThreeColumns) {
10-
const { value, splitUpPath } = getDataFromColumnPath(experiment, path)
11-
const [type] = splitUpPath
11+
const { value, splitUpPath, fullValue } = getDataFromColumnPath(
12+
experiment,
13+
path
14+
)
15+
const type = splitUpPath[0]
16+
1217
if (value) {
1318
columns.push({
19+
fullValue,
1420
path: path.slice(type.length + 1) || path,
21+
type,
1522
value
1623
})
1724
}

‎extension/src/plots/webview/contract.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,20 @@ export type ComparisonPlots = {
3535
revisions: ComparisonRevisionData
3636
}[]
3737

38+
export type RevisionFirstThreeColumns = Array<{
39+
path: string
40+
value: string
41+
fullValue: string
42+
type: string
43+
}>
44+
3845
export type Revision = {
3946
id?: string
4047
revision: string
4148
group?: string
4249
displayColor: Color
4350
fetched: boolean
44-
firstThreeColumns: Array<{ path: string; value: string }>
51+
firstThreeColumns: RevisionFirstThreeColumns
4552
}
4653

4754
export interface PlotsComparisonData {

‎extension/src/test/fixtures/plotsDiff/index.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { join } from '../../util/path'
1919
import { copyOriginalColors } from '../../../experiments/model/status/colors'
2020
import { getCLIBranchId, replaceBranchCLIId } from './util'
2121
import { formatDate } from '../../../util/date'
22-
import { Row } from '../../../experiments/webview/contract'
22+
import { ColumnType, Row } from '../../../experiments/webview/contract'
2323

2424
const basicVega = {
2525
[join('logs', 'loss.tsv')]: [
@@ -541,14 +541,20 @@ export const getRevisions = (): Revision[] => {
541541
fetched: true,
542542
firstThreeColumns: [
543543
{
544+
type: 'Created',
545+
fullValue: '-',
544546
path: 'Created',
545547
value: '-'
546548
},
547549
{
550+
type: ColumnType.METRICS,
551+
fullValue: '1.9293040037155151',
548552
path: 'summary.json:loss',
549553
value: '1.9293'
550554
},
551555
{
556+
type: ColumnType.METRICS,
557+
fullValue: '0.4668000042438507',
552558
path: 'summary.json:accuracy',
553559
value: '0.46680'
554560
}
@@ -559,14 +565,20 @@ export const getRevisions = (): Revision[] => {
559565
fetched: true,
560566
firstThreeColumns: [
561567
{
568+
type: 'Created',
569+
fullValue: formatDate(getMain().Created as string),
562570
path: 'Created',
563571
value: formatDate(getMain().Created as string)
564572
},
565573
{
574+
type: ColumnType.METRICS,
575+
fullValue: '2.048856019973755',
566576
path: 'summary.json:loss',
567577
value: '2.0489'
568578
},
569579
{
580+
type: ColumnType.METRICS,
581+
fullValue: '0.3484833240509033',
570582
path: 'summary.json:accuracy',
571583
value: '0.34848'
572584
}
@@ -580,14 +592,20 @@ export const getRevisions = (): Revision[] => {
580592
fetched: true,
581593
firstThreeColumns: [
582594
{
595+
type: 'Created',
596+
fullValue: findAndFormatCreated('exp-e7a67'),
583597
path: 'Created',
584598
value: findAndFormatCreated('exp-e7a67')
585599
},
586600
{
601+
type: ColumnType.METRICS,
602+
fullValue: '2.0205044746398926',
587603
path: 'summary.json:loss',
588604
value: '2.0205'
589605
},
590606
{
607+
type: ColumnType.METRICS,
608+
fullValue: '0.3724166750907898',
591609
path: 'summary.json:accuracy',
592610
value: '0.37242'
593611
}
@@ -601,14 +619,20 @@ export const getRevisions = (): Revision[] => {
601619
fetched: true,
602620
firstThreeColumns: [
603621
{
622+
fullValue: findAndFormatCreated('test-branch'),
623+
type: 'Created',
604624
path: 'Created',
605625
value: findAndFormatCreated('test-branch')
606626
},
607627
{
628+
fullValue: '1.9293040037155151',
629+
type: ColumnType.METRICS,
608630
path: 'summary.json:loss',
609631
value: '1.9293'
610632
},
611633
{
634+
fullValue: '0.4668000042438507',
635+
type: ColumnType.METRICS,
612636
path: 'summary.json:accuracy',
613637
value: '0.46680'
614638
}
@@ -622,14 +646,20 @@ export const getRevisions = (): Revision[] => {
622646
fetched: true,
623647
firstThreeColumns: [
624648
{
649+
fullValue: findAndFormatCreated('exp-83425'),
650+
type: 'Created',
625651
path: 'Created',
626652
value: findAndFormatCreated('exp-83425')
627653
},
628654
{
655+
fullValue: '1.775016188621521',
656+
type: ColumnType.METRICS,
629657
path: 'summary.json:loss',
630658
value: '1.7750'
631659
},
632660
{
661+
fullValue: '0.5926499962806702',
662+
type: ColumnType.METRICS,
633663
path: 'summary.json:accuracy',
634664
value: '0.59265'
635665
}

‎extension/src/test/suite/experiments/model/tree.test.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,15 +410,21 @@ suite('Experiments Tree Test Suite', () => {
410410
fetched: true,
411411
firstThreeColumns: [
412412
{
413+
fullValue: '-',
413414
path: 'Created',
415+
type: 'Created',
414416
value: '-'
415417
},
416418
{
419+
fullValue: '1.9293040037155151',
417420
path: 'summary.json:loss',
421+
type: ColumnType.METRICS,
418422
value: '1.9293'
419423
},
420424
{
425+
fullValue: '0.4668000042438507',
421426
path: 'summary.json:accuracy',
427+
type: ColumnType.METRICS,
422428
value: '0.46680'
423429
}
424430
],
@@ -431,15 +437,21 @@ suite('Experiments Tree Test Suite', () => {
431437
fetched: true,
432438
firstThreeColumns: [
433439
{
440+
fullValue: findAndFormatCreated('exp-e7a67'),
434441
path: 'Created',
442+
type: 'Created',
435443
value: findAndFormatCreated('exp-e7a67')
436444
},
437445
{
446+
fullValue: '2.0205044746398926',
438447
path: 'summary.json:loss',
448+
type: ColumnType.METRICS,
439449
value: '2.0205'
440450
},
441451
{
452+
fullValue: '0.3724166750907898',
442453
path: 'summary.json:accuracy',
454+
type: ColumnType.METRICS,
443455
value: '0.37242'
444456
}
445457
],
@@ -452,15 +464,21 @@ suite('Experiments Tree Test Suite', () => {
452464
fetched: true,
453465
firstThreeColumns: [
454466
{
467+
fullValue: findAndFormatCreated('exp-e7a67'),
455468
path: 'Created',
469+
type: 'Created',
456470
value: findAndFormatCreated('exp-e7a67')
457471
},
458472
{
473+
fullValue: '2.0205044746398926',
459474
path: 'summary.json:loss',
475+
type: ColumnType.METRICS,
460476
value: '2.0205'
461477
},
462478
{
479+
fullValue: '0.3724166750907898',
463480
path: 'summary.json:accuracy',
481+
type: ColumnType.METRICS,
464482
value: '0.37242'
465483
}
466484
],
@@ -473,15 +491,21 @@ suite('Experiments Tree Test Suite', () => {
473491
fetched: true,
474492
firstThreeColumns: [
475493
{
494+
fullValue: findAndFormatCreated('test-branch'),
476495
path: 'Created',
496+
type: 'Created',
477497
value: findAndFormatCreated('test-branch')
478498
},
479499
{
500+
fullValue: '1.9293040037155151',
480501
path: 'summary.json:loss',
502+
type: ColumnType.METRICS,
481503
value: '1.9293'
482504
},
483505
{
506+
fullValue: '0.4668000042438507',
484507
path: 'summary.json:accuracy',
508+
type: ColumnType.METRICS,
485509
value: '0.46680'
486510
}
487511
],
@@ -494,15 +518,21 @@ suite('Experiments Tree Test Suite', () => {
494518
fetched: true,
495519
firstThreeColumns: [
496520
{
521+
fullValue: findAndFormatCreated('exp-e7a67'),
497522
path: 'Created',
523+
type: 'Created',
498524
value: findAndFormatCreated('exp-e7a67')
499525
},
500526
{
527+
fullValue: '2.020392894744873',
501528
path: 'summary.json:loss',
529+
type: ColumnType.METRICS,
502530
value: '2.0204'
503531
},
504532
{
533+
fullValue: '0.3723166584968567',
505534
path: 'summary.json:accuracy',
535+
type: ColumnType.METRICS,
506536
value: '0.37232'
507537
}
508538
],
@@ -515,15 +545,21 @@ suite('Experiments Tree Test Suite', () => {
515545
fetched: true,
516546
firstThreeColumns: [
517547
{
548+
fullValue: findAndFormatCreated('test-branch'),
518549
path: 'Created',
550+
type: 'Created',
519551
value: findAndFormatCreated('test-branch')
520552
},
521553
{
554+
fullValue: '1.9293040037155151',
522555
path: 'summary.json:loss',
556+
type: ColumnType.METRICS,
523557
value: '1.9293'
524558
},
525559
{
560+
fullValue: '0.4668000042438507',
526561
path: 'summary.json:accuracy',
562+
type: ColumnType.METRICS,
527563
value: '0.46680'
528564
}
529565
],
@@ -536,15 +572,21 @@ suite('Experiments Tree Test Suite', () => {
536572
fetched: true,
537573
firstThreeColumns: [
538574
{
575+
fullValue: findAndFormatCreated('test-branch'),
539576
path: 'Created',
577+
type: 'Created',
540578
value: findAndFormatCreated('test-branch')
541579
},
542580
{
581+
fullValue: '1.9882521629333496',
543582
path: 'summary.json:loss',
583+
type: ColumnType.METRICS,
544584
value: '1.9883'
545585
},
546586
{
587+
fullValue: '0.4083833396434784',
547588
path: 'summary.json:accuracy',
589+
type: ColumnType.METRICS,
548590
value: '0.40838'
549591
}
550592
],

‎webview/src/plots/components/ribbon/RibbonBlock.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Revision } from 'dvc/src/plots/webview/contract'
22
import React from 'react'
3+
import cn from 'classnames'
34
import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
45
import { truncate } from 'vega'
56
import styles from './styles.module.scss'
@@ -27,10 +28,17 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({
2728
const tooltipContent = (
2829
<table className={styles.columnsTable}>
2930
<tbody>
30-
{revision.firstThreeColumns.map(({ path, value }) => (
31+
{revision.firstThreeColumns.map(({ path, value, type, fullValue }) => (
3132
<tr key={path}>
32-
<td>{truncate(path, 45, 'left')}</td>
33-
<td>{value}</td>
33+
<td className={cn(styles[`${type}Key`])}>
34+
{truncate(path, 45, 'left')}
35+
</td>
36+
<td>
37+
{value}
38+
{value === '-' || (
39+
<CopyButton value={fullValue} className={styles.copyButton} />
40+
)}
41+
</td>
3442
</tr>
3543
))}
3644
</tbody>

‎webview/src/plots/components/ribbon/styles.module.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,36 @@
1414
&:first-child {
1515
text-align: left;
1616
}
17+
18+
&.depsKey {
19+
color: $deps-color;
20+
}
21+
22+
&.metricsKey {
23+
color: $metrics-color;
24+
}
25+
26+
&.paramsKey {
27+
color: $params-color;
28+
}
29+
30+
svg {
31+
display: block;
32+
min-width: 100%;
33+
min-height: 100%;
34+
}
35+
36+
.copyButton {
37+
opacity: 0;
38+
display: inline;
39+
position: static;
40+
margin-top: 2px;
41+
font-size: 0.8125rem;
42+
}
43+
44+
&:hover .copyButton {
45+
opacity: 1;
46+
}
1747
}
1848
}
1949

0 commit comments

Comments
 (0)