From 7ebf6b77e5d39bc27fa5c18f55eb48eff8ae0434 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Tue, 22 Feb 2022 13:45:30 -0800
Subject: [PATCH] Disable zoom controls until mesh layout is finalized.

---
 awx/ui/src/screens/TopologyView/Header.js       | 5 +++++
 awx/ui/src/screens/TopologyView/MeshGraph.js    | 4 +++-
 awx/ui/src/screens/TopologyView/TopologyView.js | 3 +++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/awx/ui/src/screens/TopologyView/Header.js b/awx/ui/src/screens/TopologyView/Header.js
index 4929c8ceb1..1b287023e5 100644
--- a/awx/ui/src/screens/TopologyView/Header.js
+++ b/awx/ui/src/screens/TopologyView/Header.js
@@ -26,6 +26,7 @@ const Header = ({
   zoomOut,
   resetZoom,
   zoomFit,
+  showZoomControls,
 }) => {
   const { light } = PageSectionVariants;
   return (
@@ -54,6 +55,7 @@ const Header = ({
               variant="plain"
               icon={<SearchPlusIcon />}
               onClick={zoomIn}
+              isDisabled={!showZoomControls}
             >
               <SearchPlusIcon />
             </Button>
@@ -65,6 +67,7 @@ const Header = ({
               variant="plain"
               icon={<SearchMinusIcon />}
               onClick={zoomOut}
+              isDisabled={!showZoomControls}
             >
               <SearchMinusIcon />
             </Button>
@@ -76,6 +79,7 @@ const Header = ({
               variant="plain"
               icon={<ExpandArrowsAltIcon />}
               onClick={zoomFit}
+              isDisabled={!showZoomControls}
             >
               <ExpandArrowsAltIcon />
             </Button>
@@ -87,6 +91,7 @@ const Header = ({
               variant="plain"
               icon={<ExpandIcon />}
               onClick={resetZoom}
+              isDisabled={!showZoomControls}
             >
               <ExpandIcon />
             </Button>
diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 1a9420f907..1504f4bdae 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -34,7 +34,7 @@ const Loader = styled(ContentLoading)`
   width: 100%;
   background: white;
 `;
-function MeshGraph({ data, showLegend, zoom }) {
+function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
   // function MeshGraph({ showLegend, zoom }) {
   const [isNodeSelected, setIsNodeSelected] = useState(false);
   const [selectedNode, setSelectedNode] = useState(null);
@@ -236,9 +236,11 @@ function MeshGraph({ data, showLegend, zoom }) {
     }
 
     function calculateAlphaDecay(a, aMin, x) {
+      setShowZoomControls(false);
       const decayPercentage = Math.min((aMin / a) * 100);
       if (decayPercentage >= x) {
         d3.select('.simulation-loader').style('visibility', 'hidden');
+        setShowZoomControls(true);
       }
     }
   };
diff --git a/awx/ui/src/screens/TopologyView/TopologyView.js b/awx/ui/src/screens/TopologyView/TopologyView.js
index bcb1fb4a62..6ef10ca9da 100644
--- a/awx/ui/src/screens/TopologyView/TopologyView.js
+++ b/awx/ui/src/screens/TopologyView/TopologyView.js
@@ -11,6 +11,7 @@ import { CHILDSELECTOR, PARENTSELECTOR } from './constants';
 
 function TopologyView() {
   const [showLegend, setShowLegend] = useState(true);
+  const [showZoomControls, setShowZoomControls] = useState(false);
   const {
     isLoading,
     result: { meshData },
@@ -43,6 +44,7 @@ function TopologyView() {
         zoomOut={zoomOut}
         zoomFit={zoomFit}
         resetZoom={resetZoom}
+        showZoomControls={showZoomControls}
       />
       {fetchInitialError ? (
         <PageSection>
@@ -61,6 +63,7 @@ function TopologyView() {
                   data={meshData}
                   showLegend={showLegend}
                   zoom={zoom}
+                  setShowZoomControls={setShowZoomControls}
                 />
               )}
             </CardBody>