diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx index 51b4ef53f..b5acb47a7 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx +++ b/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 diff --git a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx b/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx index 580bd1ed7..a8a89e7cb 100644 --- a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx +++ b/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(() => { diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 323f299e6..53ea400ab 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/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: {