Merge branch 'hotfix/linkStyles'

app.json

@@ -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.).

app/view/form/aStyleForm/AStyleFormController.js

@@ -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/allStylesByTypeForm/AllStylesByTypeFormController.js

@@ -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,

app/view/form/allStylesForm/AllStylesFormController.js

@@ -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){

app/view/form/label/label.js

+/**
+ * @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

+/**
+ * @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/linkStyles/linkStyles.js

+/**
+ * @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

app/view/form/linkStyles/linkStylesController.js

+/**
+ * @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

app/view/form/metaboliteStyleForm/MetaboliteStyleForm.js

@@ -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

@@ -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/SelectConditionForm.js

@@ -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',

app/view/form/selectConditionForm/SelectConditionFormController.js

@@ -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