From 9741374d1dd3f988d0d58f15e79d99b587741b7e Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Thu, 14 May 2020 23:18:21 -0400 Subject: [PATCH 1/6] experiment to have less CSS on tips and lines. memory consumption is lower but is performance better? --- src/components/tree/phyloTree/renderers.js | 14 +++++++------- src/components/tree/tree.js | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index 4ff63897d..1a1ff8bcb 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -37,7 +37,7 @@ export const render = function render(svg, layout, distance, parameters, callbac d.tipStroke = tipStroke[i]; d.fill = tipFill[i]; d.visibility = visibility[i]; - d["stroke-width"] = branchThickness[i]; +/* d["stroke-width"] = branchThickness[i]; */ d.r = tipRadii ? tipRadii[i] : this.params.tipRadius; }); @@ -111,11 +111,11 @@ export const drawTips = function drawTips() { .on("mouseover", this.callbacks.onTipHover) .on("mouseout", this.callbacks.onTipLeave) .on("click", this.callbacks.onTipClick) - .style("pointer-events", "auto") +/* .style("pointer-events", "auto") */ .style("visibility", (d) => d.visibility === NODE_VISIBLE ? "visible" : "hidden") .style("fill", (d) => d.fill || params.tipFill) .style("stroke", (d) => d.tipStroke || params.tipStroke) - .style("stroke-width", () => params.tipStrokeWidth) /* don't want branch thicknesses applied */ +/* .style("stroke-width", () => params.tipStrokeWidth) don't want branch thicknesses applied */ .style("cursor", "pointer"); timerEnd("drawTips"); @@ -184,9 +184,9 @@ export const drawBranches = function drawBranches() { .attr("id", (d) => getDomId("branchT", d.n.name)) .attr("d", (d) => d.branch[1]) .style("stroke", (d) => d.branchStroke || params.branchStroke) - .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) +/* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ .style("fill", "none") - .style("pointer-events", "auto") +/* .style("pointer-events", "auto") */ .on("mouseover", this.callbacks.onBranchHover) .on("mouseout", this.callbacks.onBranchLeave) .on("click", this.callbacks.onBranchClick); @@ -218,8 +218,8 @@ export const drawBranches = function drawBranches() { if (!d.branchStroke) return params.branchStroke; return strokeForBranch(d, "S"); }) - .style("stroke-linecap", "round") - .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) +/* .style("stroke-linecap", "round") */ +/* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ .style("visibility", getBranchVisibility) .style("cursor", (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default") .style("pointer-events", "auto") diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js index b59ade05f..0342c3172 100644 --- a/src/components/tree/tree.js +++ b/src/components/tree/tree.js @@ -113,7 +113,7 @@ class Tree extends React.Component { return ( {mainTree ? this.domRefs.mainTree = c : this.domRefs.secondTree = c;}} From 1178368ae5929f68aaac9f60cab955c33f8714e3 Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Sat, 16 May 2020 19:56:02 -0400 Subject: [PATCH 2/6] make the tip stroke black so overlapping tips are clear --- src/components/tree/tree.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js index 0342c3172..0a8fed7dc 100644 --- a/src/components/tree/tree.js +++ b/src/components/tree/tree.js @@ -113,7 +113,7 @@ class Tree extends React.Component { return ( {mainTree ? this.domRefs.mainTree = c : this.domRefs.secondTree = c;}} From 65c8a49bf44d954d92d55e0df210e31be36dc32b Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Sat, 16 May 2020 19:57:20 -0400 Subject: [PATCH 3/6] indent properly --- src/components/tree/phyloTree/renderers.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index 1a1ff8bcb..b649b0b68 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -37,7 +37,7 @@ export const render = function render(svg, layout, distance, parameters, callbac d.tipStroke = tipStroke[i]; d.fill = tipFill[i]; d.visibility = visibility[i]; -/* d["stroke-width"] = branchThickness[i]; */ + /* d["stroke-width"] = branchThickness[i]; */ d.r = tipRadii ? tipRadii[i] : this.params.tipRadius; }); @@ -111,11 +111,11 @@ export const drawTips = function drawTips() { .on("mouseover", this.callbacks.onTipHover) .on("mouseout", this.callbacks.onTipLeave) .on("click", this.callbacks.onTipClick) -/* .style("pointer-events", "auto") */ + /* .style("pointer-events", "auto") */ .style("visibility", (d) => d.visibility === NODE_VISIBLE ? "visible" : "hidden") .style("fill", (d) => d.fill || params.tipFill) .style("stroke", (d) => d.tipStroke || params.tipStroke) -/* .style("stroke-width", () => params.tipStrokeWidth) don't want branch thicknesses applied */ + /* .style("stroke-width", () => params.tipStrokeWidth) don't want branch thicknesses applied */ .style("cursor", "pointer"); timerEnd("drawTips"); @@ -184,9 +184,9 @@ export const drawBranches = function drawBranches() { .attr("id", (d) => getDomId("branchT", d.n.name)) .attr("d", (d) => d.branch[1]) .style("stroke", (d) => d.branchStroke || params.branchStroke) -/* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ + /* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ .style("fill", "none") -/* .style("pointer-events", "auto") */ + /* .style("pointer-events", "auto") */ .on("mouseover", this.callbacks.onBranchHover) .on("mouseout", this.callbacks.onBranchLeave) .on("click", this.callbacks.onBranchClick); @@ -218,8 +218,8 @@ export const drawBranches = function drawBranches() { if (!d.branchStroke) return params.branchStroke; return strokeForBranch(d, "S"); }) -/* .style("stroke-linecap", "round") */ -/* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ + /* .style("stroke-linecap", "round") */ + /* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ .style("visibility", getBranchVisibility) .style("cursor", (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default") .style("pointer-events", "auto") From e1ae42725044f039e25a72fce992ea95af17132f Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Sun, 17 May 2020 19:59:27 -0400 Subject: [PATCH 4/6] don't provide a stroke colour at the tip element svg --- src/components/tree/phyloTree/renderers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index b649b0b68..55bda5319 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -114,7 +114,7 @@ export const drawTips = function drawTips() { /* .style("pointer-events", "auto") */ .style("visibility", (d) => d.visibility === NODE_VISIBLE ? "visible" : "hidden") .style("fill", (d) => d.fill || params.tipFill) - .style("stroke", (d) => d.tipStroke || params.tipStroke) + /* .style("stroke", (d) => d.tipStroke || params.tipStroke)*/ /* .style("stroke-width", () => params.tipStrokeWidth) don't want branch thicknesses applied */ .style("cursor", "pointer"); From 923bc6d4b39141b47018317d7e32d8ba21cdda4e Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Mon, 18 May 2020 17:38:32 -0400 Subject: [PATCH 5/6] restore normal stroke-width --- src/components/tree/phyloTree/renderers.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index 55bda5319..afec310c2 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -37,7 +37,7 @@ export const render = function render(svg, layout, distance, parameters, callbac d.tipStroke = tipStroke[i]; d.fill = tipFill[i]; d.visibility = visibility[i]; - /* d["stroke-width"] = branchThickness[i]; */ + d["stroke-width"] = branchThickness[i]; d.r = tipRadii ? tipRadii[i] : this.params.tipRadius; }); @@ -184,7 +184,7 @@ export const drawBranches = function drawBranches() { .attr("id", (d) => getDomId("branchT", d.n.name)) .attr("d", (d) => d.branch[1]) .style("stroke", (d) => d.branchStroke || params.branchStroke) - /* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ + .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) .style("fill", "none") /* .style("pointer-events", "auto") */ .on("mouseover", this.callbacks.onBranchHover) @@ -219,7 +219,7 @@ export const drawBranches = function drawBranches() { return strokeForBranch(d, "S"); }) /* .style("stroke-linecap", "round") */ - /* .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) */ + .style("stroke-width", (d) => d['stroke-width'] || params.branchStrokeWidth) .style("visibility", getBranchVisibility) .style("cursor", (d) => d.visibility === NODE_VISIBLE ? "pointer" : "default") .style("pointer-events", "auto") From e0c6c84aa755708e32d3f192bf1e7416bace4872 Mon Sep 17 00:00:00 2001 From: Rick Leir Date: Mon, 18 May 2020 18:11:21 -0400 Subject: [PATCH 6/6] just fix a lint warning --- src/components/tree/phyloTree/renderers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index afec310c2..9d57b1139 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -114,7 +114,7 @@ export const drawTips = function drawTips() { /* .style("pointer-events", "auto") */ .style("visibility", (d) => d.visibility === NODE_VISIBLE ? "visible" : "hidden") .style("fill", (d) => d.fill || params.tipFill) - /* .style("stroke", (d) => d.tipStroke || params.tipStroke)*/ + /* .style("stroke", (d) => d.tipStroke || params.tipStroke) */ /* .style("stroke-width", () => params.tipStrokeWidth) don't want branch thicknesses applied */ .style("cursor", "pointer");