Maintenance - Mise à jour mensuelle Lundi 6 Avril 2020 entre 7h00 et 9h00

Commit 6e14de29 authored by maxchaza's avatar maxchaza

Allows to link styles

parent 5e9f7a17
......@@ -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
* 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
......@@ -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,7 +17,7 @@ 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,
......@@ -65,6 +66,7 @@ Ext.define('metExploreViz.view.form.selectConditionForm.SelectConditionFormContr
var viewAStyleForm = me.getAStyleFormParent();
this.map(newVal, old, viewAStyleForm);
this.applyToLinkedStyles( viewAStyleForm);
},
scope:me
});
......@@ -87,12 +89,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 +109,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 +240,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
*/
......
......@@ -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
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