Disable zoom controls until mesh layout is finalized.

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>

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);
       }
     }
   };

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>