You can click a node in the all tree to limit the top of the view.

src/rust/lqosd/src/node_manager/js_build/src/all_tree_sankey.js

@@ -2,6 +2,9 @@ import { DashboardGraph } from "./graphs/dashboard_graph";
 import {lerpGreenToRedViaOrange} from "./helpers/scaling";
 import {isRedacted} from "./helpers/redact";
 
+var allNodes = [];
+let rootId = 0;
+
 class AllTreeSankey extends DashboardGraph {
     constructor(id) {
         super(id);
@@ -16,6 +19,20 @@ class AllTreeSankey extends DashboardGraph {
         };
         this.option && this.chart.setOption(this.option);
         this.chart.hideLoading();
+        this.chart.on('click', (params) => {
+            //console.log(params.name);
+            let name = params.name;
+            // If it contains a >, it's a link
+            if (name.indexOf(" > ") === -1) {
+                for (let i=0; i<allNodes.length; i++) {
+                    if (allNodes[i][1].name === name) {
+                        rootId = i;
+                        break;
+                    }
+                }
+            }
+        });
+        $("#btnRoot").click(() => { rootId = 0; });
     }
 
     update(data, links) {
@@ -30,8 +47,10 @@ let lastRtt = {};
 
 function start() {
     $.get("/local-api/networkTree", (data) => {
+        allNodes = data;
         //console.log(data);
         let redact = isRedacted();
+        $("#rootNode").text(data[rootId][1].name);
 
         let nodes = [];
         let links = [];
@@ -41,6 +60,10 @@ function start() {
             if (depth > maxDepth) {
                 continue;
             }
+            // If data[i][1].parents does not contain rootId, skip
+            if (!data[i][1].parents.includes(rootId)) {
+                continue;
+            }
             let name = data[i][1].name;
             let bytes = data[i][1].current_throughput[0];
             let bytesAsMegabits = bytes / 1000000;

src/rust/lqosd/src/node_manager/static2/all_tree_sankey.html

@@ -1,7 +1,10 @@
-<div class="row" style="height: 100%;">
+<div class="row">
     <div class="col-12 small">
+        Top node:: <span id="rootNode"></span> <button class="btn btn-primary btn-sm" id="btnRoot"><i class="fa fa-tree"></i> Reset</button>
         <label for="maxDepth">Max Depth:</label> <input type="number" min="2" max="10" id="maxDepth">
     </div>
+</div>
+<div class="row" style="height: 98%;">
     <div class="col-12" style="height: 100%;" id="sankey"></div>
 </div>
 <script src="all_tree_sankey.js"></script>