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
8097c1a8
Commit
8097c1a8
authored
Apr 10, 2020
by
maxchaza
Browse files
Refactoring
parent
7ea5a8c0
Changes
6
Hide whitespace changes
Inline
Side-by-side
app.json
View file @
8097c1a8
...
...
@@ -357,10 +357,6 @@
"path"
:
"resources/lib/functions/GraphPanel.js"
,
"bundle"
:
true
},
{
"path"
:
"resources/lib/functions/GraphPath.js"
,
"bundle"
:
true
},
{
"path"
:
"resources/lib/functions/GraphStyleEdition.js"
,
"bundle"
:
true
...
...
resources/lib/functions/Features.js
View file @
8097c1a8
...
...
@@ -65,4 +65,4 @@ metExploreD3.Features = {
return
this
.
features
[
feature
].
enabledTo
.
indexOf
(
"
all
"
)
!==-
1
;
return
false
;
}
}
\ No newline at end of file
};
\ No newline at end of file
resources/lib/functions/GraphCaption.js
View file @
8097c1a8
...
...
@@ -4,57 +4,6 @@
*/
metExploreD3
.
GraphCaption
=
{
/*****************************************************
* refresh reactions style in caption
*/
refreshStyleOfReaction
:
function
(){
// Load user's preferences
var
reactionStyle
=
metExploreD3
.
getReactionStyle
();
var
maxDimRea
=
Math
.
max
(
reactionStyle
.
getWidth
(),
reactionStyle
.
getHeight
());
var
xRea
=
15
/
maxDimRea
;
d3
.
select
(
"
#viz
"
).
select
(
"
#D3viz
"
)
.
select
(
'
.reactionCaption
'
)
.
attr
(
'
x
'
,
15
/
2
-
reactionStyle
.
getWidth
()
*
xRea
/
2
)
.
attr
(
'
y
'
,
15
+
15
/
2
-
reactionStyle
.
getHeight
()
*
xRea
/
2
)
.
attr
(
"
width
"
,
reactionStyle
.
getWidth
()
*
xRea
)
.
attr
(
"
height
"
,
reactionStyle
.
getHeight
()
*
xRea
)
.
attr
(
"
rx
"
,
reactionStyle
.
getRX
()
*
xRea
)
.
attr
(
"
ry
"
,
reactionStyle
.
getRY
()
*
xRea
)
.
attr
(
"
fill
"
,
"
white
"
)
.
attr
(
"
transform
"
,
"
translate(15,95)
"
)
.
style
(
"
stroke
"
,
reactionStyle
.
getStrokeColor
())
.
style
(
"
stroke-width
"
,
2
);
},
/*****************************************************
* refresh metabolites style in caption
*/
refreshStyleOfMetabolite
:
function
(){
var
metaboliteStyle
=
metExploreD3
.
getMetaboliteStyle
();
var
maxDimMet
=
Math
.
max
(
metaboliteStyle
.
getWidth
(),
metaboliteStyle
.
getHeight
());
var
xMet
=
15
/
maxDimMet
;
d3
.
select
(
"
#viz
"
).
select
(
"
#D3viz
"
)
.
select
(
'
.metaboliteCaption
'
)
.
attr
(
'
x
'
,
15
/
2
-
metaboliteStyle
.
getWidth
()
*
xMet
/
2
)
.
attr
(
'
y
'
,
15
+
15
/
2
-
metaboliteStyle
.
getHeight
()
*
xMet
/
2
)
.
attr
(
"
width
"
,
metaboliteStyle
.
getWidth
()
*
xMet
)
.
attr
(
"
height
"
,
metaboliteStyle
.
getHeight
()
*
xMet
)
.
attr
(
"
rx
"
,
metaboliteStyle
.
getRX
()
*
xMet
)
.
attr
(
"
ry
"
,
metaboliteStyle
.
getRY
()
*
xMet
)
.
attr
(
"
fill
"
,
"
white
"
)
.
style
(
"
stroke
"
,
"
#000000
"
)
.
style
(
"
stroke-width
"
,
2
)
.
attr
(
"
transform
"
,
"
translate(15,130)
"
);
},
/*****************************************************
* Draw caption
*/
...
...
resources/lib/functions/GraphPanel.js
View file @
8097c1a8
/**
* @class metExploreD3.GraphPanel
* To manage the panel where is the graph
*
* Initialization of visualization panel
* Treatment of JSON network
* Resizing of panel
*
* @author MC
* @uses metExploreD3.GraphNode
* @uses metExploreD3.GraphNetwork
...
...
@@ -731,6 +736,63 @@ metExploreD3.GraphPanel = {
if
(
vizEngine
===
'
D3
'
)
{
metExploreD3
.
GraphNetwork
.
delayedInitialisation
(
'
viz
'
);
}
}
},
/*****************************************************
* Init keyboard shortsut events
* @private
*/
initShortCut
:
function
()
{
d3
.
select
(
"
body
"
)
.
on
(
"
keydown
"
,
function
()
{
_MyThisGraphNode
.
charKey
=
d3
.
event
.
keyCode
;
_MyThisGraphNode
.
ctrlKey
=
d3
.
event
.
ctrlKey
;
_MyThisGraphNode
.
altKey
=
d3
.
event
.
altKey
;
var
activesession
=
_metExploreViz
.
getSessionById
(
_MyThisGraphNode
.
activePanel
);
//H 72
if
(
_MyThisGraphNode
.
charKey
==
72
&&
!
_MyThisGraphNode
.
altKey
&&
activesession
.
getSelectedNodes
().
length
>
0
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
metExploreD3
.
GraphFunction
.
horizontalAlign
(
_MyThisGraphNode
.
activePanel
);
}
if
(
_MyThisGraphNode
.
charKey
==
72
&&
_MyThisGraphNode
.
altKey
&&
activesession
.
getSelectedNodes
().
length
>
0
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
metExploreD3
.
GraphFunction
.
horizontalReverse
(
_MyThisGraphNode
.
activePanel
);
}
//V 86
if
(
_MyThisGraphNode
.
charKey
==
86
&&
!
_MyThisGraphNode
.
altKey
&&
activesession
.
getSelectedNodes
().
length
>
0
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
metExploreD3
.
GraphFunction
.
verticalAlign
(
_MyThisGraphNode
.
activePanel
);
}
if
(
_MyThisGraphNode
.
charKey
==
86
&&
_MyThisGraphNode
.
altKey
&&
activesession
.
getSelectedNodes
().
length
>
0
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
metExploreD3
.
GraphFunction
.
verticalReverse
(
_MyThisGraphNode
.
activePanel
);
}
// 65=A
if
(
_MyThisGraphNode
.
charKey
==
65
&&
_MyThisGraphNode
.
ctrlKey
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
d3
.
select
(
"
#
"
+
_MyThisGraphNode
.
activePanel
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
g.node
"
)
.
each
(
function
(
node
)
{
if
(
!
node
.
isSelected
())
{
_MyThisGraphNode
.
selection
(
node
,
_MyThisGraphNode
.
activePanel
);
}
});
}
})
.
on
(
"
keyup
"
,
function
(
e
)
{
// 46=Suppr
var
activesession
=
_metExploreViz
.
getSessionById
(
_MyThisGraphNode
.
activePanel
);
if
(
_MyThisGraphNode
.
charKey
==
46
&&
activesession
.
getSelectedNodes
().
length
>
0
&&
metExploreD3
.
GraphNetwork
.
focus
)
{
metExploreD3
.
displayMessageYesNo
(
"
Selected nodes
"
,
'
Do you want remove selected nodes?
'
,
function
(
btn
)
{
if
(
btn
==
"
yes
"
)
{
metExploreD3
.
GraphNetwork
.
removeSelectedNode
(
_MyThisGraphNode
.
activePanel
)
}
});
}
_MyThisGraphNode
.
charKey
=
'
none
'
;
_MyThisGraphNode
.
ctrlKey
=
d3
.
event
.
ctrlKey
;
});
},
};
resources/lib/functions/GraphPath.js
deleted
100644 → 0
View file @
7ea5a8c0
/**
* @author MC
* (a)description : Drawing links
*/
metExploreD3
.
GraphPath
=
{
panelParent
:
""
,
/**********************************************/
// INIT FUNCTIONS
/**********************************************/
delayedInitialisation
:
function
(
parent
)
{
metExploreD3
.
GraphLink
.
panelParent
=
parent
;
},
/*******************************************
* Init the visualization of links
* @param {} parent : The panel where the action is launched
* @param {} session : Store which contains global characteristics of session
* @param {} linkStyle : Store which contains links style
* @param {} metaboliteStyle : Store which contains metabolites style
*/
refreshLink
:
function
(
parent
,
session
,
linkStyle
,
metaboliteStyle
)
{
metExploreD3
.
GraphLink
.
panelParent
=
"
#
"
+
parent
;
var
networkData
=
session
.
getD3Data
();
var
size
=
20
;
// The y-axis coordinate of the reference point which is to be aligned exactly at the marker position.
var
refY
=
linkStyle
.
getMarkerWidth
()
/
2
;
// The x-axis coordinate of the reference point which is to be aligned exactly at the marker position.
// var refX = linkStyle.getMarkerHeight / 2;
// Adding arrow on links
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
append
(
"
svg:defs
"
).
selectAll
(
"
marker
"
)
.
data
([
"
in
"
,
"
out
"
])
.
enter
().
append
(
"
svg:marker
"
)
.
attr
(
"
id
"
,
String
)
.
attr
(
"
viewBox
"
,
"
0 0
"
+
linkStyle
.
getMarkerWidth
()
+
"
"
+
linkStyle
.
getMarkerHeight
())
.
attr
(
"
refY
"
,
refY
)
.
attr
(
"
markerWidth
"
,
linkStyle
.
getMarkerWidth
())
.
attr
(
"
markerHeight
"
,
linkStyle
.
getMarkerHeight
())
.
attr
(
"
orient
"
,
"
auto
"
)
.
append
(
"
svg:path
"
)
.
attr
(
"
class
"
,
String
)
.
attr
(
"
d
"
,
"
M0,0L
"
+
linkStyle
.
getMarkerWidth
()
+
"
,
"
+
linkStyle
.
getMarkerHeight
()
/
2
+
"
L0,
"
+
linkStyle
.
getMarkerWidth
()
+
"
Z
"
)
.
style
(
"
visibility
"
,
"
hidden
"
);
// .attr("d", "M"+linkStyle.getMarkerWidth()+" "+linkStyle.getMarkerHeight()/2+" L"+linkStyle.getMarkerWidth()/2+" "+(3*linkStyle.getMarkerHeight()/4)+" A"+linkStyle.getMarkerHeight()+" "+linkStyle.getMarkerHeight()+" 0 0 0 "+linkStyle.getMarkerWidth()/2+" "+(1*linkStyle.getMarkerHeight()/4)+" L"+linkStyle.getMarkerWidth()+" "+linkStyle.getMarkerHeight()/2+"Z")
// Append link on panel
metExploreD3
.
GraphLink
.
link
=
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
line
"
)
.
data
(
networkData
.
getLinks
())
.
enter
()
.
append
(
"
line
"
)
.
attr
(
"
class
"
,
"
link
"
).
classed
(
"
reaction
"
,
true
)
//it comes from resources/css/networkViz.css
.
attr
(
"
marker-end
"
,
function
(
d
)
{
if
(
d
.
interaction
==
"
out
"
)
{
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
select
(
"
#
"
+
d
.
interaction
)
.
attr
(
"
refX
"
,
(
metaboliteStyle
.
getWidth
()
+
metaboliteStyle
.
getHeight
())
/
2
/
2
+
(
linkStyle
.
getMarkerWidth
()
))
.
style
(
"
fill
"
,
linkStyle
.
getMarkerOutColor
())
.
style
(
"
stroke
"
,
linkStyle
.
getMarkerStrokeColor
())
.
style
(
"
stroke-width
"
,
linkStyle
.
getMarkerStrokeWidth
());
return
"
url(#
"
+
d
.
interaction
+
"
)
"
;
}
else
{
return
"
none
"
;
}
})
.
attr
(
"
marker-start
"
,
function
(
d
)
{
if
(
d
.
interaction
==
"
out
"
)
{
return
"
none
"
;
}
else
{
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
select
(
"
#
"
+
d
.
interaction
)
.
attr
(
"
refX
"
,
-
((
metaboliteStyle
.
getWidth
()
+
metaboliteStyle
.
getHeight
())
/
2
/
2
))
.
style
(
"
fill
"
,
linkStyle
.
getMarkerInColor
())
.
style
(
"
stroke
"
,
linkStyle
.
getMarkerStrokeColor
())
.
style
(
"
stroke-width
"
,
linkStyle
.
getMarkerStrokeWidth
());
return
"
url(#
"
+
d
.
interaction
+
"
)
"
;
}
})
.
style
(
"
stroke
"
,
linkStyle
.
getStrokeColor
());
},
/*******************************************
* Tick function of links
* @param {} panel : The panel where the action is launched
* @param {} scale = Ext.getStore('S_Scale').getStoreByGraphName(panel);
*/
tick
:
function
(
panel
,
scale
)
{
// If you want to use selection on compartments path
// d3.select("#"+metExploreD3.GraphNode.panelParent).select("#D3viz").select("graphComponent").selectAll("path")
d3
.
select
(
"
#
"
+
panel
).
select
(
"
#D3viz
"
).
selectAll
(
"
path
"
)
.
filter
(
function
(
d
){
return
d
!=
"
linkCaptionRev
"
})
.
attr
(
"
d
"
,
_metExploreViz
.
getSessionById
(
panel
).
groupPath
)
.
attr
(
"
transform
"
,
d3
.
select
(
"
#
"
+
panel
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
attr
(
"
transform
"
));
},
/*******************************************
* Init the visualization of links
* @param {} parent : The panel where the action is launched
* @param {} session : Store which contains global characteristics of session
* @param {} linkStyle : Store which contains links style
* @param {} metaboliteStyle : Store which contains metabolites style
*/
loadPath
:
function
(
parent
)
{
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
select
(
"
#graphComponent
"
).
selectAll
(
"
g.node
"
)
var
metabolites
=
metExploreD3
.
GraphPath
.
node
.
filter
(
function
(
d
){
return
d
.
getBiologicalType
()
==
'
metabolite
'
});
session
.
groups
=
d3
.
nest
().
key
(
function
(
d
)
{
return
d
.
getCompartment
();
}).
entries
(
metabolites
.
data
());
_metExploreViz
.
getSessionById
(
parent
).
groupPath
=
function
(
d
)
{
var
scale
=
metExploreD3
.
getScaleById
(
parent
);
if
(
d
.
values
.
length
>
0
)
{
if
(
d
.
values
.
length
>
2
)
{
return
"
M
"
+
d3
.
geom
.
hull
(
d
.
values
.
map
(
function
(
i
)
{
return
[
i
.
x
,
i
.
y
];
}))
.
join
(
"
L
"
)
+
"
Z
"
;
}
else
{
var
fakeNodes
=
[];
d
.
values
.
forEach
(
function
(
val
){
fakeNodes
.
push
([
val
.
x
,
val
.
y
]);
});
var
dx
,
dy
;
for
(
var
i
=
d
.
values
.
length
;
i
<
3
;
i
++
)
{
dx
=
d
.
values
[
0
].
x
*
(
1
+
0.00001
*
i
);
dy
=
d
.
values
[
0
].
y
*
(
1
+
0.000011
*
i
);
fakeNodes
.
push
([
dx
,
dy
]);
};
return
"
M
"
+
d3
.
geom
.
hull
(
fakeNodes
)
.
join
(
"
L
"
)
+
"
Z
"
;
}
}
};
metExploreD3
.
GraphPath
.
groupFill
=
function
(
d
,
i
)
{
// Sort compartiments store
metExploreD3
.
sortCompartmentInBiosource
();
var
color
;
// Change reactions stroke color by compartment
for
(
var
j
=
0
;
j
<
metExploreD3
.
getCompartmentInBiosourceLength
()
;
j
++
){
if
(
d
.
key
==
metExploreD3
.
getCompartmentInBiosourceSet
()[
j
].
getIdentifier
()
)
color
=
metExploreD3
.
getCompartmentInBiosourceSet
()[
j
].
getColor
();
}
return
color
;
};
var
pathTab
=
"
M0,0L10,10Z
"
;
// If you want to use selection on compartments path
// d3.select("#"+metExploreD3.GraphNode.panelParent).select("#D3viz").select("graphComponent").selectAll("path")
// .enter().insert("path", "g.node")
d3
.
select
(
"
#
"
+
parent
).
select
(
"
#D3viz
"
).
selectAll
(
"
path
"
)
.
filter
(
function
(
d
){
return
d
!=
"
linkCaptionRev
"
})
.
data
(
session
.
groups
)
.
attr
(
"
d
"
,
function
(
d
){
return
pathTab
;
})
.
enter
().
insert
(
"
path
"
,
"
:first-child
"
)
.
attr
(
"
class
"
,
function
(
d
){
return
d
.
key
;
})
.
attr
(
"
id
"
,
function
(
d
){
return
d
.
key
;
})
.
style
(
"
fill
"
,
metExploreD3
.
GraphPath
.
groupFill
)
.
style
(
"
stroke
"
,
metExploreD3
.
GraphPath
.
groupFill
)
.
style
(
"
stroke-width
"
,
40
)
.
style
(
"
stroke-linejoin
"
,
"
round
"
)
.
style
(
"
opacity
"
,
.
15
);
}
}
\ No newline at end of file
resources/lib/metExploreViz.js
View file @
8097c1a8
...
...
@@ -9,7 +9,6 @@ var metExploreD3 = {
GraphFunction
:
""
,
GraphMapping
:
""
,
GraphPanel
:
""
,
GraphPath
:
""
,
GraphNode
:
""
,
GraphStyleEdition
:
""
,
GraphColorScaleEditor
:
""
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment