gui prototype: allow to configure elements instead of hardcoding their setup

DREAM/dream/dream/platform/static/src/dream.js

 (function (scope, $, jsPlumb, console, _) {
   "use strict";
-  var dream = function (model) {
+  var dream = function (configuration) {
     var that = {}, priv = {};
 
     priv.onError = function(error) {
@@ -11,62 +11,6 @@
       return "/";
     };
 
-    priv.initJsPlumb = function () {
-      jsPlumb.setRenderMode(jsPlumb.SVG);
-      jsPlumb.importDefaults({
-        // default drag options
-        DragOptions : { cursor: 'pointer', zIndex:2000 },
-        EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
-        PaintStyle : {strokeStyle:"#736AFF", lineWidth:2 },
-        HoverPaintStyle : {strokeStyle:"#42a62c", lineWidth:2 },
-        Endpoint : [ "Dot", {radius:2} ],
-        ConnectionOverlays : [
-          [ "Arrow", { 
-            location:1,
-            id:"arrow",
-                      length:14,
-                      foldback:0.8
-          } ],
-        ],
-        Anchor: "Continuous",
-        Connector: ["StateMachine", { curviness:20 }],
-      });     
-
-      var init = function(connection) {
-        connection.bind("editCompleted", function(o) {
-        });
-      };      
-            
-      // listen for new connections; initialise them the same way we initialise the connections at startup.
-      jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) { 
-        init(connInfo.connection);
-      });     
-            
-      // make all the window divs draggable           
-      jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
-
-      // listen for clicks on connections, and offer to change values on click.
-      jsPlumb.bind("click", function(conn, originalEvent) {
-        console.log("user click connection", conn);
-        priv.dialog_connection = conn;
-        $( "#dialog-form" ).dialog( "open" );
-      }); 
-      
-      jsPlumb.bind("connectionDrag", function(connection) {
-        console.log("connection " + connection.id + " is being dragged");
-      });   
-      
-      jsPlumb.bind("connectionDragStop", function(connection) {
-        console.log("connection " + connection.id + " was dragged");
-      });
-      
-      jsPlumb.makeTarget(jsPlumb.getSelector(".w"), {
-        dropOptions:{ hoverClass:"dragHover" },
-        anchor:"Continuous"     
-      });
-
-    };
-
     priv.initDialog = function() {
       // code to allow changing values on connections. For now we assume
       // that it is throughput. But we will need more generic code
@@ -145,67 +89,6 @@
       return e.keyCode !== 13;
     });
 
-    priv.displayGraph = function () {
-      var render_element, i, i_length, box, style_string, j, j_length, line;
-      // Add boxes in the render div
-      render_element = $("[id=render]");
-      i_length = model.box_list.length;
-      for (i=0; i < i_length; i++) {
-        box = model.box_list[i];
-        style_string = ""
-        if (box.coordinate !== undefined) {
-          _.each(box.coordinate, function(value, key, list) {
-            style_string = style_string + key + ':' + value + 'em;';
-          })
-        }
-        if (box.style !== undefined) {
-          _.each(box.style, function(value, key, list) {
-            style_string = style_string + key + ':' + value + ';';
-          })
-        }
-        if (style_string.length > 0) {
-          style_string = 'style="' + style_string + '"';
-        }
-        render_element.append('<div class="window" id="' +
-                          box.id + '" ' + style_string + '">'
-                          + '</div>');
-      }
-
-      // Now that we have all boxes, connect them
-      for (i=0; i < i_length; i++) {
-        box = model.box_list[i];
-        if (box.target_list !== undefined) {
-          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],
-                                   labelStyle : { cssClass:"component label" }});
-            // Example to change line color
-            // line.setPaintStyle({strokeStyle:"#42a62c", lineWidth:2 });
-          }
-        }
-      }
-
-      // Initial DEMO code : make all the window divs draggable
-      jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
-
-    };
-
-    priv.setSimulationParameters = function (simulation_parameters) {
-      $.ajax({
-        url: priv.getUrl() + "setSimulationParameters",
-        type: 'POST',
-        data: JSON.stringify(simulation_parameters),
-        contentType: "application/json",
-        success: function(response) {
-          console.log("got json response",response);
-        },
-        error: function(xhr, textStatus, error) {
-          priv.onError(error);
-        }
-      });
-    };
-
     // Utility function to update the style of a box
     priv.updateBoxStyle = function (box_id, style) {
       var box;
@@ -227,113 +110,23 @@
       box.html(html_string);
     };
 
-    priv.getModel = function (success) {
-      $.ajax({
-        url: priv.getUrl() + "getModel",
-        type: 'GET',
-        success: success,
-        error: function(xhr, textStatus, error) {
-          priv.onError(error);
-        }
-      });
-    };
-
-    priv.setModel = function () {
-      // Now communicate our model to the simulation server
-      $.ajax({
-        url: priv.getUrl() + "setModel",
-        type: 'POST',
-        data: JSON.stringify(model),
-        contentType: "application/json",
-        success: function(response) {
-          console.log("got json response",response);
-        },
-        error: function(xhr, textStatus, error) {
-          priv.onError(error);
-        }
-      });
-    };
-
-    priv.updateModel = function () {
-      // Now communicate our model to the simulation server
-      $.ajax({
-        url: priv.getUrl() + "updateModel",
-        type: 'POST',
-        data: JSON.stringify(model),
-        contentType: "application/json",
-        success: function(response) {
-          console.log("got json response",response);
-        },
-        error: function(xhr, textStatus, error) {
-          priv.onError(error);
-        }
-      });
-    };
-
-    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);
-        }
+    Object.defineProperty(that, "newElement", {
+      configurable: false,
+      enumerable: false,
+      writable: false,
+      value: function (element) {
+        var element_id = "Dream." + element.id.split('_')[0];
+        priv.plumb.newElement(element, configuration[element_id]);
       }
-    };
-
-    priv.refreshModel = function (success) {
-      var refreshGraph = function(model) {
-        var i, i_length, box, box_list, box, box_id;
-        i_length = model.box_list.length;
-        for (i = 0; i < i_length; i++) {
-          //, style: {"background-color":"#FF0000"}
-          box = model.box_list[i];
-          if (box.enabled) {
-            priv.updateBoxStyle(box.id, {"background-color": "#5EFB6E"});
-          } else {
-            priv.updateBoxStyle(box.id, {"background-color": "#FF0000"});
-          }
-          // Update content of the box
-          priv.updateBoxContent(box.id, box.title, box.throughput, box.worker);
-        }
-        // Refresh total throughput value
-        $("#total_throughput h2").text(model.throughput.toString());
-        box_list = $(".window");
-        // prevent click event listener to open dialog on every box
-        i_length = box_list.length;
-        for (i = 0; i < i_length; i++) {
-          box = box_list[i];
-          box_id = box.id;
-          $("#" + box_id).click(function (box_id) {
-            return function () {
-            priv.box_id = box_id;
-            $( "#dialog-form" ).dialog( "open" );
-            }
-          }(box_id));
-        }
-      };
-      priv.getModel(refreshGraph);
-    };
-
-    priv.refreshModelRegularly = function () {
-      var refreshRegularly = function() {
-        priv.refreshModel();
-        setTimeout(refreshRegularly, 1000);
-      };
-      setTimeout(refreshRegularly, 1000);
-    };
+    });
 
     Object.defineProperty(that, "start", {
       configurable: false,
       enumerable: false,
       writable: false,
       value: function () {
-        priv.setModel();
-        priv.initJsPlumb();
-        priv.initDialog();
-        priv.displayGraph();
-        priv.refreshModelRegularly();
+        priv.plumb = jsonPlumb.newJsonPlumb();
+        priv.plumb.start();
       }
     });
 
@@ -361,8 +154,8 @@
       configurable: false,
       enumerable: false,
       writable: false,
-      value: function (model) {
-        var instance = dream(model);
+      value: function (configuration) {
+        var instance = dream(configuration);
         return instance;
       }
     });

DREAM/dream/dream/platform/static/src/dream_launcher.js

@@ -46,7 +46,16 @@
                                   },
     }
     );
-    dream_instance = jsonPlumb.newJsonPlumb();
+    //dream_instance = jsonPlumb.newJsonPlumb();
+    //dream_instance.start();
+    var configuration = {
+      "Dream.Source": { anchor: {RightMiddle: {}}},
+      "Dream.Machine": { anchor: {RightMiddle: {}, LeftMiddle: {}, TopCenter: {}, BottomCenter: {}}},
+      "Dream.Queue": { anchor: {RightMiddle: {}, LeftMiddle: {}}},
+      "Dream.Exit": { anchor: {LeftMiddle: {}}},
+      "Dream.Repairman": { anchor: {TopCenter: {}, BottomCenter: {}}},
+    }
+    dream_instance = DREAM.newDream(configuration)
     dream_instance.start();
 
   })

DREAM/dream/dream/platform/static/src/jsonPlumb.js

@@ -63,17 +63,10 @@
 
       var updateConnectionData = function(connection, remove) {
         console.log("updateConnectionData is being called");
-        var i, core_length=priv.graph_data.coreObject.length,
-           source_element, destination_element;
+        var source_element;
         source_element = priv.element_container[connection.sourceId];
-        destination_element = priv.element_container[connection.targetId];
-        console.log('destination_element._class', destination_element._class);
-        if (destination_element._class === "Dream.Repairman") {
-          source_element.repairman = destination_element.id;
-        } else {
-          source_element.successorList = source_element.successorList || [];
-          source_element.successorList.push(connection.targetId);
-        }
+        source_element.successorList = source_element.successorList || [];
+        source_element.successorList.push(connection.targetId);
         priv.updateJsonOutput();
       };
 
@@ -88,27 +81,17 @@
 
     priv.updateJsonOutput = function() {
       //temporary method to display json on the screen (for debugging)
-      $("#json_output")[0].value = JSON.stringify(priv.graph_data, null, " ");
+      $("#json_output")[0].value = JSON.stringify(priv.element_container, null, " ");
     };
 
-    priv.addModelResourceToGraphData = function(element) {
+    priv.addElementToGraphData = function(element, option) {
+      // Now update the container of elements
       var element_data = {_class: element.class,
           id: element.id,
           name: element.id,
-          capacity: "1",
+          option: option
       };
       priv.element_container[element.id] = element_data;
-      priv.graph_data.modelResource.push(element_data);
-      priv.updateJsonOutput();
-    };
-
-    priv.addElementToGraphData = function(element) {
-      // Now update the graph_data
-      var element_data = {_class: element.class,
-          id: element.id,
-          name: element.id};
-      priv.element_container[element.id] = element_data;
-      priv.graph_data.coreObject.push(element_data);
       priv.updateJsonOutput();
     };
 
@@ -116,6 +99,7 @@
       jsPlumb.removeAllEndpoints($("#" + element_id));
       $("#" + element_id).remove();
       delete(priv.element_container[element_id]);
+      priv.updateJsonOutput();
     };
 
     priv.initDialog = function(title, element_id) {
@@ -179,22 +163,9 @@
       writable: false,
       value: function () {
         priv.element_container = {};
-        priv.graph_data = {coreObject: [],
-                           modelResource: [],
-                           _class: "Dream.Simulation",
-                            general: {
-                              "_class": "Dream.Configuration",
-                              "numberOfReplications": "1",
-                              "maxSimTime": "1440",
-                              "trace": "Yes",
-                              "confidenceLevel": "0.95"
-                           },
-        };
         priv.graph_selection = {};
         priv.initJsPlumb();
         priv.initDialog();
-        //priv.displayGraph();
-        //priv.refreshModelRegularly();
       }
     });
 
@@ -212,7 +183,7 @@
       configurable: false,
       enumerable: false,
       writable: false,
-      value: function (element) {
+      value: function (element, option) {
         var render_element, style_string="";
         render_element = $("[id=render]");
         if (element.coordinate !== undefined) {
@@ -237,10 +208,6 @@
           priv.initDialog(element.id, element.id);
           $( "#dialog-form" ).dialog( "open" );
         });
-        /*container.find('.vmail').bind('click', function() {
-        var id = $(this).attr('id').replace("pm_","");
-        getPM(id);
-        });  */
 
         // Add endPoint to allow drawing connections
         var color = "#00f";
@@ -266,26 +233,12 @@
           isTarget:true,
           //dropOptions : exampleDropOptions
         };
-        var resource_type_list = ["Dream.Repairman"];
-        var right_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Source"];
-        if (right_end_point_list.indexOf(element.class) !== -1) {
-          jsPlumb.addEndpoint(element.id, { anchor: "RightMiddle" }, endpoint);
-        }
-        var left_end_point_list = ["Dream.Machine", "Dream.Queue", "Dream.Exit"];
-        if (left_end_point_list.indexOf(element.class) !== -1) {
-          jsPlumb.addEndpoint(element.id, { anchor: "LeftMiddle" }, endpoint);
-        }
-        var repair_point_list = ["Dream.Repairman", "Dream.Machine"]
-        if (repair_point_list.indexOf(element.class) !== -1) {
-          jsPlumb.addEndpoint(element.id, { anchor: "TopCenter" }, endpoint);
-          jsPlumb.addEndpoint(element.id, { anchor: "BottomCenter" }, endpoint);
-        };
-        if (resource_type_list.indexOf(element.class) === -1) {
-          priv.addElementToGraphData(element);
-        } else {
-          priv.addModelResourceToGraphData(element);
-        }
-
+        _.each(_.pairs(option.anchor), function(value, key, list) {
+          var anchor = value[0],
+              endpoint_configuration = value[1];
+          jsPlumb.addEndpoint(element.id, { anchor: anchor }, endpoint);
+        })
+        priv.addElementToGraphData(element, option);
       }
     });