ui: tracked user profile and list (openreplay#2991)

* ui: tracked user profile and list * ui: turnoff unsupported node cb * ui: excess toggle
tahayk · Jan 30, 2025 · 0484c0c · 0484c0c
1 parent e72d492
commit 0484c0c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 7 deletions.
diff --git 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
@@ -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 });
           }}