From 8fe2fe5aecdb0aeb370cf0ea2ef0af3b531808f3 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Sun, 16 May 2021 15:50:32 +0530 Subject: [PATCH 1/2] adds a utility function to transform label --- frontend/src/modules/Servicemap/ServiceMap.tsx | 4 ++-- frontend/src/modules/Servicemap/utils.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 9375923664..facc121e35 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, getTooltip } from "./utils"; +import { getGraphData, getTooltip, transformLabel } from "./utils"; import SelectService from "./SelectService"; import { ForceGraph2D } from "react-force-graph"; @@ -95,7 +95,7 @@ const ServiceMap = (props: ServiceMapProps) => { linkDirectionalParticles="value" linkDirectionalParticleSpeed={(d) => d.value} nodeCanvasObject={(node, ctx, globalScale) => { - const label = node.id; + const label = transformLabel(node.id); const fontSize = node.fontSize; ctx.font = `${fontSize}px Roboto`; const width = node.width; diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 28295ad2c5..80c5bfe8f5 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -96,3 +96,11 @@ export const getTooltip = (node: { `; }; + +export const transformLabel = (label: string) => { + const MAX_LENGTH = 18; + if (label.length > MAX_LENGTH) { + return `${label.slice(0, MAX_LENGTH)}..`; + } + return label; +}; From 057fba112b41688d36a4d2cd209db4787e6d1e50 Mon Sep 17 00:00:00 2001 From: dhrubesh Date: Mon, 17 May 2021 14:29:35 +0530 Subject: [PATCH 2/2] updates max length --- frontend/src/modules/Servicemap/utils.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 80c5bfe8f5..8aaa5047ad 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -98,9 +98,10 @@ export const getTooltip = (node: { }; export const transformLabel = (label: string) => { - const MAX_LENGTH = 18; + const MAX_LENGTH = 13; + const MAX_SHOW = 10; if (label.length > MAX_LENGTH) { - return `${label.slice(0, MAX_LENGTH)}..`; + return `${label.slice(0, MAX_SHOW)}...`; } return label; };