Added refresh button to regenerate the graph if the layout is random or cose.

Author: CoderAllan

images/icons8-refresh-18.png

@@ -27,10 +27,6 @@
   z-index: 300;
 }
 
-input[type=button] {
-  margin-right: 10px;
-}
-
 #selectionLayer {
   display: none;
   background-color: rgba(240, 240, 240, 0.4);
@@ -43,4 +39,15 @@ input[type=button] {
   display: none;
   color: black;
   padding: 2px;
-}
+}
+
+#refresh {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOBAMAAADQ9FGEAAAAJ1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADdEvm1AAAADXRSTlMAzgT+tKMb9tPFfPQdvCI9yQAAAFZJREFUCNdjYFBiChQUlFzEwMDmkgRkSexiYEgx9mFgYGDqZGBwNjZRADIFGRgCy0XBLAgmmsUE1AdlAc1iYJihwAA1f3WjoKComksCA4PWRCBLQYkBAMD4DcyUSChYAAAAAElFTkSuQmCC);
+  background-repeat:  no-repeat;
+  background-position: left center;
+  width: 18px;
+  height: 14px;
+  margin: 0px 5px 0px 5px;
+  padding: 0px;
+  display: none;
+}

stylesheets/dgmlViewer.css

@@ -17,6 +17,7 @@
     <input type="button" id="saveSelectionAsPngButton" value="Save selection as png">
     <div id="hierarchical">Change layout:<input type="checkbox" id="showLayoutOptions"></div>
     <div id="layoutDiv">
+      <div id="refresh"></div>
       Layout: <select id="layout">
         <option value="breadthfirst">Breadth first</option>
         <option value="cose">Cose</option>

templates/dgmlViewer_Template.html

@@ -19,6 +19,7 @@
     const saveSelectionAsPngButton = document.getElementById('saveSelectionAsPngButton');
     const selectionLayer = document.getElementById('selectionLayer');
     const helpTextDiv = document.getElementById('helpText');
+    const refreshDiv = document.getElementById('refresh');
     const vscode = acquireVsCodeApi();
     let doShowPopup = false;
     let lastMouseX = lastMouseY = 0;
@@ -34,6 +35,7 @@
     saveSelectionAsPngButton.addEventListener('click', saveSelectionAsPng);
     showLayoutOptionsCheckbox.addEventListener('click', showHierarchicalOptions);
     layoutSelect.addEventListener('change', setNetworkLayout);
+    refreshDiv.addEventListener('click', setNetworkLayout);
 
     function mouseUpEventListener(event) {
       // Convert the canvas to image data that can be saved
@@ -326,13 +328,22 @@
               componentSpacing: 5,
               numIter: 5000,
             };
+            refreshDiv.style.display = 'inline-block';
+            refreshDiv.style.cursor = 'pointer';
           } else if (layoutSelect.value === 'circle' || layoutSelect.value === 'grid') {
             options = {
               name: layoutSelect.value,
               spacingFactor: 0.5,
               padding: 1
             };
-          } 
+          } else if (layoutSelect.value === 'random') {
+            refreshDiv.style.display = 'inline-block';
+            refreshDiv.style.cursor = 'pointer';
+          }
+          if (layoutSelect.value !== 'cose' && layoutSelect.value !== 'random') {
+            refreshDiv.style.display = 'none';
+            refreshDiv.style.cursor = 'default';
+          }          
           if (layoutSelect.value === 'preset') {
             restoreCoordinates(cy);
           }