From 0484c0ccdd286dcc537bc9cb22bcae944831aa58 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Thu, 30 Jan 2025 18:06:12 +0100
Subject: [PATCH] ui: tracked user profile and list (#2991)

* ui: tracked user profile and list

* ui: turnoff unsupported node cb

* ui: excess toggle
---
 .../app/components/Charts/SankeyChart.tsx     | 49 +++++++++++++++++--
 .../components/WidgetChart/WidgetChart.tsx    |  5 +-
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/frontend/app/components/Charts/SankeyChart.tsx b/frontend/app/components/Charts/SankeyChart.tsx
index a86251092d..fc0d60750b 100644
--- a/frontend/app/components/Charts/SankeyChart.tsx
+++ b/frontend/app/components/Charts/SankeyChart.tsx
@@ -163,15 +163,54 @@ const EChartsSankey: React.FC<Props> = (props) => {
 
     chart.on('click', function (params) {
       if (!onChartClick) return;
-
+      const unsupported = ['other', 'drop']
       if (params.dataType === 'node') {
-        const nodeIndex = params.dataIndex;
-        const node = data.nodes[nodeIndex];
-        onChartClick([{ node }]);
+        const node: any = params.data;
+        const filters = []
+        if (node.type) {
+          const type = node.type.toLowerCase();
+          if (unsupported.includes(type)) {
+            return
+          }
+          filters.push({
+            operator: 'is',
+            type: type,
+            value: [node.name],
+            isEvent: true,
+          });
+        }
+        onChartClick?.(filters);
       } else if (params.dataType === 'edge') {
         const linkIndex = params.dataIndex;
         const link = data.links[linkIndex];
-        onChartClick([{ link }]);
+        const firstNode = data.nodes.find(n => n.id === link.source)
+        const lastNode = data.nodes.find(n => n.id === link.target)
+
+        const firstNodeType = firstNode?.eventType?.toLowerCase() ?? 'location';
+        const lastNodeType = lastNode?.eventType?.toLowerCase() ?? 'location';
+        if (unsupported.includes(firstNodeType) || unsupported.includes(lastNodeType)) {
+          return
+        }
+        const filters = [];
+        if (firstNode) {
+          filters.push({
+            operator: 'is',
+            type: firstNodeType,
+            value: [firstNode.name],
+            isEvent: true
+          });
+        }
+
+        if (lastNode) {
+          filters.push({
+            operator: 'is',
+            type: lastNodeType,
+            value: [lastNode.name],
+            isEvent: true
+          });
+        }
+
+        onChartClick?.(filters);
       }
     });
 
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 50044f9831..9a0fa5efd0 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -218,6 +218,7 @@ function WidgetChart(props: Props) {
     drillDownPeriod,
     period,
     depsString,
+    metric.hideExcess,
     dashboardStore.selectedDensity,
     _metric.metricType,
     _metric.metricOf,
@@ -512,11 +513,11 @@ function WidgetChart(props: Props) {
     }
 
     if (metricType === USER_PATH && data && data.links) {
-      const usedData = _metric.hideExcess ? filterMinorPaths(data) : data;
+      // const usedData = _metric.hideExcess ? filterMinorPaths(data) : data;
       return (
         <SankeyChart
           height={props.isPreview ? 500 : 240}
-          data={usedData}
+          data={data}
           onChartClick={(filters: any) => {
             dashboardStore.drillDownFilter.merge({ filters, page: 1 });
           }}