plotly-graph: add support for JSON exports

[antoinerg]

This PR adds support for JSON exports in plotly-graph following the release of plotly.js v1.53.0 and effectively closes https://github.com/plotly/orca/issues/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]

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

[antoinerg]

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]

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

[antoinerg]

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 https://github.com/plotly/orca/pull/309#discussion_r404965547). It could be added later once we support deterministic identifiers in plotly.js.

[nicolaskruchten]

What is nondeterministic about the JSON for the blank figure?

[antoinerg]

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]

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]

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 :lock: down!

[nicolaskruchten]

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