Merge pull request #58 from onursumer/hotfix

improved 3D panel initialization

Author: onursumer

build/mutationMapper.css

@@ -74,7 +74,8 @@
 	z-index: 2;
 	overflow: hidden;
 }
-.mutation-3d-vis-loader {
+.mutation-3d-vis-loader,
+.mutation-3d-vis-main-loader {
 	text-align: center;
 }
 .mutation-3d-vis-help-init {

build/mutationMapper.js

@@ -7819,7 +7819,7 @@ var Mutation3dVisView = Backbone.View.extend({
 
 		// initially hide the 3d visualizer container
 		var container3d = self.$el;
-		container3d.hide();
+		//container3d.hide();
 
 		// initially hide the residue warning message
 		self.hideResidueWarning();
@@ -7837,6 +7837,7 @@ var Mutation3dVisView = Backbone.View.extend({
 		if (mut3dVis != null)
 		{
 			mut3dVis.updateContainer(container3d);
+			mut3dVis.show();
 		}
 
 		// add listeners to panel (header) buttons
@@ -7874,6 +7875,8 @@ var Mutation3dVisView = Backbone.View.extend({
 		// init buttons
 		self._initButtons();
 
+		self.showMainLoader();
+
 		// make the main container draggable
 		container3d.draggable({
 			handle: ".mutation-3d-info-title",
@@ -8267,7 +8270,6 @@ var Mutation3dVisView = Backbone.View.extend({
 			chain.positionMap = positionMap;
 
 			// reload the selected pdb and chain data
-			mut3dVis.show();
 			self.refreshView(pdbId, chain);
 
 			// store pdb id and chain for future reference
@@ -8290,6 +8292,8 @@ var Mutation3dVisView = Backbone.View.extend({
 				model.molInfo = summary.molecule;
 			}
 
+			self.hideMainLoader();
+
 			// init info view
 			var infoView = new Mutation3dVisInfoView(
 				{el: self.$el.find(".mutation-3d-info"), model: model});
@@ -8300,6 +8304,8 @@ var Mutation3dVisView = Backbone.View.extend({
 			pdbProxy.getPositionMap(geneSymbol, chain, mapCallback);
 		};
 
+		self.showMainLoader();
+		mut3dVis.show();
 		pdbProxy.getPdbInfo(pdbId, infoCallback);
 	},
 	/**
@@ -8526,6 +8532,20 @@ var Mutation3dVisView = Backbone.View.extend({
 		self.dispatcher.trigger(
 			MutationDetailsEvents.VIEW_3D_PANEL_CLOSED);
 	},
+	/**
+	 * Shows the 3D visualizer panel.
+	 */
+	showView: function()
+	{
+		var self = this;
+		var mut3dVis = self.options.mut3dVis;
+
+		// hide the vis pane
+		if (mut3dVis != null)
+		{
+			mut3dVis.show();
+		}
+	},
 	isVisible: function()
 	{
 		var self = this;
@@ -8621,6 +8641,36 @@ var Mutation3dVisView = Backbone.View.extend({
 		// show actual vis container
 		container.css("height", self._actualHeight);
 	},
+	/**
+	 * Shows the loader for the entire panel body.
+	 */
+	showMainLoader: function()
+	{
+		var self = this;
+		var loaderImage = self.$el.find(".mutation-3d-vis-main-loader");
+		var mainContent = self.$el.find(".mutation-3d-vis-body");
+
+		// show the image
+		loaderImage.show();
+
+		// hide the main body
+		mainContent.hide();
+	},
+	/**
+	 * Hides the loader image and shows the main content (panel body).
+	 */
+	hideMainLoader: function()
+	{
+		var self = this;
+		var loaderImage = self.$el.find(".mutation-3d-vis-main-loader");
+		var mainContent = self.$el.find(".mutation-3d-vis-body");
+
+		// show the image
+		loaderImage.hide();
+
+		// hide the main body
+		mainContent.show();
+	},
 	/**
 	 * Shows a warning message for unmapped residues.
 	 *
@@ -13687,48 +13737,53 @@ function Mutation3dVis(name, options)
 		if (_container != null)
 		{
 			_container.show();
-
-			// this is a workaround. see the hide() function below for details
-
-			var currentTop = parseInt(_container.css('top'));
-
-			// update the top position only if it is negative
-			if (currentTop < 0)
-			{
-				if (_prevTop != null && _prevTop > 0)
-				{
-					_container.css('top', _prevTop);
-				}
-				else
-				{
-					_container.css('top', 0);
-				}
-			}
 		}
+
+		//	// this is a workaround. see the hide() function below for details
+		//
+		//	var currentTop = parseInt(_container.css('top'));
+		//
+		//	// update the top position only if it is negative
+		//	if (currentTop < 0)
+		//	{
+		//		if (_prevTop != null && _prevTop > 0)
+		//		{
+		//			_container.css('top', _prevTop);
+		//		}
+		//		else
+		//		{
+		//			_container.css('top', 0);
+		//		}
+		//	}
+		//}
 	}
 
 	/**
 	 * Hides the visualizer panel.
 	 */
 	function hide()
 	{
-		// TODO jQuery.hide function is problematic after Jmol init
-		// Reloading the PDB data throws an error message (Error: Bad NPObject as private data!)
-		// see https://code.google.com/p/gdata-issues/issues/detail?id=4820
-
-		// So, the current workaround is to reposition instead of hiding
 		if (_container != null)
 		{
-			//_container.hide();
-			var currentTop = parseInt(_container.css('top'));
-
-			if (currentTop > 0)
-			{
-				_prevTop = currentTop;
-			}
-
-			_container.css('top', -9999);
+			_container.hide();
 		}
+
+		// jQuery.hide function is problematic after Jmol init
+		// Reloading the PDB data throws an error message (Error: Bad NPObject as private data!)
+		// see https://code.google.com/p/gdata-issues/issues/detail?id=4820
+		// So, the current workaround is to reposition instead of hiding
+		//if (_container != null)
+		//{
+		//	//_container.hide();
+		//	var currentTop = parseInt(_container.css('top'));
+		//
+		//	if (currentTop > 0)
+		//	{
+		//		_prevTop = currentTop;
+		//	}
+		//
+		//	_container.css('top', -9999);
+		//}
 	}
 
 	/**
@@ -17931,11 +17986,17 @@ MutationDiagram.prototype.highlightMutation = function(mutationSid)
 	var self = this;
 
 	var pileupId = self.mutationPileupMap[mutationSid];
-	var pileup = self.svg.select("#" + pileupId);
 
-	if (pileup.length > 0)
+	// there may not be a pileup corresponding to the given sid,
+	// because not every mutation is mapped onto the diagram
+	if (pileupId != null)
 	{
-		self.highlight(pileup[0][0]);
+		var pileup = self.svg.select("#" + pileupId);
+
+		if (pileup.length > 0)
+		{
+			self.highlight(pileup[0][0]);
+		}
 	}
 };
 
@@ -21074,6 +21135,13 @@ function Mutation3dController(mutationDetailsView, mainMutationView, viewOptions
 			}
 		};
 
+		if (mut3dView != null &&
+		    _mut3dVisView != null)
+		{
+			_mut3dVisView.showMainLoader();
+			_mut3dVisView.showView();
+		}
+
 		// init view with the pdb data
 		pdbProxy.getPdbData(uniprotId, initView);
 	}