Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
metexplore
MetExploreViz
Commits
d51753ee
Commit
d51753ee
authored
Feb 13, 2020
by
maxchaza
Browse files
Label edition
parent
96d55ecb
Changes
10
Hide whitespace changes
Inline
Side-by-side
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
;