From 46c4ae4a96a399adffd72d2f486bc033d920436f Mon Sep 17 00:00:00 2001
From: Omkar Kesarkhane <127078473+omkarK06@users.noreply.github.com>
Date: Tue, 14 Jul 2026 13:40:19 +0530
Subject: [PATCH] fix: make tooltip request count match node label in service
 graph (#13122)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What changed

Fixed a mismatch between the request count displayed on a service graph
node label and the request count shown in the tooltip when hovering over
that node in the tree view.

## Why

In the service graph tree view, node labels use a direction-aware
`value` (e.g., requests from service A → service B), while the tooltip
was reading `node.requests` — the backend's node-level aggregate (sum of
all directions). This caused the two displays to show different numbers
for the same node.

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/plugins/traces/ServiceGraph.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/plugins/traces/ServiceGraph.vue b/web/src/plugins/traces/ServiceGraph.vue
index c3b1d9a4ce..0e2b7b015f 100644
--- a/web/src/plugins/traces/ServiceGraph.vue
+++ b/web/src/plugins/traces/ServiceGraph.vue
@@ -935,7 +935,7 @@ export default defineComponent({
           const data = series.getData();
           const count = data.count();
 
-          // Collect node layout positions + names
+          // Collect node layout positions + names + direction-aware value
           for (let i = 0; i < count; i++) {
             const layout = data.getItemLayout(i);
             if (layout) {
@@ -944,6 +944,7 @@ export default defineComponent({
                 x: layout.x,
                 y: layout.y,
                 name: data.getName(i),
+                value: data.get("value", i) as number,
               });
             }
           }
@@ -1069,6 +1070,7 @@ export default defineComponent({
         mouseX: number,
         mouseY: number,
         nodeName: string,
+        requestsOverride?: number,
       ) => {
         resetToTextTooltip();
 
@@ -1080,10 +1082,15 @@ export default defineComponent({
           return;
         }
 
-        const requests = node.requests || 0;
+        // Use direction-aware value from tree node when available (matches the
+        // label), else fall back to the backend's node-level aggregate.
+        const requests =
+          requestsOverride !== undefined
+            ? requestsOverride
+            : (node.requests || 0);
         const errors = node.errors || 0;
         const errRate =
-          node.error_rate ?? (requests > 0 ? (errors / requests) * 100 : 0);
+          node.error_rate ?? (node.requests > 0 ? (node.errors / node.requests) * 100 : 0);
         tooltipEl.innerHTML = generateNodeTooltipContent(
           nodeName,
           requests,
@@ -1176,7 +1183,7 @@ export default defineComponent({
           }
           const key = `node:${nearestNode.name}`;
           activeKey = key;
-          showNodeTooltip(e.offsetX, e.offsetY, nearestNode.name);
+          showNodeTooltip(e.offsetX, e.offsetY, nearestNode.name, nearestNode.value);
           return;
         }