From 2136f87a27c0564d91f960df89e9cd36a5037c1b Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 12 Dec 2024 16:53:32 +0100
Subject: [PATCH] ui: fix crash with table metrics

---
 .../Dashboard/components/MetricTypeSelector.tsx  | 16 ++++++++++++++--
 .../components/WidgetChart/WidgetChart.tsx       |  4 +---
 frontend/app/mstore/metricStore.ts               | 14 ++++++++++----
 frontend/app/mstore/types/widget.ts              |  2 +-
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
index 2becd1f6f..f8b58195e 100644
--- a/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
+++ b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
@@ -3,6 +3,9 @@ import { Segmented } from 'antd';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { tabItems } from 'Components/Dashboard/components/AddCardSection/AddCardSection'
+import {
+  CARD_LIST,
+} from 'Components/Dashboard/components/DashboardList/NewDashModal/ExampleCards';
 
 function MetricTypeSelector() {
   const { metricStore } = useStore();
@@ -16,10 +19,19 @@ function MetricTypeSelector() {
     icon: opt.icon,
   }))
   const onChange = (type: string) => {
-    metricStore.changeType(type);
+    const selectedCard = CARD_LIST.find((i) => i.key === type);
+    if (selectedCard) {
+      metricStore.changeType(selectedCard.cardType, selectedCard.metricOf);
+    }
   };
 
-  const selected = options.find((i) => i.value === metric.metricType) || options[0];
+  const selected = options.find(
+    (i) => {
+      if (metric.metricType === 'table') {
+        return i.value === metric.metricOf;
+      }
+      return i.value === metric.metricType
+    }) || options[0];
   return (
     <Segmented onChange={onChange} options={options} value={selected.value} />
   );
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index e430971df..a52c98e75 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -433,7 +433,7 @@ function WidgetChart(props: Props) {
         return (
           <SessionsBy
             metric={metric}
-            data={data[0]}
+            data={data}
             onClick={onChartClick}
             isTemplate={isTemplate}
           />
@@ -496,8 +496,6 @@ function WidgetChart(props: Props) {
         return <CohortCard data={data[0]} />;
       }
     }
-
-    console.log('Unknown metric type', metricType, viewType);
     return <div>Unknown metric type</div>;
   }, [data, compData, enabledRows, metric]);
 
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index 0b5868c1e..b72eb6c11 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -68,7 +68,7 @@ export default class MetricStore {
   clickMapSearch = '';
   clickMapLabel = '';
 
-  cardCategory: string | null = null;
+  cardCategory: string | null = CATEGORIES.product_analytics;
 
   constructor() {
     makeAutoObservable(this);
@@ -159,7 +159,7 @@ export default class MetricStore {
     this.instance.updateKey('hasChanged', updateChangeFlag);
   }
 
-  changeType(value: string) {
+  changeType(value: string, metricOf?: string) {
     const defaultData = {
       sessionId: '',
       sessions: [],
@@ -168,7 +168,8 @@ export default class MetricStore {
       chart: [],
       namesMap: {},
       avg: 0,
-      percentiles: []
+      percentiles: [],
+      values: [],
     };
     const obj: any = { metricType: value, data: defaultData };
     obj.series = this.instance.series;
@@ -233,6 +234,10 @@ export default class MetricStore {
       }
     }
 
+    if (metricOf) {
+      obj['metricOf'] = metricOf;
+    }
+
     this.instance.update(obj);
   }
 
@@ -326,7 +331,8 @@ export default class MetricStore {
         const inst = new Widget().fromJson(metric, period)
         runInAction(() => {
           this.instance = inst;
-          this.cardCategory = cardToCategory(inst.metricType);
+          const type = inst.metricType === 'table' ? inst.metricOf : inst.metricType
+          this.cardCategory = cardToCategory(type);
         })
         return inst;
       })
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 0dd1a5a70..b4084ceea 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -325,7 +325,7 @@ export default class Widget {
             _data.funnel = new Funnel().fromJSON(data);
         } else if (this.metricType === TABLE) {
             const total = data[0]['total'];
-            _data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, total, this.metricOf));
+            _data['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, total, this.metricOf));
         } else {
             if (data.hasOwnProperty('chart')) {
                 _data['value'] = data.value;