From c59786072bea428135460409c9a9e8b59e1ec056 Mon Sep 17 00:00:00 2001
From: William Jeynes <william.jeynes@hotmail.com>
Date: Thu, 9 Apr 2026 12:38:00 +0100
Subject: [PATCH] add text to graph

---
 graphviz/frontend/src/App.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/graphviz/frontend/src/App.tsx b/graphviz/frontend/src/App.tsx
index 52daa87..39f9967 100644
--- a/graphviz/frontend/src/App.tsx
+++ b/graphviz/frontend/src/App.tsx
@@ -60,23 +60,33 @@ export function App() {
           //linkDirectionalParticleSpeed={0.002}
           onNodeRightClick={(node) => setNode(node)}
           nodeCanvasObject={(node, ctx, globalScale) => {
-            const fontSize = 12;
+            const label = node.label;
+            const fontSize = 6 + 2*node.members.length;
             ctx.font = `${fontSize}px Sans-Serif`;
+            const textWidth = ctx.measureText(label).width;
+            const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+
             ctx.fillStyle = node.type.includes('claim') ? "blue" : "green";
-            ctx.beginPath();
-            ctx.arc(node.x, node.y, 2*node.members.length , 0, 2 * Math.PI, false);
-            ctx.fill();
-            
-            if (node.members.length >= 2) {
-              ctx.fillStyle = "black";
-              ctx.fillText(node.label, node.x + 12, node.y + 4);
-            }
+            ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = 'white';
+            ctx.fillText(label, node.x, node.y);
+
+            node.__bckgDimensions = bckgDimensions; 
             
           }}
+          nodePointerAreaPaint={(node, color, ctx) => {
+            ctx.fillStyle = color;
+            const bckgDimensions = node.__bckgDimensions;
+            bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+          }}
+             
         />
       </div>
 
-      <div style={{ position:"absolute", top:0, left:0 }}>
+      <div style={{ position:"absolute", top:0, right:0, borderRadius: "3px", backgroundColor: "gray"}}>
         <h2>Details</h2>
         {selectedNode ? (
           <div>