From 421c44a95dfec25f3aae54af72e6e4b02863b94e Mon Sep 17 00:00:00 2001
From: Patrick Tasse <patrick.tasse@gmail.com>
Date: Fri, 29 Sep 2023 11:35:32 -0400
Subject: [PATCH] Add unit to timestamps and durations in tooltips

Add 's' or 'ns' unit to timestamps and durations in tooltips for
timegraph output component and xy output component.

Fixes issue #1027

Signed-off-by: Patrick Tasse <patrick.tasse@gmail.com>
---
 .../abstract-xy-output-component.tsx           |  6 +++---
 .../components/timegraph-output-component.tsx  | 18 +++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/components/abstract-xy-output-component.tsx b/packages/react-components/src/components/abstract-xy-output-component.tsx
index d99f53261..fdef67a39 100644
--- a/packages/react-components/src/components/abstract-xy-output-component.tsx
+++ b/packages/react-components/src/components/abstract-xy-output-component.tsx
@@ -653,9 +653,9 @@ export abstract class AbstractXYOutputComponent<
     protected tooltip(x: number, y: number): void {
         const xPos = this.positionXMove;
         const timeForX = this.getTimeForX(xPos);
-        let timeLabel: string | undefined = timeForX.toString();
+        let timeLabel: string | undefined = timeForX.toString() + ' ns';
         if (this.props.unitController.numberTranslator) {
-            timeLabel = this.props.unitController.numberTranslator(timeForX);
+            timeLabel = this.props.unitController.numberTranslator(timeForX) + ' s';
         }
         const chartWidth = this.isBarPlot ? this.getChartWidth() : this.chartRef.current.chartInstance.width;
         const chartHeight = this.isBarPlot
@@ -708,7 +708,7 @@ export abstract class AbstractXYOutputComponent<
 
             if (this.isScatterPlot && this.props.unitController.numberTranslator) {
                 const time = this.props.unitController.numberTranslator(BigInt(xValue));
-                formatted = '(' + time + ') ' + formatted;
+                formatted = '(' + time + ' s) ' + formatted;
                 timeLabel = 'Series (time stamp) value';
             }
 
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index 21cf4cbf2..4e2f5a59b 100644
--- a/packages/react-components/src/components/timegraph-output-component.tsx
+++ b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -563,12 +563,12 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             let start: string | undefined;
             let end: string | undefined;
             if (this.props.unitController.numberTranslator) {
-                start = this.props.unitController.numberTranslator(elementRange.start);
-                end = this.props.unitController.numberTranslator(elementRange.end);
+                start = this.props.unitController.numberTranslator(elementRange.start) + ' s';
+                end = this.props.unitController.numberTranslator(elementRange.end) + ' s';
             }
-            start = start ? start : (elementRange.start + (offset ? offset : BigInt(0))).toString();
-            end = end ? end : (elementRange.end + (offset ? offset : BigInt(0))).toString();
-            const duration = (elementRange.end - elementRange.start).toString();
+            start = start ? start : (elementRange.start + (offset ? offset : BigInt(0))).toString() + ' ns';
+            end = end ? end : (elementRange.end + (offset ? offset : BigInt(0))).toString() + ' ns';
+            const duration = (elementRange.end - elementRange.start).toString() + ' ns';
             const tooltip = await this.tspDataProvider.fetchStateTooltip(element, this.props.viewRange);
             return this.filterTooltip({
                 Label: label,
@@ -586,11 +586,11 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             let start: string | undefined;
             let end: string | undefined;
             if (this.props.unitController.numberTranslator) {
-                start = this.props.unitController.numberTranslator(elementRange.start);
-                end = this.props.unitController.numberTranslator(elementRange.end);
+                start = this.props.unitController.numberTranslator(elementRange.start) + ' s';
+                end = this.props.unitController.numberTranslator(elementRange.end) + ' s';
             }
-            start = start ? start : (elementRange.start + (offset ? offset : BigInt(0))).toString();
-            end = end ? end : (elementRange.end + (offset ? offset : BigInt(0))).toString();
+            start = start ? start : (elementRange.start + (offset ? offset : BigInt(0))).toString() + ' ns';
+            end = end ? end : (elementRange.end + (offset ? offset : BigInt(0))).toString() + ' ns';
             const tooltip = await this.tspDataProvider.fetchAnnotationTooltip(element, this.props.viewRange);
             if (start === end) {
                 return this.filterTooltip({