From 7e2727c6f2dc994e55e00e499b1614d69f7d066e Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Fri, 5 Jul 2024 17:03:19 +0100
Subject: [PATCH] HPCC-32210 WU Next/Previous + Metrics shows incorrect graph

Wrong graph is rendered when the user clicks on a scope item

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 esp/src/src-react/components/Metrics.tsx      | 49 ++++++++++++-------
 esp/src/src-react/components/MetricsSQL.tsx   | 15 ++++--
 .../src-react/components/WorkunitDetails.tsx  |  2 +-
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
index fc33b2791b9..4f39a3ab2e7 100644
--- a/esp/src/src-react/components/Metrics.tsx
+++ b/esp/src/src-react/components/Metrics.tsx
@@ -202,15 +202,20 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     //  Timeline ---
     const timeline = useConst(() => new WUTimelineNoFetch()
         .maxZoom(Number.MAX_SAFE_INTEGER)
-        .on("click", (row, col, sel) => {
-            setTimelineFilter(sel ? row[7].__hpcc_id : "");
-            if (sel) {
-                setSelectedMetricsSource("scopesTable");
-                pushUrl(`${parentUrl}/${row[7].Id}`);
-            }
-        })
     );
 
+    React.useEffect(() => {
+        timeline
+            .on("click", (row, col, sel) => {
+                setTimelineFilter(sel ? row[7].__hpcc_id : "");
+                if (sel) {
+                    setSelectedMetricsSource("scopesTable");
+                    pushUrl(`${parentUrl}/${row[7].Id}`);
+                }
+            }, true)
+            ;
+    }, [parentUrl, timeline]);
+
     React.useEffect(() => {
         timeline
             .scopes(metrics)
@@ -233,13 +238,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         .multiSelect(true)
         .metrics([], options, timelineFilter, scopeFilter)
         .sortable(true)
-        .on("click", debounce((row, col, sel) => {
-            if (sel) {
-                scopesSelectionChanged("scopesTable", scopesTable.selection());
-            }
-        }, 100))
     );
 
+    React.useEffect(() => {
+        scopesTable
+            .on("click", debounce((row, col, sel) => {
+                if (sel) {
+                    scopesSelectionChanged("scopesTable", scopesTable.selection());
+                }
+            }), true)
+            ;
+    }, [scopesSelectionChanged, scopesTable]);
+
     React.useEffect(() => {
         scopesTable
             .metrics(metrics, options, timelineFilter, scopeFilter)
@@ -265,13 +275,18 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     const metricGraphWidget = useConst(() => new MetricGraphWidget()
         .zoomToFitLimit(1)
         .selectionGlowColor("DodgerBlue")
-        .on("selectionChanged", () => {
-            const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
-            setSelectedMetricsSource("metricGraphWidget");
-            pushUrl(`${parentUrl}/${selection.join(",")}`);
-        })
     );
 
+    React.useEffect(() => {
+        metricGraphWidget
+            .on("selectionChanged", () => {
+                const selection = metricGraphWidget.selection().filter(id => metricGraph.item(id)).map(id => metricGraph.item(id).id);
+                setSelectedMetricsSource("metricGraphWidget");
+                pushUrl(`${parentUrl}/${selection.join(",")}`);
+            }, true)
+            ;
+    }, [metricGraph, metricGraphWidget, parentUrl]);
+
     React.useEffect(() => {
         metricGraph.load(metrics);
     }, [metrics, metricGraph]);
diff --git a/esp/src/src-react/components/MetricsSQL.tsx b/esp/src/src-react/components/MetricsSQL.tsx
index 76d202ac20e..a8df066f50a 100644
--- a/esp/src/src-react/components/MetricsSQL.tsx
+++ b/esp/src/src-react/components/MetricsSQL.tsx
@@ -54,13 +54,18 @@ export const MetricsSQL: React.FunctionComponent<MetricsDataProps> = ({
         .multiSelect(true)
         .sortable(true)
         .noDataMessage(nlsHPCC.loadingMessage)
-        .on("click", debounce((row, col, sel) => {
-            if (sel) {
-                onSelectionChanged(scopesTable.selection());
-            }
-        }, 100))
     );
 
+    React.useEffect(() => {
+        scopesTable
+            .on("click", debounce((row, col, sel) => {
+                if (sel) {
+                    onSelectionChanged(scopesTable.selection());
+                }
+            }, 100), true)
+            ;
+    }, [onSelectionChanged, scopesTable]);
+
     React.useEffect(() => {
         if (columns.length === 0 && data.length === 0 && sqlError) {
             scopesTable
diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index d7e84120d13..8e595bf7b16 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -206,7 +206,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
                         <Shimmer />
                     </>
                 }>
-                    <Metrics wuid={wuid} selection={state?.metrics} />
+                    <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} />
                 </React.Suspense>
             </DelayLoadedPanel>
             <DelayLoadedPanel visible={tab === "workflows"} size={size}>