Skip to content
GitLab
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
ec975b7e
Commit
ec975b7e
authored
Jan 03, 2020
by
maxchaza
Browse files
Merge branch 'release/3.0.0'
parents
fa283b97
302ab19a
Changes
94
Hide whitespace changes
Inline
Side-by-side
app.json
View file @
ec975b7e
...
...
@@ -7,7 +7,7 @@
/**
*
The
version
of
the
application.
*/
"version"
:
"
2.8.16"
,
"version"
:
"
3.0.0
/**
* The relative path to the application's markup file (html, jsp, asp, etc.).
...
...
@@ -298,7 +298,7 @@
"
bundle
": true
},
{
"path"
:
"resources/lib/model/
Color
Mapping.js"
,
"
path
": "
resources/lib/model/
Value
Mapping.js
",
"
bundle
": true
},
{
...
...
@@ -333,6 +333,14 @@
"
path
": "
resources/lib/functions/NodeStyleForm.js
",
"
bundle
": true
},
{
"
path
": "
resources/lib/functions/GraphColorScaleEditor.js
",
"
bundle
": true
},
{
"
path
": "
resources/lib/functions/GraphNumberScaleEditor.js
",
"
bundle
": true
},
{
"
path
": "
resources/lib/functions/Features.js
",
"
bundle
": true
...
...
app/Application.js
View file @
ec975b7e
...
...
@@ -9,10 +9,16 @@ Ext.define('metExploreViz.Application', {
name
:
'
metExploreViz
'
,
stores
:
[
'
metExploreViz.view.form.selectCondition.ConditionStore
'
,
'
conditionStore
'
// TODO: add global / shared stores here
],
launch
:
function
()
{
Ext
.
create
(
'
metExploreViz.view.form.selectCondition.ConditionStore
'
);
// TODO - Launch the application
},
...
...
app/view/button/buttonImportMapping/ButtonImportMappingController.js
View file @
ec975b7e
...
...
@@ -24,6 +24,9 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMappingCon
reloadMapping
:
function
(){
view
.
reset
();
},
jsonmapping
:
function
(
mappingJSON
){
me
.
addConditions
(
mappingJSON
);
},
scope
:
me
});
},
...
...
@@ -34,6 +37,7 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMappingCon
* @param title : file title
*/
loadData
:
function
(
tabTxt
,
title
)
{
var
me
=
this
;
var
data
=
tabTxt
;
tabTxt
=
tabTxt
.
replace
(
/
\r
/g
,
""
);
var
lines
=
tabTxt
.
split
(
'
\n
'
);
...
...
@@ -50,17 +54,47 @@ Ext.define('metExploreViz.view.button.buttonImportMapping.ButtonImportMappingCon
_metExploreViz
.
addMapping
(
mapping
);
for
(
var
i
=
lines
.
length
-
1
;
i
>=
0
;
i
--
)
{
lines
[
i
]
=
lines
[
i
].
split
(
'
\t
'
);
lines
[
i
]
=
lines
[
i
].
split
(
'
\t
'
).
map
(
function
(
val
)
{
return
val
.
replace
(
"
,
"
,
"
.
"
);
});
}
// Launch mapping
metExploreD3
.
GraphMapping
.
mapNodeData
(
mapping
,
lines
);
metExploreD3
.
fireEventArg
(
'
selectMappingVisu
'
,
"
jsonmapping
"
,
mapping
);
metExploreD3
.
fireEventArg
(
'
buttonMap
'
,
"
jsonmapping
"
,
mapping
);
metExploreD3
.
fireEventArg
(
'
selectMapping
'
,
"
jsonmapping
"
,
mapping
);
}
else
{
// Warning for bad syntax file
metExploreD3
.
displayWarning
(
"
Syntaxe error
"
,
'
File have bad syntax. See <a target="_blank" href="http://metexplore.toulouse.inra.fr/metexploreViz/doc/documentation.php#import">MetExploreViz documentation</a>.
'
);
}
},
/*****************************************************
* Fill condition store store
* @param mapping : Mapping object
*/
addConditions
:
function
(
mapping
)
{
// Launch mapping
var
conditions
=
mapping
.
getConditions
();
var
conditionStore
=
Ext
.
getStore
(
"
conditionStore
"
);
var
newConditions
=
[];
if
(
conditions
[
0
]
!==
undefined
){
mapping
.
getConditions
().
forEach
(
function
(
condition
)
{
newConditions
.
push
(
mapping
.
getName
()
+
"
/
"
+
condition
);
});
}
else
newConditions
.
push
(
mapping
.
getName
());
newConditions
.
filter
(
function
(
cond
){
return
!
(
cond
.
includes
(
"
PathwayEnrichment
"
)
||
cond
.
includes
(
"
PathwayCoverage
"
))
})
.
forEach
(
function
(
value
)
{
conditionStore
.
add
({
name
:
value
,
type
:
'
int
'
});
});
}
});
app/view/button/buttonImportToNetwork/ButtonImportToNetworkController.js
View file @
ec975b7e
...
...
@@ -25,7 +25,9 @@ Ext.define('metExploreViz.view.button.buttonImportToNetwork.ButtonImportToNetwor
}
metExploreD3
.
GraphUtils
.
handleFileSelect
(
view
.
lookupReference
(
'
importNetwork
'
).
fileInputEl
.
dom
,
function
(
json
){
// Allows to reload the same file
metExploreD3
.
GraphPanel
.
refreshPanel
(
json
,
view
.
lookupReference
(
'
importNetwork
'
).
reset
());
metExploreD3
.
GraphPanel
.
refreshPanel
(
json
,
function
(){
view
.
lookupReference
(
'
importNetwork
'
).
reset
();
});
});
},
scope
:
me
...
...
app/view/form/SelectConditionType.js
View file @
ec975b7e
...
...
@@ -13,8 +13,8 @@ Ext.define('metExploreViz.view.form.SelectConditionType', {
data
:
[
{
"
name
"
:
"
Continuous
"
},
{
"
name
"
:
"
Discrete
"
},
{
"
name
"
:
"
Flux
"
}
,
{
"
name
"
:
"
Suggestion
"
}
{
"
name
"
:
"
As selection
"
}
//,
{"name":"
Alias
"}
]
},
listeners
:
{
...
...
@@ -23,11 +23,12 @@ Ext.define('metExploreViz.view.form.SelectConditionType', {
target
:
c
.
getEl
(),
html
:
'
Select a type of data
'
});
},
change
:
function
(){
var
comboCond
=
Ext
.
getCmp
(
'
selectCondition
'
);
comboCond
.
clearValue
();
}
// ,
// change: function(){
// var comboCond = Ext.getCmp('selectCondition');
// comboCond.clearValue();
// }
},
displayField
:
'
name
'
,
valueField
:
'
name
'
,
...
...
app/view/form/aStyleForm/AStyleForm.js
0 → 100644
View file @
ec975b7e
/**
* @author MC
* @description AStyleForm : Display Settings
*/
Ext
.
define
(
'
metExploreViz.view.form.aStyleForm.AStyleForm
'
,
{
extend
:
'
Ext.panel.Panel
'
,
alias
:
'
widget.aStyleForm
'
,
requires
:
[
"
metExploreViz.view.form.aStyleForm.AStyleFormController
"
],
controller
:
"
form-aStyleForm-aStyleForm
"
,
region
:
'
north
'
,
margin
:
'
0 0 5 0
'
,
flex
:
0
,
border
:
false
,
scrollable
:
true
,
cls
:
"
aStyleForm
"
,
layout
:
{
type
:
'
vbox
'
},
header
:{
referenceHolder
:
true
,
style
:{
padding
:
'
5px 5px 5px 5px
'
},
items
:[{
xtype
:
'
button
'
,
reference
:
"
numberButton
"
,
hidden
:
true
,
cls
:
"
aStyleFormButton
"
,
// text: '2000',
html
:
"
<svg width='30px' height='30px'><text id='textNumberButton' font-family='Verdana' font-size='10' text-anchor='middle' x='46%' y='50%' dominant-baseline='middle'></text></svg>
"
,
height
:
"
30px
"
,
width
:
"
30px
"
},{
xtype
:
'
panel
'
,
reference
:
"
colorButton
"
,
hidden
:
true
,
border
:
false
,
cls
:
"
aStyleFormColor
"
,
height
:
"
30px
"
,
width
:
"
30px
"
,
html
:
'
<input
'
+
'
type="color"
'
+
'
id="html5colorpicker"
'
+
'
value="#1698ff"
'
+
'
style="width:30px; height:30px;">
'
,
listeners
:
{
render
:
function
(
c
)
{
var
tipColorButton
=
Ext
.
create
(
'
Ext.tip.ToolTip
'
,
{
target
:
c
.
getEl
(),
html
:
'
"Color : "
'
,
listeners
:
{
beforeshow
:
function
(
tooltip
)
{
var
color
=
tooltip
.
target
.
el
.
dom
.
querySelector
(
"
#html5colorpicker
"
).
getAttribute
(
"
value
"
);
tooltip
.
update
(
color
);
}
}
});
c
.
tip
=
tipColorButton
;
}
}
},{
xtype
:
'
button
'
,
reference
:
"
mappingButton
"
,
cls
:
"
aStyleFormButton
"
,
text
:
''
,
height
:
"
30px
"
,
width
:
"
30px
"
},{
xtype
:
'
button
'
,
disabled
:
false
,
cls
:
"
aStyleFormButton
"
,
reference
:
"
bypassButton
"
,
border
:
"
1px
"
,
text
:
''
,
height
:
"
30px
"
,
width
:
"
30px
"
,
listeners
:
{
render
:
function
(
c
)
{
if
(
c
.
isDisabled
())
c
.
setTooltip
(
"
To override the visual property, select one or more nodes
"
);
},
disable
:
function
(
c
)
{
c
.
setTooltip
(
"
To override the visual property, select one or more nodes
"
);
},
enable
:
function
(
c
)
{
c
.
setTooltip
(
""
);
}
}
},{
xtype
:
'
panel
'
,
reference
:
"
colorButtonBypass
"
,
hidden
:
true
,
border
:
false
,
cls
:
"
aStyleFormColor
"
,
height
:
"
30px
"
,
width
:
"
30px
"
,
html
:
'
<input
'
+
'
type="color"
'
+
'
id="html5colorpicker"
'
+
'
value="#1698ff"
'
+
'
style="width:30px; height:30px;">
'
},{
xtype
:
'
button
'
,
reference
:
"
numberButtonBypass
"
,
hidden
:
true
,
cls
:
"
aStyleFormButton
"
,
// text: '2000',
html
:
"
<svg width='30px' height='30px'><text id='textNumberButton' font-family='Verdana' font-size='10' text-anchor='middle' x='46%' y='50%' dominant-baseline='middle'></text></svg>
"
,
height
:
"
30px
"
,
width
:
"
30px
"
}],
titlePosition
:
6
},
items
:
[
{
xtype
:
'
form
'
,
itemId
:
'
slider
'
,
bodyStyle
:
'
background-color:inherit
'
,
width
:
"
100%
"
,
top
:
'
10
'
,
border
:
false
,
items
:
[
{
reference
:
"
selectConditionForm
"
,
xtype
:
'
selectConditionForm
'
}
]
}
]
});
\ No newline at end of file
app/view/form/aStyleForm/AStyleFormController.js
0 → 100644
View file @
ec975b7e
/**
* @author MC
* @description class to control settings or configs
*/
Ext
.
define
(
'
metExploreViz.view.form.aStyleForm.AStyleFormController
'
,
{
extend
:
'
Ext.app.ViewController
'
,
alias
:
'
controller.form-aStyleForm-aStyleForm
'
,
/**
* Init function Checks the changes on drawing style
*/
init
:
function
()
{
var
me
=
this
,
viewModel
=
me
.
getViewModel
(),
view
=
me
.
getView
();
if
(
view
.
styleType
===
"
int
"
||
view
.
styleType
===
"
float
"
)
{
view
.
graphNumberScaleEditor
=
Object
.
create
(
metExploreD3
.
GraphNumberScaleEditor
);
}
if
(
view
.
styleType
===
"
color
"
)
{
view
.
graphColorScaleEditor
=
Object
.
create
(
metExploreD3
.
GraphColorScaleEditor
);
}
view
.
on
(
{
afterStyleLoading
:
me
.
updateFormValues
,
updateSelectionSet
:
me
.
updateSelectionSet
,
afterrender
:
me
.
initForm
,
expand
:
function
(
panel
)
{
var
header
=
panel
.
down
(
'
header
'
);
header
.
lookupReference
(
'
mappingButton
'
).
addCls
(
'
focus
'
);
},
collapse
:
function
(
panel
)
{
var
header
=
panel
.
down
(
'
header
'
);
header
.
lookupReference
(
'
mappingButton
'
).
removeCls
(
'
focus
'
);
},
scope
:
me
});
},
/**
* Define displayed icons on values in function of selected nodes
*/
updateSelectionSet
:
function
()
{
var
me
=
this
;
var
view
=
me
.
getView
();
// WARNING Header render is executed afterrender view
// As a result, render and afterrender can't be used on header
var
header
=
view
.
down
(
'
header
'
);
if
(
header
){
var
bypassButton
=
header
.
lookupReference
(
'
bypassButton
'
);
var
colorButtonBypass
=
header
.
lookupReference
(
'
colorButtonBypass
'
);
var
colorButtonBypassEl
=
colorButtonBypass
.
el
.
dom
.
querySelector
(
"
#html5colorpicker
"
);
var
numberButtonBypass
=
header
.
lookupReference
(
'
numberButtonBypass
'
);
var
activeSession
=
_metExploreViz
.
getSessionById
(
metExploreD3
.
GraphNode
.
activePanel
);
if
(
activeSession
)
{
var
mapNodes
=
activeSession
.
getSelectedNodes
()
.
map
(
function
(
nodeId
)
{
return
activeSession
.
getD3Data
().
getNodeById
(
nodeId
);
})
.
filter
(
function
(
n
)
{
return
n
!==
undefined
});
var
selectedNodes
=
mapNodes
.
filter
(
function
(
node
)
{
return
node
.
getBiologicalType
()
===
view
.
biologicalType
;
});
var
selection
=
d3
.
select
(
"
#
"
+
metExploreD3
.
GraphNode
.
activePanel
)
.
select
(
"
#D3viz
"
)
.
selectAll
(
"
g.node
"
)
.
filter
(
function
(
n
)
{
return
n
.
getBiologicalType
()
===
view
.
biologicalType
});
if
(
selectedNodes
.
length
>
0
)
{
bypassButton
.
enable
();
if
(
selection
){
var
value
=
metExploreD3
.
GraphStyleEdition
.
getCollectionStyleBypass
(
view
.
target
,
view
.
attrType
,
view
.
attrName
,
view
.
biologicalType
);
if
(
value
===
"
multiple
"
||
value
===
"
none
"
)
{
bypassButton
.
show
();
numberButtonBypass
.
hide
();
colorButtonBypass
.
hide
();
if
(
value
===
"
multiple
"
){
if
(
view
.
styleType
===
"
float
"
||
view
.
styleType
===
"
int
"
)
{
numberButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
mapMultipleNumbers
"
);
}
if
(
view
.
styleType
===
"
color
"
)
colorButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
mapMultipleColors
"
);
}
else
{
numberButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
noneIcon
"
);
colorButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
noneIcon
"
);
}
}
else
{
numberButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
noneIcon
"
);
colorButtonBypass
.
fireEvent
(
"
setIcon
"
,
"
noneIcon
"
);
if
(
view
.
styleType
===
"
float
"
)
{
if
(
parseFloat
(
view
.
default
)
!==
parseFloat
(
value
)){
numberButtonBypass
.
show
();
bypassButton
.
hide
();
me
.
replaceText
(
numberButtonBypass
.
el
.
dom
,
parseFloat
(
value
));
}
}
if
(
view
.
styleType
===
"
int
"
)
{
if
(
parseInt
(
view
.
default
)
!==
parseInt
(
value
)){
numberButtonBypass
.
show
();
bypassButton
.
hide
();
me
.
replaceText
(
numberButtonBypass
.
el
.
dom
,
parseInt
(
value
));
}
}
if
(
view
.
styleType
===
"
color
"
)
{
if
(
view
.
default
!==
metExploreD3
.
GraphUtils
.
RGBString2Color
(
value
))
{
colorButtonBypass
.
show
();
bypassButton
.
hide
();
colorButtonBypassEl
.
setAttribute
(
"
value
"
,
metExploreD3
.
GraphUtils
.
RGBString2Color
(
value
));
}
}
}
}
}
else
{
bypassButton
.
show
();
numberButtonBypass
.
hide
();
colorButtonBypass
.
hide
();
bypassButton
.
disable
();
}
}
else
{
bypassButton
.
show
();
numberButtonBypass
.
hide
();
colorButtonBypass
.
hide
();
bypassButton
.
disable
();
}
}
},
updateContinuousCaption
:
function
(){
var
me
=
this
;
var
view
=
me
.
getView
();
if
(
view
.
styleType
===
"
float
"
||
view
.
styleType
===
"
int
"
){
var
margin
=
0
;
var
width
=
190
;
var
height
=
50
;
var
svg
=
d3
.
select
(
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
scaleCaption
'
).
el
.
dom
).
select
(
"
#scaleCaption
"
);
svg
.
selectAll
(
"
*
"
).
remove
();
svg
=
d3
.
select
(
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
scaleCaption
'
).
el
.
dom
).
select
(
"
#scaleCaption
"
);
view
.
graphNumberScaleEditor
.
createNumberScaleCaption
(
svg
,
width
,
height
,
margin
,
view
.
scaleRange
);
svg
.
on
(
"
click
"
,
function
(){
var
win
=
Ext
.
create
(
"
metExploreViz.view.form.continuousNumberMappingEditor.ContinuousNumberMappingEditor
"
,
{
height
:
300
,
aStyleFormParent
:
view
});
win
.
show
();
});
}
if
(
view
.
styleType
===
"
color
"
){
var
margin
=
0
;
var
width
=
150
;
var
height
=
50
;
var
svg
=
d3
.
select
(
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
scaleCaption
'
).
el
.
dom
).
select
(
"
#scaleCaption
"
);
svg
.
selectAll
(
"
*
"
).
remove
();
// var colorRangeCaption = ['#6f867b', '#F6F6F4', '#925D60'];
// var colorPercentCaption = [0, 50, 100];
// var colorDomainCaption = [1,2,3];
svg
=
d3
.
select
(
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
scaleCaption
'
).
el
.
dom
).
select
(
"
#scaleCaption
"
);
view
.
graphColorScaleEditor
.
createColorScaleCaption
(
svg
,
width
,
height
,
margin
,
view
.
scaleRange
);
svg
.
on
(
"
click
"
,
function
(){
var
win
=
Ext
.
create
(
"
metExploreViz.view.form.continuousColorMappingEditor.ContinuousColorMappingEditor
"
,
{
height
:
300
,
aStyleFormParent
:
view
});
win
.
show
();
});
}
},
updateContinuousMapping
:
function
(){
var
me
=
this
;
var
view
=
me
.
getView
();
if
(
view
.
styleType
===
"
float
"
||
view
.
styleType
===
"
int
"
){
var
conditionName
=
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
selectCondition
'
).
getValue
();
metExploreD3
.
GraphMapping
.
graphMappingContinuousData
(
conditionName
,
view
);
}
if
(
view
.
styleType
===
"
color
"
){
var
conditionName
=
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
selectCondition
'
).
getValue
();
metExploreD3
.
GraphMapping
.
graphMappingContinuousData
(
conditionName
,
view
);
}
},
updateDiscreteMapping
:
function
(){
var
me
=
this
;
var
view
=
me
.
getView
();
var
conditionName
=
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
selectCondition
'
).
getValue
();
var
selectConditionType
=
view
.
lookupReference
(
'
selectConditionForm
'
).
lookupReference
(
'
selectConditionType
'
);
var
dataType
=
selectConditionType
.
getValue
();
var
session
=
_metExploreViz
.
getSessionById
(
"
viz
"
);
if
(
dataType
===
"
Alias
"
){
session
.
setMappingDataType
(
dataType
);
metExploreD3
.
GraphMapping
.
graphMappingDiscreteData
(
conditionName
,
view
);
}
if
(
dataType
===
"
Discrete
"
){
session
.
setMappingDataType
(
dataType
);
metExploreD3
.
GraphMapping
.
graphMappingDiscreteData
(
conditionName
,
view
);
}
if
(
dataType
===
"
As selection
"
){
session
.
setMappingDataType
(
dataType
);
metExploreD3
.
GraphMapping
.
graphMappingAsSelectionData
(
conditionName
,
view
);
}
},
updateFormValues
:
function
(){
var
me
=
this
;
var
view
=
me
.
getView
();
var
styleToUse
;
if
(
view
.
biologicalType
===
"
metabolite
"
)
styleToUse
=
metExploreD3
.
getMetaboliteStyle
();
if
(
view
.
biologicalType
===
"
reaction
"
)
styleToUse
=
metExploreD3
.
getReactionStyle
();
if
(
view
.
biologicalType
===
"
link
"
)
styleToUse
=
metExploreD3
.
getLinkStyle
();
if
(
!
view
.
default
)
view
.
default
=
styleToUse
[
view
.
access
];
// WARNING Header render is executed afterrender view
// As a result, render and afterrender can't be used on header
var
header
=
view
.
down
(
'
header
'
);
me
.
updateSelectionSet
();
header
.
lookupReference
(
'
mappingButton
'
).
fireEvent
(
"
setIcon
"
,
"
continue
"
);
if
(
view
.
styleType
===
"
float
"
||
view
.
styleType
===
"
int
"
){
var
numberButton
=
header
.
lookupReference
(
'
numberButton
'
);
numberButton
.
show
();
me
.
replaceText
(
numberButton
.
el
.
dom
,
view
.
default
);
var
margin
=
0
;
var
width
=
190
;
var
height
=
50
;
var
svg
=
d3
.
select
(
view
.
lookupReference
(
'
scaleCaption
'
).
el
.
dom
).
select
(
"
#scaleCaption
"
);
view
.
graphNumberScaleEditor
.
createNumberScaleCaption
(
svg
,
width
,
height
,
margin
,
view
.
scaleRange
);
svg
.
on
(
"
click
"
,
function
(){