REFACTOR

index.html

@@ -38,10 +38,10 @@
                   <b id="instructions-state">Graph Creation:</b>
                   <ul id="instructions" style="padding-left: 22px;">
                     <li>In this step, you will construct a graph to run maxflow on.</li>
-                    <li>Double click on the white space to add a node.</li><li>Click an existing node and then press the keyboard's <code>Delete</code> to delete that node (<code>fn</code> + <code>Delete</code> on Mac).</li>
+                    <li>Double click on the white space to add a node.</li><li>Click an existing node and then press the keyboard's <code>Backspace</code> or <code>Delete</code> (<code>fn</code> + <code>Delete</code> on Mac) to delete that node.</li>
                     <li>Right click a node to set it as the source/sink.</li>
                     <li>Hover on/click an existing node n1 to generate a dot on top. Click and drag the dot to another node n2 to generate an edge from n1 to n2.</li>
-                    <li>Click an existing edge and then press the keyboard's <code>Delete</code> to delete that edge. (<code>fn</code> + <code>Delete</code> on Mac)</li>
+                    <li>Click an existing edge and then press the keyboard's <code>Backspace</code> or <code>Delete</code> (<code>fn</code> + <code>Delete</code> on Mac) to delete that edge.</li>
                     <li>Right click an edge to change its capacity.</li>
                     <li>Click <code>Clear</code> at the bottom to clear the entire graph. Click <code>Example</code> to bring up the example graph.</li>
                     <li>You can download the current graph for future convenient importing by clicking <code>Download Edgelist</code>. To import a graph (supports edgelist and csv format), click <code>Choose File</code>.</li>
@@ -104,7 +104,7 @@ <h2>Selected Path(s)</h2>
                 </button>
               </div>
               <div class="col-md-6 buttons" id="graph-creation">
-                <button class="btn btn-info btn-sm modification" id="add-graph" type="submit">
+                <button class="btn btn-info btn-sm modification" id="example-graph" type="submit">
                   Example
                 </button>
                 <button class="btn btn-danger btn-sm modification" id="clear" type="submit">
@@ -191,14 +191,16 @@ <h2>Selected Path(s)</h2>
   <script src="vendor/js/jquery.min.js"></script>
   <script src="vendor/js/cytoscape.min.js"></script>
   <script src="vendor/js/cytoscape-edgehandles.js"></script>
+  <script src="vendor/cytoscape.js-panzoom-master/cytoscape-panzoom.js"></script>
   <script src="vendor/js/lodash.js"></script>
-  <script src="js/cytoscape-settings.js"></script>
+  <script src="js/cytoscape-settings/cytoscape-settings.js"></script>
   <script src="js/app.js"></script>
-  <script src="js/max-flow.js"></script>
-  <script src="js/priority-queue.js"></script>
-  <script src="js/file-layout-utils.js"></script>
-  <script src="js/utils.js"></script>
-  <script src="vendor/cytoscape.js-panzoom-master/cytoscape-panzoom.js"></script>
+  <script src="js/interactivity/interactivity-helper.js"></script>
+  <script src="js/interactivity/interactivity.js"></script>
+  <script src="js/model/max-flow.js"></script>
+  <script src="js/model/priority-queue.js"></script>
+  <script src="js/utils/file-layout-utils.js"></script>
+  <script src="js/utils/utils.js"></script>
 </body>
 
 </html>