Add generic XY view #348

siwei-zhang-work · 2025-09-03T08:03:02Z

What it does

Adds the generic XY view as introduced in eclipse-cdt-cloud/trace-server-protocol#114.

Note on Selection Display:

The initial design intended to show selection data in the bar chart (similar to the data tree view). This was revised during implementation because the legacy XY endpoint does not show selection, and adding extra bars for selection would be visually confusing with a time-based x-axis. Consequently, selection is no longer displayed in this view.

Dependencies

This change requires the updates from eclipse-cdt-cloud/tsp-typescript-client#138.

Related Merged Pull Requests

The corresponding server and protocol updates are already merged in:

How to test

The non-time x-axis with bar chart can be tested with a lttng-ust trace using function density view.

For other axis and type there's no existing view for now, but can be tested by doing small modifications in the code:

Testing other view types

AbstractTreeGenericXYCommonXDataProvider#getDisplayType() can be modified to return DisplayType.LINE/SCATTER.

Testing time-based x-axis

The following patch can be addressed in org.eclipse.tracecompass for a temporary test.

diff --git a/analysis/org.eclipse.tracecompass.analysis.profiling.core/src/org/eclipse/tracecompass/internal/analysis/profiling/core/callstack/provider/CallStackFunctionDensityDataProvider.java b/analysis/org.eclipse.tracecompass.analysis.profiling.core/src/org/eclipse/tracecompass/internal/analysis/profiling/core/callstack/provider/CallStackFunctionDensityDataProvider.java
index ea30625dd..f4bb31238 100644
--- a/analysis/org.eclipse.tracecompass.analysis.profiling.core/src/org/eclipse/tracecompass/internal/analysis/profiling/core/callstack/provider/CallStackFunctionDensityDataProvider.java
+++ b/analysis/org.eclipse.tracecompass.analysis.profiling.core/src/org/eclipse/tracecompass/internal/analysis/profiling/core/callstack/provider/CallStackFunctionDensityDataProvider.java
@@ -245,7 +245,14 @@ public class CallStackFunctionDensityDataProvider extends AbstractTreeGenericXYC
             yModels.add(new YModel(entryId, getNameFromPID(pid), bins, Y_AXIS_DESCRIPTION));
         }
 
-        return new Pair<>(sampling, yModels);
+        long[] times = new long[nbSamples];
+        long stepSize = (filter.getEnd() - filter.getStart()) / nbSamples;
+        for(int i=0 ; i<times.length ; i++) {
+            times[i] = filter.getStart() + stepSize * i;
+        }
+
+        return new Pair<>(new ISampling.Timestamps(times), yModels);
+//        return new Pair<>(sampling, yModels);
     }
 
     private static ISampling.@Nullable Ranges createEvenlyDistributedRanges(long start, long end, int samples) {

Follow-ups

No follow-ups.

Review checklist

[Y] As an author, I have thoroughly tested my changes and carefully followed the instructions in this template

siwei-zhang-work · 2025-09-04T07:56:39Z

The build will require the changes from eclipse-cdt-cloud/tsp-typescript-client#138 to succeed.

bhufmann

Thanks for contributing the generic xy widget and also to extracting common code in a shared utility class. I did a first review and some testing. I was able to see the Function Density view with Trace Compass server. I also tried other chart types and the time axis as described in the description.

I added some review comments and findings. Please have a look

bhufmann · 2025-09-05T18:07:17Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+}
+
+function buildColumns(headers?: HeaderSpec[]): ColumnSpec[] {
+    if (headers && headers.length) {


if (headers?.length)

bhufmann · 2025-09-05T18:39:04Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+                    {
+                        display: false,
+                        gridLines: { display: false, drawBorder: false, drawTicks: false },
+                        ticks: yTickFix as any


Here a suggestion for another, separate PR. I think it would be too much for this PR.

So, for the Function Duration Density chart of the Trace Compass server, I noticed very high and low numbers, so that in a linear scale the low numbers are not visible. For those cases logarithmic scale would be better. Since the viewer doesn't allow for users to change UI settings and modify the scale, I wonder if we should set it y-scale for bar charts either by default to logarithmic or if the difference between lowest and highest number exceeds a certain threshold. When using logarithmic scale we should probably enable the horizontal gridlines so that it's obvious for the user. Since the y-axis is our custom implementation, then it needs to be updated as well for logarithmic scale. Even better would be to support view customizations in FE.

WDYT?

Yes that would be a nice improvement. But I fear that treating bar chart as a special citizen would over-complicate the code. What about using logarithmic y-scale for all xy chart types (line/scatter/bar) if the difference between lowest and highest number exceeds a certain threshold?

That would be a good start. Do this in a separate PR maybe.

bhufmann · 2025-09-05T20:24:12Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+export function computeYRange(
+    datasets: DatasetLike[] | undefined,
+    isScatter = false,
+    pad = 0.01


What is this padding for? Ok found it, It was already in the original code.

bhufmann · 2025-09-05T20:36:13Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+}
+
+export class ColorAllocator {
+    private map = new Map<string, number>();


can be readonly

bhufmann · 2025-09-05T20:36:58Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+    isScatter = false,
+    pad = 0.01
+): { min: number; max: number } {
+    if (!datasets || !datasets.length) return { min: 0, max: 1 };


if (!datasets?.length)

bhufmann · 2025-09-08T17:05:59Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+            const newStartFloat = Number(this.mousePanningStart) - xNow / this.resolution;
+
+            const min = BigInt(0);
+            const max = this.props.unitController.absoluteRange - this.props.unitController.viewRangeLength;


unitcontroller is for the common time axis

bhufmann · 2025-09-08T17:08:20Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+            if (ev.shiftKey && !ev.ctrlKey && this.props.unitController.selectionRange) {
+                this.isSelecting = true;
+                this.setState({ cursor: 'crosshair' });
+                this.props.unitController.selectionRange = {


unitcontroller is for the common time axis

Removed the selectionRange feature.

bhufmann · 2025-09-08T17:09:37Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+
+    private updateViewRange(start: bigint, end: bigint): void {
+        const [s, e] = start < end ? [start, end] : [end, start];
+        this.props.unitController.viewRange = { start: s, end: e };


unitcontroller is for the common time axis. It can't be updated from this class unless x is the time axis

bhufmann · 2025-09-08T17:09:48Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+    }
+
+    private zoom(isZoomIn: boolean): void {
+        if (this.props.unitController.viewRangeLength >= 1) {


Same here: unitcontroller is for the common time axis

bhufmann · 2025-09-08T17:10:11Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+    private pan(left: boolean): void {
+        const vr = this.props.unitController.viewRange;
+        const abs = this.props.unitController.absoluteRange;
+        this.props.unitController.viewRange = panRange(vr, abs, left);


same here: unitcontroller is for the common time axis

siwei-zhang-work

Thanks for the review, I've applied the comments.

siwei-zhang-work · 2025-09-09T08:08:56Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+    return getCollapsedNodesFromAutoExpandLevel(listToTree(entries, columns as any), autoExpandLevel);
+}
+
+export type DefaultCheckMode = 'strict-default-flag' | 'leaf-if-has-data';


I feel that adding this flag over-complicate things. I removed it and kept the behavior the same.

siwei-zhang-work · 2025-09-09T08:24:01Z

local-libs/traceviewer-libs/react-components/src/components/utils/xy-shared.ts

+        return { min: 0, max: 1 };
+    }
+    const range = localMax - localMin;
+    return { min: localMin - range * pad, max: localMax + range * pad };


I meant to keep it the same, changed it back.

siwei-zhang-work · 2025-09-09T08:29:33Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+                    {
+                        display: false,
+                        gridLines: { display: false, drawBorder: false, drawTicks: false },
+                        ticks: yTickFix as any


Yes that would be a nice improvement. But I fear that treating bar chart as a special citizen would over-complicate the code. What about using logarithmic y-scale for all xy chart types (line/scatter/bar) if the difference between lowest and highest number exceeds a certain threshold?

siwei-zhang-work · 2025-09-09T08:37:43Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+    }
+
+    private computeDesiredSampleNb(): number {
+        // TODO: Currently the number of samples is calculated only for bars.


This is needed because the bars of each series are drawn beside each other, right?

Yes, this is needed because the bars of each series are drawn beside each other so we can't keep the original calculation of sample numbers.

So, we would have to add options to the tree model, that are specific for xy, timegraph, data tree etc.

I don't fully understand what you mean here. I was thinking to add the display type in XyEntry?

siwei-zhang-work · 2025-09-09T08:56:16Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+    }
+
+    private endSelection = (_e: MouseEvent): void => {
+        if (this.clickedMouseButton === 2) {


This feature was what I wanted to achieve in the initial commit in the server by enabling the xValues in request parameters. It requires adding XYValuesDescription to the tree model response to let server reply with available xValues ranges. However, all the /tree endpoint in the server currently is using the same function. So it'll require quite a big change in the APIs. I've now disabled the zoom for non-time x-axis.

siwei-zhang-work · 2025-09-09T09:19:47Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+        const rawLabel = labels[index];
+
+        if (this.isTimeAxis) {
+            // If it's a time axis, the label is a bigint timestamp. Format it as seconds.


Here it is always timestamp if this.isTimeAxis is true. Modified to do this transformation while creating the labels.

siwei-zhang-work · 2025-09-09T11:52:41Z

local-libs/traceviewer-libs/react-components/src/components/generic-xy-output-component.tsx

+            if (ev.shiftKey && !ev.ctrlKey && this.props.unitController.selectionRange) {
+                this.isSelecting = true;
+                this.setState({ cursor: 'crosshair' });
+                this.props.unitController.selectionRange = {


Removed the selectionRange feature.

bhufmann · 2025-09-10T13:35:43Z

So, we would have to add options to the tree model, that are specific for xy, timegraph, data tree etc.

I don't fully understand what you mean here. I was thinking to add the display type in XyEntry?

That's pretty much what I mean, XyEntry has this special information, while other entries (e.g. for timegraph) don't have that.

bhufmann

I did a second review I have only some minor comments. The functionality looks good for this PR and my previous comment are addressed:

~~I'll release the latest tsp-typescript-client which you can use in this PR. I'll let you know when it's done~~ tsp-typescript-client v0.8.0 is released
I noticed that the progress wheel in the view is not shown when analysis is running (message in the view)
Please rebase to latest master (there were some changes brought in from the traceviewer-libs, i.e. mainly linter related updates.

@PatrickTasse could you please have look into this PR as well? Thanks

siwei-zhang-work · 2025-09-15T08:36:45Z

Thanks for the review. Rebased on master and added the progress wheel that I accidentally deleted.

Extract util methods from abstract-xy-output-component so that later they can be shared with generic xy view. Signed-off-by: Siwei Zhang <[email protected]>

bhufmann · 2025-09-15T14:08:49Z

local-libs/traceviewer-libs/base/package.json

    ],
    "dependencies": {
-        "tsp-typescript-client": "^0.7.0"
+        "tsp-typescript-client": "^0.8.0"


the version has to be updated in the following files as well:

local-libs/traceviewer-libs/react-components/package.json

vscode-trace-common/package.json

Implement the new generic xy view to support non-time x-axis xy view. This new view uses a new endpoint in the tsp introduced in: eclipse-cdt-cloud/trace-server-protocol#114 Signed-off-by: Siwei Zhang <[email protected]>

bhufmann

Looks good to me. Thank you very much for the contribution It enhances the application to be able to provide density views. We are much closer to feature parity to Eclipse Trace Compass.

siwei-zhang-work force-pushed the generic-xy branch 2 times, most recently from 2ff9cd1 to bb02fa2 Compare September 3, 2025 08:40

siwei-zhang-work changed the title ~~[WIP] Generic xy~~ Add the generic XY view Sep 3, 2025

siwei-zhang-work force-pushed the generic-xy branch from bb02fa2 to 6b9cba7 Compare September 3, 2025 09:36

siwei-zhang-work changed the title ~~Add the generic XY view~~ [WIP] Add the generic XY view Sep 3, 2025

siwei-zhang-work force-pushed the generic-xy branch 3 times, most recently from c28017c to edf4f4f Compare September 3, 2025 12:05

siwei-zhang-work changed the title ~~[WIP] Add the generic XY view~~ Add generic XY view Sep 3, 2025

siwei-zhang-work force-pushed the generic-xy branch from edf4f4f to a6f06b2 Compare September 4, 2025 07:51

siwei-zhang-work force-pushed the generic-xy branch from a6f06b2 to f0e38f0 Compare September 4, 2025 09:43

bhufmann self-requested a review September 5, 2025 15:30

bhufmann requested changes Sep 8, 2025

View reviewed changes

siwei-zhang-work force-pushed the generic-xy branch from f0e38f0 to 4dbc258 Compare September 9, 2025 12:17

siwei-zhang-work commented Sep 9, 2025

View reviewed changes

bhufmann requested changes Sep 12, 2025

View reviewed changes

siwei-zhang-work force-pushed the generic-xy branch from 4dbc258 to bb157d8 Compare September 15, 2025 08:35

extract util methods from abstract-xy-output-component

032f17b

Extract util methods from abstract-xy-output-component so that later they can be shared with generic xy view. Signed-off-by: Siwei Zhang <[email protected]>

siwei-zhang-work force-pushed the generic-xy branch from bb157d8 to 5d67d97 Compare September 15, 2025 12:53

bhufmann requested changes Sep 15, 2025

View reviewed changes

Add generic xy view

f690042

Implement the new generic xy view to support non-time x-axis xy view. This new view uses a new endpoint in the tsp introduced in: eclipse-cdt-cloud/trace-server-protocol#114 Signed-off-by: Siwei Zhang <[email protected]>

siwei-zhang-work force-pushed the generic-xy branch from 5d67d97 to f690042 Compare September 15, 2025 14:17

bhufmann self-requested a review September 16, 2025 12:35

PatrickTasse approved these changes Sep 18, 2025

View reviewed changes

bhufmann approved these changes Sep 18, 2025

View reviewed changes

bhufmann merged commit 29b32fb into eclipse-cdt-cloud:master Sep 18, 2025
8 checks passed

Add generic XY view #348

Add generic XY view #348

Uh oh!

Conversation

siwei-zhang-work commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What it does

Note on Selection Display:

Dependencies

Related Merged Pull Requests

How to test

Testing other view types

Testing time-based x-axis

Follow-ups

Review checklist

Uh oh!

siwei-zhang-work commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bhufmann left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siwei-zhang-work left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bhufmann commented Sep 10, 2025

Uh oh!

bhufmann left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

siwei-zhang-work commented Sep 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bhufmann left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

siwei-zhang-work commented Sep 3, 2025 •

edited

Loading

siwei-zhang-work commented Sep 4, 2025 •

edited

Loading

bhufmann left a comment •

edited

Loading