Download results

templates/index.html

@@ -197,6 +197,7 @@
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li><a href="#" id="run_simulation" role="button">Run simulation</a></li>
+                <li><a href="#" id="download_simulation" role="button" data-toggle="modal" data-target="#download_modal">Download</a></li>
             </ul>
         </div>
         <script type="text/javascript">
@@ -332,7 +333,7 @@
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">New simulation</h4>
             </div>
-            <div class="modal-body">
+            <div class="modal-body text-justify">
                 <p>You are going to run a new simulation, all charts and trials are going to be lost. A new ones will be available after the simulation.</p>
                 <p>Check your new environment variables for this simulation.</p>
                 <table class="table">
@@ -341,8 +342,32 @@
                 </table>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-success">Run</button>
+                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
+<div class="modal fade" tabindex="-1" role="dialog" id="download_modal">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Download Simulation Results</h4>
+            </div>
+            <div class="modal-body text-justify">
+                <p>You can download the results of the selected trial in GEXF or JSON Graph format for your personal purposes.</p>
+                <ul >
+                    <li><b>GEXF</b> <i>(Graph Exchange XML Format)</i> is a language for describing complex network structures, their associated data and dynamics. It can be used to visualize the simulation with Gephi.</li>
+                    <li><b>JSON Graph</b> generate and parse JSON serializable data for NetworkX graphs. It is a convention for modeling graph information as a JSON object that can be parsed by any JSON parser.</li>
+                </ul>
+                <p>For downloading the results of the other trials simulated, please first select them in menu.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-success" disabled="disabled" id="download_gexf">GEXF</button>
+                <button type="button" class="btn btn-success" disabled="disabled" id="download_json">JSON Graph</button>
+                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
             </div>
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->

templates/js/socket.js

@@ -75,6 +75,15 @@ ws.onmessage = function(message) {
             }
             break;
 
+        case 'download_gexf':
+            var xml_declaration = '<?xml version="1.0" encoding="utf-8"?>';
+            download(msg['filename'] + '.gexf', 'xml', xml_declaration + msg['data']);
+            break;
+
+        case 'download_json':
+            download(msg['filename'] + '.json', 'json', JSON.stringify(msg['data'], null, 4));
+            break;
+
         default:
             console.warn('Unexpected message!')
     }
@@ -91,7 +100,8 @@ var _socket = {
     error: function(message) {
         $('#error-message').text(message);
         $('.alert.alert-danger').show();
-    }
+    },
+    current_trial: undefined
 };
 
 var set_trials = function(trials) {
@@ -104,9 +114,11 @@ var set_trials = function(trials) {
         var a = $('.dropdown-toggle .caret');
         $('.dropdown-toggle').text($(this).text() + ' ').append(a);
         _socket.send($(this).val(), 'get_trial');
+        _socket.current_trial = $(this).val();
     });
     // Request first trial as default
     _socket.send(0, 'get_trial')
+    _socket.current_trial = 0
 };
 
 var reset_trials = function() {
@@ -200,6 +212,15 @@ var set_configuration = function() {
 
     // Enable 'Run configuration' button
     $('#run_simulation').attr('data-toggle', 'modal').attr('data-target', '#simulation_modal');
+
+    // Enable 'Download' buttons
+    $('#download_modal .btn-success').prop('disabled', false);
+    $('#download_gexf').on('click', function() {
+        _socket.send(_socket.current_trial, 'download_gexf')
+    });
+    $('#download_json').on('click', function() {
+        _socket.send(_socket.current_trial, 'download_json')
+    });
 }
 
 var reset_configuration = function() {
@@ -212,6 +233,10 @@ var reset_configuration = function() {
 
     // 'Link Distance' slider
     $('#link-distance-slider').slider('disable').slider('setValue', 30);
+
+    // 'Download' buttons
+    $('#download_gexf').off();
+    $('#download_json').off();
 }
 
 var set_timeline = function(graph) {
@@ -422,3 +447,11 @@ var run_simulation = function() {
     });
     return environment_variables;
 }
+
+var download = function(filename, filetype, content) {
+    var file = document.createElement('a');
+    file.setAttribute('href', 'data:text/' + filetype + ';charset=utf-8,' + encodeURIComponent(content));
+    file.setAttribute('download', filename);
+    file.click();
+    delete file;
+}

templates/js/visualization.js

@@ -264,7 +264,7 @@
     // Zoom
     zoom = d3.behavior
              .zoom()
-             .scaleExtent([1/10, 10])
+             .scaleExtent([1/5, 10])
              .on('zoom', function () {
                 //console.trace("zoom", d3.event.translate, d3.event.scale);
                 groot.attr('transform',