network supports forceCharge

fix bug of table size

fix bug of visCss and css loading

css/dataflow-visualization.css

@@ -39,9 +39,6 @@ svg {
   fill-opacity: 0.5;
   pointer-events: none;
 }
-.dataflow-table-view {
-  width: 450px;
-}
 
 .df-parallelcoordinates-brush {
   fill: none;

css/style.css

@@ -137,6 +137,10 @@ input[type=search] {
   width: 200px;
   padding: 5px;
 }
+.dataflow-node-shape-table {
+  width: 300px;
+  height: 300px;
+}
 
 .dataflow-options {
   left: 100%;

js/dataflow/dataflow-manager.js

@@ -393,16 +393,16 @@ var extObject = {
       for (var i in this.nodes)
         this.nodes[i].hide();
       for (var i in this.nodes){
-        this.nodes[i].show();
         this.nodes[i].loadCss();
+        this.nodes[i].show();
       }
     } else {
-      for (var i in this.edges)
-        this.edges[i].show();
       for (var i in this.nodes) {
         this.nodes[i].loadCss();
         this.nodes[i].show();
       }
+      for (var i in this.edges)
+        this.edges[i].show();
     }
   },
 

js/dataflow/dataflow-node.js

@@ -145,7 +145,8 @@ var extObject = {
         .css({
           width: "",
           height: ""
-        }); // remove constraints set in details mode
+        })
+        .resizable("disable"); // remove constraints set in details mode
       this.showIcon();
     }
 

js/dataflow/datasource/loaddata-dialog.html

@@ -3,6 +3,7 @@
   <select id="data" style="margin: 5px; width: 150px;">
     <option value='none'>None</option>
     <option value='car'>Auto MPG (StatLib)</option>
+    <option value='carmds'>Auto MPG MDS</option>
     <option value='network-nodes'>Regulation Network (nodes)</option>
     <option value='network-edges'>Regulation Network (edges)</option>
     <option value='table'>Evaluation Table</option>

js/dataflow/value/dataflow-value-extractor.js

@@ -51,27 +51,20 @@ var extObject = {
     DataflowValueExtractor.base.showDetails.call(this); // call parent settings
 
     var node = this;
-    var div = $("<div></div>")
-        .addClass("dataflow-options-item")
-        .appendTo(this.jqview);
-      $("<label></label>")
-        .addClass("dataflow-options-text")
-        .text("Extract values from")
-        .appendTo(div);
-    this.selectDimension = $("<select><option/></select>")
-      .addClass("dataflow-node-select")
-      .appendTo(div)
-      .select2({
-        placeholder: "Select"
-      })
-      .change(function(event){
-        node.dimension = event.target.value;
+    this.selectDimension = DataflowSelect.new({
+      id: "dimension",
+      label: "Extract values from",
+      target: this.jqview,
+      relative: true,
+      placeholder: "Select",
+      value: this.dimension,
+      list: this.prepareDimensionList(),
+      change: function(event) {
+        var unitChange = event.unitChange;
+        node.dimension = unitChange.value;
         node.pushflow();
-      });
-    this.prepareDimensionList();
-
-    // show current selection, must call after prepareDimensionList
-    this.selectDimension.select2("val", this.dimension);
+      }
+    });
   },
 
   process: function() {
@@ -104,14 +97,6 @@ var extObject = {
       // insert each value into constants
       outpack.add(val);
     }, this);
-  },
-
-  prepareDimensionList: function() {
-    var dims = this.ports["in"].pack.data.dimensions;
-    for (var i in dims) {
-      $("<option value='" + i + "'>" + dims[i] + "</option>")
-        .appendTo(this.selectDimension);
-    }
   }
 
 };

js/dataflow/visualization/dataflow-heatmap.js

@@ -20,7 +20,7 @@ var extObject = {
     "id": true
   },
 
-  fontWidth: 5,
+  fontWidth: 5.5,
 
   // no translate for heatmap, heatmap's rendering is not item based
   propertyTranslate: {

js/dataflow/visualization/dataflow-network.js

@@ -96,6 +96,8 @@ var extObject = {
 
     // network translate (transform)
     this.translate = [0, 0];
+
+    this.forceCharge = -10000;
   },
 
   serialize: function() {
@@ -105,6 +107,7 @@ var extObject = {
     result.nodeLabel = this.nodeLabel;
     result.nodeLabelOn = this.nodeLabelOn;
     result.panOn = this.panOn;
+    result.forceCharge = this.forceCharge;
 
     return result;
   },
@@ -116,7 +119,12 @@ var extObject = {
     this.nodeLabel = save.nodeLabel;
     this.nodeLabelOn = save.nodeLabelOn;
     this.panOn = save.panOn;
+    this.forceCharge = save.forceCharge;
 
+    if (this.forceCharge == null) {
+      this.forceCharge = -10000;
+      console.error("forceCharge not saved");
+    }
     this.selectedEdges = save.selectedEdges;
     if (this.selectedEdges == null) {
       this.selectedEdges = {};
@@ -536,6 +544,22 @@ var extObject = {
         node.showVisualization();
       }
     });
+
+    this.inputBins = DataflowInput.new({
+      id: "charge",
+      label: "Charge",
+      target: this.jqoptions,
+      relative: true,
+      accept: "int",
+      range: [-200000, 0],
+      scrollDelta: 500,
+      value: this.forceCharge,
+      change: function(event) {
+        var unitChange = event.unitChange;
+        node.forceCharge = parseInt(unitChange.value);
+        node.showVisualization();
+      }
+    });
   },
 
   processNodes: function() {
@@ -715,7 +739,7 @@ var extObject = {
       .nodes(this.nodeList)
       .links(this.edgeList)
       .size([this.svgSize[0], this.svgSize[1]])
-      .charge(-10000)
+      .charge(this.forceCharge)
       .linkDistance(30)
       .gravity(0.5)
       .friction(0.25)

js/dataflow/visualization/dataflow-parallelcoordinates.js

@@ -66,8 +66,6 @@ var extObject = {
 
   prepareInteraction: function() {
 
-    DataflowParallelCoordinates.base.prepareInteraction.call(this);
-
     var node = this,
         mode = "none";
     var startPos = [0, 0],
@@ -277,7 +275,7 @@ var extObject = {
       sortable: true,
       relative: true,
       value: this.dimensions,
-      list: this.prepareDimensionList(["string"]),
+      list: this.prepareDimensionList(),
       change: function(event) {
         var unitChange = event.unitChange;
         node.dimensions = unitChange.value;

js/dataflow/visualization/dataflow-table.js

@@ -5,6 +5,7 @@ var extObject = {
 
   plotName: "Table",
   iconClass: "dataflow-table-icon dataflow-square-icon",
+  nodeShapeName: "table",
 
   contextmenuDisabled: {
     "options": true
@@ -40,6 +41,8 @@ var extObject = {
         data = pack.data,
         items = pack.items;
 
+    this.jqvis.addClass("dataflow-table");
+
     this.checkDataEmpty();
     if (this.isEmpty) {
       this.prepareSvg();
@@ -51,9 +54,6 @@ var extObject = {
       this.interactionOn = false;
     }
 
-    this.jqview.addClass("dataflow-table-view");
-    this.jqvis.addClass("dataflow-table");
-
     var rows = [],
         columns = [];
     columns.push({
@@ -95,7 +95,7 @@ var extObject = {
         height: paddedHeight
       })
       .resizable({
-        maxWidth: jqtheadr.width(),
+        maxWidth: Math.max(jqtheadr.width(), 300),
         maxHeight: paddedHeight
       });
 

js/dataflow/visualization/dataflow-visualization.js

@@ -161,11 +161,12 @@ var extObject = {
 
     if (this.jqvis)
       this.jqvis.remove();
+      /*
     this.jqview
       .css("width", "")
       .css("height", "")
       .resizable("disable");
-
+    */
     this.viewWidth = this.jqview.width();
     this.viewHeight = this.jqview.height();
     // must be called AFTER viewWidth & viewHeight are set

js/ui/interaction-manager.js

@@ -454,6 +454,7 @@ var extobject = {
       core.dataflowManager.clearNodeSelection();
       core.viewManager.hideColorpickers();
       $("input").blur();
+      this.contextmenuLock = false;
     }
   },