eclipse-cdt-cloud / timeline-chart Goto Github PK

Currently labels are aligned to center of the states.

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.

When the timeline chart contains less rows than the maximum number of visible rows, and therefore there is no visible vertical scroll bar, then using the mouse wheel to scroll up or down moves the rows from the top to the bottom of the chart.

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

• mouse interactions to be the same on the axis and on the chart
• scroll left/right on the chart to scroll left / right
• zoom to be possible within the chart (not just on the axis part. This is currently pretty hidden)

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

• pixijs/pixijs#621
• https://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

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.

When the viewRange is changed the states aren't rendered. (you have to do it really fast to observe the issue)

In the below screen cast, the state doesn't appear if I move the scrollbar. But once I zoom in/out(or do some action that performs UI refresh), the states appear.

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.

User should be able to click on a row to select it.

I'd like to be able to quickly navigate to a certain point in time by clicking on the horizontal scrollbar.

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.

1. Using the navigator it's impossible to reach the edges of the range
2. At high zoom levels, moving the navigator beyond the right edge will make it partially disappear

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

• mouse wheel: go up and down the timeline
• ctrl + mouse wheel: zoom in and out

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.

After a row and state is selected in timegraph chart, zooming in deselects them. I believe they should be retained.

Row deselected:

Actual State deselected:

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.

The right side vertical scrollbar misbehaves. It fails to recalculate the correct y-axis position using the vertical offset.
The gif attached illustrates the incorrect behavior.

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.