From 9b836ce88ed0017269c0526af9d702e4eefab794 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 6 Jan 2025 17:28:45 +0100
Subject: [PATCH] ui: add timestamp for comp tooltip row

---
 frontend/app/components/Charts/BarChart.tsx  |  3 ++-
 frontend/app/components/Charts/LineChart.tsx |  3 ++-
 frontend/app/components/Charts/init.ts       |  6 +++++-
 frontend/app/components/Charts/utils.ts      | 12 ++++++++----
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Charts/BarChart.tsx b/frontend/app/components/Charts/BarChart.tsx
index 5f117bdfb..15a6a4321 100644
--- a/frontend/app/components/Charts/BarChart.tsx
+++ b/frontend/app/components/Charts/BarChart.tsx
@@ -25,7 +25,7 @@ function ORBarChart(props: BarChartProps) {
     const categories = buildCategories(props.data);
     const { datasets, series } = buildBarDatasetsAndSeries(props, props.horizontal ?? false);
 
-    initWindowStorages(chartUuid.current, categories, props.data.chart);
+    initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
     series.forEach((s: any) => {
       (window as any).__seriesColorMap[chartUuid.current][s.name] = s.itemStyle?.color ?? '#999';
       const ds = datasets.find((d) => d.id === s.datasetId);
@@ -76,6 +76,7 @@ function ORBarChart(props: BarChartProps) {
       delete (window as any).__seriesColorMap[chartUuid.current];
       delete (window as any).__categoryMap[chartUuid.current];
       delete (window as any).__timestampMap[chartUuid.current];
+      delete (window as any).__timestampCompMap[chartUuid.current];
     };
   }, [props.data, props.compData, props.horizontal]);
 
diff --git a/frontend/app/components/Charts/LineChart.tsx b/frontend/app/components/Charts/LineChart.tsx
index 5aca0bb3c..68a281bec 100644
--- a/frontend/app/components/Charts/LineChart.tsx
+++ b/frontend/app/components/Charts/LineChart.tsx
@@ -25,7 +25,7 @@ function ORLineChart(props: Props) {
     const categories = buildCategories(props.data);
     const { datasets, series } = buildDatasetsAndSeries(props);
 
-    initWindowStorages(chartUuid.current, categories, props.data.chart);
+    initWindowStorages(chartUuid.current, categories, props.data.chart, props.compData?.chart ?? []);
 
     series.forEach((s: any) => {
       if (props.isArea) {
@@ -89,6 +89,7 @@ function ORLineChart(props: Props) {
       delete (window as any).__seriesColorMap[chartUuid.current];
       delete (window as any).__categoryMap[chartUuid.current];
       delete (window as any).__timestampMap[chartUuid.current];
+      delete (window as any).__timestampCompMap[chartUuid.current];
     };
   }, [props.data, props.compData]);
 
diff --git a/frontend/app/components/Charts/init.ts b/frontend/app/components/Charts/init.ts
index 6c2783b0b..a93a4a2d8 100644
--- a/frontend/app/components/Charts/init.ts
+++ b/frontend/app/components/Charts/init.ts
@@ -66,10 +66,11 @@ const defaultOptions = {
   },
 }
 
-export function initWindowStorages(chartUuid: string, categories: string[] = [], chartArr: any[] = []) {
+export function initWindowStorages(chartUuid: string, categories: string[] = [], chartArr: any[] = [], compChartArr: any[] = []) {
   (window as any).__seriesValueMap = (window as any).__seriesValueMap ?? {};
   (window as any).__seriesColorMap = (window as any).__seriesColorMap ?? {};
   (window as any).__timestampMap = (window as any).__timestampMap ?? {};
+  (window as any).__timestampCompMap = (window as any).__timestampCompMap ?? {};
   (window as any).__categoryMap = (window as any).__categoryMap ?? {};
 
   if (!(window as any).__seriesColorMap[chartUuid]) {
@@ -84,6 +85,9 @@ export function initWindowStorages(chartUuid: string, categories: string[] = [],
   if (!(window as any).__timestampMap[chartUuid]) {
     (window as any).__timestampMap[chartUuid] = chartArr.map((item) => item.timestamp);
   }
+  if (!(window as any).__timestampCompMap[chartUuid]) {
+    (window as any).__timestampCompMap[chartUuid] = compChartArr.map((item) => item.timestamp);
+  }
 }
 
 export { echarts, defaultOptions };
\ No newline at end of file
diff --git a/frontend/app/components/Charts/utils.ts b/frontend/app/components/Charts/utils.ts
index dfec64f92..68d9040e4 100644
--- a/frontend/app/components/Charts/utils.ts
+++ b/frontend/app/components/Charts/utils.ts
@@ -55,15 +55,19 @@ export function customTooltipFormatter(uuid: string) {
 
     const isPrevious = /^Previous\s+/.test(seriesName);
     const baseName = seriesName.replace(/^Previous\s+/, '');
-    const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
+    const timestamp = (window as any).__timestampMap?.[uuid]?.[dataIndex];
 
     // Get partner’s value from some global map
+    const partnerName = isPrevious ? baseName : `Previous ${baseName}`;
     const partnerVal = (window as any).__seriesValueMap?.[uuid]?.[partnerName]?.[dataIndex];
-    const timestamp = (window as any).__timestampMap?.[uuid]?.[dataIndex];
+    const partnerTimestamp = (window as any).__timestampCompMap?.[uuid]?.[dataIndex];
+
     const categoryLabel = (window as any).__categoryMap[uuid]
                           ? (window as any).__categoryMap[uuid][dataIndex]
                           : dataIndex;
 
+    const firstTs = isPrevious ? partnerTimestamp : timestamp;
+    const secondTs = isPrevious ? timestamp : partnerTimestamp;
     let tooltipContent = `
     <div class="flex flex-col gap-1 bg-white shadow border rounded p-2 z-50">
       <div class="flex gap-2 items-center">
@@ -78,7 +82,7 @@ export function customTooltipFormatter(uuid: string) {
 
       <div style="border-left: 2px solid ${params.color};" class="flex flex-col px-2 ml-2">
         <div class="text-neutral-600 text-sm"> 
-          ${isPrevious ? '' : timestamp ? formatTimeOrDate(timestamp) : categoryLabel}
+          ${firstTs ? formatTimeOrDate(firstTs) : categoryLabel}
         </div>
         <div class="flex items-center gap-1">
           <div class="font-medium text-black">${value ?? '—'}</div>
@@ -101,7 +105,7 @@ export function customTooltipFormatter(uuid: string) {
       </div>
       <div style="border-left: 2px dashed ${partnerColor};" class="flex flex-col px-2 ml-2">
         <div class="text-neutral-600 text-sm"> 
-          ${!isPrevious ? '' : timestamp ? formatTimeOrDate(timestamp) : categoryLabel}
+          ${secondTs ? formatTimeOrDate(secondTs) : categoryLabel}
         </div>
         <div class="flex items-center gap-1">
           <div class="font-medium">${partnerVal ?? '—'}</div>