plotly-graph: add support for JSON exports by antoinerg · Pull Request #309 · plotly/orca

antoinerg · 2020-04-07T05:50:12Z

This PR adds support for JSON exports in plotly-graph following the release of plotly.js v1.53.0 and effectively closes#283

Baselines for the image tests had to be updated for them to pass (following changes introduced by bumping plotly.js from to v1.47.2 to v1.53.0)

cc @nicolaskruchten @alexcjohnson @jonmmease

nicolaskruchten · 2020-04-07T12:26:03Z


 const imgOpts = {
- format: (PRINT_TO_PDF || PRINT_TO_EMF) ? 'svg' : format,
+ format: (PRINT_TO_PDF || PRINT_TO_EMF) ? 'svg' : (format === 'json' ? 'full-json' : format),


This is getting a bit tortured... I would recommend hoisting this out into a little sequence of ifs or a switch or something :)

~~Done in dbe395c~~
Done in da5c8f2

nicolaskruchten · 2020-04-07T12:28:03Z

Could we see a real mock that shows a trivial figure like {data:[], layout:{}} and the corresponding full json as the baseline?

antoinerg · 2020-04-07T16:20:05Z

Could we see a real mock that shows a trivial figure like {data:[], layout:{}} and the corresponding full json as the baseline?

Here's the output for mock 29: https://4266-99037241-gh.circle-artifacts.com/0/test_images/29.json (other artifacts can be found here)

Here's the output mock for a trivial figure {data:[], layout:{}}:

$ curl -H "accept: application/json" -H "content-type: application/json" http://localhost:9091 -d '{"data":[], "layout":{}}'
{"data":[],"layout":{"annotations":[],"autosize":false,"calendar":"gregorian","clickmode":"event","colorscale":{"diverging":[[0,"rgb(5,10,172)"],[0.35,"rgb(106,137,247)"],[0.5,"rgb(190,190,190)"],[0.6,"rgb(220,170,132)"],[0.7,"rgb(230,145,90)"],[1,"rgb(178,10,28)"]],"sequential":[[0,"rgb(220,220,220)"],[0.2,"rgb(245,195,157)"],[0.4,"rgb(245,160,105)"],[1,"rgb(178,10,28)"]],"sequentialminus":[[0,"rgb(5,10,172)"],[0.35,"rgb(40,60,190)"],[0.5,"rgb(70,100,245)"],[0.6,"rgb(90,120,245)"],[0.7,"rgb(106,137,247)"],[1,"rgb(220,220,220)"]]},"colorway":["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"],"dragmode":"zoom","font":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":12},"height":500,"hidesources":false,"hoverdistance":20,"hoverlabel":{"align":"auto","font":{"family":"Arial, sans-serif","size":13},"namelength":15},"hovermode":"y","images":[],"margin":{"autoexpand":true,"b":80,"l":80,"pad":0,"r":80,"t":100},"modebar":{"activecolor":"rgba(68, 68, 68, 0.7)","bgcolor":"rgba(255, 255, 255, 0.5)","color":"rgba(68, 68, 68, 0.3)","orientation":"h"},"paper_bgcolor":"#fff","plot_bgcolor":"#fff","separators":".,","shapes":[],"showlegend":false,"sliders":[],"spikedistance":20,"title":{"font":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":17},"pad":{"b":0,"l":0,"r":0,"t":0},"text":"Click to enter Plot title","x":0.5,"xanchor":"auto","xref":"container","y":"auto","yanchor":"auto","yref":"container"},"uniformtext":{"mode":false},"updatemenus":[],"width":700,"xaxis":{"anchor":"y","automargin":false,"autorange":true,"color":"#444","constrain":"range","constraintoward":"center","domain":[0,1],"dtick":1,"exponentformat":"B","fixedrange":false,"gridcolor":"rgb(238, 238, 238)","gridwidth":1,"hoverformat":"","layer":"above traces","nticks":0,"range":[-1,6],"rangemode":"normal","separatethousands":false,"showexponent":"all","showgrid":true,"showline":false,"showspikes":false,"showticklabels":true,"side":"bottom","tick0":0,"tickangle":"auto","tickfont":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":12},"tickformat":"","tickmode":"auto","tickprefix":"","ticks":"","ticksuffix":"","title":{"font":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":14},"text":"Click to enter X axis title"},"type":"linear","visible":true,"zeroline":true,"zerolinecolor":"#444","zerolinewidth":1},"yaxis":{"anchor":"x","automargin":false,"autorange":true,"color":"#444","constrain":"range","constraintoward":"middle","domain":[0,1],"dtick":1,"exponentformat":"B","fixedrange":false,"gridcolor":"rgb(238, 238, 238)","gridwidth":1,"hoverformat":"","layer":"above traces","nticks":0,"range":[-1,4],"rangemode":"normal","separatethousands":false,"showexponent":"all","showgrid":true,"showline":false,"showspikes":false,"showticklabels":true,"side":"left","tick0":0,"tickangle":"auto","tickfont":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":12},"tickformat":"","tickmode":"auto","tickprefix":"","ticks":"","ticksuffix":"","title":{"font":{"color":"#444","family":"\"Open Sans\", verdana, arial, sans-serif","size":14},"text":"Click to enter Y axis title"},"type":"linear","visible":true,"zeroline":true,"zerolinecolor":"#444","zerolinewidth":1}},"frames":[],"config":{"autosizable":false,"displayModeBar":false,"displaylogo":true,"doubleClick":false,"doubleClickDelay":300,"editable":false,"edits":{},"fillFrame":false,"frameMargins":0,"globalTransforms":[],"linkText":"Edit chart","locale":"en-US","locales":{},"logging":1,"mapboxAccessToken":null,"modeBarButtons":false,"modeBarButtonsToAdd":[],"modeBarButtonsToRemove":[],"notifyOnLogging":0,"plotGlPixelRatio":2.5,"plotlyServerURL":"","queueLength":0,"responsive":false,"scrollZoom":false,"sendData":true,"setBackground":"_function","showAxisDragHandles":true,"showAxisRangeEntryBoxes":true,"showEditInChartStudio":false,"showLink":false,"showSendToCloud":false,"showSources":false,"showTips":false,"staticPlot":true,"toImageButtonOptions":{},"topojsonURL":"https://cdn.plot.ly/","watermark":false},"version":"1.53.0"}

nicolaskruchten · 2020-04-07T16:59:46Z

OK but are we committing the output of the mock 29 JSON into the repo and comparing it each time etc?

antoinerg · 2020-04-07T17:10:51Z

OK but are we committing the output of the mock 29 JSON into the repo and comparing it each time etc?

At the moment, no we don't have JSON baselines (see #309 (comment)). It could be added later once we support deterministic identifiers in plotly.js.

nicolaskruchten · 2020-04-07T18:05:28Z

What is nondeterministic about the JSON for the blank figure?

antoinerg · 2020-04-07T18:11:13Z

What is nondeterministic about the JSON for the blank figure?

For the blank figure, it seems like it will be deterministic. Actually, the only thing that will be nondeterministic in the JSON for non-trivial figures will be the uid in the data array. We could definitely pin them. Would you like me to do that?

nicolaskruchten · 2020-04-07T19:20:41Z

I'd love to see at least one full json-to-fullJson mock-to-baseline in the test suite for Orca moving forward, yes. The blank figure is a good start!

antoinerg · 2020-04-07T20:34:12Z

I'd love to see at least one full json-to-fullJson mock-to-baseline in the test suite for Orca moving forward, yes. The blank figure is a good start!

After pinning all the mock's uid, I introduced JSON baselines and diff them as part of our tests. This is now 🔒 down!

nicolaskruchten · 2020-04-08T16:36:16Z


 case "$format" in
+ json) 
+ diff "$1/$filename" "$2/$filename" > "$3/$filename.diff"


do you want to do a more JSON-aware kind of diff here, or does the JSON that comes out of Orca already have sorted keys ?

The order seems to be deterministic so it's not strictly necessary. If that ever changes, I will add JSON-aware diffing. It would be a nice addition indeed.

If it comes to that we could install and run https://www.npmjs.com/package/json-diff. I went with built-in diff for the time being.

nicolaskruchten · 2020-04-08T16:37:20Z

Looks solid! thanks for 🔒ing all that down so tight with the JSON comparisons!

nicolaskruchten

💃

antoinerg added 2 commits April 6, 2020 23:33

test-image: remove if baseline and image is the same
03f7f88

bump plotly.js to v1.53.0 and add support for JSON format
703adf1

antoinerg added status: reviewable type: feature labels Apr 7, 2020

nicolaskruchten reviewed Apr 7, 2020
View reviewed changes

plotly-graph: improve readability of the logic setting imgOpts.format
da5c8f2

antoinerg force-pushed the pr-full-json branch from dbe395c to da5c8f2Compare April 7, 2020 16:22

antoinerg requested a review from nicolaskruchten April 7, 2020 16:44

antoinerg commented Apr 7, 2020
View reviewed changes

Comment threadtest/image/compare_images

antoinerg added 3 commits April 7, 2020 16:32

test-image: pin mock's uid for deterministic JSON
5a7e277

test-image: add JSON baselines!
3adf830

test-image: compare JSON to baselines
f7ed959

nicolaskruchten reviewed Apr 8, 2020
View reviewed changes

nicolaskruchten approved these changes Apr 8, 2020
View reviewed changes

antoinerg merged commit faa203e into masterApr 8, 2020

antoinerg deleted the pr-full-json branch April 8, 2020 17:03

Uh oh!

Uh oh!

Conversation

antoinerg commented Apr 7, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nicolaskruchtenApr 7, 2020

Choose a reason for hiding this comment

Uh oh!

antoinergApr 7, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicolaskruchten commented Apr 7, 2020

Uh oh!

antoinerg commented Apr 7, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

nicolaskruchten commented Apr 7, 2020

Uh oh!

antoinerg commented Apr 7, 2020

Uh oh!

nicolaskruchten commented Apr 7, 2020

Uh oh!

antoinerg commented Apr 7, 2020

Uh oh!

nicolaskruchten commented Apr 7, 2020

Uh oh!

antoinerg commented Apr 7, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nicolaskruchtenApr 8, 2020

Choose a reason for hiding this comment

Uh oh!

antoinergApr 8, 2020

Choose a reason for hiding this comment

Uh oh!

antoinergApr 8, 2020

Choose a reason for hiding this comment

Uh oh!

nicolaskruchten commented Apr 8, 2020

Uh oh!

nicolaskruchten left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

antoinerg commented Apr 7, 2020•
edited
Loading

antoinergApr 7, 2020•
edited
Loading

antoinerg commented Apr 7, 2020•
edited
Loading

antoinerg commented Apr 7, 2020•
edited
Loading