Skip to content

Layout animations for container array'd objects - #1081

Merged
rreusser merged 10 commits into
masterfrom
annotation-animation
Oct 25, 2016
Merged

Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom
annotation-animation

Conversation

@rreusser

@rreusserrreusser commented Oct 25, 2016•
edited
Loading

Copy link
Copy Markdown
Contributor

This PR does two things:

  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.

Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.

annotation-animation

@rreusserrreusser changed the title Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser

rreusser commented Oct 25, 2016

Copy link
Copy Markdown
ContributorAuthor

Added test. Sorry for the messy git history. The linter strikes again.

@etpinardetpinard added this to the v1.19.0 milestone Oct 25, 2016
etpinard
etpinard reviewed Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

if(frameOpts.redraw) {
gd._transitionData._interruptCallbacks.push(function () {
return Plotly.redraw(gd);

@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw

etpinard
etpinard reviewed Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

}).catch(fail).then(done);

});

@etpinardetpinardOct 25, 2016

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.

Thanks!

etpinard
etpinard reviewed Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
}

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);

@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?

@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.

@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case

https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68

to transition all layout array containers.

@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.

@rreusser

rreusser commented Oct 25, 2016

Copy link
Copy Markdown
ContributorAuthor

@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...

cat

@rreusser

rreusser commented Oct 25, 2016

Copy link
Copy Markdown
ContributorAuthor

@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.

@etpinard

etpinard commented Oct 25, 2016

Copy link
Copy Markdown
Contributor

amazing 💃

@rreusser
rreusser merged commit 000a409 into masterOct 25, 2016
@rreusser
rreusser deleted the annotation-animation branch October 25, 2016 22:15
@etpinardetpinard mentioned this pull request Oct 25, 2016
Closed
@etpinard

etpinard commented Nov 3, 2016

Copy link
Copy Markdown
Contributor

@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
Merged
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

bugsomething broken

Projects

None yet

Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard
, '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" + '
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard

, '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('^' + ".*" + '
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard

, '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('^' + ".*" + '
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard

, '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" + '
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard

, '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('^' + ".*" + '
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard

, '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); }
})();
})();
Layout animations for container array'd objects by rreusser · Pull Request #1081 · plotly/plotly.js · GitHub
Skip to content
Layout animations for container array'd objects - #1081
Merged
rreusser merged 10 commits into
masterfrom 
annotation-animation
Oct 25, 2016
Merged
Layout animations for container array'd objects#1081
rreusser merged 10 commits into
masterfrom 
annotation-animation
Conversation
@rreusser
@rreusserrreusser
commented
Oct 25, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
This PR does two things:
  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.
Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.
annotation-animation
@rreusserrreusser
changed the title
Annotation animationLayout animations for container array'd objectsOct 25, 2016
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
Added test. Sorry for the messy git history. The linter strikes again.
@etpinardetpinard
added this to the v1.19.0 milestone
Oct 25, 2016
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js

 if(frameOpts.redraw) {
 gd._transitionData._interruptCallbacks.push(function () {
 return Plotly.redraw(gd);
@etpinardetpinardOct 25, 2016

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.

nice use of Plotly.redraw
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadtest/jasmine/tests/transition_test.js

 }).catch(fail).then(done);

 });
@etpinardetpinardOct 25, 2016

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.

Thanks!
etpinard
etpinard
reviewed
Oct 25, 2016
View reviewed changes
Comment threadsrc/plots/plots.js
 }

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
@etpinardetpinardOct 25, 2016

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.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?
@rreusserrreusserOct 25, 2016

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.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.
@etpinardetpinardOct 25, 2016

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.

Great. Let's 🔒 this down by expanding test case
https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68
to transition all layout array containers.
@rreusserrreusserOct 25, 2016

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.

Lunch, then adding it.
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...
cat
@rreusser
rreusser
commented
Oct 25, 2016

Copy link


Copy Markdown

ContributorAuthor
@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.
@etpinard
etpinard
commented
Oct 25, 2016

Copy link


Copy Markdown

Contributor
amazing 💃
@rreusser
rreusser
merged commit 000a409
into
masterOct 25, 2016
@rreusser
rreusser
deleted the

annotation-animation

branch
October 25, 2016 22:15
@etpinardetpinard
mentioned this pull request
Oct 25, 2016

Closed

@etpinard
etpinard
commented
Nov 3, 2016

Copy link


Copy Markdown

Contributor
@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

This was referenced Nov 3, 2016
 Merged

 Merged

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

Reviewers


1 more reviewer

@etpinardetpinardetpinard left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

bugsomething broken

Projects


None yet


Milestone

v1.19.0

Development

Successfully merging this pull request may close these issues.

2 participants

@rreusser@etpinard