From 8f6731b7d29295f4ed639fbadd53902809e609ac Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 14 Jan 2025 14:15:27 +0100
Subject: [PATCH] ui: move focus to session list on line click

---
 .../components/WidgetChart/WidgetChart.tsx    |  2 ++
 .../WidgetSessions/WidgetSessions.tsx         | 19 +++++++++++++++----
 frontend/app/mstore/metricStore.ts            |  5 +++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 2a9ca98cb..0c0947071 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -89,6 +89,7 @@ function WidgetChart(props: Props) {
   }, [data.chart]);
 
   const onChartClick = (event: any) => {
+    metricStore.setDrillDown(true);
     if (event) {
       if (isTableWidget || isPieChart) {
         // get the filter of clicked row
@@ -216,6 +217,7 @@ function WidgetChart(props: Props) {
 
   const onFocus = (seriesName: string)=> {
     metricStore.setFocusedSeriesName(seriesName);
+    metricStore.setDrillDown(true)
   }
 
   const renderChart = React.useCallback(() => {
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index c7a1c44f7..b2e8dcc3a 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { NoContent, Loader, Pagination } from 'UI';
-import {Button, Tag, Tooltip, Select, Dropdown} from 'antd';
+import {Button, Tag, Tooltip, Dropdown, notification} from 'antd';
 import {UndoOutlined, DownOutlined} from '@ant-design/icons'
-//import Select from 'Shared/Select';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import SessionItem from 'Shared/SessionItem';
@@ -19,6 +18,7 @@ interface Props {
 }
 
 function WidgetSessions(props: Props) {
+  const listRef = React.useRef<HTMLDivElement>(null);
   const { className = '' } = props;
   const [activeSeries, setActiveSeries] = useState('all');
   const [data, setData] = useState<any>([]);
@@ -63,6 +63,17 @@ function WidgetSessions(props: Props) {
       .fetchSessions(metricId, filter)
       .then((res: any) => {
         setData(res);
+        if (metricStore.drillDown) {
+          setTimeout(() => {
+            notification.open({
+              placement: 'top',
+              role: 'status',
+              message: 'Sessions Refreshed!'
+            })
+            listRef.current?.scrollIntoView({ behavior: 'smooth' });
+            metricStore.setDrillDown(false);
+          }, 0)
+        }
       })
       .finally(() => {
         setLoading(false);
@@ -181,7 +192,7 @@ function WidgetSessions(props: Props) {
         </div>
       </div>
 
-      <div className="mt-3">
+      <div className="mt-3" >
         <Loader loading={loading}>
           <NoContent
             title={
@@ -202,7 +213,7 @@ function WidgetSessions(props: Props) {
               </React.Fragment>
             ))}
 
-            <div className="flex items-center justify-between p-5">
+            <div className="flex items-center justify-between p-5" ref={listRef}>
               <div>
                 Showing{' '}
                 <span className="font-medium">
diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts
index db2a2e2d9..40ebb01a3 100644
--- a/frontend/app/mstore/metricStore.ts
+++ b/frontend/app/mstore/metricStore.ts
@@ -102,6 +102,7 @@ export default class MetricStore {
   cardCategory: string | null = CATEGORIES.product_analytics;
 
   focusedSeriesName: string | null = null;
+  drillDown = false;
 
   constructor() {
     makeAutoObservable(this);
@@ -138,6 +139,10 @@ export default class MetricStore {
     this.instance.update(metric || new Widget());
   }
 
+  setDrillDown(val: boolean) {
+    this.drillDown = val;
+  }
+
   setFocusedSeriesName(name: string | null, resetOnSame = true) {
     if (this.focusedSeriesName === name && resetOnSame) {
       this.focusedSeriesName = null;