Commit 2ef02e31 authored by Maxime Chazalviel's avatar Maxime Chazalviel

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
parents 77ea1733 d8b87724
......@@ -14,6 +14,7 @@ Ext.define('metExploreViz.view.form.SelectConditionType', {
{"name":"Continuous"},
{"name":"Discrete"},
{"name":"Flux"},
{"name":"Compare flux"},
{"name":"Suggestion"}
]
},
......
......@@ -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);
}
}
}
}
}
......
......@@ -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;
......
......@@ -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');
};
This diff is collapsed.
This diff is collapsed.
......@@ -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();
......
......@@ -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)
......
......@@ -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
......
......@@ -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);
......
......@@ -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
......
......@@ -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;
};
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment