From 42f5c24680318f86fb04c3299d4d7b94e551d420 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=90=E1=BB=97=20Tr=E1=BB=8Dng=20H=E1=BA=A3i?=
 <41283691+hainenber@users.noreply.github.com>
Date: Fri, 19 Apr 2024 14:26:05 +0700
Subject: [PATCH] fix(web/ui): fix issue where text labels displayed outside of
 component node's boundary (#582)

Signed-off-by: hainenber <dotronghai96@gmail.com>
---
 CHANGELOG.md                                     |  2 ++
 .../web/ui/src/features/graph/ComponentGraph.tsx | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21f068c364..430869499d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,8 @@ Main (unreleased)
   Add/Remove programs list. (@rfratto)
 
 
+- Fixed issue where text labels displayed outside of component node's boundary. (@hainenber)
+
 v1.0.0 (2024-04-09)
 -------------------
 
diff --git a/internal/web/ui/src/features/graph/ComponentGraph.tsx b/internal/web/ui/src/features/graph/ComponentGraph.tsx
index 5582a1d947..ab169aabeb 100644
--- a/internal/web/ui/src/features/graph/ComponentGraph.tsx
+++ b/internal/web/ui/src/features/graph/ComponentGraph.tsx
@@ -330,6 +330,12 @@ export const ComponentGraph: FC<ComponentGraphProps> = (props) => {
 
     const linkedNodes = nodes.append('a').attr('href', (n) => `${baseComponentPath}/${n.data.localID}`);
 
+    // Check if above `a` element got rendered with latitude equaling to node's margin
+    // If that's the case then we're running in quirks of Firefox SVG rendering
+    // and have to perform "hack"
+    const { x: linkedX } = linkedNodes.node()?.getBoundingClientRect() || {};
+    const withY = linkedX === nodeMargin;
+
     // Plot nodes
     linkedNodes
       .append('rect')
@@ -350,6 +356,7 @@ export const ComponentGraph: FC<ComponentGraphProps> = (props) => {
     nodeContent
       .append('text')
       .text((d) => d.data.name)
+      .attr('y', withY ? 10.5 : null)
       .attr('font-size', '13')
       .attr('font-weight', 'bold')
       .attr('font-family', '"Roboto", sans-serif')
@@ -361,7 +368,12 @@ export const ComponentGraph: FC<ComponentGraphProps> = (props) => {
     nodeContent
       .append('text')
       .text((d) => d.data.label || '')
-      .attr('y', 13 /* font size */ + 2 /* margin from previous text line */)
+      .attr(
+        'y',
+        13 /* font size */ +
+          2 /* margin from previous text line */ +
+          (withY ? 10.5 : 0) /* extra padding from above for Firefox rendering*/
+      )
       .attr('font-size', '13')
       .attr('font-weight', 'normal')
       .attr('font-family', '"Roboto", sans-serif')
@@ -399,7 +411,7 @@ export const ComponentGraph: FC<ComponentGraphProps> = (props) => {
         return text.charAt(0).toUpperCase() + text.substring(1);
       })
       .attr('x', 45 / 2) // Anchor to middle of box
-      .attr('y', 14 / 2) // Middle of box
+      .attr('y', 14 / 2 + (withY ? 2.5 : 0)) // Middle of box
       .attr('font-size', '7')
       .attr('font-weight', 'bold')
       .attr('font-family', '"Roboto", sans-serif')