diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 52747d0a81..77ca7656f4 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -1,102 +1,102 @@
 import React, { useEffect, useCallback } from 'react';
-import { t } from '@lingui/macro';
+// import { t } from '@lingui/macro';
 import * as d3 from 'd3';
 
-// function MeshGraph({ data }) {
-function MeshGraph() {
-  const data = {
-    nodes: [
-      {
-        hostname: "aapc1.local",
-        node_state: "healthy",
-        node_type: "control",
-        id: 1
-      },
-      {
-        hostname: "aapc2.local",
-        node_type: "control",
-        node_state: "disabled",
-        id: 2
-      },
-      {
-        hostname: "aapc3.local",
-        node_type: "control",
-        node_state: "healthy",
-        id: 3
-      },
-      {
-        hostname: "aape1.local",
-        node_type: "execution",
-        node_state: "error",
-        id: 4
-      },
-      {
-        hostname: "aape2.local",
-        node_type: "execution",
-        node_state: "error",
-        id: 5
-      },
-      {
-        hostname: "aape3.local",
-        node_type: "execution",
-        node_state: "healthy",
-        id: 6
-      },
-      {
-        hostname: "aape4.local",
-        node_type: "execution",
-        node_state: "healthy",
-        id: 7
-      },
-      {
-        hostname: "aaph1.local",
-        node_type: "hop",
-        node_state: "disabled",
-        id: 8
-      },
-      {
-        hostname: "aaph2.local",
-        node_type: "hop",
-        node_state: "healthy",
-        id: 9
-      },
-      {
-        hostname: "aaph3.local",
-        node_type: "hop",
-        node_state: "error",
-        id: 10
-      }
-    ],
-    links: [
-      { source: "aapc1.local", target: "aapc2.local" },
-      { source: "aapc1.local", target: "aapc3.local" },
-      { source: "aapc1.local", target: "aape1.local" },
-      { source: "aapc1.local", target: "aape2.local" },
+function MeshGraph({ data }) {
+  // function MeshGraph() {
+  // const data = {
+  //   nodes: [
+  //     {
+  //       hostname: 'aapc1.local',
+  //       node_state: 'healthy',
+  //       node_type: 'control',
+  //       id: 1,
+  //     },
+  //     {
+  //       hostname: 'aapc2.local',
+  //       node_type: 'control',
+  //       node_state: 'disabled',
+  //       id: 2,
+  //     },
+  //     {
+  //       hostname: 'aapc3.local',
+  //       node_type: 'control',
+  //       node_state: 'healthy',
+  //       id: 3,
+  //     },
+  //     {
+  //       hostname: 'aape1.local',
+  //       node_type: 'execution',
+  //       node_state: 'error',
+  //       id: 4,
+  //     },
+  //     {
+  //       hostname: 'aape2.local',
+  //       node_type: 'execution',
+  //       node_state: 'error',
+  //       id: 5,
+  //     },
+  //     {
+  //       hostname: 'aape3.local',
+  //       node_type: 'execution',
+  //       node_state: 'healthy',
+  //       id: 6,
+  //     },
+  //     {
+  //       hostname: 'aape4.local',
+  //       node_type: 'execution',
+  //       node_state: 'healthy',
+  //       id: 7,
+  //     },
+  //     {
+  //       hostname: 'aaph1.local',
+  //       node_type: 'hop',
+  //       node_state: 'disabled',
+  //       id: 8,
+  //     },
+  //     {
+  //       hostname: 'aaph2.local',
+  //       node_type: 'hop',
+  //       node_state: 'healthy',
+  //       id: 9,
+  //     },
+  //     {
+  //       hostname: 'aaph3.local',
+  //       node_type: 'hop',
+  //       node_state: 'error',
+  //       id: 10,
+  //     },
+  //   ],
+  //   links: [
+  //     { source: 'aapc1.local', target: 'aapc2.local' },
+  //     { source: 'aapc1.local', target: 'aapc3.local' },
+  //     { source: 'aapc1.local', target: 'aape1.local' },
+  //     { source: 'aapc1.local', target: 'aape2.local' },
 
-      { source: "aapc2.local", target: "aapc3.local" },
-      { source: "aapc2.local", target: "aape1.local" },
-      { source: "aapc2.local", target: "aape2.local" },
+  //     { source: 'aapc2.local', target: 'aapc3.local' },
+  //     { source: 'aapc2.local', target: 'aape1.local' },
+  //     { source: 'aapc2.local', target: 'aape2.local' },
 
-      { source: "aapc3.local", target: "aape1.local" },
-      { source: "aapc3.local", target: "aape2.local" },
+  //     { source: 'aapc3.local', target: 'aape1.local' },
+  //     { source: 'aapc3.local', target: 'aape2.local' },
 
-      { source: "aape3.local", target: "aaph1.local" },
-      { source: "aape3.local", target: "aaph2.local" },
+  //     { source: 'aape3.local', target: 'aaph1.local' },
+  //     { source: 'aape3.local', target: 'aaph2.local' },
 
-      { source: "aape4.local", target: "aaph3.local" },
+  //     { source: 'aape4.local', target: 'aaph3.local' },
 
-      { source: "aaph1.local", target: "aapc1.local" },
-      { source: "aaph1.local", target: "aapc2.local" },
-      { source: "aaph1.local", target: "aapc3.local" },
+  //     { source: 'aaph1.local', target: 'aapc1.local' },
+  //     { source: 'aaph1.local', target: 'aapc2.local' },
+  //     { source: 'aaph1.local', target: 'aapc3.local' },
 
-      { source: "aaph2.local", target: "aapc1.local" },
-      { source: "aaph2.local", target: "aapc2.local" },
-      { source: "aaph2.local", target: "aapc3.local" },
+  //     { source: 'aaph2.local', target: 'aapc1.local' },
+  //     { source: 'aaph2.local', target: 'aapc2.local' },
+  //     { source: 'aaph2.local', target: 'aapc3.local' },
 
-      { source: "aaph3.local", target: "aaph1.local" },
-      { source: "aaph3.local", target: "aaph2.local" }
-    ]
-  };
+  //     { source: 'aaph3.local', target: 'aaph1.local' },
+  //     { source: 'aaph3.local', target: 'aaph2.local' },
+  //   ],
+  // };
 
   const draw = useCallback(() => {
     const margin = 80;
@@ -122,7 +122,7 @@ function MeshGraph() {
     const zoom = d3
       .zoom()
       .scaleExtent([1, 8])
-      .on('zoom', function (event) {
+      .on('zoom', (event) => {
         svg.selectAll('.links, .nodes').attr('transform', event.transform);
       });
 
@@ -145,18 +145,14 @@ function MeshGraph() {
       .forceSimulation()
       .force(
         'link',
-        d3.forceLink().id(function (d) {
-          return d.hostname;
-        })
+        d3.forceLink().id((d) => d.hostname)
       )
       .force('charge', d3.forceManyBody().strength(-350))
       .force(
         'collide',
-        d3.forceCollide(function (d) {
-          return d.node_type === 'execution' || d.node_type === 'hop'
-            ? 75
-            : 100;
-        })
+        d3.forceCollide((d) =>
+          d.node_type === 'execution' || d.node_type === 'hop' ? 75 : 100
+        )
       )
       .force('center', d3.forceCenter(width / 2, height / 2));
 
@@ -172,19 +168,8 @@ function MeshGraph() {
       .style('stroke', '#ccc')
       .style('stroke-width', '2px')
       .attr('pointer-events', 'none')
-      .on('mouseover', function (event, d) {
-        // tooltip
-        //   .html(`source: ${d.source.hostname} <br>target: ${d.target.hostname}`)
-        //   .style('visibility', 'visible');
+      .on('mouseover', function showPointer() {
         d3.select(this).transition().style('cursor', 'pointer');
-      })
-      .on('mousemove', function () {
-        // tooltip
-        //   .style('top', event.pageY - 10 + 'px')
-        //   .style('left', event.pageX + 10 + 'px');
-      })
-      .on('mouseout', function () {
-        // tooltip.html(``).style('visibility', 'hidden');
       });
 
     const node = svg
@@ -194,53 +179,42 @@ function MeshGraph() {
       .data(graph.nodes)
       .enter()
       .append('g')
-      .on('mouseenter', function (event, d) {
+      .on('mouseenter', function handleNodeHover(_, d) {
         d3.select(this).transition().style('cursor', 'pointer');
-        highlightSiblings(d)
+        highlightSiblings(d);
         tooltip
           .html(
             `<h3>Details</h3> <hr>name: ${d.hostname} <br>type: ${d.node_type} <br>status: ${d.node_state} <br> <a>Click on a node to view the details</a>`
           )
-          .style('visibility', 'visible')
-          // .style('visibility', 'visible');
-        // d3.select(this).transition().attr('r', 9).style('cursor', 'pointer');
+          .style('visibility', 'visible');
       })
-      .on('mousemove', function () {
-        // tooltip
-        //   .style('top', event.pageY - 10 + 'px')
-        //   .style('left', event.pageX + 10 + 'px');
-      })
-      .on('mouseleave', function (event, d) {
-        deselectSiblings(d)
+      .on('mouseleave', (_, d) => {
+        deselectSiblings(d);
         tooltip.html(``).style('visibility', 'hidden');
-        // d3.select(this).attr('r', 6);
       });
 
-    const healthRings = node
+    // health rings on nodes
+    node
       .append('circle')
       .attr('r', 8)
       .attr('class', (d) => d.node_state)
-      .attr('stroke', d => renderHealthColor(d.node_state))
-      .attr('fill', d => renderHealthColor(d.node_state));
+      .attr('stroke', (d) => renderHealthColor(d.node_state))
+      .attr('fill', (d) => renderHealthColor(d.node_state));
 
-    const nodeRings = node
+    // inner node ring
+    node
       .append('circle')
       .attr('r', defaultRadius)
       .attr('class', (d) => d.node_type)
       .attr('class', (d) => `id-${d.id}`)
-      .attr('fill', function (d) {
-        return color(d.node_type);
-      })
+      .attr('fill', (d) => color(d.node_type))
       .attr('stroke', 'white');
     svg.call(expandGlow);
 
-    const legend = svg
-      .append('text')
-      .attr('x', 10)
-      .attr('y', 20)
-      .text('Legend')
+    // legend
+    svg.append('text').attr('x', 10).attr('y', 20).text('Legend');
 
-      svg
+    svg
       .append('g')
       .selectAll('g')
       .attr('class', 'chart-legend')
@@ -248,16 +222,13 @@ function MeshGraph() {
       .enter()
       .append('circle')
       .attr('cx', 10)
-      .attr('cy', function (d, i) {
-        return 50 + i * 25;
-      })
+      .attr('cy', (d, i) => 50 + i * 25)
       .attr('r', defaultRadius)
       .attr('class', (d) => d.node_type)
-      .style('fill', function (d) {
-        return color(d.node_type);
-      });
+      .style('fill', (d) => color(d.node_type));
 
-    const legend_text = svg
+    // legend text
+    svg
       .append('g')
       .attr('class', 'chart-text')
       .selectAll('g')
@@ -265,9 +236,7 @@ function MeshGraph() {
       .enter()
       .append('text')
       .attr('x', 20)
-      .attr('y', function (d, i) {
-        return 50 + i * 25;
-      })
+      .attr('y', (d, i) => 50 + i * 25)
       .text((d) => `${d.hostname} - ${d.node_type}`)
       .attr('text-anchor', 'left')
       .style('alignment-baseline', 'middle');
@@ -292,11 +261,10 @@ function MeshGraph() {
       .style('color', '#e6e6e')
       .text('');
 
-    const labels = node
+    // node labels
+    node
       .append('text')
-      .text(function (d) {
-        return d.hostname;
-      })
+      .text((d) => d.hostname)
       .attr('x', 16)
       .attr('y', 3);
 
@@ -306,29 +274,14 @@ function MeshGraph() {
     function ticked() {
       link.attr('d', linkArc);
 
-      node.attr('transform', function (d) {
-        return 'translate(' + d.x + ',' + d.y + ')';
-      });
+      node.attr('transform', (d) => `translate(${d.x},${d.y})`);
     }
 
     function linkArc(d) {
-      var dx = d.target.x - d.source.x,
-        dy = d.target.y - d.source.y,
-        dr = Math.sqrt(dx * dx + dy * dy);
-      return (
-        'M' +
-        d.source.x +
-        ',' +
-        d.source.y +
-        'A' +
-        dr +
-        ',' +
-        dr +
-        ' 0 0,1 ' +
-        d.target.x +
-        ',' +
-        d.target.y
-      );
+      const dx = d.target.x - d.source.x;
+      const dy = d.target.y - d.source.y;
+      const dr = Math.sqrt(dx * dx + dy * dy);
+      return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
     }
 
     function contractGlow() {
@@ -351,58 +304,54 @@ function MeshGraph() {
 
     function renderHealthColor(nodeState) {
       const colorKey = {
-        'disabled': '#c6c6c6',
-        'healthy': '#50D050',
-        'error': '#ff6766'
+        disabled: '#c6c6c6',
+        healthy: '#50D050',
+        error: '#ff6766',
       };
       return colorKey[nodeState];
     }
 
-    function renderNodeClass(nodeState) {
-      const colorKey = {
-        'disabled': 'node-disabled',
-        'healthy': 'node-healthy',
-        'error': 'node-error'
-      };
-      return colorKey[nodeState];
+    function highlightSiblings(n) {
+      setTimeout(() => {
+        svg.selectAll(`id-${n.id}`).attr('r', highlightRadius);
+        const immediate = graph.links.filter(
+          (l) =>
+            n.hostname === l.source.hostname || n.hostname === l.target.hostname
+        );
+        immediate.forEach((s) => {
+          svg
+            .selectAll(`.link-${s.index}`)
+            .transition()
+            .style('stroke', '#6e6e6e');
+          svg
+            .selectAll(`.id-${s.source.id}`)
+            .transition()
+            .attr('r', highlightRadius);
+          svg
+            .selectAll(`.id-${s.target.id}`)
+            .transition()
+            .attr('r', highlightRadius);
+        });
+      }, 0);
     }
 
-    function highlightSiblings(node) {
-      setTimeout(function() {
-        svg.selectAll(`id-${node.id}`)
-          .attr('r', highlightRadius);
-        const immediate = graph.links.filter(link => node.hostname === link.source.hostname || node.hostname === link.target.hostname);
-        immediate.forEach(s => {
-          const links = svg.selectAll(`.link-${s.index}`)
+    function deselectSiblings(n) {
+      svg.selectAll(`id-${n.id}`).attr('r', defaultRadius);
+      const immediate = graph.links.filter(
+        (l) =>
+          n.hostname === l.source.hostname || n.hostname === l.target.hostname
+      );
+      immediate.forEach((s) => {
+        svg.selectAll(`.link-${s.index}`).transition().style('stroke', '#ccc');
+        svg
+          .selectAll(`.id-${s.source.id}`)
           .transition()
-          .style('stroke', '#6e6e6e')
-          const sourceNodes = svg.selectAll(`.id-${s.source.id}`)
-          .transition()
-            .attr('r', highlightRadius)
-          const targetNodes = svg.selectAll(`.id-${s.target.id}`)
-          .transition()
-            .attr('r', highlightRadius)
-        })
-
-      }, 0)
-
-    }
-
-    function deselectSiblings(node) {
-      svg.selectAll(`id-${node.id}`)
           .attr('r', defaultRadius);
-        const immediate = graph.links.filter(link => node.hostname === link.source.hostname || node.hostname === link.target.hostname);
-        immediate.forEach(s => {
-          const links = svg.selectAll(`.link-${s.index}`)
+        svg
+          .selectAll(`.id-${s.target.id}`)
           .transition()
-          .style('stroke', '#ccc')
-          svg.selectAll(`.id-${s.source.id}`)
-          .transition()
-            .attr('r', defaultRadius)
-          svg.selectAll(`.id-${s.target.id}`)
-          .transition()
-            .attr('r', defaultRadius)
-        })
+          .attr('r', defaultRadius);
+      });
     }
     // const zoom = d3
     //   .zoom()
diff --git a/awx/ui/src/screens/TopologyView/TopologyView.js b/awx/ui/src/screens/TopologyView/TopologyView.js
index be43df6ad8..2e62a01e0d 100644
--- a/awx/ui/src/screens/TopologyView/TopologyView.js
+++ b/awx/ui/src/screens/TopologyView/TopologyView.js
@@ -2,20 +2,15 @@ import React, { useEffect, useCallback } from 'react';
 
 import { t } from '@lingui/macro';
 import ScreenHeader from 'components/ScreenHeader/ScreenHeader';
-import {
-  PageSection,
-  Card,
-  CardHeader,
-  CardBody,
-} from '@patternfly/react-core';
-import MeshGraph from './MeshGraph';
+import { PageSection, Card, CardBody } from '@patternfly/react-core';
 import useRequest from 'hooks/useRequest';
 import { MeshAPI } from 'api';
+import MeshGraph from './MeshGraph';
 
 function TopologyView() {
   const {
     result: { meshData },
-    error: fetchInitialError,
+    // error: fetchInitialError,
     request: fetchMeshVisualizer,
   } = useRequest(
     useCallback(async () => {