Skip to content
Snippets Groups Projects
Commit 6400d8eb authored by juanf's avatar juanf
Browse files

BIS-604 / SP-1211: ELN UI - Hierarchical View (Zoom and Pan Controls) 

SVN: 30801
parent 632dda89
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/css/style.css
+ 5
− 0
View file @ 6400d8eb
......@@ -422,6 +422,11 @@ table.downloads {
fill: none;
}
.svgButton:hover {
fill: #005580;
stroke: #005580;
}
/*
* Storage Widget
*/
......
plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleHierarchy.js
+ 71
− 8
View file @ 6400d8eb
......@@ -137,11 +137,12 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
.append($filtersFormSliderParents)
.append("<span style='padding-right:15px;'></span>")
.append(' Show Types: ')
.append($filtersFormSampleTypes);
.append($filtersFormSampleTypes)
.append("<span style='position:absolute; left:30px; top:80px;'><svg height='100' width='100'><g id='svgControls'/></svg></span>");
$('#'+this.containerId).append($filtersForm);
$('#'+this.containerId).append($('<div>', { 'id' : 'graphContainer' }));
$('#graphContainer').append("<svg><g transform='translate(20,20)'/></svg>");
$('#graphContainer').append("<svg id='svgMapContainer'><g id='svgMap' transform='translate(20,20) scale(1)'/></svg>");
$('#childrenLimit').slider();
$('#childrenLimit').slider().on('slideStop', function(event){
......@@ -159,6 +160,29 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
});
this._filterSampleAndUpdate();
//Add SVG Map Controls
var path1 = this._makeSVG('path', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.pan( 0, 50);', 'd':'M50 10 l12 20 a40, 70 0 0,0 -24, 0z', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var path2 = this._makeSVG('path', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.pan( 50, 0);', 'd':'M10 50 l20 -12 a70, 40 0 0,0 0, 24z', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var path3 = this._makeSVG('path', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.pan( 0,-50);', 'd':'M50 90 l12 -20 a40, 70 0 0,1 -24, 0z', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var path4 = this._makeSVG('path', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.pan(-50, 0);', 'd':'M90 50 l-20 -12 a70, 40 0 0,1 0, 24z', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var circle2 = this._makeSVG('circle', {'cx':'50', 'cy':'50', 'r':'20', 'stroke':'#000', 'stroke-width':'1.5', 'fill':'#fff', 'opacity':'0.75'});
var rect1 = this._makeSVG('rect', {'x':'46', 'y':'39.5', 'width':'8', 'height':'3' , 'fill':'#fff', 'style' : 'pointer-events: none;'});
var rect2 = this._makeSVG('rect', {'x':'46', 'y':'57.5', 'width':'8', 'height':'3' , 'fill':'#fff', 'style' : 'pointer-events: none;'});
var rect3 = this._makeSVG('rect', {'x':'48.5', 'y':'55', 'width':'3', 'height':'8' , 'fill':'#fff', 'style' : 'pointer-events: none;'});
var circle3 = this._makeSVG('circle', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.zoom(0.8)', 'cx':'50', 'cy':'41', 'r':'8', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var circle4 = this._makeSVG('circle', {'class' : 'svgButton', 'stroke-linecap':'round', 'stroke-miterlimit':'6', 'onclick':'javascript:mainController.currentView.zoom(1.25)', 'cx':'50', 'cy':'59', 'r':'8', 'stroke-width':'1.5', 'fill':'#0088CC', 'stroke': '#0088CC' });
var svgControls = $("#svgControls")
.append(path1)
.append(path2)
.append(path3)
.append(path4)
.append(circle2)
.append(circle3)
.append(circle4)
.append(rect1)
.append(rect2)
.append(rect3);
}
this._filterSampleAndUpdate = function() {
......@@ -380,7 +404,7 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
addSampleEdges(sample);
// Render the directed graph
var svg = d3.select('svg');
var svgG = d3.select('#svgMap');
var renderer = new dagreD3.Renderer();
// Custom transition function
......@@ -394,15 +418,54 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
.nodeSep(20)
.rankDir("TB");
var layout = renderer.layout(layout).run(g, svg.select('g'));
transition(d3.select('svg'))
//Render Layout
renderer.layout(layout).run(g, svgG);
transition(d3.select('#svgMapContainer'))
.attr('width', $(document).width() - 30)
.attr('height', $(document).height() - 120)
d3.select('svg')
d3.select('#svgMapContainer')
.call(d3.behavior.zoom().on('zoom', function() {
var ev = d3.event;
svg.select('g').attr('transform', 'translate(' + ev.translate + ') scale(' + ev.scale + ')');
}));
svgG.attr('transform', 'translate(' + ev.translate + ') scale(' + ev.scale + ')');
})).on("dblclick.zoom", null);
}
this._makeSVG = function(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
//
// Zoom and Pan controls
//
this.pan = function(dx, dy)
{
var svgTransform = d3.select('#svgMap').attr("transform");
var svgTransformTranslate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(svgTransform);
var translateX = parseFloat(svgTransformTranslate[1]) + dx;
var translateY = parseFloat(svgTransformTranslate[2]) + dy;
var svgTransformScale = /scale\(([^\s,)]+)/.exec(svgTransform);
var scaleRatio = parseFloat(svgTransformScale[1]);
d3.select('#svgMap').attr('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + scaleRatio + ')');
}
this.zoom = function(scale)
{
var svgTransform = d3.select('#svgMap').attr("transform");
var svgTransformTranslate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(svgTransform);
var translateX = parseFloat(svgTransformTranslate[1]);
var translateY = parseFloat(svgTransformTranslate[2]);
var svgTransformScale = /scale\(([^\s,)]+)/.exec(svgTransform);
var scaleRatio = parseFloat(svgTransformScale[1]) * scale;
d3.select('#svgMap').attr('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + scaleRatio + ')');
}
}
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