[WIP] Frame + Animate API - #717

Closed
rreusser wants to merge 94 commits into
masterfrom
animate-api-take-3
Closed

[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom
animate-api-take-3

Conversation

@rreusser

@rreusserrreusser commented Jul 5, 2016•
edited
Loading

Copy link
Copy Markdown
Contributor

New PR since switching to plotly's GH repo. I think this one is the real deal, at last.

Tasks

  • merge master (last merged: July 5)
  • SVG element persistence
  • frame API
  • Plotly.transition
    • flag animatable/unanimatable properties (in schema?)
    • axis transitions
    • data transitions
    • restyle/relayout for props that don't fit
    • resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    • interrupts
  • Plotly.animate

Known Issues

  • simultaneous data transition + layout transition = transform problems
  • error bars not removed/transformed correctly when multiple simultaneous transitions
  • extract non-transitionable properties and restyle separately
  • expand redrawn scatter traces to the full set of interdependent traces
  • tweak fill close order to avoid wraparound ugliness when path point count changes
  • option to disable line simplification
  • flag to preserve autoscale mode?
  • built-in layout.slider control
  • ensure no transitions if duration = 0
  • scrollzoom seems disabled after transition

@rreusser
rreusserforce-pushed the animate-api-take-3 branch from 9e6e733 to f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard reviewed Jul 5, 2016
View reviewed changes
Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;

@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.

@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame

@rreusser
rreusserforce-pushed the animate-api-take-3 branch from edaf8fe to 28be237CompareJuly 5, 2016 20:07
etpinard
etpinard reviewed Jul 5, 2016
View reviewed changes
Comment threadsrc/plot_api/plot_api.js
* - name: {string} name of keyframe to add
* - data: {array of objects} trace data
* - layout {object} layout definition
* - traces {array} trace indices

@etpinardetpinardJul 5, 2016•
edited
Loading

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.

What about the transition options? For example, the delay and easing function?

Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?

@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.

I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:

varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};

and per-frame transition options would then be set as:

varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};

@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.

rreusser
rreusser reviewed Jul 5, 2016
View reviewed changes
Comment threadsrc/plot_api/plot_api.js
var _frames = gd._frameData._frames;
var ops = [];
var revops = [];

@rreusserrreusserJul 5, 2016•
edited
Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.

@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.

@rreusser
rreusserforce-pushed the animate-api-take-3 branch from 3e5f4af to bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed the animate-api-take-3 branch from bfa1c07 to 3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed the animate-api-take-3 branch from 5d1eb2d to 01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard reviewed Jul 6, 2016
View reviewed changes
Comment threadtest/jasmine/tests/extend_test.js

expect(ext.foo.bar).toBe(src.foo.bar);
expect(ext.foo.baz).toBe(src.foo.baz);
expect(ext.foo.bop).toBe(tar.foo.bop);

@etpinardetpinardJul 6, 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.

fantastic 🎉

@rreusser
rreusserforce-pushed the animate-api-take-3 branch from 1203f10 to 42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard reviewed Jul 6, 2016
View reviewed changes
Comment threadtest/jasmine/tests/compute_frame_test.js
});
});

describe('circularly defined frames', function() {

@etpinardetpinardJul 6, 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.

@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser mentioned this pull request Aug 1, 2016
Merged
14 tasks
@rreusserrreusser closed this Aug 5, 2016
@rreusser
rreusser deleted the animate-api-take-3 branch August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

featuresomething new

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n 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;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

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

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

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

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf

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

Skip to content
[WIP] Frame + Animate API - #717
Closed
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Closed
[WIP] Frame + Animate API#717
rreusser wants to merge 94 commits into
masterfrom 
animate-api-take-3
Conversation
@rreusser
@rreusserrreusser
commented
Jul 5, 2016•

edited

Loading

Copy link


Copy Markdown

Contributor
New PR since switching to plotly's GH repo. I think this one is the real deal, at last.
Tasks
  •  merge master (last merged: July 5)
  •  SVG element persistence
  •  frame API

  • Plotly.transition
    •  flag animatable/unanimatable properties (in schema?)
    •  axis transitions
    •  data transitions
    •  restyle/relayout for props that don't fit
    •  resolve issue with transforms vs. redrawing svg elements (the point-scaling ugliness)
    •  interrupts
  • Plotly.animate
Known Issues
  •  simultaneous data transition + layout transition = transform problems
  •  error bars not removed/transformed correctly when multiple simultaneous transitions
  •  extract non-transitionable properties and restyle separately
  •  expand redrawn scatter traces to the full set of interdependent traces
  •  tweak fill close order to avoid wraparound ugliness when path point count changes
  •  option to disable line simplification
  •  flag to preserve autoscale mode?
  •  built-in layout.slider control
  •  ensure no transitions if duration = 0
  •  scrollzoom seems disabled after transition
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
9e6e733 to
f50c295CompareJuly 5, 2016 19:54
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/core.js
exports.deleteFrames = Plotly.deleteFrames;
exports.renameFrame = Plotly.renameFrame;
exports.transition = Plotly.transition;
exports.animate = Plotly.animate;
@etpinardetpinardJul 5, 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.

@rreusser oops ... two Plotly.animate got in.
@rreusserrreusserJul 5, 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.

Fixed & removed renameFrame
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
edaf8fe to
28be237CompareJuly 5, 2016 20:07
etpinard
etpinard
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 * - name: {string} name of keyframe to add
 * - data: {array of objects} trace data
 * - layout {object} layout definition
 * - traces {array} trace indices
@etpinardetpinardJul 5, 2016•

edited

Loading

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.

What about the transition options? For example, the delay and easing function?
Should they be per frame (i.e. specified inside each frame object) or per animation (i.e. pass onto Plotly.animate)?
@etpinardetpinardJul 5, 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.

To my 👀 , I think the later makes the most sense.
I like to think of frames as diffs for data and layout. How to transition between these diffs should be a property of the widget (e.g. slider, dropdown menus). For example, given a set of frames a, b, c, then:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: 100,duration: 1000,easing: 'cubic'}}};
and per-frame transition options would then be set as:
varlayout={slider: {frames: ['a','b','c'],transition: {delay: [100,200,300],duration: [1000,2000,3000],easing: ['cubic','linear','sin']}}};
@rreusserrreusserJul 5, 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.

Works for me, and even if it's some weird unforeseen corner case like d3 zoom transitions, it'd still be defined in the proper place this way.
rreusser
rreusser
reviewed
Jul 5, 2016
 View reviewed changes

Comment threadsrc/plot_api/plot_api.js
 var _frames = gd._frameData._frames;
 var ops = [];
 var revops = [];

@rreusserrreusserJul 5, 2016•

edited

Loading

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.

note to self: *slice. by a stupid coincidence this works, but it destroys the input which was the only reason for this line in the first place.
@rreusserrreusserJul 5, 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.

additional note to self: stop reviewing own PR.
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
3e5f4af to
bfa1c07CompareJuly 6, 2016 16:04
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
bfa1c07 to
3e18a98CompareJuly 6, 2016 16:06
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
5d1eb2d to
01b9287CompareJuly 6, 2016 18:39
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/extend_test.js

 expect(ext.foo.bar).toBe(src.foo.bar);
 expect(ext.foo.baz).toBe(src.foo.baz);
 expect(ext.foo.bop).toBe(tar.foo.bop);
@etpinardetpinardJul 6, 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.

fantastic 🎉
@rreusser
rreusserforce-pushed
the
animate-api-take-3
branch
from
1203f10 to
42467ecCompareJuly 6, 2016 20:59
etpinard
etpinard
reviewed
Jul 6, 2016
 View reviewed changes

Comment threadtest/jasmine/tests/compute_frame_test.js
 });
 });

 describe('circularly defined frames', function() {
@etpinardetpinardJul 6, 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.
@rreusser
Start adding back transition behavior
ea7c037
@rreusser
Fix animation tests; lint
9773720
@rreusser
Animation cleanup
17529ab
@rreusser
Avoid transitioning axes if no change
9955625
@rreusser
Transfer animation code over to new PR
93eeaa8
@rreusser
Fix bad json
9643811
@rreusser
Fix scatter line issue
7e2e2d8
@rreusser
Expand the trace update to all interdependent traces#717
2cecc66
@rreusser
Fix lint issues
fd5a3bc
@rreusser
Reorder path fill drawing
13053a3
@rreusser
Add config to disable line simplification
15b47f6
@rreusser
Error bar styling tweaks
e887faa
@rreusser
Cut losses; make error bars basically work
f2ffa2a
@rreusser
Add 'in' to filter transform
2b0c537
@rreusser
Clean up scatter trace lines
fb87b42
Conflicts:
src/traces/scatter/plot.js
@rreusser
Fix lint errors
8cf4395
@rreusser
Fix frame API tests and set queueLength as needed
99ee7d9
@rreusser
Add missing scattergeo attribute
bcd2fbf
@rreusser
Add missing scatterternay attribute
7319c83
@rreusser
Remove animation mock
248736e
@rreusser
Catch degenerate trace-fill-linking case
6afc339
@rreusser
Clean up scatter trace line enter/exit
6e426e7
@rreusser
Add dummy line attrs to scattergl/scatter3d
0180730
@rreusser
Merge branch 'animate-api-take-3' of github.com:plotly/plotly.js into…
1166ac7
… animate-api-take-3
Conflicts:
src/components/errorbars/plot.js
src/core.js
src/traces/scatter/plot.js
@rreusser
Restore missing function
3ee4bf5
@rreusser
Fix lint issues
085203d
@rreusser
Fix lint error for the last time
266f21a
@rreusserrreusser
mentioned this pull request
Aug 1, 2016
 Merged

14 tasks
@rreusserrreusser
closed this
Aug 5, 2016
@rreusser
rreusser
deleted the

animate-api-take-3

branch
August 11, 2016 19:17
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers


No reviews


Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@rreusser@etpinard@timelyportfolio@nielsenb-jf