display throughput in the user interface

dream/platform/__init__.py

@@ -48,6 +48,7 @@ def setSimulationParameters():
   box_to_enable_list = [1, 2, 3, 7, 8, 9]
   available_people_list = [x for x in parameter_dict if parameter_dict[x]]
   to_enable = len(available_people_list) >= 6
+  throughput = None
   for box in model["box_list"]:
     box["worker"] = None
     box["enabled"] = False
@@ -55,6 +56,12 @@ def setSimulationParameters():
       box["enabled"] = to_enable
       if to_enable:
         box["worker"] = available_people_list.pop()
+        if throughput is None:
+          throughput = box["throughput"]
+        throughput = min(throughput, box["throughput"])
+  if throughput is None:
+    throughput = 0
+  model["throughput"] = throughput
   return "ok"
 
 @app.route("/getModel", methods=["GET", "OPTIONS"])

ui/css/demo-new.css

@@ -86,6 +86,16 @@ body {
   border-radius: 10px;
 }
 
+#total_throughput {
+  position: absolute;
+  width: 100px;
+  height: 80px;
+  border: 2px solid;
+  margin-top: 135px;
+  margin-left: 720px;
+  border-radius: 10px;
+}
+
 /* Setting for dialog */
 
 label, input { display:block; }
@@ -198,3 +208,13 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
 ._jsPlumb_endpoint._jsPlumb_hover {
     z-index:22 !important;
 }
+
+._jsPlumb_overlay {
+  border:1px solid #346789; 
+  opacity:0.8; 
+  filter:alpha(opacity=80);
+  background-color:white;
+  color:black;
+  font-family:helvetica;
+  padding:0.5em; 
+}

ui/index.html

@@ -21,7 +21,11 @@
         <ul>
         </ul>
       </div>
-	    </div>
+      <div id="total_throughput">
+        Throughput
+        <h2></h2>
+      </div>
+      </div>
 		<div id="sidebar">			
             <div id="explanation">
                 <p>This is a demonstration of Flowchart combined with simulation.</p>

ui/src/dream.js

@@ -44,7 +44,7 @@
       // listen for clicks on connections, and offer to change values on click.
       jsPlumb.bind("click", function(conn, originalEvent) {
         console.log("user click connection", conn);
-        dialog_connection = conn;
+        priv.dialog_connection = conn;
         $( "#dialog-form" ).dialog( "open" );
       }); 
       
@@ -65,8 +65,7 @@
     priv.initDialog = function() {
       var throughput = $( "#throughput" ),
         allFields = $( [] ).add( throughput ),
-        tips = $( ".validateTips" ),
-        dialog_connection;
+        tips = $( ".validateTips" );
 
       function updateTips( t ) {
         tips
@@ -113,7 +112,7 @@
   
             if ( bValid ) {
               console.log("new value is ok...", throughput.val());
-              console.log("dialog_connection", dialog_connection);
+              console.log("dialog_connection", priv.dialog_connection);
               
               $( this ).dialog( "close" );
             }
@@ -161,7 +160,9 @@
           j_length = box.target_list.length;
           for (j=0; j < j_length; j++) {
             console.log("in dream, jsPlumb.connect", box.id, box.target_list[j]);
-            line = jsPlumb.connect({source:box.id, target: box.target_list[j], label: "foo"});
+            line = jsPlumb.connect({source:box.id, target: box.target_list[j],
+                                   labelStyle : { cssClass:"component label" }});
+            //, label: box.throughput.toString()});
             // Example to change line color
             // line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
           }
@@ -235,6 +236,18 @@
       });
     };
 
+    priv.updateConnectionLabel = function (source_id, target_id, title) {
+      var connection_array, i, i_length, connection;
+      connection_array = jsPlumb.getConnections({source: source_id, target: target_id});
+      i_length = connection_array.length;
+      for (i = 0; i < i_length; i++) {
+        connection = connection_array[i];
+        if (connection.getLabel() !== title) {
+          connection.setLabel(title);
+        }
+      }
+    };
+
     priv.updateModel = function (success) {
       var refreshGraph = function(model) {
         //console.log("model", model);
@@ -254,8 +267,15 @@
           } else {
             priv.updateBoxStyle(box.id, {"background-color": "#FF0000"});
           }
+          // Update content of the box
           priv.updateBoxContent(box.id, box.title, box.worker);
+          // Update the label
+          if (box.target_list !== undefined) {
+            priv.updateConnectionLabel(box.id, box.target_list[0], box.throughput.toString());
+          };
         }
+        // Refresh total throughput value
+        $("#total_throughput h2").text(model.throughput.toString());
       };
       priv.getModel(refreshGraph);
     };

ui/src/dream_launcher.js

 (function($) {
+  "use strict";
   jsPlumb.bind("ready", function() {
     var graph_data = {}, dream_instance, available_people = {}, people_list,
         i, i_length;
+    graph_data.throughput = 0;
     graph_data.box_list = [
-        {id: 'window1', title: 'attach1', target_list: ['window2'], coordinate: {top: 5, left: 5}},
-        {id: 'window2', title: 'attach2', target_list: ['window3'], coordinate: {top: 5, left: 15}},
-        {id: 'window3', title: 'attach3', target_list: ['window7'], coordinate: {top: 5, left: 25}},
-        {id: 'window4', title: 'attach1', target_list: ['window5'], coordinate: {top: 20, left: 5}},
-        {id: 'window5', title: 'attach2', target_list: ['window6'], coordinate: {top: 20, left: 15}},
-        {id: 'window6', title: 'attach3', target_list: ['window7'], coordinate: {top: 20, left: 25}},
-        {id: 'window7', title: 'Moulding', target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
-        {id: 'window8', title: 'tests', target_list: ['window9'], coordinate: {top: 5, left: 45}},
-        {id: 'window9', title: 'packaging', coordinate: {top: 5, left: 55}},
-        {id: 'window10', title: 'tests', target_list: ['window11'], coordinate: {top: 20, left: 45}},
-        {id: 'window11', title: 'packaging', coordinate: {top: 20, left: 55}},
+        {id: 'window1', title: 'attach1', throughput: 23, target_list: ['window2'], coordinate: {top: 5, left: 5}},
+        {id: 'window2', title: 'attach2', throughput: 21, target_list: ['window3'], coordinate: {top: 5, left: 15}},
+        {id: 'window3', title: 'attach3', throughput: 23, target_list: ['window7'], coordinate: {top: 5, left: 25}},
+        {id: 'window4', title: 'attach1', throughput: 22, target_list: ['window5'], coordinate: {top: 20, left: 5}},
+        {id: 'window5', title: 'attach2', throughput: 23, target_list: ['window6'], coordinate: {top: 20, left: 15}},
+        {id: 'window6', title: 'attach3', throughput: 23, target_list: ['window7'], coordinate: {top: 20, left: 25}},
+        {id: 'window7', title: 'Moulding', throughput: 40, target_list: ['window8', 'window10'], coordinate: {top: 12, left: 35}},
+        {id: 'window8', title: 'tests', throughput: 23, target_list: ['window9'], coordinate: {top: 5, left: 45}},
+        {id: 'window9', title: 'packaging', throughput: 23, coordinate: {top: 5, left: 55}},
+        {id: 'window10', title: 'tests', throughput: 23, target_list: ['window11'], coordinate: {top: 20, left: 45}},
+        {id: 'window11', title: 'packaging', throughput: 23, coordinate: {top: 20, left: 55}},
     ];
 
     dream_instance = DREAM.newDream(graph_data);