From 02532b000e56953d35581449870c534633b6cd32 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Fri, 5 Apr 2024 09:16:29 -0400
Subject: [PATCH] vis: TopologyView: add text labels to nodes

---
 .../src/components/views/TopologyView.tsx       | 17 +++++++++++++----
 .../src/components/views/topology-view.css      |  8 ++++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/ott-vis-panel/src/components/views/TopologyView.tsx b/packages/ott-vis-panel/src/components/views/TopologyView.tsx
index 81332ca84..82191b6bb 100644
--- a/packages/ott-vis-panel/src/components/views/TopologyView.tsx
+++ b/packages/ott-vis-panel/src/components/views/TopologyView.tsx
@@ -143,9 +143,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 				.each(function (subtree) {
 					const tree = subtree.tree;
 					const group = d3.select(this);
-					const gLinks = group.select(".links");
-					const gNodes = group.select(".nodes");
-					gLinks
+					group.select(".links")
 						.selectAll(".link")
 						.data(tree.links(), (d: any) => d.source?.data?.id + d.target?.data?.id)
 						.join("path")
@@ -155,7 +153,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 						.attr("d", diagonal)
 						.attr("stroke-width", 1.5);
 
-					gNodes
+					group.select(".nodes")
 						.selectAll(".node")
 						.data(tree.descendants(), (d: any) => d.data.id)
 						.join("circle")
@@ -165,6 +163,17 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 						.attr("cy", (d: any) => d.y)
 						.attr("r", d => getRadius(d.data.group))
 						.attr("fill", d => colors.assign(d.data.group));
+
+					group.select(".texts")
+						.selectAll(".text")
+						.data(tree.descendants(), (d: any) => d.data.id)
+						.join("text")
+						.filter(d => d.data.group !== "room" && d.data.group !== "client")
+						.attr("class", "text")
+						.text(d => d.data.id.substring(0, 6))
+						.attr("x", (d: any) => d.x)
+						.attr("y", (d: any) => d.y)
+						.attr("font-size", 10)
 				});
 		}
 
diff --git a/packages/ott-vis-panel/src/components/views/topology-view.css b/packages/ott-vis-panel/src/components/views/topology-view.css
index cb260ad30..05efdcc3d 100644
--- a/packages/ott-vis-panel/src/components/views/topology-view.css
+++ b/packages/ott-vis-panel/src/components/views/topology-view.css
@@ -9,6 +9,14 @@
 	stroke-width: 1.5;
 }
 
+.text {
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	text-anchor: middle;
+	alignment-baseline: middle;
+	stroke-width: 0;
+	fill: white;
+}
+
 .region {
 	fill: rgba(255, 255, 255, 0.1);
 	stroke: white;