Merge branch 'master' of https://github.com/biocore/empress into circ…

…-layout-clean
fedarko · May 20, 2020 · e71a84f · e71a84f
2 parents d1386f8 + 6e4bbd3
commit e71a84f
Show file tree

Hide file tree

Showing 12 changed files with 1,359 additions and 193 deletions.
diff --git a/empress/support_files/css/empress.css b/empress/support_files/css/empress.css
@@ -133,7 +133,6 @@ input[type=checkbox]:checked::before {
     top: 1px;
 }
 
-
 /* slide checkbox */
 
 .switch {
@@ -247,7 +246,7 @@ label:hover .tooltip {
 #hover-box {
     position: fixed;
     border: 1px solid transparent;
-    background-color: white;
+    background-color: lightgray;
     opacity: 0.75;
     padding: 20px;
 }
@@ -278,17 +277,26 @@ label:hover .tooltip {
     border-color: transparent lightgray transparent transparent;
 }
 
-#hover-table tr td {
-    vertical-align: top;
+#hover-table {
+    background-color: white;
 }
 
-#hover-table tr td:nth-last-child(2) {
-    width: 60px;
-    font-weight: bold;
+#hover-table thead, #hover-table tbody{
+    display: block;
+    max-width: 500px;
+    max-height: 300px;
+    overflow: auto;
 }
 
-#hover-table tr td:nth-last-child(2):first-letter {
-    text-transform: capitalize;
+#hover-table tr {
+    padding: 0px 15px;
+}
+#hover-table tr td {
+    vertical-align: top;
+}
+
+#hover-table tr td p{
+    text-align: right;
 }
 
 #hover-table tr td:nth-last-child(1) {
@@ -308,10 +316,35 @@ label:hover .tooltip {
     font-size: 8pt;
 }
 
+#hover-table tbody tr td:nth-child(1) {
+    position: relative;
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+    left: 0;
+}
+
 #hover-table tr td button:only-child:hover {
     background-color: darkgray;
 }
 
+#hover-select {
+    background-color: white;
+}
+
+.hover-select-container {
+    position: relative;
+}
+
+.hover-select-container:after {
+    position: absolute;
+    content: "\203A";
+    transform: rotate(90deg);
+    font-size: 13.5pt;
+    right: 12px;
+    top: 1px;
+    pointer-events: none;
+}
+
 .switch-button-container {
     position: absolute;
     top: 0vh;
@@ -324,8 +357,6 @@ label:hover .tooltip {
 }
 
 canvas {
-    /*width: 66vw;
-    height: 75vh;*/
     width: 100vw;
     height: 100vh;
 }
@@ -348,6 +379,12 @@ canvas {
     height: 100vh;
 }
 
+#tree-container {
+    overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+}
+
 #dvicontainer {
     position: fixed;
     top: 0vh;
@@ -356,6 +393,8 @@ canvas {
     height: 100%;
     z-index: 10;
     overflow: hidden;
+    margin: none;
+    padding: none;
 }
 
 
@@ -398,7 +437,6 @@ canvas {
     left: 100vw;
     transform: translateX(-100%);
     width: 450px;
-    opacity: 0.5;
 }
 
 #show-ctrl {
@@ -431,11 +469,24 @@ button.side-header {
     font-size: 11pt;
 }
 
+#side-header-search-btn {
+    color: white;
+    background-color: #BEBEBE;
+    height: 34px;
+    border: 0;
+    cursor: pointer;
+    outline: none;
+    padding: 0px 15px;
+    border-radius: 3px;
+    font-size: 10pt;
+}
+
 p.side-header {
     margin: 0;
+    width: 100%;
     display: flex;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
 }
 
 p.side-header input[type=text]:hover {
@@ -456,38 +507,66 @@ p.side-header button {
     background-color: transparent;
 }
 
+#autocomplete-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+}
+
+.autocomplete-items {
+    position: absolute;
+    border: 1px solid #d4d4d4;
+    border-bottom: none;
+    border-top: none;
+    z-index: 99;
+    /*position the autocomplete items to be the same width as the container:*/
+    top: 100%;
+    left: 0;
+    right: 0;
+    max-height: 500px;
+    overflow: auto;
+}
+.autocomplete-items div {
+    padding: 10px;
+    cursor: pointer;
+    background-color: #fff;
+    border-bottom: 1px solid #d4d4d4;
+}
+.autocomplete-items div:hover {
+    /*when hovering an item:*/
+    background-color: #e9e9e9;
+}
+
 .active, button.side-header:hover, p.side-header button:hover, #show-ctrl:hover {
     background-color: #555;
 }
 
-
 /* quick search */
 
 #quick-search {
-    color: white;
+    color: black;
     height: 36px;
     margin-left: 2px;
     margin-right: 2px;
     padding-left: 18px;
     padding-right: 18px;
-    border-radius: 0;
-    background-color: transparent;
+    border-color: grey;
+    background-color: white;
     font-size: 10.5pt;
 }
 
-#quick-search:hover {
-    background-color: lightgray;
+.invalid-search {
+    background-color: #F08080 !important;
 }
 
 #quick-search::placeholder {
-    color: lightgray;
+    color: black;
 }
 
 #quick-search:hover::placeholder {
     color: dimgray;
 }
 
-
 /* controls */
 
 .control {
@@ -816,3 +895,7 @@ button.close {
 button.close:hover {
     background-color: gray;
 }
+
+#hover-table-notes {
+  font-size: xx-small;
+}
diff --git a/empress/support_files/js/biom-table.js b/empress/support_files/js/biom-table.js
@@ -112,6 +112,35 @@ define([], function () {
         return result;
     };
 
+    /**
+     * Returns a object that maps values of a sample category to number of
+     * samples obID was seen in.
+     * category.
+     *
+     * @param {String} cat The category to return observation
+     * @param {String} obID The observation to count
+     *
+     * @return {Object}
+     */
+    BIOMTable.prototype.getObsCountsBy = function (cat, obID) {
+        var result = {};
+        var cVal;
+        for (var sample in this._samp) {
+            cVal = this._samp[sample][cat];
+            if (!(cVal in result)) {
+                result[cVal] = 0;
+            }
+            for (var i = 0; i < this._obs[sample].length; i++) {
+                if (this._obs[sample][i] === obID) {
+                    result[cVal] += 1;
+                    break;
+                }
+            }
+        }
+
+        return result;
+    };
+
     /**
      * Returns the set of unique observations in samples.
      *
@@ -142,16 +171,16 @@ define([], function () {
      * Returns an array of unique values in a metadata column. If column is
      * numeric then the array is sorted in ascending order.
      *
-     * @param{Object} category The column of data
+     * @param{Object} field The column of data
      *
      * @return{Object}
      */
-    BIOMTable.prototype.getUniqueSampleValues = function (category) {
+    BIOMTable.prototype.getUniqueSampleValues = function (field) {
         var values = new Set();
-        var isNumeric = this._types[category] === "n";
+        var isNumeric = this._types[field] === "n";
         for (var sample in this._samp) {
             // grab next value in column
-            var cVal = this._samp[sample][category];
+            var cVal = this._samp[sample][field];
 
             // ignore missing data
             values.add(cVal);
@@ -210,5 +239,57 @@ define([], function () {
         return obs;
     };
 
+    /**
+     * Returns a list of samples that contain an observation in obIDs
+     *
+     * @param{Array} obIDs A list of observationIds (i.e. tip names)
+     *
+     * @return{Array} a list of samples
+     */
+    BIOMTable.prototype.getSamplesByObservations = function (obIDs) {
+        var samples = Object.keys(this._obs);
+        var result = [];
+
+        var checkSampleForObservations = function (sample, obs) {
+            return obs.some((id) => sample.includes(id));
+        };
+        // find all samples that contain at least one observation in obIDs
+        for (var i = 0; i < samples.length; i++) {
+            var sample = samples[i];
+            if (checkSampleForObservations(this._obs[sample], obIDs)) {
+                result.push(sample);
+            }
+        }
+
+        return result;
+    };
+
+    /**
+     * Returns an Object mapping sample field values to the number of samples
+     * with that value.
+     *
+     * For example if field == 'body_site' then this function will return an
+     * an object that maps each body site (oral, gut,...) to the number of
+     * samples in 'samples' labelled as being from that body site.
+     *
+     * @param{Array} samples A list of sample ids
+     * @param{String} field The category to count
+     *
+     * @return{Object}
+     */
+    BIOMTable.prototype.getSampleValuesCount = function (samples, field) {
+        var result = {};
+        for (var i = 0; i < samples.length; i++) {
+            var fVal = this._samp[samples[i]][field];
+            if (fVal in result) {
+                result[fVal] += 1;
+            } else {
+                result[fVal] = 1;
+            }
+        }
+
+        return result;
+    };
+
     return BIOMTable;
 });
diff --git a/empress/support_files/js/camera.js b/empress/support_files/js/camera.js
@@ -106,10 +106,14 @@ define(["glMatrix"], function (gl) {
      * @param {vec3} lookDir Where the camera will be looking
      * @param {vec3} upDir What direction the camera considers up
      */
-    Camera.prototype.placeCamera = function (pos, lookDir, upDir) {
+    Camera.prototype.placeCamera = function (
+        pos,
+        lookDir = null,
+        upDir = null
+    ) {
         this.pos_ = pos;
-        this.lookDir_ = lookDir;
-        this.upDir_ = upDir;
+        if (lookDir !== null) this.lookDir_ = lookDir;
+        if (upDir !== null) this.upDir_ = upDir;
     };
 
     /**