From 64724ef7ebfa8ffd06a9d0acb999d8331ea73c16 Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Mon, 25 Oct 2021 18:37:48 +0200
Subject: [PATCH] [jaeger] Fix tooltip position in traces chart

This commit fixes the tooltip position in the traces chart shown on the
Jaeger page. It could happen that the tooltip was shown on the wrong
side, because we just compared the index of the rendered node and not
the time of the traces with the start and end time shown in the chart.
This should now be fixed.
---
 CHANGELOG.md                                  |  1 +
 .../src/components/panel/TracesChart.tsx      | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 950d3ecce..663f6b201 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 ### Fixed
 
 - [#175](https://github.com/kobsio/kobs/pull/175): [prometheus] Fix tooltip when no unit is provided.
+- [#186](https://github.com/kobsio/kobs/pull/186): [jaeger] Fix tooltip position in traces chart.
 
 ### Changed
 
diff --git a/plugins/jaeger/src/components/panel/TracesChart.tsx b/plugins/jaeger/src/components/panel/TracesChart.tsx
index f9ea9ba58..0cbb5b193 100644
--- a/plugins/jaeger/src/components/panel/TracesChart.tsx
+++ b/plugins/jaeger/src/components/panel/TracesChart.tsx
@@ -24,13 +24,21 @@ function isIDatum(object: Datum): object is IDatum {
 }
 
 const TracesChart: React.FunctionComponent<ITracesChartProps> = ({ name, traces, showDetails }: ITracesChartProps) => {
-  const { series, min, max } = useMemo<{ series: Serie[]; min: number; max: number }>(() => {
+  const { series, min, max, first, last } = useMemo<{
+    series: Serie[];
+    min: number;
+    max: number;
+    first: number;
+    last: number;
+  }>(() => {
     // Initialize min and max so that we can simply compare during traversing.
     let minimalSpans = Number.MAX_SAFE_INTEGER;
     let maximalSpans = 0;
+    let firstTime = 0;
+    let lastTime = 0;
     const result: IDatum[] = [];
 
-    traces.forEach((trace) => {
+    traces.forEach((trace, index) => {
       if (trace.spans.length < minimalSpans) {
         minimalSpans = trace.spans.length;
       }
@@ -38,6 +46,13 @@ const TracesChart: React.FunctionComponent<ITracesChartProps> = ({ name, traces,
         maximalSpans = trace.spans.length;
       }
 
+      if (trace.startTime < firstTime || index === 0) {
+        firstTime = trace.startTime;
+      }
+      if (trace.startTime > lastTime || index === 0) {
+        lastTime = trace.startTime;
+      }
+
       result.push({
         label: trace.traceName,
         size: trace.spans.length,
@@ -48,6 +63,8 @@ const TracesChart: React.FunctionComponent<ITracesChartProps> = ({ name, traces,
     });
 
     return {
+      first: firstTime,
+      last: lastTime,
       max: maximalSpans,
       min: minimalSpans,
       series: [
@@ -96,7 +113,8 @@ const TracesChart: React.FunctionComponent<ITracesChartProps> = ({ name, traces,
             }}
             theme={CHART_THEME}
             tooltip={(tooltip): ReactNode => {
-              const isFirstHalf = tooltip.node.index < series[0].data.length / 2;
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const isFirstHalf = (tooltip.node.data as any).trace.startTime < (last + first) / 2;
               const hasError = isIDatum(tooltip.node.data) ? doesTraceContainsError(tooltip.node.data.trace) : false;
               const squareColor = hasError ? '#c9190b' : '#0066cc';