From 391907c41ea38080eed4e6f3a3efcac70bb39807 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Sun, 6 Feb 2022 11:41:59 -0800
Subject: [PATCH] Add reset zoom button.

---
 awx/ui/src/screens/TopologyView/Header.js       | 13 +++++++++++++
 awx/ui/src/screens/TopologyView/TopologyView.js | 10 ++++++++++
 2 files changed, 23 insertions(+)

diff --git a/awx/ui/src/screens/TopologyView/Header.js b/awx/ui/src/screens/TopologyView/Header.js
index 4dacc7b598..e1b8f6648d 100644
--- a/awx/ui/src/screens/TopologyView/Header.js
+++ b/awx/ui/src/screens/TopologyView/Header.js
@@ -15,6 +15,7 @@ import {
   SearchMinusIcon,
   SearchPlusIcon,
   ExpandArrowsAltIcon,
+  ExpandIcon,
 } from '@patternfly/react-icons';
 
 const Header = ({
@@ -23,6 +24,7 @@ const Header = ({
   toggleState,
   zoomIn,
   zoomOut,
+  resetZoom,
 }) => {
   const { light } = PageSectionVariants;
   return (
@@ -76,6 +78,17 @@ const Header = ({
               <ExpandArrowsAltIcon />
             </Button>
           </Tooltip>
+          <Tooltip content={t`Reset zoom`} position="top">
+            <Button
+              ouiaId="reset-zoom-button"
+              aria-label={t`Reset zoom`}
+              variant="plain"
+              icon={<ExpandIcon />}
+              onClick={resetZoom}
+            >
+              <ExpandIcon />
+            </Button>
+          </Tooltip>
           <Tooltip content={t`Toggle legend`} position="top">
             <Switch
               id="legend-toggle-switch"
diff --git a/awx/ui/src/screens/TopologyView/TopologyView.js b/awx/ui/src/screens/TopologyView/TopologyView.js
index ac36360669..bad237100b 100644
--- a/awx/ui/src/screens/TopologyView/TopologyView.js
+++ b/awx/ui/src/screens/TopologyView/TopologyView.js
@@ -36,6 +36,15 @@ function TopologyView() {
   const zoomOut = () => {
     d3.select('.mesh-svg').transition().call(zoom.scaleBy, 0.5);
   };
+  const resetZoom = () => {
+    const margin = 15;
+    const width = parseInt(d3.select(`#chart`).style('width'), 10) - margin;
+    d3.select('.mesh-svg').transition().duration(750).call(
+      zoom.transform,
+      d3.zoomIdentity,
+      d3.zoomTransform(d3.select('.mesh-svg').node()).invert([width / 2, 600 / 2])
+    );
+  }
 
   return (
     <>
@@ -45,6 +54,7 @@ function TopologyView() {
         toggleState={showLegend}
         zoomIn={zoomIn}
         zoomOut={zoomOut}
+        resetZoom={resetZoom}
       />
       <PageSection>
         <Card>