GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-11 17:59:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend,serviceMap): dynamically truncate service map node label (#4365)

Browse Source
This commit is contained in:
Prashanth Banda 2024-01-25 00:47:09 +05:30 committed by GitHub
parent 5b0e3d375a
commit fce7ab7d24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/modules/Servicemap/Map.tsx
View File

@ -13,6 +13,8 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
const graphData = { nodes, links };
let zoomLevel = 1;
return (
<ForceGraph2D
ref={fgRef}
@ -23,8 +25,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx) => {
const label = transformLabel(node.id);
const { fontSize } = node;
const label = transformLabel(node.id, zoomLevel);
let { fontSize } = node;
fontSize = (fontSize * 3) / zoomLevel;
ctx.font = `${fontSize}px Roboto`;
const { width } = node;
@ -43,6 +46,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
tooltip.innerHTML = getTooltip(node);
}
}}
onZoom={(zoom) => {
zoomLevel = zoom.k;
}}
nodePointerAreaPaint={(node, color, ctx) => {
ctx.fillStyle = color;
ctx.beginPath();

11
frontend/src/modules/Servicemap/utils.ts
View File

@ -59,6 +59,7 @@ export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
width: MIN_WIDTH,
color,
nodeVal: MIN_WIDTH,
name: node,
};
}
if (service.errorRate > 0) {
@ -72,6 +73,7 @@ export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
width,
color,
nodeVal: width,
name: node,
};
});
return {
@ -123,9 +125,12 @@ export const getTooltip = (link: {
</div>`;
};
export const transformLabel = (label: string) => {
const MAX_LENGTH = 13;
const MAX_SHOW = 10;
export const transformLabel = (label: string, zoomLevel: number) => {
//? 13 is the minimum label length. Scaling factor of 0.9 which is slightly less than 1
//? ensures smoother zoom transitions, gradually increasing MAX_LENGTH, displaying more of the label as
//? zooming in.
const MAX_LENGTH = 13 * (zoomLevel / 0.9);
const MAX_SHOW = MAX_LENGTH - 3;
if (label.length > MAX_LENGTH) {
return `${label.slice(0, MAX_SHOW)}...`;
}