plotly-graph: add support for JSON exports #309

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

src/component/plotly-graph/render.js

@@ -51,7 +51,7 @@ function render (info, opts, sendToMain) {
  }

  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"}

test/image/compare_images

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

test/image/compare_images

@@ -21,6 +21,22 @@ do
  format="${filename##*.}"

  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 da5c8f2 Compare April 7, 2020 16:22

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

antoinerg commented Apr 7, 2020

View reviewed changes

test/image/compare_images Show resolved Hide resolved

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 master Apr 8, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plotly-graph: add support for JSON exports #309

plotly-graph: add support for JSON exports #309

antoinerg commented Apr 7, 2020 •

edited

Loading

nicolaskruchten Apr 7, 2020

antoinerg Apr 7, 2020 •

edited

Loading

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020 •

edited

Loading

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020 •

edited

Loading

nicolaskruchten Apr 8, 2020

antoinerg Apr 8, 2020

antoinerg Apr 8, 2020

nicolaskruchten commented Apr 8, 2020

nicolaskruchten left a comment

plotly-graph: add support for JSON exports #309

plotly-graph: add support for JSON exports #309

Conversation

antoinerg commented Apr 7, 2020 • edited Loading

nicolaskruchten Apr 7, 2020

Choose a reason for hiding this comment

antoinerg Apr 7, 2020 • edited Loading

Choose a reason for hiding this comment

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020 • edited Loading

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020

nicolaskruchten commented Apr 7, 2020

antoinerg commented Apr 7, 2020 • edited Loading

nicolaskruchten Apr 8, 2020

Choose a reason for hiding this comment

antoinerg Apr 8, 2020

Choose a reason for hiding this comment

antoinerg Apr 8, 2020

Choose a reason for hiding this comment

nicolaskruchten commented Apr 8, 2020

nicolaskruchten left a comment

Choose a reason for hiding this comment

antoinerg commented Apr 7, 2020 •

edited

Loading

antoinerg Apr 7, 2020 •

edited

Loading

antoinerg commented Apr 7, 2020 •

edited

Loading

antoinerg commented Apr 7, 2020 •

edited

Loading