Merge pull request #104 from SigNoz/issue-103-

Fixes multiple re-renders

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -10,6 +10,7 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
+import { getZoomPx, getGraphData } from "./utils";
 import { getGraphData, getTooltip } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
@@ -72,7 +73,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);

frontend/src/modules/Servicemap/utils.ts

@@ -74,6 +74,16 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 	};
 };
 
+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;
+	}
+
 export const getTooltip = (node: {
 	p99: number;
 	errorRate: number;
@@ -95,4 +105,5 @@ export const getTooltip = (node: {
 									<div class="val">${node.errorRate}%</div>
 								</div>
 							</div>`;
+
 };

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,