From f149c39b52e238cf43c5ca8b5dd675da45954692 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 6 Nov 2023 14:32:41 +0100
Subject: [PATCH] fix(ui): path analysis session fitlers

---
 .../components/CardIssues/CardIssues.tsx      | 24 +++++++++++--------
 .../SessionsModal/SessionsModal.tsx           | 11 ++++-----
 .../Insights/SankeyChart/CustomNode.tsx       |  2 +-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index 9cc762ff3..c07c93d90 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useStore } from 'App/mstore';
 import { observer, useObserver } from 'mobx-react-lite';
-import { Loader, Pagination, Button, NoContent } from 'UI';
+import { Button, Loader, NoContent, Pagination } from 'UI';
 
 import { debounce } from 'App/utils';
 import useIsMounted from 'App/hooks/useIsMounted';
@@ -22,14 +22,10 @@ function CardIssues() {
   const pageSize = 5;
   const { showModal } = useModal();
 
-  const fetchIssues = async (filter: any) => {
-    if (!isMounted()) return;
-
-    setLoading(true);
-
+  function getFilters(filter: any) {
     const mapSeries = (item: any) => {
       const filters = item.filter.filters
-        .map((f: any) => f.toJson());
+          .map((f: any) => f.toJson());
 
       return {
         ...item,
@@ -40,12 +36,20 @@ function CardIssues() {
       };
     };
 
-    const newFilter = {
+    return {
       ...filter,
       limit: pageSize,
       page: metricStore.sessionsPage,
       series: filter.series.map(mapSeries)
     };
+  }
+
+  const fetchIssues = async (filter: any) => {
+    if (!isMounted()) return;
+
+    setLoading(true);
+
+    const newFilter = getFilters(filter);
 
     try {
       const res = await widget.fetchIssues(newFilter);
@@ -58,7 +62,8 @@ function CardIssues() {
   };
 
   const handleClick = (issue?: any) => {
-    showModal(<SessionsModal issue={issue} list={[]} />, { right: true, width: 900 });
+    // const filters = getFilters(widget.filter);
+    showModal(<SessionsModal issue={issue} />, { right: true, width: 900 });
   };
 
   const filter = useObserver(() => dashboardStore.drillDownFilter);
@@ -104,7 +109,6 @@ function CardIssues() {
       </Loader>
 
       <div className='w-full flex items-center justify-between pt-4'>
-
         <div className='text-disabled-text'>
           {data.total && (
             <>
diff --git a/frontend/app/components/Dashboard/components/SessionsModal/SessionsModal.tsx b/frontend/app/components/Dashboard/components/SessionsModal/SessionsModal.tsx
index 0b07974e7..ea8f07fb2 100644
--- a/frontend/app/components/Dashboard/components/SessionsModal/SessionsModal.tsx
+++ b/frontend/app/components/Dashboard/components/SessionsModal/SessionsModal.tsx
@@ -8,8 +8,7 @@ import Session from 'App/mstore/types/session';
 import { useModal } from 'Components/Modal';
 
 interface Props {
-  list: any,
-  issue: any
+  issue: any,
 }
 
 function SessionsModal(props: Props) {
@@ -25,17 +24,17 @@ function SessionsModal(props: Props) {
 
   const fetchSessions = async (filter: any) => {
     setLoading(true);
-    filter.filters = [];
+    const _filter = { ...filter };
 
     if (issue) {
-      filter.filters.push({
+      _filter.filters.push({
         type: 'issue',
         operator: 'is',
         value: [issue.type]
       });
     }
-    const res = await metricService.fetchSessions(null, filter);
-    console.log('res', res);
+    const res = await metricService.fetchSessions(null, _filter);
+
     setList(res[0].sessions.map((item: any) => new Session().fromJson(item)));
     setTotal(res[0].total);
     setLoading(false);
diff --git a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
index b43eae98d..a8862bf46 100644
--- a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
+++ b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
@@ -23,7 +23,7 @@ function CustomNode(props: any) {
       <foreignObject
         x={isOut ? x - 6 : x + width + 5}
         y={y + 5}
-        height='200'
+        height='70'
         style={{ width: '150px' }}
       >
         <NodeButton payload={payload} />