Fix crash when epntap panel reloads, move service tooltip in utils.Format render…

…ers, autoload services/granules stores

Fix crash when epntap panel reloads, move service tooltip in utils.Format render…
…ers, autoload services/granules stores
Nathanael Jourdane
1 parent 3345b95b
Showing 3 changed files with 61 additions and 79 deletions Show diff stats
js/app/controllers/EpnTapModule.js
js/app/controllers/InteropModule.js
js/app/views/EpnTapUI.js
@@ -35,10 +35,27 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 			handler: this.createWindow,
 			scope: this
 		};
+	},
+	/**
+	Called each time the epntap module is loaded.
+	- `target`: an array of 3 values: [target_name, dataproduct_type]; or null.
+	*/
+	loadTarget: function(target) {
+		this.target = target;
 		this.aquireElements();
-		this.servicesStore.load();
-		this.productTypesStore.load();
+		this.addListeners();
+
+		// this.servicesStore.clearFilter();
+		this.granulesStore.removeAll();
+
+		if(target) {
+			var name = target[0].charAt(0).toUpperCase() + target[0].replace(/_/g, ' ').substr(1).toLowerCase();
+			this.targetNameCB.getStore().add({'id': target[0], 'name': name});
+			this.targetNameCB.select(target[0]);
+			this.productTypeCB.select(target[1]);
+			this.updateNbResults();
+		}
 	},
 	aquireElements: function() {
@@ -91,28 +108,6 @@ Ext.define(&#39;amdaDesktop.EpnTapModule&#39;, {
 		} else {
 			this.getBtn.disable();
 		}
-
-	},
-
-	/**
-	Called each time the epntap module is loaded.
-	- `target`: an array of 3 values: [target_name, dataproduct_type]; or null.
-	*/
-	loadTarget: function(target) {
-		this.target = target;
-		this.aquireElements();
-		this.addListeners();
-
-		// this.servicesStore.clearFilter();
-		this.granulesStore.removeAll();
-
-		if(target) {
-			var name = target[0].charAt(0).toUpperCase() + target[0].replace(/_/g, ' ').substr(1).toLowerCase();
-			this.targetNameCB.getStore().add({'id': target[0], 'name': name});
-			this.targetNameCB.select(target[0]);
-			this.productTypeCB.select(target[1]);
-			this.updateNbResults();
-		}
 	},
 	/*************
@@ -423,7 +423,7 @@ Ext.define(&#39;amdaDesktop.InteropModule&#39;, {
 					activeTab: activeTab,
 					baseId: baseId,
 					loadTab: function(tab) {
-						if(tab['id'] == 'epntapTab') {
+						if(tab['id'] === 'epntapTab') {
 							me.loadEpnTap(config && 'epntapTarget' in config ? config['epntapTarget']: false);
 						}
 					},
@@ -28,7 +28,8 @@ store.
 TODO: try "var arrayStore = Ext.create(...);"
 */
 Ext.create('Ext.data.Store', {
-	storeId:'productTypesStore',
+	storeId: 'productTypesStore',
+	autoLoad: true,
 	fields: ['id', 'name', 'desc'],
 	data: [
 		{'id': 'all', 'name': '--All--', 'desc': 'Select all produt types.'},
@@ -95,6 +96,7 @@ This list is used to fill the `servicesGrid` table, which is updated by `EpnTapM
 */
 Ext.create('Ext.data.Store', {
 	storeId: 'servicesStore',
+	autoLoad: true,
 	fields: [
 		{name: 'id', type: 'string'},
 		{name: 'short_name', type: 'string'},
@@ -146,7 +148,7 @@ selected.
 - `thumbnail_url`: the thumbnail_url EPN-TAP parameter (ibid).
 */
 Ext.create('Ext.data.Store', {
-	id: 'granulesStore',
+	storeId: 'granulesStore',
 	model: 'granulesModel', // Created dynamically
 	autoload: false,
 	pageSize: 25,
@@ -166,6 +168,38 @@ Ext.create(&#39;Ext.data.Store&#39;, {
 Ext.define('App.util.Format', {
 	override: 'Ext.util.Format',
+	'prettify': function(data) {
+		return data.charAt(0).toUpperCase() + data.replace(/_/g, ' ').substr(1).toLowerCase();
+	},
+	'serviceTooltip': function(value, data) {
+		var infoColor = data.nb_results == -2 ? 'IndianRed' : 'green';
+		var info = data.info.length > 0 ? "<p style='color:" + infoColor + "'>" + data.info + '</p>' : '';
+
+		var colums = ['res_title', 'ivoid', 'access_url', 'table_name', 'content_type', 'creator_seq', 'content_level', 'reference_url', 'created', 'updated'];
+		var details = '';
+		for (var i=0 ; i < colums.length ; i++) {
+			if(data[colums[i]] !== '') {
+				key = Ext.util.Format.prettify(colums[i]);
+				var val = key === 'Content level' ? data[colums[i]].replace(/#/g, ', ') : data[colums[i]];
+				details += '<li><b>' + key + '</b>: ' + val + '</li>';
+			}
+		}
+		return Ext.String.format('<div data-qtitle="{0}" data-qtip="{1}<ul>{2}</ul>">{0}</div>', value, info, details);
+	},
+	'service.text': function(data, metadata, record) {
+		return Ext.util.Format.serviceTooltip(data, record.data);
+	},
+	'service.number': function(data, metadata, record) {
+		value = '' + data;
+		if(data < 0) {
+			value = '-';
+		} else if(data >= 1000*1000) {
+			value = (data/(1000*1000)).toPrecision(3) + 'm';
+		} else if(data >= 1000) {
+			value = (data/1000).toPrecision(3) + 'k';
+		}
+		return Ext.util.Format.serviceTooltip(value, record.data);
+	},
 	'text': function(data) {
 		return '<p style="white-space: normal;">' + data + '</p>';
 	},
@@ -209,17 +243,6 @@ Ext.define(&#39;App.util.Format&#39;, {
 		var Y = Math.floor(e / 1461) - 4716 + Math.floor((12 + 2 - M) / 12);
 		return Ext.Date.format(new Date(Y, M-1, D), 'Y/m/d');
 	},
-	'number': function(val) {
-		if(val < 0) {
-			return '-';
-		} else if(val >= 1000*1000) {
-			return (val/(1000*1000)).toPrecision(3) + 'm';
-		} else if(val >= 1000) {
-			return (val/1000).toPrecision(3) + 'k';
-		} else {
-			return val;
-		}
-	},
 	'format': function(data) {
 		var mimetypeDict = {
 			'application/fits': 'fits',
@@ -518,14 +541,15 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 	service granules.
 	*/
 	createServicesGrid: function() {
-		var epnTapServicesGrid = new Ext.grid.Panel({
+		return {
+			xtype: 'grid',
 			id: 'epnTapServicesGrid',
 			title: 'Services',
 			store: Ext.data.StoreManager.lookup('servicesStore'),
 			flex: 1,
 			columns: [
-				{text: 'Name', dataIndex: 'short_name', flex: 1},
-				{text: 'Nb res.', dataIndex: 'nb_results', width: 50, renderer: 'number'}
+				{text: 'Name', dataIndex: 'short_name', flex: 1, renderer: 'service.text'},
+				{text: 'Nb res.', dataIndex: 'nb_results', width: 50, renderer: 'service.number'}
 			],
 			viewConfig: {
 				getRowClass: function(record, index) {
@@ -536,45 +560,8 @@ Ext.define(&#39;amdaUI.EpnTapUI&#39;, {
 						return 'error_row';
 					}
 				}
-			},
-			renderTo: Ext.getBody()
-		});
-
-		Ext.create('Ext.tip.ToolTip', {
-			target: epnTapServicesGrid.getView().el,
-			delegate: epnTapServicesGrid.getView().itemSelector,
-			trackMouse: true,
-			listeners: {
-				beforeshow: function updateTipBody(tooltip) {
-					var column_titles = {
-							'res_title': 'Title',
-							'ivoid': 'ivoid',
-							'access_url': 'Access URL',
-							'table_name': 'Table name',
-							'content_type': 'content type',
-							'creator_seq': 'Creator',
-							'content_level': 'Content level',
-							'reference_url': 'reference URL',
-							'created': 'Created on',
-							'updated': 'Updated on'};
-					var record = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
-					var ttContent = '<h3>' + record.get('short_name') + '</h3><ul>';
-					if(record.get('info').length > 0) {
-						var infoColor = record.get('nb_results') == -2 ? 'IndianRed' : 'green';
-						ttContent += '<p style="color:' + infoColor + '">' + record.get('info') + '</p><br/>';
-					}
-					for (var column in column_titles) {
-						var col_content = record.get(column);
-						if(column === 'content_level' && col_content!=='') {
-							col_content = col_content.replace(/#/g, ", ");
-						}
-						ttContent += '<li><b>' + column_titles[column] + '</b>: ' + col_content + '</li>';
-					}
-					tooltip.update(ttContent + '</ul>');
-				}
 			}
-		});
-		return epnTapServicesGrid;
+		};
 	},
 	/**