GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 06:58:58 +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 }; const graphData = { nodes, links };
let zoomLevel = 1;
return ( return (
<ForceGraph2D <ForceGraph2D
ref={fgRef} ref={fgRef}
@ -23,8 +25,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
linkDirectionalParticles="value" linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value} linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx) => { nodeCanvasObject={(node, ctx) => {
const label = transformLabel(node.id); const label = transformLabel(node.id, zoomLevel);
const { fontSize } = node; let { fontSize } = node;
fontSize = (fontSize * 3) / zoomLevel;
ctx.font = `${fontSize}px Roboto`; ctx.font = `${fontSize}px Roboto`;
const { width } = node; const { width } = node;
@ -43,6 +46,9 @@ function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
tooltip.innerHTML = getTooltip(node); tooltip.innerHTML = getTooltip(node);
} }
}} }}
onZoom={(zoom) => {
zoomLevel = zoom.k;
}}
nodePointerAreaPaint={(node, color, ctx) => { nodePointerAreaPaint={(node, color, ctx) => {
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.beginPath(); ctx.beginPath();

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

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