[Question] How to update `data` and `layout` one time for both ?

[touchft]

I find that separate update of data and layout will decrease the performance through the method plot(:data, layout=:layout).

Is that possible to update data and layout one time for both? (The update behavior is similar to Plotly.update in Plotly.js)

[essenciary]

Not sure I understand. plot(...) renders the web elements as HTML. The state is synchronized via data payloads over websockets/ajax when the values actually change, when you you modify data or layout (which are individual operations).

[touchft]

Sorry. I have to make myself more clear. Supposing I have 100 trace and layout to plot on web, all trace and layout change every second. If use current method as <plotly :data="data" :layout="layout" ></plotly>, the update of plot on web will be 200 times per second for some point of view. If there will be a method like <plotly :update="update"></plotly>, the realization of update plot on web will be 100 times per second, which behaves the way as Plotly.update do in Plotly.js.

Note: The number 100 or 200 are used to represent the amount of data. They are not strictly correlated.

[hhaensel]

Very interesting question. It is not straight forward. I think, we could use the js function $withoutWatchers and pass a regex that matches all listeners. That way one could update a field silently. This could be done either via a javascript routine (@essenciary just implemented this in Genie) or we might come up with an internal solution by supplying not payload but silentpayload as a key. We already thought about a syntax that would allow for sending only single array elements. That could be done at the same time...

[essenciary]

Before adding more complexity to the code (and more code to maintain) I would like to actually validate the initial assumption: that separate updates decrease performance. Are there any metrics to back that?

Without conclusive metrics I'm not sure that's the case (although it's possible). But the size of the data payload it's the same for both approaches and I expect that an equal amount of UI re-paints will occur as updates are propagated on the front. So I would like some info backing that assumption, showing off a clear performance benefit.

[hhaensel]

Good point, I'll try to checkt it

[essenciary]

The direct comparison with Plotly.js is not accurate as that is a one tier implementation, while ours is 3-tiered: Julia, Vue, and Plotly. There is state in Julia, state in Vue, and state in Plotly. And these changes are propagated across the 3 tiers. For example, how will the updates be performed by Vue as the tier between Julia and Plotly?

[hhaensel]

I'd compare the two update methods. One updating layout and data sequentially with listeners and one updating data data without listeners and data with listeners as this is my peoposed work around. But I would first do it manually at the browser console...

[essenciary]

What about having a method which takes a new type of object which has fields for both data and layout?

[hhaensel]

That would be pretty much like the Plot struct in PlotlyBase ... But with the current setup we would always send both data and layout over the wire