Commit 12a3e909 authored by maxchaza's avatar maxchaza

Allows pathway enrichment mapping

parent f972bbbc
......@@ -63,6 +63,7 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMappingCon
metExploreD3.GraphMapping.mapNodeData(mapping, lines);
metExploreD3.fireEventArg('buttonMap', "jsonmapping", mapping);
metExploreD3.fireEventArg('selectMapping', "jsonmapping", mapping);
}
else
{
......@@ -85,12 +86,16 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMappingCon
var newConditions = [];
if(conditions[0]!==undefined){
mapping.getConditions().forEach(function (condition) {
newConditions.push(mapping.getName()+"_"+condition);
newConditions.push(mapping.getName()+" / "+condition);
});
}
else
newConditions.push(mapping.getName());
newConditions.forEach(function (value) { conditionStore.add({name: value, type: 'int'}); });
newConditions
.filter(function(cond){
return !(cond.includes("PathwayEnrichment") || cond.includes("PathwayCoverage"))
})
.forEach(function (value) { conditionStore.add({name: value, type: 'int'}); });
}
});
......@@ -9,6 +9,7 @@ Ext.define('metExploreViz.view.form.captionForm.CaptionForm', {
"metExploreViz.view.form.selectComponent.SelectComponent",
"metExploreViz.view.form.ComponentCaptionForm",
"metExploreViz.view.form.captionForm.CaptionFormController",
"metExploreViz.view.form.selectMapping.SelectMapping",
"metExploreViz.view.form.captionForm.CaptionFormModel"
],
controller: "form-captionForm-captionForm",
......
......@@ -220,6 +220,42 @@ Ext.define('metExploreViz.view.form.captionForm.CaptionFormController', {
if(view.getTitle()=="Pathways"){
var mappingPanel = Ext.create('Ext.panel.Panel', {
border: false,
width: '100%',
bodyBorder: false,
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
margin: "15 15 5 15",
xtype: 'label',
html: 'Select mapping to map pathway enrichment on pathway nodes :'
},
{
margin: '5 10 10 10',
xtype: "selectMapping",
id: 'selectMapping',
reference: 'panelMappingPathways'
}
]
});
mappingPanel.lookupReference('panelMappingPathways')
captionForm.add(mappingPanel);
var line = Ext.create('Ext.Component', {
hidden: false,
autoEl: {
tag: 'hr'
}
});
captionForm.add(line);
// Create checkbox to display convex hull around each components
var highlightLinkCheckbox = Ext.create('Ext.form.field.Checkbox', {
tooltip: 'Display convex hull around each ' + view.getTitle(),
......@@ -250,15 +286,6 @@ Ext.define('metExploreViz.view.form.captionForm.CaptionFormController', {
// Add component caption to captionForm panel
if (captionForm != undefined) {
captionForm.add(newConditionPanel);
// Create checkbox to display convex hull around each components
var line = Ext.create('Ext.Component', {
hidden: false,
autoEl: {
tag: 'hr'
}
});
captionForm.add(line);
// Create checkbox to display convex hull around each components
var selectAllButton = Ext.create('Ext.button.Button', {
tooltip: 'selectAllButton',
......
......@@ -15,7 +15,8 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMapping', {
type: "form-selectMapping-selectMapping"
},
store: {
fields: ['name']
fields: ['name'],
data: [{name:'None'}]
},
listeners: {
render: function(c) {
......
......@@ -19,62 +19,292 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMappingController', {
jsonmapping : function(mappingJSON){
me.initMapping(mappingJSON);
},
// When this event is fire it remove mapping from the combobox
removemapping : function(mapping){
me.removeMapping(mapping);
},
change : function(that, newMapping, old){
var component = Ext.getCmp("selectConditionForm");
if(component){
_metExploreViz.getSessionById('viz').setActiveMapping(newMapping);
component.fireEvent("closeMapping", newMapping);
if (_metExploreViz.getMappingsLength()!==0) {
var theMapping = _metExploreViz.getMappingByName(newMapping);
if(theMapping)
{
if(theMapping){
me.fillComboSelectCondition(that, theMapping, old);
}
}
}
}
},
collapse : function(field) {
if (_metExploreViz.getMappingsLength() !== 0) {
var session = _metExploreViz.getSessionById('viz');
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node")
.filter(function (n) { return n.getBiologicalType()==="pathway";})
.each(function (d) {
var thePathwayElement = d3.select(this);
thePathwayElement.select(".mapped-segment").classed("hide", true);
thePathwayElement.select(".notmapped-segment").classed("hide", true);
var pathwayModel = session.getD3Data().getPathwayByName(d.getName());
var pathwaySize = 20;
thePathwayElement.setNodeForm(
pathwaySize*3,
pathwaySize*3,
pathwaySize*3,
pathwaySize*3,
pathwayModel.getColor(),
pathwaySize*3/5
);
// Lock Image definition
var box = thePathwayElement.select("locker")
.attr("width", pathwaySize * 3)
.attr("height", pathwaySize * 3)
.attr("preserveAspectRatio", "xMinYMin")
.attr("y", -pathwaySize * 3)
.attr("x", -pathwaySize * 3);
box
.select("backgroundlocker")
.attr("d", function (node) {
var pathBack = "M" + pathwaySize * 3 + "," + pathwaySize * 3 +
" L0," + pathwaySize * 3 +
" L0," + pathwaySize * 3 / 2 * 2 +
" A" + pathwaySize * 3 / 2 * 2 + "," + pathwaySize * 3 / 2 * 2 + ",0 0 1 " + pathwaySize * 3 / 2 * 2 + ",0" +
" L" + pathwaySize * 3 + ",0";
return pathBack;
})
.attr("opacity", "0.20")
.attr("fill", "#000000");
box
.select("iconlocker")
.attr("y", pathwaySize * 3 / 2 / 4 - (pathwaySize * 3 - pathwaySize * 3 * 2) / 8)
.attr("x", pathwaySize * 3 / 2 / 4 - (pathwaySize * 3 - pathwaySize * 3 * 2) / 8)
.attr("width", "40%")
.attr("height", "40%");
});
if(newMapping!=="None"){
var myMask = metExploreD3.createLoadMask("Mapping in progress...", 'graphPanel');
if(myMask!= undefined){
metExploreD3.showMask(myMask);
setTimeout(
function() {
try {
var nbMapped=0;
var session = _metExploreViz.getSessionById('viz');
var force = session.getForce();
force.stop();
d3.select("#viz").select("#D3viz").select("#graphComponent").selectAll("g.node")
.filter(function (n) { return n.getBiologicalType()==="pathway";})
// .filter(function (d) {
// if (this.getAttribute("mapped") == undefined || this.getAttribute("mapped") == false || this.getAttribute("mapped") == "false") return true;
// else return false;
// })
.each(function (d) {
var thePathwayElement = d3.select(this);
thePathwayElement
.select("text")
.remove();
metExploreD3.GraphNode.addText(d, "viz");
var exposant = 0;
if (d.getMappingDataByNameAndCond(newMapping, "PathwayEnrichment") != null) {
nbMapped++;
d3.select(this)
.attr("mapped", "true");
var mapData = d.getMappingDataByNameAndCond(newMapping, "PathwayEnrichment");
if (mapData.getMapValue() < 0.001) {
exposant = 1.2;
} else {
if (mapData.getMapValue() < 0.01) {
exposant = 0.9;
} else {
if (mapData.getMapValue() < 0.05) {
exposant = 0.6;
}
}
}
session.addMappedNode(d.getId());
}
var pathwaySize = 20 + 100 * exposant;
//interligne
d3.select(this)
.select("text")
.style("stroke-width", 10)
.style("font-weight", 'bold')
.style("font-size", pathwaySize - 40 + "px")
.each(function (text) {
d3.select(this).selectAll("tspan")
.each(function (tspan, i) {
if (i > 0)
d3.select(this).attr("dy", pathwaySize - 40);
});
});
var width = pathwaySize * 3;
var height = pathwaySize * 3;
var rx = pathwaySize * 3;
var ry = pathwaySize * 3;
var strokewidth = pathwaySize * 3 / 5;
thePathwayElement.select("rect.pathway")
.attr("width", width)
.attr("height", height)
.attr("rx", rx)
.attr("ry", ry)
.attr("transform", "translate(-" + width / 2 + ",-"
+ height / 2
+ ")")
.style("stroke-width", strokewidth);
thePathwayElement.select("rect.fontSelected")
.attr("width", width)
.attr("height", height)
.attr("rx", rx)
.attr("ry", ry)
.attr("transform", "translate(-" + width / 2 + ",-" + height / 2 + ")");
// Lock Image definition
var box = thePathwayElement.select(".locker").attr(
"viewBox",
function (d) {
+" " + pathwaySize * 3;
}
)
.attr("width", pathwaySize * 3)
.attr("height", pathwaySize * 3)
.attr("preserveAspectRatio", "xMinYMin")
.attr("y", -pathwaySize * 3)
.attr("x", -pathwaySize * 3);
box
.select(".backgroundlocker")
.attr("d", function (node) {
var pathBack = "M" + pathwaySize * 3 + "," + pathwaySize * 3 +
" L0," + pathwaySize * 3 +
" L0," + pathwaySize * 3 / 2 * 2 +
" A" + pathwaySize * 3 / 2 * 2 + "," + pathwaySize * 3 / 2 * 2 + ",0 0 1 " + pathwaySize * 3 / 2 * 2 + ",0" +
" L" + pathwaySize * 3 + ",0";
return pathBack;
})
.attr("opacity", "0.20")
.attr("fill", "#000000");
box
.select(".iconlocker")
.attr("y", pathwaySize * 3 / 2 / 4 - (pathwaySize * 3 - pathwaySize * 3 * 2) / 8)
.attr("x", pathwaySize * 3 / 2 / 4 - (pathwaySize * 3 - pathwaySize * 3 * 2) / 8)
.attr("width", "40%")
.attr("height", "40%");
var theMapping = _metExploreViz.getMappingByName(field.getValue());
if (theMapping)
metExploreD3.GraphMapping.mapNodes(theMapping.getName());
if (d.getMappingDataByNameAndCond(newMapping, "PathwayCoverage") !== null) {
var thePathwayElement = d3.select(this);
var mapped = thePathwayElement.select(".mapped-segment");
var notmapped = thePathwayElement.select(".notmapped-segment");
thePathwayElement.select(".mapped-segment").classed("hide", false);
thePathwayElement.select(".notmapped-segment").classed("hide", false);
var mapData = d.getMappingDataByNameAndCond(newMapping, "PathwayCoverage");
var coverage = mapData.getMapValue();
var radius = (width - strokewidth) / 2;
var halfRadius = radius / 2;
var halfCircumference = 2 * Math.PI * halfRadius;
// 0deg drawn up to this point
var degreesDrawn = -90;
mapped
.attr('r', halfRadius)
.attr('stroke-width', radius)
.attr('stroke', "#FF7560")
.attr('stroke-dasharray',
halfCircumference * coverage
+ ' '
+ halfCircumference)
.style('transform', 'rotate(' + degreesDrawn + 'deg)');
// 119.988deg drawn up to this point
degreesDrawn += 360 * coverage;
notmapped
.attr('fill', 'transparent')
.attr('r', halfRadius)
.attr('stroke-width', radius)
.attr('stroke', '#144778')
.attr('stroke-dasharray',
halfCircumference * (1.0 - coverage)
+ ' '
+ halfCircumference)
.style('transform', 'rotate(' + degreesDrawn + 'deg)');
}
});
metExploreD3.hideMask(myMask);
if(nbMapped===0){
metExploreD3.displayMessage("Warning", 'No mapped node on network.');
metExploreD3.fireEvent('selectMappingVisu', 'disableMapping');
}
var anim = session.isAnimated("viz");
if (anim == 'true') {
var session = _metExploreViz.getSessionById('viz');
var force = session.getForce();
if (metExploreD3.GraphNetwork.animation) {
force.alpha(1).restart();
}
}
}
catch (e) {
e.functionUsed="mapNodes";
metExploreD3.hideMask(myMask);
var anim=session.isAnimated("viz");
if (anim=='true') {
var session = _metExploreViz.getSessionById('viz');
var force = session.getForce();
if (metExploreD3.GraphNetwork.animation) {
force.alpha(1).restart();
}
}
throw e;
}
}, 1
);
}
}
},
disableMapping : function(){
var comboCond = Ext.getCmp('selectCondition');
var selectConditionType = Ext.getCmp('selectConditionType');
comboCond.clearValue();
comboCond.setDisabled(true);
selectConditionType.setDisabled(true);
},
scope:me
});
},
initMapping:function(mappingJSON){
var me = this,
view = me.getView();
if(_metExploreViz.getMappingsLength()!==0 ){
var component = Ext.getCmp('comparisonSidePanel');
if(component){
if(component.isHidden())
component.setHidden(false);
component.expand();
var comboMapping = Ext.getCmp('selectMappingVisu');
comboMapping.setValue(mappingJSON.getName());
var comboMapping = view;
var store = comboMapping.getStore();
//take an array to store the object that we will get from the ajax response
var records = [];
// comboMapping.bindStore(store);
records.push(new Ext.data.Record({
name: mappingJSON.getName()
}));
......@@ -84,92 +314,11 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMappingController', {
name: mappingName.getData().name
}));
});
_metExploreViz.getSessionById('viz').setActiveMapping(mappingJSON.getName());
store.loadData(records, false);
if(store.getCount()===1)
comboMapping.setDisabled(false);
}
}
},
/**
* Remove mapping from the combobox
* @param mapping : json
*/
removeMapping:function(mapping){
var component = Ext.getCmp('comparisonSidePanel');
if(component!== undefined){
if(component.isHidden())
component.setHidden(false);
component.expand();
var comboMapping = Ext.getCmp('selectMappingVisu');
var store = comboMapping.getStore();
//take an array to store the object that we will get from the ajax response
var records = [];
store.each(function(mappingName){
if(mappingName.getData().name!==mapping.getName()){
records.push(new Ext.data.Record({
name: mappingName.getData().name
}));
}
});
store.loadData(records, false);
comboMapping.clearValue();
if(store.getCount()===0)
comboMapping.setDisabled(true);
}
},
/*******************************************
* Affect selected mapping conditions to the comboBox: SelectCondition
* @param that
* @param newMapping : id of new mappin
*/
fillComboSelectCondition : function(that, newMapping) {
_metExploreViz.getSessionById('viz').setMapped("false");
var conditions = newMapping.getConditions().filter(function (c) { return c!=="PathwayCoverage" && c!=="PathwayEnrichment" });
var comboCond = Ext.getCmp('selectCondition');
var storeCond = comboCond.getStore();
//take an array to store the object that we will get from the ajax response
var record = [];
for (var i = 0 ; i<conditions.length ; i++) {
record.push({
name : conditions[i]
});
}
storeCond.loadData(record, false);
var nbCond = storeCond.getCount();
if(nbCond>=1)
comboCond.setDisabled(false);
comboCond.setValue(storeCond[0]);
var selectConditionType = Ext.getCmp('selectConditionType');
if(selectCondition && selectConditionType){
if(nbCond<1 || (nbCond===1 && conditions[0]==="undefined")){
comboCond.clearValue();
comboCond.setDisabled(true);
selectConditionType.setDisabled(true);
}
else
{
selectConditionType.setValue(selectConditionType.getStore().first());
//comboCond.setValue(storeCond.first());
comboCond.setDisabled(false);
selectConditionType.setDisabled(false);
}
}
}
}
});
\ No newline at end of file
......@@ -909,8 +909,8 @@ metExploreD3.GraphMapping = {
* @param {} conditionName : Condition choosed by the user
*/
graphMappingDiscreteData : function(condition, aStyleFormParent, func) {
var mappingName = condition.split("_")[0];
var conditionName = condition.split("_")[1];
var mappingName = condition.split(" / ")[0];
var conditionName = condition.split(" / ")[1];
metExploreD3.onloadMapping(mappingName, function(){
var mapping = _metExploreViz.getMappingByName(mappingName);
......@@ -1080,8 +1080,8 @@ metExploreD3.GraphMapping = {
* @param {} conditionName : Condition choosed by the user
*/
graphMappingAsSelectionData : function(condition, aStyleFormParent, func) {
var mappingName = condition.split("_")[0];
var conditionName = condition.split("_")[1];
var mappingName = condition.split(" / ")[0];
var conditionName = condition.split(" / ")[1];
metExploreD3.onloadMapping(mappingName, function(){
var mapping = _metExploreViz.getMappingByName(mappingName);
......@@ -1332,8 +1332,8 @@ metExploreD3.GraphMapping = {
* @param {} conditionName : Condition choosed by the user
*/
graphMappingContinuousData : function(condition, aStyleFormParent, func) {
var mappingName = condition.split("_")[0];
var conditionName = condition.split("_")[1];
var mappingName = condition.split(" / ")[0];
var conditionName = condition.split(" / ")[1];
metExploreD3.onloadMapping(mappingName, function(){
var mapping = _metExploreViz.getMappingByName(mappingName);
var myMask = metExploreD3.createLoadMask("Mapping in progress...", 'graphPanel');
......@@ -2177,6 +2177,8 @@ metExploreD3.GraphMapping = {
metExploreD3.fireEventArg('buttonMap', "jsonmapping", mapping);
metExploreD3.fireEventArg('selectMapping', "jsonmapping", mapping);
var anim = session.isAnimated("viz");
if (anim == 'true') {
var force = session.getForce();
......@@ -2235,7 +2237,9 @@ metExploreD3.GraphMapping = {
metExploreD3.GraphMapping.mapNodeDataFile(mapping, data);
metExploreD3.fireEventArg('buttonMap', "jsonmapping", mapping);
metExploreD3.hideMask(myMask);
metExploreD3.fireEventArg('selectMapping', "jsonmapping", mapping);
metExploreD3.hideMask(myMask);
if (func!=undefined) {func()};
var anim=session.isAnimated("viz");
if (anim=='true') {
......
......@@ -2101,8 +2101,8 @@ metExploreD3.GraphNode = {
this.parentNode.insertBefore(this, last);
this.parentNode.insertBefore(last, this);
var session = _metExploreViz.getSessionById(parent);
var mappingName = session.getActiveMapping();
var combBoxSelectMappingVisu = Ext.getCmp('selectMapping');
var mappingName = combBoxSelectMappingVisu.getValue();
if(node.getMappingDatasLength() > 0 && mappingName !== "")
{
......@@ -2125,7 +2125,7 @@ metExploreD3.GraphNode = {
var tooltipText = d3.select("#"+parent).select('#tooltipPathwaysText');
var covText = "Coverage : "+(mapCov.getMapValue()).toFixed(2);
var covText = "Coverage : "+(mapCov.getMapValue()).toFixed(2)*100 + "%";
var pValText = "p-value BH : "+(mapPE.getMapValue()).toFixed(4);
var nameDOMFormat = $("<div/>").html(covText).text();
......
......@@ -805,6 +805,7 @@ console.log(panel);
_metExploreViz.getMappingsSet().forEach(function(mapping){
metExploreD3.GraphMapping.reloadMapping(mapping);
metExploreD3.fireEventArg('buttonMap', "jsonmapping", mapping);
metExploreD3.fireEventArg('selectMapping', "jsonmapping", mapping);
});
metExploreD3.fireEventArg('buttonRefresh', "reloadMapping", true);
}
......@@ -990,6 +991,7 @@ console.log(panel);
_metExploreViz.getMappingsSet().forEach(function(mapping){
metExploreD3.GraphMapping.reloadMapping(mapping);
metExploreD3.fireEventArg('buttonMap', "jsonmapping", mapping);
metExploreD3.fireEventArg('selectMapping', "jsonmapping", mapping);
});
metExploreD3.fireEventArg('buttonRefresh', "reloadMapping", true);
}
......
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