Since plotly.js will soon have drawing capabilities we should implement either a new Canvas class with a high-level API for a plotly.js figure + annotations, or reuse the existing DashCanvas class with a plotly backend.
What can be done out of the box with plotly.js + dcc.Graph
define a figure with a given image either as layout image, or trace, and parameters for the newshape layout attribute as well as dragmode (which can be changed from the modebar)
define adcc.Storeto store the geometry of annotations and update it with a callback listening torelayoutData`
modify newshape parameters with other Dash components such as slider etc. However doing this will require to replot the whole figure. This problem can be mitigated by using clientside callbacks.
What we can do on top on dcc.Graph:
add a dcc.Store to save the geometry of annotations, which will be updated on relayout (this could also be part of a Python "combination class" with an internal callback but probably better to implement everything in JS). This store should we read and write, ie it should be possible to load annotations programmatically. The structure of this object would be a list of objects, ie using the same syntax as plotly.
have another dcc.Store where to store newshape parameters, which could trigger relayout events for the figure without replotting the whole figure. Same syntax as plotly.
have an image parameter which can be an array in the case where the figure attribute is not given, then it is built automatically
Other thoughts:
hiding buttons from the modebar can be done in the config attribute
future directions: add slider to slice through 3D volume, interaction with datashader.
Since plotly.js will soon have drawing capabilities we should implement either a new Canvas class with a high-level API for a plotly.js figure + annotations, or reuse the existing DashCanvas class with a plotly backend.
What can be done out of the box with
plotly.js+dcc.Graphnewshapelayout attribute as well asdragmode(which can be changed from the modebar)define adcc.Storeto store the geometry of annotations and update it with a callback listening torelayoutData`newshapeparameters with other Dash components such as slider etc. However doing this will require to replot the whole figure. This problem can be mitigated by using clientside callbacks.What we can do on top on
dcc.Graph:dcc.Storeto save the geometry of annotations, which will be updated onrelayout(this could also be part of a Python "combination class" with an internal callback but probably better to implement everything in JS). This store should we read and write, ie it should be possible to load annotations programmatically. The structure of this object would be a list of objects, ie using the same syntax as plotly.dcc.Storewhere to store newshape parameters, which could trigger relayout events for the figure without replotting the whole figure. Same syntax as plotly.Other thoughts:
configattribute