Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Introducing `Plotly.update` by etpinard · Pull Request #875 · plotly/plotly.js · GitHub
Skip to content

Introducing Plotly.update - #875

Merged
etpinard merged 14 commits into
masterfrom
update-method
Sep 7, 2016
Merged

Introducing Plotly.update#875
etpinard merged 14 commits into
masterfrom
update-method

Conversation

@etpinard

@etpinardetpinard commented Aug 22, 2016

Copy link
Copy Markdown
Contributor

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.
@etpinardetpinard added this to the v1.17.0 milestone Aug 22, 2016
@etpinard

Copy link
Copy Markdown
ContributorAuthor

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.

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


exports.layoutStyles = function(gd) {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown

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

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:

  1. I've cloned and pulled the latests from the plotly.js repo, which for me is saved in this directory: ~/plotly/plotly.js

  2. 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..

  3. 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

  4. Did: ~/plotly/streambed/shelly/plotlyjs/bin (master)* ./watch.sh

  5. then in streambed ran my build script as usual

  6. 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

  7. 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

Comment threadsrc/plot_api/plot_api.js Outdated
* Can be called two ways.
*
* Signature 1:
* @param {string id or DOM element} gd

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done in e8dbf55

@mdtusz

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown

mapbox plots are broken on this branch
test3

@etpinard

Copy link
Copy Markdown
ContributorAuthor

mapbox plots are broken on this branch

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

@theengineear

Copy link
Copy Markdown
Contributor

^^ @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

Copy link
Copy Markdown

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

@etpinard

Copy link
Copy Markdown
ContributorAuthor

@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

Copy link
Copy Markdown
Contributor

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

@etpinard
etpinard merged commit 7916bb3 into masterSep 7, 2016
@etpinard
etpinard deleted the update-method branch September 7, 2016 13:42
@theengineear

Copy link
Copy Markdown
Contributor

🎉!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

featuresomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Should we add a Plotly.update method?

5 participants

@etpinard@VeraZab@mdtusz@theengineear@rreusser