Merge pull request #13042 from kialam/fix-topology-enabled-state-on-redraw

Fix enable/disable node state on browser resize.

2 files changed, 17 insertions, 13 deletions

diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index c20b521ae6..ca6da29664 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -40,8 +40,13 @@ const Loader = styled(ContentLoading)`
   width: 100%;
   background: white;
 `;
-function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
-  const [storedNodes, setStoredNodes] = useState(null);
+function MeshGraph({
+  data,
+  showLegend,
+  zoom,
+  setShowZoomControls,
+  storedNodes,
+}) {
   const [isNodeSelected, setIsNodeSelected] = useState(false);
   const [selectedNode, setSelectedNode] = useState(null);
   const [simulationProgress, setSimulationProgress] = useState(null);
@@ -100,19 +105,14 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
   // update mesh when user toggles enabled/disabled slider
   useEffect(() => {
     if (instance?.id) {
-      const updatedNodes = storedNodes.map((n) =>
+      const updatedNodes = storedNodes.current.map((n) =>
         n.id === instance.id ? { ...n, enabled: instance.enabled } : n
       );
-      setStoredNodes(updatedNodes);
+      storedNodes.current = updatedNodes;
+      updateNodeSVG(storedNodes.current);
     }
   }, [instance]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    if (storedNodes) {
-      updateNodeSVG(storedNodes);
-    }
-  }, [storedNodes]);
-
   const draw = () => {
     let width;
     let height;
@@ -137,6 +137,9 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
     const mesh = svg.append('g').attr('class', 'mesh');
 
     const graph = data;
+    if (storedNodes?.current) {
+      graph.nodes = storedNodes.current;
+    }
 
     /* WEB WORKER */
     const worker = webWorker();
@@ -162,7 +165,6 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
     }
 
     function ended({ nodes, links }) {
-      setStoredNodes(nodes);
       // Remove loading screen
       d3.select('.simulation-loader').style('visibility', 'hidden');
       setShowZoomControls(true);
@@ -247,7 +249,6 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
         .attr('fill', DEFAULT_NODE_COLOR)
         .attr('stroke-dasharray', (d) => (d.enabled ? `1 0` : `5`))
         .attr('stroke', DEFAULT_NODE_STROKE_COLOR);
-
       // node type labels
       node
         .append('text')
diff --git a/awx/ui/src/screens/TopologyView/TopologyView.js b/awx/ui/src/screens/TopologyView/TopologyView.js
index 6ef10ca9da..c174577833 100644
--- a/awx/ui/src/screens/TopologyView/TopologyView.js
+++ b/awx/ui/src/screens/TopologyView/TopologyView.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useState, useRef } from 'react';
 import { t } from '@lingui/macro';
 import { PageSection, Card, CardBody } from '@patternfly/react-core';
 import ContentError from 'components/ContentError';
@@ -10,6 +10,7 @@ import useZoom from './utils/useZoom';
 import { CHILDSELECTOR, PARENTSELECTOR } from './constants';
 
 function TopologyView() {
+  const storedNodes = useRef(null);
   const [showLegend, setShowLegend] = useState(true);
   const [showZoomControls, setShowZoomControls] = useState(false);
   const {
@@ -20,6 +21,7 @@ function TopologyView() {
   } = useRequest(
     useCallback(async () => {
       const { data } = await MeshAPI.read();
+      storedNodes.current = data.nodes;
       return {
         meshData: data,
       };
@@ -64,6 +66,7 @@ function TopologyView() {
                   showLegend={showLegend}
                   zoom={zoom}
                   setShowZoomControls={setShowZoomControls}
+                  storedNodes={storedNodes}
                 />
               )}
             </CardBody>