Skip to content

Commit 4a574ec

Browse files
julieg18julieg18
authored
Update custom plot spec (#3634)
* have metric vs param plot use scatter plot
1 parent 612c90a commit 4a574ec

File tree

3 files changed

+44
-165
lines changed

3 files changed

+44
-165
lines changed

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

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -76,44 +76,25 @@ export const createSpec = (title: string, metric: string, param: string) =>
7676
encoding: {
7777
x: {
7878
field: 'param',
79+
scale: {
80+
zero: false
81+
},
7982
title: param,
8083
type: 'quantitative'
8184
},
8285
y: {
8386
field: 'metric',
84-
scale: { zero: false },
87+
scale: {
88+
zero: false
89+
},
8590
title,
8691
type: 'quantitative'
8792
}
8893
},
8994
height: 'container',
9095
layer: [
91-
{
92-
layer: [
93-
{
94-
mark: {
95-
type: 'line'
96-
}
97-
},
98-
{
99-
mark: {
100-
type: 'point'
101-
},
102-
transform: [
103-
{
104-
filter: {
105-
param: 'hover'
106-
}
107-
}
108-
]
109-
}
110-
]
111-
},
11296
{
11397
encoding: {
114-
opacity: {
115-
value: 0
116-
},
11798
tooltip: [
11899
{
119100
field: 'expName',
@@ -130,26 +111,10 @@ export const createSpec = (title: string, metric: string, param: string) =>
130111
]
131112
},
132113
mark: {
133-
type: 'rule'
134-
},
135-
params: [
136-
{
137-
name: 'hover',
138-
select: {
139-
clear: 'mouseout',
140-
fields: ['param', 'metric'],
141-
nearest: true,
142-
on: 'mouseover',
143-
type: 'point'
144-
}
145-
}
146-
]
147-
}
148-
],
149-
transform: [
150-
{
151-
as: 'y',
152-
calculate: "format(datum['y'],'.5f')"
114+
filled: true,
115+
size: 60,
116+
type: 'point'
117+
}
153118
}
154119
],
155120
width: 'container'

‎extension/src/test/fixtures/expShow/base/customPlots.ts‎

Lines changed: 33 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -80,52 +80,47 @@ const data: CustomPlotsData = {
8080
encoding: {
8181
x: {
8282
field: 'param',
83+
scale: {
84+
zero: false
85+
},
8386
title: 'params.yaml:dropout',
8487
type: 'quantitative'
8588
},
8689
y: {
8790
field: 'metric',
88-
scale: { zero: false },
91+
scale: {
92+
zero: false
93+
},
8994
title: 'summary.json:loss',
9095
type: 'quantitative'
9196
}
9297
},
9398
height: 'container',
9499
layer: [
95-
{
96-
layer: [
97-
{ mark: { type: 'line' } },
98-
{
99-
mark: { type: 'point' },
100-
transform: [{ filter: { param: 'hover' } }]
101-
}
102-
]
103-
},
104100
{
105101
encoding: {
106-
opacity: { value: 0 },
107102
tooltip: [
108-
{ field: 'expName', title: 'name' },
109-
{ field: 'metric', title: 'summary.json:loss' },
110-
{ field: 'param', title: 'params.yaml:dropout' }
103+
{
104+
field: 'expName',
105+
title: 'name'
106+
},
107+
{
108+
field: 'metric',
109+
title: 'summary.json:loss'
110+
},
111+
{
112+
field: 'param',
113+
title: 'params.yaml:dropout'
114+
}
111115
]
112116
},
113-
mark: { type: 'rule' },
114-
params: [
115-
{
116-
name: 'hover',
117-
select: {
118-
clear: 'mouseout',
119-
fields: ['param', 'metric'],
120-
nearest: true,
121-
on: 'mouseover',
122-
type: 'point'
123-
}
124-
}
125-
]
117+
mark: {
118+
filled: true,
119+
size: 60,
120+
type: 'point'
121+
}
126122
}
127123
],
128-
transform: [{ as: 'y', calculate: "format(datum['y'],'.5f')" }],
129124
width: 'container'
130125
},
131126
values: [
@@ -183,44 +178,25 @@ const data: CustomPlotsData = {
183178
encoding: {
184179
x: {
185180
field: 'param',
181+
scale: {
182+
zero: false
183+
},
186184
title: 'params.yaml:epochs',
187185
type: 'quantitative'
188186
},
189187
y: {
190188
field: 'metric',
191-
scale: { zero: false },
189+
scale: {
190+
zero: false
191+
},
192192
title: 'summary.json:accuracy',
193193
type: 'quantitative'
194194
}
195195
},
196196
height: 'container',
197197
layer: [
198-
{
199-
layer: [
200-
{
201-
mark: {
202-
type: 'line'
203-
}
204-
},
205-
{
206-
mark: {
207-
type: 'point'
208-
},
209-
transform: [
210-
{
211-
filter: {
212-
param: 'hover'
213-
}
214-
}
215-
]
216-
}
217-
]
218-
},
219198
{
220199
encoding: {
221-
opacity: {
222-
value: 0
223-
},
224200
tooltip: [
225201
{
226202
field: 'expName',
@@ -237,26 +213,10 @@ const data: CustomPlotsData = {
237213
]
238214
},
239215
mark: {
240-
type: 'rule'
241-
},
242-
params: [
243-
{
244-
name: 'hover',
245-
select: {
246-
clear: 'mouseout',
247-
fields: ['param', 'metric'],
248-
nearest: true,
249-
on: 'mouseover',
250-
type: 'point'
251-
}
252-
}
253-
]
254-
}
255-
],
256-
transform: [
257-
{
258-
as: 'y',
259-
calculate: "format(datum['y'],'.5f')"
216+
filled: true,
217+
size: 60,
218+
type: 'point'
219+
}
260220
}
261221
],
262222
width: 'container'

‎webview/src/plots/components/App.test.tsx‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@testing-library/react'
1414
import '@testing-library/jest-dom/extend-expect'
1515
import comparisonTableFixture from 'dvc/src/test/fixtures/plotsDiff/comparison'
16-
import originalCustomPlotsFixture from 'dvc/src/test/fixtures/expShow/base/customPlots'
16+
import customPlotsFixture from 'dvc/src/test/fixtures/expShow/base/customPlots'
1717
import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions'
1818
import templatePlotsFixture from 'dvc/src/test/fixtures/plotsDiff/template/webview'
1919
import smoothTemplatePlotContent from 'dvc/src/test/fixtures/plotsDiff/template/smoothTemplatePlot'
@@ -59,52 +59,6 @@ import { clearSelection, createWindowTextSelection } from '../../test/selection'
5959
import * as EventCurrentTargetDistances from '../../shared/components/dragDrop/currentTarget'
6060
import { OVERSCAN_ROW_COUNT } from '../../shared/components/virtualizedGrid/VirtualizedGrid'
6161

62-
const customPlotsFixture = {
63-
...originalCustomPlotsFixture,
64-
plots: originalCustomPlotsFixture.plots.map(plot => {
65-
return {
66-
...plot,
67-
spec: {
68-
...plot.spec,
69-
layer: [
70-
{
71-
layer: [
72-
{ mark: { type: 'line' } },
73-
{
74-
mark: { type: 'point' },
75-
transform: [{ filter: { param: 'hover' } }]
76-
}
77-
]
78-
},
79-
{
80-
encoding: {
81-
opacity: { value: 0 },
82-
tooltip: [
83-
{ field: 'expName', title: 'name' },
84-
{ field: 'metric', title: 'summary.json:loss' },
85-
{ field: 'param', title: 'params.yaml:dropout' }
86-
]
87-
},
88-
mark: { type: 'rule' },
89-
params: [
90-
{
91-
name: 'hover',
92-
select: {
93-
clear: 'mouseout',
94-
fields: ['param', 'metric'],
95-
nearest: false, // true causes errors to be logged for tests
96-
on: 'mouseover',
97-
type: 'point'
98-
}
99-
}
100-
]
101-
}
102-
]
103-
}
104-
}
105-
})
106-
} as CustomPlotsData
107-
10862
jest.mock('../../shared/components/dragDrop/currentTarget', () => {
10963
const actualModule = jest.requireActual(
11064
'../../shared/components/dragDrop/currentTarget'

0 commit comments

Comments
 (0)