@shumoku/core 0.2.0 → 0.2.3

package/dist/renderer/svg.js

@@ -2,8 +2,8 @@
  * SVG Renderer
  * Renders NetworkGraph to SVG
  */
-import { getDeviceIcon, getVendorIconEntry } from '../icons/index.js';
 import { DEFAULT_ICON_SIZE, ICON_LABEL_GAP, LABEL_LINE_HEIGHT, MAX_ICON_WIDTH_RATIO, } from '../constants.js';
+import { getDeviceIcon, getVendorIconEntry } from '../icons/index.js';
 const LIGHT_THEME = {
     backgroundColor: '#ffffff',
     defaultNodeFill: '#e2e8f0',
@@ -41,6 +41,8 @@ const DARK_THEME = {
 const DEFAULT_OPTIONS = {
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     interactive: true,
+    renderMode: 'static',
+    dataAttributes: { device: true, link: true, metadata: true },
 };
 // ============================================
 // SVG Renderer
@@ -52,6 +54,18 @@ export class SVGRenderer {
     constructor(options) {
         this.options = { ...DEFAULT_OPTIONS, ...options };
     }
+    /** Check if interactive mode is enabled */
+    get isInteractive() {
+        return this.options.renderMode === 'interactive';
+    }
+    /** Get data attribute options with defaults */
+    get dataAttrs() {
+        return {
+            device: this.options.dataAttributes?.device ?? true,
+            link: this.options.dataAttributes?.link ?? true,
+            metadata: this.options.dataAttributes?.metadata ?? true,
+        };
+    }
     /**
      * Get theme colors based on theme type
      */
@@ -96,21 +110,24 @@ export class SVGRenderer {
         // Styles
         parts.push(this.renderStyles());
         // Layer 1: Subgraphs (background)
-        layout.subgraphs.forEach((sg) => {
+        for (const sg of layout.subgraphs.values()) {
             parts.push(this.renderSubgraph(sg));
-        });
-        // Layer 2: Node backgrounds (shapes)
-        layout.nodes.forEach((node) => {
-            parts.push(this.renderNodeBackground(node));
-        });
-        // Layer 3: Links (on top of node backgrounds)
-        layout.links.forEach((link) => {
+        }
+        // Layer 2: Links (below nodes)
+        for (const link of layout.links.values()) {
             parts.push(this.renderLink(link, layout.nodes));
-        });
-        // Layer 4: Node foregrounds (content + ports, on top of links)
-        layout.nodes.forEach((node) => {
-            parts.push(this.renderNodeForeground(node));
-        });
+        }
+        // Layer 3: Nodes (bg + fg as one unit, without ports)
+        for (const node of layout.nodes.values()) {
+            parts.push(this.renderNode(node));
+        }
+        // Layer 4: Ports (separate layer on top of nodes)
+        for (const node of layout.nodes.values()) {
+            const portsRendered = this.renderPorts(node.id, node.position.x, node.position.y, node.ports);
+            if (portsRendered) {
+                parts.push(portsRendered);
+            }
+        }
         // Legend (if enabled) - use already calculated legendSettings
         if (legendSettings.enabled && legendWidth > 0) {
             parts.push(this.renderLegend(graph, layout, legendSettings));
@@ -131,10 +148,10 @@ export class SVGRenderer {
         let itemCount = 0;
         if (settings.showBandwidth) {
             const usedBandwidths = new Set();
-            graph.links.forEach(link => {
+            for (const link of graph.links) {
                 if (link.bandwidth)
                     usedBandwidths.add(link.bandwidth);
-            });
+            }
             itemCount += usedBandwidths.size;
         }
         if (itemCount === 0) {
@@ -181,19 +198,19 @@ export class SVGRenderer {
         const maxLabelWidth = 100;
         // Collect used bandwidths
         const usedBandwidths = new Set();
-        graph.links.forEach(link => {
+        for (const link of graph.links) {
             if (link.bandwidth)
                 usedBandwidths.add(link.bandwidth);
-        });
+        }
         // Collect used device types
         const usedDeviceTypes = new Set();
-        graph.nodes.forEach(node => {
+        for (const node of graph.nodes) {
             if (node.type)
                 usedDeviceTypes.add(node.type);
-        });
+        }
         // Build legend items
         if (settings.showBandwidth && usedBandwidths.size > 0) {
-            const sortedBandwidths = ['1G', '10G', '25G', '40G', '100G'].filter(b => usedBandwidths.has(b));
+            const sortedBandwidths = ['1G', '10G', '25G', '40G', '100G'].filter((b) => usedBandwidths.has(b));
             for (const bw of sortedBandwidths) {
                 const config = this.getBandwidthConfig(bw);
                 items.push({
@@ -226,18 +243,18 @@ export class SVGRenderer {
                 break;
         }
         // Render legend box
-        let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
-  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
-    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
+        let svg = `<g class="legend" transform="translate(${legendX}, ${legendY})">
+  <rect x="0" y="0" width="${legendWidth}" height="${legendHeight}" rx="4"
+    fill="${this.themeColors.backgroundColor}" stroke="${this.themeColors.subgraphStroke}" stroke-width="1" opacity="0.95" />
   <text x="${padding}" y="${padding + 12}" class="subgraph-label" font-size="11">Legend</text>`;
         // Render items
-        items.forEach((item, index) => {
+        for (const [index, item] of items.entries()) {
             const y = padding + 28 + index * lineHeight;
             svg += `\n  <g transform="translate(${padding}, ${y})">`;
             svg += `\n    ${item.icon}`;
             svg += `\n    <text x="${iconWidth + 4}" y="4" class="node-label" font-size="10">${this.escapeXml(item.label)}</text>`;
-            svg += `\n  </g>`;
-        });
+            svg += '\n  </g>';
+        }
         svg += '\n</g>';
         return svg;
     }
@@ -249,46 +266,59 @@ export class SVGRenderer {
         const lineWidth = 24;
         const strokeWidth = 2;
         const offsets = this.calculateLineOffsets(lineCount, lineSpacing);
-        const lines = offsets.map(offset => {
+        const lines = offsets.map((offset) => {
             const y = offset;
             return `<line x1="0" y1="${y}" x2="${lineWidth}" y2="${y}" stroke="${this.themeColors.defaultLinkStroke}" stroke-width="${strokeWidth}" />`;
         });
         return `<g transform="translate(0, 0)">${lines.join('')}</g>`;
     }
     renderHeader(width, height, viewBox) {
-        return `<svg xmlns="http://www.w3.org/2000/svg"
-  viewBox="${viewBox}"
-  width="${width}"
-  height="${height}"
+        return `<svg xmlns="http://www.w3.org/2000/svg"
+  viewBox="${viewBox}"
+  width="${width}"
+  height="${height}"
   style="background: ${this.themeColors.backgroundColor}">`;
     }
     renderDefs() {
-        return `<defs>
-  <!-- Arrow marker -->
-  <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="${this.themeColors.defaultLinkStroke}" />
-  </marker>
-  <marker id="arrow-red" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626" />
-  </marker>
-
-  <!-- Filters -->
-  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15"/>
-  </filter>
+        return `<defs>
+  <!-- Arrow marker -->
+  <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="${this.themeColors.defaultLinkStroke}" />
+  </marker>
+  <marker id="arrow-red" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626" />
+  </marker>
+
+  <!-- Filters -->
+  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+    <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15"/>
+  </filter>
 </defs>`;
     }
     renderStyles() {
-        return `<style>
-  .node { cursor: pointer; }
-  .node:hover rect, .node:hover circle, .node:hover polygon { filter: brightness(0.95); }
-  .node-label { font-family: ${this.options.fontFamily}; font-size: 12px; fill: ${this.themeColors.labelColor}; }
-  .node-label-bold { font-weight: bold; }
-  .node-icon { color: ${this.themeColors.labelSecondaryColor}; }
-  .subgraph-icon { opacity: 0.9; }
-  .subgraph-label { font-family: ${this.options.fontFamily}; font-size: 14px; font-weight: 600; fill: ${this.themeColors.subgraphLabelColor}; }
-  .link-label { font-family: ${this.options.fontFamily}; font-size: 11px; fill: ${this.themeColors.labelSecondaryColor}; }
-  .endpoint-label { font-family: ${this.options.fontFamily}; font-size: 9px; fill: ${this.themeColors.labelColor}; }
+        // CSS variables for interactive runtime theming
+        const cssVars = this.isInteractive
+            ? `
+  :root {
+    --shumoku-bg: ${this.themeColors.backgroundColor};
+    --shumoku-surface: ${this.themeColors.subgraphFill};
+    --shumoku-text: ${this.themeColors.labelColor};
+    --shumoku-text-secondary: ${this.themeColors.labelSecondaryColor};
+    --shumoku-border: ${this.themeColors.subgraphStroke};
+    --shumoku-node-fill: ${this.themeColors.defaultNodeFill};
+    --shumoku-node-stroke: ${this.themeColors.defaultNodeStroke};
+    --shumoku-link-stroke: ${this.themeColors.defaultLinkStroke};
+    --shumoku-font: ${this.options.fontFamily};
+  }`
+            : '';
+        return `<style>${cssVars}
+  .node-label { font-family: ${this.options.fontFamily}; font-size: 12px; fill: ${this.themeColors.labelColor}; }
+  .node-label-bold { font-weight: bold; }
+  .node-icon { color: ${this.themeColors.labelSecondaryColor}; }
+  .subgraph-icon { opacity: 0.9; }
+  .subgraph-label { font-family: ${this.options.fontFamily}; font-size: 14px; font-weight: 600; fill: ${this.themeColors.subgraphLabelColor}; }
+  .link-label { font-family: ${this.options.fontFamily}; font-size: 11px; fill: ${this.themeColors.labelSecondaryColor}; }
+  .endpoint-label { font-family: ${this.options.fontFamily}; font-size: 9px; fill: ${this.themeColors.labelColor}; }
 </style>`;
     }
     renderSubgraph(sg) {
@@ -327,37 +357,48 @@ export class SVGRenderer {
                 if (iconContent.startsWith('<svg')) {
                     const viewBoxMatch = iconContent.match(/viewBox="0 0 (\d+) (\d+)"/);
                     if (viewBoxMatch) {
-                        const vbWidth = parseInt(viewBoxMatch[1]);
-                        const vbHeight = parseInt(viewBoxMatch[2]);
+                        const vbWidth = Number.parseInt(viewBoxMatch[1], 10);
+                        const vbHeight = Number.parseInt(viewBoxMatch[2], 10);
                         const aspectRatio = vbWidth / vbHeight;
                         const iconWidth = Math.round(iconSize * aspectRatio);
-                        iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
-    <svg width="${iconWidth}" height="${iconSize}" viewBox="0 0 ${vbWidth} ${vbHeight}">
-      ${iconContent.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')}
-    </svg>
+                        iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
+    <svg width="${iconWidth}" height="${iconSize}" viewBox="0 0 ${vbWidth} ${vbHeight}">
+      ${iconContent.replace(/<svg[^>]*>/, '').replace(/<\/svg>$/, '')}
+    </svg>
   </g>`;
                     }
                 }
                 else {
                     // Use viewBox from entry
-                    iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
-    <svg width="${iconSize}" height="${iconSize}" viewBox="${viewBox}">
-      ${iconContent}
-    </svg>
+                    iconSvg = `<g class="subgraph-icon" transform="translate(${iconX}, ${iconY})">
+    <svg width="${iconSize}" height="${iconSize}" viewBox="${viewBox}">
+      ${iconContent}
+    </svg>
   </g>`;
                 }
             }
         }
-        return `<g class="subgraph" data-id="${sg.id}">
-  <rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"
-    rx="${rx}" ry="${rx}"
-    fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"
-    ${strokeDasharray ? `stroke-dasharray="${strokeDasharray}"` : ''} />
-  ${iconSvg}
-  <text x="${labelX}" y="${labelY}" class="subgraph-label" text-anchor="${textAnchor}">${this.escapeXml(subgraph.label)}</text>
+        return `<g class="subgraph" data-id="${sg.id}">
+  <rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"
+    rx="${rx}" ry="${rx}"
+    fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}"
+    ${strokeDasharray ? `stroke-dasharray="${strokeDasharray}"` : ''} />
+  ${iconSvg}
+  <text x="${labelX}" y="${labelY}" class="subgraph-label" text-anchor="${textAnchor}">${this.escapeXml(subgraph.label)}</text>
 </g>`;
     }
     /** Render node background (shape only) */
+    /** Render complete node (bg + fg as one unit) */
+    renderNode(layoutNode) {
+        const { id, node } = layoutNode;
+        const dataAttrs = this.buildNodeDataAttributes(node);
+        const bg = this.renderNodeBackground(layoutNode);
+        const fg = this.renderNodeForeground(layoutNode);
+        return `<g class="node" data-id="${id}"${dataAttrs} >
+${bg}
+${fg}
+</g>`;
+    }
     renderNodeBackground(layoutNode) {
         const { id, position, size, node } = layoutNode;
         const x = position.x;
@@ -370,36 +411,72 @@ export class SVGRenderer {
         const strokeWidth = style.strokeWidth || 1;
         const strokeDasharray = style.strokeDasharray || '';
         const shape = this.renderNodeShape(node.shape, x, y, w, h, fill, stroke, strokeWidth, strokeDasharray);
-        return `<g class="node-bg" data-id="${id}">${shape}</g>`;
+        // Build data attributes for interactive mode
+        const dataAttrs = this.buildNodeDataAttributes(node);
+        return `<g class="node-bg" data-id="${id}"${dataAttrs}>${shape}</g>`;
     }
-    /** Render node foreground (content + ports) */
+    /** Build data attributes for a node (interactive mode only) */
+    buildNodeDataAttributes(node) {
+        if (!this.isInteractive || !this.dataAttrs.device)
+            return '';
+        const attrs = [];
+        if (node.type)
+            attrs.push(`data-device-type="${this.escapeXml(node.type)}"`);
+        if (node.vendor)
+            attrs.push(`data-device-vendor="${this.escapeXml(node.vendor)}"`);
+        if (node.model)
+            attrs.push(`data-device-model="${this.escapeXml(node.model)}"`);
+        if (node.service)
+            attrs.push(`data-device-service="${this.escapeXml(node.service)}"`);
+        if (node.resource)
+            attrs.push(`data-device-resource="${this.escapeXml(node.resource)}"`);
+        // Include full metadata as JSON
+        if (this.dataAttrs.metadata) {
+            const deviceInfo = {
+                id: node.id,
+                label: node.label,
+                type: node.type,
+                vendor: node.vendor,
+                model: node.model,
+                service: node.service,
+                resource: node.resource,
+                metadata: node.metadata,
+            };
+            attrs.push(`data-device-json="${this.escapeXml(JSON.stringify(deviceInfo))}"`);
+        }
+        return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+    }
+    /** Render node foreground (content only, ports rendered separately) */
     renderNodeForeground(layoutNode) {
-        const { id, position, size, node, ports } = layoutNode;
+        const { id, position, size, node } = layoutNode;
         const x = position.x;
         const y = position.y;
         const w = size.width;
         const content = this.renderNodeContent(node, x, y, w);
-        const portsRendered = this.renderPorts(x, y, ports);
-        return `<g class="node-fg" data-id="${id}">
-  ${content}
-  ${portsRendered}
+        // Include data attributes for interactive mode (same as node-bg)
+        const dataAttrs = this.buildNodeDataAttributes(node);
+        return `<g class="node-fg" data-id="${id}"${dataAttrs}>
+  ${content}
 </g>`;
     }
     /**
-     * Render ports on a node
+     * Render ports on a node (as separate groups)
      */
-    renderPorts(nodeX, nodeY, ports) {
+    renderPorts(nodeId, nodeX, nodeY, ports) {
         if (!ports || ports.size === 0)
             return '';
-        const parts = [];
-        ports.forEach((port) => {
+        const groups = [];
+        for (const port of ports.values()) {
             const px = nodeX + port.position.x;
             const py = nodeY + port.position.y;
             const pw = port.size.width;
             const ph = port.size.height;
+            // Port data attribute for interactive mode
+            const portDeviceAttr = this.isInteractive ? ` data-port-device="${nodeId}"` : '';
+            const parts = [];
             // Port box
-            parts.push(`<rect class="port" data-port="${port.id}"
-        x="${px - pw / 2}" y="${py - ph / 2}" width="${pw}" height="${ph}"
+            parts.push(`<rect class="port-box"
+        x="${px - pw / 2}" y="${py - ph / 2}" width="${pw}" height="${ph}"
         fill="${this.themeColors.portFill}" stroke="${this.themeColors.portStroke}" stroke-width="1" rx="2" />`);
             // Port label - position based on side
             let labelX = px;
@@ -438,8 +515,12 @@ export class SVGRenderer {
             const bgY = labelY - labelHeight + 3;
             parts.push(`<rect class="port-label-bg" x="${bgX}" y="${bgY}" width="${labelWidth}" height="${labelHeight}" rx="2" fill="${this.themeColors.portLabelBg}" />`);
             parts.push(`<text class="port-label" x="${labelX}" y="${labelY}" text-anchor="${textAnchor}" font-size="9" fill="${this.themeColors.portLabelColor}">${labelText}</text>`);
-        });
-        return parts.join('\n  ');
+            // Wrap in a group with data attributes
+            groups.push(`<g class="port" data-port="${port.id}"${portDeviceAttr} >
+  ${parts.join('\n  ')}
+</g>`);
+        }
+        return groups.join('\n');
     }
     renderNodeShape(shape, x, y, w, h, fill, stroke, strokeWidth, strokeDasharray) {
         const dashAttr = strokeDasharray ? `stroke-dasharray="${strokeDasharray}"` : '';
@@ -447,40 +528,44 @@ export class SVGRenderer {
         const halfH = h / 2;
         switch (shape) {
             case 'rect':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}"
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
             case 'rounded':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="8" ry="8"
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="8" ry="8"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
-            case 'circle':
+            case 'circle': {
                 const r = Math.min(halfW, halfH);
-                return `<circle cx="${x}" cy="${y}" r="${r}"
+                return `<circle cx="${x}" cy="${y}" r="${r}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+            }
             case 'diamond':
-                return `<polygon points="${x},${y - halfH} ${x + halfW},${y} ${x},${y + halfH} ${x - halfW},${y}"
+                return `<polygon points="${x},${y - halfH} ${x + halfW},${y} ${x},${y + halfH} ${x - halfW},${y}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
-            case 'hexagon':
+            case 'hexagon': {
                 const hx = halfW * 0.866;
-                return `<polygon points="${x - halfW},${y} ${x - hx},${y - halfH} ${x + hx},${y - halfH} ${x + halfW},${y} ${x + hx},${y + halfH} ${x - hx},${y + halfH}"
+                return `<polygon points="${x - halfW},${y} ${x - hx},${y - halfH} ${x + hx},${y - halfH} ${x + halfW},${y} ${x + hx},${y + halfH} ${x - hx},${y + halfH}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
-            case 'cylinder':
+            }
+            case 'cylinder': {
                 const ellipseH = h * 0.15;
-                return `<g>
-          <ellipse cx="${x}" cy="${y + halfH - ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} />
-          <rect x="${x - halfW}" y="${y - halfH + ellipseH}" width="${w}" height="${h - ellipseH * 2}" fill="${fill}" stroke="none" />
-          <line x1="${x - halfW}" y1="${y - halfH + ellipseH}" x2="${x - halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
-          <line x1="${x + halfW}" y1="${y - halfH + ellipseH}" x2="${x + halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
-          <ellipse cx="${x}" cy="${y - halfH + ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />
+                return `<g>
+          <ellipse cx="${x}" cy="${y + halfH - ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} />
+          <rect x="${x - halfW}" y="${y - halfH + ellipseH}" width="${w}" height="${h - ellipseH * 2}" fill="${fill}" stroke="none" />
+          <line x1="${x - halfW}" y1="${y - halfH + ellipseH}" x2="${x - halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
+          <line x1="${x + halfW}" y1="${y - halfH + ellipseH}" x2="${x + halfW}" y2="${y + halfH - ellipseH}" stroke="${stroke}" stroke-width="${strokeWidth}" />
+          <ellipse cx="${x}" cy="${y - halfH + ellipseH}" rx="${halfW}" ry="${ellipseH}" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />
         </g>`;
+            }
             case 'stadium':
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="${halfH}" ry="${halfH}"
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="${halfH}" ry="${halfH}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
-            case 'trapezoid':
+            case 'trapezoid': {
                 const indent = w * 0.15;
-                return `<polygon points="${x - halfW + indent},${y - halfH} ${x + halfW - indent},${y - halfH} ${x + halfW},${y + halfH} ${x - halfW},${y + halfH}"
+                return `<polygon points="${x - halfW + indent},${y - halfH} ${x + halfW - indent},${y - halfH} ${x + halfW},${y + halfH} ${x - halfW},${y + halfH}"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
+            }
             default:
-                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="4" ry="4"
+                return `<rect x="${x - halfW}" y="${y - halfH}" width="${w}" height="${h}" rx="4" ry="4"
           fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" ${dashAttr} filter="url(#shadow)" />`;
         }
     }
@@ -501,8 +586,8 @@ export class SVGRenderer {
                 if (vendorIcon.startsWith('<svg')) {
                     const viewBoxMatch = vendorIcon.match(/viewBox="0 0 (\d+) (\d+)"/);
                     if (viewBoxMatch) {
-                        const vbWidth = parseInt(viewBoxMatch[1]);
-                        const vbHeight = parseInt(viewBoxMatch[2]);
+                        const vbWidth = Number.parseInt(viewBoxMatch[1], 10);
+                        const vbHeight = Number.parseInt(viewBoxMatch[2], 10);
                         const aspectRatio = vbWidth / vbHeight;
                         let iconWidth = Math.round(DEFAULT_ICON_SIZE * aspectRatio);
                         let iconHeight = DEFAULT_ICON_SIZE;
@@ -521,10 +606,12 @@ export class SVGRenderer {
                 // Parse viewBox for aspect ratio calculation
                 const vbMatch = viewBox.match(/(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/);
                 if (vbMatch) {
-                    const vbWidth = parseInt(vbMatch[3]);
-                    const vbHeight = parseInt(vbMatch[4]);
+                    const vbWidth = Number.parseInt(vbMatch[3], 10);
+                    const vbHeight = Number.parseInt(vbMatch[4], 10);
                     const aspectRatio = vbWidth / vbHeight;
-                    let iconWidth = Math.abs(aspectRatio - 1) < 0.01 ? DEFAULT_ICON_SIZE : Math.round(DEFAULT_ICON_SIZE * aspectRatio);
+                    let iconWidth = Math.abs(aspectRatio - 1) < 0.01
+                        ? DEFAULT_ICON_SIZE
+                        : Math.round(DEFAULT_ICON_SIZE * aspectRatio);
                     let iconHeight = DEFAULT_ICON_SIZE;
                     if (iconWidth > maxIconWidth) {
                         iconWidth = maxIconWidth;
@@ -571,18 +658,18 @@ export class SVGRenderer {
         // Render icon at top of content block
         if (iconInfo) {
             const iconY = contentTop;
-            parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
-      ${iconInfo.svg}
+            parts.push(`<g class="node-icon" transform="translate(${x - iconInfo.width / 2}, ${iconY})">
+      ${iconInfo.svg}
     </g>`);
         }
         // Render labels below icon
         const labelStartY = contentTop + iconHeight + gap + LABEL_LINE_HEIGHT * 0.7; // 0.7 for text baseline adjustment
-        labels.forEach((line, i) => {
+        for (const [i, line] of labels.entries()) {
             const isBold = line.includes('<b>') || line.includes('<strong>');
             const cleanLine = line.replace(/<\/?b>|<\/?strong>|<br\s*\/?>/gi, '');
             const className = isBold ? 'node-label node-label-bold' : 'node-label';
             parts.push(`<text x="${x}" y="${labelStartY + i * LABEL_LINE_HEIGHT}" class="${className}" text-anchor="middle">${this.escapeXml(cleanLine)}</text>`);
-        });
+        }
         return parts.join('\n  ');
     }
     renderLink(layoutLink, nodes) {
@@ -609,9 +696,7 @@ export class SVGRenderer {
         }
         // VLANs (link-level, applies to both endpoints)
         if (link.vlan && link.vlan.length > 0) {
-            const vlanText = link.vlan.length === 1
-                ? `VLAN ${link.vlan[0]}`
-                : `VLAN ${link.vlan.join(', ')}`;
+            const vlanText = link.vlan.length === 1 ? `VLAN ${link.vlan[0]}` : `VLAN ${link.vlan.join(', ')}`;
             result += `\n<text x="${midPoint.x}" y="${midPoint.y + labelYOffset}" class="link-label" text-anchor="middle">${this.escapeXml(vlanText)}</text>`;
         }
         // Get node center positions for label placement
@@ -632,7 +717,45 @@ export class SVGRenderer {
             const labelPos = this.getEndpointLabelPosition(points, 'end', toNodeCenterX, portName);
             result += this.renderEndpointLabels(toLabels, labelPos.x, labelPos.y, labelPos.anchor);
         }
-        return `<g class="link-group">\n${result}\n</g>`;
+        // Build data attributes for interactive mode
+        const dataAttrs = this.buildLinkDataAttributes(layoutLink);
+        return `<g class="link-group" data-link-id="${id}"${dataAttrs}>\n${result}\n</g>`;
+    }
+    /** Build data attributes for a link (interactive mode only) */
+    buildLinkDataAttributes(layoutLink) {
+        if (!this.isInteractive || !this.dataAttrs.link)
+            return '';
+        const { link, fromEndpoint, toEndpoint } = layoutLink;
+        const attrs = [];
+        // Basic link attributes
+        if (link.bandwidth)
+            attrs.push(`data-link-bandwidth="${this.escapeXml(link.bandwidth)}"`);
+        if (link.vlan && link.vlan.length > 0) {
+            attrs.push(`data-link-vlan="${link.vlan.join(',')}"`);
+        }
+        if (link.redundancy)
+            attrs.push(`data-link-redundancy="${this.escapeXml(link.redundancy)}"`);
+        // Endpoint info
+        const fromStr = fromEndpoint.port
+            ? `${fromEndpoint.node}:${fromEndpoint.port}`
+            : fromEndpoint.node;
+        const toStr = toEndpoint.port ? `${toEndpoint.node}:${toEndpoint.port}` : toEndpoint.node;
+        attrs.push(`data-link-from="${this.escapeXml(fromStr)}"`);
+        attrs.push(`data-link-to="${this.escapeXml(toStr)}"`);
+        // Include full metadata as JSON
+        if (this.dataAttrs.metadata) {
+            const linkInfo = {
+                id: layoutLink.id,
+                from: fromEndpoint,
+                to: toEndpoint,
+                bandwidth: link.bandwidth,
+                vlan: link.vlan,
+                redundancy: link.redundancy,
+                label: link.label,
+            };
+            attrs.push(`data-link-json="${this.escapeXml(JSON.stringify(linkInfo))}"`);
+        }
+        return attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
     }
     formatEndpointLabels(endpoint) {
         const parts = [];
@@ -722,7 +845,7 @@ export class SVGRenderer {
         const paddingY = 2;
         const charWidth = 4.8; // Approximate character width for 9px font
         // Calculate dimensions
-        const maxLen = Math.max(...lines.map(l => l.length));
+        const maxLen = Math.max(...lines.map((l) => l.length));
         const rectWidth = maxLen * charWidth + paddingX * 2;
         const rectHeight = lines.length * lineHeight + paddingY * 2;
         // Adjust rect position based on text anchor
@@ -735,17 +858,20 @@ export class SVGRenderer {
         }
         const rectY = y - lineHeight + paddingY;
         let result = `\n<rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" rx="2" fill="${this.themeColors.endpointLabelBg}" stroke="${this.themeColors.endpointLabelStroke}" stroke-width="0.5" />`;
-        lines.forEach((line, i) => {
+        for (const [i, line] of lines.entries()) {
             const textY = y + i * lineHeight;
             result += `\n<text x="${x}" y="${textY}" class="endpoint-label" text-anchor="${anchor}">${this.escapeXml(line)}</text>`;
-        });
+        }
         return result;
     }
     getLinkStrokeWidth(type) {
         switch (type) {
-            case 'thick': return 3;
-            case 'double': return 2;
-            default: return 2;
+            case 'thick':
+                return 3;
+            case 'double':
+                return 2;
+            default:
+                return 2;
         }
     }
     /**
@@ -779,32 +905,42 @@ export class SVGRenderer {
     renderBandwidthLines(id, points, stroke, strokeWidth, dasharray, markerEnd, config, type) {
         const { lineCount } = config;
         const lineSpacing = 3; // Space between parallel lines
+        // Generate line paths
+        const lines = [];
+        const basePath = this.generatePath(points);
         if (lineCount === 1) {
             // Single line
-            const path = this.generatePath(points);
-            let result = `<path class="link" data-id="${id}" d="${path}"
-  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
-  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''}
-  ${markerEnd ? `marker-end="${markerEnd}"` : ''} />`;
+            let linePath = `<path class="link" data-id="${id}" d="${basePath}"
+  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
+  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''}
+  ${markerEnd ? `marker-end="${markerEnd}"` : ''} pointer-events="none" />`;
             // Double line effect for redundancy types
             if (type === 'double') {
-                result = `<path class="link-double-outer" d="${path}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth + 2}" />
-<path class="link-double-inner" d="${path}" fill="none" stroke="white" stroke-width="${strokeWidth - 1}" />
-${result}`;
+                linePath = `<path class="link-double-outer" d="${basePath}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth + 2}" pointer-events="none" />
+<path class="link-double-inner" d="${basePath}" fill="none" stroke="white" stroke-width="${strokeWidth - 1}" pointer-events="none" />
+${linePath}`;
             }
-            return result;
+            lines.push(linePath);
         }
-        // Multiple parallel lines
-        const paths = [];
-        const offsets = this.calculateLineOffsets(lineCount, lineSpacing);
-        for (const offset of offsets) {
-            const offsetPoints = this.offsetPoints(points, offset);
-            const path = this.generatePath(offsetPoints);
-            paths.push(`<path class="link" data-id="${id}" d="${path}"
-  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
-  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''} />`);
+        else {
+            // Multiple parallel lines
+            const offsets = this.calculateLineOffsets(lineCount, lineSpacing);
+            for (const offset of offsets) {
+                const offsetPoints = this.offsetPoints(points, offset);
+                const path = this.generatePath(offsetPoints);
+                lines.push(`<path class="link" data-id="${id}" d="${path}"
+  fill="none" stroke="${stroke}" stroke-width="${strokeWidth}"
+  ${dasharray ? `stroke-dasharray="${dasharray}"` : ''} pointer-events="none" />`);
+            }
         }
-        return paths.join('\n');
+        // Calculate hit area width (same as actual lines, hidden underneath)
+        const hitWidth = lineCount === 1 ? strokeWidth : (lineCount - 1) * lineSpacing + strokeWidth;
+        // Wrap all lines in a group with transparent hit area on top
+        return `<g class="link-lines">
+${lines.join('\n')}
+<path class="link-hit-area" d="${basePath}"
+  fill="none" stroke="${stroke}" stroke-width="${hitWidth}" opacity="0"  />
+</g>`;
     }
     /**
      * Generate SVG path string from points with rounded corners
@@ -968,9 +1104,12 @@ ${result}`;
     }
     getLinkDasharray(type) {
         switch (type) {
-            case 'dashed': return '5 3';
-            case 'invisible': return '0';
-            default: return '';
+            case 'dashed':
+                return '5 3';
+            case 'invisible':
+                return '0';
+            default:
+                return '';
         }
     }
     getMidPoint(points) {
@@ -1020,7 +1159,7 @@ ${result}`;
         let hash = 0;
         for (let i = 0; i < str.length; i++) {
             const char = str.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
+            hash = (hash << 5) - hash + char;
             hash = hash & hash; // Convert to 32-bit integer
         }
         return Math.abs(hash);