Commit 47711c9c authored by Maxime Chazalviel's avatar Maxime Chazalviel
Browse files

Allows selection & collapse pathways.

Refactor brushing
parent e8903c4e
......@@ -48,46 +48,57 @@ Ext.define('metExploreViz.view.panel.viz.VizController', {
|| e.target.parentNode.parentNode.id=="D3viz"
|| e.target.parentNode.id=="graphComponent")
{
if(networkVizSessionStore.getSelectedNodes().length!=0)
{
viz.CtxMenu = new Ext.menu.Menu({
items : [{
text : 'Remove selected nodes',
hidden : false,
iconCls:"removeNode",
handler :function(){ metExploreD3.GraphNetwork.removeSelectedNode("viz") }
},{
text : 'Fix selected nodes',
hidden : false,
iconCls:"lock_font_awesome",
handler :function(){ metExploreD3.GraphNode.fixSelectedNode("viz") }
},{
text : 'Duplicate selected nodes as side compounds',
hidden : false,
iconCls:"duplicate-sideCompounds",
handler : function(){
metExploreD3.GraphNetwork.duplicateSideCompoundsSelected("viz");
}
viz.CtxMenu = new Ext.menu.Menu({
items : [{
text : 'Collapse selected pathway(s)',
hidden : networkVizSessionStore.getSelectedPathways().length===0,
iconCls:"removeNode",
handler :function(){
console.log("pass");
var sessionStore = _metExploreViz.getSessionById("viz");
sessionStore.getSelectedPathways().forEach(function (path) {
metExploreD3.GraphNetwork.collapsePathway(path);
});
sessionStore.removeAllSelectedPathways();
}
,{
text : 'Select selected nodes in table',
hidden : !metExploreD3.getGeneralStyle().hasEventForNodeInfo(),
iconCls:"search",
handler : function() {
var selectedNodesIds = networkVizSessionStore.getSelectedNodes();
var selectedNodesObj = [];
networkData = networkVizSessionStore.getD3Data();
selectedNodesIds.forEach(function(id){
var node = networkData.getNodeById(id);
if(node)
selectedNodesObj.push(node);
})
metExploreD3.fireEventParentWebSite("selectNodesInTable", selectedNodesObj);
}
}]
});
}
},{
text : 'Remove selected nodes',
hidden : networkVizSessionStore.getSelectedNodes().length===0,
iconCls:"removeNode",
handler :function(){ metExploreD3.GraphNetwork.removeSelectedNode("viz") }
},{
text : 'Fix selected nodes',
hidden : networkVizSessionStore.getSelectedNodes().length===0,
iconCls:"lock_font_awesome",
handler :function(){ metExploreD3.GraphNode.fixSelectedNode("viz") }
},{
text : 'Duplicate selected nodes as side compounds',
hidden : networkVizSessionStore.getSelectedNodes().length===0,
iconCls:"duplicate-sideCompounds",
handler : function(){
metExploreD3.GraphNetwork.duplicateSideCompoundsSelected("viz");
}
}
,{
text : 'Select selected nodes in table',
hidden : !metExploreD3.getGeneralStyle().hasEventForNodeInfo() && networkVizSessionStore.getSelectedNodes().length===0,
iconCls:"search",
handler : function() {
var selectedNodesIds = networkVizSessionStore.getSelectedNodes();
var selectedNodesObj = [];
networkData = networkVizSessionStore.getD3Data();
selectedNodesIds.forEach(function(id){
var node = networkData.getNodeById(id);
if(node)
selectedNodesObj.push(node);
})
metExploreD3.fireEventParentWebSite("selectNodesInTable", selectedNodesObj);
}
}]
});
}
else
{
......@@ -224,10 +235,12 @@ Ext.define('metExploreViz.view.panel.viz.VizController', {
});
}
}
var a=viz.CtxMenu.items.items.filter(menu=>!menu.hidden);
// positionner le menu au niveau de la souris
if(viz.CtxMenu!=undefined)
viz.CtxMenu.showAt(e.clientX, e.clientY);
if(a.length>0)
viz.CtxMenu.showAt(e.clientX, e.clientY);
});
}
......
This diff is collapsed.
......@@ -483,8 +483,8 @@ metExploreD3.GraphNode = {
dragend : function(d, i) {
var session = _metExploreViz.getSessionById(_MyThisGraphNode.activePanel);
var mainSession = _metExploreViz.getSessionById("viz");
if(session!=undefined)
if(session!=undefined)
{
if(session.isLinked()){
......@@ -1741,11 +1741,19 @@ metExploreD3.GraphNode = {
unselectAll : function(me) {
var session = _metExploreViz.getSessionById(_MyThisGraphNode.activePanel);
d3.select(me).select("#graphComponent")
.selectAll("g.node")
.filter(function(d) { return d.isSelected(); })
.each(function(d) { _MyThisGraphNode.selection(d, _MyThisGraphNode.activePanel); });
session.removeAllSelectedNodes();
d3.select(me).selectAll("path.convexhull")
.style("stroke", metExploreD3.GraphNode.groupFill)
.style("stroke-width", 40)
.style("stroke-linejoin", "round");
session.removeAllSelectedPathways();
},
unselectIfDBClick : function() {
......@@ -2502,18 +2510,59 @@ metExploreD3.GraphNode = {
d3.select("#"+parent).select("#D3viz").selectAll("path.convexhull")
.data(session.groups)
.enter()
.insert("path", ":first-child")
.insert("path", ":first-child")
.attr("class", String)
.attr("d", function(d){ return pathTab; })
.attr("class", function(d){ return d.key; })
.classed("convexhull", true)
.attr("id", function(d){ return d.key; })
.style("fill", metExploreD3.GraphNode.groupFill)
.style("stroke", metExploreD3.GraphNode.groupFill)
.style("stroke-width", 40)
.style("stroke-linejoin", "round")
.style("opacity", .15)
.attr("class", function(d){ return d.key; })
.classed("convexhull", true)
.attr("id", function(d){ return d.key; })
.style("fill", metExploreD3.GraphNode.groupFill)
.style("stroke", metExploreD3.GraphNode.groupFill)
.style("stroke-width", 40)
.style("stroke-linejoin", "round")
.style("opacity", .15)
.on("mouseup", function(d) {
if(d3.event.which!==3){
var extent = metExploreD3.GraphNetwork.brushEvnt.extent();
if(extent[1][0]-extent[0][0]<20 && extent[1][1]-extent[0][1]<20)
{
if(d.isSelected){
d.isSelected=false;
session.removeSelectedPathway(d.key);
d3.select(this)
.style("stroke", metExploreD3.GraphNode.groupFill)
.style("stroke-width", 40)
.style("stroke-linejoin", "round")
}
else
{
d.isSelected=true;
session.addSelectedPathway(d.key);
d3.select(this)
.style("stroke", "black")
.style("stroke-width", 10)
.style("stroke-linejoin", "round")
}
}
}
else
{
if(d3.event.which===3){
var extent = metExploreD3.GraphNetwork.brushEvnt.extent();
if(extent[1][0]-extent[0][0]<20 && extent[1][1]-extent[0][1]<20)
{
if(!d.isSelected){
d.isSelected=true;
session.addSelectedPathway(d.key);
d3.select(this)
.style("stroke", "black")
.style("stroke-width", 10)
.style("stroke-linejoin", "round")
}
}
}
}
})
},
/*******************************************
......
......@@ -70,7 +70,7 @@ metExploreD3.GraphPanel = {
// scale
// .getStoreByGraphName(panel)
// .setScale(xScale, yScale, 1, 1, 1, metExploreD3.GraphNetwork.zoomListener.scale(), metExploreD3.GraphNetwork.zoomListener);
// var brushing = false;
// metExploreD3.GraphNetwork.brushing = false;
d3.select("#"+panel).select('#D3viz').select('#brush')
.call(d3.svg.brush()
......@@ -119,7 +119,7 @@ metExploreD3.GraphPanel = {
}
}
brushing = true;
metExploreD3.GraphNetwork.brushing = true;
d3.select("#"+panel).select("#brush").classed("hide", false);
d3.select("#"+panel).select("#D3viz").on("mousedown.zoom", null);
nodeBrushed = d3.select("#"+panel).select("#graphComponent").selectAll("g.node");
......@@ -141,7 +141,7 @@ metExploreD3.GraphPanel = {
}
})
.on("brushend", function() {
if(d3.event.sourceEvent.button!=1 && brushing){
if(d3.event.sourceEvent.button!=1 && metExploreD3.GraphNetwork.brushing){
var extent = d3.event.target.extent();
if(extent[1][0]-extent[0][0]>20 || extent[1][1]-extent[0][1]>20){
......@@ -207,7 +207,7 @@ metExploreD3.GraphPanel = {
}
}
}
brushing = false;
metExploreD3.GraphNetwork.brushing = false;
}, 100);
}
}
......
......@@ -23,6 +23,7 @@ var NetworkVizSession = function(){
this.reactions = [];
this.resizable = false;
this.selectedNodes = [];
this.selectedPathways = [];
};
NetworkVizSession.prototype = {
......@@ -143,6 +144,11 @@ NetworkVizSession.prototype = {
this.selectedNodes = [];
this.selectedNodes.push(nodeId);
},
addSelectedPathway : function(pathid){
if(this.selectedPathways==undefined)
this.selectedPathways = [];
this.selectedPathways.push(pathid);
},
addMappedNode : function(nodeId){
if(this.nodesMap==undefined)
this.nodesMap = [];
......@@ -199,6 +205,7 @@ NetworkVizSession.prototype = {
this.emptyMetabolites();
this.emptyReactions();
this.selectedNodes = [];
this.selectedPathways = [];
this.groups = [];
this.nodesMap = [];
},
......@@ -350,6 +357,30 @@ NetworkVizSession.prototype = {
return this.selectedNodes;
},
//Clearly not optimal...
removeSelectedPathway:function(pathwayId){
var found=false;
var i=0;
while(!found)
{
if(this.selectedPathways[i]==pathwayId)
{
this.selectedPathways.splice(i,1);
found=true;
}
i++;
}
//console.log(this.PathwayNodes);
},
removeAllSelectedPathways:function(){
this.selectedPathways = [];
},
getSelectedPathways:function(){
return this.selectedPathways;
},
//Clearly not optimal...
removeDuplicatedNode:function(nodeId){
var found=false;
......
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