From c50fe83e0d5ffda0b1429d2969fb00b77948a4c6 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 13 Jan 2025 13:39:22 +0100
Subject: [PATCH] ui: filter compSeries with table

---
 .../components/WidgetChart/WidgetChart.tsx    | 13 ++++++--
 .../WidgetDatatable/WidgetDatatable.tsx       | 32 +++++++++++++++----
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 2699bf4c7..2a9ca98cb 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -289,6 +289,12 @@ function WidgetChart(props: Props) {
       chartData.namesMap = Array.isArray(chartData.namesMap)
         ? chartData.namesMap.map((n) => (enabledRows.includes(n) ? n : null))
         : chartData.namesMap;
+      const compDataCopy = { ...compData };
+      compDataCopy.namesMap = Array.isArray(compDataCopy.namesMap)
+        ? compDataCopy.namesMap.map((n) =>
+            enabledRows.includes(n) ? n : null
+          )
+        : compDataCopy.namesMap;
 
       if (viewType === 'lineChart') {
         return (
@@ -297,7 +303,7 @@ function WidgetChart(props: Props) {
             chartName={_metric.name}
             inGrid={!props.isPreview}
             data={chartData}
-            compData={compData}
+            compData={compDataCopy}
             onClick={onChartClick}
             label={
               _metric.metricOf === 'sessionCount'
@@ -332,7 +338,7 @@ function WidgetChart(props: Props) {
           <BarChart
             inGrid={!props.isPreview}
             data={chartData}
-            compData={compData}
+            compData={compDataCopy}
             params={params}
             colors={colors}
             onClick={onChartClick}
@@ -352,7 +358,7 @@ function WidgetChart(props: Props) {
             inGrid={!props.isPreview}
             horizontal
             data={chartData}
-            compData={compData}
+            compData={compDataCopy}
             params={params}
             colors={colors}
             onSeriesFocus={onFocus}
@@ -529,6 +535,7 @@ function WidgetChart(props: Props) {
           {renderChart()}
           {showTable ? (
             <WidgetDatatable
+              compData={compData}
               inBuilder={props.isPreview}
               defaultOpen={true}
               data={data}
diff --git a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
index 0ac049bbc..d4dfea6cc 100644
--- a/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
@@ -25,6 +25,7 @@ const initTableProps = [
 
 interface Props {
   data: { chart: any[]; namesMap: string[] };
+  compData?: { chart: any[]; namesMap: string[] };
   enabledRows: string[];
   setEnabledRows: (rows: string[]) => void;
   defaultOpen?: boolean;
@@ -35,10 +36,30 @@ interface Props {
 function WidgetDatatable(props: Props) {
   const [tableProps, setTableProps] =
     useState<TableProps['columns']>(initTableProps);
-  const data = props.data;
+  const data = React.useMemo(() => {
+    const dataObj = { ...props.data }
+    if (props.compData) {
+      dataObj.chart = dataObj.chart.map((item, i) => {
+        const compItem = props.compData!.chart[i];
+        const newItem = { ...item };
+        Object.keys(compItem).forEach((key) => {
+          if (key !== 'timestamp' && key !== 'time') {
+            newItem[key] = compItem[key];
+          }
+        });
+        return newItem;
+      });
+      const blank = new Array(dataObj.namesMap.length * 2).fill('');
+      dataObj.namesMap = blank.map((_, i) => {
+        return i % 2 !== 0
+          ? `Previous ${dataObj.namesMap[i / 2]}`
+          : dataObj.namesMap[i / 2];
+      })
+    }
+    return dataObj
+  }, [props.data, props.compData]);
 
   const [showTable, setShowTable] = useState(props.defaultOpen);
-  const hasMultipleSeries = data.namesMap.length > 1;
   const [tableData, setTableData] = useState([]);
 
   const columnNames = new Set();
@@ -52,9 +73,8 @@ function WidgetDatatable(props: Props) {
    * */
   const series = !data.chart[0]
     ? []
-    : Object.keys(data.chart[0]).filter(
-        (key) => key !== 'time' && key !== 'timestamp'
-      );
+    : data.namesMap;
+
   React.useEffect(() => {
     if (!data.chart) return;
     setTableProps(initTableProps);
@@ -99,6 +119,7 @@ function WidgetDatatable(props: Props) {
 
     setTableProps((prev) => [...prev, ...tableCols]);
     setTableData(items);
+    props.setEnabledRows(data.namesMap);
   }, [data.chart]);
 
   const rowSelection: TableProps['rowSelection'] = {
@@ -114,7 +135,6 @@ function WidgetDatatable(props: Props) {
   };
 
   const isTableOnlyMode = props.metric.viewType === 'table';
-
   return (
     <div className={cn('relative -mx-4 px-2', showTable ? '' : '')}>
       {!isTableOnlyMode && (