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

- 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

Signed-off-by: Matthew Khouzam <matthew.khouzam@ericsson.com>

Author: MatthewKhouzam

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

@@ -19,6 +19,7 @@ import { EntryTree } from './utils/filter-tree/entry-tree';
 import { TimeRange } from 'traceviewer-base/src/utils/time-range';
 import { BIMath } from 'timeline-chart/lib/bigint-utils';
 import { debounce } from 'lodash';
+import * as d3 from 'd3';
 
 import {
     applyYAxis,
@@ -68,6 +69,7 @@ interface GenericXYState extends AbstractTreeOutputState {
     allMax: number;
     allMin: number;
     cursor: string;
+    currentSampling?: Sampling;
 }
 
 interface GenericXYProps extends AbstractOutputProps {
@@ -91,8 +93,9 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
     private readonly chartRef = React.createRef<any>();
     private readonly yAxisRef: any;
     private readonly divRef = React.createRef<HTMLDivElement>();
+    private readonly xAxisRef = React.createRef<SVGGElement>();
 
-    private readonly margin = { top: 15, right: 0, bottom: 6, left: this.getYAxisWidth() };
+    private readonly margin = { top: 15, right: 0, bottom: 30, left: this.getYAxisWidth() };
 
     private mouseIsDown = false;
     private isPanning = false;
@@ -134,7 +137,8 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
             allMax: 0,
             allMin: 0,
             cursor: 'default',
-            showTree: true
+            showTree: true,
+            currentSampling: undefined
         };
 
         this.addPinViewOptions(() => ({
@@ -311,7 +315,8 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
             flushSync(() =>
                 this.setState({
                     xyData: { labels: [], datasets: [], labelIndices: [] },
-                    outputStatus: model.status ?? ResponseStatus.COMPLETED
+                    outputStatus: model.status ?? ResponseStatus.COMPLETED,
+                    currentSampling: undefined
                 })
             );
             this.calculateYRange();
@@ -323,9 +328,15 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
         this.isTimeAxis = !!series[0].xValues;
         this.mode = st === 'scatter' ? ChartMode.SCATTER : st === 'line' ? ChartMode.LINE : ChartMode.BAR;
 
+        const xValues = series[0].xValues ?? series[0].xRanges ?? series[0].xCategories;
         const xy = this.buildXYData(series, this.mode);
-        flushSync(() => this.setState({ xyData: xy, outputStatus: model.status ?? ResponseStatus.COMPLETED }));
+        flushSync(() => this.setState({ 
+            xyData: xy, 
+            outputStatus: model.status ?? ResponseStatus.COMPLETED,
+            currentSampling: xValues as Sampling
+        }));
         this.calculateYRange();
+        this.updateXAxis();
     }
 
     private buildXYData(seriesObj: XYSeries[], mode: ChartMode): GenericXYData {
@@ -408,6 +419,68 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
         signalManager().emit('SAVE_AS_CSV', this.props.traceId, csv);
     }
 
+    private updateXAxis(): void {
+        if (!this.xAxisRef.current || !this.state.currentSampling) {
+            return;
+        }
+
+        const chartWidth = this.getChartWidth();
+        if (chartWidth <= 0) return;
+
+        const sampling = this.state.currentSampling;
+        let scale: d3.ScaleTime<number, number> | d3.ScaleLinear<number, number> | d3.ScaleBand<string>;
+        let axis: d3.Axis<any>;
+
+        if (isTimestampSampling(sampling)) {
+            const domain = d3.extent(sampling.map(ts => new Date(Number(ts) / 1000000))) as [Date, Date];
+            scale = d3.scaleTime().domain(domain).range([0, chartWidth]);
+            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));
+            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);
+            scale = d3.scaleTime().domain(domain).range([0, chartWidth]);
+            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));
+                    const range = sampling[Math.min(rangeIndex, sampling.length - 1)];
+                    const endNs = Number(range.end);
+                    
+                    const formatDuration = (ns: number): string => {
+                        if (ns >= 1e9) return `${(ns / 1e9).toFixed(2)}s`;
+                        if (ns >= 1e6) return `${(ns / 1e6).toFixed(2)}ms`;
+                        if (ns >= 1e3) return `${(ns / 1e3).toFixed(2)}μs`;
+                        return `${ns}ns`;
+                    };
+                    
+                    return formatDuration(endNs);
+                });
+        } else if (isCategorySampling(sampling)) {
+            scale = d3.scaleBand().domain(sampling).range([0, chartWidth]).padding(0.1);
+            axis = d3.axisBottom(scale).tickSizeInner(-parseInt(String(this.props.style.height)) + this.margin.top + this.margin.bottom);
+        } else {
+            return;
+        }
+
+        d3.select(this.xAxisRef.current).call(axis);
+        // Ensure ticks and text are visible
+        d3.select(this.xAxisRef.current).selectAll('text')
+            .style('fill', 'var(--vscode-foreground)')
+            .style('font-size', '12px')
+            .attr('y', 9)
+            .attr('dy', '0.71em');
+        d3.select(this.xAxisRef.current).selectAll('.tick line')
+            .style('stroke', 'var(--vscode-foreground)')
+            .attr('y2', 6);
+        d3.select(this.xAxisRef.current).select('.domain')
+            .style('stroke', 'var(--vscode-foreground)')
+            .style('stroke-width', '1px');
+    }
+
     private calculateYRange() {
         const ds = this.state.xyData?.datasets ?? [];
         if (!ds.length) {
@@ -420,6 +493,30 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
         this.setState({ allMax: max, allMin: min });
     }
 
+    renderXAxis(): React.ReactNode {
+        const chartHeight = parseInt(String(this.props.style.height), 10);
+        const xTransform = `translate(${this.margin.left}, 5)`;
+        const chartWidth = this.getChartWidth();
+        return (
+            <svg 
+                height={this.margin.bottom} 
+                width={chartWidth + this.margin.left} 
+                style={{ position: 'absolute', bottom: 0 }}
+            >
+                <line 
+                    x1={this.margin.left} 
+                    y1={0} 
+                    x2={chartWidth + this.margin.left} 
+                    y2={0} 
+                    stroke="var(--vscode-foreground)" 
+                    strokeWidth={1}
+                    opacity={0.3}
+                />
+                <g className="x-axis" ref={this.xAxisRef} transform={xTransform} />
+            </svg>
+        );
+    }
+
     componentDidMount(): void {
         super.componentDidMount?.();
         this.waitAnalysisCompletion();
@@ -437,10 +534,15 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
             prevProps.viewRange.getEnd() !== this.props.viewRange.getEnd();
 
         const checksChanged = prevState.checkedSeries !== this.state.checkedSeries;
+        const samplingChanged = prevState.currentSampling !== this.state.currentSampling;
 
         if (sizeChanged || viewChanged || checksChanged) {
             if (this.getChartWidth() > 0) this._debouncedUpdateXY();
         }
+
+        if (sizeChanged || samplingChanged) {
+            this.updateXAxis();
+        }
     }
 
     componentWillUnmount(): void {
@@ -734,6 +836,7 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                 ref={this.divRef}
             >
                 {this.chooseReactChart()}
+                {this.renderXAxis()}
                 {this.state.outputStatus === ResponseStatus.RUNNING && (
                     <div className="analysis-running-overflow" style={{ width: this.getChartWidth() }}>
                         <div>

local-libs/traceviewer-libs/react-components/style/generic-xy-output-component.css

@@ -0,0 +1,16 @@
+.x-axis text {
+    font-size: 12px;
+    fill: var(--vscode-foreground) !important;
+}
+
+.x-axis path,
+.x-axis line {
+    stroke: var(--vscode-foreground);
+    stroke-width: 1px;
+}
+
+.x-axis .tick line {
+    stroke: var(--vscode-foreground);
+    stroke-width: 1px;
+    opacity: 0.3;
+}

local-libs/traceviewer-libs/react-components/style/output-components-style.css

@@ -1,4 +1,6 @@
 /* Output component styling */
+@import './generic-xy-output-component.css';
+
 /* Main container*/
 .output-container {
     display: flex;