Add shearing UI; limit tabs during anims (#505)

* bp shear

* style fix

* checkpoint

* checkpoint

* Finished TreeController

* tree-controller

* fix doc issue

* style fix

* Apply suggestions from code review

merged @ElDeveloper's suggestions

Co-authored-by: Yoshiki Vázquez Baeza <[email protected]>

* fix style

* addressed comments

* removed shear

* start ui

* finished basic shear ui

* fixed test issue

* removed old comments

* Apply suggestions from code review

added some suggestions by @ElDeveloper and @fedarko

Co-authored-by: Marcus Fedarko <[email protected]>
Co-authored-by: Yoshiki Vázquez Baeza <[email protected]>

* started addressing PR suggestions

* fixed style

* still addressing comments

* fixed style

* fix unselect all

* Fixed unselect all for circ layout

* fixed issue were tree disappears if all tips sheared

* check point

* fixed clade collapse

* fixed style

* fixed test

* fixed no biom error

* checkpoint

* performance improvemens

* finished documenting

* style fix

* added warning to shear

* Major performance increase!

* Apply suggestions from code review

added @ElDeveloper's suggestions

Co-authored-by: Yoshiki Vázquez Baeza <[email protected]>

* fix style

* Add warning message to shear panel

* starting addressing @fedarko's comments

* addressed @fedarko's comments

* fix test

* Apply suggestions from code review

add suggestion from @fedarko

Co-authored-by: Marcus Fedarko <[email protected]>

* added more @fedarko's suggestions + stle fix

* address @fedarko's PR comments

* fixed collapse issue

* Apply suggestions from code review

added @fedarko's suggestions

Co-authored-by: Marcus Fedarko <[email protected]>

* fixed callback for emperor selections

* fixed style

* modified node circle text

* disabled tabs during animation

* fixed tests/lint issues

* Apply suggestions from code review

added suggestions

Co-authored-by: Marcus Fedarko <[email protected]>

* modified message

* fixed python test

* Remove extra " in side panel disabled message

* rm another extra "

* space after "

* fix problem i introduced in the last commit ._.

* MNT: RM \t chars, make e-d-*.js docs consistent

Reason for removing \t characters is that these were the only files
in the Python / JS codebase that used literal tab characters (instead
of ordinary spaces).

* DOC: Adjust tab-disabled prefix using isEmpirePlot

* DOC: Make uses of bold fonts consistent

The other tabs don't use bold for "This tab" and "To re-enable this
tab", so we don't use it here either.

* STY: prettify

* Cleaner toast msg for no-FM-b/c-shearing case

Co-authored-by: Yoshiki Vázquez Baeza <[email protected]>
Co-authored-by: Marcus Fedarko <[email protected]>
Co-authored-by: Marcus Fedarko <[email protected]>

empress/core.py

@@ -144,6 +144,7 @@ def __init__(self, tree, table=None, sample_metadata=None,
             self.features = None
 
         self.ordination = ordination
+        self.is_empire_plot = (self.ordination is not None)
 
         self.base_url = resource_path
         if self.base_url is None:
@@ -157,7 +158,7 @@ def __init__(self, tree, table=None, sample_metadata=None,
             shear_to_feature_metadata,
         )
 
-        if self.ordination is not None:
+        if self.is_empire_plot:
 
             # biplot arrows can optionally have metadata, think for example
             # a study where the arrows represent pH, Alkalinity, etc.
@@ -365,6 +366,8 @@ def to_dict(self):
             'names': names,
             # Should we show sample metadata coloring / animation panels?
             'is_community_plot': self.is_community_plot,
+            # Are we working with an EMPire plot?
+            'is_empire_plot': self.is_empire_plot,
             # feature table
             's_ids': s_ids,
             'f_ids': f_ids,

empress/support_files/css/empress.css

@@ -664,11 +664,17 @@ p.side-header button:hover,
 
 /* Somewhere else in the CSS adjusts line height and justify-content,
  * so we reset these here.
+ *
+ * Also, the reason for display: block is because the .control p CSS
+ * elsewhere causes weird problems when there are other tags (e.g.
+ * <span>s, like in the shearing UI) within <p> tags of class
+ * side-panel-notes due to the flex display.
  */
 .side-panel-notes {
     font-size: small;
     line-height: normal !important;
     justify-content: start !important;
+    display: block !important;
 }
 
 .indented {

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

@@ -6,11 +6,13 @@ define(["Colorer", "util"], function (Colorer, util) {
      * Creates tab for the animation panel and handles their events events.
      *
      * @param{Object} animator The object that creates the animations
+     * @param{EnableDisableAnimationTab} tab The Animation tab
      *
      * @return {AnimationPanel}
      * construct AnimationPanel
      */
-    function AnimationPanel(animator) {
+    function AnimationPanel(animator, tab) {
+        this.tab = tab;
         // used in event triggers
         this.animator = animator;
 
@@ -45,6 +47,23 @@ define(["Colorer", "util"], function (Colorer, util) {
         this._onAnimationStopped = null;
     }
 
+    /*
+     * Enables the Animation tab. This will result in the Animation tab
+     * containing its original content.
+     */
+    AnimationPanel.prototype.enableTab = function () {
+        this.tab.enableTab();
+    };
+
+    /*
+     * Disables the Animation tab. This will result in the Animation tab
+     * containing a message describing why the tab has been disabled and how to
+     * re-enable it.
+     */
+    AnimationPanel.prototype.disableTab = function () {
+        this.tab.disableTab();
+    };
+
     /**
      * Makes the play button visible. This is the menu shown before user has
      * started the animation.

empress/support_files/js/animator.js

@@ -7,11 +7,15 @@ define(["Colorer", "util"], function (Colorer, util) {
      *
      * @param{Empress} empress The core class. Entry point for all metadata and
      *                tree operations.
+     * @param{Array} sidePanelTabs An array of EnableDisableSidePanelTab
+     *                             for the side-panel tabs. These tabs will be
+     *                             disabled while the animator is active and
+     *                             enabled otherwise.
      *
      * @returns{Animator}
      * @constructs Animator
      */
-    function Animator(empress) {
+    function Animator(empress, sidePanelTabs) {
         /**
          * @type {Empress}
          * The Empress state machine
@@ -109,7 +113,35 @@ define(["Colorer", "util"], function (Colorer, util) {
          * Extra width for branches.
          */
         this.lWidth = 0;
+
+        /**
+         * @type {Array}
+         * Stores the side-panel tabs. These tabs will be disabled
+         * while the animator is active and enabled otherwise.
+         * Each element of this array is an EnableDisableSidePanelTab object
+         */
+        this.sidePanelTabs = sidePanelTabs;
     }
+    /*
+     * Enables the side panel tabs. This will result in the side panel tabs
+     * containing their original content.
+     */
+    Animator.prototype.disableSidePanelTabs = function () {
+        _.each(this.sidePanelTabs, function (tab) {
+            tab.disableTab();
+        });
+    };
+
+    /*
+     * Disables the side panel tabs. This will result in the side panel tabs
+     * containing a message describing why the tabs have been disabled and how
+     * to re-enable them.
+     */
+    Animator.prototype.enableSidePanelTabs = function () {
+        _.each(this.sidePanelTabs, function (tab) {
+            tab.enableTab();
+        });
+    };
 
     /**
      * Sets the parameters for the animation state machine.
@@ -310,6 +342,7 @@ define(["Colorer", "util"], function (Colorer, util) {
      * start the animation loop.
      */
     Animator.prototype.startAnimation = function () {
+        this.disableSidePanelTabs();
         this.initAnimation();
 
         // start animation loop
@@ -338,6 +371,7 @@ define(["Colorer", "util"], function (Colorer, util) {
      * Stops the animation and clears state machine parameters
      */
     Animator.prototype.stopAnimation = function () {
+        this.enableSidePanelTabs();
         this.__resetParams();
         this.empress.clearLegend();
         this.empress.resetTree();

empress/support_files/js/biom-table.js

@@ -86,6 +86,14 @@ define(["underscore", "util"], function (_, util) {
         this._tbl = tbl;
         this._smCols = smCols;
         this._sm = sm;
+
+        /**
+         * A set of feature IDs to ignore. This will be updated whenever
+         * the tree is sheared, and will contain the IDs of the features in
+         * the BIOM table (tips) that were removed.
+         * @ type {Set}
+         */
+        this.ignorefIdx = new Set();
     }
 
     /**
@@ -278,7 +286,9 @@ define(["underscore", "util"], function (_, util) {
         var cVal;
         var addSampleFeatures = function (sIdx, cVal) {
             _.each(scope._tbl[sIdx], function (fIdx) {
-                valueToFeatureIdxs[cVal].add(fIdx);
+                if (!scope.ignorefIdx.has(fIdx)) {
+                    valueToFeatureIdxs[cVal].add(fIdx);
+                }
             });
         };
         // For each sample...
@@ -582,6 +592,10 @@ define(["underscore", "util"], function (_, util) {
         var fID2Freqs = {};
         var totalSampleCount;
         _.each(this._fIDs, function (fID, fIdx) {
+            // we dont want to consider features that have been marked as ignore
+            if (scope.ignorefIdx.has(fIdx)) {
+                return;
+            }
             totalSampleCount = fIdx2SampleCt[fIdx];
             fID2Freqs[fID] = {};
             _.each(fIdx2Counts[fIdx], function (count, smValIdx) {
@@ -591,8 +605,27 @@ define(["underscore", "util"], function (_, util) {
                 }
             });
         });
+
         return fID2Freqs;
     };
 
+    /**
+     * Set which features to ignore. Features in this set will not be
+     * considered in functions such as getObsBy() or getFrequencyMap()
+     *
+     * @param {Set} nodes A set of feature ids to ignore
+     */
+    BIOMTable.prototype.setIgnoreNodes = function (nodes) {
+        var scope = this;
+
+        // convert feature ids to feature indices
+        // [...nodes] converts nodes from Set to Array: see
+        // https://stackoverflow.com/a/63818423
+        var nodeIdx = _.map([...nodes], (fId) => {
+            return scope._getFeatureIndexFromID(fId);
+        });
+        this.ignorefIdx = new Set(nodeIdx);
+    };
+
     return BIOMTable;
 });