From 762e4efe69ebd158e58bed503aeacfe129479a23 Mon Sep 17 00:00:00 2001 From: Anup Kumar Date: Sat, 21 Mar 2020 19:14:36 +0100 Subject: [PATCH 1/3] Center svg and responsive --- .../scripts/components/ToolRecommendation.vue | 44 +++++++++++++++---- client/galaxy/style/scss/base.scss | 5 +-- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/client/galaxy/scripts/components/ToolRecommendation.vue b/client/galaxy/scripts/components/ToolRecommendation.vue index 880f3aa93cb..84ea88541cc 100644 --- a/client/galaxy/scripts/components/ToolRecommendation.vue +++ b/client/galaxy/scripts/components/ToolRecommendation.vue @@ -105,20 +105,48 @@ 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 x = 0 //620; + //const y = 0 //260; const svg = d3 .select("#tool-recommendation") .append("svg") .attr("class", "tree-size") - .append("g") - .attr("transform", "translate(" + 250 + "," + 20 + ")"); + .append("g"); + //.attr("transform", "translate(" + 250 + "," + 20 + ")"); let i = 0; let root = null; + let x = 0, + y = 0, + translateX = 0, + clientH = 0, + clientW = 0; + + //.attr("viewBox", "0 0 " + w + " " + h ) + //.attr("preserveAspectRatio", "xMinYMin meet") + + console.log(svg); + + // temp1[0]["0"].parentNode.setAttribute("viewBox", "50 0 427 146") + + clientH = svg[0]["0"].parentNode.clientHeight; + clientW = svg[0]["0"].parentNode.clientWidth; + y = parseInt(clientH * 0.5); + x = parseInt(clientW * 0.5); + translateX = parseInt(clientW * 0.2); + + console.log(clientH, clientW, y, x); + console.log(translateX); + + let svgElem = svg[0][0].parentNode; + svgElem.setAttribute("viewBox", "0 0 " + x + " " + y); + svgElem.setAttribute("preserveAspectRatio", "xMinYMin"); + svg[0][0].setAttribute("transform", "translate(" + translateX + ", 0)"); + + 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(); diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss index ac567172780..8d1ef127dc3 100644 --- a/client/galaxy/style/scss/base.scss +++ b/client/galaxy/style/scss/base.scss @@ -1661,7 +1661,7 @@ body.reports { stroke-width: 0.3rem; } text { - font: 0.75rem sans-serif; + font: 0.4rem sans-serif; } } @@ -1675,8 +1675,7 @@ body.reports { .tree-size { width: 96%; - height: 50%; - position: absolute; + height: 40%; } .link { From c4bbda6958b455c32e8f7ab7bca965a3e5852e82 Mon Sep 17 00:00:00 2001 From: Anup Kumar Date: Sat, 21 Mar 2020 23:28:55 +0100 Subject: [PATCH 2/3] responsive d3 tree --- .../scripts/components/ToolRecommendation.vue | 39 +++++++------------ client/galaxy/style/scss/base.scss | 10 ++--- 2 files changed, 19 insertions(+), 30 deletions(-) diff --git a/client/galaxy/scripts/components/ToolRecommendation.vue b/client/galaxy/scripts/components/ToolRecommendation.vue index 84ea88541cc..c5a5d93639e 100644 --- a/client/galaxy/scripts/components/ToolRecommendation.vue +++ b/client/galaxy/scripts/components/ToolRecommendation.vue @@ -105,42 +105,31 @@ export default { }, renderD3Tree(predictedTools) { const duration = 750; - //const x = 0 //620; - //const y = 0 //260; const svg = d3 .select("#tool-recommendation") .append("svg") .attr("class", "tree-size") .append("g"); - //.attr("transform", "translate(" + 250 + "," + 20 + ")"); let i = 0; let root = null; - let x = 0, - y = 0, - translateX = 0, - clientH = 0, - clientW = 0; - - //.attr("viewBox", "0 0 " + w + " " + h ) - //.attr("preserveAspectRatio", "xMinYMin meet") + let x = 0; + let y = 0; + let translateX = 0; + let clientH = 0; + let clientW = 0; - console.log(svg); - - // temp1[0]["0"].parentNode.setAttribute("viewBox", "50 0 427 146") + const gElem = svg[0][0]; + const svgElem = gElem.parentNode; - clientH = svg[0]["0"].parentNode.clientHeight; - clientW = svg[0]["0"].parentNode.clientWidth; - y = parseInt(clientH * 0.5); - x = parseInt(clientW * 0.5); - translateX = parseInt(clientW * 0.2); + clientH = svgElem.clientHeight; + clientW = svgElem.clientWidth; + y = parseInt(clientH * 0.9); + x = parseInt(clientW * 0.6); + translateX = parseInt(clientW * 0.15); - console.log(clientH, clientW, y, x); - console.log(translateX); - - let svgElem = svg[0][0].parentNode; - svgElem.setAttribute("viewBox", "0 0 " + x + " " + y); + svgElem.setAttribute("viewBox", "0 0 " + x + " " + clientH); svgElem.setAttribute("preserveAspectRatio", "xMinYMin"); - svg[0][0].setAttribute("transform", "translate(" + translateX + ", 0)"); + gElem.setAttribute("transform", "translate(" + translateX + ", 5)"); const tree = d3.layout.tree().size([y, x]); diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss index 8d1ef127dc3..edae50527f7 100644 --- a/client/galaxy/style/scss/base.scss +++ b/client/galaxy/style/scss/base.scss @@ -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.4rem sans-serif; + font: 0.35rem sans-serif; } } @@ -1674,13 +1674,13 @@ body.reports { } .tree-size { - width: 96%; - height: 40%; + width: 100%; + height: 50%; } .link { fill: none; stroke: lighten($brand-primary, 20%); - stroke-width: 0.3rem; + stroke-width: 0.2rem; } } From 867c2c919cade9bc5f09a89f6820d3d8e6299b78 Mon Sep 17 00:00:00 2001 From: Anup Kumar Date: Sat, 21 Mar 2020 23:45:05 +0100 Subject: [PATCH 3/3] adjust font --- client/galaxy/scripts/components/ToolRecommendation.vue | 9 +++------ client/galaxy/style/scss/base.scss | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/client/galaxy/scripts/components/ToolRecommendation.vue b/client/galaxy/scripts/components/ToolRecommendation.vue index c5a5d93639e..e0500e6eb15 100644 --- a/client/galaxy/scripts/components/ToolRecommendation.vue +++ b/client/galaxy/scripts/components/ToolRecommendation.vue @@ -115,14 +115,11 @@ export default { let x = 0; let y = 0; let translateX = 0; - let clientH = 0; - let clientW = 0; const gElem = svg[0][0]; const svgElem = gElem.parentNode; - - clientH = svgElem.clientHeight; - clientW = svgElem.clientWidth; + const clientH = svgElem.clientHeight; + const clientW = svgElem.clientWidth; y = parseInt(clientH * 0.9); x = parseInt(clientW * 0.6); translateX = parseInt(clientW * 0.15); @@ -132,7 +129,7 @@ export default { 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]; }); diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss index edae50527f7..05fdce4b813 100644 --- a/client/galaxy/style/scss/base.scss +++ b/client/galaxy/style/scss/base.scss @@ -1661,7 +1661,7 @@ body.reports { stroke-width: 0.1rem; } text { - font: 0.35rem sans-serif; + font: 0.4rem sans-serif; } }