From c93f3fafc7af747939be27803194fc3578e6f51f Mon Sep 17 00:00:00 2001
From: Tasio Mendez <tm.tasio@gmail.com>
Date: Thu, 1 Feb 2018 13:46:51 +0100
Subject: [PATCH] Charts

---
 config_copy.yml               | 25 +++++++++
 templates/css/main.css        | 73 +++++++++++++++++++++++++-
 templates/index.html          | 94 ++++++++++++++++++++++-----------
 templates/js/socket.js        | 68 ++++++++++++++++++++++--
 templates/js/template.js      | 27 ++++++++--
 templates/js/visualization.js | 97 +++++++++++++++++++++++++++++++----
 6 files changed, 335 insertions(+), 49 deletions(-)
 create mode 100644 config_copy.yml

diff --git a/config_copy.yml b/config_copy.yml
new file mode 100644
index 0000000..f972a46
--- /dev/null
+++ b/config_copy.yml
@@ -0,0 +1,25 @@
+name: ControlModelM2_sim
+max_time: 100
+num_trials: 2
+network_params:
+  generator: barabasi_albert_graph
+  n: 100
+  m: 2
+network_agents:
+  - agent_type: ControlModelM2
+    weight: 0.1
+    state:
+      id: 1
+  - agent_type: SpreadModelM2
+    weight: 0.9
+    state:
+      id: 0
+environment_params:
+  prob_neutral_making_denier: 0.035
+  prob_infect: 0.075
+  prob_cured_healing_infected: 0.035
+  prob_cured_vaccinate_neutral: 0.035
+  prob_vaccinated_healing_infected: 0.035
+  prob_vaccinated_vaccinate_neutral: 0.035
+  prob_generate_anti_rumor: 0.035
+  standard_variance: 0.055
diff --git a/templates/css/main.css b/templates/css/main.css
index f67a731..e329697 100644
--- a/templates/css/main.css
+++ b/templates/css/main.css
@@ -17,7 +17,16 @@ html, body {
 }
 
 .navbar {
-  box-shadow: 0px -2px 5px 3px rgba(0, 0, 0, .3);
+  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, .2)
+}
+
+.nav.navbar-right {
+  margin-right: 10px !important;
+}
+
+.dropdown-menu > li > a:hover {
+  background-color: #d4d3d3;
+  cursor: pointer;
 }
 
 .node {
@@ -49,6 +58,10 @@ svg#graph, #configuration {
 	padding: 15px;
 	border-left: none !important;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: inherit;
+  justify-content: space-evenly;
 }
 
 button {
@@ -86,8 +99,14 @@ button.pressed {
 	background-color: white;
 }
 
-.config-item  {
+hr {
 	margin-top: 15px !important;
+  margin-bottom: 15px !important;
+  width: 100%;
+}
+
+#update .config-item {
+  margin-top: 15px !important;
 }
 
 /** LOADER **/
@@ -203,6 +222,16 @@ button.pressed {
 	padding: 5px 2px;
 }
 
+#percentTable .no-data-table {
+  font-size: 10px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  font-weight: 100;
+}
+
 hr {
 	margin-top: 15px !important;
 	margin-bottom: 15px !important;
@@ -304,6 +333,19 @@ table#link-distance .max {
   padding: 15px !important;
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#wrapper-settings.none {
+  font-weight: bold;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+#wrapper-settings.none:before {
+  content: 'No configuration provided';
 }
 
 #wrapper-settings .btn-group button:focus {
@@ -329,3 +371,30 @@ table#link-distance .max {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #ccc;
 }
+
+/** CHARTS **/
+#charts {
+  height: 100%;
+  padding-left: 0 !important;
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+}
+
+.chart {
+  height: 50%;
+}
+
+.chart.no-data:before {
+  content: 'No data';
+  position: absolute;
+  font-size: 10px;
+  padding-bottom: 35px;
+}
+
+.chart.no-data {
+  font-weight: bold;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/templates/index.html b/templates/index.html
index 20ddfeb..c81c55d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,6 +20,10 @@
   <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
   <script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
 
+  <!-- C3.js // D3-based reusable chart library -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js"></script>
+
   <!-- JAVASCRIPTS -->
   <script type="text/javascript" src="js/visualization.js"></script>
   <script type="text/javascript" src="js/timeline.js"></script>
@@ -41,6 +45,11 @@
         play,
         slider;
 
+    var width_chart  = (window.innerWidth - 30) / 2 - 15,
+        height_chart = (window.innerHeight - 230) / 2,
+        chart_nodes,
+        chart_attrs;
+
     window.onload = function() {
         "use strict";
 
@@ -56,6 +65,7 @@
         $('#update #file').change(function() { 
 
             var file = $('#file')[0].files[0];
+            $('.console').append('<br/>');
             self.GraphVisualization.reset();
             $('#load').show();
 
@@ -83,11 +93,6 @@
 
         });
 
-        // Select 'trials'
-        $('.config-item #trials').change(function() {
-            _socket.send($(this).val(), 'get_trial');
-        });
-
         // Select 'attributes'
         $('.config-item #properties').change(function() {
             self.GraphVisualization.update_graph($(this).val(), slider.value(), function() {
@@ -95,8 +100,38 @@
             })
         });
 
-        $('[data-toggle="tooltip"]').tooltip()
-
+        chart_nodes = c3.generate({
+            size: {
+                width: width_chart,
+                height: height_chart
+            },
+            data: { 
+                columns: [],
+                type: 'area-spline'
+            },
+            axis: {
+                x: { label: 'Time' },
+                y: { label: 'Number of nodes' }
+            },
+            point: { show: false },
+            bindto: '#chart_nodes'
+        });
+        chart_attrs = c3.generate({
+            size: {
+                width: width_chart,
+                height: height_chart
+            },
+            data: {
+                columns: [],
+                type: 'area-spline'
+            },
+            axis: {
+                x: { label: 'Time' },
+                y: { label: 'Attributes' }
+            },
+            point: { show: false },
+            bindto: '#chart_attrs'
+        });
     }
 
     ///]]
@@ -113,7 +148,7 @@
     <div class="col-sm-9 console">
         Please, upload a YAML file that defines all the parameters of a simulation. <br/>
         If you don't know how to write the file, please visit this page:<br/>
-        http://soilsim.readthedocs.io/en/latest/quickstart.html<br/><br/>
+        http://soilsim.readthedocs.io/en/latest/quickstart.html<br/>
     </div>
     <!-- //CONSOLE -->
 
@@ -127,13 +162,15 @@
         </form>  
         <!-- //Load File -->
 
-        <!-- TRIALS -->
+        <!-- Atributos -->
         <div class="config-item">
-            Trials: 
-            <select id="trials" class="form-control form-control-sm">
+            Attributes: 
+            <select id="properties" class="form-control form-control-sm">
+                <optgroup id="properties-dynamic" label="Dynamics"></optgroup>
+                <optgroup id="properties-static" label="Statics"></optgroup>
             </select>
         </div>
-        <!-- //TRIALS -->
+        <!-- //Atributos -->
     </div>
 
 </div>
@@ -141,19 +178,23 @@
 <nav class="navbar navbar-default navbar-fixed-bottom">
     <div class="container-fluid">
         <div class="navbar-header">
-            <a class="navbar-brand" href="#">Brand</a>
+            <a class="navbar-brand" href="#">{{ model_name }}</a>
         </div>
         <div class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
-                <li data-target="#myCarousel" data-slide-to="0" class="active"><a href='#'>Home</a></li>
-                <li data-target="#myCarousel" data-slide-to="1"><a href="#" onclick="">Settings</a></li>
+                <li data-target="#myCarousel" data-slide-to="0" class="active" id="home_menu"><a href='#'>Home</a></li>
+                <li data-target="#myCarousel" data-slide-to="1" id="settings_menu"><a href="#">Settings &amp; Charts</a></li>
+                <li class="dropdown" id="trials">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Trials <span class="caret"></span></a>
+                    <ul class="dropdown-menu"></ul>
+                </li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li><a href="#">Run simulation</a></li>
             </ul>
         </div>
         <script type="text/javascript">
-            $('.nav li').click(function() {
+            $('.nav li[data-target="#myCarousel"]').click(function() {
                 $('.nav li').removeClass('active');
                 $(this).addClass('active');
             });
@@ -191,17 +232,9 @@
                     <!-- //Graph Info --> 
                     
                     <!-- PROPIEDADES -->
-                    <div class="config-item">
-                        Propiedades: 
-                        <select id="properties" class="form-control form-control-sm">
-                            <optgroup id="properties-dynamic" label="Dynamics"></optgroup>
-                            <optgroup id="properties-static" label="Statics"></optgroup>
-                        </select>
-                    </div>
-                    <hr />
                     <div class="config-item">
                         <table id="percentTable">
-                            <tbody><tr><th></th></tr></tbody>
+                            <tbody><tr><th class="no-data-table">No data</th></tr></tbody>
                         </table>
                     </div>
                     <hr />
@@ -271,10 +304,13 @@
         <!-- //Wrapper Graph Container -->
 
         <!-- Wrapper Settings -->
-        <div class="item settings">
+        <div class="item" id="settings">
             <div class="container-fluid">
-                <div class="col-sm-6" id="charts"></div>
-                <div class="col-sm-6" id="wrapper-settings"></div>
+                <div class="col-sm-6" id="charts">
+                    <div id="chart_nodes" class="chart no-data"></div>
+                    <div id="chart_attrs" class="chart no-data"></div>
+                </div>
+                <div class="col-sm-6 none" id="wrapper-settings"></div>
             </div>
         </div>
 
@@ -284,7 +320,5 @@
 </div>
 
 
-
-
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/js/socket.js b/templates/js/socket.js
index 9683273..c08167a 100755
--- a/templates/js/socket.js
+++ b/templates/js/socket.js
@@ -16,6 +16,7 @@ ws.onmessage = function(message) {
 	switch(msg['type']) {
 		case 'trials':
 			$('#load').removeClass('loader');
+			reset_trials();
 			set_trials(msg['data']);
 			break;
 
@@ -25,13 +26,22 @@ ws.onmessage = function(message) {
 				$('#load').hide();
 				reset_configuration();
 				set_configuration();
+				$('#home_menu').click(function() {
+					setTimeout(function() {
+						reset_timeline();
+						set_timeline(msg['data']['graph']);
+					}, 1000);
+				});
 				reset_timeline();
 				set_timeline(msg['data']['graph']);
 			});
+			$('#charts .chart').removeClass('no-data');
+			set_chart_nodes(msg['data']['graph'], chart_nodes)
+			set_chart_attrs(msg['data']['graph'], chart_attrs, $('.config-item #properties').val())
 			break;
 
 		case 'settings':
-			//console.log(msg['data']);
+			$('#wrapper-settings').empty().removeClass('none');
 			initGUI(msg['data']);
 			break;
 
@@ -67,12 +77,26 @@ var _socket = {
 
 var set_trials = function(trials) {
 	for ( i in trials ) {
-		$('<option>').val(i).text(trials[i]).appendTo('select#trials');
+		var list_item = $('<li>').appendTo('.dropdown#trials .dropdown-menu');
+		$('<a>').val(i).text(trials[i]).appendTo(list_item);
 	}
+	// Select 'trials'
+    $('.dropdown#trials li a').click(function() {
+		var a = $('.dropdown-toggle .caret');
+		$('.dropdown-toggle').text($(this).text() + ' ').append(a);
+        _socket.send($(this).val(), 'get_trial');
+    });
 	// Request first trial as default
 	_socket.send(0, 'get_trial')
 };
 
+var reset_trials = function() {
+	// 'Trials' selector
+    $('.dropdown-menu').empty();
+    var a = $('.dropdown-toggle .caret');
+	$('.dropdown-toggle').text('Trials ').append(a);
+}
+
 var convertJSON = function(json) {
 	json.links.forEach(function(link) {
 		link.source = json.nodes[link.source]
@@ -156,7 +180,6 @@ var reset_configuration = function() {
 
     // 'Link Distance' slider
     $('#link-distance-slider').slider('disable').slider('setValue', 30);
-
 }
 
 var set_timeline = function(graph) {
@@ -278,3 +301,42 @@ var get_limits = function(graph) {
 	})
 	return [min, max];
 }
+
+var set_chart_nodes = function(graph, chart) {
+	var [min, max] = get_limits(graph);
+	var data = ['nodes']
+	for (var i = min; i <= max; i++) {
+		data.push(this.GraphVisualization.get_nodes(i));
+	}
+	chart.load({
+		unload: true,
+		columns: [data]
+	});
+}
+
+var set_chart_attrs = function(graph, chart, property) {
+	var [min, max] = get_limits(graph);
+	var data_tmp = {}
+	for (var i = min; i <= max; i++) {
+		this.GraphVisualization.get_attributes(property, i, function(object) {
+			for (var value in object) {
+				if (!data_tmp[value]) {
+					var time = 0
+					for (var done in data_tmp)
+						time = (data_tmp[done].length > time) ? data_tmp[done].length - 1 : time
+					data_tmp[value] = Array(time).fill(0);
+				}
+				data_tmp[value].push(object[value]);
+			}
+		});
+	}
+	var data = $.map(data_tmp, function(value, index) {
+		value.splice(0,0,index);
+		return [value];
+	});
+	chart.load({
+		unload: true,
+		columns: data
+	});
+	chart.axis.labels({y: property});
+}
diff --git a/templates/js/template.js b/templates/js/template.js
index e72cbbe..ea1e5d7 100644
--- a/templates/js/template.js
+++ b/templates/js/template.js
@@ -37,14 +37,35 @@ var initGUI = function(model_params) {
         input.slider().on('change', function(slideEvt) {
             current_value.text(slideEvt.value.newValue);
         });
-        button_down.click(function() {
+        var timeout, interval;
+        button_down.on('mousedown', function() {
             input.slider('setValue', input.slider('getValue') - 0.001);
             current_value.text(input.slider('getValue'));
+            timeout = setTimeout(function() {
+                interval = setInterval(function() {
+                    input.slider('setValue', input.slider('getValue') - 0.001);
+                    current_value.text(input.slider('getValue'));
+                }, 30);
+            }, 500);
         });
-        button_up.click(function() {
+        button_down.on('mouseup', function() {
+            clearTimeout(timeout);
+            clearInterval(interval);
+        });
+        button_up.on('mousedown', function() {
             input.slider('setValue', input.slider('getValue') + 0.001);
             current_value.text(input.slider('getValue'));
-        })
+            timeout = setTimeout(function() {
+                interval = setInterval(function() {
+                    input.slider('setValue', input.slider('getValue') + 0.001);
+                    current_value.text(input.slider('getValue'));
+                }, 30);
+            }, 500);
+        });
+        button_up.on('mouseup', function() {
+            clearTimeout(timeout);
+            clearInterval(interval);
+        });
     };
 
     var addTextBox = function(param, obj) {
diff --git a/templates/js/visualization.js b/templates/js/visualization.js
index 3e423e0..12c938f 100644
--- a/templates/js/visualization.js
+++ b/templates/js/visualization.js
@@ -37,22 +37,26 @@
       node;               // Circles for the nodes
 
   Number.prototype.between = function(min, max) {
-    var min = (min) ? min : Math.max(),
-        max = (max) ? max : Math.min();
+    var min = (min || min === 0) ? min : Math.max(),
+        max = (max || max === 0) ? max : Math.min();
 
-    return this > min && this <= max;
+    return ( this > min && this <= max ) || ( min === 0 && this === 0 );
   };
 
   var lastFocusNode;
   var _helpers = {
-    set_node: function(node, property) {
+    set_node: function(node, property, time) {
       // Add nodes if data has more nodes than before
       node.enter().append('circle')
           .attr('class', 'node')
           .attr('r', radius)
           .style('fill', function (d) {
               if ( Array.isArray(d[property]) ) {
-                return color(d[property][0][0]);
+                var color_node = color(d[property][0][0]);
+                d[property].forEach(function(p) {
+                  if ( time.between(p[1], p[2]) ) color_node = color(p[0]);
+                });
+                return color_node;
               } else {
                 return color(d[property]);
               }
@@ -82,7 +86,11 @@
           .attr('r', radius)
           .style('fill', function (d) {
               if ( Array.isArray(d[property]) ) {
-                return color(d[property][0][0]);
+                var color_node = color(d[property][0][0]);
+                d[property].forEach(function(p) {
+                  if ( time.between(p[1], p[2]) ) color_node = color(p[0]);
+                });
+                return color_node;
               } else {
                 return color(d[property]);
               }
@@ -226,7 +234,7 @@
 
     // Do the same with the circles for the nodes - no
     node = gnodes.selectAll('.node').data(data_node);
-    _helpers.set_node(node, property);
+    _helpers.set_node(node, property, time);
 
     // Node Attributes
     var statistics = {}
@@ -234,10 +242,10 @@
     data_node.forEach(function(n) {
       // Count node properties
       if ( Array.isArray(n[property]) ) {
-        statistics[n[property][0][0]] = (!statistics[n[property][0][0]]) ? 1 : statistics[n[property][0][0]] + 1;
-      } else {
-        statistics[n[property]] = (!statistics[n[property]]) ? 1 : statistics[n[property]] + 1;
-      }
+        n[property].forEach(function(p) {
+          if ( time.between(p[1], p[2]) ) statistics[p[0]] = (!statistics[p[0]]) ? 1 : statistics[p[0]] + 1;
+        });
+      } else {  statistics[n[property]] = (!statistics[n[property]]) ? 1 : statistics[n[property]] + 1; }
     });
     for ( i in statistics ) {
       statistics[i] = (statistics[i] / data_node.length * 100).toFixed(2);
@@ -396,6 +404,71 @@
     }
   }
 
+  /**
+   * Get attributes at one moment given.
+   * A function that get the attributes of all nodes at a specific time.
+   *
+   * @param   {object}    time          Instant of time.
+   * @param   {object}    callback      A function called at the end.
+   * @return  {object}    object        An object with the number of nodes.
+   */
+  function get_attributes(property, time, callback) {
+    var attrs = {}
+
+    graph.nodes.forEach(function(node) {
+
+      if (Array.isArray(node.spells)) {
+          node.spells.forEach( function(d) {
+            if ( time.between(d[0], d[1]) ) { 
+
+              if (Array.isArray(node[property])) {
+                node[property].forEach( function(p) {
+                  if ( time.between(p[1], p[2]) ) attrs[p[0]] = (!attrs[p[0]]) ? 1 : attrs[p[0]] + 1;
+                });
+              } else { attrs[node[property]] = (!attrs[node[property]]) ? 1 : attrs[node[property]] + 1;  }
+
+            } 
+          });
+
+      } else {
+
+        if (Array.isArray(node[property])) {
+          node[property].forEach( function(p) {
+            if ( time.between(p[1], p[2]) ) attrs[p[0]] = (!attrs[p[0]]) ? 1 : attrs[p[0]] + 1;
+          });
+        } else { attrs[node[property]] = (!attrs[node[property]]) ? 1 : attrs[node[property]] + 1; }
+
+      }
+    });
+
+    if (callback) { callback(attrs); }
+    else { return attrs }
+  }
+
+  /**
+   * Get nodes at one moment given.
+   * A function that get the number of nodes at a specific time.
+   *
+   * @param   {object}    time          Instant of time.
+   * @param   {object}    callback      A function called at the end.
+   * @return  {object}    number        The number of nodes.
+   */
+  function get_nodes(time, callback) {
+    var total_nodes = 0;
+    graph.nodes.forEach(function(node) {
+      if (Array.isArray(node.spells)) {
+          node.spells.forEach( function(d) {
+            if ( time.between(d[0], d[1]) ) { total_nodes++; } 
+          });
+      } else {
+          total_nodes++;
+      }
+    });
+
+    if (callback) { callback(total_nodes); }
+    else { return total_nodes }
+  }
+
 
   /**
    * Exporting
@@ -418,6 +491,8 @@
 
     // Getters
     color: color,
+    get_attributes: get_attributes,
+    get_nodes: get_nodes,
 
     // Statistics
     statistics: {},