From 4819907635ec2216d39b5c817888d0abcc72b135 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Tue, 11 Feb 2025 13:07:55 +0100
Subject: [PATCH] ui: fix sankey node titles, fix option saving,

---
 .../app/components/Charts/SankeyChart.tsx     | 41 ++++++++++++-------
 .../components/WidgetChart/WidgetChart.tsx    |  2 -
 .../components/WidgetForm/WidgetFormNew.tsx   |  7 +++-
 frontend/app/mstore/types/widget.ts           |  1 +
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/frontend/app/components/Charts/SankeyChart.tsx b/frontend/app/components/Charts/SankeyChart.tsx
index 96e64d5a5..4f74bf8f7 100644
--- a/frontend/app/components/Charts/SankeyChart.tsx
+++ b/frontend/app/components/Charts/SankeyChart.tsx
@@ -4,7 +4,6 @@ import { SankeyChart } from 'echarts/charts';
 import { sankeyTooltip, getEventPriority, getNodeName } from './sankeyUtils';
 import { NoContent } from 'App/components/ui';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { X } from 'lucide-react';
 
 echarts.use([SankeyChart]);
 
@@ -210,8 +209,15 @@ const EChartsSankey: React.FC<Props> = (props) => {
                 ? ((nodeVal / startNodeValue) * 100).toFixed(1) + '%'
                 : '0%';
 
+              const maxLen = 20;
+              const safeName =
+                params.name.length > maxLen
+                  ? params.name.slice(0, maxLen / 2 - 2) +
+                    '...' +
+                    params.name.slice(-(maxLen / 2 - 2))
+                  : params.name;
               return (
-                `{header|${params.name}}\n` +
+                `{header|${safeName}}\n` +
                 `{body|}{percentage|${percentage}}  {sessions|${nodeVal}}`
               );
             },
@@ -352,11 +358,11 @@ const EChartsSankey: React.FC<Props> = (props) => {
 
       if (params.dataType === 'node') {
         const node = params.data;
-        const filters = []
+        const filters = [];
         if (node && node.type) {
           const type = node.type.toLowerCase();
           if (unsupported.includes(type)) {
-            return
+            return;
           }
           filters.push({
             operator: 'is',
@@ -370,12 +376,15 @@ const EChartsSankey: React.FC<Props> = (props) => {
         const linkIndex = params.dataIndex;
         const link = filteredLinks[linkIndex];
 
-        const firstNode = data.nodes.find(n => n.id === link.source)
-        const lastNode = data.nodes.find(n => n.id === link.target)
+        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
+        if (
+          unsupported.includes(firstNodeType) ||
+          unsupported.includes(lastNodeType)
+        ) {
+          return;
         }
         const filters = [];
         if (firstNode) {
@@ -383,7 +392,7 @@ const EChartsSankey: React.FC<Props> = (props) => {
             operator: 'is',
             type: firstNodeType,
             value: [firstNode.name],
-            isEvent: true
+            isEvent: true,
           });
         }
 
@@ -392,7 +401,7 @@ const EChartsSankey: React.FC<Props> = (props) => {
             operator: 'is',
             type: lastNodeType,
             value: [lastNode.name],
-            isEvent: true
+            isEvent: true,
           });
         }
 
@@ -426,11 +435,13 @@ const EChartsSankey: React.FC<Props> = (props) => {
   }
 
   return (
-    <div
-      ref={chartRef}
-      style={containerStyle}
-      className="min-w-[600px] overflow-scroll"
-    />
+    <div style={{ maxHeight: 620, overflow: 'auto', maxWidth: 840, }}>
+      <div
+        ref={chartRef}
+        style={containerStyle}
+        className="min-w-[600px] overflow-scroll"
+      />
+    </div>
   );
 };
 
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index aca8a8277..e5448f57d 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -145,8 +145,6 @@ function WidgetChart(props: Props) {
       .fetchMetricChartData(metric, payload, isSaved, period, isComparison)
       .then((res: any) => {
         if (isComparison) setCompData(res);
-        // /65/metrics/1014
-        if (metric.metricId === 1014) return;
         clearTimeout(tm)
         setStale(false)
       })
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
index 8c4a95770..63aea3cfa 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
@@ -195,6 +195,10 @@ const PathAnalysisFilter = observer(({ metric, writeOption }: any) => {
     { value: 'input', label: 'Input' },
     { value: 'custom', label: 'Custom Events' },
   ];
+
+  const onPointChange = (value: any) => {
+    writeOption({ name: 'startType', value: { value } })
+  }
   return (
     <div className="rounded-lg bg-white border">
       <div className='flex flex-col justify-start gap-2 flex-wrap'>
@@ -210,7 +214,7 @@ const PathAnalysisFilter = observer(({ metric, writeOption }: any) => {
                 { value: 'end', label: 'End Point' },
               ]}
               defaultValue={metric.startType || 'start'}
-              onChange={(value) => writeOption({ name: 'startType', value })}
+              onChange={onPointChange}
               placeholder="Select Start Type"
               size="small"
             />
@@ -220,7 +224,6 @@ const PathAnalysisFilter = observer(({ metric, writeOption }: any) => {
             <Select
               mode="multiple"
               className="rounded-lg h-[26px] w-max	min-w-44 max-w-58"
-              // style={{ width: 'auto', minWidth: '9rem', maxWidth: '12rem' }}
               allowClear
               name="metricValue"
               options={metricValueOptions}
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index e961db7ac..fef672469 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -182,6 +182,7 @@ export default class Widget {
             if (this.metricType === USER_PATH) {
                 this.hideExcess = json.hideExcess;
                 this.startType = json.startType;
+                this.metricValue = json.metricValue && json.metricValue.length > 0 ? json.metricValue : ['location'];
                 if (json.startPoint) {
                     if (Array.isArray(json.startPoint) && json.startPoint.length > 0) {
                         this.startPoint = new FilterItem().fromJson(json.startPoint[0]);