-
-
Notifications
You must be signed in to change notification settings - Fork 136
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Performance Issues #68
Comments
I'm also testing this with a much larger amount of data that will be typical for the application, and nothing is animating. Edit: I also know that the issue is the timeline chart, because when I removed the component, animation of the evolving graph worked fine(ish, still bad fps). |
I'm not really following how all of this hangs together, to be honest... Can you provide a working example of the code that we can look at, even if it's just generating random data or something? |
Sure, I can work on that. I have a meeting until 7 though, so expect it tomorrow. |
I've discovered that a lot of my issues are just performance issues on my part, so I'm currently refactoring to try and make it work better. I do have one question though. When I render this trace, it shows nothing:
But if i change the type to |
After further testing, this actually is still a problem, I tested using two plots, one with just the working line and the other as the graph evolution and it still had a noticeable performance dip in animating both. I'll try to make a codepen now. |
Here is a minimum example of my app. https://codepen.io/omnitect/pen/MVVgwN Even though the data is pretty simple here, and I'm only calling updates once per animation frame, I'm still only getting on average 20fps on my computer. This gets quite a bit worse (around 7fps) with the amount of data I'm using. Edit: For larger data sets that will be normal, it stops. I'm going to try doing multi-resolution mapping and see if that helps. |
Hmmm OK, I think I understand what you're trying to do here. The short answer is that I think that this is asking a lot of the React and Plotly stacks, to redraw that frequently :) The slice operations alone will cost a lot on large datasets like 1M points (see https://jsperf.com/copy-large-array/1 for example) and the rest of the machinery will likely not be able to reliably redraw everything in the less than 17 milliseconds required for 60fps animation. plotly.js has its own animation system but it's not really API-compatible with this React wrapper at the moment: https://plot.ly/javascript/animations/ |
Gotcha. The animations though were still at around 20fps, even with their simplistic nature. Do you have any ideas on making the minimal example faster? Edit: I'm already making the data objects properties of the components themselves, not in the state, so that I don't have to recreate the data each time, just update that small part. In addition, I'm working on multi-resolution models/maps that will render a lot fewer points. (530,000 to 240 in initial testing!) Update: With multi-resolution models/maps, performance increased from ~1/3 fps to 8 fps. |
At least two issues (this one and #51 ) could benefit from adding support for animations... I would also really like to have this and am willing to help out. Is anyone working on it? Does anyone have any suggestions on how it could be done (or have reasons why it is not possible)? |
I'd be happy to add support for it, I just have no real sense of how it would fit into an idiomatic React API :) |
I am currently working on a visualization tool that has multiple animations going on at the same time. What I am trying to do is look at how a graph evolves over time, so I have the graph I am watching evolve in one pane (using GoldenLayout) and a timline graph in a another pane with an aggregation shown on it. What I am trying to do is display a black line on the timeline graph and animate it while I am animating the change in the main graph, but unfortunately this is resulting in very poor performance (whole screen stops after a while or starts flickering depending on what I've tried and the black line is never show).
My application is using Redux and that is how I start / stop / run animations. In the animation component I use the following interval to animate the graphs:
(I know it's not the best practice to put this here, so if you have any other ideas on where it should go, that would be greatly appreciated.)
From here the data goes to the main graph and updates the entire graph. My data is parsed on a web-worker ahead of time and pre-imported into the component at construction time. Since I wanted web-worker transfer times and data-switching to be quick, I put my data into
Uint32Array
s, since they are transferable over web-workers and switching to a different portion of data is just constructing a data-view on the buffer, which at least as fast asarray.slice()
. There are separate arrays for the x and y axes. Component data is updated when the current time slice being viewed changes (which changes with previous interval). Since my data doesn't have a datapoint for every instant, I have to do a binary search to find the closest point. Then, on another frame interval, the data is updated on the main graph:From here, it is rendered using:
The timeline graph is created much in the same way, but uses a lot more data that is static. It shows the entire aggregation, which is not updated during animation, and attempts to show a vertical line at a point, representing the current time in the animation. However, whenever I enable the line, it slows down a lot and I haven't seen it yet. Here is the code for the important parts of the timeline graph:
I'm also looking for overall ways of improving this sort of animation constantly, since it's my first time doing such large scale animations, so if you have any suggestions, even tangential to this issue, that would be great.
The text was updated successfully, but these errors were encountered: