Shear UI

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

@@ -1,4 +1,4 @@
-define(["Colorer", "util"], function (Colorer, util) {
+define(["Colorer", "util", "EnableDisableAnimationTab"], function (Colorer, util, EnableDisableAnimationTab) {
     /**
      *
      * @class AnimationPanel
@@ -11,6 +11,9 @@ define(["Colorer", "util"], function (Colorer, util) {
      * construct AnimationPanel
      */
     function AnimationPanel(animator) {
+        this.container = new EnableDisableAnimationTab(
+            document.getElementById("animation-div")
+        );
         // used in event triggers
         this.animator = animator;
 
@@ -45,6 +48,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.container.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.container.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,6 +113,34 @@ 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();
+        });
     }
 
     /**
@@ -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/emperor-callbacks.js

@@ -1,9 +1,30 @@
+/**
+ * helper function that will color the empress tree according to
+ * colorSampleGroups.
+ * 
+ * @param {object} colorSampleGroups An object whose property names are html
+ *                                   hex color stings and associated values are
+ *                                   arrays of sample ids.
+ *                                   example:
+ *                                   {
+ *                                      #008000: ['s1', 's2', 's3']
+ *                                      #000080: ['s1', 's3', 's4']
+ *                                   }
+ */
+var emperorCallbackColorEmpress = function(colorSampleGroups) {
+    // if there's any coloring setup remove it, and re-enable the update button
+    sPanel.sUpdateBtn.classList.remove("hidden");
+    sPanel.fUpdateBtn.classList.remove("hidden");
+    empress.clearLegend();
+    empress.resetTree();
+    empress.colorSampleGroups(colorSampleGroups);
+}
+
 /*
  * This file is intended to be used only with Emperor. For more information
  * about these and other events see this document:
  * https://github.com/biocore/emperor/blob/master/doc/source/js_integration.rst
  */
-
 empress.setOnNodeMenuVisibleCallback(function (samples) {
     // reset scale settings for all samples
     ec.decViews.scatter.setScale(1);
@@ -64,7 +85,7 @@ plotView.on("click", function (name, object) {
 });
 
 plotView.on("select", function (samples, view) {
-    // remove any strangling observers
+    // remove any ongoing observers
     shearer.unregisterObserver("emperor-select");
 
     // cancel any ongoing timers
@@ -81,14 +102,8 @@ plotView.on("select", function (samples, view) {
         });
     }
 
-    var colorEmpress = () => {
-        // if there's any coloring setup remove it, and re-enable the update button
-        sPanel.sUpdateBtn.classList.remove("hidden");
-        sPanel.fUpdateBtn.classList.remove("hidden");
-        empress.clearLegend();
-        empress.resetTree();
-        empress.colorSampleGroups(namesOnly);
-    };
+    // color the tree using the samples
+    var colorEmpress = () => {emperorCallbackColorEmpress(namesOnly);};
     colorEmpress();
 
     // 4 seconds before resetting
@@ -139,6 +154,7 @@ ec.controllers.animations.addEventListener("animation-started", function (
     // animation starts
     animationPanel.startOptions();
     animationPanel.setEnabled(false);
+    animationPanel.disableTab();
 
     animator.setAnimationParameters(
         payload.message.trajectory,
@@ -148,6 +164,7 @@ ec.controllers.animations.addEventListener("animation-started", function (
         animator.lWidth
     );
     animator.initAnimation();
+    animator.disableSidePanelTabs();
 });
 
 ec.controllers.animations.addEventListener(
@@ -162,6 +179,7 @@ ec.controllers.animations.addEventListener("animation-cancelled", function (
 ) {
     // if the animation is cancelled enable the animation controls
     animationPanel.setEnabled(true);
+    animationPanel.enableTab();
     animator.stopAnimation();
 });
 
@@ -181,7 +199,7 @@ ec.controllers.animations.addEventListener("animation-ended", function (
 ec.controllers.color.addEventListener("value-double-clicked", function (
     payload
 ) {
-    // remove any strangling observers
+    // remove any ongoing observers
     shearer.unregisterObserver("emperor-value-double-clicked");
 
     // when dealing with a biplot ignore arrow-emitted events
@@ -203,14 +221,7 @@ ec.controllers.color.addEventListener("value-double-clicked", function (
     var container = {};
     container[payload.message.attribute] = names;
 
-    var colorEmpress = () => {
-        // if there's any coloring setup remove it, and re-enable the update button
-        sPanel.sUpdateBtn.classList.remove("hidden");
-        sPanel.fUpdateBtn.classList.remove("hidden");
-        empress.clearLegend();
-        empress.resetTree();
-        empress.colorSampleGroups(container);
-    };
+    var colorEmpress = () => {emperorCallbackColorEmpress(container);};
     colorEmpress();
 
     // 4 seconds before resetting

empress/support_files/js/enable-disable-animation-tab.js

@@ -0,0 +1,52 @@
+define(["EnableDisableTab"], function (EnableDisableTab) {
+	/**
+	 * @class EnableDisableAnimationTab
+	 * 
+	 * Adds the the ability to enable and disable the Animation tab by 
+	 * encapsulating it in an enabled/disabled container.
+	 * Two new containers will be created:
+	 * 		- an enable container that holds the original content of tab
+	 * 		- a disable container that will display a message describing why the
+	 *        tab has been disabled an how to re-enable it.
+	 * 
+	 * @param{object} tab The div container to encapsulate
+	 * 
+	 * @returns{EnableDisableAnimationTab}
+	 * @constructs EnableDisableAnimationTab
+	 */
+	function EnableDisableAnimationTab(tab) {
+		// call EnableDisableTab constructor
+		EnableDisableTab.call(this, tab);
+
+
+		// add disable text message
+		this.disableContainer.innerHTML = 
+			'<p class="side-panel-notes">' + 
+      			'<span style="font-weight: bold;">This tab</span> ' +
+      			'has been disabled while the animation is active from within ' +
+      			'the Emperor interface.' +  
+		    '</p>'
+
+		// add instructions to re-enable the tab
+		this.disableContainer.innerHTML +=
+    		'<p class="side-panel-notes">' +
+      			'<span style="font-weight: bold;">To re-enable</span> ' +
+      			'this tab please click on the ' +
+      			'<span style="font-style: italic;">Reset the animation</span>' +
+      			' button located within the ' +
+      			'<span style="font-style: italic;">Animations</span> ' +
+      			'tab of Emperor.' +
+		    '</p>'
+	}
+
+	// inherit EnableDisableTab functions
+	EnableDisableAnimationTab.prototype = Object.create(
+			EnableDisableTab.prototype
+	);
+
+	// set EnableDisableAnimationTab's constructor
+	EnableDisableAnimationTab.prototype.constructor =
+		EnableDisableAnimationTab;
+
+	return EnableDisableAnimationTab;
+});

empress/support_files/js/enable-disable-side-panel-tab.js

@@ -0,0 +1,68 @@
+define(["EnableDisableTab"], function (EnableDisableTab) {
+	/**
+	 * @class EnableDisableSidePanelTab
+	 * 
+	 * Adds the the ability to enable and disable a side panel tab by 
+	 * encapsulates a side-panel tab in an enabled/disabled container.
+	 * Two new containers will be created:
+	 * 		- an enable container that holds the original content of tab
+	 * 		- a disable container that will display a message describing why the
+	 *        tab has been disabled an how to re-enable it.
+	 * 
+	 * @param{String} tabName The name of the tab
+	 * @param{object} tab The div container to encapsulate
+	 * 
+	 * @returns{EnableDisableSidePanelTab}
+	 * @constructs EnableDisableSidePanelTab
+	 */
+	function EnableDisableSidePanelTab(tabName, tab) {
+		// call EnableDisableTab constructor
+		EnableDisableTab.call(this, tab);
+
+
+		// add disable text message
+		this.disableContainer.innerHTML = 
+			'<p class="side-panel-notes">'+
+				'<span style="font-weight: bold;">' + tabName + 
+				'</span> is currently disabled while an ' +
+				'<span style="font-style: italic;">animation is active</span>. ' +
+				'To enable <span style="font-style: italic;">' + tabName + 
+				'</span>, manually stop the animation.'+
+			'</p>';
+
+		// add instructions to manually disable animations from empress
+		this.disableContainer.innerHTML +=
+    		'<p class="side-panel-notes">' +
+		      '<span style="font-weight: bold;">To manually stop</span> ' +
+		      'the animation go to the ' +
+		      '<span style="font-style: italic;">Animation</span> ' +
+		      'tab and click on the ' +
+		      '<span style="font-style: italic;">Stop Animation</span> ' +
+		      'button.' +
+    		'</p>';
+
+    	// add instructions to manually disable animations from emperor
+    	this.disableContainer.innerHTML +=
+		    '<p class="side-panel-notes">' +
+      			'<span style="font-weight: bold;">Note</span> ' +
+      			'if the animation was triggered using the ' +
+      			'<span style="font-style: italic;">Emperor</span> ' +
+      			'interface of an Empire plot, it can be stop by clicking ' +
+      			'on the <span style="font-style: italic;">Restart the ' +
+      			'animation</span> button located within the ' +
+      			'<span style="font-style: italic;">Animations</span> ' +
+      			'tab of Emperor.' +
+      		'</p>';
+	}
+
+	// inherit EnableDisableTab functions
+	EnableDisableSidePanelTab.prototype = Object.create(
+			EnableDisableTab.prototype
+	);
+
+	// set EnableDisableSidePanelTab's constructor
+	EnableDisableSidePanelTab.prototype.constructor =
+		EnableDisableSidePanelTab;
+
+	return EnableDisableSidePanelTab;
+});