Commit dadf82f4 authored by Clement Frainay's avatar Clement Frainay

Merged branch develop into feature/doi

parents e3b5dd51 697d8dcf
......@@ -7,7 +7,7 @@
/**
* The version of the application.
*/
"version": "2.6.3",
"version": "2.6.7",
/**
* The relative path to the application's markup file (html, jsp, asp, etc.).
......@@ -222,8 +222,7 @@
"js": [
{
"path": "app.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "metexploreviz.js"
......@@ -244,143 +243,115 @@
},
{
"path": "resources/lib/metExploreViz.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/NetworkVizSession.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/LinkData.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/NodeData.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/NetworkData.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/GeneralStyle.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/LinkStyle.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/MetaboliteStyle.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/ReactionStyle.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/Pathway.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/Compartment.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/Mapping.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/MappingData.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/Scale.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/ColorMapping.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/model/ComparedPanel.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/D3Extention.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphLink.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphNode.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphCaption.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphUtils.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphNetwork.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/Features.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphFunction.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphMapping.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphPanel.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphPath.js",
"bundle": true,
"update": "delta"
"bundle": true
},
{
"path": "resources/lib/functions/GraphStyleEdition.js",
"bundle": true,
"update": "delta"
"bundle": true
}
],
......@@ -620,8 +591,7 @@
*/
"cache": {
"enable": false,
"daelts": true
"enable": false
},
......
......@@ -46,7 +46,6 @@ text.reaction{
max-width: 200px;
}
.brush{
fill: #99BCE8;
fill-opacity: 0.1;
stroke: #99BCE8;
shape-rendering: crispEdges;
......
......@@ -165,7 +165,6 @@ metExploreD3.GraphFunction = {
},
horizontalAlign : function(panel) {
metExploreD3.GraphNode.fixSelectedNode();
var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes();
var yRef = _metExploreViz.getSessionById(panel).getD3Data().getNodeById(nodes[0]).y;
......@@ -193,16 +192,15 @@ metExploreD3.GraphFunction = {
}
}
})
metExploreD3.GraphNode.fixSelectedNode();
metExploreD3.GraphNetwork.tick(panel);
},
verticalAlign : function(panel) {
metExploreD3.GraphNode.fixSelectedNode();
var nodes = _metExploreViz.getSessionById(panel).getSelectedNodes();
var xRef = _metExploreViz.getSessionById(panel).getD3Data().getNodeById(nodes[0]).x;
var arrayNode = [];
d3.select("#"+panel).select("#D3viz").select("#graphComponent").selectAll("g.node")
.filter(function(node){
......@@ -213,7 +211,7 @@ metExploreD3.GraphFunction = {
node.px = xRef ;
node.x = xRef ;
});
arrayNode.sort(function(node1, node2){
return d3.ascending(node1.y, node2.y);
});
......@@ -225,8 +223,9 @@ metExploreD3.GraphFunction = {
node.y = arrayNode[i-1].y+30 ;
}
}
})
});
metExploreD3.GraphNode.fixSelectedNode();
metExploreD3.GraphNetwork.tick(panel);
},
......
......@@ -80,72 +80,75 @@ metExploreD3.GraphNetwork = {
}
// Control if the user can see all the graph
if (anim && previousScale>0.05 && session.isResizable()) {
var vizRect = document.getElementById(panel).getBoundingClientRect();
var graphComponent = d3.select("#"+panel).select("#D3viz").select('#graphComponent');
var graphComponentRect = d3.select("#"+panel).select("#D3viz").node().getElementById('graphComponent').getBoundingClientRect();
var width = parseInt(metExploreD3.GraphPanel.getHeight(panel));
var height = parseInt(metExploreD3.GraphPanel.getWidth(panel));
if(vizRect.top>graphComponentRect.top
|| vizRect.left>graphComponentRect.left
|| vizRect.bottom<graphComponentRect.bottom
|| vizRect.right<graphComponentRect.right)
{
var dataLength =session.getD3Data().getNodesLength();
var delay = 3000;
if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
delay = 3000;
metExploreD3.fixDelay(metExploreD3.GraphNetwork.task, delay);
var zoomListener = scale.getZoom();
var updateScale = 0.01*dataLength/100;
var newScale = previousScale-(previousScale*updateScale);
zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
var newWidth = newScale*width;
var newHeight = newScale*height;
var xScale = (width-newWidth)/2;
var yScale = (height-newHeight)/2;
zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale, yScale);
scale.setZoomScale(newScale);
}
else
{
if(!((vizRect.top+height/10>graphComponentRect.top && vizRect.bottom-height/10<graphComponentRect.bottom)
|| (vizRect.left+width/10>graphComponentRect.left && vizRect.right-width/10<graphComponentRect.right))){
var dataLength =session.getD3Data().getNodesLength();
var delay = 3000;
if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
delay = 3000;
metExploreD3.fixDelay(metExploreD3.GraphNetwork.task, delay);
var zoomListener = scale.getZoom();
if(updateScale==undefined) updateScale = 0.01;
else updateScale = updateScale/2;
var newScale = previousScale+(previousScale*updateScale);
zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
var newWidth = newScale*width;
var newHeight = newScale*height;
var xScale = (width-newWidth)/2;
var yScale = (height-newHeight)/2;
zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale,yScale);
scale.setZoomScale(newScale);
}
}
if (anim && alpha<0.1 && session.isResizable()) {
session.setResizable(false);
metExploreD3.GraphNetwork.task.cancel();
metExploreD3.GraphNetwork.rescale(panel);
// metExploreD3.GraphNetwork.task.cancel();
// var vizRect = document.getElementById(panel).getBoundingClientRect();
// var graphComponent = d3.select("#"+panel).select("#D3viz").select('#graphComponent');
// var graphComponentRect = d3.select("#"+panel).select("#D3viz").node().getElementById('graphComponent').getBoundingClientRect();
//
// var width = parseInt(metExploreD3.GraphPanel.getHeight(panel));
// var height = parseInt(metExploreD3.GraphPanel.getWidth(panel));
//
// if(vizRect.top>graphComponentRect.top
// || vizRect.left>graphComponentRect.left
// || vizRect.bottom<graphComponentRect.bottom
// || vizRect.right<graphComponentRect.right)
// {
// var dataLength =session.getD3Data().getNodesLength();
// var delay = 3000;
// if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
// delay = 3000;
//
//
//
// var zoomListener = scale.getZoom();
//
// var updateScale = 0.01*dataLength/100;
// var newScale = previousScale-(previousScale*updateScale);
// zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
//
// var newWidth = newScale*width;
// var newHeight = newScale*height;
// var xScale = (width-newWidth)/2;
// var yScale = (height-newHeight)/2;
// zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale, yScale);
//
// scale.setZoomScale(newScale);
//
// }
// else
// {
// if(!((vizRect.top+height/10>graphComponentRect.top && vizRect.bottom-height/10<graphComponentRect.bottom)
// || (vizRect.left+width/10>graphComponentRect.left && vizRect.right-width/10<graphComponentRect.right))){
// var dataLength =session.getD3Data().getNodesLength();
// var delay = 3000;
// if (dataLength < generalStyle.getReactionThreshold() || !generalStyle.isDisplayedLabelsForOpt())
// delay = 3000;
//
// metExploreD3.fixDelay(metExploreD3.GraphNetwork.task, delay);
//
// var zoomListener = scale.getZoom();
//
// if(updateScale==undefined) updateScale = 0.01;
// else updateScale = updateScale/2;
//
// var newScale = previousScale+(previousScale*updateScale);
// zoomListener.scaleBy(d3.select("#"+panel).select("#D3viz"), newScale);
//
// var newWidth = newScale*width;
// var newHeight = newScale*height;
// var xScale = (width-newWidth)/2;
// var yScale = (height-newHeight)/2;
//
// zoomListener.translateBy(d3.select("#"+panel).select("#D3viz"), xScale,yScale);
//
// scale.setZoomScale(newScale);
//
// }
// }
}
}
},
......@@ -169,9 +172,12 @@ metExploreD3.GraphNetwork = {
// else d3.select("#"+panelLinked).select("#D3viz").select("#graphComponent").selectAll('text').classed("hide", false);
if(d3EventSourceEvent !==null)
if(d3EventSourceEvent.type==='wheel')
if(d3EventSourceEvent !==null){
if(d3EventSourceEvent.type==='wheel'){
session.setResizable(false);
metExploreD3.GraphNetwork.task.cancel();
}
}
// if visualisation is actived we add item to menu
if(session.isActive()){
......@@ -890,6 +896,7 @@ metExploreD3.GraphNetwork = {
session.setResizable(true);
metExploreD3.GraphNetwork.task = metExploreD3.createDelayedTask(
function(){
metExploreD3.GraphNetwork.rescale(panel);
session.setResizable(false);
}
);
......@@ -994,8 +1001,8 @@ metExploreD3.GraphNetwork = {
.force('x', forceX)
.force('y', forceY)
.force("collide", forceCollide)
.alphaDecay(0.1)
.velocityDecay(0.2);
.alphaDecay(0.02)
.velocityDecay(0.1);
session.setForce(force);
......@@ -1106,6 +1113,7 @@ metExploreD3.GraphNetwork = {
if(force.alpha() >= .005 /*&& force.alpha() < .06*/){
setTimeout(metExploreD3.GraphNetwork.tick(panel), 0);
if(metExploreD3.GraphNetwork.first){
metExploreD3.fixDelay(metExploreD3.GraphNetwork.task, 6000);
metExploreD3.GraphNetwork.refreshViz(panel);
metExploreD3.GraphNetwork.first=false;
}
......@@ -1170,7 +1178,7 @@ metExploreD3.GraphNetwork = {
}, 200);
},
rescale : function(panel){
rescale : function(panel, func){
var mask = metExploreD3.createLoadMask("Rescaling graph", panel);
metExploreD3.showMask(mask);
......@@ -1263,6 +1271,7 @@ metExploreD3.GraphNetwork = {
scaleViz.setZoomScale(scale);
metExploreD3.hideMask(mask);
if (func) func();
}), scale);
});
},
......
......@@ -1352,74 +1352,23 @@ metExploreD3.GraphNode = {
metExploreD3.displayMessage("Warning", 'The node "' + selectedVal + '" doesn\'t exist.')
}
else {
metExploreD3.GraphNetwork.rescale("viz", function(){
var scaleViz = metExploreD3.getScaleById("viz");
var zoom = scaleViz.getZoom();
var scaleViz = metExploreD3.getScaleById("viz");
var zoom = scaleViz.getZoom();
d3.select("#viz").select("#D3viz").select("#graphComponent")
.transition()
.duration(750)
.attr("transform", "translate(0,0)scale(1)")
.each(function () {
zoom.translateBy( d3.select("#viz").select("#D3viz"),0 ,0);
zoom.scaleBy(d3.select("#viz").select("#D3viz"),1);
scaleViz.setZoomScale(1);
var maxX = -100000;
var maxY = -100000;
var minX = 100000;
var minY = 100000;
selected.each(
function (aSelectedNode) {
if (maxX < aSelectedNode.x)
maxX = aSelectedNode.x;
if (maxY < aSelectedNode.y)
maxY = aSelectedNode.y;
if (minX > aSelectedNode.x)
minX = aSelectedNode.x;
if (minY > aSelectedNode.y)
minY = aSelectedNode.y;
});
var dx = maxX - minX,
dy = maxY - minY;
var rectPanel = d3.select("#viz").select("#D3viz").node().getBoundingClientRect();
var width = parseInt(metExploreD3.GraphPanel.getWidth("viz").replace("px", ""));
var height = parseInt(metExploreD3.GraphPanel.getHeight("viz").replace("px", ""));
// var scale = 1;
var scale = (Math.min(height / dy, width / dx)) * 0.7;
var transX = scale * (rectPanel.left - minX);
var transY = scale * (rectPanel.top - minY);
d3.select("#viz").select("#D3viz").select("#graphComponent")
.transition()
.duration(750)
.attr("transform", "translate(" + transX + "," + transY + ")scale(" + scale + ")")
.each(function () {
metExploreD3.GraphLink.tick("viz", scale);
metExploreD3.GraphNode.tick("viz");
metExploreD3.hideMask(mask);
});
zoom.translateBy( d3.select("#viz").select("#D3viz"),transX ,transY);
zoom.scaleBy(d3.select("#viz").select("#D3viz"), scale);
scaleViz.setZoomScale(scale);
d3.select("#viz").select("#D3viz").select("#graphComponent")
.transition()
.duration(750)
.attr("transform", "translate(0,0)scale(1)")
.each(function () {
selected.each(
function (aSelectedNode) {
_MyThisGraphNode.highlightANode(aSelectedNode, 'viz');
selected.each(
function (aSelectedNode) {
_MyThisGraphNode.highlightANode(aSelectedNode, 'viz');
});
});
metExploreD3.hideMask(mask);
});
});
});
}
},
......@@ -1717,9 +1666,24 @@ metExploreD3.GraphNode = {
return d.getBiologicalType() === 'reaction';
})
.addNodeText(reactionStyle);
}
}
metExploreD3.GraphNode.updatedNodes
.each(function (d) {
// set corresponding event handler
var name = reactionStyle.getDisplayLabel(d, reactionStyle.getLabel());
metExploreD3.GraphStyleEdition.changeNodeLabel(d, parent, name);
if (metExploreD3.GraphStyleEdition.editMode == true) {
metExploreD3.GraphStyleEdition.startDragLabel(parent);
}
else {
metExploreD3.GraphStyleEdition.endDragLabel(parent);
metExploreD3.GraphNode.applyEventOnNode(parent);
}
});
metExploreD3.GraphNode.updatedNodes
.filter(function (d) {
......
......@@ -48,6 +48,7 @@ metExploreD3.GraphPanel = {
* To resize svg viz when layout is modified
*/
resizeViz : function(panel){
console.log("resizeViz");
var scale = metExploreD3.getScaleById(panel);
if(scale!=undefined){
......@@ -116,59 +117,6 @@ metExploreD3.GraphPanel = {
d3.select("#metexplore").text('MetExploreViz').attr('x', $("#viz").width() - 112).attr(
'y', $("#viz").height() - 10);
if(session!=undefined)
{
if(session.isLinked()){
var sessionMain = _metExploreViz.getSessionById("viz");
var force = sessionMain.getForce();
if(force!=undefined){
var h = $("#viz").height();
var w = $("#viz").width();
var forceX = d3.forceX()
.x(w/2)
.strength(0.006);
var forceY = d3.forceY()
.y(h/2)
.strength(0.006);
force
.force('x', forceX)
.force('y', forceY);
var anim=d3.select("#viz").select("#buttonAnim").attr("animation");
if(anim=="true")
force.alpha(1).restart();
}
}
else
{
var force = session.getForce();
if(force!=undefined){
var h = $("#"+panel).height();
var w = $("#"+panel).width();
var forceX = d3.forceX()
.x(w/2)
.strength(0.006);
var forceY = d3.forceY()
.y(h/2)
.strength(0.006);
force
.force('x', forceX)
.force('y', forceY);
if(d3.select("#"+panel).select("#buttonAnim").node()){
var anim=d3.select("#"+panel).select("#buttonAnim").attr("animation");
if(anim=="true")
force.alpha(1).restart();
}
}
}
}
}
},
......@@ -177,15 +125,17 @@ metExploreD3.GraphPanel = {
* @param {} panel : active panel
*/
resizePanels : function(panel){
console.log("resizePanels");
var sessionsStore = _metExploreViz.getSessionsSet();
var session = _metExploreViz.getSessionById(panel);
var h = $("#"+panel).height();
var w = $("#"+panel).width();
console.log(d3.select("#"+panel).select("#D3viz").select("#buttonZoomIn"));
if(d3.select("#"+panel).select("#D3viz").select("#buttonZoomIn")[0]!=null
&& d3.select("#"+panel).select("#D3viz").select("#buttonZoomOut")[0]!=null
&& d3.select("#"+panel).select("#D3viz").select("#buttonHand")[0]!=null)
if(d3.select("#"+panel).select("#D3viz").select("#buttonZoomIn").node()!=null
&& d3.select("#"+panel).select("#D3viz").select("#buttonZoomOut").node()!=null
&& d3.select("#"+panel).select("#D3viz").select("#buttonHand").node()!=null)
{
var x = d3
.select("#"+panel)
......@@ -251,10 +201,6 @@ metExploreD3.GraphPanel = {
.scaleExtent([ 0.01, 30 ])
.extent([[w*.45, h*.45], [w*.55, h*.55]])
.translateExtent([[-w*2, -h*2], [w*3, h*3]]);
var anim=d3.select("#viz").select("#buttonAnim").attr("animation");
if(anim=="true")