From 424c3902338a3a083fcd3309b56e9f708fad2e6b Mon Sep 17 00:00:00 2001 From: Bowen Yu Date: Mon, 30 Mar 2015 20:40:07 -0400 Subject: [PATCH] network supports forceCharge fix bug of table size fix bug of visCss and css loading --- css/dataflow-visualization.css | 3 -- css/style.css | 4 ++ js/dataflow/dataflow-manager.js | 6 +-- js/dataflow/dataflow-node.js | 3 +- js/dataflow/datasource/loaddata-dialog.html | 1 + js/dataflow/value/dataflow-value-extractor.js | 41 ++++++------------- js/dataflow/visualization/dataflow-heatmap.js | 2 +- js/dataflow/visualization/dataflow-network.js | 26 +++++++++++- .../dataflow-parallelcoordinates.js | 4 +- js/dataflow/visualization/dataflow-table.js | 8 ++-- .../visualization/dataflow-visualization.js | 3 +- js/ui/interaction-manager.js | 1 + 12 files changed, 57 insertions(+), 45 deletions(-) diff --git a/css/dataflow-visualization.css b/css/dataflow-visualization.css index dc5f941..4921c8c 100644 --- a/css/dataflow-visualization.css +++ b/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; diff --git a/css/style.css b/css/style.css index fe38f2b..2b0cf5d 100644 --- a/css/style.css +++ b/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%; diff --git a/js/dataflow/dataflow-manager.js b/js/dataflow/dataflow-manager.js index 061d882..9a0888e 100644 --- a/js/dataflow/dataflow-manager.js +++ b/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(); } }, diff --git a/js/dataflow/dataflow-node.js b/js/dataflow/dataflow-node.js index 3ebfda1..997309f 100644 --- a/js/dataflow/dataflow-node.js +++ b/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(); } diff --git a/js/dataflow/datasource/loaddata-dialog.html b/js/dataflow/datasource/loaddata-dialog.html index f28ac2c..9ce1663 100644 --- a/js/dataflow/datasource/loaddata-dialog.html +++ b/js/dataflow/datasource/loaddata-dialog.html @@ -3,6 +3,7 @@ ") - .appendTo(this.selectDimension); - } } }; diff --git a/js/dataflow/visualization/dataflow-heatmap.js b/js/dataflow/visualization/dataflow-heatmap.js index f082425..90ba042 100644 --- a/js/dataflow/visualization/dataflow-heatmap.js +++ b/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: { diff --git a/js/dataflow/visualization/dataflow-network.js b/js/dataflow/visualization/dataflow-network.js index 4a90e00..b48ed27 100644 --- a/js/dataflow/visualization/dataflow-network.js +++ b/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) diff --git a/js/dataflow/visualization/dataflow-parallelcoordinates.js b/js/dataflow/visualization/dataflow-parallelcoordinates.js index 4489aab..c93cae1 100644 --- a/js/dataflow/visualization/dataflow-parallelcoordinates.js +++ b/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; diff --git a/js/dataflow/visualization/dataflow-table.js b/js/dataflow/visualization/dataflow-table.js index 4dcee09..3421acf 100644 --- a/js/dataflow/visualization/dataflow-table.js +++ b/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 }); diff --git a/js/dataflow/visualization/dataflow-visualization.js b/js/dataflow/visualization/dataflow-visualization.js index ca96e39..7f59592 100644 --- a/js/dataflow/visualization/dataflow-visualization.js +++ b/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 diff --git a/js/ui/interaction-manager.js b/js/ui/interaction-manager.js index ffe7f05..eaa0561 100644 --- a/js/ui/interaction-manager.js +++ b/js/ui/interaction-manager.js @@ -454,6 +454,7 @@ var extobject = { core.dataflowManager.clearNodeSelection(); core.viewManager.hideColorpickers(); $("input").blur(); + this.contextmenuLock = false; } },