Skip to content

Commit 5fdbe92

Browse files
wolmirwolmir
authored
Merge pull request #1730 from iterative/show-experiment-name-in-table-header
Show experiment names in comparison table headers (#1614)
2 parents 50b8243 + 1f77030 commit 5fdbe92

File tree

10 files changed

+141
-32
lines changed

10 files changed

+141
-32
lines changed

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

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,32 @@ const getDisplayNameOrParent = (
6060
}
6161
}
6262

63+
const getLogicalGroupName = (
64+
sha: string,
65+
branchSha: string,
66+
experimentsObject: { [sha: string]: ExperimentFieldsOrError }
67+
): string | undefined => {
68+
const experiment = experimentsObject[sha]?.data
69+
70+
// if (!experiment) {
71+
// return
72+
// }
73+
74+
const { checkpoint_tip: checkpointTip = undefined, name = undefined } =
75+
experiment || {}
76+
77+
if (name) {
78+
return `[${name}]`
79+
}
80+
81+
return (
82+
getDisplayNameOrParent(sha, branchSha, experimentsObject) ||
83+
(checkpointTip && checkpointTip !== sha
84+
? getLogicalGroupName(checkpointTip, branchSha, experimentsObject)
85+
: undefined)
86+
)
87+
}
88+
6389
const getCheckpointTipId = (
6490
checkpointTip: string | undefined,
6591
experimentsObject: ExperimentsObject
@@ -89,7 +115,8 @@ const transformExperimentData = (
89115
experimentFields: ExperimentFields,
90116
label: string | undefined,
91117
sha?: string,
92-
displayNameOrParent?: string
118+
displayNameOrParent?: string,
119+
logicalGroupName?: string
93120
): Experiment => {
94121
const experiment = {
95122
id,
@@ -101,6 +128,10 @@ const transformExperimentData = (
101128
experiment.displayNameOrParent = displayNameOrParent
102129
}
103130

131+
if (logicalGroupName) {
132+
experiment.logicalGroupName = logicalGroupName
133+
}
134+
104135
if (sha) {
105136
experiment.sha = sha
106137
}
@@ -138,7 +169,8 @@ const transformExperimentOrCheckpointData = (
138169
experimentFields,
139170
getShortSha(sha),
140171
sha,
141-
getDisplayNameOrParent(sha, branchSha, experimentsObject)
172+
getDisplayNameOrParent(sha, branchSha, experimentsObject),
173+
getLogicalGroupName(sha, branchSha, experimentsObject)
142174
)
143175
}
144176
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface Experiment extends BaseExperimentFields {
99
id: string
1010
label: string
1111
displayNameOrParent?: string
12+
logicalGroupName?: string
1213
params?: Columns
1314
metrics?: Columns
1415
displayColor?: string

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,9 @@ export class PlotsModel extends ModelWithPersistence {
187187
this.comparisonOrder,
188188
this.experiments
189189
.getSelectedRevisions()
190-
.map(({ label: revision, displayColor }) => ({
190+
.map(({ label: revision, displayColor, logicalGroupName }) => ({
191191
displayColor,
192+
group: logicalGroupName,
192193
revision
193194
})),
194195
'revision'

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ export type ComparisonPlots = {
4343
revisions: ComparisonRevisionData
4444
}[]
4545

46-
export type ComparisonRevision = { revision: string; displayColor: Color }
46+
export type ComparisonRevision = {
47+
revision: string
48+
group?: string
49+
displayColor: Color
50+
}
4751

4852
export interface PlotsComparisonData {
4953
revisions: ComparisonRevision[]

‎extension/src/test/fixtures/expShow/rows.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ const data: Row[] = [
9999
name: 'exp-e7a67',
100100
checkpoint_parent: 'd1343a87c6ee4a2e82d19525964d2fb2cb6756c9',
101101
label: '4fb124a',
102+
logicalGroupName: '[exp-e7a67]',
102103
displayNameOrParent: '[exp-e7a67]',
103104
displayColor: colorsList[2],
104105
id: 'exp-e7a67',
@@ -133,6 +134,7 @@ const data: Row[] = [
133134
},
134135
checkpoint_parent: '1ee5f2ecb0fa4d83cbf614386536344cf894dd53',
135136
label: 'd1343a8',
137+
logicalGroupName: '[exp-e7a67]',
136138
displayColor: undefined,
137139
id: 'd1343a87c6ee4a2e82d19525964d2fb2cb6756c9',
138140
selected: false,
@@ -168,6 +170,7 @@ const data: Row[] = [
168170
checkpoint_parent: '53c3851f46955fa3e2b8f6e1c52999acc8c9ea77',
169171
displayColor: undefined,
170172
label: '1ee5f2e',
173+
logicalGroupName: '[exp-e7a67]',
171174
id: '1ee5f2ecb0fa4d83cbf614386536344cf894dd53',
172175
selected: false,
173176
sha: '1ee5f2ecb0fa4d83cbf614386536344cf894dd53'
@@ -206,6 +209,7 @@ const data: Row[] = [
206209
checkpoint_parent: '217312476f8854dda1865450b737eb6bc7a3ba1b',
207210
displayColor: colorsList[3],
208211
label: '42b8736',
212+
logicalGroupName: '[test-branch]',
209213
displayNameOrParent: '[test-branch]',
210214
id: 'test-branch',
211215
sha: '42b8736b08170529903cd203a1f40382a4b4a8cd',
@@ -240,6 +244,7 @@ const data: Row[] = [
240244
checkpoint_parent: '9523bde67538cf31230efaff2dbc47d38a944ab5',
241245
displayColor: undefined,
242246
label: '2173124',
247+
logicalGroupName: '[test-branch]',
243248
id: '217312476f8854dda1865450b737eb6bc7a3ba1b',
244249
selected: false,
245250
sha: '217312476f8854dda1865450b737eb6bc7a3ba1b'
@@ -274,6 +279,7 @@ const data: Row[] = [
274279
checkpoint_parent: '53c3851f46955fa3e2b8f6e1c52999acc8c9ea77',
275280
displayColor: undefined,
276281
label: '9523bde',
282+
logicalGroupName: '[test-branch]',
277283
id: '9523bde67538cf31230efaff2dbc47d38a944ab5',
278284
selected: false,
279285
sha: '9523bde67538cf31230efaff2dbc47d38a944ab5'
@@ -312,6 +318,7 @@ const data: Row[] = [
312318
checkpoint_parent: '22e40e1fa3c916ac567f69b85969e3066a91dda4',
313319
displayColor: colorsList[4],
314320
label: '1ba7bcd',
321+
logicalGroupName: '[exp-83425]',
315322
displayNameOrParent: '[exp-83425]',
316323
id: 'exp-83425',
317324
sha: '1ba7bcd6ce6154e72e18b155475663ecbbd1f49d',
@@ -346,6 +353,7 @@ const data: Row[] = [
346353
checkpoint_parent: '91116c1eae4b79cb1f5ab0312dfd9b3e43608e15',
347354
displayColor: undefined,
348355
label: '22e40e1',
356+
logicalGroupName: '[exp-83425]',
349357
id: '22e40e1fa3c916ac567f69b85969e3066a91dda4',
350358
selected: false,
351359
sha: '22e40e1fa3c916ac567f69b85969e3066a91dda4'
@@ -380,6 +388,7 @@ const data: Row[] = [
380388
checkpoint_parent: 'e821416bfafb4bc28b3e0a8ddb322505b0ad2361',
381389
displayColor: undefined,
382390
label: '91116c1',
391+
logicalGroupName: '[exp-83425]',
383392
id: '91116c1eae4b79cb1f5ab0312dfd9b3e43608e15',
384393
selected: false,
385394
sha: '91116c1eae4b79cb1f5ab0312dfd9b3e43608e15'
@@ -414,6 +423,7 @@ const data: Row[] = [
414423
checkpoint_parent: 'c658f8b14ac819ac2a5ea0449da6c15dbe8eb880',
415424
displayColor: undefined,
416425
label: 'e821416',
426+
logicalGroupName: '[exp-83425]',
417427
id: 'e821416bfafb4bc28b3e0a8ddb322505b0ad2361',
418428
selected: false,
419429
sha: 'e821416bfafb4bc28b3e0a8ddb322505b0ad2361'
@@ -448,6 +458,7 @@ const data: Row[] = [
448458
checkpoint_parent: '23250b33e3d6dd0e136262d1d26a2face031cb03',
449459
displayColor: undefined,
450460
label: 'c658f8b',
461+
logicalGroupName: '[exp-83425]',
451462
id: 'c658f8b14ac819ac2a5ea0449da6c15dbe8eb880',
452463
selected: false,
453464
sha: 'c658f8b14ac819ac2a5ea0449da6c15dbe8eb880'
@@ -482,6 +493,7 @@ const data: Row[] = [
482493
checkpoint_parent: '53c3851f46955fa3e2b8f6e1c52999acc8c9ea77',
483494
displayColor: undefined,
484495
label: '23250b3',
496+
logicalGroupName: '[exp-83425]',
485497
id: '23250b33e3d6dd0e136262d1d26a2face031cb03',
486498
selected: false,
487499
sha: '23250b33e3d6dd0e136262d1d26a2face031cb03'

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

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -545,11 +545,27 @@ export const getComparisonWebviewMessage = (
545545
return {
546546
plots: plotAcc,
547547
revisions: [
548-
{ revision: 'workspace', displayColor: workspace },
549-
{ revision: 'main', displayColor: main },
550-
{ revision: '4fb124a', displayColor: _4fb124a },
551-
{ revision: '42b8736', displayColor: _42b8735 },
552-
{ revision: '1ba7bcd', displayColor: _1ba7bcd }
548+
{
549+
revision: 'workspace',
550+
displayColor: workspace,
551+
group: undefined
552+
},
553+
{ revision: 'main', displayColor: main, group: undefined },
554+
{
555+
revision: '4fb124a',
556+
displayColor: _4fb124a,
557+
group: '[exp-e7a67]'
558+
},
559+
{
560+
revision: '42b8736',
561+
displayColor: _42b8735,
562+
group: '[test-branch]'
563+
},
564+
{
565+
revision: '1ba7bcd',
566+
displayColor: _1ba7bcd,
567+
group: '[exp-83425]'
568+
}
553569
],
554570
sectionName: DEFAULT_SECTION_NAMES[Section.COMPARISON_TABLE],
555571
size: PlotSize.REGULAR

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

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -307,13 +307,41 @@ suite('Experiments Tree Test Suite', () => {
307307
plotsModel.getSelectedRevisionDetails(),
308308
'all running and the most recent experiments are now selected'
309309
).to.deep.equal([
310-
{ displayColor: colors[0], revision: 'workspace' },
311-
{ displayColor: colors[2], revision: '4fb124a' },
312-
{ displayColor: colors[3], revision: '42b8736' },
313-
{ displayColor: colors[1], revision: 'd1343a8' },
314-
{ displayColor: colors[4], revision: '1ee5f2e' },
315-
{ displayColor: colors[5], revision: '2173124' },
316-
{ displayColor: colors[6], revision: '9523bde' }
310+
{
311+
displayColor: colors[0],
312+
group: undefined,
313+
revision: 'workspace'
314+
},
315+
{
316+
displayColor: colors[2],
317+
group: '[exp-e7a67]',
318+
revision: '4fb124a'
319+
},
320+
{
321+
displayColor: colors[3],
322+
group: '[test-branch]',
323+
revision: '42b8736'
324+
},
325+
{
326+
displayColor: colors[1],
327+
group: '[exp-e7a67]',
328+
revision: 'd1343a8'
329+
},
330+
{
331+
displayColor: colors[4],
332+
group: '[exp-e7a67]',
333+
revision: '1ee5f2e'
334+
},
335+
{
336+
displayColor: colors[5],
337+
group: '[test-branch]',
338+
revision: '2173124'
339+
},
340+
{
341+
displayColor: colors[6],
342+
group: '[test-branch]',
343+
revision: '9523bde'
344+
}
317345
])
318346
expect(
319347
mockPlotsDiff,

‎webview/src/plots/components/comparisonTable/ComparisonTable.test.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ describe('ComparisonTable', () => {
4040

4141
const basicProps: ComparisonTableProps = comparisonTableFixture
4242
const revisions = basicProps.revisions.map(({ revision }) => revision)
43+
const namedRevisions = basicProps.revisions.map(
44+
({ revision, group }) => `${revision}${group || ''}`
45+
)
4346
const renderTable = (props = basicProps) =>
4447
render(
4548
<DragDropProvider>
@@ -179,7 +182,7 @@ describe('ComparisonTable', () => {
179182

180183
let headers = getHeaders().map(header => header.textContent)
181184

182-
expect(headers).toStrictEqual(revisions)
185+
expect(headers).toStrictEqual(namedRevisions)
183186

184187
const filteredRevisions = basicProps.revisions.filter(
185188
({ revision }) => revision !== revisions[3]
@@ -189,12 +192,11 @@ describe('ComparisonTable', () => {
189192

190193
headers = getHeaders().map(header => header.textContent)
191194

192-
expect(headers).toStrictEqual([
193-
revisions[0],
194-
revisions[1],
195-
revisions[2],
196-
revisions[4]
197-
])
195+
const expectedRevisions = filteredRevisions.map(
196+
({ revision, group }) => `${revision}${group || ''}`
197+
)
198+
199+
expect(headers).toStrictEqual(expectedRevisions)
198200
})
199201

200202
it('should add a new column if there is a new revision', () => {
@@ -208,7 +210,7 @@ describe('ComparisonTable', () => {
208210
rerender(<ComparisonTable {...basicProps} revisions={newRevisions} />)
209211
const headers = getHeaders().map(header => header.textContent)
210212

211-
expect(headers).toStrictEqual([...revisions, newRevName])
213+
expect(headers).toStrictEqual([...namedRevisions, newRevName])
212214
})
213215

214216
it('should pin the current pinned column on first render', () => {
@@ -254,12 +256,20 @@ describe('ComparisonTable', () => {
254256

255257
let headers = getHeaders().map(header => header.textContent)
256258

257-
expect(headers).toStrictEqual(revisions)
259+
expect(headers).toStrictEqual(namedRevisions)
258260

259261
dragAndDrop(startingNode, endingNode)
260262

261263
headers = getHeaders().map(header => header.textContent)
262264

265+
const expectedNamedRevisions = [
266+
namedRevisions[0],
267+
namedRevisions[3],
268+
namedRevisions[1],
269+
namedRevisions[2],
270+
namedRevisions[4]
271+
]
272+
263273
const expectedRevisions = [
264274
revisions[0],
265275
revisions[3],
@@ -268,7 +278,7 @@ describe('ComparisonTable', () => {
268278
revisions[4]
269279
]
270280

271-
expect(headers).toStrictEqual(expectedRevisions)
281+
expect(headers).toStrictEqual(expectedNamedRevisions)
272282
expect(mockPostMessage).toBeCalledTimes(1)
273283
expect(mockPostMessage).toBeCalledWith({
274284
payload: expectedRevisions,
@@ -283,11 +293,11 @@ describe('ComparisonTable', () => {
283293

284294
const [, endingNode, , startingNode] = getHeaders()
285295
const expectedOrder = [
286-
revisions[1],
287-
revisions[0],
288-
revisions[2],
289-
revisions[3],
290-
revisions[4]
296+
namedRevisions[1],
297+
namedRevisions[0],
298+
namedRevisions[2],
299+
namedRevisions[3],
300+
namedRevisions[4]
291301
]
292302

293303
const headers = getHeaders().map(header => header.textContent)

‎webview/src/plots/components/comparisonTable/ComparisonTableHead.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
2121
setColumnsOrder,
2222
setPinnedColumn
2323
}) => {
24-
const items = columns.map(({ revision, displayColor }) => {
24+
const items = columns.map(({ revision, displayColor, group }) => {
2525
const isPinned = revision === pinnedColumn
2626
return (
2727
<th
@@ -37,6 +37,7 @@ export const ComparisonTableHead: React.FC<ComparisonTableHeadProps> = ({
3737
displayColor={displayColor}
3838
>
3939
{revision}
40+
{group && <span className={styles.experimentName}>{group}</span>}
4041
</ComparisonTableHeader>
4142
</th>
4243
)

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,7 @@ $gap: 4px;
149149
width: 100%;
150150
height: auto;
151151
}
152+
153+
.experimentName {
154+
color: $meta-cell-color;
155+
}

0 commit comments

Comments
 (0)