eclipse-cdt-cloud / timeline-chart Goto Github PK
View Code? Open in Web Editor NEWA timeline / gantt chart library for large data (e.g. traces)
License: MIT License
A timeline / gantt chart library for large data (e.g. traces)
License: MIT License
In TimeGraphChart:maybeFetchNewData() method, a new request is discarded if it the current data model already corresponds to the new request.
But if a previous request for the same view range is ongoing and awaiting response, the new request will be allowed to proceed, causing two concurrent requests for the same data model.
Furthermore, since requests are asynchronous, there is no guarantee on the order of reception of their responses, and if the older requests comes back last, it will overwrite the data model from the latest request with an obsolete data model.
A request for the same view range as an ongoing request should be ignored, and a response for a model that is not for the latest request should be discarded.
I think after #163, it doesn't call createNewState function in timeline-chart because the mock states doesn't have style property.
If the unit controller already has a selection range, it is not drawn when the component is created. It is only drawn once the selection range is changed after creation.
The number translator should be aware of the step length so that it can dynamically adjust the format of the labels it provides.
For example if the step length is 0.1s it might not be necessary to format the labels up to the nanosecond.
When trying to navigate between states at high zoom levels, using the left & right arrow keys, the selection doesn't skip correctly:
In the timeline-chart example app, the selection skips between the beginning and end of the absolute range.
In the theia-trace-extension example app, it seems the selection skips to the next state and then it's only possible to skip between the start and end of that state, until zooming out a little. Notice also the disappearance of states when zooming in (related to #62?).
Currently, when you zoom, you always get a 10 based unit scale, which means when you zoom the number of labels jumps from ~1 to ~10. Would be nice if we had something in between, i.e.
1,2,3,4,5,...10
5,10,15,20,...50
10,20,30,40,...100
50
Right now there is no documentation of the timeline-chart library available. This will help current and new adopters of the library to understand the features of the library.
Especially with regard to touch pads. I'd expect
We should have equally intuitive interactions as the profiler of the Chrome Devtools.
The flag "this.fetching" can be set to true and won't be reset if an exception created in between (see lines below in time-graph-chart.ts).
BR
Bernd
`this.fetching = true;
const rowData = await this.providers.dataProvider(viewRange, resolution);
if (rowData) {
this.providedResolution = rowData.resolution;
this.providedRange = rowData.range;
this.setRowModel(rowData.rows);
this.removeChildren();
this.addRows(this.rows, this.rowController.rowHeight);
}
this.fetching = false;`
The debounced maybeFetchNewData method is added as a viewRangeChangedHandler to the unit controller, but it is not removed when the time graph chart is destroyed. This causes the time graph chart instance to leak.
It is perfectly legitimate to have a style that advertises a height of 0 (like for minimum frequency of CPUs), but those states are displayed with some average height, not 0. The state should be of height 0, but any label associated with it should still be visible.
Users should be able to scroll the timegraph chart using horizontal scroll event.
Even without any interaction, the Chrome profiler shows more than 50% load on the GPU.
Can we improve on that?
On my display the graph looks blurry.
See
Allow exemplars/regions of interest to be shown in the timeline chart.
Examples could be a system crash/core dump or simply an event that may be a trigger to show a change in state. (See instant events in the event-trace format)
The moveEnd method is added as a snap-x-end handler to the document, but it is not removed when the time graph chart navigator handle is destroyed. This causes the time graph navigator handle instance to leak.
Observed behavior
1- Select an entry at the top of the view
2- Scroll down the timeline
3- Click on the up/down arrow, expecting to navigate up and down
--> nothing happens, until the selected entry appears on screen when down is clicked often enough.
Expected behavior
When hitting up/down, it selects the next entry from the one that is selected and the entry should be revealed, so it should bring back the view to the selected entry.
For more closer to reality test case the resources in examples folder shall be used for example graph.
The time graph gridlines and axis ticks are on rounded multiples of the step length away from the start time of the view range.
But the absolute time of the gridline will not be on a rounded number because the time graph does not seem to be aware of the time offset of its view range, which is only known by the (external) implementation of the numberTranslator.
The time offset should be available and used by the time graph so that it can set the gridlines and axis ticks on rounded boundaries.
In a typical application, scrolling down with mouse wheel with one full finger strike makes the page scroll down around 1/3 of the page, so that after 3 strikes, the page is completely new. In the timeline-chart, a full finger strike scrolls down barely a line. So it takes a lot of finger work to scroll down a full page!
Appears to map to time-graph-chart.ts:190 : maybeFetchNewData()
Uncaught (in promise) TypeError: Cannot read property 'viewRangeLength' of undefined
at TimeGraphChart. (:3000/45.bundle.js:1789)
at step (:3000/45.bundle.js:1639)
at Object.next (:3000/45.bundle.js:1620)
at :3000/45.bundle.js:1614
at new Promise ()
at push.../../timeline-chart/timeline-chart/lib/layer/time-graph-chart.js.__awaiter (:3000/45.bundle.js:1610)
at TimeGraphChart.push.../../timeline-chart/timeline-chart/lib/layer/time-graph-chart.js.TimeGraphChart.maybeFetchNewData (:3000/45.bundle.js:1784)
at TimeGraphChart.push.../../timeline-chart/timeline-chart/lib/layer/time-graph-chart.js.TimeGraphChart.updateChart (:3000/45.bundle.js:1778)
at TimegraphOutputComponent.componentDidUpdate (:3000/45.bundle.js:4503)
Thanks @tahini and @ankusht-work for reporting this.
When published last with lerna 2.11, the version generated was: 0.2.0-next.b47344e0
With lerna 3.22.1 it created 0.1.1-next.0
see https://www.npmjs.com/package/timeline-chart
There seems to be issues with the newer lerna version:
lerna/lerna#2778
lerna/lerna#2780
Right now when the annotation symbol style is not known then the annotation symbol is not drawn. There should be a default symbol drawn in for unknown styles (e.g. plus).
Handlers that are added to the unit controller with onViewRangeChange() and onSelectionRangeChanged() can never be removed.
So if the component that added a handler is unmounted, its handler will continue to be called.
TimeGraphContainer's reInitCanvasSize provides an API to resize the chart for width changes. We need an API to resize timeline-chart on height changes.
Triangle and inverted-triangle is not part of the supported symbol styles and should be supported.
The minimum step length hard-coded to 80 is not enough to ensure that labels fit in the step width.
The calculation should consider the expected width of the label text.
Handlers that are added to the canvas in TimeGraphChart with onCanvasEvent().
So if the component that added a handler is unmounted, its handler will continue to be called.
When resizing the TimeGraphContainer using method reInitCanvasSize(newWidth, newHeight), all the layers are updated but not the background layer. This leads to incorrect visualizations of the data in the new added screen area.
See eclipse-cdt-cloud/theia-trace-extension#209 (comment) for more details on it.
The timeline-chart package on the NPM package registry doesn't have a README.md to give users some more details about the library. This issue is to track the addition of a README.md file to be published on NPM.
Atm the underlying component model is recreated on every vie change. Which causes a lot of objects being created and garbage collected.
We should instead use the viewport and scaling information on an existing component model.
Separated from that the component model should only be recreated if a new data model is available.
Steps to reproduce: Expand the state's width to the max so that the entire text is visible and then slowly reduce the width of the state's label by scrolling left or right. The text will start to overflow.
Expected behavior
Observed behavior
Hitting ctrl changes the behavior, so that mouse wheel after a ctrl keypress zooms in and out, whether or not the ctrl is pressed. Hitting another key (even ctrl itself sometimes) goes back to ctrl-less behavior (up and down)
It would be good to improve the timeline chart's annotation performance by making one annotation for every type and re-using it by adding it as a child to the parent node (row element). This will save on drawing and memory constraints.
It is not yet an obvious performance issue, so it should be addressed when it is one though.
Closing a time graph chart that has a very large number of components (states, annotations, arrows) can take a very long time, > 20 seconds when there are > 120k elements. This is because the time graph layer destroys each of its children one by one.
It should be checked if the whole layer can be destroyed in a single operation.
In TimeGraphChart's view range change handler, new time graph data should sometimes be fetched for the new view range. But if data is already being fetched, the throttling mechanism will just omit the fetching of new data.
Therefore when changing the view range rapidly, for example when zooming with mouse wheel or panning with the mouse, only the first view range change will fetch data, and the subsequent and last view range will not. The end result is time graph data that does not match the latest view range.
Either the data should be fetched for the latest upon completion of the current fetching, or a debouncing function could be used to wait until view range has finished updating to fetch the data for the latest stable view range.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.