opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9547 from anuprulez/fix_svg

Browse Source 
Resize D3 tree and make it responsive
This commit is contained in:
John Chilton
2020-03-22 09:26:12 -04:00
committed by GitHub
parent 08ebeb207e 867c2c919c
commit 7d250bfe96
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/components/ToolRecommendation.vue
+22 -8
View File
@@ -105,20 +105,34 @@ export default {
},
renderD3Tree(predictedTools) {
const duration = 750;
const x = 620;
const y = 260;
const tree = d3.layout.tree().size([y, x]);
const diagonal = d3.svg.diagonal().projection(d => {
return [d.y, d.x];
});
const svg = d3
.select("#tool-recommendation")
.append("svg")
.attr("class", "tree-size")
.append("g")
.attr("transform", "translate(" + 250 + "," + 20 + ")");
.append("g");
let i = 0;
let root = null;
let x = 0;
let y = 0;
let translateX = 0;
const gElem = svg[0][0];
const svgElem = gElem.parentNode;
const clientH = svgElem.clientHeight;
const clientW = svgElem.clientWidth;
y = parseInt(clientH * 0.9);
x = parseInt(clientW * 0.6);
translateX = parseInt(clientW * 0.15);
svgElem.setAttribute("viewBox", "0 0 " + x + " " + clientH);
svgElem.setAttribute("preserveAspectRatio", "xMinYMin");
gElem.setAttribute("transform", "translate(" + translateX + ", 5)");
const tree = d3.layout.tree().size([y, x]);
const diagonal = d3.svg.diagonal().projection(d => {
return [d.y, d.x];
});
const update = source => {
// Compute the new tree layout.
const nodes = tree.nodes(root).reverse();
client/galaxy/style/scss/base.scss
+4 -5
View File
@@ -1658,10 +1658,10 @@ body.reports {
circle {
fill: lighten($brand-primary, 20%);
stroke: lighten($brand-primary, 20%);
stroke-width: 0.3rem;
stroke-width: 0.1rem;
}
text {
font: 0.75rem sans-serif;
font: 0.4rem sans-serif;
}
}
@@ -1674,14 +1674,13 @@ body.reports {
}
.tree-size {
width: 96%;
width: 100%;
height: 50%;
position: absolute;
}
.link {
fill: none;
stroke: lighten($brand-primary, 20%);
stroke-width: 0.3rem;
stroke-width: 0.2rem;
}
}