Finished the sample coloring UI

.gitignore

@@ -1,8 +1,11 @@
-# trees/metadata used for development
+trees/metadata used for development
 data/
 
 # NodeJS file used for chrome headless QUnit tests
 node_modules/
 
 # Templated filed created when running empress-tree.py
-test_init.html
+test_init.html
+
+# Python Byte code folder
+empress/__pycache__/

empress/empress-biom.py

@@ -14,7 +14,7 @@
 from tree import Tree
 
 # create/parse tree
-# tree_file = 'data/tree_p.nwk'
+# tree_file = 'data/97_sites.nwk'
 tree_file = 'data/97_otus_no_none.tree'
 with open(tree_file) as file:
     nwk = file.readline();
@@ -34,7 +34,9 @@
             'x' : node.x2,
             'y' : node.y2,
             'color' : [0.75, 0.75, 0.75],
-            'sampVal': 1}
+            'sampVal': 1,
+            'visible': True,
+            'single_samp': False}
         pre_to_name[node.name] = i;
 names = []
 for i,node in enumerate(empress_tree.preorder(include_self=True)):

empress/support_files/css/empress.css

@@ -343,7 +343,7 @@ canvas {
     position: absolute;
     top: 0vh;
     left: 0vw;
-    overflow: none;
+    overflow: hidden;
     width: 100vw;
     height: 100vh;
 }
@@ -372,7 +372,7 @@ canvas {
 }
 
 .floating-div:hover {
-    background: white;
+    background-color: white;
     border: 1px solid lightgray;
     box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
 }
@@ -540,7 +540,7 @@ p.side-header button {
     grid-template-columns: 1fr 1fr 1fr;
     grid-auto-rows: auto;
     height: unset;
-    background: grey;
+    background-color: grey;
 }
 
 .attr {
@@ -612,8 +612,8 @@ p.side-header button {
     top: 0vh;
     left: 0vw;
     height: 12px;
-    width: 60;
-    border: 2px sold black;
+    width: 60px;
+    border: 2px solid black;
 }
 
 
@@ -759,7 +759,7 @@ div.modal {
 div.modal-body {
     border: none;
     box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
-    background: white;
+    background-color: white;
     width: 80%;
     max-width: 700px;
     margin: 5% auto;

empress/support_files/js/biom-table.js

@@ -1,4 +1,3 @@
-
 define([], function() {
 /**
  * biom-table
@@ -52,6 +51,25 @@ BiomTable.prototype.getObsBy = function(cat) {
     return result;
 };
 
+/**
+ * Returns number of unique observations in samples.
+ *
+ * @return {Number}
+ */
+BiomTable.prototype.getUniqueObs = function() {
+    var obs = new Set();
+
+    for (var sample in this._samp) {
+        for (var i = 0; i < this._obs[sample].length; i++) {
+            obs.add(this._obs[sample][i]);
+        }
+    }
+
+    return obs.size;
+};
+
+
+
 /**
  * Returns a list of sample categories
  *

empress/support_files/js/bp-tree.js

@@ -184,6 +184,20 @@ define(['ByteArray'], function(ByteArray) {
         return this.names_[i - 1];
     };
 
+    /**
+     *
+     * The number of leaf noes in tree
+     *
+     * @return {Number}
+     */
+    BPTree.prototype.numleafs = function() {
+        var total = 0;
+        for (var i = 0; i < this.b_.length - 1; i++) {
+            total = this.isleaf(i) ? total + 1 : total;
+        }
+        return total;
+    };
+
     /**
      *
      * The length of the ith node in preorder

empress/support_files/js/color-select.js → empress/support_files/js/colorer.js

@@ -1,61 +1,47 @@
-// define(['chroma'], function(chroma) {
-define([], function() {
+define(['chroma'], function(chroma) {
     // class globals closure variables
     var DISCRETE = 'Discrete';
     var SEQUENTIAL = 'Sequential';
     var DIVERGING = 'Diverging';
-    var HEADER = 'Hearder';
+    var HEADER = 'Header';
+
     /**
-     * creates chroma.brewer.
+     * @class Colorer
      */
-
-    function ColorSelect() {
+    function Colorer(color, min, max) {
+        if (color === Colorer.__QIIME_COLOR) {
+            this.__colorer = chroma.scale(Colorer.__qiimeDiscrete);
+        } else {
+            this.__colorer = chroma.scale(color);
+        }
+        this.__colorer.domain([min, max]);
     };
 
-    ColorSelect.prototype.createSelect = function() {
-        // the container for the select
-        var container = document.createElement('label');
-        container.classList.add('select-container');
-
-        // make select initially hidden. Expect behavior is for the select to
-        // become visible after user chooses to color
-        var select = document.createElement('select');
-        container.appendChild(select);
-
-        // define map variable outside of loop so it does not created every loop
-        // iteration
-        var map = null;
-        var opt = null;
-        for (var i = 0; i < ColorSelect.Colormaps_.length; i++) {
-            map = ColorSelect.Colormaps_[i];
-            opt = document.createElement('option');
-            opt.innerHTML = map.name;
-            opt.value = map.id;
-
-            if (map.type == HEADER) {
-                opt.disabled = true;
-            }
-            select.appendChild(opt);
-        }
+    Colorer.prototype.getColorRGB = function(color) {
+        return this.__colorer(color).rgb().map(x => x / 256);
+    };
 
-        container.getColor = function() {
-            // TODO: return chroma.brewer
-            return select.options[select.selectedIndex].value;
-        };
+    Colorer.prototype.getColorHex = function(color) {
+        return this.__colorer(color).hex();
+    };
 
-        container.onchange = function(func) {
-            select.onchange = func;
-        };
+    Colorer.__QIIME_COLOR = 'discrete-coloring-qiime';
 
-        return container;
-    };
+    // taken from the qiime/colors.py module; a total of 24 colors
+    /** @private */
+    Colorer.__qiimeDiscrete = [
+        '#ff0000', '#0000ff', '#f27304', '#008000', '#91278d', '#ffff00',
+        '#7cecf4', '#f49ac2', '#5da09e', '#6b440b', '#808080', '#f79679',
+        '#7da9d8', '#fcc688', '#80c99b', '#a287bf', '#fff899', '#c49c6b',
+        '#c0c0c0', '#ed008a', '#00b6ff', '#a54700', '#808000', '#008080'
+    ];
 
     // Used to create color select option and chroma.brewer
     //Modified from:
     //https://github.com/biocore/emperor/blob/
     //     027aa16f1dcf9536cd2dd9c9800ece5fc359ecbc/emperor/
     //     support_files/js/color-view-controller.js#L573-L613
-    ColorSelect.Colormaps_ = [
+    Colorer.__Colormaps = [
         {name: '-- Discrete --', type: HEADER},
         {id: 'discrete-coloring-qiime', name: 'Classic QIIME Colors',
          type: DISCRETE},
@@ -99,15 +85,5 @@ define([], function() {
         {id: 'PuOr', name: 'Purple-Orange', type: DIVERGING},
         {id: 'PRGn', name: 'Purple-Green', type: DIVERGING}
     ];
-
-    // taken from the qiime/colors.py module; a total of 24 colors
-    /** @private */
-    ColorSelect.qiimeDiscrete_ = [
-        '#ff0000', '#0000ff', '#f27304', '#008000', '#91278d', '#ffff00',
-        '#7cecf4', '#f49ac2', '#5da09e', '#6b440b', '#808080', '#f79679',
-        '#7da9d8', '#fcc688', '#80c99b', '#a287bf', '#fff899', '#c49c6b',
-        '#c0c0c0', '#ed008a', '#00b6ff', '#a54700', '#808000', '#008080'
-    ];
-
-    return ColorSelect;
+    return Colorer;
 })

empress/support_files/js/drawer.js

@@ -44,6 +44,7 @@ define(['jquery', 'glMatrix', 'Camera'], function($, gl, Camera) {
         this.contex_ = canvas.getContext('webgl');
         this.CLR_COL = 1;
         this.cam = cam;
+        this._test = false;
     };
 
     /**
@@ -86,6 +87,10 @@ define(['jquery', 'glMatrix', 'Camera'], function($, gl, Camera) {
         s.treeVertBuff = c.createBuffer();
         this.treeVertSize = 0;
 
+        // buffer object used to thicken sampleLines
+        s.sampleThinkBuff = c.createBuffer();
+        this.sampleThinkSize = 0;
+
         // buffer object for tree nodes
         s.nodeVertBuff = c.createBuffer();
 
@@ -168,7 +173,7 @@ define(['jquery', 'glMatrix', 'Camera'], function($, gl, Camera) {
      * @param {WebGLBuffer} buff The WebGLBuffer
      * @param {Array} data The coordinate and color data to fill the buffer
      */
-    Drawer.prototype.fillBufferData = function(buff, data) {
+    Drawer.prototype.fillBufferData_ = function(buff, data) {
         var c = this.contex_;
         c.bindBuffer(c.ARRAY_BUFFER, buff);
         c.bufferData(c.ARRAY_BUFFER, data, c.DYNAMIC_DRAW);
@@ -219,7 +224,18 @@ define(['jquery', 'glMatrix', 'Camera'], function($, gl, Camera) {
     Drawer.prototype.loadTreeBuf = function(data) {
         data = new Float32Array(data);
         this.treeVertSize = data.length / 5;
-        this.fillBufferData(this.sProg_.treeVertBuff, data);
+        this.fillBufferData_(this.sProg_.treeVertBuff, data);
+    };
+
+    /**
+     * Fills the buffer used to thicken sample lines
+     *
+     * @param {Array} data The coordinate and color data to fill sampleThink
+     */
+    Drawer.prototype.loadSampleThickBuf = function(data) {
+        data = new Float32Array(data);
+        this.sampleThinkSize = data.length / 5;
+        this.fillBufferData_(this.sProg_.sampleThinkBuff, data);
     };
 
     /**
@@ -244,6 +260,10 @@ define(['jquery', 'glMatrix', 'Camera'], function($, gl, Camera) {
         // draw tree
         this.bindBuffer(s.treeVertBuff);
         c.drawArrays(c.LINES, 0, this.treeVertSize);
+
+        this.bindBuffer(s.sampleThinkBuff);
+        c.drawArrays(c.TRIANGLES, 0, this.sampleThinkSize);
+
     };
 
     /**