make generic X Axis label reduced if overlapping

If the label is not overlapping, don't reduce.
If there is overlap, reduce and add an ellipsis.
If there is too much overlap, don't display anything.

Signed-off-by: Matthew Khouzam <[email protected]>

Author: MatthewKhouzam

local-libs/traceviewer-libs/base/src/signals/item-properties-signal-payload.d.ts

@@ -0,0 +1,19 @@
+/***************************************************************************************
+ * Copyright (c) 2024 BlackBerry Limited and contributors.
+ *
+ * Licensed under the MIT license. See LICENSE file in the project root for details.
+ ***************************************************************************************/
+export declare class ItemPropertiesSignalPayload {
+    private outputDescriptorId;
+    private experimentUUID;
+    private properties;
+    constructor(props: {
+        [key: string]: string;
+    }, expUUID?: string, descriptorId?: string);
+    getOutputDescriptorId(): string | undefined;
+    getExperimentUUID(): string | undefined;
+    getProperties(): {
+        [key: string]: string;
+    };
+}
+//# sourceMappingURL=item-properties-signal-payload.d.ts.map

local-libs/traceviewer-libs/base/src/utils/time-range.d.ts

@@ -0,0 +1,57 @@
+export interface TimeRangeString {
+    start: string;
+    end: string;
+    offset?: string;
+}
+export declare const ITimeRange: import("tsp-typescript-client/lib/protocol/serialization").Normalizer<ITimeRange>;
+export interface ITimeRange {
+    start: bigint;
+    end: bigint;
+    offset: bigint | undefined;
+    toString(): TimeRangeString;
+}
+export declare class TimeRange implements ITimeRange {
+    start: bigint;
+    end: bigint;
+    offset: bigint | undefined;
+    /**
+     * Constructor.
+     * @param start Range start time
+     * @param end Range end time
+     * @param offset Time offset, if this is defined the start and end time should be relative to this value
+     */
+    constructor(start: bigint, end: bigint, offset?: bigint);
+    /**
+     * Constructor.
+     * @param timeRangeString string object returned by this.toString()
+     */
+    constructor(timeRangeString: TimeRangeString);
+    /**
+     * Constructor.
+     * Default TimeRange with 0 for values
+     */
+    constructor();
+    /**
+     * Get the range start time.
+     * If an offset is present the return value is start + offset.
+     */
+    getStart(): bigint;
+    /**
+     * Get the range end time.
+     * If an offset is present the return value is end + offset.
+     */
+    getEnd(): bigint;
+    /**
+     * Get range duration
+     */
+    getDuration(): bigint;
+    /**
+     * Return the time offset
+     */
+    getOffset(): bigint | undefined;
+    /**
+     * Create a string object that can be JSON.stringified
+     */
+    toString(): TimeRangeString;
+}
+//# sourceMappingURL=time-range.d.ts.map

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

@@ -356,10 +356,10 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
 
                 // Track min start and max end from axisDomain
                 if (axisDomain && axisDomain.type === 'range') {
-                    const start = Number(axisDomain.start);
-                    const end = Number(axisDomain.end);
-                    if (start < minStart) minStart = start;
-                    if (end > maxEnd) maxEnd = end;
+                    const currentStart = Number(axisDomain.start);
+                    const currentEnd = Number(axisDomain.end);
+                    if (currentStart < minStart) minStart = currentStart;
+                    if (currentEnd > maxEnd) maxEnd = currentEnd;
                 }
 
                 // Check if all series have same label/unit/dataType
@@ -375,9 +375,6 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
             }
         });
 
-        // Calculate union range
-        const unionRange = maxEnd - minStart;
-
         // Default to 'time' if datatype differs across series
         const finalDataType = commonDataType || 'time';
 
@@ -522,7 +519,6 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                 this.updateTimeline();
             }, 0);
         }
-
     }
 
     componentWillUnmount(): void {
@@ -820,38 +816,102 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
 
         const { start, end } = this.getTimelineRange();
 
-        const scale = d3.scaleLinear()
-            .domain([start, end])
-            .range([0, chartWidth]);
+        const scale = d3.scaleLinear().domain([start, end]).range([0, chartWidth]);
+
+        const axis = d3.axisBottom(scale).tickFormat(d => this.formatTimelineValue(Number(d)));
 
-        const axis = d3.axisBottom(scale)
-            .tickFormat(d => this.formatTimelineValue(Number(d)));
+        const axisGroup = svg.append('g').attr('transform', `translate(0, 0)`).call(axis);
 
-        const axisGroup = svg.append('g')
-            .attr('transform', `translate(0, 0)`)
-            .call(axis);
+        // Handle label overlaps
+        this.handleLabelOverlaps(axisGroup);
 
         // Add minor ticks for range items
         this.addMinorTicks(svg, scale, chartWidth);
     }
 
-    private addMinorTicks(svg: d3.Selection<SVGSVGElement, unknown, null, undefined>, scale: d3.ScaleLinear<number, number>, chartWidth: number): void {
+    private handleLabelOverlaps(axisGroup: d3.Selection<SVGGElement, unknown, null, undefined>): void {
+        const labels = axisGroup.selectAll('.tick text');
+        const labelNodes = labels.nodes() as SVGTextElement[];
+
+        for (let i = labelNodes.length - 1; i >= 0; i--) {
+            const current = labelNodes[i];
+            if (!current.textContent || current.textContent.trim() === '') continue;
+
+            const currentBBox = current.getBoundingClientRect();
+
+            let overlaps = false;
+            let maxLabelWidth = currentBBox.width;
+
+            // Check overlap with adjacent labels and calculate available space
+            for (let j = i - 1; j >= 0; j--) {
+                const other = labelNodes[j];
+                if (!other.textContent || other.textContent.trim() === '') continue;
+
+                const otherBBox = other.getBoundingClientRect();
+
+                // Calculate available space between labels (with 5px margin)
+                const availableSpace = Math.abs(currentBBox.x - (otherBBox.x + otherBBox.width)) - 5;
+                maxLabelWidth = Math.min(maxLabelWidth, availableSpace);
+
+                // Check if bounding boxes overlap (with 5px margin)
+                if (
+                    currentBBox.x < otherBBox.x + otherBBox.width + 5 &&
+                    currentBBox.x + currentBBox.width + 5 > otherBBox.x
+                ) {
+                    overlaps = true;
+                }
+            }
+
+            if (overlaps && maxLabelWidth > 0) {
+                const originalText = current.textContent || '';
+                const truncated = this.truncateWithEllipsis(originalText, maxLabelWidth);
+
+                if (truncated.length <= 3) {
+                    current.style.display = 'none';
+                } else {
+                    current.textContent = truncated;
+                }
+            }
+        }
+    }
+
+    private truncateWithEllipsis(text: string, maxWidth: number = 80): string {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d')!;
+        ctx.font = '12px sans-serif';
+
+        if (ctx.measureText(text).width <= maxWidth) return text;
+
+        const ellipsis = '…';
+        let truncated = text;
+        while (truncated.length > 0 && ctx.measureText(truncated + ellipsis).width > maxWidth) {
+            truncated = truncated.slice(0, -1);
+        }
+
+        return truncated + ellipsis;
+    }
+
+    private addMinorTicks(
+        svg: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+        scale: d3.ScaleLinear<number, number>,
+        chartWidth: number
+    ): void {
         const labels = this.state.xyData.labels;
         if (!labels.length) return;
 
         // For each range item, add minor ticks at start and end
-        labels.forEach((label) => {
+        labels.forEach(label => {
             if (label.includes('[') && label.includes(',')) {
                 // Parse range format: "[start unit, end unit]"
                 const match = label.match(/\[(.*?),\s*(.*?)\]/);
                 if (match) {
                     const startVal = parseFloat(match[1]);
                     const endVal = parseFloat(match[2]);
-                    
+
                     if (!isNaN(startVal) && !isNaN(endVal)) {
                         const startX = scale(startVal);
                         const endX = scale(endVal);
-                        
+
                         // Add minor ticks
                         if (startX >= 0 && startX <= chartWidth) {
                             svg.append('line')
@@ -862,7 +922,7 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                                 .attr('stroke', '#666')
                                 .attr('stroke-width', 0.5);
                         }
-                        
+
                         if (endX >= 0 && endX <= chartWidth) {
                             svg.append('line')
                                 .attr('x1', endX)
@@ -880,12 +940,12 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
 
     private getTimelineRange(): { start: number; end: number } {
         const labels = this.state.xyData.labels;
-        
+
         // If we have range labels, extract the actual range from the data
         if (labels.length > 0 && labels[0].includes('[') && labels[0].includes(',')) {
             let minStart = Number.MAX_SAFE_INTEGER;
             let maxEnd = Number.MIN_SAFE_INTEGER;
-            
+
             labels.forEach(label => {
                 const match = label.match(/\[(.*?),\s*(.*?)\]/);
                 if (match) {
@@ -897,12 +957,12 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                     }
                 }
             });
-            
+
             if (minStart !== Number.MAX_SAFE_INTEGER && maxEnd !== Number.MIN_SAFE_INTEGER) {
                 return { start: minStart, end: maxEnd };
             }
         }
-        
+
         // Fallback to view/range based on timeline unit type
         switch (this.state.timelineUnitType) {
             case 'time':
@@ -1016,7 +1076,11 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                     onContextMenu={e => e.preventDefault()}
                     onMouseLeave={e => this.onMouseLeave(e)}
                     onMouseDown={e => this.onMouseDown(e)}
-                    style={{ height: parseInt(String(this.props.style.height)) - this.timelineHeight, position: 'relative', cursor: this.state.cursor }}
+                    style={{
+                        height: parseInt(String(this.props.style.height)) - this.timelineHeight,
+                        position: 'relative',
+                        cursor: this.state.cursor
+                    }}
                     ref={this.divRef}
                 >
                     {this.chooseReactChart()}
@@ -1031,17 +1095,19 @@ export class GenericXYOutputComponent extends AbstractTreeOutputComponent<Generi
                 <div style={{ position: 'relative' }}>
                     {this.renderTimeline()}
                     {this.state.xAxisTitle && (
-                        <div style={{ 
-                            position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            textAlign: 'center', 
-                            fontSize: '12px', 
-                            color: 'rgba(102, 102, 102, 0.5)',
-                            pointerEvents: 'none',
-                            zIndex: 10
-                        }}>
+                        <div
+                            style={{
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                textAlign: 'center',
+                                fontSize: '12px',
+                                color: 'rgba(102, 102, 102, 0.5)',
+                                pointerEvents: 'none',
+                                zIndex: 10
+                            }}
+                        >
                             {this.state.xAxisTitle}
                         </div>
                     )}