"Live Figure" - new Graph props for current state of figure

[ndrezn]

Migrating from plotly/dash-core-components#584

Currently the way to respond to zoom events, legend toggle events, etc. is to listen to relayoutData and restyleData. This gets super complicated though since it only contains the latest changes, which may be a partial zoom (single axis, single-ended) or completely unrelated to the information you actually care about. So to make a really robust app, the dev needs to manually accumulate these changes in a Store or something.

It would be way better to just expose the current state of the figure as its own prop. Then, to avoid infinite loops, the normal usage pattern would be to use relayoutData as an Input just to trigger the callback, and use liveFigure or whatever we call it as State.

But of course we don't want the entire figure, we need to at least exclude data arrays as they may be huge and slow things down.

The uirevision system collects attribute patterns that can be set by the UI - we could presumably piggyback off that, though that's reaching fairly deep into plotly.js unless we build this functionality directly into plotly.js. Alternatively we could clone the whole figure minus data arrays - or even just clip all arrays, though there are a few that we need to keep in their entirety (hiddenlabels, selectedpoints...)

[alexcjohnson]

A thought about this (that would definitely be better written within plotly.js and then exposed here, cc @archmoj):

The challenge here is figuring out what subset of attributes users care about, and providing just those. What if we flipped this around and let the user specify the exact attributes to watch, then create an event that just contains those attributes, but in the same place they occur in the full figure? It’s a bit more work for users upfront, but it means you can be 100% sure that when an event comes in, it’s something you care about.

As a bonus if there’s something else in the figure that’s relevant for your event handler, you can include it even if it isn’t something that’s ever changed by the UI - so you don’t have to keep a separate record of whatever that is (or ask for the whole enormous figure)

To be more specific: this could all be a single layout attribute (tentatively called watch?) that looks something like:

layout: {
  watch: {
    layout: {xaxis: {range: true, autorange: true}, selections: true, title: {text: true}},
    data: [null, {visible: true, name: true, selectedpoints: true}]  // only watch items in the second trace
  }
}

Or perhaps layout.watch.data is an object, for the attributes to watch in all traces, and each trace also allows its own watch attribute to provide specific things to watch just in that trace.

This would result in events (perhaps plotly_change?) with data that looks like:

{
  layout: {xaxis: {range: [5, 10], autorange: false}, selections: [{...}], title: {text: 'my title'}},
  data: [null, {visible: 'legendonly', name: 'my trace', selectedpoints: []}]
}