Comments (18)
If you check the picture that I posted above, the diagonal lines are what we achieved with intervals.
Function nodes can have an interval entry which contains start and stop of an interval (which represents the time where function was just waiting for some async stuff)
from flame-chart-js.
It seems to be preferable to use the waterfall plugin for this situation - move your requests data to the waterfall section on initialization and all will be fine.)
The flame chart (as a concept, not this project) does not allow situations where you can have two nodes overlap in duration.
from flame-chart-js.
It's still the best visualization for the idea of a trace however. the difference being the concept of async function calls. real world data HAS async function calls so ensuring this can support those visualizations cleanly is ideal. Even modern javascript has the concept of async calls now.
from flame-chart-js.
those async functions are awaited time, maybe that time could be colored with some diagonal lines to represent them as async
from flame-chart-js.
In the javascript world, all asynchronous operations are still executed sequentially (because we have the event loop) and there can be no overlap. The exception occurs only if there are multiple threads. And in this case, you need to build several flame charts and this can be done using the plugin system.
Specifically, requests are displayed separately from code execution.
from flame-chart-js.
This is how we visualised our async functions.
The part with diagonal lines was a passive (async time) and other part with flat color is an active function time.
from flame-chart-js.
so... while we have all been discussing this.. this DOES allow you to have overlapping time frames... I'm doing some final testing but I believe I've got all the cases figured out to support it smoothly. My coming PR also simplifies the render to a single render queue that is called sequentially rather than having 3 render queues that are called sequentially. It was the 3 render queues that caused the issue here as the text renders occurred after ALL the rectangle renders. This mean for the canvas. it placed text over everything even though the calls to add to queue happened in a different order. By collapsing the queues to a single one we can render in order with the expectation that last in wins.
Additionally adding in a simple fix to properly grab the hit-region for overlapping spans. It's pretty slick and the changes look to be just as performant.
PR incoming soon.
from flame-chart-js.
Could you provide a code snippet that would cause such a trace with overlapping frames?
from flame-chart-js.
I updated the demo to randomly generate such an example. i.e. during generation of frames it will randomly create a frame that overlaps.
from flame-chart-js.
yes. but that is manually generated data.
Can you provide a javascript code snippet that would produce such a trace when instrumented?
from flame-chart-js.
you can import this data into the demo
from flame-chart-js.
Ok, I think there is a misunderstanding here, so I will put it this way
Can you provide a chrome profile where function calls would overlap?
A real usecase where such trace with overlapped frames would happen in javascript world.
Or is this not about javascript at all?
Because I don't see how this scenario could happen in javascript, since it is not a multithreaded language.
from flame-chart-js.
this is not javascript... these are server traces of things being profiled like a php, ruby, python, dotnet or java application etc... The flame chart visualization works wonderfully for these types of representations and thats what I use if for.
from flame-chart-js.
I think we should find another solution for this case. As I saw in the PR that you opened, the current solution breaks core engine optimizations and looks like it doesn't solve the problems you want to solve. I think it's preferable to use something like logic in waterfall data with intervals and timings in the same node.
Because the case where we have two or more nodes in the same period also breaks the timeframe plugin logic (in the top plugin in the UI you can see broken line on your screenshot) and possibly broken tree cluster logic.
from flame-chart-js.
Is this fix released?
from flame-chart-js.
@fizerkhan No.(
I'll deal with this problem later when I have time.
I closed this issue because the discussion was not a very correct solution and the situation described in the first message is divorced from reality, because spans cannot intersect with each other - this will break the tree structure.
from flame-chart-js.
@pyatyispyatil Thanks for the quick response.
In Telemetry data, more than one span can have the same start time and different duration due to its async nature.
Do you think the flame chart is not designed for Async's spans (or parallel spans)? I am just curious.
If you have a better solution, Please suggest it. We will work on it and give you the PR request.
from flame-chart-js.
I think you need to combine the use of waterfall chart and flame chart. In waterfall you can display multiple independent spans with intersecting timelines, and in turn in the flame chart you can display their “content”
If your asynchrony involves multi-threaded execution of spans, that is, each span can execute its own code, then most likely you need to use several independent flame charts and display data in them depending on the thread. There is a similar thing in the examples.
from flame-chart-js.
Related Issues (20)
- Introduce strict types for flamechart
- Introduce basic unit tests HOT 6
- Introduce intervals for function nodes in the flame chart HOT 1
- Npm install fails because of rollup-plugin-uglify HOT 2
- Using the library in the browser HOT 1
- if timeframe-selector support cpu usage show? HOT 2
- introduction of opinionated autoformating? (prettier) HOT 1
- convert /example/src to typescript HOT 2
- README.md example fails HOT 5
- Custom span rendering? HOT 1
- TypeError: flameChart.setData is not a function HOT 5
- how can i get selectedData in custom render? HOT 1
- TimeGrid plugin use HOT 1
- Onclick into nodes not expanding HOT 1
- how to custom a span (border, gradient color), and tooltip in flame chart? HOT 3
- Bug: Plugin on select doesn't work for index zero on waterfall plugin and possibly other plugins that have handle select HOT 1
- FlameChart render go wrong when the container div width and heigh become 0 HOT 1
- Default Time Range selection HOT 1
- Infinit loop while resize from a height of 0 HOT 1
- tooltip customize
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flame-chart-js.