fix ui: heatmap session refresh changes

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx

@@ -17,19 +17,20 @@ function ClickMapCard({
         metricStore.changeClickMapSearch(s, innerText)
     }
     const mapUrl = metricStore.instance.series[0].filter.filters[0].value[0]
+    const sessionId = metricStore.instance.data.sessionId
 
     React.useEffect(() => {
         return () => setCustomSession(null)
     }, [])
 
     React.useEffect(() => {
-        if (metricStore.instance.data.domURL) {
+        if (metricStore.instance.data.domURL && sessionId && sessionId !== customSession?.sessionId) {
             setCustomSession(null)
             setTimeout(() => {
                 setCustomSession(metricStore.instance.data)
             }, 100)
         }
-    }, [metricStore.instance])
+    }, [metricStore.instance, sessionId])
 
     React.useEffect(() => {
         const rangeValue = dashboardStore.drillDownPeriod.rangeValue

frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx

@@ -3,6 +3,7 @@ import { Checkbox } from "UI";
 import { Button } from 'antd'
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
+import { toJS } from 'mobx';
 
 function ClickMapRagePicker() {
     const { metricStore, dashboardStore } = useStore();
@@ -12,13 +13,19 @@ function ClickMapRagePicker() {
     }
 
     const refreshHeatmapSession = async () => {
+        const oldData = metricStore.instance.toJson()
         metricStore.instance.updateKey('data', { sessionId: null, domURL: [] })
-        await dashboardStore.fetchMetricChartData(
-          metricStore.instance,
-          {...metricStore.instance.toJson() },
-          false,
-          dashboardStore.period)
-        metricStore.instance.updateKey('hasChanged', true)
+        try {
+            await dashboardStore.fetchMetricChartData(
+              metricStore.instance,
+              oldData,
+              false,
+              dashboardStore.period)
+
+            metricStore.instance.updateKey('hasChanged', true)
+        } catch (e) {
+            console.error(e)
+        }
     }
 
     React.useEffect(() => {

frontend/app/mstore/types/widget.ts

@@ -85,7 +85,6 @@ export default class Widget {
     page: number = 1;
     limit: number = 20;
     thumbnail?: string;
-    sessionId?: string;
     params: any = {density: 70};
     startType: string = 'start';
     startPoint: FilterItem = new FilterItem(filtersMap[FilterKey.LOCATION]);
@@ -97,6 +96,7 @@ export default class Widget {
 
     position: number = 0;
     data: any = {
+        sessionId: '',
         sessions: [],
         issues: [],
         total: 0,
@@ -166,7 +166,7 @@ export default class Widget {
             this.predefinedKey = json.predefinedKey;
             this.category = json.category;
             this.thumbnail = json.thumbnail;
-            this.sessionId = json.sessionId;
+            this.data.sessionId = json.sessionId;
             this.isPublic = json.isPublic;
 
             if (this.metricType === FUNNEL) {
@@ -222,7 +222,7 @@ export default class Widget {
             name: this.name,
             series: this.series.map((series: any) => series.toJson()),
             thumbnail: this.thumbnail,
-            sessionId: this.sessionId,
+            sessionId: this.data.sessionId,
             page: this.page,
             limit: this.limit,
             config: {