Global tree properties

empress/support_files/js/canvas-events.js

@@ -349,46 +349,29 @@ define(["glMatrix", "SelectedNodeMenu"], function (gl, SelectedNodeMenu) {
         nodeId,
         moveTree = true
     ) {
-        var empress = this.empress;
-        var selectedNodeMenu = this.selectedNodeMenu;
-        var drawer = this.drawer;
-
         // multiple nodes can have the same name
-        var idList = empress._nameToKeys[nodeId];
+        var idList = this.empress._nameToKeys[nodeId];
 
         if (idList !== undefined) {
             // get first node
-            var node = empress._treeData[idList[0]];
+            var node = this.empress._treeData[idList[0]];
 
             if (idList.length > 1) {
-                node = empress._treeData[empress._tree.size - 1];
+                node = this.empress._treeData[this.empress._tree.size - 1];
             }
 
             if (moveTree) {
-                // create matrix to translate node to center of screen
-                var center = gl.vec3.fromValues(
-                    drawer.treeSpaceCenterX,
-                    drawer.treeSpaceCenterY,
-                    1
-                );
-                var centerMat = gl.mat4.create();
-                gl.mat4.fromTranslation(centerMat, center);
-
-                var nodePos = gl.vec3.fromValues(
-                    -1 * empress.getX(node),
-                    -1 * empress.getY(node),
-                    1
+                this.drawer.centerCameraOn(
+                    this.empress.getX(node),
+                    this.empress.getY(node)
                 );
-                var worldMat = gl.mat4.create();
-                gl.mat4.fromTranslation(drawer.worldMat, nodePos);
-                gl.mat4.multiply(drawer.worldMat, drawer.worldMat, centerMat);
             }
 
             // show menu
-            selectedNodeMenu.setSelectedNodes(idList);
-            selectedNodeMenu.showNodeMenu();
+            this.selectedNodeMenu.setSelectedNodes(idList);
+            this.selectedNodeMenu.showNodeMenu();
 
-            empress.drawTree();
+            this.empress.drawTree();
         } else {
             this.quickSearchBar.classList.add("invalid-search");
         }

empress/support_files/js/drawer.js

@@ -61,6 +61,8 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
 
         // the dimension of the canvas
         this.dim = null;
+
+        this.showTreeNodes = true;
     }
 
     /**
@@ -131,6 +133,7 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         this.cam.placeCamera([0, 0, this.dim / 2], [0, 0, 0], [0, 1, 0]);
 
         this._findViewingCenter();
+        this.centerCameraOn(0, 0);
     };
 
     /**
@@ -286,6 +289,18 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         this.fillBufferData_(this.sProg_.nodeVertBuff, data);
     };
 
+    /**
+     * Display the tree nodes.
+     * Note: Currently Empress will only display the nodes that had an assigned
+     * name in the newick string. (I.E. Empress will not show any node that
+     * starts with EmpressNode)
+     *
+     * @param{Boolean} showTreeNodes If true the empress with display the tree
+     *                               nodes.
+     */
+    Drawer.prototype.setTreeNodeVisibility = function (showTreeNodes) {
+        this.showTreeNodes = showTreeNodes;
+    };
     /**
      * Draws tree and other metadata
      */
@@ -306,10 +321,12 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
         c.uniformMatrix4fv(s.mvpMat, false, mvp);
 
         // draw tree nodes
-        c.uniform1i(s.isSingle, 1);
-        c.uniform1f(s.pointSize, 4.0);
-        this.bindBuffer(s.nodeVertBuff);
-        c.drawArrays(c.POINTS, 0, this.nodeSize);
+        if (this.showTreeNodes) {
+            c.uniform1i(s.isSingle, 1);
+            c.uniform1f(s.pointSize, 4.0);
+            this.bindBuffer(s.nodeVertBuff);
+            c.drawArrays(c.POINTS, 0, this.nodeSize);
+        }
 
         // draw selected node
         c.uniform1f(s.pointSize, 9.0);
@@ -380,12 +397,37 @@ define(["glMatrix", "Camera"], function (gl, Camera) {
      * @private
      */
     Drawer.prototype._findViewingCenter = function () {
-        var width = this.treeContainer.offsetWidth;
-        var height = this.treeContainer.offsetHeight;
-        var center = this.toTreeCoords(width / 2, height / 2);
+        var width = this.treeContainer.offsetWidth,
+            height = this.treeContainer.offsetHeight,
+            center = this.toTreeCoords(width / 2, height / 2);
         this.treeSpaceCenterX = center.x;
         this.treeSpaceCenterY = center.y;
     };
 
+    /**
+     * Makes the point (x, y) appear in the center of the viewing window. (I.E
+     * center of screen)
+     *
+     * @param{Number} x The x position
+     * @param{Number} y The y position
+     */
+    Drawer.prototype.centerCameraOn = function (x, y) {
+        // create matrix to translate node to center of screen
+        var center = gl.vec3.fromValues(
+            this.treeSpaceCenterX,
+            this.treeSpaceCenterY,
+            0
+        );
+
+        var centerMat = gl.mat4.create();
+        gl.mat4.fromTranslation(centerMat, center);
+
+        var nodePos = gl.vec3.fromValues(-1 * x, -1 * y, 0);
+
+        var worldMat = gl.mat4.create();
+        gl.mat4.fromTranslation(worldMat, nodePos);
+        gl.mat4.multiply(this.worldMat, centerMat, worldMat);
+    };
+
     return Drawer;
 });

empress/support_files/js/empress.js

@@ -1092,5 +1092,18 @@ define([
         return this._featureMetadataColumns;
     };
 
+    /**
+     * Display the tree nodes.
+     * Note: Currently Empress will only display the nodes that had an assigned
+     * name in the newick string. (I.E. Empress will not show any node that
+     * starts with EmpressNode)
+     *
+     * @param{Boolean} showTreeNodes If true the empress with display the tree
+     *                               nodes.
+     */
+    Empress.prototype.setTreeNodeVisibility = function (showTreeNodes) {
+        this._drawer.setTreeNodeVisibility(showTreeNodes);
+    };
+
     return Empress;
 });

empress/support_files/js/select-node-menu.js

@@ -383,6 +383,7 @@ define(["underscore", "util"], function (_, util) {
         this.fmTable.classList.add("hidden");
         this.fmTable.innerHTML = "";
         this.drawer.loadSelectedNodeBuff([]);
+        this.empress.drawTree();
     };
 
     /**

empress/support_files/js/side-panel-handler.js

@@ -32,6 +32,10 @@ define(["underscore", "Colorer"], function (_, Colorer) {
 
         this.legend = legend;
 
+        // tree properties components
+        this.treeNodesChk = document.getElementById("display-nodes-chk");
+        this.recenterBtn = document.getElementById("center-tree-btn");
+
         // sample GUI components
         this.sChk = document.getElementById("sample-chk");
         this.sSel = document.getElementById("sample-options");
@@ -346,6 +350,25 @@ define(["underscore", "Colorer"], function (_, Colorer) {
         };
     };
 
+    /**
+     * Add the callback events for the global tree properties tab. The callback
+     * events include things like centering the tree and showing tree nodes.
+     *
+     * Other things such as changing the defualt color of the tree will be
+     * added.
+     */
+    SidePanel.prototype.addTreePropertiesTab = function () {
+        var scope = this;
+        this.treeNodesChk.onchange = function () {
+            scope.empress.setTreeNodeVisibility(scope.treeNodesChk.checked);
+            scope.empress.drawTree();
+        };
+        this.recenterBtn.onclick = function () {
+            scope.empress._drawer.centerCameraOn(0, 0);
+            scope.empress.drawTree();
+        };
+    };
+
     SidePanel.prototype.updateFeatureMethodDesc = function () {
         if (this.fMethodChk.checked) {
             this.fMethodDesc.textContent =

empress/support_files/templates/empress-template.html

@@ -12,8 +12,8 @@
 
   <div>
     <!-- The tree -->
-    <div id="tree-container" class="{{ emperor_classes }}">
-      <div class="container {{ emperor_classes }}">
+    <div class="{{ emperor_classes }}">
+      <div id="tree-container" class="container {{ emperor_classes }}">
         <canvas class="tree-surface" id="tree-surface">
             Your browser does not support HTML5
         </canvas>
@@ -143,6 +143,7 @@ <h3 class="hidden" id="menu-sm-header">Sample Presence Information</h3>
         // The side menu
         var sPanel = new SidePanel(document.getElementById('side-panel'),
                                    empress, legend);
+        sPanel.addTreePropertiesTab();
         sPanel.addSampleTab();
         if (fmCols.length > 0) {
             sPanel.addFeatureTab();

empress/support_files/templates/side-panel.html

@@ -9,6 +9,25 @@
   </p>
 </div>
 
+<!-- Global Tree properties -->
+<button class="side-header collapsible">Tree Properties</button>
+<div class="side-content control hidden">
+  <p class="side-panel-notes">
+    If checked, this display node circles on all tree nodes that have a name
+    in the newick string that defined the tree.
+  </p>
+  <p>
+    <label for="display-nodes-chk">Show Node Circles</label>
+    <input id="display-nodes-chk" type="checkbox" checked="true">
+  </p>
+  <p class="side-panel-notes">
+    Make the root of the tree appear at the center of the screen.
+  </p>
+   <p>
+    <button id="center-tree-btn">Center Tree</button>
+  </p>
+</div>
+
 <!-- Sample Coloring Options -->
 <button class="side-header collapsible">Sample Metadata Coloring</button>
 <div class="side-content control hidden">