Skip to content

MetExploreViz
MetExploreViz
Commit d51753ee authored by maxchaza's avatar maxchaza
Browse files
Options

Label edition

parent 96d55ecb
Hide whitespace changes
Inline Side-by-side
Showing with 607 additions and 67 deletions
app/view/form/aStyleForm/AStyleFormController.js
View file @ d51753ee
......@@ -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();
......
app/view/form/label/label.js 0 → 100644
View file @ d51753ee
/**
* @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
app/view/form/label/labelController.js 0 → 100644
View file @ d51753ee
/**
* @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
app/view/form/metaboliteStyleForm/MetaboliteStyleForm.js
View file @ d51753ee
......@@ -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"],
......
app/view/form/reactionStyleForm/ReactionStyleForm.js
View file @ d51753ee
......@@ -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",
......
app/view/form/selectConditionForm/SelectConditionFormController.js
View file @ d51753ee
......@@ -21,47 +21,29 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
// 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();
......@@ -522,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');
......@@ -580,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');
......@@ -590,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);
}
},
/*******************************************
......@@ -616,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"){
......@@ -624,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);
......
resources/lib/functions/D3Extention.js
View file @ d51753ee
......@@ -223,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());
}
}
})
}
};
resources/lib/functions/GraphStyleEdition.js
View file @ d51753ee
......@@ -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
......@@ -614,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) {