...
 
Commits (6)
......@@ -7,7 +7,7 @@
/**
* The version of the application.
*/
"version": "3.0.9",
"version": "3.0.10",
/**
* The relative path to the application's markup file (html, jsp, asp, etc.).
......
......@@ -7,7 +7,9 @@
Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form-aStyleForm-aStyleForm',
requires: [
"metExploreViz.view.form.label.Label"
],
/**
* Init function Checks the changes on drawing style
*/
......@@ -502,6 +504,114 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
});
}
if(view.styleType==="string"){
var numberButton = header.lookupReference('numberButton');
var numberButtonBypass = header.lookupReference('numberButtonBypass');
var numberButtonBypassEl = numberButtonBypass.el.dom.querySelector("#textNumberButton");
numberButton.show();
me.replaceText(numberButton.el.dom, view.default);
numberButton.setTooltip(view.default);
numberButton.on({
click: function(){
var viewAStyleForm = view;
// var bioStyleForm = Ext.getCmp(viewAStyleForm.biologicalType+"StyleForm");
// if(bioStyleForm.linkStylesWin===false)
// {
var win = Ext.create("metExploreViz.view.form.label.Label", {
title : "Label for " + viewAStyleForm.title,
height : 20,
aStyleFormParent : viewAStyleForm,
listeners :{
afterrender : function(){
win.lookupReference('okButton').on({
click : function(){
var val = win.lookupReference('selectLabel').getValue();
styleToUse[view.access] = val;
view.default = val;
me.replaceText(numberButton.el.dom, val);
numberButton.setTooltip(val);
var bypass = false;
metExploreD3.GraphStyleEdition.setCollectionLabel(view.target, view.attrType, view.attrName, view.biologicalType, val, bypass);
win.close();
},
scope:me
});
win.lookupReference('cancelButton').on({
click : function(that){
win.close();
},
scope:me
});
}
}
});
win.show();
// bioStyleForm.linkStylesWin=win;
// }
// else
// {
// var el = bioStyleForm.linkStylesWin.getEl();
// el
// .fadeIn({ x: el.getBox().x-10, duration: 10})
// .fadeIn({ x: el.getBox().x, duration: 10})
// .fadeIn({ x: el.getBox().x-10, duration: 10})
// .fadeIn({ x: el.getBox().x, duration: 10})
// .fadeIn({ x: el.getBox().x-10, duration: 10})
// .fadeIn({ x: el.getBox().x, duration: 10})
// }
// me.numberPrompt(numberButton.el.dom, function(text){
// var val = text;
//
// metExploreD3.GraphStyleEdition.setCollectionLabel(view.target, view.attrType, view.attrName, view.biologicalType, val);
// styleToUse[view.access] = val;
// view.default = val;
// });
},
scope : me
});
function setValueWithPrompt(){
me.textPrompt(numberButtonBypass.el.dom, function(text){
var val = text;
var bypass = true;
metExploreD3.GraphStyleEdition.setCollectionLabelBypass(view.target, view.attrType, view.attrName, view.biologicalType, val, bypass);
});
}
numberButtonBypass.on({
click: function(){
setValueWithPrompt();
},
setIcon: function(type){
bypassButton.removeCls('mapMultipleNumbers');
if(type!=="noneIcon") bypassButton.addCls("mapMultipleNumbers");
},
scope : me
});
bypassButton.on({
click: function(target){
target.hide();
numberButtonBypass.show();
setValueWithPrompt();
},
scope : me
});
}
if(view.styleType==="color"){
var colorButton = header.lookupReference('colorButton');
......@@ -556,6 +666,22 @@ Ext.define('metExploreViz.view.form.aStyleForm.AStyleFormController', {
textPrompt : function(target, func){
var me = this;
var view = me.getView();
Ext.Msg.prompt(view.title, 'Enter text :',
function(btn, text){
if (btn == 'ok'){
if(text!="") {
me.replaceText(target, text);
func(text);
}
}
}, this, false);
},
numberPrompt : function(target, func){
var me = this;
var view = me.getView();
......
......@@ -16,12 +16,14 @@ Ext.define('metExploreViz.view.form.allStylesByTypeForm.AllStylesByTypeFormContr
viewModel = me.getViewModel(),
view = me.getView();
view.linkStylesWin = false;
view.store.data.forEach(function (styleBar) {
var myPanel = Ext.create('metExploreViz.view.form.aStyleForm.AStyleForm', {
title: styleBar.title,
access: styleBar.access,
linkedStyles: [],
biologicalType: styleBar.biologicalType,
styleType: styleBar.type,
default: styleBar.default,
......
......@@ -52,6 +52,7 @@ Ext.define('metExploreViz.view.form.allStylesForm.AllStylesFormController', {
.map(function (aStyleForm) {
return {
biologicalType:aStyleForm.biologicalType,
linkedStyles:aStyleForm.linkedStyles,
title:aStyleForm.title,
default : aStyleForm.default,
scaleRange : aStyleForm.scaleRange,
......@@ -91,6 +92,9 @@ Ext.define('metExploreViz.view.form.allStylesForm.AllStylesFormController', {
metExploreD3.GraphStyleEdition.setCollectionStyle(theStyleForm.target, theStyleForm.attrType, theStyleForm.attrName, theStyleForm.biologicalType, scale.default);
}
}
if (scale.linkedStyles){
theStyleForm.linkedStyles=scale.linkedStyles;
}
if (scale.scaleRange){
if(scale.scaleRange!==theStyleForm.scaleRange){
......
/**
* @author MC
* (a)description combobox to select condition in mapping
* label
*/
Ext.define('metExploreViz.view.form.label.Label', {
extend: 'Ext.window.Window',
alias: 'widget.label',
requires: [
"metExploreViz.view.form.label.LabelController"
],
controller: "form-label-label",
height: "200px",
maxWidth: 600,
minWidth: 600,
x: 100,
y: 100,
maxHeight: 200,
minHeight: 200,
layout:{
type:'vbox',
align:'stretch'
},
items: [
{
xtype: "combobox",
reference: "selectLabel",
displayField: 'name',
valueField: 'name',
width: 150,
queryMode: 'local',
multiSelect:false,
editable:false,
emptyText:'-- Select label --',
margin:'5 5 5 5'
},
{
xtype: "panel",
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
/**
* @author MC
* (a)description class to control contion selection panel and to draw mapping in the mapping story
*/
Ext.define('metExploreViz.view.form.label.LabelController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form-label-label',
/**
* Aplies event linsteners to the view
*/
init:function(){
var me = this,
viewModel = me.getViewModel(),
view = me.getView();
view.lookupReference('selectLabel').on({
beforerender: function(c) {
var session = _metExploreViz.getSessionById('viz');
var metabKeys=Object.keys(session.getD3Data().getNodes().filter(n => n.getBiologicalType() === "metabolite")[0]);
view.lookupReference('selectLabel').setStore(metabKeys);
if(metabKeys.length>0) {
view.lookupReference('selectLabel').setValue(view.aStyleFormParent.default);
}
},
scope:me
});
},
updateFocus : function(aStyleForm){
var me = this,
view = me.getView();
var linkedStyles = aStyleForm.linkedStyles;
if(linkedStyles.length>0){
aStyleForm.lookupReference('selectConditionForm').lookupReference('label').addCls('focus');
aStyleForm.lookupReference('selectConditionForm').lookupReference('label').setIconCls('link');
}
else
{
aStyleForm.lookupReference('selectConditionForm').lookupReference('label').setIconCls('unlink');
aStyleForm.lookupReference('selectConditionForm').lookupReference('label').removeCls('focus');
}
},
setLinkedStyles:function(arrayStyles){
var me = this,
view = me.getView();
var oldIncludesNew = view.aStyleFormParent.linkedStyles.every(function(item){ return arrayStyles.includes(item)});
var newIncludesOld = arrayStyles.every(function(item){ return view.aStyleFormParent.linkedStyles.includes(item)});
var removedStylesTitle = view.aStyleFormParent.linkedStyles.filter(function(item){ return !arrayStyles.includes(item)});
if(!(oldIncludesNew && newIncludesOld)){
view.aStyleFormParent.linkedStyles=arrayStyles;
var bioStyleForm = Ext.getCmp(view.aStyleFormParent.biologicalType+"StyleForm");
var partOfAllStyles = bioStyleForm.query("aStyleForm")
.filter(function (aStyleForm) {
return view.aStyleFormParent.linkedStyles.includes(aStyleForm.title);
});
partOfAllStyles.forEach(function(styleForm){
styleForm.expand();
var mappingNameToPropagate = view.aStyleFormParent.lookupReference('selectConditionForm').lookupReference('selectCondition').getValue();
var dataTypeToPropagate = view.aStyleFormParent.lookupReference('selectConditionForm').lookupReference('selectConditionType').getValue();
styleForm.lookupReference('selectConditionForm').lookupReference('selectCondition').setValue(mappingNameToPropagate);
styleForm.lookupReference('selectConditionForm').lookupReference('selectConditionType').setValue(dataTypeToPropagate);
styleForm.linkedStyles.push(view.aStyleFormParent.title);
me.updateFocus(styleForm);
});
var removedStyles = bioStyleForm.query("aStyleForm")
.filter(function (aStyleForm) {
return removedStylesTitle.includes(aStyleForm.title);
});
removedStyles.forEach(function(styleForm){
styleForm.linkedStyles = styleForm.linkedStyles.filter(function (title) {
return view.aStyleFormParent.title !== title
});
console.log(styleForm.linkedStyles);
me.updateFocus(styleForm);
});
me.updateFocus(view.aStyleFormParent);
}
}
});
\ No newline at end of file
/**
* @author MC
* (a)description combobox to select condition in mapping
* linkStyles
*/
Ext.define('metExploreViz.view.form.linkStyles.LinkStyles', {
extend: 'Ext.window.Window',
alias: 'widget.linkStyles',
requires: [
"metExploreViz.view.form.linkStyles.LinkStylesController"
],
controller: "form-linkStyles-linkStyles",
height: "400px",
maxWidth: 600,
minWidth: 600,
x: 100,
y: 100,
maxHeight: 460,
minHeight: 460,
layout:{
type:'vbox',
align:'stretch'
},
items: [
{
xtype: "combobox",
reference: "selectStyles",
displayField: 'name',
valueField: 'name',
width: 150,
queryMode: 'local',
multiSelect:true,
editable:false,
emptyText:'-- Select styles to link --',
margin:'5 5 5 5'
},
{
xtype: "panel",
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
/**
* @author MC
* (a)description class to control contion selection panel and to draw mapping in the mapping story
*/
Ext.define('metExploreViz.view.form.linkStyles.LinkStylesController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form-linkStyles-linkStyles',
/**
* Aplies event linsteners to the view
*/
init:function(){
var me = this,
viewModel = me.getViewModel(),
view = me.getView();
view.lookupReference('okButton').on({
click : function(){
me.setLinkedStyles(view.lookupReference('selectStyles').getValue());
view.close();
},
scope:me
});
view.lookupReference('cancelButton').on({
click : function(that){
view.close();
},
scope:me
});
view.lookupReference('selectStyles').on({
beforerender: function(c) {
var bioStyleForm = Ext.getCmp(view.aStyleFormParent.biologicalType+"StyleForm");
var scales = [];
var partOfAllScales = bioStyleForm.query("aStyleForm")
.map(function (aStyleForm) {
return aStyleForm.title;
})
.filter(function (aStyleFormTitle) {
return aStyleFormTitle!==view.aStyleFormParent.title;
});
scales = scales.concat(partOfAllScales);
view.lookupReference('selectStyles').setStore(scales);
var linkedStyles = view.aStyleFormParent.linkedStyles;
if(linkedStyles.length>0) {
view.lookupReference('selectStyles').setValue(linkedStyles);
}
},
scope:me
});
},
updateFocus : function(aStyleForm){
var me = this,
view = me.getView();
var linkedStyles = aStyleForm.linkedStyles;
if(linkedStyles.length>0){
aStyleForm.lookupReference('selectConditionForm').lookupReference('linkStyles').addCls('focus');
aStyleForm.lookupReference('selectConditionForm').lookupReference('linkStyles').setIconCls('link');
}
else
{
aStyleForm.lookupReference('selectConditionForm').lookupReference('linkStyles').setIconCls('unlink');
aStyleForm.lookupReference('selectConditionForm').lookupReference('linkStyles').removeCls('focus');
}
},
setLinkedStyles:function(arrayStyles){
var me = this,
view = me.getView();
var oldIncludesNew = view.aStyleFormParent.linkedStyles.every(function(item){ return arrayStyles.includes(item)});
var newIncludesOld = arrayStyles.every(function(item){ return view.aStyleFormParent.linkedStyles.includes(item)});
var removedStylesTitle = view.aStyleFormParent.linkedStyles.filter(function(item){ return !arrayStyles.includes(item)});
if(!(oldIncludesNew && newIncludesOld)){
view.aStyleFormParent.linkedStyles=arrayStyles;
var bioStyleForm = Ext.getCmp(view.aStyleFormParent.biologicalType+"StyleForm");
var partOfAllStyles = bioStyleForm.query("aStyleForm")
.filter(function (aStyleForm) {
return view.aStyleFormParent.linkedStyles.includes(aStyleForm.title);
});
partOfAllStyles.forEach(function(styleForm){
styleForm.expand();
var mappingNameToPropagate = view.aStyleFormParent.lookupReference('selectConditionForm').lookupReference('selectCondition').getValue();
var dataTypeToPropagate = view.aStyleFormParent.lookupReference('selectConditionForm').lookupReference('selectConditionType').getValue();
styleForm.lookupReference('selectConditionForm').lookupReference('selectCondition').setValue(mappingNameToPropagate);
styleForm.lookupReference('selectConditionForm').lookupReference('selectConditionType').setValue(dataTypeToPropagate);
styleForm.linkedStyles.push(view.aStyleFormParent.title);
me.updateFocus(styleForm);
});
var removedStyles = bioStyleForm.query("aStyleForm")
.filter(function (aStyleForm) {
return removedStylesTitle.includes(aStyleForm.title);
});
removedStyles.forEach(function(styleForm){
styleForm.linkedStyles = styleForm.linkedStyles.filter(function (title) {
return view.aStyleFormParent.title !== title
});
console.log(styleForm.linkedStyles);
me.updateFocus(styleForm);
});
me.updateFocus(view.aStyleFormParent);
}
}
});
\ No newline at end of file
......@@ -102,17 +102,17 @@ Ext.define('metExploreViz.view.form.metaboliteStyleForm.MetaboliteStyleForm', {
"max": 50,
"default": 1
},
// {
// "type": "string",
// "target": ["text.metabolite"],
// "attrType": "style",
// "attr": "font-size",
// "access": "fontSize",
// "biologicalType":"metabolite",
// "title": "Label",
// "choices":"",
// "default":"name"
// },
{
"type": "string",
"target": ["text.metabolite"],
"attrType": "style",
"attr": "label",
"access": "label",
"biologicalType":"metabolite",
"title": "Label",
"choices":"",
"default":"name"
},
{
"type": "color",
"target": ["text.metabolite"],
......
......@@ -98,8 +98,17 @@ Ext.define('metExploreViz.view.form.reactionStyleForm.ReactionStyleForm', {
"min": 0,
"max": 50,
"default": 1
}
,{
}, {
"type": "string",
"target": ["text.reaction"],
"attrType": "style",
"attr": "label",
"access": "label",
"biologicalType":"reaction",
"title": "Label",
"choices":"",
"default":"name"
}, {
"type": "color",
"target": ["text.reaction"],
"attrType": "attr",
......
......@@ -60,6 +60,15 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionForm', {
margins:'0 0 0 0',
bbar: [
'->',//spliter to shift next component up to end of right
{
xtype: 'button',
iconCls:'unlink',
align:"right",
scale : 'small',
margin:'5 5 5 0',
reference: 'linkStyles',
tooltip: "Link styles"
},
{
xtype: 'button',
iconCls:'download',
......
......@@ -7,7 +7,8 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
extend: 'Ext.app.ViewController',
alias: 'controller.form-selectConditionForm-selectConditionForm',
requires: [
"metExploreViz.view.form.continuousColorMappingEditor.ContinuousColorMappingEditor"
"metExploreViz.view.form.continuousColorMappingEditor.ContinuousColorMappingEditor",
"metExploreViz.view.form.linkStyles.LinkStyles"
],
/**
* Aplies event linsteners to the view
......@@ -16,55 +17,38 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var me = this,
view = me.getView();
me.regexpPanel=/[.>< ,\/=()]/g;
me.regexpPanel=/[.>< ,\/=()]/g;
// Action to launch mapping on the visualization
view.on({
afterDiscreteMapping : this.addMappingCaptionForm,
scope:me
});
view.on({
afterContinuousMapping : this.addMappingCaptionForm,
scope:me
});
view.on({
afterSuggestionMapping : this.addMappingCaptionForm,
scope:me
});
view.on({
closeMapping : function(newMapping){
me.closeMapping(newMapping);
},
scope:me
});
view.on({
resetMapping : function(){
me.resetMapping();
},
scope:me
});
view.on({
removeMapping : function(removedMapping){
me.removeMapping(removedMapping);
},
scope:me
});
view.on({
reset : function(newMapping){
},
scope:me
});
view.lookupReference('selectConditionType').on({
afterrender : function(){
var aStyleFormParent = me.getAStyleFormParent();
if(aStyleFormParent.styleType==="string"){
view.lookupReference('selectConditionType').hide();
}
},
change : function(that, newVal, old){
var viewAStyleForm = me.getAStyleFormParent();
this.map(newVal, old, viewAStyleForm);
this.applyToLinkedStyles( viewAStyleForm);
},
scope:me
});
......@@ -87,12 +71,6 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var dataType = view.lookupReference('selectConditionType').getValue();
if(dataType==="Continuous"){
}
if(dataType==="Discrete" || dataType==="As selection" || dataType==="Alias"){
metExploreD3.GraphUtils.saveStyles(viewAStyleForm.valueMappings);
}
switch (dataType) {
case 'Continuous':
metExploreD3.GraphUtils.saveStyles(viewAStyleForm.scaleRange);
......@@ -113,6 +91,42 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
scope:me
});
view.lookupReference('linkStyles').on({
click : function(){
var viewAStyleForm = me.getAStyleFormParent();
var bioStyleForm = Ext.getCmp(viewAStyleForm.biologicalType+"StyleForm");
if(bioStyleForm.linkStylesWin===false)
{
var win = Ext.create("metExploreViz.view.form.linkStyles.LinkStyles", {
title : "Style to link with " + viewAStyleForm.title,
height : 300,
aStyleFormParent : viewAStyleForm,
listeners :{
close : function(){
bioStyleForm.linkStylesWin=false;
}
}
});
win.show();
bioStyleForm.linkStylesWin=win;
}
else
{
var el = bioStyleForm.linkStylesWin.getEl();
el
.fadeIn({ x: el.getBox().x-10, duration: 10})
.fadeIn({ x: el.getBox().x, duration: 10})
.fadeIn({ x: el.getBox().x-10, duration: 10})
.fadeIn({ x: el.getBox().x, duration: 10})
.fadeIn({ x: el.getBox().x-10, duration: 10})
.fadeIn({ x: el.getBox().x, duration: 10})
}
},
scope:me
});
view.lookupReference('importScale').on({
change:function(){
metExploreD3.GraphUtils.handleFileSelect(view.lookupReference('importScale').fileInputEl.dom, function(json){
......@@ -208,6 +222,31 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
});
},
/*******************************************
* Remove all mapping in visualisation and in side panel
*/
applyToLinkedStyles:function(viewAStyleForm){
var me = this;
var view = me.getView();
var linkedStylesTitle = viewAStyleForm.linkedStyles;
if(linkedStylesTitle.length>0){
var bioStyleForm = Ext.getCmp(viewAStyleForm.biologicalType+"StyleForm");
var linkedStyles = bioStyleForm.query("aStyleForm")
.filter(function (aStyleForm) {
return linkedStylesTitle.includes(aStyleForm.title);
});
linkedStyles.forEach(function(styleForm){
var dataTypeToPropagate = view.lookupReference('selectConditionType').getValue();
styleForm.lookupReference('selectConditionForm').lookupReference('selectConditionType').setValue(dataTypeToPropagate);
});
}
},
/*******************************************
* Remove all mapping in visualisation and in side panel
*/
......@@ -465,7 +504,13 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
aStyleFormParent.default = styleToUse[aStyleFormParent.access];
metExploreD3.GraphStyleEdition.removeMappedClassStyle(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, aStyleFormParent.default);
metExploreD3.GraphStyleEdition.setCollectionStyle(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, aStyleFormParent.default);
if(aStyleFormParent.styleType==="string")
{
var bypass = false;
metExploreD3.GraphStyleEdition.setCollectionLabel(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, styleToUse[aStyleFormParent.access], bypass);
}
else
metExploreD3.GraphStyleEdition.setCollectionStyle(aStyleFormParent.target, aStyleFormParent.attrType, aStyleFormParent.attrName, aStyleFormParent.biologicalType, aStyleFormParent.default);
var captions = view.lookupReference('discreteCaptions');
......@@ -523,9 +568,6 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
captions.show();
}
if(dataType==="Alias"){
header.lookupReference('mappingButton').fireEvent("setIcon", "alias");
}
var delConditionPanel = view.lookupReference('delConditionPanel');
......@@ -533,6 +575,15 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
this.graphMapping(dataType, selectedCondition, parentAStyleForm);
}
if(parentAStyleForm.styleType==="string" && selectedCondition!==null){
var header = parentAStyleForm.down('header');
header.lookupReference('mappingButton').fireEvent("setIcon", "alias");
var delConditionPanel = view.lookupReference('delConditionPanel');
delConditionPanel.show();
this.graphMapping("Alias", selectedCondition, parentAStyleForm);
}
},
/*******************************************
......@@ -559,7 +610,9 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
if(dataType==="Alias"){
session.setMappingDataType(dataType);
metExploreD3.GraphMapping.graphMappingDiscreteData(conditionName, parentAStyleForm);
var mappingName = conditionName.split(" / ")[0];
conditionName = conditionName.split(" / ")[1];
metExploreD3.GraphStyleEdition.setCollectionLabelMapping(parentAStyleForm.target, parentAStyleForm.attrType, parentAStyleForm.attrName, parentAStyleForm.biologicalType, conditionName, mappingName);
}
if(dataType==="Discrete"){
......@@ -567,8 +620,6 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
metExploreD3.GraphMapping.graphMappingDiscreteData(conditionName, parentAStyleForm);
}
if(dataType==="As selection"){
session.setMappingDataType(dataType);
metExploreD3.GraphMapping.graphMappingAsSelectionData(conditionName, parentAStyleForm);
......
......@@ -15,23 +15,23 @@ Ext.define('metExploreViz.view.form.selectMapping.SelectMapping', {
viewModel: {
type: "form-selectMapping-selectMapping"
},
listeners: {
beforerender: function(c) {
this.setStore(Ext.getStore("mappingStore"));
},
render: function(c) {
new Ext.ToolTip({
target: c.getEl(),
html: 'Select a mapping'
});
}
},
displayField: 'name',
valueField: 'name',
width: 150,
queryMode: 'local',
multiSelect:false,
editable:false,
emptyText:'-- Select Mapping --',
margin:'5 0 5 0'
listeners: {
beforerender: function(c) {
this.setStore(Ext.getStore("mappingStore"));
},
render: function(c) {
new Ext.ToolTip({
target: c.getEl(),
html: 'Select a mapping'
});
}
},
displayField: 'name',
valueField: 'name',
width: 150,
queryMode: 'local',
multiSelect:false,
editable:false,
emptyText:'-- Select Mapping --',
margin:'5 0 5 0'
});
\ No newline at end of file
......@@ -4,24 +4,33 @@
*/
d3.selection.prototype.attrEditor = function(attr, val) {
var selection = this;
if(!val)
return this.attr(attr);
return selection.attr(attr);
else
{
this.attr(attr, val);
if(attr === "height" || attr === "width"){
this.each(function (n) {
if(attr === "height")
n.setSvgHeight(val);
if(attr === "width")
n.setSvgWidth(val);
if(typeof val === 'function')
{
selection.each(function (n) {
d3.select(this).attrEditor(attr, val(n));
});
this.attr("transform", "translate(-"+(parseFloat(this.attr("width"))/2)+",-"+(parseFloat(this.attr("height"))/2)+") scale(1)");
}
else
{
selection.attr(attr, val);
if(attr === "height" || attr === "width"){
selection.each(function (n) {
if(attr === "height")
n.setSvgHeight(val);
if(attr === "width")
n.setSvgWidth(val);
});
selection.attr("transform", "translate(-"+(parseFloat(this.attr("width"))/2)+",-"+(parseFloat(this.attr("height"))/2)+") scale(1)");
}
}
}
};
......@@ -214,3 +223,101 @@ d3.selection.prototype.addNodeText = function(style) {
};
/*******************************
* Add text to node
* @param style in function of node biological type
*/
d3.selection.prototype.setLabelNodeText = function(style, label) {
this
.each(function(d) {
//
// observer.observe(this, {
// attributes: true, //configure it to listen to attribute changes
// characterData: true,
// attributeOldValue: true,
// characterDataOldValue: true,
// attributeFilter:["style"]
// });
var el = d3.select(this);
var name = style.getDisplayLabel(d, label, false);
name = name.split(' ');
el.text('');
for (var i = 0; i < name.length; i++) {
var nameDOMFormat = $("<div/>").html(name[i]).text();
var tspan = el.append('tspan').text(nameDOMFormat);
if (d.labelFont){
if (d.labelFont.fontX) {
tspan
.attr('x', function () {
return d.labelFont.fontX;
});
}
else tspan.attr('x', 0);
}
else tspan.attr('x', 0);
if (i > 0){
tspan.attr('dy', style.getFontSize());
}
}
})
};
/*******************************
* Add text to node
* @param style in function of node biological type
*/
d3.selection.prototype.setLabelNodeTextByValue = function(style, val) {
var selection = this;
if(typeof val === 'function')
{
selection.each(function (n) {
d3.select(this).setLabelNodeTextByValue(style, val(n).toString());
});
}
else
{
selection
.each(function(d) {
//
// observer.observe(this, {
// attributes: true, //configure it to listen to attribute changes
// characterData: true,
// attributeOldValue: true,
// characterDataOldValue: true,
// attributeFilter:["style"]
// });
var el = d3.select(this);
var name = val;
name = name.split(' ');
el.text('');
for (var i = 0; i < name.length; i++) {
var nameDOMFormat = $("<div/>").html(name[i]).text();
var tspan = el.append('tspan').text(nameDOMFormat);
if (d.labelFont){
if (d.labelFont.fontX) {
tspan
.attr('x', function () {
return d.labelFont.fontX;
});
}
else tspan.attr('x', 0);
}
else tspan.attr('x', 0);
if (i > 0){
tspan.attr('dy', style.getFontSize());
}
}
})
}
};
......@@ -110,6 +110,7 @@ metExploreD3.GraphLink = {
var source, target, path;
function pathForReversibleReactions(source, target) {
var d = Math.sqrt(Math.pow(target.x - source.x, 2) + Math.pow(target.y - source.y, 2));
var dX = (target.x - source.x);
var dY = (target.y - source.y);
......@@ -120,8 +121,8 @@ metExploreD3.GraphLink = {
var largeurNoeudT = (rTW < rTH) ? rT = rTW : rt = rTH;
}
else {
var rTW = (Math.abs(d) * target.getSvgWidth() / 2) / Math.abs(dX);
var rTH = (Math.abs(d) * target.getSvgHeight() / 2) / Math.abs(dY);
var rTW = (Math.abs(d) * source.getSvgWidth() / 2) / Math.abs(dX);
var rTH = (Math.abs(d) * source.getSvgHeight() / 2) / Math.abs(dY);
var largeurNoeudT = (rTW < rTH) ? rT = rTW : rt = rTH;
}
var heightArrow = 5;
......@@ -154,6 +155,7 @@ metExploreD3.GraphLink = {
function path(source, target) {
var d = Math.sqrt(Math.pow(target.x - source.x, 2) + Math.pow(target.y - source.y, 2));
var dX = (target.x - source.x);
var dY = (target.y - source.y);
......@@ -163,8 +165,8 @@ metExploreD3.GraphLink = {
var largeurNoeudT = (rTW < rTH) ? rT = rTW : rt = rTH;
}
else {
var rTW = (Math.abs(d) * target.getSvgWidth() / 2) / Math.abs(dX);
var rTH = (Math.abs(d) * target.getSvgHeight() / 2) / Math.abs(dY);
var rTW = (Math.abs(d) * source.getSvgWidth() / 2) / Math.abs(dX);
var rTH = (Math.abs(d) * source.getSvgHeight() / 2) / Math.abs(dY);
var largeurNoeudT = (rTW < rTH) ? rT = rTW : rt = rTH;
}
......
......@@ -543,6 +543,102 @@ metExploreD3.GraphStyleEdition = {
});
},
/*******************************************
* 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
*/
setCollectionLabel : function (targetSet, attrType, attrName, biologicalType, value) {
console.log(targetSet);
console.log(attrType);
console.log(attrName);
console.log(biologicalType);
console.log(value);
var styleToUse;
if(biologicalType==="metabolite")
styleToUse = metExploreD3.getMetaboliteStyle();
if(biologicalType==="reaction")
styleToUse = metExploreD3.getReactionStyle();
if(biologicalType==="link")
styleToUse = metExploreD3.getLinkStyle();
targetSet.forEach(function setStyles(target) {
var selection;
if(biologicalType==="metabolite" || biologicalType==="reaction")
selection = d3.select("#viz").select("#D3viz").selectAll("g.node").filter(function(d){return d.getBiologicalType()===biologicalType});
if(biologicalType==="link")
selection = d3.select("#viz").select("#D3viz").selectAll(".linkGroup");
console.log(selection);
selection
.selectAll(target+":not(.bypassed"+attrType+attrName+biologicalType+")"+":not(.mapped"+attrType+attrName+biologicalType+")")
.setLabelNodeText(styleToUse, value);
});
},
/*******************************************
* 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
*/
setCollectionLabelMapping : function (targetSet, attrType, attrName, biologicalType, conditionName, mappingName) {
var activeSession = _metExploreViz.getSessionById(metExploreD3.GraphNode.activePanel);
if(activeSession) {
console.log(targetSet);
console.log(attrType);
console.log(attrName);
console.log(biologicalType);
var styleToUse;
if(biologicalType==="metabolite")
styleToUse = metExploreD3.getMetaboliteStyle();
if(biologicalType==="reaction")
styleToUse = metExploreD3.getReactionStyle();
if(biologicalType==="link")
styleToUse = metExploreD3.getLinkStyle();
targetSet.forEach(function setStyles(target) {
var selection;
if(biologicalType==="metabolite" || biologicalType==="reaction")
selection = d3.select("#viz").select("#D3viz").selectAll("g.node").filter(function(d){return d.getBiologicalType()===biologicalType});
if(biologicalType==="link")
selection = d3.select("#viz").select("#D3viz").selectAll(".linkGroup");
selection = selection
.filter(function (d) {
var map = d.getMappingDataByNameAndCond(mappingName, conditionName);
if(map !== null) {
return true;
}
return false;
});
var targetSelection = selection.selectAll(target);
function test(d){
var map = d.getMappingDataByNameAndCond(mappingName, conditionName);
return map.getMapValue();
}
targetSelection
.setLabelNodeTextByValue(styleToUse, test);
targetSelection.classed("mapped"+attrType+attrName+biologicalType, true);
});
}
},
/*******************************************
* 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
......@@ -575,11 +671,12 @@ metExploreD3.GraphStyleEdition = {
});
var selectedNodesId = mapNodes.filter(function (node) {
return node.getBiologicalType() === biologicalType;
if (biologicalType === "link") return node.getBiologicalType() === "reaction";
else return node.getBiologicalType() === biologicalType;
}).map(function (node) {
return node.getId();
});
if(selectedNodesId.length>0){
var selection;
if (biologicalType === "link"){
......@@ -613,6 +710,73 @@ metExploreD3.GraphStyleEdition = {
}
},
/*******************************************
* 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
*/
setCollectionLabelBypass : function (targetSet, attrType, attrName, biologicalType, value) {
var activeSession = _metExploreViz.getSessionById(metExploreD3.GraphNode.activePanel);
var styleToUse;
if(biologicalType==="metabolite")
styleToUse = metExploreD3.getMetaboliteStyle();
if(biologicalType==="reaction")
styleToUse = metExploreD3.getReactionStyle();
if(biologicalType==="link")
styleToUse = metExploreD3.getLinkStyle();
if(activeSession) {
targetSet.forEach(function setStyles(target) {
var mapNodes = activeSession.getSelectedNodes().map(function (nodeId) {
return activeSession.getD3Data().getNodeById(nodeId);
});
var selectedNodesId = mapNodes.filter(function (node) {
if (biologicalType === "link") return node.getBiologicalType() === "reaction";
else return node.getBiologicalType() === biologicalType;
}).map(function (node) {
return node.getId();
});
if(selectedNodesId.length>0){
var selection;
if (biologicalType === "link"){
selection = d3.select("#viz").select("#D3viz").selectAll(".linkGroup")
.filter(function (d) {
var reaction = d.getReaction();
if(reaction)
return selectedNodesId.includes(reaction.getId());
return false;
});
}
else
{
selection = d3.select("#viz").select("#D3viz").selectAll("g.node")
.filter(function (d) {
return d.getBiologicalType() === biologicalType;
})
.filter(function (d) {
return selectedNodesId.includes(d.getId());
});
}
var targetSelection = selection.selectAll(target);
targetSelection
.setLabelNodeTextByValue(styleToUse, value);
targetSelection.classed("bypassed"+attrType+attrName+biologicalType, true);
}
});
}
},
/*******************************************
* 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
......@@ -699,6 +863,8 @@ metExploreD3.GraphStyleEdition = {
* @param {Object} node : The node whose image position and dimension data will be put in the object
*/
setCollectionStyleContinuousMapping : function (targetSet, attrType, attrName, biologicalType, conditionName, mappingName, linearScale) {
console.log(conditionName);
console.log(mappingName);
var activeSession = _metExploreViz.getSessionById(metExploreD3.GraphNode.activePanel);
if(activeSession) {
targetSet.forEach(function setStyles(target) {
......@@ -727,11 +893,11 @@ metExploreD3.GraphStyleEdition = {
var targetSelection = selection.selectAll(target);
targetSelection[attrType](attrName, function(d){
function test(d){
var map = d.getMappingDataByNameAndCond(mappingName, conditionName);
return linearScale(map.getMapValue());
});
}
targetSelection[attrType](attrName, test);
targetSelection.classed("mapped"+attrType+attrName+biologicalType, true);
});
......
......@@ -180,21 +180,17 @@ MetaboliteStyle.prototype = {
labelToDisplay:function(node, label){
var displayedLabel = undefined;
switch(label) {
case "name":
displayedLabel = node.getName();
break;
case "dbIdentifier":
displayedLabel = node.getDbIdentifier();
break;
default:
displayedLabel = node.getName();
}
if(label)
displayedLabel = node[label];
else
displayedLabel = node.getName();
if(displayedLabel === undefined)
displayedLabel = node.getName();
return displayedLabel;
return displayedLabel.toString();
},
getOpacity:function()
{
......
......@@ -155,6 +155,7 @@ ReactionStyle.prototype = {
this.label = newData;
},
getDisplayLabel:function(node, label, useAlias)
{
var displayedLabel;
......@@ -179,21 +180,17 @@ ReactionStyle.prototype = {
labelToDisplay:function(node, label){
var displayedLabel = undefined;
switch(label) {
case "name":
displayedLabel = node.getName();
break;
case "dbIdentifier":
displayedLabel = node.getDbIdentifier();
break;
default:
displayedLabel = node.getName();
}
if(label)
displayedLabel = node[label];
else
displayedLabel = node.getName();
if(displayedLabel === undefined)
displayedLabel = node.getName();
return displayedLabel;
return displayedLabel.toString();
},
getOpacity:function()
{
......