Promise returns before rendering gl traces?

[mewalig]

Does anyone familiar with the bowels of plotly know the answer to this question which is detailed at http://stackoverflow.com/questions/34315834/plotly-js-how-to-run-my-javascript-only-after-plot-image-is-loaded?

I am aware that this list is for feature requests and bugs, and as far as I can tell now, it is either a) a bug in the behavior of the promise execution, or b) a feature request asking for an alternative mechanism to run some javascript after the plot renders, or c) just a question about an already-supported feature to which I don't know the correct answer.

Unfortunately, I don't know if it is a), b), or c) until the question is answered, so in case it is a) or b), I am posting the question here as well.

Thank you

[mdtusz]

@mewalig could you share an example (with jsbin/jsfiddle/codepen) so we can take a look? It's possible it's an error with how promises are resolved.

[etpinard]

@mewalig Please read the contributor's guide before opening issues in this repo.

[mewalig]

@mdtusz: attached is a self-contained example based on the example referenced in the stack overflow page. Just change ".txt" to ".html" and view in browser. The alert pops up before the image is rendered. I will put an example on codepen later-- I don't have an account there so have to take a few more steps to get the example up there.

ex_alert.txt

[etpinard]

This looks like a webgl only problem. Changing the title to reflect this.

[mikolalysenko]

This is definitely a bug. The problem is that the plots are getting redrawn only once their requestAnimationFrame handler fires, but the promise returned by Plotly.plot() completes before this happens.

A simple solution would be to force a synchronous redraw, as done by the .toImage() function used by the image server. One way to do this would be to modify the .plot() method for Scene2D and Scene3D to trigger an immediate synchronous redraw after the update completes. The following snippets illustrate how to do this for Scene2D and Scene3D:

Scene 2D: https://github.com/plotly/plotly.js/blob/master/src/plots/gl2d/scene2d.js#L168-L170
Scene 3D: https://github.com/plotly/plotly.js/blob/master/src/plots/gl3d/scene.js#L621

If we just move those lines to the end of their respective plot methods I think this should solve the problem. Thoughts @etpinard ?

[etpinard]

@mikolalysenko (cc @mdtusz )

I've tried to add this.glplot.redraw() in scene.plot on this branch.

Things are looking promising. But not perfect yet it seems.

It looks like forcing the redraw in the plot routine does remove the lag between the time where the promise is returned and the time of first rendering. But, in order to interact with the rendered scene, a timeout of 0 ms is required.

I'm testing the behavior using one of our karma/jasmine test suite.

If you want try things out, the command is:

npm run test-jasmine -- tests/gl_plot_interact_test.js

where we simulate a mouse over event on the scene.

I wonder if this behavior is related to: http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

[mdtusz]

The reason the setTimeout works is the same issue as with the weird plot-resizing issue we had - we simply need to yield execution to the browser to allow for a paint before continuing.

Using either setTimeout or requestAnimationFrame should work, but if we're using requestAnimationFrame, we will need to add a shim (a.k.a. setTimeout with 1/60th of a second) for IE9 support.