update vis-network (#2969)

* update vis-network

* improve sizes

* add cython to conda create -q --yes -n qiita

* fix job creation in JS

* fix #2554

* improving position

* focus on new job [skip ci]

* addressing @ElDeveloper comments

Author: antgonza

.travis.yml

@@ -21,7 +21,7 @@ before_install:
 install:
   # install a few of the dependencies that pip would otherwise try to install
   # when intalling scikit-bio
-  - travis_retry conda create -q --yes -n qiita python=3.6 pip libgfortran numpy nginx
+  - travis_retry conda create -q --yes -n qiita python=3.6 pip libgfortran numpy nginx cython
   - source activate qiita
   - pip install -U pip
   - 'echo "backend: Agg" > ~/matplotlibrc'

qiita_pet/static/js/networkVue.js

@@ -713,22 +713,12 @@ Vue.component('processing-graph', {
      **/
     addJobNodeToGraph: function(job_info) {
       let vm = this;
-      // Fun fact - although it seems counterintuitive, in vis.Network we
-      // first need to add the edge and then we can add the node. It doesn't
-      // make sense, but it is how it works
-      $(job_info.inputs).each(function(){
-        vm.edges_ds.add({id: vm.edges_ds.length + 1, from: this, to: job_info.id});
-      });
-      var node_info = vm.colorScheme.in_construction;
-      vm.nodes_ds.add({id: job_info.id, shape: node_info['shape'], group: "job", shape: 'dot', label: formatNodeLabel(job_info.label), color: node_info, status: 'in_construction'});
-      $(job_info.outputs).each(function(){
-        var out_name = this[0];
-        var out_type = this[1];
-        var n_id = job_info.id + ":" + out_name;
-        vm.edges_ds.add({id: vm.edges_ds.length + 1, from: job_info.id, to: n_id });
-        vm.nodes_ds.add({id: n_id, shape: 'dot', label: formatNodeLabel(out_name + "\n(" + out_type + ")"), group: "type", name: out_name, type: out_type});
-      });
-      vm.network.redraw();
+
+      vm.new_job_info = {
+        job_id: job_info.id,
+        scale: vm.network.getScale()
+      }
+      vm.updateGraph();
     },
 
     /**
@@ -753,10 +743,11 @@ Vue.component('processing-graph', {
         edges: vm.edges_ds
       };
       var options = {
+        autoResize: true,
         clickToUse: true,
         nodes: {
           font: {
-            size: 16,
+            size: 15,
             color: '#000000'
           },
           size: 13,
@@ -766,10 +757,13 @@ Vue.component('processing-graph', {
           color: 'grey'
         },
         layout: {
+          randomSeed: 1,
+          improvedLayout: true,
           hierarchical: {
             direction: "LR",
-            sortMethod: "directed",
-            levelSeparation: 260
+            sortMethod : 'directed',
+            levelSeparation: 190,
+            shakeTowards: 'roots'
           }
         },
         interaction: {
@@ -794,6 +788,15 @@ Vue.component('processing-graph', {
       };
 
       vm.network = new vis.Network(container, data, options);
+      vm.network.on("stabilized", function (params) {
+        if (vm.new_job_info !== null){
+          vm.network.focus(vm.new_job_info["job_id"], {
+            scale: vm.new_job_info["scale"]
+          });
+          vm.new_job_info = null;
+        }
+      });
+
       vm.network.on("click", function (properties) {
         var ids = properties.nodes;
         if (ids.length == 0) {
@@ -974,11 +977,16 @@ Vue.component('processing-graph', {
           // data in a way that Vis.Network likes it
           // Format edge list data
           for(var i = 0; i < data.edges.length; i++) {
+            // forcing a string
+            data.edges[i][0] = data.edges[i][0].toString()
+            data.edges[i][1] = data.edges[i][1].toString()
             vm.edges.push({from: data.edges[i][0], to: data.edges[i][1], arrows:'to'});
           }
           // Format node list data
           for(var i = 0; i < data.nodes.length; i++) {
             var node_info = vm.colorScheme[data.nodes[i][4]];
+            // forcing a string
+            data.nodes[i][2] = data.nodes[i][2].toString()
             vm.nodes.push({id: data.nodes[i][2], shape: node_info['shape'], label: formatNodeLabel(data.nodes[i][3]), type: data.nodes[i][1], group: data.nodes[i][0], color: node_info, status: data.nodes[i][4]});
             if (data.nodes[i][1] === 'job') {
               job_status = data.nodes[i][4];
@@ -1084,6 +1092,7 @@ Vue.component('processing-graph', {
    **/
   mounted() {
     let vm = this;
+    vm.new_job_info = null;
     // This initialPoll is used ONLY if the graph doesn't exist yet
     vm.initialPoll = false;
     // This variable is used to show the update countdown on the interface

qiita_pet/static/vendor/README.md

@@ -12,6 +12,7 @@ Qiita relies on the following JavaScript libraries:
 - [tag-it.js](http://aehlke.github.io/tag-it/).
 - [underscore.js](http://underscorejs.org/).
 - [vis.js](http://visjs.org/).
+- [vis-network.js](https://unpkg.com/browse/vis-network@6.5.2)
 - [vue.js](https://vuejs.org).
 - [ol.js](https://openlayers.org/).
 - [platform.js](https://github.com/bestiejs/platform.js).

qiita_pet/static/vendor/css/vis-network.min.css

@@ -20,6 +20,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
   <head>
     <title>{{portal_styling.title}}</title>
+    <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.min.css" type="text/css">
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.structure.min.css" type="text/css">
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.theme.min.css" type="text/css">
@@ -29,8 +30,6 @@
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/chosen.css" type="text/css">
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery.dataTables.min.css" type="text/css">
     <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/css/style.css" type="text/css">
-    <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis.min.css" type="text/css">
-    <link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
     {% if portal_styling.custom_css %}
     <style type="text/css">
       {% raw portal_styling.custom_css %}
@@ -45,7 +44,7 @@
     <script src="{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.dataTables.plugin.natural.js" type="text/javascript"></script>
     <script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vue.min.js"></script>
     <script src="{% raw qiita_config.portal_dir %}/static/js/qiita.js"></script>
-    <script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis.min.js"></script>
+    <script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis-network.min.js"></script>
     <script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/platform.js"></script>
     <script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/networkVue.js"></script>
     <script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/sampleTemplateVue.js"></script>

qiita_pet/static/vendor/js/vis-network.min.js

@@ -4,7 +4,7 @@
 {% set study_title_msg = study_title.replace('"', '\\"') %}
 <link rel="stylesheet" src="{% raw qiita_config.portal_dir %}/static/vendor/css/vis.min.css" type="text/css">
 <link rel="stylesheet" src="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
-<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis.min.js"></script>
+<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis-network.min.js"></script>
 <script type="text/javascript">
   function validate_delete_study_text() {
     if ($("#study-alias").val() == "{% raw study_title_msg %}") {