From 8aa77ca98c88374df303089dda2d7a678b39a903 Mon Sep 17 00:00:00 2001
From: yaojp123 <15989103230@163.com>
Date: Mon, 9 Dec 2024 10:38:05 +0800
Subject: [PATCH] fix: add a crosshair of the same point in each chart when
 hover in a chart (#16)

Co-authored-by: yaojiping <yaojiping@infini.ltd>
---
 .../Overview/Cluster/Monitor/advanced.jsx     |  4 +--
 .../Overview/Node/Monitor/advanced.jsx        |  4 +--
 .../Overview/components/MetricChart.jsx       | 14 +++------
 .../Overview/components/cluster_metric.jsx    | 28 +++++++++++++++--
 .../Overview/components/index_metric.jsx      | 30 +++++++++++++++++--
 .../Overview/components/node_metric.jsx       | 30 +++++++++++++++++--
 .../Overview/components/queue_metric.jsx      | 30 +++++++++++++++++--
 7 files changed, 117 insertions(+), 23 deletions(-)

diff --git a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
index 0d37acb2..f7a3746f 100644
--- a/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
+++ b/web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
@@ -239,7 +239,7 @@ export default ({
                       "request_cache_miss"
                   ]
               ]
-          ]}
+          ].filter((item) => !!item && !!item[1])}
         />
       </Tabs.TabPane>
       <Tabs.TabPane
@@ -402,7 +402,7 @@ export default ({
                     "force_merge_threads"
                 ]
             ]
-        ].filter((item) => !!item)}
+        ].filter((item) => !!item && !!item[1])}
         />
       </Tabs.TabPane>
     </Tabs>
diff --git a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
index 5c85476c..5a405567 100644
--- a/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
+++ b/web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
@@ -201,7 +201,7 @@ export default ({
                     "request_cache_miss"
                 ]
             ]
-        ]}
+        ].filter((item) => !!item && !!item[1])}
         />
       </Tabs.TabPane>
       <Tabs.TabPane
@@ -286,7 +286,7 @@ export default ({
                     "force_merge_threads"
                 ]
             ]
-        ]}
+        ].filter((item) => !!item && !!item[1])}
         />
       </Tabs.TabPane>
     </Tabs>
diff --git a/web/src/pages/Platform/Overview/components/MetricChart.jsx b/web/src/pages/Platform/Overview/components/MetricChart.jsx
index 50602ab5..1603b7e3 100644
--- a/web/src/pages/Platform/Overview/components/MetricChart.jsx
+++ b/web/src/pages/Platform/Overview/components/MetricChart.jsx
@@ -37,7 +37,9 @@ export default (props) => {
       style,
       formatMetric,
       height = 200,
-      customRenderChart
+      customRenderChart,
+      instance,
+      pointerUpdate
     } = props;
   
     const [loading, setLoading] = useState(false)
@@ -119,14 +121,6 @@ export default (props) => {
       };
     }, [isInView]);
   
-    const chartRef = useRef();
-  
-    const pointerUpdate = (event) => {
-      if (chartRef.current) {
-        chartRef.current.dispatchExternalPointerEvent(event);
-      }
-    };
-  
     const handleChartBrush = ({ x }) => {
       if (!x) {
         return;
@@ -168,7 +162,7 @@ export default (props) => {
         <Chart
           size={[, height]}
           className={styles.vizChartItem}
-          ref={chartRef}
+          ref={instance}
         >
           <Settings
             pointerUpdateDebounce={0}
diff --git a/web/src/pages/Platform/Overview/components/cluster_metric.jsx b/web/src/pages/Platform/Overview/components/cluster_metric.jsx
index 5958686e..6b25e5df 100644
--- a/web/src/pages/Platform/Overview/components/cluster_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/cluster_metric.jsx
@@ -2,7 +2,7 @@ import styles from "./Metrics.scss";
 import "./node_metric.scss";
 import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
 import MetricChart from "./MetricChart";
-import { useMemo } from "react";
+import { createRef, useEffect, useMemo, useRef, useState } from "react";
 import { formatMessage } from "umi/locale";
 import { formatTimeRange } from "@/lib/elasticsearch/util";
 
@@ -27,12 +27,34 @@ export default (props) => {
   
   const extra = renderExtra ? renderExtra() : null;
 
+  const [charts, setCharts] = useState([])
+
+  useEffect(() => {
+    setCharts(() => {
+      const cs = {}
+      metrics.forEach((metricKey) => {
+        cs[metricKey] = createRef()
+      })
+      return cs
+    })
+  }, [JSON.stringify(metrics)])
+
+  const pointerUpdate = (event) => {
+    Object.keys(charts).forEach((key) => {
+      if (charts[key].current) {
+        charts[key].current.dispatchExternalPointerEvent(event);
+      }
+    });
+  };
+
   return (
     <div id="cluster-metric">
       <div className={styles.metricList}>
-        {metrics.map((metricKey, i) => (
+        {metrics.filter((item) => !!item).map((metricKey) => (
           <MetricChart 
-            key={metricKey} 
+            key={metricKey}
+            instance={charts[metricKey]} 
+            pointerUpdate={pointerUpdate}
             timezone={timezone} 
             timeRange={timeRange} 
             timeout={timeout}
diff --git a/web/src/pages/Platform/Overview/components/index_metric.jsx b/web/src/pages/Platform/Overview/components/index_metric.jsx
index 88f586bd..17d4ced5 100644
--- a/web/src/pages/Platform/Overview/components/index_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/index_metric.jsx
@@ -9,7 +9,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
 import NodeSelect from "@/components/NodeSelect";
 import Anchor from "@/components/Anchor";
 import MetricChart from "./MetricChart";
-import { useMemo } from "react";
+import { createRef, useEffect, useMemo, useState } from "react";
 
 export default (props) => {
 
@@ -79,6 +79,30 @@ export default (props) => {
     return Object.values(indices || []);
   }, [indices]);
 
+  const [charts, setCharts] = useState([])
+
+  useEffect(() => {
+    setCharts(() => {
+      const cs = {}
+      metrics.forEach((item) => {
+        if (item[1]?.length > 0) {
+          item[1].forEach((metricKey) => {
+            cs[metricKey] = createRef()
+          })
+        }
+      })
+      return cs
+    })
+  }, [JSON.stringify(metrics)])
+
+  const pointerUpdate = (event) => {
+    Object.keys(charts).forEach((key) => {
+      if (charts[key].current) {
+        charts[key].current.dispatchExternalPointerEvent(event);
+      }
+    });
+  };
+
   return (
     <div id="node-metric">
       {showTop ? (
@@ -109,7 +133,7 @@ export default (props) => {
 
       <div className="px-box">
         <div className="px">
-            {metrics.map((item, i) => {
+            {metrics.filter((item) => !!item && !!item[1]).map((item) => {
               return (
                 <div key={item[0]} style={{ margin: "8px 0" }}>
                   <MetricContainer
@@ -122,6 +146,8 @@ export default (props) => {
                         item[1].map((metricKey) => (
                           <MetricChart 
                             key={metricKey} 
+                            instance={charts[metricKey]} 
+                            pointerUpdate={pointerUpdate}
                             timezone={timezone} 
                             timeRange={timeRange} 
                             handleTimeChange={handleTimeChange} 
diff --git a/web/src/pages/Platform/Overview/components/node_metric.jsx b/web/src/pages/Platform/Overview/components/node_metric.jsx
index c8b32cde..ceaa8d40 100644
--- a/web/src/pages/Platform/Overview/components/node_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/node_metric.jsx
@@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
 import NodeSelect from "@/components/NodeSelect";
 import Anchor from "@/components/Anchor";
 import MetricChart from "./MetricChart";
-import { useCallback, useMemo } from "react";
+import { createRef, useCallback, useEffect, useMemo, useState } from "react";
 
 export default (props) => {
 
@@ -94,6 +94,30 @@ export default (props) => {
     });
   }, [nodes]);
 
+  const [charts, setCharts] = useState([])
+
+  useEffect(() => {
+    setCharts(() => {
+      const cs = {}
+      metrics.forEach((item) => {
+        if (item[1]?.length > 0) {
+          item[1].forEach((metricKey) => {
+            cs[metricKey] = createRef()
+          })
+        }
+      })
+      return cs
+    })
+  }, [JSON.stringify(metrics)])
+
+  const pointerUpdate = (event) => {
+    Object.keys(charts).forEach((key) => {
+      if (charts[key].current) {
+        charts[key].current.dispatchExternalPointerEvent(event);
+      }
+    });
+  };
+
   return (
     <div id="node-metric">
       {showTop ? (
@@ -132,7 +156,7 @@ export default (props) => {
 
       <div className="px-box">
         <div className="px">
-            {metrics.map((item, i) => {
+            {metrics.filter((item) => !!item && !!item[1]).map((item) => {
               return (
                 <div key={item[0]} style={{ margin: "8px 0" }}>
                   <MetricContainer
@@ -145,6 +169,8 @@ export default (props) => {
                         item[1].map((metricKey) => (
                           <MetricChart 
                             key={metricKey} 
+                            instance={charts[metricKey]} 
+                            pointerUpdate={pointerUpdate}
                             timezone={timezone} 
                             timeRange={timeRange} 
                             handleTimeChange={handleTimeChange} 
diff --git a/web/src/pages/Platform/Overview/components/queue_metric.jsx b/web/src/pages/Platform/Overview/components/queue_metric.jsx
index 7932b4af..0f58e69c 100644
--- a/web/src/pages/Platform/Overview/components/queue_metric.jsx
+++ b/web/src/pages/Platform/Overview/components/queue_metric.jsx
@@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
 import NodeSelect from "@/components/NodeSelect";
 import Anchor from "@/components/Anchor";
 import MetricChart from "./MetricChart";
-import { useCallback, useMemo } from "react";
+import { createRef, useCallback, useEffect, useMemo, useState } from "react";
 
 export default (props) => {
 
@@ -94,6 +94,30 @@ export default (props) => {
     });
   }, [nodes]);
 
+  const [charts, setCharts] = useState([])
+
+  useEffect(() => {
+    setCharts(() => {
+      const cs = {}
+      metrics.forEach((item) => {
+        if (item[1]?.length > 0) {
+          item[1].forEach((metricKey) => {
+            cs[metricKey] = createRef()
+          })
+        }
+      })
+      return cs
+    })
+  }, [JSON.stringify(metrics)])
+
+  const pointerUpdate = (event) => {
+    Object.keys(charts).forEach((key) => {
+      if (charts[key].current) {
+        charts[key].current.dispatchExternalPointerEvent(event);
+      }
+    });
+  };
+
   return (
     <div id="node-metric">
       {showTop ? (
@@ -132,7 +156,7 @@ export default (props) => {
 
       <div className="px-box">
         <div className="px">
-            {metrics.map((item, i) => {
+            {metrics.filter((item) => !!item && !!item[1]).map((item) => {
               return (
                 <div key={item[0]} style={{ margin: "8px 0" }}>
                   <MetricContainer
@@ -145,6 +169,8 @@ export default (props) => {
                         item[1].map((metricKey) => (
                           <MetricChart 
                             key={metricKey} 
+                            instance={charts[metricKey]} 
+                            pointerUpdate={pointerUpdate}
                             timezone={timezone} 
                             timeRange={timeRange} 
                             handleTimeChange={handleTimeChange}