Add D3.js time axis to generic-xy-view with sampling data #363

MatthewKhouzam · 2025-10-23T02:58:19Z

What it does

Add an x axis for density views.

Add bottom time axis using D3.js scales and axes
Support timestamp, range, and category sampling from tsp-typescript-client
Display duration labels (s/ms/μs/ns) for range sampling
Include gridlines extending through chart area
Add CSS styling with VSCode theme integration
Increase bottom margin to accommodate axis labels
Have minor and major ticks where the major ticks are labeled

How to test

Open a function density view.

Follow-ups

Review checklist

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

MatthewKhouzam · 2025-10-24T13:15:29Z

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

+            axis = d3.axisBottom(scale).ticks(5).tickSizeInner(-parseInt(String(this.props.style.height)) + this.margin.top + this.margin.bottom)
+                .tickFormat((d) => {
+                    const date = d instanceof Date ? d : new Date(d as number);
+                    const rangeIndex = Math.floor((date.getTime() - domain[0].getTime()) / (domain[1].getTime() - domain[0].getTime()) * (sampling.length - 1));


Change to add ticks on edges, not on centers.

MatthewKhouzam · 2025-10-24T13:16:40Z

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

+            axis = d3.axisBottom(scale).ticks(5).tickSizeInner(-parseInt(String(this.props.style.height)) + this.margin.top + this.margin.bottom);
+        } else if (isRangeSampling(sampling)) {
+            const timestamps = sampling.map(range => Number(range.start) / 1000000);
+            console.log('Raw timestamps (ms):', timestamps.slice(0, 3));


remove all logs.

MatthewKhouzam · 2025-10-24T13:17:02Z

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

+            const dates = timestamps.map(ts => new Date(ts));
+            console.log('Converted dates:', dates.slice(0, 3));
+            const domain = d3.extent(dates) as [Date, Date];
+            console.log('Domain:', domain);


MatthewKhouzam · 2025-10-24T13:17:11Z

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

+            const timestamps = sampling.map(range => Number(range.start) / 1000000);
+            console.log('Raw timestamps (ms):', timestamps.slice(0, 3));
+            const dates = timestamps.map(ts => new Date(ts));
+            console.log('Converted dates:', dates.slice(0, 3));


MatthewKhouzam · 2025-10-24T23:50:24Z

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

+        let axis: d3.Axis<any>;
+
+        if (isTimestampSampling(sampling)) {
+            const domain = d3.extent(sampling.map(ts => new Date(Number(ts) / 1000000))) as [Date, Date];


maybe extract...

MatthewKhouzam · 2025-10-24T23:50:42Z

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

+            allTicks.forEach(tick => {
+                const tickPos = (scale as any)(tick) as number;
+                const canAdd = majorTicks.length === 0 ||
+                    Math.abs(tickPos - ((scale as any)(majorTicks[majorTicks.length - 1]) as number)) >= 100;


definitely extract.

siwei-zhang-work · 2025-11-07T08:44:13Z

Thanks for doing this. The x labels will be on top of each other when they are long (categorical sampling). I don't see a nice way to solve this, maybe show ... in the x labels when they are too long?

MatthewKhouzam · 2025-11-07T15:17:57Z

he x labels will be on top of each other when they are long (categorical sampling). I don't see a nice way to solve this, maybe show ... in the x labels when they are too long?

This makes sense, I will try it out. One issue. Let's say that we have as an example: Month-day as buckets so we have January-Monday, January-Tuesday, etc... And we have 1000 categories on a 1920 pixel wide axis, even ... will fail. I will make it do ... when it can, and nothing when it cannot, is this OK with you?

siwei-zhang-work · 2025-11-11T09:06:59Z

he x labels will be on top of each other when they are long (categorical sampling). I don't see a nice way to solve this, maybe show ... in the x labels when they are too long?

This makes sense, I will try it out. One issue. Let's say that we have as an example: Month-day as buckets so we have January-Monday, January-Tuesday, etc... And we have 1000 categories on a 1920 pixel wide axis, even ... will fail. I will make it do ... when it can, and nothing when it cannot, is this OK with you?

Yes, sounds good. I think that's the best we can do.

bhufmann

I'm not able to test it because the Function Duration Density view is not rendering the x-axis. So, I just comment based on what the code.

bhufmann · 2025-11-13T18:45:10Z

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

    formatX?: (x: number | bigint | string) => string;
    formatY?: (y: number) => string;
    stacked?: boolean;
+    timelineUnit?: string;


Those are never set in any of the existing code (nor the above). Nor the other ones of the props.

bhufmann · 2025-11-13T19:12:23Z

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

            cursor: 'default',
-            showTree: true
+            showTree: true,
+            timelineUnit: this.props.timelineUnit || 'ms',


the state for timelineUnit is never updated because it's never passed as props nor the unit is taken from the x-axis description of the xy-query, see here for the axis description definition: https://github.com/eclipse-cdt-cloud/trace-server-protocol/blob/72af35675446ed5da6acbe1bc8175ad7e8769166/API.yaml#L2688

bhufmann · 2025-11-13T19:14:02Z

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

-            showTree: true
+            showTree: true,
+            timelineUnit: this.props.timelineUnit || 'ms',
+            timelineUnitType: this.props.timelineUnitType || 'time'


The state timeline unit type is never set otherwise since it's never passed to the props. I think what you mean hear is the data type that is part of the x-axis description: https://github.com/eclipse-cdt-cloud/trace-server-protocol/blob/72af35675446ed5da6acbe1bc8175ad7e8769166/API.yaml#L2688

bhufmann · 2025-11-13T19:16:22Z

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

    }

+    private renderTimeline(): React.ReactNode {
+        if (this.state.timelineUnitType === 'time' && !this.isTimeAxis) return <svg/>;


The timelineUnitType is always 'time', even for ranges as x-axis or categories a x-axis. For ranges or categories it will return here because for those xy series this.isTimeAxis is false.

bhufmann · 2025-11-13T19:16:32Z

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

+
+    private updateTimeline(): void {
+        if (!this.timelineRef.current) return;
+        if (this.state.timelineUnitType === 'time' && !this.isTimeAxis) return;


The timelineUnitType is always 'time', even for ranges as x-axis or categories a x-axis. For ranges or categories it will return here because for those xy series this.isTimeAxis is false.

bhufmann · 2025-11-13T19:20:57Z

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

+    }
+
+    private getTimelineRange(): { start: number; end: number } {
+        switch (this.state.timelineUnitType) {


I think what you intended was to use the data type of the axis description. See here for the supported data types:
https://github.com/eclipse-cdt-cloud/trace-server-protocol/blob/72af35675446ed5da6acbe1bc8175ad7e8769166/API.yaml#L2688

In your switch-case statement you are using non-specified values. The would need to be added to the TSP or removed here for now.

bhufmann · 2025-11-13T19:23:33Z

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

+    }
+
+    private formatDataRate(rate: number): string {
+        const units = ['B/s', 'KB/s', 'MB/s', 'GB/s'];


Those format methods should be in a central utility. I think we have already some code somewhere that is related. Check if we can unify those in a common utility.

bhufmann · 2025-11-13T19:36:48Z

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

+            case 'bytes/sec':
+            case 'iterations/sec':
+                // For non-time units, use the data range
+                const labels = this.state.xyData.labels;


The labels are strings and not actual numbers. I think it will fail for the case that the x-values are ranges or categories. It those case the labels are formatted, for example for ranges:
[${range.start} ${unit}, ${range.end} ${unit}].

bhufmann · 2025-11-13T20:00:25Z

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

+    timelineUnitType: TimelineUnitType;
 }

+type TimelineUnitType = 'time' | 'cycles' | 'bytes' | 'calls' | 'bytes/sec' | 'iterations/sec';


They should be aligned with the data type of the x-axis: https://github.com/eclipse-cdt-cloud/trace-server-protocol/blob/72af35675446ed5da6acbe1bc8175ad7e8769166/API.yaml#L2688. If some are missing then need to add them in the TSP and in the backend

bhufmann · 2025-11-14T12:57:35Z

@MatthewKhouzam @siwei-zhang-work @PatrickTasse Reminder that due to eclipse-tracecompass-incubator/org.eclipse.tracecompass.incubator#236, to use latest Trace Compass trace server and vscode-trace-extension for testing.

bhufmann · 2025-11-14T14:21:46Z

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

 } from 'tsp-typescript-client/lib/models/sampling';
 import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
 import { EntryTree } from './utils/filter-tree/entry-tree';
 import { TimeRange } from 'traceviewer-base/src/utils/time-range';


This line is incorrect and causes the build to fail. It should reference the lib directory and not the src directory.

- Add configurable timeline bar below XY charts with D3.js - Support multiple unit types: time, cycles, bytes, calls, data rates - Include automatic unit formatting (bytes/KB/MB/GB, rates) - Add timeline props: timelineUnit and timelineUnitType - Update timeline on chart resize and data changes Note: this patch was made with the assistance of claude-sonnet-4 Signed-off-by: Matthew Khouzam <matthew.khouzam@ericsson.com>

bhufmann

The recent changes work well with the Function Duration Density of the Trace Compass server where the x-values are duration ranges and the buckets are evenly distributed over the full range of all buckets. However, for other cases where the buckets are not evenly distributed, the x-axis not correct.

Please let me know if you'd like to merge this PR as is and then add another PR where the x-axis is handling the second case above?

MatthewKhouzam · 2025-11-17T15:49:09Z

Let's merge and fix for the other. Upon inspection, I think the axis is correct, not the chart. I will confirm.

MatthewKhouzam requested a review from PatrickTasse October 23, 2025 13:05

MatthewKhouzam force-pushed the x-axis branch from 1e339d5 to 3f37ad8 Compare October 24, 2025 01:38

MatthewKhouzam commented Oct 24, 2025

View reviewed changes

MatthewKhouzam force-pushed the x-axis branch from 3f37ad8 to e100b54 Compare October 24, 2025 23:43

MatthewKhouzam commented Oct 24, 2025

View reviewed changes

MatthewKhouzam force-pushed the x-axis branch 4 times, most recently from 1c5f7f9 to 0f6a98f Compare November 13, 2025 20:33

bhufmann requested changes Nov 13, 2025

View reviewed changes

MatthewKhouzam force-pushed the x-axis branch 3 times, most recently from ba893ea to db92a31 Compare November 14, 2025 13:58

bhufmann requested changes Nov 14, 2025

View reviewed changes

MatthewKhouzam force-pushed the x-axis branch 4 times, most recently from d03ba61 to 2faa6db Compare November 14, 2025 15:39

MatthewKhouzam force-pushed the x-axis branch from 2faa6db to 1f9cee7 Compare November 14, 2025 16:03

bhufmann reviewed Nov 17, 2025

View reviewed changes

Add D3.js time axis to generic-xy-view with sampling data #363

Are you sure you want to change the base?

Add D3.js time axis to generic-xy-view with sampling data #363

Uh oh!

Conversation

MatthewKhouzam commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What it does

How to test

Follow-ups

Review checklist

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 commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MatthewKhouzam commented Nov 7, 2025

Uh oh!

siwei-zhang-work commented Nov 11, 2025

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!

bhufmann commented Nov 14, 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!

MatthewKhouzam commented Nov 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

MatthewKhouzam commented Oct 23, 2025 •

edited

Loading

siwei-zhang-work commented Nov 7, 2025 •

edited

Loading