fix(ui): card issues and avg time in path analysis

frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx

@@ -57,7 +57,7 @@ function CardIssues() {
     }
   };
 
-  const handleClick = (issue: any) => {
+  const handleClick = (issue?: any) => {
     showModal(<SessionsModal issue={issue} list={[]} />, { right: true, width: 900 });
   };
 
@@ -89,7 +89,7 @@ function CardIssues() {
           )}
         </div>
         <div>
-          <Button variant='text-primary'>All Sessions</Button>
+          <Button variant='text-primary' onClick={() => handleClick()}>All Sessions</Button>
         </div>
       </div>
 

frontend/app/components/Dashboard/components/SessionsModal/SessionsModal.tsx

@@ -25,13 +25,15 @@ function SessionsModal(props: Props) {
 
   const fetchSessions = async (filter: any) => {
     setLoading(true);
-    filter.filters = [
+    filter.filters = [];
-      {
+
+    if (issue) {
+      filter.filters.push({
         type: 'issue',
         operator: 'is',
         value: [issue.type]
-      }
+      });
-    ];
+    }
     const res = await metricService.fetchSessions(null, filter);
     console.log('res', res);
     setList(res[0].sessions.map((item: any) => new Session().fromJson(item)));
@@ -43,15 +45,10 @@ function SessionsModal(props: Props) {
     fetchSessions({ ...dashboardStore.drillDownFilter, ...metricStore.instance.toJson(), limit: 10, page: page });
   }, [page]);
 
-  useEffect(() => {
-    fetchSessions({ ...dashboardStore.drillDownFilter, ...metricStore.instance.toJson(), limit: 10, page: 1 });
-  }, [props.issue]);
-
-
   return (
     <div className='bg-white h-screen'>
       <Modal.Header title='Sessions'>
-        Sessions with selected issue
+        {issue ? 'Sessions with selected issue' : 'All sessions'}
       </Modal.Header>
       <Loader loading={loading}>
         <NoContent show={length == 0} title='No data!'>

frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx

@@ -17,7 +17,7 @@ function NodeButton(props: Props) {
   return (
     <div className='relative'>
       <Popover content={
-        <div className='bg-white rounded w-fit mt-1 text-xs'>
+        <div className='bg-white rounded mt-1 text-xs'>
           <div className='border-b py-1 px-2 flex items-center'>
             <div className='w-6 shrink-0'>
               <Icon name='link-45deg' size={18} />
@@ -30,14 +30,17 @@ function NodeButton(props: Props) {
             </div>
             <div className='ml-1 font-medium'>Continuing {Math.round(payload.value)}%</div>
           </div>
-          <div className='border-b py-1 px-2 flex items-center'>
+          {payload.avgTimeFromPrevious && (
-            <div className='w-6 shrink-0'>
+            <div className='border-b py-1 px-2 flex items-center'>
-              <Icon name='clock-history' size={16} />
+              <div className='w-6 shrink-0'>
+                <Icon name='clock-history' size={16} />
+              </div>
+
+              <div className='ml-1 font-medium'>
+                Average time from previous step <span>{payload.avgTimeFromPrevious}</span>
+              </div>
             </div>
-            <div className='ml-1 font-medium'>
+          )}
-              Average time from previous step <span>{payload.avgTimeFromPrevious}</span>
-            </div>
-          </div>
         </div>
       } title={<div className='text-sm'>Title</div>}>
         <div

frontend/app/components/shared/Insights/SankeyChart/SankeyChart.tsx

@@ -5,7 +5,7 @@ import CustomNode from './CustomNode';
 import { NoContent } from 'UI';
 
 interface Node {
-  id: number;  // Assuming you missed this from your interface
+  idd: number;
   name: string;
   eventType: string;
   avgTimeFromPrevious: number | null;

frontend/app/date.ts

@@ -3,20 +3,41 @@
 import { DateTime, Duration } from 'luxon'; // TODO
 import { Timezone } from 'MOBX/types/sessionSettings';
 
-export const durationFormatted = (duration: Duration):string => {
+/**
-  if (duration.as('minutes') < 1) { // show in seconds
+ * Formats a given duration.
-    duration = duration.toFormat('s\'s\'');
+ *
-  } else if (duration.as('hours') < 1) { // show in minutes
+ * @param {Duration | number} inputDuration - The duration to format. Can be a Duration object or a number representing milliseconds.
-    duration = duration.toFormat('m\'m\'s\'s');
+ * @returns {string} - Formatted duration string.
-  } else if (duration.as('days') < 1) { // show in hours and minutes
+ *
-    duration = duration.toFormat('h\'h\'m\'m');
+ * @example
-  } else if (duration.as('months') < 1) { // show in days and hours
+ *
-    duration = duration.toFormat('d\'d\'h\'h');
+ * // Format a duration from a Duration object
+ * const duration1 = Duration.fromObject({ hours: 2, minutes: 30 });
+ * console.log(durationFormatted(duration1)); // Outputs: "2h30m"
+ *
+ * // Format a duration from milliseconds
+ * console.log(durationFormatted(55000)); // Outputs: "55s"
+ */
+export const durationFormatted = (inputDuration: Duration | number): string => {
+  let duration: Duration;
+
+  if (inputDuration instanceof Duration) {
+    duration = inputDuration;
   } else {
-    duration = duration.toFormat('m\'m\'s\'s\'');
+    duration = Duration.fromMillis(inputDuration);
   }
 
-  return duration;
+  if (duration.as('minutes') < 1) { // show in seconds
+    return duration.toFormat('s\'s\'');
+  } else if (duration.as('hours') < 1) { // show in minutes
+    return duration.toFormat('m\'m\'s\'s\'');
+  } else if (duration.as('days') < 1) { // show in hours and minutes
+    return duration.toFormat('h\'h\'m\'m\'');
+  } else if (duration.as('months') < 1) { // show in days and hours
+    return duration.toFormat('d\'d\'h\'h\'');
+  } else {
+    return duration.toFormat('m\'m\'s\'s\'');
+  }
 };
 
 export function durationFromMsFormatted(ms: number): string {
@@ -44,7 +65,7 @@ export const durationFormattedFull = (duration: Duration): string => {
     duration = d + (d > 1 ? ' days' : ' day');
   } else {
     let d = Math.trunc(duration.as('months'));
-    duration = d + (d > 1 ? ' months' : ' month');;
+    duration = d + (d > 1 ? ' months' : ' month');
   }
 
   return duration;

frontend/app/mstore/types/widget.ts

@@ -14,6 +14,7 @@ import { getChartFormatter } from 'Types/dashboard/helper';
 import FilterItem from './filterItem';
 import { filtersMap } from 'Types/filter/newFilter';
 import Issue from '../types/issue';
+import { durationFormatted } from 'App/date';
 
 export class InsightIssue {
   icon: string;
@@ -264,12 +265,12 @@ export default class Widget {
     if (this.metricType === USER_PATH) {
       _data['nodes'] = data.nodes.map((s: any) => ({
         ...s,
+        avgTimeFromPrevious: s.avgTimeFromPrevious ? durationFormatted(s.avgTimeFromPrevious) : null,
         idd: Math.random().toString(36).substring(7),
       }));
       _data['links'] = data.links.map((s: any) => ({
         ...s,
         id: Math.random().toString(36).substring(7),
-        // value: Math.round(s.value),
       }));
 
       Object.assign(this.data, _data);