ui: fix widget setData -> create new ref

frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx

@@ -1,33 +1,33 @@
-import React, {useEffect, useState} from 'react';
-import {NoContent, Loader, Pagination} from 'UI';
-import {Button, Tag, Tooltip, Dropdown, message} from 'antd';
-import {UndoOutlined, DownOutlined} from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { NoContent, Loader, Pagination } from 'UI';
+import { Button, Tag, Tooltip, Dropdown, message } from 'antd';
+import { UndoOutlined, DownOutlined } from '@ant-design/icons';
 import cn from 'classnames';
-import {useStore} from 'App/mstore';
+import { useStore } from 'App/mstore';
 import SessionItem from 'Shared/SessionItem';
-import {observer} from 'mobx-react-lite';
-import {DateTime} from 'luxon';
-import {debounce, numberWithCommas} from 'App/utils';
+import { observer } from 'mobx-react-lite';
+import { DateTime } from 'luxon';
+import { debounce, numberWithCommas } from 'App/utils';
 import useIsMounted from 'App/hooks/useIsMounted';
-import AnimatedSVG, {ICONS} from 'Shared/AnimatedSVG/AnimatedSVG';
-import {HEATMAP, USER_PATH, FUNNEL} from 'App/constants/card';
-import {useTranslation} from 'react-i18next';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { HEATMAP, USER_PATH, FUNNEL } from 'App/constants/card';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   className?: string;
 }
 
 function WidgetSessions(props: Props) {
-    const {t} = useTranslation();
+  const { t } = useTranslation();
   const listRef = React.useRef<HTMLDivElement>(null);
-    const {className = ''} = props;
+  const { className = '' } = props;
   const [activeSeries, setActiveSeries] = useState('all');
   const [data, setData] = useState<any>([]);
   const isMounted = useIsMounted();
   const [loading, setLoading] = useState(false);
   // all filtering done through series now
   const filteredSessions = getListSessionsBySeries(data, 'all');
-    const {dashboardStore, metricStore, sessionStore, customFieldStore} =
+  const { dashboardStore, metricStore, sessionStore, customFieldStore } =
     useStore();
   const focusedSeries = metricStore.focusedSeriesName;
   const filter = dashboardStore.drillDownFilter;
@@ -39,7 +39,7 @@ function WidgetSessions(props: Props) {
     'LLL dd, yyyy HH:mm',
   );
   const [seriesOptions, setSeriesOptions] = useState([
-        {label: t('All'), value: 'all'},
+    { label: t('All'), value: 'all' },
   ]);
   const hasFilters =
     filter.filters.length > 0 ||
@@ -61,7 +61,7 @@ function WidgetSessions(props: Props) {
       label: item.name,
       value: item.seriesId ?? item.name,
     }));
-        setSeriesOptions([{label: t('All'), value: 'all'}, ...seriesOptions]);
+    setSeriesOptions([{ label: t('All'), value: 'all' }, ...seriesOptions]);
   }, [widget.series.length]);
 
   const fetchSessions = (metricId: any, filter: any) => {
@@ -74,9 +74,8 @@ function WidgetSessions(props: Props) {
       }
     }
 
-
     setLoading(true);
-        const filterCopy = {...filter};
+    const filterCopy = { ...filter };
     delete filterCopy.eventsOrderSupport;
 
     try {
@@ -101,7 +100,7 @@ function WidgetSessions(props: Props) {
         if (metricStore.drillDown) {
           setTimeout(() => {
             message.info(t('Sessions Refreshed!'));
-                        listRef.current?.scrollIntoView({behavior: 'smooth'});
+            listRef.current?.scrollIntoView({ behavior: 'smooth' });
             metricStore.setDrillDown(false);
           }, 0);
         }
@@ -112,7 +111,7 @@ function WidgetSessions(props: Props) {
   };
   const fetchClickmapSessions = (customFilters: Record<string, any>) => {
     sessionStore.getSessions(customFilters).then((data) => {
-            setData([{...data, seriesId: 1, seriesName: 'Clicks'}]);
+      setData([{ ...data, seriesId: 1, seriesName: 'Clicks' }]);
     });
   };
   const debounceRequest: any = React.useCallback(
@@ -195,7 +194,7 @@ function WidgetSessions(props: Props) {
     metricStore.clickMapSearch,
     focusedSeries,
     widget.startPoint,
-        widget.data.nodes,
+    widget.data?.nodes,
     metricStore.disabledSeries.length,
   ]);
   useEffect(loadData, [metricStore.sessionsPage]);
@@ -254,7 +253,7 @@ function WidgetSessions(props: Props) {
             {hasFilters && (
               <Tooltip title={t('Clear Drilldown')} placement="top">
                 <Button type="text" size="small" onClick={clearFilters}>
-                                    <UndoOutlined/>
+                  <UndoOutlined />
                 </Button>
               </Tooltip>
             )}
@@ -290,7 +289,7 @@ function WidgetSessions(props: Props) {
                 <Button type="text" size="small">
                   {seriesOptions.find((option) => option.value === activeSeries)
                     ?.label || t('Select Series')}
-                                    <DownOutlined/>
+                  <DownOutlined />
                 </Button>
               </Dropdown>
             </div>
@@ -303,8 +302,8 @@ function WidgetSessions(props: Props) {
           <NoContent
             title={
               <div className="flex items-center justify-center flex-col">
-                                <AnimatedSVG name={ICONS.NO_SESSIONS} size={60}/>
-                                <div className="mt-4"/>
+                <AnimatedSVG name={ICONS.NO_SESSIONS} size={60} />
+                <div className="mt-4" />
                 <div className="text-center">
                   {t('No relevant sessions found for the selected time period')}
                 </div>
@@ -319,7 +318,7 @@ function WidgetSessions(props: Props) {
                   session={session}
                   metaList={metaList}
                 />
-                                <div className="border-b"/>
+                <div className="border-b" />
               </React.Fragment>
             ))}
 
@@ -383,7 +382,7 @@ const getListSessionsBySeries = (data: any, seriesId: any) => {
       }
       return arr;
     },
-        {sessions: []},
+    { sessions: [] },
   );
   arr.total =
     seriesId === 'all'

frontend/app/mstore/types/widget.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, runInAction } from 'mobx';
+import { makeAutoObservable, runInAction, observable } from 'mobx';
 import FilterSeries from './filterSeries';
 import { DateTime } from 'luxon';
 import Session from 'App/mstore/types/session';
@@ -433,13 +433,15 @@ export default class Widget {
     }
 
     if (!isComparison) {
-      runInAction(() => {
-        Object.assign(this.data, _data);
-      });
+      this.setDataValue(_data);
     }
     return _data;
   }
 
+  setDataValue = (data: any) => {
+    this.data = observable({ ...data });
+  };
+
   fetchSessions(metricId: any, filter: any): Promise<any> {
     return new Promise((resolve) => {
       metricService.fetchSessions(metricId, filter).then((response: any[]) => {