Moved Phylotree node descriptions to CSS to help with #12.

phyloref · Apr 11, 2018 · 63fe00c · 63fe00c
1 parent df716cb
commit 63fe00c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/css/main.css b/css/main.css
@@ -4,6 +4,50 @@
  * Copyright (C) Phyloreferencing Project, 2018
  */
 
+/*
+ * Classes for phylogeny SVG elements
+ */
+
+/* Phylotree nodes */
+ .node {
+     /* Phylotree's CSS sets this to 10px; we prefer larger node labels */
+     font-size: 10pt;
+ }
+
+ /* Node label for an internal specifier */
+.internal-specifier-node {
+    font-weight: bolder;
+    fill: green;
+    font-size: 12pt;
+}
+
+/* Node label for an external specifier */
+.external-specifier-node {
+    font-weight: bolder;
+    fill: magenta;
+    font-size: 12pt;
+}
+
+/* Node label for a terminal node without taxonomic units */
+.terminal-node-without-tunits {
+    fill: rgb(169, 17, 1);
+    font-style: italic;
+    font-weight: bolder;
+}
+
+/* Labels for internal nodes */
+.internal-label {
+    font-family: serif;
+    font-size: 12pt;
+    font-style: italic;
+}
+
+/* An additional class for internal nodes that are currently selected */
+.selected-internal-label {
+    font-size: 16pt;
+    fill: blue;
+}
+
 /*
  * Create a table class for a fixed size body.
  * Based on https://stackoverflow.com/a/23518856/27310

diff --git a/js/curation-tool.js b/js/curation-tool.js
@@ -945,11 +945,10 @@ function render_tree(node_expr, phylogeny) {
 
                 // TODO: Once we're happy with how these elements look,
                 // we should move all this complexity into CSS classes.
-                text_label.classed("internal_label", true)
+                text_label.classed("internal-label", true)
                     .text(data.name)
-                    .attr("dx", ".4em")
+                    .attr("dx", ".3em")
                     .attr("dy", ".3em")
-                    .style("font-style", "italic")
                     .attr("text-anchor", "start")
                     .attr("alignment-baseline", "middle");
 
@@ -960,8 +959,7 @@ function render_tree(node_expr, phylogeny) {
                     vm.selected_phyloref.hasOwnProperty('label') &&
                     vm.selected_phyloref.label == data.name
                 ) {
-                    text_label.style('fill', 'blue')
-                        .style('font-weight', 'bolder');
+                    text_label.classed("selected-internal-label", true);
                 }
             }
         }
@@ -971,8 +969,7 @@ function render_tree(node_expr, phylogeny) {
             var tunits = vm.get_tunits_for_node_label_in_phylogeny(phylogeny, data.name);
 
             if(tunits.length == 0) {
-                element.style('fill', 'red')
-                    .style('font-style', 'italic');
+                element.classed('terminal-node-without-tunits', true);
             } else if(vm.selected_phyloref !== undefined) {
                 // If there's a selected phyloref, we should highlight
                 // specifiers:
@@ -981,16 +978,14 @@ function render_tree(node_expr, phylogeny) {
                 if(vm.selected_phyloref.hasOwnProperty('internalSpecifiers')) {
                     for(let specifier of vm.selected_phyloref.internalSpecifiers) {
                         if(vm.test_whether_specifier_match_node(specifier, phylogeny, data.name)) {
-                            element.style('fill', 'green')
-                                .style('font-weight', 'bolder');
+                            element.classed('node internal-specifier-node', true);
                         }
                     }
                 }
                 if(vm.selected_phyloref.hasOwnProperty('externalSpecifiers')) {
                     for(let specifier of vm.selected_phyloref.externalSpecifiers) {
                         if(vm.test_whether_specifier_match_node(specifier, phylogeny, data.name)) {
-                            element.style('fill', 'red')
-                                .style('font-weight', 'bolder');
+                            element.classed('node external-specifier-node', true);
                         }
                     }
                 }
@@ -1128,7 +1123,8 @@ function render_tree(node_expr, phylogeny) {
     });
 
     tree
-        .spacing_x(20).spacing_y(50)
+        .spacing_x(20)
+        .spacing_y(40)
         .placenodes()
         .update()
     ;