Color styling improvements to tips and branches

nextstrain · Feb 3, 2017 · 6c885e7 · 6c885e7
1 parent ee7e45b
commit 6c885e7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/src/components/app.js b/src/components/app.js
@@ -31,7 +31,7 @@ import getColorScale from "../util/getColorScale";
 import { parseGenotype, getGenotype } from "../util/getGenotype";
 import * as globals from "../util/globals";
 import { defaultDateRange, defaultLayout,
-  defaultDistanceMeasure, defaultColorBy } from "../util/globals";
+  defaultDistanceMeasure, defaultColorBy, tipRadius } from "../util/globals";
 import Sidebar from "react-sidebar";
 import moment from 'moment';
 
@@ -346,7 +346,7 @@ class App extends React.Component {
                         ? cScale.legendBoundsMap : false;
       return this.props.tree.nodes.map((d) => this.determineLegendMatch(selItem, d, legendMap, cScale) ? 6 : 3);
     } else if (this.props.tree.nodes) {
-      return this.props.tree.nodes.map((d) => 3);
+      return this.props.tree.nodes.map((d) => tipRadius);
     } else {
       return null;
     }
@@ -410,7 +410,7 @@ class App extends React.Component {
               sidebar={this.state.sidebarOpen || this.state.sidebarDocked}
               changeRoute={this.changeRoute.bind(this)}
               location={this.state.location}
-              router={this.props.router}              
+              router={this.props.router}
             />
         </Background>
       </Sidebar>

diff --git a/src/components/tree/treeView.js b/src/components/tree/treeView.js
@@ -100,16 +100,18 @@ class TreeView extends React.Component {
 
     /* if we have a tree and we have new props, figure out what we need to update */
     if (tree) {
-      const attrToUpdate = {};
-      const styleToUpdate = {};
+
+      /* update tips */
+      let attrToUpdate = {};
+      let styleToUpdate = {};
 
       /* fill has changed */
       if (nextProps.nodeColor && arrayInEquality(nextProps.nodeColor, this.props.nodeColor)) {
-        styleToUpdate['fill'] = nextProps.nodeColor;
-        tree.updateStyleOrAttributeArray(".branch", "stroke", nextProps.nodeColor, fastTransitionDuration, "style");
-        styleToUpdate['stroke'] = nextProps.nodeColor.map((d) => {
-          d3.rgb(d).darker(0.7)
+        styleToUpdate['fill'] = nextProps.nodeColor.map((col) => {
+          return d3.rgb(col).brighter([0.65]).toString();
         });
+        tree.updateStyleOrAttributeArray(".branch", "stroke", nextProps.nodeColor, fastTransitionDuration, "style");
+        styleToUpdate['stroke'] = nextProps.nodeColor;
       }
       /* tip radius has changed */
       if (nextProps.tipRadii && arrayInEquality(nextProps.tipRadii, this.props.tipRadii)) {
@@ -120,11 +122,26 @@ class TreeView extends React.Component {
         // console.log("updateVisibility");
         styleToUpdate['visibility'] = nextProps.tipVisibility;
       }
-
-      /* update style changes */
+      /* implement style changes */
       if (Object.keys(attrToUpdate).length || Object.keys(styleToUpdate).length) {
         tree.updateMultipleArray(".tip", attrToUpdate, styleToUpdate, fastTransitionDuration);
       }
+
+      /* update branches */
+      attrToUpdate = {};
+      styleToUpdate = {};
+
+      if (nextProps.nodeColor && arrayInEquality(nextProps.nodeColor, this.props.nodeColor)) {
+        styleToUpdate['stroke'] = nextProps.nodeColor.map((col) => {
+          var modCol = d3.interpolateRgb(col, "#BBB")(0.6);
+        	return d3.rgb(modCol).toString();
+        });
+      }
+      /* implement style changes */
+      if (Object.keys(attrToUpdate).length || Object.keys(styleToUpdate).length) {
+        tree.updateMultipleArray(".branch", attrToUpdate, styleToUpdate, fastTransitionDuration);
+      }
+
       /* swap layouts */
       if (this.props.layout !== nextProps.layout) {
         tree.updateLayout(nextProps.layout, slowTransitionDuration);

diff --git a/src/util/phyloTree.js b/src/util/phyloTree.js
@@ -143,7 +143,7 @@ PhyloTree.prototype.setDefaults = function () {
         branchStrokeWidth: 2,
         tipStroke: "#AAA",
         tipFill: "#CCC",
-        tipStrokeWidth: 2,
+        tipStrokeWidth: 1,
         tipRadius: 4,
     };
 };
@@ -720,6 +720,16 @@ PhyloTree.prototype.drawBranches = function() {
     .attr("d", function(d) {
       return d.branch;
     })
+    .style("stroke", function(d) {
+      return d.stroke || params.branchStroke;
+    })
+		.style("stroke-linecap", "round")
+    .style("stroke-width", function(d) {
+      return d.strokeWidth || params.branchStrokeWidth;
+    })
+    .style("fill", "none")
+    .style("cursor", "pointer")
+    .style("pointer-events", "auto")
     .on("mouseover", (d) => {
       this.callbacks.onBranchHover(d)
     })
@@ -728,16 +738,7 @@ PhyloTree.prototype.drawBranches = function() {
     })
     .on("click", (d) => {
       this.callbacks.onBranchClick(d)
-    })
-    .style("pointer-events", "auto")
-    .style("stroke", function(d) {
-      return d.stroke || params.branchStroke;
-    })
-    .style("fill", "none")
-    .style("stroke-width", function(d) {
-      return d.strokeWidth || params.branchStrokeWidth;
-    })
-    .style("cursor", "pointer");
+    });
 };