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 = ({ + + + { 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} />