From fcc248ddf6cefcfea1814a36a69fcd190a33fbb8 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sat, 15 May 2021 15:18:30 +0530
Subject: [PATCH 1/3] resets data to avoid multiple re-rendering for parallel
 apis

---
 frontend/src/store/actions/serviceMap.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts
index a8a660d423..fbad4148c3 100644
--- a/frontend/src/store/actions/serviceMap.ts
+++ b/frontend/src/store/actions/serviceMap.ts
@@ -38,6 +38,11 @@ export interface servicesAction {
 
 export const getServiceMapItems = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch) => {
+		dispatch<serviceMapItemAction>({
+			type: ActionTypes.getServiceMapItems,
+			payload: [],
+		});
+
 		let request_string =
 			"/serviceMapDependencies?start=" +
 			globalTime.minTime +
@@ -45,7 +50,7 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
 			globalTime.maxTime;
 
 		const response = await api.get<servicesMapItem[]>(apiV1 + request_string);
-	
+
 		dispatch<serviceMapItemAction>({
 			type: ActionTypes.getServiceMapItems,
 			payload: response.data,
@@ -55,11 +60,16 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
 
 export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch) => {
+		dispatch<servicesAction>({
+			type: ActionTypes.getServices,
+			payload: [],
+		});
+
 		let request_string =
 			"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
 
 		const response = await api.get<servicesItem[]>(apiV1 + request_string);
-	
+
 		dispatch<servicesAction>({
 			type: ActionTypes.getServices,
 			payload: response.data,

From 2482e91348c27e37993c8eaba42c34979d432615 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sat, 15 May 2021 18:23:29 +0530
Subject: [PATCH 2/3] calculate zoom px based on screen size

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

diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index f6098cd994..46cf64b6cc 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -10,7 +10,7 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
-import { getGraphData } from "./utils";
+import { getZoomPx, getGraphData } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 
@@ -72,7 +72,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 	}
 
 	const zoomToService = (value: string) => {
-		fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value);
+		fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
 	};
 
 	const { nodes, links } = getGraphData(serviceMap);
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 296cd05060..ada3fb4a00 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -73,3 +73,14 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 		links,
 	};
 };
+
+export const getZoomPx = (): number => {
+	const width = window.screen.width;
+	if (width < 1400) {
+		return 190;
+	} else if (width > 1400 && width < 2500) {
+		return 380;
+	} else if (width > 2500) {
+		return 360;
+	}
+};

From 55a7b5b1b37d5967ecee2d0989d4042dee2a9cf8 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sun, 16 May 2021 15:08:31 +0530
Subject: [PATCH 3/3] adds tooltip on hover

---
 .../src/modules/Servicemap/ServiceMap.tsx     | 20 +++-------------
 frontend/src/modules/Servicemap/utils.ts      | 23 +++++++++++++++++++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index f6098cd994..9375923664 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -10,7 +10,7 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
-import { getGraphData } from "./utils";
+import { getGraphData, getTooltip } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 
@@ -90,7 +90,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 					fgRef.current.zoomToFit(100, 120);
 				}}
 				graphData={graphData}
-				nodeLabel="id"
+				nodeLabel={getTooltip}
 				linkAutoColorBy={(d) => d.target}
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
@@ -112,21 +112,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 				onNodeClick={(node) => {
 					const tooltip = document.querySelector(".graph-tooltip");
 					if (tooltip && node) {
-						tooltip.innerHTML = `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
-								<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}ms</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Request:</div>
-									<div class="val">${node.callRate}/sec</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Error Rate:</div>
-									<div class="val">${node.errorRate}%</div>
-								</div>
-							</div>`;
+						tooltip.innerHTML = getTooltip(node);
 					}
 				}}
 				nodePointerAreaPaint={(node, color, ctx) => {
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 296cd05060..28295ad2c5 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -73,3 +73,26 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 		links,
 	};
 };
+
+export const getTooltip = (node: {
+	p99: number;
+	errorRate: number;
+	callRate: number;
+	id: string;
+}) => {
+	return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
+								<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}ms</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Request:</div>
+									<div class="val">${node.callRate}/sec</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Error Rate:</div>
+									<div class="val">${node.errorRate}%</div>
+								</div>
+							</div>`;
+};