You can now choose how to auto-layout the component hierarchy graph.

Author: CoderAllan

stylesheet/showComponentHierarchy.css

@@ -17,6 +17,8 @@
   z-index: 100;
   padding: 5px 5px 5px 10px;
   margin: 5px;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto auto;
 }
 
 #helpText {
@@ -33,4 +35,9 @@ input[type=button] {
   display: none;
   background-color: rgba(240, 240, 240, 0.4);
   z-index: 200;
+}
+
+#hierarchicalOptions_direction, #hierarchicalOptions_sortmethod {
+  display: none;
+  margin-left: 3px;
 }

templates/showComponentHierarchy_Template.html

@@ -16,6 +16,21 @@
     <input type="button" id="saveAsPngButton" value="Save as png">
     <input type="button" id="saveSelectionAsPngButton" value="Save selection as png">
     <input type="button" id="copyToClipboardButton" value="Copy to clipboard">
+    <div id="hierarchical">Change layout:<input type="checkbox" id="showHierarchicalOptions"></div>
+    <div id="hierarchicalOptions_direction">
+      Direction: <select id="direction">
+        <option value="UD">Up-Down</option>
+        <option value="DU">Down-Up</option>
+        <option value="LR">Left-Right</option>
+        <option value="RL">Right-Left</option>
+      </select>
+    </div>
+    <div id="hierarchicalOptions_sortmethod">
+      Sort method: <select id="sortMethod">
+        <option value="hubsize">Hub size</option>
+        <option value="directed">Directed</option>
+      </select>
+    </div>
     <div id="helpText">Click and drag to select the area to be saved.</div>
   </div>
   <div id="selectionLayer" class="fullScreen"><canvas id="captureCanvas"></canvas></div>

templates/showComponentHierarchy_Template.js

@@ -33,16 +33,17 @@
   };
   var container = document.getElementById('network');
   var network = new vis.Network(container, data, options);
-  
+  var seed = network.getSeed();
+
   const vscode = acquireVsCodeApi();
   const helpTextDiv = document.getElementById('helpText');
   let lastMouseX = lastMouseY = 0;
   let mouseX = mouseY = 0;
   let selection;
   // get the vis.js canvas
-  const graphDiv = document.getElementById('network');
-  const visDiv = graphDiv.firstElementChild;
-  const graphCanvas = visDiv.firstElementChild;
+  var graphDiv = document.getElementById('network');
+  var visDiv = graphDiv.firstElementChild;
+  var graphCanvas = visDiv.firstElementChild;
   const selectionLayer = document.getElementById('selectionLayer');
   const selectionCanvas = selectionLayer.firstElementChild;
   let selectionCanvasContext;
@@ -55,6 +56,12 @@
   const copyToClipboardButton = document.getElementById('copyToClipboardButton');
   copyToClipboardButton.addEventListener('click', copyToClipboard);
   copyToClipboardButton.style['display'] = 'none'; // TODO: Remove when copyToClipboard is implemented
+  const showHierarchicalOptionsButton = document.getElementById('showHierarchicalOptions');
+  showHierarchicalOptionsButton.addEventListener('click', setNetworkLayout);
+  const hierarchicalDirectionSelect = document.getElementById('direction');
+  hierarchicalDirectionSelect.addEventListener('change', setNetworkLayout);
+  const hierarchicalSortMethodSelect = document.getElementById('sortMethod');
+  hierarchicalSortMethodSelect.addEventListener('change', setNetworkLayout);
 
   function mouseUpEventListener(event) {
     // Convert the canvas to image data that can be saved
@@ -155,6 +162,9 @@
   }
 
   function saveAsPng() {
+    graphDiv = document.getElementById('network');
+    visDiv = graphDiv.firstElementChild;
+    graphCanvas = visDiv.firstElementChild;    
     // Calculate the bounding box of all the elements on the canvas
     const boundingBox = getBoundingBox();
 
@@ -230,4 +240,27 @@
     console.log('Not implemented yet...');
   }
 
+  function setNetworkLayout() {
+    const hierarchicalOptionsDirection = document.getElementById('hierarchicalOptions_direction');
+    const hierarchicalOptionsSortMethod = document.getElementById('hierarchicalOptions_sortmethod');
+    const showHierarchicalOptionsCheckbox = document.getElementById('showHierarchicalOptions');
+    hierarchicalOptionsDirection.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none';
+    hierarchicalOptionsSortMethod.style['display'] = showHierarchicalOptionsCheckbox.checked ? 'block' : 'none';
+    const hierarchicalOptionsDirectionSelect = document.getElementById('direction');
+    const hierarchicalOptionsSortMethodSelect = document.getElementById('sortMethod');
+    if(showHierarchicalOptionsCheckbox.checked)  {
+      options.layout = {
+        hierarchical: {
+          enabled: true,
+          direction: hierarchicalOptionsDirectionSelect.value ? hierarchicalOptionsDirectionSelect.value : 'UD',
+          sortMethod: hierarchicalOptionsSortMethodSelect.value ? hierarchicalOptionsSortMethodSelect.value : 'hubsize'
+        }
+      };
+    } else {
+      options.layout = {};
+    }
+    options.layout.randomSeed = seed;
+    network = new vis.Network(container, data, options);
+  }
+  
 }());