new functionalities

workflows/graphs/templates/visualizations/graphs_visualize_visjs.html

 <div id="widgetvisualization-{{ widget.pk }}" rel="{{ widget.pk }}"
      class="widgetvisualizationdialog" title="{{ widget.name }} visualization" width="800" height="600">
 
+    <div id="controls">
+        <button id="freezeBtn" class='controlElement' type="button"></button>
+        <label for="etype">edge type</label>
+        <select name="etype" id="etypeSelect" class='controlElement'>
+          <option selected="selected">continuous</option>
+          <option>dynamic</option>
+          <option>straight</option>
+        </select>
+    
+    </div>
     <div id="networkvis">
     </div>
+    
 </div>
 
 
@@ -10,7 +21,22 @@
     #networkvis{
         overflow-y: hidden;
         overflow-x: hidden;
+        float: right;
+/*        display: block;*/
+    }
+    #controls {
+        width: 85px;
+        text-align:center;
+        padding-top: 11px;
+        float: left;
+/*        display: block;*/
+        font-size: 80%;
+    }
+    .controlElement {
+/*        margin: 0 auto;*/
+        margin-bottom: 5px;
     }
+    
 </style>
 
 <script>
@@ -18,18 +44,80 @@
 
     $("#widgetvisualization-{{ widget.pk }}").bind("dialogresize", function (event, ui) {
         $('#networkvis').height($('#networkvis').parent().height());
-        $('#networkvis').width($('#networkvis').parent().width());
+        $('#networkvis').width($('#networkvis').parent().width()-100);
+    });
+    
+    $('#freezeBtn').button({
+        label: 'freeze'
     });
+    $('#redrawBtn').button({
+        label: 'redraw'
+    });
+    
+//    $('#etypeSelect').selectmenu();
+
 </script>
 
 <script>
     $.getScript('https://cdn.rawgit.com/ryanve/verge/master/verge.min.js', function () {
         $('#networkvis').height($('#networkvis').parent().height());
-        $('#networkvis').width($('#networkvis').parent().width());
+        $('#networkvis').width($('#networkvis').parent().width()-100);
         $.getScript("https://cdn.rawgit.com/almende/vis/v4.9.0/dist/vis.min.js", function () {
+
+            function onDragStart(obj) {
+                if (obj.hasOwnProperty('nodes') && obj.nodes.length==1) {
+                    var nid = obj.nodes[0];
+                    nodes.update({id: nid, fixed: false});
+                }
+
+            }
+
+            function onDragEnd(obj) {
+                if (isFrozen==false)
+                    return
+                var nid = obj.nodes;
+                if (obj.hasOwnProperty('nodes') && obj.nodes.length==1) {
+                    var nid = obj.nodes[0];
+                    nodes.update({id: nid, fixed: true});
+                }
+            }        
+            
+            function freezeNodes(state){
+                nodes.forEach(function(node, id){
+                    nodes.update({id: id, fixed: state});
+                });
+            }
+            
+            $('#freezeBtn').on('click', function () {
+                if ($(this).find('span').text()=='release'){
+                    isFrozen = false;
+                    freezeNodes(false);
+                    $(this).find('span').text('freeze');
+                }
+                else {
+                    isFrozen = true;
+                    freezeNodes(true);
+                    $(this).find('span').text('release');
+                }
+            });
+            
+            $("#etypeSelect").change(function() {
+                var t = $(this).val();
+                if (t=='continuous') {
+                    network.setOptions({edges: {smooth: {type: 'continuous'}}});
+                }
+                else if (t=='dynamic') {
+                    network.setOptions({edges: {smooth: {type: 'dynamic'}}})
+                }
+                else if (t=='straight') {
+                    network.setOptions({edges: {smooth: false}})
+                }
+            });
+            
             var network = null;
             var nodes = new vis.DataSet();
             var edges = new vis.DataSet();
+            var isFrozen = false;
             nodes.add({{ nodes|safe }});
             edges.add({{ edges|safe }});
 
@@ -42,8 +130,8 @@
                 autoResize: true,
                 edges: {
                   smooth: {
-                    type: 'dynamic'
-//                      type: 'continuous'
+//                    type: 'dynamic'
+                      type: 'continuous'
                   }
                 },
                 nodes: {
@@ -55,7 +143,8 @@
                     }
                 },
                 interaction: {
-                    hover: true     
+                    hover: true,
+                    navigationButtons: true
                 },
                 manipulation: {
                     enabled: true,
@@ -77,12 +166,14 @@
                 },
             layout: {
                 randomSeed: undefined,
-                improvedLayout:true,
-              }                
+                improvedLayout: true
+              }
             };
             
             var container = document.getElementById('networkvis');
             network = new vis.Network(container, data, options);
+            network.on('dragStart', onDragStart);
+            network.on('dragEnd', onDragEnd);
         }).fail(function( jqxhr, settings, exception ) {
                 alert("Network error: cannot load verge JS library!");
             });