From 36ad8987dd0bcedfe8151dfe347b4a5dda9eaed8 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sun, 9 May 2021 23:45:42 +0530
Subject: [PATCH] cosmetic updates

---
 frontend/src/modules/Servicemap/ServiceMap.tsx | 11 ++++++++---
 frontend/src/modules/Servicemap/utils.ts       |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index 2c4d1ac378..ffd79658d9 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -64,12 +64,15 @@ const ServiceMap = (props: ServiceMapProps) => {
 		getDetailedServiceMapItems(globalTime);
 	}, []);
 
+	useEffect(() => {
+		fgRef.current && fgRef.current.d3Force("charge").strength(-400);
+	});
 	if (!serviceMap.items.length || !serviceMap.services.length) {
 		return <Spin />;
 	}
 
 	const zoomToService = (value: string) => {
-		fgRef && fgRef.current.zoomToFit(700, 390, (e) => e.id === value);
+		fgRef && fgRef.current.zoomToFit(700, 399, (e) => e.id === value);
 	};
 
 	const { nodes, links } = getGraphData(serviceMap);
@@ -83,7 +86,9 @@ const ServiceMap = (props: ServiceMapProps) => {
 			<ForceGraph2D
 				ref={fgRef}
 				cooldownTicks={100}
-				onEngineStop={() => fgRef.current.zoomToFit(100, 120)}
+				onEngineStop={() => {
+					fgRef.current.zoomToFit(100, 120);
+				}}
 				graphData={graphData}
 				nodeLabel="id"
 				linkAutoColorBy={(d) => d.target}
@@ -111,7 +116,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 								<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
 								<div class="keyval">
 									<div class="key">P99 latency:</div>
-									<div class="val">${node.p99 / 1000000}</div>
+									<div class="val">${node.p99 / 1000000}ms</div>
 								</div>
 								<div class="keyval">
 									<div class="key">Request:</div>
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 72fb61782a..775af2a3b8 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -63,7 +63,7 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 			width,
 			color,
 			nodeVal: width,
-			callRate: service.callRate,
+			callRate: service.callRate.toFixed(2),
 			errorRate: service.errorRate,
 			p99: service.p99,
 		};