Merge branch 'feature/flux' into feature/fluxUp

# Conflicts:
#	resources/lib/functions/D3Extention.js
#	resources/lib/functions/GraphLink.js
#	resources/lib/functions/GraphMapping.js
#	resources/lib/functions/GraphNetwork.js
#	resources/lib/functions/GraphNode.js
#	resources/lib/functions/GraphStyleEdition.js
#	resources/lib/functions/GraphUtils.js
#	resources/lib/model/NetworkData.js
#	resources/lib/model/NodeData.js

app/view/form/SelectConditionType.js

@@ -14,6 +14,7 @@ Ext.define('metExploreViz.view.form.SelectConditionType', {
             {"name":"Continuous"},
             {"name":"Discrete"},
             {"name":"Flux"},
+            {"name":"Compare flux"},
             {"name":"Suggestion"}
         ]
     },

app/view/form/selectConditionForm/SelectConditionFormController.js

@@ -60,7 +60,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 
 		view.lookupReference('selectConditionType').on({
 			change : function(that, newVal){
-				if(newVal=="Flux"){
+				if(newVal=="Compare flux" || newVal=="Flux" ){
 					view.lookupReference('opacity').setHidden(false);  
 					view.lookupReference('valueonarrow').setHidden(false);
                     view.lookupReference('regroupValuesIntoClass').setHidden(false);
@@ -108,7 +108,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 		view.lookupReference('selectCondition').on({
 			change : function(that, newVal, old){
 				var type = view.lookupReference('selectConditionType').lastValue;
-				if(type!=="Flux"){
+				if(type!=="Compare flux"){
 					if(old)
 					{
 						var i = newVal.indexOf(old[0]);
@@ -217,7 +217,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 				        }
 				    }
                     var container;
-					if(session.getMappingDataType()==="Flux"|| Array.isArray(session.isMapped()))
+					if(session.getMappingDataType()==="Compare flux"|| Array.isArray(session.isMapped()))
 						container = Ext.getCmp('panel'+session.isMapped()[0].replace(me.regexpPanel, ""));
 					else
                         container = Ext.getCmp('panel'+session.isMapped().replace(me.regexpPanel, ""));
@@ -299,8 +299,8 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 
            // Remove mapping caption
 			var oldMapping = session.isMapped();
-
-			this.removeGraphMapping(oldMapping);
+			if(oldMapping!=="false" && oldMapping)
+				this.removeGraphMapping(oldMapping);
 
 			if(session.getMappingDataType()==="Continuous"){
 				var colorStore = session.getColorMappingsSet();
@@ -311,7 +311,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 		        }
 		    }
             var container;
-			if(session.getMappingDataType()==="Flux"|| Array.isArray(session.isMapped()))
+			if(session.getMappingDataType()==="Compare flux"|| Array.isArray(session.isMapped()))
 				container = Ext.getCmp('panel'+session.isMapped()[0].replace(me.regexpPanel, ""));
 			else
 				container = Ext.getCmp('panel'+session.isMapped().replace(me.regexpPanel, ""));
@@ -400,7 +400,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
                 this.removeGraphMapping(oldMapping);
                 colorStore = session.getColorMappingsSet();
 
-                if(type==="flux"|| Array.isArray(session.isMapped()))
+                if(type==="Compare flux"|| Array.isArray(session.isMapped()))
                     container = Ext.getCmp('panel'+session.isMapped()[0].replace(me.regexpPanel, ""));
                 else
                     container = Ext.getCmp('panel'+session.isMapped().replace(me.regexpPanel, ""));
@@ -476,6 +476,10 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
             session.setMappingDataType(dataType);
         }
 
+        if(dataType==="Compare flux"){
+            metExploreD3.GraphMapping.graphMappingCompareFlux(mappingName, conditionName, fluxType, undefined, undefined, Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+            session.setMappingDataType(dataType);
+        }
         if(dataType==="Flux"){
             metExploreD3.GraphMapping.graphMappingFlux(mappingName, conditionName, fluxType, undefined, undefined, Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
             session.setMappingDataType(dataType);
@@ -517,7 +521,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 		}
 
         var cond;
-        if(type==="flux" || Array.isArray(selectedCondition))
+        if(type==="Compare flux" || Array.isArray(selectedCondition))
 			cond = selectedCondition[0];
 		else
 			cond = selectedCondition;
@@ -537,7 +541,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 						console.log(color);
 						var colorName = color.getName();
 			    	var value = colorName;
-			    	if(type==="flux")
+			    	if(type==="Compare flux")
 			    		value = selectedCondition[i];
 			    	i++;
 
@@ -746,15 +750,28 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
 									}
 								}
 								else {
-									var fluxType;
-									if (selectedCondition.length === 1) {
-										fluxType = 'Unique';
-										metExploreD3.GraphMapping.graphMappingFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(color).getValue(), undefined, Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+									if(type === "flux"){
+
+                                        if (networkVizSession.getColorMappingsSet()[1]) {
+                                            metExploreD3.GraphMapping.graphMappingFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(maxValue).getValue(), networkVizSession.getColorMappingById(minValue).getValue(), Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+                                        }
+                                        else {
+                                            metExploreD3.GraphMapping.graphMappingFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(maxValue).getValue(), networkVizSession.getColorMappingById(minValue).getValue(), Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+                                        }
 									}
-									else {
-										fluxType = 'Compare';
-										metExploreD3.GraphMapping.graphMappingFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(maxValue).getValue(), networkVizSession.getColorMappingById(minValue).getValue(), Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+									else
+									{
+                                        var fluxType;
+                                        if (selectedCondition.length === 1) {
+                                            fluxType = 'Unique';
+                                            metExploreD3.GraphMapping.graphMappingCompareFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(color).getValue(), undefined, Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+                                        }
+                                        else {
+                                            fluxType = 'Compare';
+                                            metExploreD3.GraphMapping.graphMappingCompareFlux(mapp, selectedCondition, fluxType, networkVizSession.getColorMappingById(maxValue).getValue(), networkVizSession.getColorMappingById(minValue).getValue(), Ext.getCmp("opacityCheck").checked, Ext.getCmp("valueonarrowCheck").checked, Ext.getCmp('regroupValuesIntoClassCheck').checked);
+                                        }
 									}
+
 								}
 							}
 						}

app/view/panel/editModePanel/EditModePanelController.js

@@ -24,9 +24,9 @@ Ext.define('metExploreViz.view.panel.editModePanel.EditModePanelController', {
             click : function()
             {
                 var curveBundling = view.lookupReference('EdgeBundling').getValue();
-                var flux = _metExploreViz.getSessionById('viz').getMappingDataType()=="Flux";
+                var flux = _metExploreViz.getSessionById('viz').getMappingDataType()=="Compare flux";
                 if (flux){
-                    metExploreD3.displayWarning("Can't draw curves", 'The edges bundling option is unavailable with flux visualisation');
+                    metExploreD3.displayWarning("Can't draw curves", 'The edges bundling option is unavailable with flux comparison visualisation');
                 }
                 else if (curveBundling == true) {
                     metExploreD3.GraphStyleEdition.curvedPath = true;

resources/lib/functions/D3Extention.js

@@ -86,5 +86,26 @@ d3.selection.prototype.addNodeText = function(style) {
 		.style("y",function(node) { if (node.labelFont) if (node.labelFont.fontY) return node.labelFont.fontY; })
 		.style("transform",function(node) { if (node.labelFont) if (node.labelFont.fontTransform) return node.labelFont.fontTransform; });
 
+        this.filter(function(d){ return d.getBiologicalType()==="reaction"; })
+			.append("svg:text")
+            .each(function(d) {
+                var el = d3.select(this);
+                var name = "";
+                el.text('');
+				var nameDOMFormat = $("<div/>").html(name).text();
+				var tspan = el.append('tspan').text(nameDOMFormat);
+				tspan.attr('x', 0).attr('dy', '10');
+            })
+            .style("font-size", '12px')
+            .attr("class", "fluxlabel")
+            .attr("id", "flux")
+            .attr("transform", "translate(10, -10)")
+            .classed('hide', true)
+            .style("paint-order", "stroke")
+            .style("fill", "black")
+            .style("stroke", "white")
+            .style("stroke-opacity", "0.7")
+            .attr("dy", ".4em")
+            .style("font-weight", 'bold')
+            .style("pointer-events", 'none');
 };
-

resources/lib/functions/GraphNetwork.js

@@ -165,10 +165,10 @@ metExploreD3.GraphNetwork = {
             function(panelLinked, sessionLinked) {
                 var scale = metExploreD3.getScaleById(panelLinked);
                 var session = _metExploreViz.getSessionById(panelLinked);
+
                 // if(d3EventScale<0.3) d3.select("#"+panelLinked).select("#D3viz").select("#graphComponent").selectAll('text').classed("hide", true);
                 // else d3.select("#"+panelLinked).select("#D3viz").select("#graphComponent").selectAll('text').classed("hide", false);
 
-
                 if(d3EventSourceEvent !==null)
                     if(d3EventSourceEvent.type==='wheel')
                         session.setResizable(false);
@@ -1726,6 +1726,7 @@ metExploreD3.GraphNetwork = {
         var session = _metExploreViz.getSessionById(panel);
         var networkData = session.getD3Data();
         networkData.addLink(identifier,source,target,interaction,reversible);
+
     },
 
     /*******************************************
@@ -2643,6 +2644,7 @@ metExploreD3.GraphNetwork = {
         metExploreD3.GraphNetwork.initCentroids(panel);
     },
 
+
     /*******************************************
      * Duplicate side compounds which is selected
      * @param {} panel : The panel where the SC must be duplicated
@@ -2760,6 +2762,7 @@ metExploreD3.GraphNetwork = {
         var myMask = metExploreD3.createLoadMask("Duplicate in progress...", panel);
         if(myMask!= undefined){
 
+
             metExploreD3.showMask(myMask);
 
 
@@ -3063,8 +3066,9 @@ metExploreD3.GraphNetwork = {
         var linkStyle = metExploreD3.getLinkStyle();
 
         metExploreD3.GraphLink.refreshDataLink(panelLinked, sessionLinked);
-        metExploreD3.GraphLink.refreshLink(panelLinked, linkStyle);
+        metExploreD3.GraphLink.fluxesOnLink(panel);
 
+        metExploreD3.GraphLink.refreshLink(panelLinked, linkStyle);
         var s_GeneralStyle = _metExploreViz.getGeneralStyle();
 
 

resources/lib/functions/GraphNode.js

@@ -1031,6 +1031,7 @@ metExploreD3.GraphNode = {
      * @param {} selectedVal : The value of search field text
      */
     searchNode: function (selectedVal) {
+
         var mask = metExploreD3.createLoadMask("Search nodes", "viz");
         metExploreD3.showMask(mask);
         //find the node
@@ -1906,6 +1907,7 @@ metExploreD3.GraphNode = {
                     });
             }
             _metExploreViz.setDataFromWebSite(JSON.stringify(network));
+
         }
 
     },
@@ -2192,6 +2194,7 @@ metExploreD3.GraphNode = {
                             return d3.select(this).style("stroke") !== "rgb(0, 0, 255)";
                         })
                         .style("stroke", "green")
+						.filter(function (t) { return !metExploreD3.GraphStyleEdition.editMode })
                         .style("stroke-width", "1.5");
 
                     links.filter(function (link) {
@@ -2206,6 +2209,7 @@ metExploreD3.GraphNode = {
                             return d3.select(this).style("stroke") !== "rgb(0, 0, 255)";
                         })
                         .style("stroke", "red")
+                        .filter(function (t) { return !metExploreD3.GraphStyleEdition.editMode })
                         .style("stroke-width", "1.5");
                 }
                 else {
@@ -2220,6 +2224,7 @@ metExploreD3.GraphNode = {
                             return d3.select(this).style("stroke") !== "rgb(0, 0, 255)";
                         })
                         .style("stroke", "red")
+                        .filter(function (t) { return !metExploreD3.GraphStyleEdition.editMode })
                         .style("stroke-width", "1.5");
 
                     links.filter(function (link) {
@@ -2233,6 +2238,7 @@ metExploreD3.GraphNode = {
                             return d3.select(this).style("stroke") !== "rgb(0, 0, 255)";
                         })
                         .style("stroke", "green")
+                        .filter(function (t) { return !metExploreD3.GraphStyleEdition.editMode })
                         .style("stroke-width", "1.5");
                 }
             })
@@ -2391,7 +2397,6 @@ metExploreD3.GraphNode = {
                         this.parentNode.insertBefore(this, first);
                     });
 
-
                 if (d.getBiologicalType() == "reaction") {
                     d3.select(this).selectAll("rect").selectAll(".reaction, .fontSelected").transition()
                         .duration(750)

resources/lib/functions/GraphStyleEdition.js

@@ -179,6 +179,7 @@ metExploreD3.GraphStyleEdition = {
                             } else {
                                 theD3Node.attr("transform", "translate(" + newX + ", " + newY + ")");
                             }
+
                         }
 
                         theD3Node.attr("x", newX);
@@ -474,6 +475,42 @@ metExploreD3.GraphStyleEdition = {
             .attr("opacity", labelOpacity);
     },
 
+    /*******************************************
+     * Apply label style if style data are associated to the node
+     * @param {Object} node : The node whose label will be modified
+     */
+    setStartingStyle : function (node, panel) {
+        if (node.labelFont) {
+            var selection = d3.select("#"+panel).select("#D3viz").select("#graphComponent")
+                .selectAll("g.node")
+                .filter(function (d) {
+                    return d.getDbIdentifier() == node.getDbIdentifier();
+                })
+                .select("text");
+            if (node.labelFont.font) { selection.style("font-family", node.labelFont.font); }
+            if (node.labelFont.fontSize) { selection.style("font-size", node.labelFont.fontSize); }
+            if (node.labelFont.fontBold) { selection.style("font-weight", node.labelFont.fontBold); }
+            if (node.labelFont.fontItalic) { selection.style("font-style", node.labelFont.fontItalic); }
+            if (node.labelFont.fontUnderline) { selection.style("text-decoration-line", node.labelFont.fontUnderline); }
+            if (node.labelFont.fontOpacity) { selection.attr("opacity", node.labelFont.fontOpacity); }
+            if (node.labelFont.fontX) { selection.attr("x", node.labelFont.fontX); }
+            if (node.labelFont.fontY) { selection.attr("y", node.labelFont.fontY); }
+            if (node.labelFont.fontTransform) { selection.attr("transform", node.labelFont.fontTransform); }
+        }
+
+        if (node.labelFluxPosition) {
+            var selection = d3.select("#"+panel).select("#D3viz").select("#graphComponent")
+                .selectAll("g.node")
+                .filter(function (d) {
+                    return d.getDbIdentifier() == node.getDbIdentifier();
+                })
+                .select("text.fluxlabel");
+            if (node.labelFluxPosition.x) { selection.attr("x", node.labelFluxPosition.x); }
+            if (node.labelFluxPosition.y) { selection.attr("y", node.labelFluxPosition.y); }
+            if (node.labelFluxPosition.transform) { selection.attr("transform", node.labelFluxPosition.transform); }
+        }
+    },
+
     /*******************************************
      * Create an object containing the label style data associated to a node
      * @param {Object} node : The node whose label syle data will be put in the object
@@ -500,6 +537,25 @@ metExploreD3.GraphStyleEdition = {
         return labelStyle;
     },
 
+    /*******************************************
+     * Create an object containing the label style data associated to a node
+     * @param {Object} node : The node whose label syle data will be put in the object
+     */
+    createLabelFluxStyleObject : function (node, panel) {
+        var nodeLabel = d3.select("#"+panel).select("#D3viz").select("#graphComponent")
+            .selectAll("g.node")
+            .filter(function(d){return d.getDbIdentifier()==node.getDbIdentifier();})
+            .select("text.fluxlabel");
+        if(nodeLabel.length>0 && nodeLabel[0][0]!==null){
+            var labelFluxStyle = {
+                x : nodeLabel.attr("x"),
+                y : nodeLabel.attr("y"),
+                transform : nodeLabel.attr("transform")
+            };
+        }
+        return labelFluxStyle;
+    },
+
     /*******************************************
      * Create an object containing the image position and dimension data associated to a node
      * @param {Object} node : The node whose image position and dimension data will be put in the object

resources/lib/functions/GraphUtils.js

@@ -1501,7 +1501,9 @@ clone.setAttribute("version", "1.1");
 
 						if(node.getLabelFont()!=undefined)
                         	networkJSON+=","+"\"labelFont\":"+JSON.stringify(metExploreD3.GraphStyleEdition.createLabelStyleObject(node, key));
-                        
+
+				    	networkJSON+=","+"\"labelFluxPosition\":"+JSON.stringify(metExploreD3.GraphStyleEdition.createLabelFluxStyleObject(node, key));
+
                         var imagePosition = metExploreD3.GraphStyleEdition.createImageStyleObject(node, key);
                         if (imagePosition != undefined) {
                             networkJSON += ","+"\"imagePosition\":" + JSON.stringify(imagePosition);

resources/lib/model/NetworkData.js

@@ -361,7 +361,8 @@ NetworkData.prototype = {
             alias, 
             label,
             labelFont,
-            hidden
+            hidden,
+            labelFluxPosition
         ){
         if(this.nodes == undefined)
             this.nodes = [];
@@ -388,7 +389,8 @@ NetworkData.prototype = {
             alias, 
             label,
             labelFont,
-            hidden);
+            hidden,
+            labelFluxPosition)
         //console.log('ec '+ec);
         //console.log('ec '+object.getEC());
         this.nodes.push(object);
@@ -485,8 +487,9 @@ NetworkData.prototype = {
                     node.alias,
                     node.label,
                     node.labelFont,
-                    node.hidden
-                    );
+                    node.hidden,
+                    node.labelFluxPosition
+                );
 
             }
             else

resources/lib/model/NodeData.js

@@ -24,7 +24,8 @@ var NodeData = function(
         alias, 
         label,
         labelFont,
-        hidden
+        hidden,
+        labelFluxPosition
     ) {
         this.name=name;
         this.dbIdentifier = dbIdentifier ;
@@ -63,6 +64,9 @@ var NodeData = function(
         this.hidden = hidden;
         if(hidden==undefined)
             this.hidden=false;
+
+        if(labelFluxPosition==undefined)
+            this.labelFluxPosition = labelFluxPosition;
 };