Skip to content

GitLab

Commit 8097c1a8 authored by maxchaza's avatar maxchaza
Browse files

Refactoring

parent 7ea5a8c0
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:"",
......
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