From 43d7f6edfcf4f92901a225ad105789ae19766949 Mon Sep 17 00:00:00 2001
From: anusghos <anuska.ghosh@keysight.com>
Date: Tue, 16 Jun 2026 06:11:04 +0000
Subject: [PATCH] controller added and breadcrumb updated

---
 .../visualizer/frontend/css/style.css         | 107 ++++++++++++++++++
 src/infragraph/visualizer/frontend/index.html |  20 ++++
 .../visualizer/frontend/js/controller.js      |  88 ++++++++++++++
 .../visualizer/frontend/js/navigation.js      |   7 ++
 .../visualizer/frontend/js/network.js         |  20 ----
 src/infragraph/visualizer/visualize.py        |   6 +-
 6 files changed, 225 insertions(+), 23 deletions(-)
 create mode 100644 src/infragraph/visualizer/frontend/js/controller.js

diff --git a/src/infragraph/visualizer/frontend/css/style.css b/src/infragraph/visualizer/frontend/css/style.css
index 2fb94ca..112ec4c 100644
--- a/src/infragraph/visualizer/frontend/css/style.css
+++ b/src/infragraph/visualizer/frontend/css/style.css
@@ -621,4 +621,111 @@ div.vis-tooltip {
     font-size: 11px;
     color: var(--conn-text);
     display: none;
+}
+
+/* Controller Toggle */
+#controlToggle {
+    position: fixed;
+    top: 50px;
+    left: 15px;
+    z-index: 20;
+    padding: 10px 16px;
+    font-size: 13px;
+    cursor: pointer;
+    background: var(--accent-orange);
+    color: var(--text-primary);
+    border: none;
+    border-radius: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+#controlToggle.active {
+    background: var(--accent-hover);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset;
+}
+
+#controlToggle:hover {
+    background: var(--accent-hover);
+}
+/* Controller Panel */
+#controlPanel {
+    position: fixed;
+    top: 90px;
+    left: 15px;
+    z-index: 20;
+    width: 320px;
+    background: var(--filter-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    font-size: 13px;
+    display: flex;
+    flex-direction: column;
+}
+
+.control-header {
+    padding: 12px 16px;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--filter-text);
+    border-bottom: 1px solid var(--filter-header-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.control-header button {
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    color: var(--filter-muted);
+    padding: 0 4px;
+}
+
+.controller-body {
+    padding: 16px;
+}
+
+.controller-items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.controller-items label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--filter-text);
+    gap: 12px;
+    white-space: nowrap;
+}
+
+.controller-items input[type="range"] {
+    flex: 1;
+    min-width: 150px;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--border);
+    border-radius: 2px;
+    outline: none;
+}
+
+.controller-items input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--accent-orange);
+    cursor: pointer;
+    border: 2px solid var(--bg-primary);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.controller-items input[type="range"]::-webkit-slider-thumb:hover {
+    background: var(--accent-hover);
+    transform: scale(1.15);
 }
\ No newline at end of file
diff --git a/src/infragraph/visualizer/frontend/index.html b/src/infragraph/visualizer/frontend/index.html
index deb176f..6bf719d 100644
--- a/src/infragraph/visualizer/frontend/index.html
+++ b/src/infragraph/visualizer/frontend/index.html
@@ -138,6 +138,25 @@ <h5>Link Types <span id="edgeTypeCount" class="node-count-badge"></span></h5>
         </div>
     </div>
     </div>
+
+    <!--Controller Panel-->
+    <button id="controlToggle" onclick="toggleControllerPanel()">&#9881; Controls</button>
+    <div id="controlPanel" style="display:none;">
+    <div class="control-header">
+        <span>Controller panel</span>
+        <button onclick="toggleControllerPanel()" title="Close">&#10005;</button>
+    </div>
+    <div class="controller-body">
+        <div class="controller-section">
+            <div class="controller-items">
+                <label>Node font size<input type ="range" id="fontslider" min="10" max="100" value="20"></label>
+                <label>Edge font size<input type ="range" id="edgefont" min="10" max="100" value="15"></label>
+                <label>Node spacing <input type ="range" id="spaceslider" min="100" max="500" value="200"></label>
+                <label>Level seperation <input type ="range" id="levelslider" min="100" max="500" value="150"></label>
+                <label>Node Size <input type ="range" id="nodeslider" min="10" max="100" value="30"></label>
+            </div>
+        </div>
+    </div>
     
 
     
@@ -156,6 +175,7 @@ <h5>Link Types <span id="edgeTypeCount" class="node-count-badge"></span></h5>
     
     <script src="js/filters.js"></script>
     <script src="js/search.js"></script>
+    <script src="js/controller.js"></script>
 
     <script src="js/app.js"></script>
 </body>
diff --git a/src/infragraph/visualizer/frontend/js/controller.js b/src/infragraph/visualizer/frontend/js/controller.js
new file mode 100644
index 0000000..e4228ae
--- /dev/null
+++ b/src/infragraph/visualizer/frontend/js/controller.js
@@ -0,0 +1,88 @@
+let controlleropen= false;
+
+function toggleControllerPanel() {
+  controlleropen = !controlleropen;
+  document.getElementById('controlPanel').style.display = controlleropen ? 'flex' : 'none'; 
+  document.getElementById('controlToggle').classList.toggle('active', controlleropen); 
+}
+
+document.getElementById('fontslider').addEventListener('input', function () {
+    var size = parseInt(this.value);
+    var updates = net.body.data.nodes.get().map(function (n) {
+        return { id: n.id, font: { size: size } };
+    });
+    net.body.data.nodes.update(updates);
+});
+
+document.getElementById('edgefont').addEventListener('input', function () {
+    var size = parseInt(this.value);
+    var updates = net.body.data.edges.get().map(function (e) {
+        return { id: e.id, font: { size: size } };
+    });
+    net.body.data.edges.update(updates);
+});
+
+document.getElementById('nodeslider').addEventListener('input', function () {
+    var size = parseInt(this.value);
+    var updates = net.body.data.nodes.get().map(function (n) {
+        return { id: n.id, size: size };
+    });
+    net.body.data.nodes.update(updates);
+});
+
+document.getElementById('spaceslider').addEventListener('input', function () {
+    var spacing = parseInt(this.value);
+
+    net.setOptions({layout: {
+        hierarchical: {
+        enabled: true,}}})
+        
+        net.setOptions({
+                physics: { enabled: true,
+        hierarchicalRepulsion: {
+        centralGravity: 0.0, springLength: 150, springConstant:0.02,
+        nodeDistance: spacing, damping: 0.5
+        },
+        stabilization: { iterations: 150, fit: true }
+        },
+        interaction: { hover: true, dragNodes: true, dragView: true, zoomView: true }, }
+    );
+
+    net.setOptions({layout: {
+        hierarchical: {
+        enabled: true,}}})
+        
+
+        net.stabilize(1000);
+        net.once('stabilizationIterationsDone', function () {
+            net.setOptions({ physics: { enabled: false } });
+            net.fit({ animation: { duration: 10, easingFunction: 'easeInOutQuart' } });
+        });
+    }),
+
+
+document.getElementById('levelslider').addEventListener('input', function () {
+    var spacing = parseInt(this.value);
+
+    net.off('stabilizationIterationsDone');
+    net.setOptions({layout: {
+    hierarchical: {
+      enabled: true, levelSeparation: spacing}}})
+
+    net.setOptions({
+            physics: { enabled: true,
+    hierarchicalRepulsion: {
+      centralGravity: 0.0, springLength: 150, springConstant:0.02,
+      damping: 0.5
+    },
+        stabilization: { iterations: 150, fit: true }
+        },
+        interaction: { hover: true, dragNodes: true, dragView: true, zoomView: true }, }
+            );
+
+  net.stabilize(1000);
+        net.once('stabilizationIterationsDone', function () {
+            net.setOptions({ physics: { enabled: false } });
+            net.fit({ animation: { duration: 10, easingFunction: 'easeInOutQuart' } });
+        });
+});
\ No newline at end of file
diff --git a/src/infragraph/visualizer/frontend/js/navigation.js b/src/infragraph/visualizer/frontend/js/navigation.js
index 058ab89..3a15dd5 100644
--- a/src/infragraph/visualizer/frontend/js/navigation.js
+++ b/src/infragraph/visualizer/frontend/js/navigation.js
@@ -63,6 +63,13 @@ function updateBreadcrumb() {
         crumb.dataset.file = item.file;
         if (idx === navigationStack.length - 1) {
             crumb.classList.add('active');
+            (function (f, l) {
+                crumb.style.cursor = 'pointer'; 
+                crumb.addEventListener('click', function () {
+                    navigationStack.pop();
+                    navigateTo(f, l);
+                });
+            })(item.file, item.label);
         } else {
             (function (i, f, l) {
                 crumb.addEventListener('click', function () {
diff --git a/src/infragraph/visualizer/frontend/js/network.js b/src/infragraph/visualizer/frontend/js/network.js
index 68dfafa..814ec6c 100644
--- a/src/infragraph/visualizer/frontend/js/network.js
+++ b/src/infragraph/visualizer/frontend/js/network.js
@@ -16,16 +16,6 @@ const fabricOptions = {
     stabilization: { iterations: 150, fit: true }
   },
   interaction: { hover: true, tooltipDelay: 100, dragNodes: true, dragView: true, zoomView: true },
-  nodes: {
-    borderWidth: 0, borderWidthSelected: 0,
-    font: { size: 12, face: 'arial' },
-    shapeProperties: { useBorderWithImage: false },
-    fixed: { x: false, y: false }
-  },
-  edges: {
-    smooth: { type: 'cubicBezier', forceDirection: 'vertical' },
-    font: { size: 11, align: 'middle' }
-  }
 };
 
 // Internal device view: horizontal hierarchy , components inside a device
@@ -45,16 +35,6 @@ const internalOptions = {
     stabilization: { iterations: 150, fit: true }
   },
   interaction: { hover: true, dragNodes: true, dragView: true, zoomView: true },
-  nodes: {
-    borderWidth: 0, borderWidthSelected: 0,
-    font: { size: 13, face: 'arial' },
-    shapeProperties: { useBorderWithImage: false },
-    fixed: { x: false, y: false }
-  },
-  edges: {
-    smooth: { type: 'cubicBezier', forceDirection: 'horizontal' },
-    font: { size: 11, align: 'middle' }
-  }
 };
 
 // Renders a vis.js network into #mynetwork.
diff --git a/src/infragraph/visualizer/visualize.py b/src/infragraph/visualizer/visualize.py
index 3a404f1..c18bb82 100644
--- a/src/infragraph/visualizer/visualize.py
+++ b/src/infragraph/visualizer/visualize.py
@@ -60,7 +60,7 @@ def _collapse_parallel_edges(edges):
     for key, val in grouped.items():
         e = val["edge"]
         count = val["count"]
-        e["label"] = f"\u00d7{count} {e.get('link', '')}" if count > 1 else None
+        e["label"] = f"\u00d7{count} {e.get('link', '')}" if count > 1 else e.get("link","")
         e["width"] = min(1 + count, 6) if count > 1 else 1
         result.append(e)
     return result
@@ -137,7 +137,7 @@ def _generate_component_json(device_name, device_data, all_device_names,infrastr
             seen.add(edge_key)
             raw_edges.append({
                 "from": src_mapped, "to": dst_mapped, "link": link,
-                "color": _get_link_color(link), "title": f"Link: {link}",
+                "color": _get_link_color(link), "title": f"Link: {link}", "label":link,
             })
 
     return {
@@ -210,7 +210,7 @@ def _generate_instance_json(infrastructure, service, host_names, switch_names):
 
         raw_edges.append({
             "from": u_inst, "to": v_inst, "link": link,
-            "color": _get_link_color(link), "title": f"Link: {link}{bw}",
+            "color": _get_link_color(link), "title": f"Link: {link}{bw}","label":link,
         })
 
     return {