Introducing `Plotly.update` #875

etpinard · 2016-08-22T21:04:21Z

resolves #671

This PR adds a top-level API method: Plotly.update. In brief, Plotly.update combines trace and layout update logic from Plotly.restyle and Plotly.relayout respectively so that user can update both a graphs's trace and layout objects at the same time.

The API is the following:

/**
 * update: update trace and layout attributes of an existing plot
 *
 * @param {string id or DOM element} gd
 *  the id or DOM element of the graph container div
 * @param {object} traceUpdate
 *  attribute object `{astr1: val1, astr2: val2 ...}`
 *  corresponding to updates in the plot's traces
 * @param {object} layoutUpdate
 *  attribute object `{astr1: val1, astr2: val2 ...}`
 *  corresponding to updates in the plot's layout
 * @param {number or array} traces (optional)
 *  integer or array of integers for the traces to alter (all if omitted)
 *
 */

where:

Plotly.update(gd, traceUpdate, {}) is the same as Plotly.restyle(gd, traceUptate) and
Plotly.update(gd, {}, layoutUpdate) is the same as Plotly.relayout(gd, layoutUpdate)

- this move will allow us to test (with jasmine spies) that the proper subroutines are called.

- split flag-finding logic with plot-routine sequence building

- in a similar way to Plotly.restyle

- reuse flag-finding methods called in restyle & relayout - combine flags into subroutine sequences

- testing that the correct subroutines are called.

etpinard · 2016-08-22T21:07:21Z

I had to move around a lot of restyle / relayout code in order to keep things DRY while adding Plotly.update.

@chriddyp / @VeraZab or anyone in @plotly/frontend

Would someone mind pulling down this branch and test that it doesn't break anything in the plot.ly workspace?

Thanks in advance.

etpinard · 2016-08-22T21:17:08Z

src/plot_api/subroutines.js

+var ModeBar = require('../components/modebar');
+
+
+exports.layoutStyles = function(gd) {


Attaching plot/update subroutines to a separate modules allows us to easily test whether the correct subroutine is called on update using jasmine spies. See 26c4075 for example.

VeraZab · 2016-08-23T13:03:11Z

Nice!
Well, looks like everything's working, at least from what I've played around with..

cc @chriddyp
I've followed this: https://github.com/plotly/dev-docs/blob/master/advanced/plotly.js.md#developing-plotlyjs-in-streambed

so, just fyi, or correct me if I'm wrong somewhere in here as I'm doing more and more of this and want to make sure I'm doing it right:

I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js
Did:
~/plotly/streambed (master)* npm link plotly.js,
saw that the output of this was:
/Users/verazabeida/plotly/streambed/node_modules/plotly.js -> **/Users/verazabeida/n/lib/node_modules/plotly.js**,
so that's how I knew which patch to use in the next step, hope the order didn't matter..
Cd'd into Etienne's branch and did npm link:
~/plotly/plotly.js (update-method)* npm link /Users/verazabeida/n/lib/node_modules/plotly.js -> /Users/verazabeida/plotly/plotly.js
Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh
then in streambed ran my build script as usual
everything seems to have worked as when I ran this
~/plotly/streambed (master)* ls -l node_modules | grep ^l,
I got: lrwxr-xr-x 1 verazabeida staff 37 23 Aug 08:20 plotly.js -> ../../../n/lib/node_modules/plotly.js
Then, when I was done:
~/plotly/streambed (master)* npm unlink plotly.js
and to recover my normal state: ~/plotly/streambed/shelly/filewell (master)* npm install

mdtusz · 2016-08-23T15:32:28Z

src/plot_api/plot_api.js

+ * Can be called two ways.
+ *
+ * Signature 1:
+ * @param {string id or DOM element} gd


🐄 | instead of or for jsdoc (although we don't generate them so it's kinda moot...)

done in e8dbf55

mdtusz · 2016-08-23T16:39:06Z

Looks good! It would be awesome if we could have a more programatic/automated test suite to ensure that things are all "caught" and get their respective updates using this method, but it can be done down the road. This will make things so much easier 😸

💃

VeraZab · 2016-08-29T14:24:11Z

mapbox plots are broken on this branch

etpinard · 2016-09-01T15:56:49Z

mapbox plots are broken on this branch

@VeraZab any console errors? Mapbox traces are working fine in the plotly.js test dashboard.

theengineear · 2016-09-01T20:09:01Z

^^ @VeraZab I made some changes to how mapbox info is updated. Can you ssh into yr vagrant box and ensure that:

echo $PLOTLY_MAPBOX_DEFAULT_ACCESS_TOKEN

isn't empty?

VeraZab · 2016-09-04T16:32:45Z

ah @etpinard was still not linking properly. All good now. All works ! 💃 :)
and thanks @theengineear , everything was good with the accesstoken

- use it in Plotly.restyle and Plotly.animate - call trace indices argument 'traces' consistently in restyle, update, and transition (to be consistent with the frame attribute 'traces').

etpinard · 2016-09-06T22:14:16Z

@rreusser commits 3db6d21 and c15a617 DRYed the trace indices input argument logic used in Plotly.restyle, Plotly.update and Plotly.animate (as of #802), I hope you like it.

rreusser · 2016-09-06T22:26:57Z

Awesome. Love it. Can make use of it, I think...

theengineear · 2016-09-07T16:56:36Z

🎉!

etpinard added 9 commits August 22, 2016 16:53

plot api: move common routine to helpers.js

17e7e79

plot api: add proper jsDoc to restyle and relayout

b2a072a

plot api: move plot/update sub-routine to subroutines.js

3024b71

- this move will allow us to test (with jasmine spies) that the proper subroutines are called.

plot api: rm unused 'dolayout' flag in restyle

ce51b21

plot api: refactor Plotly.restyle

497203d

- split flag-finding logic with plot-routine sequence building

plot api: rm unused annotation ref -> xref/yref translate step

e1a989f

plot api: refactor Plotly.relayout

822cf8c

- in a similar way to Plotly.restyle

add Plotly.update method:

7752eb4

- reuse flag-finding methods called in restyle & relayout - combine flags into subroutine sequences

test: add test for Plotly.update

26c4075

- testing that the correct subroutines are called.

etpinard added feature something new status: reviewable labels Aug 22, 2016

etpinard added this to the v1.17.0 milestone Aug 22, 2016

etpinard reviewed Aug 22, 2016
View reviewed changes

mdtusz reviewed Aug 23, 2016
View reviewed changes

etpinard added 5 commits September 6, 2016 16:21

Merge branch 'master' into update-method

c3327aa

merge followup: use helpers.getGraphDiv in animate/frame methods

01967d8

improve jsDoc for restyle/relayout/update

e8dbf55

dry: pull trace indices input -> list logic in helpers

3db6d21

- use it in Plotly.restyle and Plotly.animate - call trace indices argument 'traces' consistently in restyle, update, and transition (to be consistent with the frame attribute 'traces').

test: adapt transition test to more strict 'traces' API

c15a617

etpinard merged commit 7916bb3 into master Sep 7, 2016

etpinard deleted the update-method branch September 7, 2016 13:42

rreusser mentioned this pull request Sep 13, 2016

Stop performing a full redraw on every update benjeffery/react-plotlyjs#6

Open

etpinard mentioned this pull request Sep 15, 2016

Invisible traces in 1.17.0+ when using Plotly.redraw #942

Closed

etpinard mentioned this pull request Sep 22, 2016

Plotly.update in update menus #972

Merged

cldougl mentioned this pull request Sep 22, 2016

add Plotly.update doc plotly/documentation#539

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introducing `Plotly.update` #875

Introducing `Plotly.update` #875

etpinard commented Aug 22, 2016 •

edited

Loading

etpinard commented Aug 22, 2016

etpinard Aug 22, 2016

VeraZab commented Aug 23, 2016

mdtusz Aug 23, 2016

etpinard Sep 6, 2016

mdtusz commented Aug 23, 2016

VeraZab commented Aug 29, 2016

etpinard commented Sep 1, 2016

theengineear commented Sep 1, 2016

VeraZab commented Sep 4, 2016

etpinard commented Sep 6, 2016

rreusser commented Sep 6, 2016

theengineear commented Sep 7, 2016

		var ModeBar = require('../components/modebar');


		exports.layoutStyles = function(gd) {

Introducing Plotly.update #875

Introducing Plotly.update #875

Conversation

etpinard commented Aug 22, 2016 • edited Loading

etpinard commented Aug 22, 2016

etpinard Aug 22, 2016

Choose a reason for hiding this comment

VeraZab commented Aug 23, 2016

mdtusz Aug 23, 2016

Choose a reason for hiding this comment

etpinard Sep 6, 2016

Choose a reason for hiding this comment

mdtusz commented Aug 23, 2016

VeraZab commented Aug 29, 2016

etpinard commented Sep 1, 2016

theengineear commented Sep 1, 2016

VeraZab commented Sep 4, 2016

etpinard commented Sep 6, 2016

rreusser commented Sep 6, 2016

theengineear commented Sep 7, 2016

Introducing `Plotly.update` #875

Introducing `Plotly.update` #875

etpinard commented Aug 22, 2016 •

edited

Loading