Add a different colour theme for the extinct tree

Author: hyanwong

OZprivate/rawJS/OZTreeModule/src/themes/extinct_theme.js

@@ -0,0 +1,314 @@
+// define colours that will be used
+
+let black = 'rgb(0,0,0)';
+let very_dark_grey = 'rgb(40,40,40)';
+let dark_grey = 'rgb(75,75,75)';
+let grey = 'rgb(95,95,95)';
+let mid_grey = 'rgb(115,115,115)';
+let light_grey = 'rgb(135,135,135)';
+let very_light_grey = 'rgb(180, 180, 180)';
+let off_white = 'rgb(240,240,240)'
+let white = 'rgb(255,255,255)';
+
+let half_transparent_black = 'rgba(0,0,0,0.5)';
+let transparent_black = 'rgba(0,0,0,0.2)';
+let slightly_tranparent_white = 'rgba(255,255,255,0.85)';
+let half_transparent_white = 'rgba(255,255,255,0.5)';
+let very_transparent_white = 'rgba(255,255,255,0.2)';
+
+let dark_green = 'rgb(20,80,00)';
+let green = 'rgb(70,135,30)';
+let light_green = 'rgb(135,215,90)';
+
+let dark_brown = 'rgb(100,62,45)';
+let brown = 'rgb(125,70,55)';
+let light_brown = 'rgb(175,115,85)';
+
+let pastel_red = 'rgb(255,130,130)';
+let pastel_green = 'rgb(130,255,130)';
+let pastel_blue = 'rgb(130,130,255)';
+let pastel_cyan = 'rgb(100,200,200)';
+let pastel_magenta = 'rgb(200,100,200)';
+let pastel_yellow = 'rgb(200,200,100)';
+
+// define functions of a node that return different colours depending on node status
+
+function outline_highlight(node) {
+    if (node.richness_val > 1) {
+        return black;
+    } else {
+        return leafcolor2b(node);
+    }
+}
+
+function leafcolor2b(node) {
+    return black;
+}
+
+function leafcolor1(node) {
+    return dark_grey;
+}
+
+function leafcolor2(node) {
+    // for 'fake' leaves at end of branches that are not developed yet
+    // note that this is not the same as undeveloped branches that are rendered as circles by a different colour scheme and dealt with as part of branch rendering.
+   return black;
+}
+
+function sponsor_highlight(node) {
+    return black;
+}
+
+function sponsor_color(node) {
+    return black;
+}
+
+function copyright_highlight_fill(node) {
+    if (node.richness_val > 1) {
+        return half_transparent_white;
+    } else {
+        return white;
+    }
+}
+
+function copyright_highlight_stroke(node) {
+    if (node.richness_val > 1) {
+        return black;
+    } else {
+        return white;
+    }
+}
+
+function copyright_fill(node) {
+    if (node.richness_val > 1) {
+        return leafcolor1(node);
+    } else {
+        return leafcolor2(node);
+    }
+}
+
+function copyright_stroke(node) {
+    if (node.richness_val > 1) {
+        return leafcolor2(node);
+    } else {
+        return leafcolor1(node);
+    }
+}
+
+function copyright_text_fill(node) {
+    if (node.richness_val > 1) {
+        return leafcolor2(node);
+    } else {
+        return leafcolor1(node);
+    }
+}
+
+function copyright_text_highlight_fill(node) {
+    if (node.richness_val > 1) {
+        return black;
+    } else {
+        return white;
+    }
+}
+
+function leaf_text_hover_outline(node) {
+    return half_transparent_white;
+}
+
+function get_leaf_text_fill(node) {
+    return white;
+}
+
+function branch_colour(node) {
+    if (node._is_polytomy == true)
+    {
+        return brown;
+    } else {
+        return dark_brown;
+    }
+}
+
+const theme = {
+branch: {
+stroke: branch_colour,
+    
+    // this pallette stores colours that are mapped to highlights
+marked_area_pallette: {
+    '0': pastel_blue,
+    '1': pastel_red,
+    '2': pastel_green,
+    '3': pastel_magenta,
+    '4': pastel_cyan,
+    '5': pastel_yellow
+},
+    
+highlight_search_hit: {
+stroke: pastel_red
+},
+    // for search hit colouring including common ancestor markings
+highlight_search_hit1: {
+stroke: pastel_red
+},
+highlight_search_hit2: {
+stroke: pastel_blue
+},
+highlight_arrow_search_hit: {
+fill: pastel_red
+},
+highlight_arrow_search_hit1: {
+fill: pastel_red
+},
+highlight_arrow_search_hit2: {
+fill: pastel_blue
+}
+},
+    
+interior: {
+pic_text_hover: {
+stroke: transparent_black,
+fill: white
+},
+pic_text: {
+fill: white
+},
+    
+undeveloped: {
+stroke: light_grey,
+fill: off_white
+},
+    
+text_hover: {
+stroke: transparent_black
+},
+text: {
+fill: white
+},
+    
+sponsor_text_hover: { /* hide the sponsor text */
+fill: brown
+},
+sponsor_text: {
+fill: brown
+},
+    
+    
+circle_hover: {
+stroke: dark_brown,
+fill: dark_brown
+},
+circle: {
+stroke: brown,
+fill: dark_brown
+},
+circle_searchin: {
+stroke: half_transparent_white
+},
+circle_highlight: {
+outer: {
+fill: brown
+},
+inner: {
+fill: half_transparent_white
+}
+},
+    
+copyright_hover: {
+fill: white,
+stroke: black
+},
+    
+copyright: {
+fill: half_transparent_white,
+stroke: black,
+text: {
+fill: black
+},
+text_hover: {
+fill: black,
+}
+}
+    
+},
+    
+signpost: {
+pic: {
+stroke: half_transparent_white
+},
+    
+pic_hover: {
+stroke: half_transparent_black
+},
+    
+pic_inner: {
+stroke: white
+},
+    
+pic_text: {
+stroke: slightly_tranparent_white,
+fill: dark_grey
+},
+    
+pic_text_hover: {
+stroke: white,
+fill: black
+}
+},
+    
+leaf: {
+
+    bg: {
+        fill: white,
+      },
+
+    'outline_hover': {
+    fill: outline_highlight
+    },
+    
+outline: {
+fill: leafcolor2,
+stroke: leafcolor2
+},
+    
+inside: {
+fill: leafcolor1
+},
+    
+    'inside_hover': {
+    fill: leafcolor1
+    },
+    
+text: {
+fill: get_leaf_text_fill
+},
+    
+    'text_hover': {
+    stroke: leaf_text_hover_outline
+    },
+    
+sponsor: {
+fill: sponsor_color
+},
+    
+    'sponsor_hover': {
+    fill: sponsor_highlight
+    },
+    
+    'copyright_hover': {
+    fill: copyright_fill,
+    stroke: white
+    },
+    
+copyright: {
+fill: copyright_fill,
+stroke: copyright_stroke,
+text: {
+fill: copyright_text_fill
+},
+    'text_hover': {
+    fill: white
+    }
+}
+}
+}
+
+export default theme;

OZprivate/rawJS/OZTreeModule/src/themes/index.js

@@ -3,15 +3,9 @@
  * (look at natural_theme.js for an example), then add it to this file. It should be picked up
  * as one of the options available for the OneZoom object (in tree_settings.js)
  **/
-export {default as natural} from './natural_theme';
-export {default as natural_CBF} from './natural_colour_blind_friendly';
-export {default as AT} from './at_theme';
-export {default as AT_CBF} from './at_colour_blind_friendly';
-export {default as otop} from './otop_theme';
+export {default as extinct} from './extinct_theme';
 export {default as popularity} from './popularity_theme';
 export {default as popularity_CBF} from './popularity_colour_blind_friendly';
-export {default as IUCN} from './IUCN_explicit_theme';
-export {default as IUCN_CBF} from './IUCN_explicit_colour_blind_friendly';
 
 export {default as gencons} from './genetic_conservation_theme';
 export {default as gencons_CBF} from './genetic_conservation_theme';

OZprivate/rawJS/OZTreeModule/src/tree_settings.js

@@ -96,7 +96,7 @@ class TreeSettings {
     }
 
     this.default = {
-      cols: this.options.cols.IUCN,
+      cols: this.options.cols.extinct, //default theme
       layout: {
         branch: this.options.layout.branch.tree,
         node: this.options.layout.node.tree,