signoz/frontend/src/modules/Servicemap/utils.ts

import { uniqBy, uniq, maxBy, cloneDeep, find } from "lodash";
import { serviceMapStore } from "Src/store/actions";
import { graphDataType } from "./ServiceMap";

const MIN_WIDTH = 10;
const MAX_WIDTH = 20;
const DEFAULT_FONT_SIZE = 6;
export const getDimensions = (num, highest) => {
	const percentage = (num / highest) * 100;
	const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
	const fontSize = DEFAULT_FONT_SIZE;
	return {
		fontSize,
		width,
	};
};

export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
	const { items, services } = serviceMap;
	const highestCallCount = maxBy(items, (e) => e.callCount).callCount;
	const highestCallRate = maxBy(services, (e) => e.callRate).callRate;
	const divNum = Number(
		String(1).padEnd(highestCallCount.toString().length, "0"),
	);

	const links = cloneDeep(items).map((node) => {
		const { parent, child, callCount } = node;
		return {
			source: parent,
			target: child,
			value: (100 - callCount / divNum) * 0.03,
		};
	});
	const uniqParent = uniqBy(cloneDeep(items), "parent").map((e) => e.parent);
	const uniqChild = uniqBy(cloneDeep(items), "child").map((e) => e.child);
	const uniqNodes = uniq([...uniqParent, ...uniqChild]);
	const nodes = uniqNodes.map((node, i) => {
		const service = find(services, (service) => service.serviceName === node);
		let color = "#88CEA5";
		if (!service) {
			return {
				id: node,
				group: i + 1,
				fontSize: DEFAULT_FONT_SIZE,
				width: MIN_WIDTH,
				color,
				nodeVal: MIN_WIDTH,
				callRate: 0,
				errorRate: 0,
				p99: 0,
			};
		}
		if (service.errorRate > 0) {
			color = "#F98989";
		} else if (service.fourXXRate > 0) {
			color = "#F9DA7B";
		}
		const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
		return {
			id: node,
			group: i + 1,
			fontSize,
			width,
			color,
			nodeVal: width,
			callRate: service.callRate.toFixed(2),
			errorRate: service.errorRate,
			p99: service.p99,
		};
	});
	return {
		nodes,
		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;
	}
};