Issue#378 update cytoscape.js version

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,20 @@
+## Purpose
+_Describe the problem or feature in addition to a link to the issues._
+
+Example:
+Fixes # .
+
+## Approach
+_How does this change address the problem?_
+
+#### Open Questions and Pre-Merge TODOs
+- [ ] Use github checklists. When solved, check the box and explain the answer.
+
+## Learning
+_Describe the research stage_
+
+_Links to blog posts, patterns, libraries or addons used to solve this problem_
+
+#### Blog Posts
+- [How to Pull Request](https://github.com/flexyford/pull-request) Github Repo with Learning focused Pull Request Template.
+

bower.json

@@ -21,7 +21,7 @@
     "moment": "^2.17.0",
     "remarkable-bootstrap-notify": "^3.1.3",
     "animate.css": "^3.5.2",
-    "cytoscape": "^2.7.11",
+    "cytoscape": "^3.2.17",
     "webcola": "^3.3.0",
     "bootstrap": "^3.3.7",
     "cytoscape-cola": "^1.6.0",
@@ -30,7 +30,7 @@
     "bootstrap-table": "^1.11.0",
     "cytoscape-panzoom": "^2.4.0",
     "select2": "select2-dist#^4.0.3",
-    "cytoscape-context-menus": "^2.1.1",
+    "cytoscape-context-menus": "^3.0.6",
     "bootstrap-colorpicker": "^2.5.1"
   }
 }

static/js/graphs_page.js

@@ -601,7 +601,7 @@ var graphPage = {
             });
             layoutID.positions = corrected_positions;
         }
-        graphPage.cyGraph.layout(layoutID);
+        graphPage.cyGraph.layout(layoutID).run();
 
     },
     saveLayout: function (layoutName, modalNameId) {
@@ -870,7 +870,7 @@ var graphPage = {
     },
     onTapGraphElement: function (evt) {
         // get target
-        var target = evt.cyTarget;
+        var target = evt.Target;
         // target some element other than background (node/edge)
         if (target !== this) {
             var popup = target._private.data.popup;
@@ -1386,7 +1386,7 @@ var graphPage = {
 
             graphPage.cyGraph.on('free', function (e) {
 
-                var selected_elements = e.cyTarget.length > 1 ? graphPage.cyGraph.elements(':selected') : e.cyTarget;
+                var selected_elements = e.Target.length > 1 ? graphPage.cyGraph.elements(':selected') : e.Target;
                 graphPage.layoutEditor.undoRedoManager.update({
                     'action_type': 'move_node',
                     'data': {
@@ -1489,7 +1489,7 @@ var graphPage = {
                 }
             });
 
-            graphPage.cyGraph.elements().on('select, unselect', function () {
+            graphPage.cyGraph.elements().on('select unselect', function () {
                 if (graphPage.cyGraph.nodes(':selected').length > 0) {
                     $('#editSelectedNodesBtn').removeClass('disabled');
                 } else {
@@ -1969,43 +1969,6 @@ var graphPage = {
             }
             return largestK;
         },
-        applyMax: function (graph_layout) {
-            //Gets all nodes and edges up do the max value set
-            //and only renders them
-            var maxVal = parseInt($("#input_max").val());
-
-            if (!maxVal) {
-                return;
-            }
-            var newJSON = {
-                "nodes": new Array(),
-                "edges": new Array()
-            };
-
-            // List of node ids that should remain in the graph
-            var nodeNames = Array();
-
-            //Get all edges that meet the max quantifier
-            for (var i = 0; i < graph_json.elements['edges'].length; i++) {
-                var edge_data = graph_json.elements['edges'][i];
-                if (edge_data['data']['k'] <= maxVal) {
-                    newJSON['edges'].push(edge_data);
-                    nodeNames.push(edge_data['data']['source']);
-                    nodeNames.push(edge_data['data']['target']);
-                }
-            }
-
-            //Get all nodes that meet the max quantifier
-            for (var i = 0; i < graph_json.elements['nodes'].length; i++) {
-                var node_data = graph_json.elements['nodes'][i];
-                if (nodeNames.indexOf(node_data['data']['id']) > -1) {
-                    newJSON['nodes'].push(node_data);
-                }
-            }
-
-            graphPage.cyGraph.load(newJSON);
-            graphPage.filterNodesEdges.showOnlyK();
-        },
         showOnlyK: function () {
             // Returns all the id's that are > k value
             if ($("#input_k").val()) {
@@ -2338,43 +2301,6 @@ var graphPage = {
                 max: 50
             });
         },
-        applyMax: function (graph_layout) {
-            //Gets all nodes and edges up do the max value set
-            //and only renders them
-            var maxVal = parseInt($("#input_max").val());
-
-            if (!maxVal) {
-                return;
-            }
-            var newJSON = {
-                "nodes": new Array(),
-                "edges": new Array()
-            };
-
-            // List of node ids that should remain in the graph
-            var nodeNames = Array();
-
-            //Get all edges that meet the max quantifier
-            for (var i = 0; i < graph_json.elements['edges'].length; i++) {
-                var edge_data = graph_json.elements['edges'][i];
-                if (edge_data['data']['k'] <= maxVal) {
-                    newJSON['edges'].push(edge_data);
-                    nodeNames.push(edge_data['data']['source']);
-                    nodeNames.push(edge_data['data']['target']);
-                }
-            }
-
-            //Get all nodes that meet the max quantifier
-            for (var i = 0; i < graph_json.elements['nodes'].length; i++) {
-                var node_data = graph_json.elements['nodes'][i];
-                if (nodeNames.indexOf(node_data['data']['id']) > -1) {
-                    newJSON['nodes'].push(node_data);
-                }
-            }
-
-            graphPage.cyGraph.load(newJSON);
-            graphPage.filterNodesEdges.showOnlyK();
-        },
         setBarToValueEdgeLength: function (inputId, barId) {
             /**
              * If the user enters a value greater than the max value allowed, change value of bar to max allowed value.
@@ -2443,7 +2369,7 @@ var cytoscapeGraph = {
                         title: 'edit selected nodes',
                         selector: 'node',
                         onClickFunction: function (event) {
-                            graphPage.layoutEditor.nodeEditor.open(cy.collection(cy.elements(':selected')).add(event.cyTarget).select());
+                            graphPage.layoutEditor.nodeEditor.open(cy.collection(cy.elements(':selected')).add(event.Target).select());
                         },
                         hasTrailingDivider: true
                     },
@@ -2453,7 +2379,7 @@ var cytoscapeGraph = {
                         selector: 'node',
                         show: true,
                         onClickFunction: function (event) {
-                            selectAllOfTheSameType(event.cyTarget);
+                            selectAllOfTheSameType(event.Target);
                         }
                     },
                     {
@@ -2462,7 +2388,7 @@ var cytoscapeGraph = {
                         selector: 'node',
                         show: true,
                         onClickFunction: function (event) {
-                            unselectAllOfTheSameType(event.cyTarget);
+                            unselectAllOfTheSameType(event.Target);
                         }
                     },
                     {
@@ -2471,7 +2397,7 @@ var cytoscapeGraph = {
                         selector: 'edge',
                         show: true,
                         onClickFunction: function (event) {
-                            selectAllOfTheSameType(event.cyTarget);
+                            selectAllOfTheSameType(event.Target);
                         }
                     },
                     {
@@ -2480,7 +2406,7 @@ var cytoscapeGraph = {
                         selector: 'edge',
                         show: true,
                         onClickFunction: function (event) {
-                            unselectAllOfTheSameType(event.cyTarget);
+                            unselectAllOfTheSameType(event.Target);
                         }
                     }
                 ]
@@ -2784,23 +2710,23 @@ var cytoscapeGraph = {
                     fit: false,
                     avoidOverlap: false,
                     padding: 0
-                });
+                }).run();
         } else if (layout_name === "fill_circle") {
             collection.layout(
                 {
                     name: "concentric",
                     fit: false,
                     avoidOverlap: false,
                     padding: 40
-                });
+                }).run();
         } else if (layout_name === "grid") {
             collection.layout(
                 {
                     name: "grid",
                     fit: false,
                     avoidOverlap: true,
                     condense: true
-                });
+                }).run();
         } else if (layout_name === "square") {
             cytoscapeGraph.runSquareLayoutOnCollection(cy, collection);
         } else if (layout_name === "horizontal") {

templates/graphs/error.html

@@ -18,6 +18,6 @@ <h4>{{ Error | safe}}</h4>
 <link rel="stylesheet" type="text/css" href="{% static 'graphs/css/error.css' %}">
 <footer class="footer">
 <br>Powered by <a href="https://www.djangoproject.com/">Django 1.7.6</a>
-<br><a href = "http://js.cytoscape.org/">Cytoscape.js 2.5.0</a>
+<br><a href = "http://js.cytoscape.org/">Cytoscape.js 3.2.17</a>
 </footer>
-{% endblock %}
+{% endblock %}

templates/graphs/reset.html

@@ -48,6 +48,6 @@
 
     <footer class="footer">
         <br>Powered by <a href="https://www.djangoproject.com/">Django 1.7.6</a>
-        <br><a href="http://js.cytoscape.org/">Cytoscape.js 2.5.0</a>
+        <br><a href="http://js.cytoscape.org/">Cytoscape.js 3.2.17</a>
     </footer>
-{% endblock %}
+{% endblock %}

templates/groups/index.html

@@ -43,7 +43,7 @@
 
     <footer class="footer">
         <br>Powered by <a href="https://www.djangoproject.com/">Django 1.7.6</a>
-        <br><a href="http://js.cytoscape.org/">Cytoscape.js 2.5.0</a>
+        <br><a href="http://js.cytoscape.org/">Cytoscape.js 3.2.17</a>
     </footer>
 
     <!-- JSON support for Groups Page -->

templates/partials/footer.html

@@ -1,4 +1,4 @@
 <footer class="footer text-center">
     <br>Powered by <a href="https://www.djangoproject.com/">Django 1.7.6</a>
-    <br><a href="http://js.cytoscape.org/">Cytoscape.js 2.5.0</a>
-</footer>
+    <br><a href="http://js.cytoscape.org/">Cytoscape.js 3.2.17</a>
+</footer>