/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel

 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

Ext.require(['Ext.grid.plugin.BufferedRenderer']);

/**
`productTypesStore`: An ExtJS Store containing the list of the different data product types defined on all granules, on
all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
script).

This list is used to fill the `productTypeCB` combo box, which is initilized in `EpnTapModule` at the panel creation.

- `id`: the data product type IDs, according to the EPN-TAP specification (see
		https://voparis-confluence.obspm.fr/pages/viewpage.action?pageId=1148225);
- `name`: the data product name, according to the EPN-TAP specification (ibid).

These IDs and names are hard-defined in the JSon file `generic_data/EpnTapData/dataproduct_types.json`.

Notes:
- if a granule contains a data product type which is not conform to the EPN-TAP definition (ibid), it is not displayed
in this store and an information message is displayed on the JavaScript console during the panel creation.
- if a data product type is not present in any of the granules from the EPN-TAP services, it is not present in this
store.

*/

Ext.create('Ext.data.Store', {

	storeId: 'productTypesStore',
	autoLoad: true,

	fields: ['id', 'name', 'desc'],

	data: [

		{'id': 'all', 'name': '--All--', 'desc': 'Select all produt types.'},
		{'id': 'clear', 'name': '--Clear--', 'desc': 'Clear the selection.'},
		{'id': 'im', 'name': 'Image', 'desc': '2D series of values depending on 2 spatial axes, with measured parameters.'},
		{'id': 'ma', 'name': 'Map', 'desc': '2D series of values depending on 2 spatial axes, with derived parameters.'},
		{'id': 'sp', 'name': 'Spectrum', 'desc': '1D series of values depending on a spectral axis (or Frequency, Energy, Mass,...).'},
		{'id': 'ds', 'name': 'Dynamic spectrum', 'desc': '2D series of values depending on time and on a spectral axis (Frequency, Energy, Mass,...), FoV is homogeneous.'},
		{'id': 'sc', 'name': 'Spectral cube', 'desc': '3D series of values depending on 2 spatial axes and on a spectral axis (Frequency, Energy, Mass,..).'},
		{'id': 'pr', 'name': 'Profile', 'desc': '1D series of values depending on a spatial axis.'},
		{'id': 'vo', 'name': 'Volume', 'desc': '3D series of values depending on 3 spatial axes (spatial coordinates or tabulated values in a volumic grid).'},
		{'id': 'mo', 'name': 'Movie', 'desc': '3D series of values depending on 2 spatial axes and on time.'},
		// {'id': 'cu', 'name': 'Cube', 'desc': '.'},
		{'id': 'ts', 'name': 'Time series', 'desc': '1D series of values depending on time.'},
		{'id': 'ca', 'name': 'Catalogue', 'desc': '1D list of elements.'},
		{'id': 'ci', 'name': 'Catalogue item', 'desc': '0D list of elements.'}

	]

});

/**
`targetNamesStore`: An ExtJS Store containing the list of the different target names defined on all granules, on
all available EPN-TAP services (defined in `generic_data/EpnTapData/metadata.json`, updated periodically with a cron
script), which match with the selected data product and target class.

This list is used to fill the `targetNameCB` combo box, which is updated by `EpnTapModule` each time a new target class
(or, by transitivity, product type) is selected.

- `id`: the target name in lowercase, with the underscore between each word;
- `name`: the target name, capitalized with spaces between each word (done `EpnTapModule.prettify()`).
*/

Ext.create('Ext.data.Store', {

	storeId: 'targetNamesStore',

	fields: ['id', 'text', 'name', 'type', 'parent', 'aliases'],

	proxy: {
		type: 'ajax',

		url: 'php/epntap.php',

		extraParams: { action: 'resolver' }

	},
	errorDisplayed: false,
	listeners: {
		load: function(store, records, successful) {
			if(!successful && !store.errorDisplayed) {
				Ext.Msg.alert('Error', 'Can not load results from the resolver. Please enter target names manually.');
				store.errorDisplayed = true;
			}
		}

	}

});

/**
`servicesStore`: An ExtJS Store containing the list of the EPN-TAP services (defined in
`generic_data/EpnTapData/metadata.json`, updated periodically with a cron script), which contains at least one granule
matching with the granules filter (the selected data product type, target class and target name).

This list is used to fill the `servicesGrid` table, which is updated by `EpnTapModule` each time a new target name
(or, by transitivity, target class or product type) is selected.

- `id`: the database name of the service, according to the `table_name` column from the `rr.res_table` in the
		registry database;
- `nbResults`: the number of granules matching with the granules filter for this service;
- `shortName`: the service short name, according to the `short_name` column from the `rr.resource` table in the registry
		database;
- `title`: the service title, according to the `res_title` column from the `rr.resource` table in the registry database;
- `accessURL`: the service access URL, according to the `access_url` column from the `rr.interface` table in the
		registry database.
*/

Ext.create('Ext.data.Store', {

	storeId: 'servicesStore',

	autoLoad: true,

	fields: [
		{name: 'id', type: 'string'},
		{name: 'short_name', type: 'string'},
		{name: 'res_title', type: 'string'},
		{name: 'ivoid', type: 'string'},
		{name: 'access_url', type: 'string'},
		{name: 'table_name', type: 'string'},
		{name: 'content_type', type: 'string'},
		{name: 'creator_seq', type: 'string'},
		{name: 'content_level', type: 'string'},
		{name: 'reference_url', type: 'string'},
		{name: 'created', type: 'date', dateFormat: 'c'},
		{name: 'updated', type: 'date', dateFormat: 'c'},

		{name: 'nb_results', type: 'integer'},

		{name: 'info', type: 'string'}

	],
	proxy: {
		type: 'ajax',

		url: 'php/epntap.php',

		extraParams : {action: 'getServices'}
	},
	sorters: [
		{property: 'nb_results', direction: 'DESC'},
		{property: 'short_name', direction: 'ASC'}

	],
	listeners: {

		// beforeload: function(s, operation) { console.log(operation); },

		load: function(store, records, successful) {
			if(!successful) {
				Ext.Msg.alert('Error', 'Can not get epntap services from registries.');
			}
		}

	}

});

/**

`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match

with the granules filter (the selected data product type, target class and target name).

This list is used to fill the `granulesGrid` table, which is updated by `EpnTapModule` each time a new service is
selected.

- `num`: the line number, according to the order of the query response and the current page (see `currentPageLb`);
- `dataproduct_type`: the dataproduct_type EPN-TAP parameter, as defined in
	https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.
- `target_name`: the target_name EPN-TAP parameter (ibid);
- `time_min`: the time_min EPN-TAP parameter (ibid);
- `time_max`: the time_max EPN-TAP parameter (ibid);
- `access_format`: the access_format EPN-TAP parameter (ibid);
- `granule_uid`: the granule_uid EPN-TAP parameter (ibid);
- `access_estsize`: the access_estsize EPN-TAP parameter (ibid);
- `access_url`: the access_url EPN-TAP parameter (ibid);
- `thumbnail_url`: the thumbnail_url EPN-TAP parameter (ibid).
*/

// TODO: Add granules filter (see http://docs.sencha.com/extjs/4.0.7/#!/example/grid-filtering/grid-filter-local.html)

Ext.define('GranulesModel', {
	extend: 'Ext.data.Model'
	// columns are created dynamically
});

Ext.create('Ext.data.Store', {

	storeId: 'granulesStore',

	model: 'GranulesModel',

	buffered: true,

	autoload: false,

	pageSize: 500,
	leadingBufferZone: 0,

	proxy: {
		type: 'ajax',
		url: 'php/epntap.php',

		reader: { type: 'json', root: 'data'},

		simpleSortMode: true

	},
	listeners: {

		'beforeprefetch': function(store, operation) {

			var service = Ext.data.StoreManager.lookup('servicesStore').getById(store.selectedService).data;

			store.getProxy().extraParams = {
				'action': 'getGranules',
				'url': service['access_url'],
				'tableName': service['table_name'],

				'targetNames': Ext.getCmp('epnTapTargetNameCB').rawValue,

				'productTypes': Ext.getCmp('epnTapProductTypeCB').value.join(';'),
				'timeMin': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStartTime(), 'd/m/Y H:i:s'),
				'timeMax': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStopTime(), 'd/m/Y H:i:s'),
				'nbRes': service['nb_results']
			};
		},

		'prefetch': function(store, records, successful, operation) {

			// console.log('(prefetch) operation ' + (successful ? 'success' : 'failed') + ': ', operation);

			// console.log(operation.params);
			// console.log(Ext.decode(operation.response.responseText));
		},

		'metachange': function(store, meta) {

			if(meta.metaHash != store.metaHash) {
				Ext.getCmp('epnTapGranulesGrid').reconfigure(store, meta.columns);
				store.metaHash = meta.metaHash;
			}

		}
	}

});

/**
Error are not displayed here, use try/catch each time it's necessary.
*/

Ext.define('App.util.Format', {
	override: 'Ext.util.Format',

	// Utils

	'prettify': function(data) {
		return data.charAt(0).toUpperCase() + data.replace(/_/g, ' ').substr(1).toLowerCase();
	},

	'url': function(data) {
		var url_pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
				'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
				'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
				'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
				'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
				'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
		return url_pattern.test(data) ? data : null;
	},

	'cell': function(content, tooltip, tooltipTitle) {
		var ttAttr = "";

		if(tooltip !== '') {

			var ttTitle = tooltipTitle ? " data-qtitle='" + tooltipTitle + "'" : "";
			ttAttr = ttTitle + "' data-qtip='" + (tooltip ? tooltip : (content ? content : 'No value.')) + "'";

		}

		return "<div class=epntap_cell " + ttAttr + ">" + (content ? content : '-') + "</div>";

	},

	// Services grid

	'serviceTooltip': function(data) {

		for (var key in data) {
			if(typeof data[key] == 'string' && data[key] != '') {
				data[key] = data[key].replace(/'/g, ''').replace(/"/g, '"');
			}
		}

		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 key in colums) {
			if(data[colums[key]] !== '') {
				var val = colums[key] === 'content_level' ? data[colums[key]].replace(/#/g, ', ') : data[colums[key]];
				details += '<li><b>' + Ext.util.Format.prettify(colums[key]) + '</b>: ' + val + '</li>';

			}
		}

		return info + '<ul>' + details + '</ul>';

	},
	'service.text': function(data, metadata, record) {

		return Ext.util.Format.cell(data, Ext.util.Format.serviceTooltip(record.data), 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.cell(value, Ext.util.Format.serviceTooltip(record.data), record.data.short_name);

	},

	// Granules grid

	'granule.text': function(data, metadata, record) {

		return Ext.util.Format.cell(data);

	},

	'granule.link': function(data, metadata, record) {

		var icon_b64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iNzY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NDAgNzY4SDEyOFYyNTcuOTA1OTk5OTk5OTk5OTVMMjU2IDI1NlYxMjhIMHY3NjhoNzY4VjU3Nkg2NDBWNzY4ek0zODQgMTI4bDEyOCAxMjhMMzIwIDQ0OGwxMjggMTI4IDE5Mi0xOTIgMTI4IDEyOFYxMjhIMzg0eiIvPjwvc3ZnPg==';

		var icon = '<img style="width:15px;" alt="link" src="' + icon_b64 + '">';

		url = Ext.util.Format.url(data);
		if(url) {
			txt = '<a style="font-size:150%" target="_blank" href="' + url + '">' + icon + '</a>';
		}
		return Ext.util.Format.cell(txt, url);

	},

	'granule.img': function(data, metadata, record) {

		img_url = Ext.util.Format.url(data);
		if(img_url) {
			icon = '<img style="max-width:100%; max-height:100%" alt="-" src="' + img_url + '">';

			img = '<img style="max-width:200px; max-height:200px" src="' + img_url + '">';

		}
		return Ext.util.Format.cell(icon, img);

	},

	'granule.type': function(data, metadata, record) {

		var productTypeDict = Ext.data.StoreManager.lookup('productTypesStore').data.map;

		return Ext.util.Format.cell(productTypeDict[data].data.name);

	},

	'granule.size': function(data, metadata, record) {

		var size = parseInt(data);

		if (isNaN(size)) {
		} else if (size >= 1024*1024) {
			txt = (size/(1024*1024)).toPrecision(3) + 'Go';
		} else if (size >= 1024) {
			txt = (size/1024).toPrecision(3) + 'Mo';
		} else {
			txt = size + 'Ko';
		}

		return Ext.util.Format.cell(txt);

	},

	'granule.proc_lvl': function(data, metadata, record) {

		var levels = {1: 'Raw', 2: 'Edited', 3: 'Calibrated', 4: 'Resampled', 5: 'Derived', 6: 'Ancillary'};

		return Ext.util.Format.cell((data in levels) ? levels[data] : '<em>' + data + '</em>');

	},

	'granule.date': function(data, metadata, record) {

		if(isNaN(data)) {
			return '';
		}
		var f = Number(data) + 1401 + Math.floor((Math.floor((4 * Number(data) + 274277) / 146097) * 3) / 4) - 38;
		var e = 4 * f + 3;
		var g = Math.floor((e % 1461) / 4);
		var h = 5 * g + 2;
		var D = Math.floor((h % 153) / 5) + 1;
		var M = ((Math.floor(h / 153) + 2) % 12) + 1;
		var Y = Math.floor(e / 1461) - 4716 + Math.floor((12 + 2 - M) / 12);

		var date = new Date(Y, M-1, D);
		return Ext.util.Format.cell(Ext.Date.format(date, 'Y/m/d'), Ext.Date.format(date, 'F j, Y, g:i a'));

	},

	'granule.format': function(data, metadata, record) {

		var mimetypeDict = {
			'application/fits': 'fits',
			'application/x-pds': 'pds',
			'image/x-pds': 'pds',
			'application/gml+xml': 'gml',
			'application/json': 'json',
			'application/octet-stream': 'bin, idl, envi or matlab',
			'application/pdf': 'pdf',
			'application/postscript': 'ps',
			'application/vnd.geo+json': 'geojson',
			'application/vnd.google-earth.kml+xml': 'kml',
			'application/vnd.google-earth.kmz': 'kmz',
			'application/vnd.ms-excel': 'xls',
			'application/x-asdm': 'asdm',
			'application/x-cdf': 'cdf',
			'application/x-cdf-istp': 'cdf',
			'application/x-cdf-pds4': 'cdf',
			'application/x-cef1': 'cef1',
			'application/x-cef2': 'cef2',
			'application/x-directory': 'dir',
			'application/x-fits-bintable': 'bintable',
			'application/x-fits-euro3d': 'euro3d',
			'application/x-fits-mef': 'mef',
			'application/x-geotiff': 'geotiff',
			'application/x-hdf': 'hdf',
			'application/x-netcdf': 'nc',
			'application/x-netcdf4': 'nc',
			'application/x-tar': 'tar',
			'application/x-tar-gzip': 'gtar',
			'application/x-votable+xml': 'votable',
			'application/x-votable+xml;content=datalink': 'votable',
			'application/zip': 'zip',
			'image/fits': 'fits',
			'image/gif': 'gif',
			'image/jpeg': 'jpeg',
			'image/png': 'png',
			'image/tiff': 'tiff',
			'image/x-fits-gzip': 'fits',
			'image/x-fits-hcompress': 'fits',
			'text/csv': 'csv',
			'text/html': 'html',
			'text/plain': 'txt',
			'text/tab-separated-values': 'tsv',
			'text/xml': 'xml',
			'video/mpeg': 'mpeg',
			'video/quicktime': 'mov',
			'video/x-msvideo': 'avi'
		};

		return Ext.util.Format.cell((data in mimetypeDict) ? '<p>' + mimetypeDict[data] + '</p>' : '<em>' + data + '</em>');

	}
});

/**
`EpnTapUI`: The view of the AMDA EPN-TAP module, allowing the user to query and display granules information from
EPN-TAP services.

Note: The controller part of this module is defined in `js/app/controller/EpnTapModule`.
*/

Ext.define('amdaUI.EpnTapUI', {

	extend: 'Ext.panel.Panel',

	alias: 'widget.panelEpnTap',

	requires: ['amdaUI.IntervalUI'],

	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/

	constructor: function(config) {

		this.init(config);
		this.callParent(arguments);
	},

	/**
	Create all the EpnTapPanel UI elements, and apply the AMDA module `config` (which includes the created items).

	When the panel is correctly rendered, the panel triggers `EpnTapModule.onWindowLoaded()`.

	Note: All the UI elements creation are defined as functions in this init method and not as methods in order to make
	them private (ie. to avoid `EpnTapUI.createServicesGrid();`, which doesn't make sense).
	*/
	init: function(config) {
		var myConf = {
			id: 'epntapTab',
			title: 'EPN-TAP',
			layout: 'fit',
			items: [{
				xtype: 'container',
				layout: { type: 'vbox', pack: 'start', align: 'stretch'},
				items: [
					this.createServiceFilterPanel(),

					this.createGridsPanel()

				]
			}]
		};
		Ext.apply(this, Ext.apply(arguments, myConf));
	},

	/***************************
	*** Service filter panel ***
	***************************/

	/**
	Create `epnTapServiceFilterPanel`, an ExtJS Panel containing two containers:
	- the left container, containing the combo boxes (for product type, target class and target name)
		and the navigation panel;
	- the right container, containing the time selector.
	*/
	createServiceFilterPanel: function() {
		return {

			xtype: 'form',

			id: 'epnTapServiceFilterPanel',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			region: 'north',

			defaults: { margin: '5 0 5 5'},

			items: [{ // Left part
				xtype : 'container',

				flex: 1,

				items: [

					this.createTargetNameCB(),

					this.createProductTypeCB()

				]

			}, { // Middle part
				xtype : 'container',
				flex: 1,

				items: [
					this.createTimeSelector()
				]

			}, { // Right part
				xtype : 'container',

				items: [

					this.createSendButton()

				]

			}]
		};
	},

		/**
		Create `epnTapTargetNameCB`, an ExtJS ComboBox, containing a list of target names corresponding to the selected
		target class, as defined in `targetNamesStore`, which is initilized by `EpnTapModule`.

		The selection of a target name triggers `EpnTapModule.onTargetNameCBChanged()`, which basically updates
		`granulesGrid`.
		*/
		createTargetNameCB: function() {
			return {
				xtype: 'combobox',
				id: 'epnTapTargetNameCB',
				fieldLabel: 'Target name',
				emptyText: 'Earth, Saturn, 67P, ...',

				tooltip: 'Start to type a text, then select a target name (required). Several values are allowed, separated by a semicolon.',

				store: Ext.data.StoreManager.lookup('targetNamesStore'),
				queryMode: 'remote',
				queryParam: 'input',

				displayField: 'text',

				valueField: 'id',
				margin: '15 0 5 0',
				labelWidth: 71,
				minWidth: 20,
				minChars: 2,
				hideTrigger: true,
				listConfig: {
					getInnerTpl: function() {

						return '<div data-qtitle="{name}" data-qtip="<p>type: {type}</p><p>parent: {parent}</p><p>aliases:</p><ul>{aliases}</ul>">{name}</div>';

					}
				},
				listeners: {
					render: function(cb) {

						new Ext.ToolTip({ target: cb.getEl(), html: '<div style="width:200px">' + cb.tooltip + '</div>'});

					}
				}
			};
		},

	/**
	Create `epnTapProductTypeCB`, an ExtJS ComboBox, containing a list of product types as defined in
	`epnTapProductTypesStore`, which is initilized by `EpnTapModule`.

	The selection of a produt type triggers `EpnTapModule.onProductTypeCBChanged()`, which basically update

	`epnTapGranulesGrid`.

	*/
	createProductTypeCB: function() {
		return {
			xtype: 'combobox',
			id: 'epnTapProductTypeCB',
			fieldLabel: 'Product type',

			emptyText: 'Image, Time series, ...',

			tooltip: 'Select one or several data product types (required).',

			store: Ext.data.StoreManager.lookup('productTypesStore'),
			queryMode: 'local',
			valueField: 'id',

			multiSelect: true,

			displayField: 'name',

			labelWidth: 71,

			editable: false,

			listConfig: {
				getInnerTpl: function() {
					return '<div data-qtitle="{name}" data-qwidth=200 data-qtip="<p>{desc}</p>">{name}</div>';
				}
			},

			listeners: {

				change: function(cb, records) {

					var val = cb.value[cb.value.length - 1];
					if(val === 'all') {
						cb.select(cb.store.getRange().slice(2));
					} else if (val === 'clear') {
						cb.reset();

					}

				},
				render: function(cb) {

					new Ext.ToolTip({ target: cb.getEl(), html: '<div style="width:200px">' + cb.tooltip + '</div>'});

				}
			}

		};
	},

	/**
	Create `epnTapTimeSelector`, an IntervalUI object, allowing the user to select a time interval (by filling two
	dates and/or a duration).

	See `js/app/views/IntervalUI.js` for more information about this component.
	*/
	createTimeSelector: function() {
		return {
			xtype: 'intervalSelector',

			id: 'epnTapTimeSelector'

		};
	},

	/***********************
	*** Navigation panel ***
	***********************/

	/**

	The button used to send the query.
	*/
	createSendButton: function() {
		return {
			xtype: 'button',
			id: 'epnTapGetBtn',

			text: 'Get services',

			disabled: true,
			width: 140,

			height: 50,
			margin: 10

		}
	},

	/************
	*** Grids ***
	************/

	/**

	Create `epnTapGridsPanel`, an ExtJS Panel, containing `epnTapServicesGrid` and `epnTapGranulesGrid`.

	After the rendering of the grids, it triggers `epnTapModule.onWindowLoaded()`, which basically fill
	`epnTapServicesGrid` for the first time.
	*/
	createGridsPanel: function() {
		return {
			xtype: 'panel',
			id: 'epnTapGridsPanel',
			layout: 'fit',

			height: 440,

			region: 'center',
			items: [{
				xtype: 'container',
				layout: { type: 'hbox', pack: 'start', align: 'stretch'},
				items: [
					this.createServicesGrid(),
					this.createGranulesGrid()
				]
			}]
		};
	},

	/**

	Create `epnTapServicesGrid`, an ExtJS grid containing the EPN-TAP services matching with the filter form
	(`serviceFilterPanel`).

	For each service, this grid displays:
	- the service name;
	- the number of granules matching with the filter.

	Other informations are available through an ExtJS Tooltip, on each row:
	- short name;
	- title;
	- access URL.

	A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
	service granules.

	*/

	createServicesGrid: function() {

		return {
			xtype: 'grid',

			cls: 'epntap_grid',

			id: 'epnTapServicesGrid',
			title: 'Services',
			store: Ext.data.StoreManager.lookup('servicesStore'),
			flex: 1,

			columns: [

				{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) {

					var nb_res = record.get('nb_results');

					if(nb_res == 0 || nb_res == -1) {

						return 'disabled_row';

					} else if (nb_res == -2) {
						return 'error_row';

					}

				}

			}

		};

	},

	/**
	Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
	`epnTapServicesGrid`.

	For each granule, this grid displays:
	- the row number;
	- the dataproduct type;
	- the target name;
	- the min and max times;
	- the format;
	- the UID (granule identifier);
	- the estimated size;
	- the URL;
	- the thumbnail.

	Each of these information are displayed in a specific rendering to improve user experience.
	For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.

	Other informations are available through an ExtJS Tooltip on each row:
	- currently only the granule thumbnail, in full size.

	A click on a granule triggers `EpnTapModule.onGranuleSelected()`.

	*/
	createGranulesGrid: function() {

		return {
			xtype: 'grid',

			cls: 'epntap_grid',

			id: 'epnTapGranulesGrid',
			title: 'Granules',
			store: Ext.data.StoreManager.lookup('granulesStore'),
			flex: 4,

			plugins: {
				ptype: 'bufferedrenderer',
				trailingBufferZone: 20,
				leadingBufferZone: 50
			},

			columns: []

		};

	}
});