Skip to content

Commit 19904c8

Browse files
julieg18julieg18
authored
Add columns tooltip to plots ribbon (#2924)
* Add columns tooltip to plots ribbon * Replace map with for loop * Fix possible empty tooltips * Improve styling * update truncation length * fix alignment * adding some padding * Increase padding
1 parent 3d5843e commit 19904c8

File tree

13 files changed

+316
-36
lines changed

13 files changed

+316
-36
lines changed

‎extension/src/plots/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,12 @@ export class Plots extends BaseRepository<TPlotsData> {
191191
this.notifyChanged()
192192
})
193193
)
194+
195+
this.dispose.track(
196+
experiments.onDidChangeColumnOrderOrStatus(() => {
197+
this.notifyChanged()
198+
})
199+
)
194200
}
195201

196202
private async initializeData(data: ExperimentsOutput) {

‎extension/src/plots/model/collect.test.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,8 @@ describe('collectOverrideRevisionDetails', () => {
344344
status: ExperimentStatus.SUCCESS
345345
}
346346
] as Experiment[]
347-
}[id])
347+
}[id]),
348+
[]
348349
)
349350
expect(overrideComparison.map(({ revision }) => revision)).toStrictEqual([
350351
'a',
@@ -356,28 +357,31 @@ describe('collectOverrideRevisionDetails', () => {
356357
{
357358
displayColor: '#4299e1',
358359
fetched: true,
360+
firstThreeColumns: [],
359361
group: 'a',
360362
id: 'a',
361363
revision: 'a'
362364
},
363365
{
364366
displayColor: '#13adc7',
365367
fetched: true,
368+
firstThreeColumns: [],
366369
group: runningGroup,
367370
id: 'e',
368371
revision: 'e'
369372
},
370373
{
371374
displayColor: '#48bb78',
372375
fetched: true,
376+
firstThreeColumns: [],
373377
group: 'c',
374378
id: 'c',
375379
revision: 'c'
376380
},
377-
378381
{
379382
displayColor: '#f56565',
380383
fetched: true,
384+
firstThreeColumns: [],
381385
group: 'd',
382386
id: 'd',
383387
revision: 'd'
@@ -452,7 +456,8 @@ describe('collectOverrideRevisionDetails', () => {
452456
status: ExperimentStatus.SUCCESS
453457
}
454458
] as Experiment[]
455-
}[id])
459+
}[id]),
460+
[]
456461
)
457462
expect(overrideComparison.map(({ revision }) => revision)).toStrictEqual([
458463
'a',
@@ -464,28 +469,31 @@ describe('collectOverrideRevisionDetails', () => {
464469
{
465470
displayColor: '#4299e1',
466471
fetched: true,
472+
firstThreeColumns: [],
467473
group: 'a',
468474
id: 'a',
469475
revision: 'a'
470476
},
471477
{
472478
displayColor: '#13adc7',
473479
fetched: true,
480+
firstThreeColumns: [],
474481
group: undefined,
475482
id: EXPERIMENT_WORKSPACE_ID,
476483
revision: EXPERIMENT_WORKSPACE_ID
477484
},
478485
{
479486
displayColor: '#48bb78',
480487
fetched: true,
488+
firstThreeColumns: [],
481489
group: 'c',
482490
id: 'c',
483491
revision: 'c'
484492
},
485-
486493
{
487494
displayColor: '#f56565',
488495
fetched: true,
496+
firstThreeColumns: [],
489497
group: 'd',
490498
id: 'd',
491499
revision: 'd'
@@ -560,7 +568,8 @@ describe('collectOverrideRevisionDetails', () => {
560568
status: ExperimentStatus.SUCCESS
561569
}
562570
] as Experiment[]
563-
}[id])
571+
}[id]),
572+
[]
564573
)
565574
expect(overrideComparison.map(({ revision }) => revision)).toStrictEqual([
566575
'd',
@@ -597,7 +606,8 @@ describe('collectOverrideRevisionDetails', () => {
597606
new Set(['a', 'c', 'd', 'e']),
598607
{ [justFinishedRunningId]: justFinishedRunningId },
599608
(id: string) =>
600-
({ [justFinishedRunningId]: [{ label: 'e' }] as Experiment[] }[id])
609+
({ [justFinishedRunningId]: [{ label: 'e' }] as Experiment[] }[id]),
610+
[]
601611
)
602612
expect(overrideComparison.map(({ revision }) => revision)).toStrictEqual([
603613
'a',

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

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import omit from 'lodash.omit'
22
import { TopLevelSpec } from 'vega-lite'
3+
import { getRevisionFirstThreeColumns } from './util'
34
import {
45
ColorScale,
56
CheckpointPlotValues,
@@ -647,28 +648,41 @@ export const collectBranchRevisionDetails = (
647648

648649
const getRevision = (
649650
displayColor: Color,
650-
{ logicalGroupName, id, label }: Experiment
651-
): Revision => ({
652-
displayColor,
653-
fetched: true,
654-
group: logicalGroupName,
655-
id,
656-
revision: label
657-
})
651+
experiment: Experiment,
652+
firstThreeColumns: string[]
653+
): Revision => {
654+
const { logicalGroupName, id, label } = experiment
655+
return {
656+
displayColor,
657+
fetched: true,
658+
firstThreeColumns: getRevisionFirstThreeColumns(
659+
firstThreeColumns,
660+
experiment
661+
),
662+
group: logicalGroupName,
663+
id,
664+
revision: label
665+
}
666+
}
658667

659668
const overrideWithWorkspace = (
660669
orderMapping: { [label: string]: string },
661670
selectedWithOverrides: Revision[],
662671
displayColor: Color,
663-
label: string
672+
label: string,
673+
firstThreeColumns: string[]
664674
): void => {
665675
orderMapping[label] = EXPERIMENT_WORKSPACE_ID
666676
selectedWithOverrides.push(
667-
getRevision(displayColor, {
668-
id: EXPERIMENT_WORKSPACE_ID,
669-
label: EXPERIMENT_WORKSPACE_ID,
670-
logicalGroupName: undefined
671-
})
677+
getRevision(
678+
displayColor,
679+
{
680+
id: EXPERIMENT_WORKSPACE_ID,
681+
label: EXPERIMENT_WORKSPACE_ID,
682+
logicalGroupName: undefined
683+
},
684+
firstThreeColumns
685+
)
672686
)
673687
}
674688

@@ -686,26 +700,33 @@ const isExperimentThatWillDisappearAtEnd = (
686700
const getMostRecentFetchedCheckpointRevision = (
687701
selectedRevision: SelectedExperimentWithColor,
688702
fetchedRevs: Set<string>,
689-
checkpoints: Experiment[] | undefined
703+
checkpoints: Experiment[] | undefined,
704+
firstThreeColumns: string[]
690705
): Revision => {
691706
const mostRecent =
692707
checkpoints?.find(({ label }) => fetchedRevs.has(label)) || selectedRevision
693-
return getRevision(selectedRevision.displayColor, mostRecent)
708+
return getRevision(
709+
selectedRevision.displayColor,
710+
mostRecent,
711+
firstThreeColumns
712+
)
694713
}
695714

696715
const overrideRevisionDetail = (
697716
orderMapping: { [label: string]: string },
698717
selectedWithOverrides: Revision[],
699718
selectedRevision: SelectedExperimentWithColor,
700719
fetchedRevs: Set<string>,
701-
checkpoints: Experiment[] | undefined
720+
checkpoints: Experiment[] | undefined,
721+
firstThreeColumns: string[]
702722
) => {
703723
const { label } = selectedRevision
704724

705725
const mostRecent = getMostRecentFetchedCheckpointRevision(
706726
selectedRevision,
707727
fetchedRevs,
708-
checkpoints
728+
checkpoints,
729+
firstThreeColumns
709730
)
710731
orderMapping[label] = mostRecent.revision
711732
selectedWithOverrides.push(mostRecent)
@@ -717,7 +738,8 @@ const collectRevisionDetail = (
717738
selectedRevision: SelectedExperimentWithColor,
718739
fetchedRevs: Set<string>,
719740
unfinishedRunningExperiments: { [id: string]: string },
720-
getCheckpoints: (id: string) => Experiment[] | undefined
741+
getCheckpoints: (id: string) => Experiment[] | undefined,
742+
firstThreeColumns: string[]
721743
) => {
722744
const { label, status, id, displayColor } = selectedRevision
723745

@@ -729,7 +751,8 @@ const collectRevisionDetail = (
729751
orderMapping,
730752
selectedWithOverrides,
731753
displayColor,
732-
label
754+
label,
755+
firstThreeColumns
733756
)
734757
}
735758

@@ -746,20 +769,24 @@ const collectRevisionDetail = (
746769
selectedWithOverrides,
747770
selectedRevision,
748771
fetchedRevs,
749-
getCheckpoints(id)
772+
getCheckpoints(id),
773+
firstThreeColumns
750774
)
751775
}
752776

753777
orderMapping[label] = label
754-
selectedWithOverrides.push(getRevision(displayColor, selectedRevision))
778+
selectedWithOverrides.push(
779+
getRevision(displayColor, selectedRevision, firstThreeColumns)
780+
)
755781
}
756782

757783
export const collectOverrideRevisionDetails = (
758784
comparisonOrder: string[],
759785
selectedRevisions: SelectedExperimentWithColor[],
760786
fetchedRevs: Set<string>,
761787
unfinishedRunningExperiments: { [id: string]: string },
762-
getCheckpoints: (id: string) => Experiment[] | undefined
788+
getCheckpoints: (id: string) => Experiment[] | undefined,
789+
firstThreeColumns: string[]
763790
): {
764791
overrideComparison: Revision[]
765792
overrideRevisions: Revision[]
@@ -774,7 +801,8 @@ export const collectOverrideRevisionDetails = (
774801
selectedRevision,
775802
fetchedRevs,
776803
unfinishedRunningExperiments,
777-
getCheckpoints
804+
getCheckpoints,
805+
firstThreeColumns
778806
)
779807
}
780808

‎extension/src/plots/model/index.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,14 @@ describe('plotsModel', () => {
2828
[PersistenceKey.PLOT_SIZES + exampleDvcRoot]: DEFAULT_SECTION_SIZES
2929
})
3030
const mockedGetSelectedRevisions = jest.fn()
31+
const mockedGetFirstThreeColumnOrder = jest.fn()
32+
mockedGetFirstThreeColumnOrder.mockReturnValue([])
3133

3234
beforeEach(() => {
3335
model = new PlotsModel(
3436
exampleDvcRoot,
3537
{
38+
getFirstThreeColumnOrder: mockedGetFirstThreeColumnOrder,
3639
getSelectedRevisions: mockedGetSelectedRevisions,
3740
isReady: () => Promise.resolve(undefined)
3841
} as unknown as Experiments,

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

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
collectBranchRevisionDetails,
1414
collectOverrideRevisionDetails
1515
} from './collect'
16+
import { getRevisionFirstThreeColumns } from './util'
1617
import {
1718
CheckpointPlot,
1819
CheckpointPlotData,
@@ -187,7 +188,8 @@ export class PlotsModel extends ModelWithPersistence {
187188
this.experiments.getSelectedRevisions(),
188189
this.fetchedRevs,
189190
finishedExperiments,
190-
id => this.experiments.getCheckpoints(id)
191+
id => this.experiments.getCheckpoints(id),
192+
this.experiments.getFirstThreeColumnOrder()
191193
)
192194
}
193195

@@ -223,15 +225,22 @@ export class PlotsModel extends ModelWithPersistence {
223225
}
224226

225227
public getSelectedRevisionDetails() {
226-
return this.experiments
227-
.getSelectedRevisions()
228-
.map(({ label, displayColor, logicalGroupName, id }) => ({
228+
return this.experiments.getSelectedRevisions().map(exp => {
229+
const { label, displayColor, logicalGroupName, id } = exp
230+
const firstThreeColumns = getRevisionFirstThreeColumns(
231+
this.experiments.getFirstThreeColumnOrder(),
232+
exp
233+
)
234+
235+
return {
229236
displayColor,
230237
fetched: this.fetchedRevs.has(label),
238+
firstThreeColumns,
231239
group: logicalGroupName,
232240
id,
233241
revision: label
234-
}))
242+
}
243+
})
235244
}
236245

237246
public getTemplatePlots(

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { getDataFromColumnPath } from '../../experiments/model/util'
2+
import { Experiment } from '../../experiments/webview/contract'
3+
4+
export const getRevisionFirstThreeColumns = (
5+
firstThreeColumns: string[],
6+
experiment: Experiment
7+
) => {
8+
const columns: Array<{ path: string; value: string }> = []
9+
for (const path of firstThreeColumns) {
10+
const { value, splitUpPath } = getDataFromColumnPath(experiment, path)
11+
const [type] = splitUpPath
12+
if (value) {
13+
columns.push({
14+
path: path.slice(type.length + 1) || path,
15+
value
16+
})
17+
}
18+
}
19+
return columns
20+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export type Revision = {
4141
group?: string
4242
displayColor: Color
4343
fetched: boolean
44+
firstThreeColumns: Array<{ path: string; value: string }>
4445
}
4546

4647
export interface PlotsComparisonData {

0 commit comments

Comments
 (0)