From 7fbab6760e395426e905a3fa6ab4069d14fc8d79 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Wed, 23 Feb 2022 12:37:20 -0800
Subject: [PATCH] Small layout adjustment.

---
 awx/ui/src/screens/TopologyView/MeshGraph.js |  7 +++----
 awx/ui/src/screens/TopologyView/constants.js | 12 +++---------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/MeshGraph.js b/awx/ui/src/screens/TopologyView/MeshGraph.js
index 1504f4bdae..fd5a17164d 100644
--- a/awx/ui/src/screens/TopologyView/MeshGraph.js
+++ b/awx/ui/src/screens/TopologyView/MeshGraph.js
@@ -59,12 +59,11 @@ function MeshGraph({ data, showLegend, zoom, setShowZoomControls }) {
     const graph = data;
 
     const simulation = d3
-      .forceSimulation(graph.nodes)
+      .forceSimulation()
+      .nodes(graph.nodes)
       .force(
         'charge',
-        d3
-          .forceManyBody(MESH_FORCE_LAYOUT.defaultForceBody)
-          .strength(MESH_FORCE_LAYOUT.defaultForceStrength)
+        d3.forceManyBody().strength(MESH_FORCE_LAYOUT.defaultForceStrength)
       )
       .force(
         'link',
diff --git a/awx/ui/src/screens/TopologyView/constants.js b/awx/ui/src/screens/TopologyView/constants.js
index 590a375d5e..a19abd63cd 100644
--- a/awx/ui/src/screens/TopologyView/constants.js
+++ b/awx/ui/src/screens/TopologyView/constants.js
@@ -1,30 +1,24 @@
 export const SELECTOR = '#chart';
 export const PARENTSELECTOR = '.mesh-svg';
 export const CHILDSELECTOR = '.mesh';
+export const DEFAULT_RADIUS = 16;
 export const MESH_FORCE_LAYOUT = {
-  defaultCollisionFactor: 80,
-  defaultForceStrength: -100,
-  defaultForceBody: 75,
+  defaultCollisionFactor: DEFAULT_RADIUS * 2 + 20,
+  defaultForceStrength: -30,
   defaultForceX: 0,
   defaultForceY: 0,
 };
-
-export const DEFAULT_RADIUS = 16;
 export const DEFAULT_NODE_COLOR = '#0066CC';
 export const DEFAULT_NODE_HIGHLIGHT_COLOR = '#16407C';
 export const DEFAULT_NODE_LABEL_TEXT_COLOR = 'white';
 export const DEFAULT_FONT_SIZE = '12px';
 export const LABEL_TEXT_MAX_LENGTH = 15;
-
 export const MARGIN = 15;
-export const FALLBACK_WIDTH = 700;
-
 export const NODE_STATE_COLOR_KEY = {
   disabled: '#6A6E73',
   healthy: '#3E8635',
   error: '#C9190B',
 };
-
 export const NODE_STATE_HTML_ENTITY_KEY = {
   disabled: '\u25EF',
   healthy: '\u2713',