initial protocol prototype - to be enhanced

static/app.js

@@ -150,8 +150,11 @@ export class CanvasApp {
         } else {
             const defaultLabel = 'Read traffic';
             const label = prompt('Enter connection label:', defaultLabel);
-            if (label) {
-                const conn = new Connection(this.connectionStart, nodeObj, label, this);
+            const protocol = prompt('Protocol (e.g. HTTP, gRPC, Kafka:', 'HTTP')
+            if (label && protocol) {
+                const conn = new Connection(this.connectionStart, nodeObj, label, protocol, this);
+                conn.protocol = protocol;
+                conn.protocolText.textContent = protocol;
                 this.connections.push(conn);
             }
             this.connectionStart.group.classList.remove('selected');
@@ -234,7 +237,8 @@ export class CanvasApp {
             source: c.start.id,
             target: c.end.id,
             label: c.label || '',
-            direction: c.direction
+            direction: c.direction,
+            protocol: c.protocol || ''
         }));
 
         return { nodes, connections };

static/connection.js

@@ -1,11 +1,12 @@
 import { generateNodeId, createSVGElement } from './utils.js';
 
 export class Connection {
-    constructor(startNode, endNode, label, app) {
+    constructor(startNode, endNode, label, protocol, app) {
         this.start = startNode;
         this.end = endNode;
         this.app = app;
         this.label = label;
+        this.protocol = protocol;
         this.direction = "forward";
         this.line = createSVGElement('line', {
             stroke: '#ccc', 'stroke-width': 2, 'marker-end': 'url(#arrowhead)'
@@ -20,8 +21,15 @@ export class Connection {
             'text-anchor': 'middle', 'font-size': 12, fill: '#ccc'
         });
         this.text.textContent = label;
+        this.protocolText = createSVGElement('text', {
+            'text-ancor': 'middle',
+            'font-size': 10,
+            fill: '#888'
+        });
+        this.protocolText.textContent = this.protocol || '';
         app.canvas.appendChild(this.line);
         app.canvas.appendChild(this.text);
+        app.canvas.appendChild(this.protocolText)
         this.updatePosition();
 
         this.selected = false;
@@ -79,6 +87,9 @@ export class Connection {
 
         this.hitbox.setAttribute('cx', hbX);
         this.hitbox.setAttribute('cy', hbY);
+
+        this.protocolText.setAttribute('x', midX);
+        this.protocolText.setAttribute('y', midY + 12);
     }
 
     toggleDirection() {