Skip to content

GitLab

Commit 0b815a7b authored by maxchaza's avatar maxchaza
Browse files

Merge branch 'hotfix/changeAsSelectionMapping'

parents 38b6c77a 4f0d362e
Expand all Hide whitespace changes
Inline Side-by-side
app.json
View file @ 0b815a7b
......@@ -7,7 +7,7 @@
/**
* The version of the application.
*/
"version": "3.0.0",
"version": "3.0.1",
/**
* The relative path to the application's markup file (html, jsp, asp, etc.).
......
app/Application.js
View file @ 0b815a7b
......@@ -9,6 +9,8 @@ Ext.define('metExploreViz.Application', {
name: 'metExploreViz',
stores: [
'metExploreViz.view.form.selectMapping.MappingStore',
'mappingStore',
'metExploreViz.view.form.selectCondition.ConditionStore',
'conditionStore'
......@@ -17,7 +19,7 @@ Ext.define('metExploreViz.Application', {
launch: function () {
Ext.create('metExploreViz.view.form.selectCondition.ConditionStore');
Ext.create('metExploreViz.view.form.selectMapping.MappingStore');
// TODO - Launch the application
},
......
app/view/form/selectCondition/ConditionModel.js
View file @ 0b815a7b
......@@ -7,8 +7,10 @@ Ext.define('metExploreViz.view.form.selectCondition.ConditionModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'name', type: 'string',
name: 'biologicalType', type: 'string',
name: 'name',
type: 'string',
name: 'biologicalType',
type: 'string'
}
]
});
\ No newline at end of file
app/view/form/selectConditionForm/SelectConditionFormController.js
View file @ 0b815a7b
......@@ -587,6 +587,10 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var captions = view.lookupReference('discreteCaptions');
var scaleCaption = view.lookupReference('scaleCaption');
var selectCondition = view.lookupReference('selectCondition');
var selectConditionType = view.lookupReference('selectConditionType');
var dataType = selectConditionType.getValue();
var selectedCondition = selectCondition.getValue();
var networkVizSession = _metExploreViz.getSessionById("viz");
var colorStore;
......@@ -696,8 +700,10 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var mappingName = selectedCondition.split(" / ")[0];
var conditionName = selectedCondition.split(" / ")[1];
metExploreD3.GraphStyleEdition.setCollectionStyleDiscreteMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, color.getName(), color.getValue());
if(dataType==="As selection")
metExploreD3.GraphStyleEdition.setCollectionStyleAsSelectionMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, "Identified", color.getValue())
else
metExploreD3.GraphStyleEdition.setCollectionStyleDiscreteMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, color.getName(), color.getValue());
}
else
......@@ -752,8 +758,10 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var mappingName = selectedCondition.split(" / ")[0];
var conditionName = selectedCondition.split(" / ")[1];
metExploreD3.GraphStyleEdition.setCollectionStyleDiscreteMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, color.getName(), color.getValue());
if(dataType==="As selection")
metExploreD3.GraphStyleEdition.setCollectionStyleAsSelectionMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, "Identified", color.getValue())
else
metExploreD3.GraphStyleEdition.setCollectionStyleDiscreteMapping(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, conditionName, mappingName, color.getName(), color.getValue());
});
},
scope: me
......
app/view/form/selectMapping/MappingModel.js 0 → 100644
View file @ 0b815a7b
/**
* @author MC
* (a)description class to control contion selection panel and to draw mapping in the mapping story
*/
Ext.define('metExploreViz.view.form.selectMapping.MappingModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'name', type: 'string'
}
]
});
\ No newline at end of file
app/view/form/selectMapping/MappingStore.js 0 → 100644
View file @ 0b815a7b
/**
* @author MC
* (a)description class to control contion selection panel and to draw mapping in the mapping story
*/
Ext.define('metExploreViz.view.form.selectMapping.MappingStore', {
extend: 'Ext.data.Store',
alias: 'store.MappingStore',
requires: [
"metExploreViz.view.form.selectMapping.MappingModel"
],
model: 'metExploreViz.view.form.selectMapping.MappingModel',
storeId: 'mappingStore',
data: [{name:'None'}],
listeners: {
add: function(store, records) {
// if(store.count()==1)
}
}
});
\ No newline at end of file
app/view/form/selectMapping/SelectMapping.js
View file @ 0b815a7b
......@@ -8,17 +8,17 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMapping', {
alias: 'widget.selectMapping',
requires: [
"metExploreViz.view.form.selectMapping.SelectMappingController",
"metExploreViz.view.form.selectMapping.MappingStore",
"metExploreViz.view.form.selectMapping.SelectMappingModel"
],
controller: "form-selectMapping-selectMapping",
viewModel: {
type: "form-selectMapping-selectMapping"
},
store: {
fields: ['name'],
data: [{name:'None'}]
},
listeners: {
beforerender: function(c) {
this.setStore(Ext.getStore("mappingStore"));
},
render: function(c) {
new Ext.ToolTip({
target: c.getEl(),
......
app/view/form/selectMapping/SelectMappingController.js
View file @ 0b815a7b
......@@ -19,271 +19,6 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMappingController', {
jsonmapping : function(mappingJSON){
me.initMapping(mappingJSON);
},
change : function(that, newMapping, old){
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%");
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
);
}
}
},
scope:me
});
},
......@@ -293,29 +28,31 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMappingController', {
view = me.getView();
if(_metExploreViz.getMappingsLength()!==0 ){
var component = Ext.getCmp('comparisonSidePanel');
var component = Ext.getCmp('comparisonSidePanel');
if(component){
if(component.isHidden())
component.setHidden(false);
component.expand();
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()
}));
store.each(function(mappingName){
records.push(new Ext.data.Record({
name: mappingName.getData().name
}));
});
store.loadData(records, false);
var store = Ext.getStore("mappingStore");
store.add({name: mappingJSON.getName()});
//
// //take an array to store the object that we will get from the ajax response
// var records = [];
//
// records.push(new Ext.data.Record({
// name: mappingJSON.getName()
// }));
//
// store.each(function(mappingName){
// records.push(new Ext.data.Record({
// name: mappingName.getData().name
// }));
// });
// store.loadData(records, false);
var comboMapping = view;
if(store.getCount()===1)
comboMapping.setDisabled(false);
}
......
app/view/form/selectMappingForExtraction/SelectMappingForExtraction.js 0 → 100644
View file @ 0b815a7b
/**
* @author MC
* (a)description combobox to select condition in mapping
* selectMappingForExtraction
*/
Ext.define('metExploreViz.view.form.selectMappingForExtraction.SelectMappingForExtraction', {
extend: 'Ext.window.Window',
alias: 'widget.selectMappingForExtraction',
requires: [
"metExploreViz.view.form.selectMappingForExtraction.SelectMappingForExtractionController"
],
controller: "form-selectMappingForExtraction-selectMappingForExtraction",
title: 'Continuous color scale mapping editor',
height: "400px",
maxWidth: 600,
minWidth: 600,
x: 100,
y: 100,
maxHeight: 365,
minHeight: 365,
layout:{
type:'vbox',
align:'stretch'
},
items: [
{
margin: "10 10 10 10",
xtype: "selectMapping",
multiSelect: true,
reference: "selectMappingForExtraction"
},
{
xtype: "panel",
reference: "buttonPanel",
layout:{
type:'hbox',
pack : 'end'
},
items:[
{
margin: "5 5 5 5",
xtype: 'button',
reference: 'okButton',
text : 'OK'
},
{
margin: "5 15 5 5",
xtype: 'button',
reference: 'cancelButton',
text : 'Cancel'
}
]
}
]
});
\ No newline at end of file
app/view/form/selectMappingForExtraction/SelectMappingForExtractionController.js 0 → 100644
View file @ 0b815a7b
/**
* @author MC
* (a)description class to control contion selection panel and to draw mapping in the mapping story
*/
Ext.define('metExploreViz.view.form.selectMappingForExtraction.SelectMappingForExtractionController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form-selectMappingForExtraction-selectMappingForExtraction',
/**
* Aplies event linsteners to the view
*/
init:function(){
var me = this,
viewModel = me.getViewModel(),
view = me.getView();
view.on({
show : function(that){
var store = Ext.getStore("mappingStore");
store.filter(function (mapping) {
console.log(mapping.get("name"));
return mapping.get("name")!=="None";
})
},
close : function(that){
var store = Ext.getStore("mappingStore");
store.clearFilter();
}
});
view.lookupReference('okButton').on({
click : function(that){
if(view.lookupReference('selectMappingForExtraction').getValue() && view.lookupReference('selectMappingForExtraction').getValue()!=="None"){
var selectedMappings = view.lookupReference('selectMappingForExtraction').getValue();
var nodesToLinks = _metExploreViz.getSessionById("viz").getD3Data().getNodes()
.filter(function(node){ return node.mappingDatas.length!==0;})
.filter(function (node) {
return node.getMappingDatas()
.filter(map => selectedMappings.includes(map.getMappingName())).length !==0;
})
.map(node => node.getId());
console.log(nodesToLinks);
metExploreD3.GraphFunction.keepOnlySubnetwork(nodesToLinks);
}
view.close();
}
});
view.lookupReference('cancelButton').on({