Initial code #2
Merged
Initial code #2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In commit 613784a3, signal-manager.ts was moved into the src/signals sub-directory, but the old file was not removed. Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
The y-axis is displayed on the left of the chart, not obstructing the data, and with the same background color of the chart. Charts that do not have a y-axis, like the Resources Status chart, have that space occupied by the component that exists on the left, like the list of processes. This way, all charts and the top horizontal rule remain vertically aligned. Also dynamically changes the numbers on the axis, so that 1,000 appears as 1K, 50,000,000 as 50M and so on. Fixes #421. Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
fixes #489 When no trace tabs are open the available views section is empty When all tabs are closed the selection in Opened Traces widget is cleared Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
The tooltip offered by ChartJS can be extensively configured, but it still fails in some edge cases when used in the XY chart. For instance, it is drawn in the canvas that holds the chart, so it is cut off when the mouse approaches its borders. Also, when selecting too many processes, the performance of the app degrades to the point of making the page unusable. This commit implements a custom tooltip that does not have the problem of being cut off at the borders, and performs better under heavy loads. Main characteristics of the tooltip: - It summarizes all processes that have value equal to zero in a single line; - It allows the user to move the mouse into it, to scroll and to select text; - It is aware of the proximity to the borders of the screen, optimizing its position to avoid clipping. Signed-off-by: Ibrahim Fradj <ibrahim.fradj@ericsson.com> Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
Something with the `yarn.lock` prevented the application from building in various environments. Re-generate `yarn.lock`. Signed-off-by: Paul Marechal <paul.marechal@ericsson.com>
fixes #277 'Delete trace' renamed to 'Remove trace' to make it consistent with the remove traces tooltip Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
Pull Request #556 accidentally introduced a dependency to Theia in the react-components package which needs to be independent to Theia so that it can be re-used in other environments. To achieve the removal of the Theia dependency as well as keep the behavior introduced by #556 the following changes have been made: - Rename 'close' trace/experiment methods and signals to use term 'delete' instead. Close in this case actually deletes the trace/experiment from the trace server and the original names were misleading - Introduce EXPERIMENT_CLOSED signal to notify when a experiment tab is actually closed - Listen to EXPERIMENT_CLOSED signal in relevant views to update the views, i.e. clear list of available views or clear experiment selection when no trace viewer tab is open. - rename some method and signal handler names for clarity reasons Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
Replace spans with divs in first column of filter tree. Use inline-block display to create fixed width indentation box containing an optional right-aligned expand/collapse button. Remove unnecessary padding in all buttons. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
fixes #579 Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
Right now the sorting is done using string sorting. If the data in the columns are numbers, then number sorting should be used. Moreover, some known string formatting can be reversed to extract the number and do a number comparison. For example, some data providers provide columns with duration, where the value is formatted to show 'ns' for nanosecond, 'us' micro-second and so on. Other example, are percentages shown. The tree of the CPU usage view when using the Trace Compass trace server is good example for different columns and formatting. Note that this implementation is a temporary solution until the TSP and server back-end is augmented to provide a different mechanism to support sorting. fixes #577 Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
Support easier navigation in timegraph charts by double-clicking a state to zoom into it Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
The implementation is the first iteration. It introduces the component class which uses the tree implementation also used in the time-graph and XY components. The component is not enabled in this patch. The tree implementation need some UI/UX improvement, for example for styling or column resizing which will be done in a separated commit. Once some improvements are available, the data tree component will be shown as part of the available views list for a given trace. Signed-off-by: Bernd Hufmann <Bernd.Hufmann@ericsson.com>
fixes #599 Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
Guide user to select element in tree Fixes #604 The reasoning: * Selecting the first element in a tree will imply that data is more important. That is not necessarily true * Certain analyses cannot return an aggregate that would make sense to "always be on" * Scatter charts are often just random in their order (Alphabetical). Selecting one could hide the fact that more options are available. Selecting everything may look like a swarm of bees. Signed-off-by: Matthew Khouzam <matthew.khouzam@ericsson.com>
Data sets with scattered points, like the "latency vs. time" view, are now plotted in a scatter chart. The type of data set is defined by the string "scatter" in the output id. The scatter chart is to remain not available to the user until the tooltip is implemented. This pull request replaces eclipse-cdt-cloud/theia-trace-extension#399. Contributes towards fixing #45. Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
Since the timegraph-output-component creates two trees that each have their own scrollbar, remove the scroll overflow from the parent output-component-tree. Add scrollable wrapper to the xy-output-component and datatree-output-component trees. Make the timegraph-output-component wrappers scrollable. Set the main-output-component overflow to hidden to prevent the timegraph-output-component markers tree from overflowing when the output area is too small. Remove the tree scroll synchronization from the parent class AbstractTreeOutputComponent and instead add it to the only tree that needs it, the timegraph tree. Fix tree width calculation in AbstractTreeOutputComponent. Fix markers layer height calculation to ignore scrollbar height when the tree is collapsed. Remove filler row from markers tree and chart when the model is empty. Remove arbitrary main area width from abstract-output-component. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
Add resizable property to ColumnHeader model. Add a resize handle to each resizable column header cell. Add listeners to resize columns when the handle is dragged, and reset to preferred column width when the handle is double-clicked. Add filler column to make table-tree extend to full container width. Change the table display, styling, borders, and header color. Make all output component trees use the same base table-tree styling with only timegraph-tree adding some specific styling overrides. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
Add resize observer on first column header to synchronize filter width. Remove text message on empty filter result as this disrupts the observer and prevents synchronization after the non-matching filter is removed. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
This allows it to create gridlines on rounded absolute times. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
While the data tree component is loading data, display an "analysis running" message in the middle of the component. The data tree components are still hidden, as metioned in #598. Contributes to #144. Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
Opening an Events Table and a XY chart like "CPU Usage" and clicking on a row in the table was supposed to show a vertical line in the XY chart, but this was not happening. Selecting several rows in the table also was supposed to show a blue selection area in the chart, which was not working either. The selection would only work if, apart from opening an Events Table and a XY chart, a status chart was opened, like the "Resources Chart". Now all selections work. Fixes #448. Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
- Use CSS class instead of hardcoded tags - Simplify expression of HTML - Display long message on two lines - Correct whitespace typo Signed-off-by: Erica Bugden <erica.bugden@gmail.com>
Signed-off-by: Erica Bugden <erica.bugden@gmail.com>
Currently, if the analysis fails (i.e. outputStatus is FAILED) then the analysis's view panel never updates and shows "Analysis running" forever even though the server has responded. Show a message to tell the user the analysis has failed. Add analysisFailedMessage method to abstract-output-component rather than abstract-tree-output-component so that it can be used by all output components (ex. TableOutputComponent). Add a separate CSS class for the analysis failed message (instead of reusing the styling used for the "no results" message) because the failed message is displayed in the main render area (rather than the chart area) so it needs different styling. Contributes towards fixing #460 Signed-off-by: Erica Bugden <erica.bugden@gmail.com>
Contributes towards fixing #460 Signed-off-by: Erica Bugden <erica.bugden@gmail.com>
Adapt to the change in the XYSeries model. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
Make the required adjustments to bundle the Trace Server on Electron. Here's how the application will look for the Trace Server path now: - `browser`: - Read `traceViewer.traceServer.path` preference. - If `undefined` or empty, read `TRACE_SERVER_PATH` environment variable. - If `undefined` or empty, fail. - `electron`: - Read `traceViewer.traceServer.path` preference. - If `undefined` or empty, read `TRACE_SERVER_PATH` environment variable. - If `undefined` or empty, use the known path to the bundled server. Cleanup code in adjacent areas to the modifications. `traceViewer.traceServer.path` default preference is now `undefined`. Split the implementation of `TraceServerConfigService` between regular Node and Electron: on the latter the implementation will default to the bundled Trace Server. Signed-off-by: Paul Maréchal <paul.marechal@ericsson.com>
Add a sash between the tree and the chart. For XY chart insert the sash between the Y-axis and the chart. Add mouse handling to the sash to call the setSashOffset() callback when moving the mouse while the sash is clicked, to propage the new sash offset to all output components. Refactor the width handling to use handle width, sash offset and sash width to compute the tree width and chart width. Add hover color and cursor to the sash. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
This commit enhances the react-components package to support the trace output customization feature by adding UI elements that allow users to: - Trigger customization of outputs directly from the Available Views panel - Remove custom outputs they no longer need - Visually identify customizable and removable outputs The implementation extends the filter tree components to support interactive elements and provides handlers for customization and deletion operations. These UI enhancements complete the customization workflow by connecting the JSON editor to the trace explorer interface. Signed-off-by: Will Yang <william.yang@ericsson.com>
In the Theia trace extension, the functionality to create custom views has not been implemented. However the UI element , a plus sign button added after the "views" entry of the "configurator" element, used to trigger creating custom views, is always present, even when not supported (no callback provided that create the custom views). This commit removes that button when not relevant. There's also the UI element added to remove previously created custom views (the "x" button), that does work in the Theia extension. For consistency, this commit also removes this button. Another tweak done when customization is not supported is to filter root "configurator" nodes from the nodes list early, so they are not displayed in the views list. If they have children , from previously configured output descriptors (from the vscode trace extension), then the children will be displayed as before but as root nodes instead of children of their "configurator" node. The filtering of "configurator" node is overridable, by creating a class that extends ReactAvailableViewsWidget and overrides method : "protected doFilterList(list: OutputDescriptor[]): OutputDescriptor[]", e.g. to return the original, unfiltered list. Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>
Add support for the autoExpandLevel flag to automatically collapse tree nodes beyond the specified depth level. When autoExpandLevel is set, nodes at depths greater than the specified level are automatically collapsed in the tree view. Related to eclipse-cdt-cloud/tsp-typescript-client#130 Signed-off-by: Will Yang <william.yang@ericsson.com>
There's a relatively low limit of WebGL contexts available for a Chrome-based browser tab (16). Each time a "TimeGraphContainer" is created, one such context is consumed. We use these contexts for a few things, not just time-line charts (where it makes most sense). This commit takes advantage of the new option and declines that a WebGL context be used for containers we create, except for proper chart views. This means that we will now be able to create about 16 timeline-chart views per session, spread over however many experiments. Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>
Wait for table header to be rendered before setting top margin. Fixes #1207 Signed-off-by: Patrick Tasse <patrick.tasse@gmail.com>
Set the height for timegraph td in .css stylesheet since the line-height for timegraph tr does not apply if there is no text. Fixes #1208 Signed-off-by: Patrick Tasse <patrick.tasse@gmail.com>
Signed-off-by: Bernd Hufmann <bernd.hufmann@ericsson.com> Render minimally a flame graph using existing time graph implementations Add custom x-axis for flame graph by passing it as children node; Rename flamegraph fields; Add zooming and reset zooming handlers Update naming conventions to generic gantt chart instead of flame graph Signed-off-by: Anh Hoang Nguyen <anh.nguyen@ericsson.com>
…component; Leave RenderTree method as abstract to allow customizability for the extending classes; Update naming conventions and element/component id and class names w.r.t. CSS styles Signed-off-by: Anh Hoang Nguyen <anh.nguyen@ericsson.com>
… scroll sync for tree and chart Signed-off-by: Anh Hoang Nguyen <anh.nguyen@ericsson.com>
…on from refactoring. No fix yet.
marcdumais-work
force-pushed
the
initial-code
branch
from
aa3bd0b to
3a6fd3a
Compare
PatrickTasse
requested changes
Aug 14, 2025
and expected root folder boilerplate files. The workflow is a minimal one, that manually builds the two libraries and runs the unit tests available in traceviewer-react-components. Since the package.json one level up is not available in the subtree, we get creative, manually adding the missing dependencies necessary to sucessfully run the tests. Everything before this commit is the result of running "git subtree split" to extract the traceviewer libraries from their original "home", under root folder "packages" in repo theia-trace-extension. Full history touching the libraries was preserved, though the commit messages may refer to things other than the libraries, that may not be relevant here, since the commits were made in the context of the original repository. Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>
marcdumais-work
force-pushed
the
initial-code
branch
from
3a6fd3a to
89d8da2
Compare
PatrickTasse
approved these changes
Aug 14, 2025
Contributor
Author
|
Note: for the record, we believe that the ECA CI check not passing for this PR is not a real issue, when taking context into consideration. i.e. the following problems are reported: 
What's happening is that we are moving[*] the source code (with full git history) for two libraries that are already official project code. Those libraries have numerous contributions, some that were brought into the project as part of the "initial contribution" and vetted by the Eclipse Foundation IP team, and some that were since contributed while following the Eclipse Foundation development process. The contributors/contributions flagged by the ECA tool were wither done before the project was moved to the EF (vetted at project creation) or after project creation, and then the contributor(s) had a valid ECA at the time of contributing. [*] in a subsequent step, the libraries' original repository will be updated to consume the libraries as a squashed git subtree. The original libraries, in their original form, will be removed from the most recent version of the repo, but preserved in the repo's history. Still, for transparency, we think it's a good practice to have the full git history of the libraries here (in its new home), as well. |
Contributor
Author
|
I opened an IP ticket about this: |
Contributor
Author
We got the green light to go ahead and merge this PR at our convenience |
marcdumais-work
force-pushed
the
initial-code
branch
3 times, most recently
from
6797af3 to
89d8da2
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR initializes the repo with a copy of the traceviewer libraries, which were developed originally in repo theia-trace-extension [1], for historical reasons: this was the first and only consumer of the libraries. In addition, minimal infrastructure was added: expected root files (license, README,...), a CI workflow to build and test the libraries and GitHub templates.
Since the libraries creation, an important second consumer has emerged: the Trace Viewer for VSCode extension [2]. Its development process is greatly complicated due to consuming these libraries from npm, specially when some changes to the libraries are required along with changes to the vscode extension.
To make development and testing easier, we decided to move the libraries in their own standalone repo (i.e. here!), and then "import" a copy (with squashed history) of the sources as a git subtree, in both consumer repositories:
Please see root README.md, part of this PR, for more details about how the libraries were split from theia-trace-extension. Note: it was done without losing any authorship information - all commits that modified the libraries are preserved (with a new SHA obviously), which is why this PR contains so many commits.
Follow-ups:
After this, both repos will have a nice local development experience, while preserving the ability to share changes and improvements done to the libraries.
[1]: https://github.com/eclipse-cdt-cloud/theia-trace-extension/tree/master/packages
[2]: https://github.com/eclipse-cdt-cloud/vscode-trace-extension