Blame view

js/app/views/EpnTapUI.js 25.3 KB
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
1
2
3
4
5
/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
6
7
8
9
 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

b185823c   Nathanael Jourdane   Use IntervalUI mo...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
`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.
*/
b083bc63   Nathanael Jourdane   Update productTyp...
29
Ext.create('Ext.data.ArrayStore', {
7055f5d6   Nathanael Jourdane   Code refactoring
30
	storeId:'productTypesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
31
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
32
33
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
34
35
36
37
38
39
40
41
42
43
44
/**
`targetClassesStore`: An ExtJS Store containing the list of the different target classes 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 type.

This list is used to fill the `targetClassCB` combo box, which is updated by `EpnTapModule` each time a new product type
is selected.

- `id`: the target class in lowercase, with the underscore between each word;
- `name`: the target class, capitalized with spaces between each word (done `EpnTapModule.prettify()`).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
45
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
46
	storeId:'targetClassesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
47
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
48
49
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
50
51
52
53
54
55
56
57
58
59
60
/**
`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()`).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
61
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
62
	storeId: 'targetNamesStore',
bfcf6dc8   Nathanael Jourdane   Fill the combo-bo...
63
	fields: ['id', 'name']
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
64
65
});

12c10cdb   Nathanael Jourdane   Get the list of s...
66
67
68
69
70
71
72
/**
`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.
8d5634e3   Nathanael Jourdane   Use epn-tap store...
73

12c10cdb   Nathanael Jourdane   Get the list of s...
74
75
76
77
78
79
80
81
82
- `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.
*/
8d5634e3   Nathanael Jourdane   Use epn-tap store...
83
Ext.create('Ext.data.Store', {
12c10cdb   Nathanael Jourdane   Get the list of s...
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
	storeId: 'servicesStore',
	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'}
	],
	listeners: {
		beforeload: function(store) {
3a42858d   Nathanael Jourdane   Update the number...
102
			AmdaAction.epnTapGetServices( function(services) { store.add(services); });
8d5634e3   Nathanael Jourdane   Use epn-tap store...
103
104
105
106
		}
	}
});

12c10cdb   Nathanael Jourdane   Get the list of s...
107
108
109
/**
`metadataStore`: [...]
*/
8d5634e3   Nathanael Jourdane   Use epn-tap store...
110
111
112
113
114
115
Ext.create('Ext.data.ArrayStore', {
	storeId: 'metadataStore',
	fields: [
		{name: 'dataproduct_type', type: 'string', mapping: 0},
		{name: 'target_class', type: 'string', mapping: 1},
		{name: 'target_name', type: 'string', mapping: 2},
12c10cdb   Nathanael Jourdane   Get the list of s...
116
		{name: 'service_id', type: 'string', mapping: 3},
8d5634e3   Nathanael Jourdane   Use epn-tap store...
117
118
119
120
121
122
		{name: 'nb_results', type: 'integer', mapping: 4},
		{name: 'time_min', type: 'date', dateFormat: 'd/m/Y', mapping: 5},
		{name: 'time_max', type: 'date', dateFormat: 'd/m/Y', mapping: 6}
	],
	proxy: {
		type: 'ajax',
784cf22c   Nathanael Jourdane   Fix crash when ep...
123
124
		// url : '../../../generic_data/EpnTapData/metadata.json'
		url : 'generic_data/EpnTapData/metadata.json'
b083bc63   Nathanael Jourdane   Update productTyp...
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
	},
	listeners: {
		load: function(store) {
			// A dictionnary used to associate the productType id (i.e "im") to its value (i.e "Image").
			productTypeDict = {
				'im': 'Image',
				'ma': 'Map',
				'sp': 'Spectrum',
				'ds': 'Dynamic spectrum',
				'sc': 'Spectral cube',
				'pr': 'Profile',
				'vo': 'Volume',
				'mo': 'Movie',
				'cu': 'Cube',
				'ts': 'Time series',
				'ca': 'Catalogue',
				'ci': 'Catalogue item'
			};

			// Update productTypeCB
			var productTypeCBStore = Ext.data.StoreManager.lookup('productTypesStore');
			var dataproductTypes = store.collect('dataproduct_type');
			productTypeCBStore.add({'id': 'all', 'name': 'All dataproduct types'});
			for (var i = 0; i < dataproductTypes.length; i++) {
				if (dataproductTypes[i] in productTypeDict) {
					productTypeCBStore.add({'id': dataproductTypes[i], 'name': productTypeDict[dataproductTypes[i]]});
				} else {
0f872815   Nathanael Jourdane   Do not display wa...
152
153
154
155
156
157
158
					var vals = new Array();
					for (var key in productTypeDict) {
						vals.push(productTypeDict[key]);
					}
					if(vals.indexOf(dataproductTypes[i]) <= -1) {
						console.log('Unknown data product type "' + dataproductTypes[i] + '".');
					}
b083bc63   Nathanael Jourdane   Update productTyp...
159
					productTypeCBStore.add({'id': dataproductTypes[i], 'name': dataproductTypes[i]});
b083bc63   Nathanael Jourdane   Update productTyp...
160
161
162
163
				}
			}
			Ext.getCmp('epnTapProductTypeCB').select('all');
		}
8d5634e3   Nathanael Jourdane   Use epn-tap store...
164
165
166
	}
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
167
/**
b185823c   Nathanael Jourdane   Use IntervalUI mo...
168
`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
169
with the granules filter (the selected data product type, target class and target name).
b185823c   Nathanael Jourdane   Use IntervalUI mo...
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185

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).
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
186
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
187
	storeId:'granulesStore',
a048eff4   Nathanael Jourdane   Add EPN-TAP to Am...
188
	fields:['num', 'dataproduct_type', 'target_name', 'time_min', 'time_max', 'access_format', 'granule_uid', 'access_estsize', 'access_url', 'thumbnail_url'],
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
189
190
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
191
192
193
194
195
196
/**
`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`.
*/
78c2f505   Nathanael Jourdane   Improve granules ...
197
Ext.define('amdaUI.EpnTapUI', {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
198
	extend: 'Ext.panel.Panel',
78c2f505   Nathanael Jourdane   Improve granules ...
199
	alias: 'widget.panelEpnTap',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
200
	requires: ['amdaUI.IntervalUI'],
78c2f505   Nathanael Jourdane   Improve granules ...
201

98760ae1   Nathanael Jourdane   BugFix window siz...
202
203
	// width: 800,
	// height: 600,
a048eff4   Nathanael Jourdane   Add EPN-TAP to Am...
204

b185823c   Nathanael Jourdane   Use IntervalUI mo...
205
206
207
	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
208
	constructor: function(config) {
78c2f505   Nathanael Jourdane   Improve granules ...
209
210
211
212
		this.init(config);
		this.callParent(arguments);
	},

b185823c   Nathanael Jourdane   Use IntervalUI mo...
213
214
215
216
217
218
219
220
	/**
	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).
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
221
	init: function(config) {
a048eff4   Nathanael Jourdane   Add EPN-TAP to Am...
222
		var mod = Ext.create('amdaDesktop.EpnTapModule');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
223
224
225
226
227
228
229
230
231
232
233
234
235

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

		/**
		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.

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
236
237
238
239
		Other informations are available through an ExtJS Tooltip, on each row:
		- short name;
		- title;
		- access URL.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
240
241
242
243
244

		A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the
		service granules.
		*/
		var createServicesGrid = function() {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
245
			var epnTapServicesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
246
247
248
249
				id: 'epnTapServicesGrid',
				title: 'Services',
				store: Ext.data.StoreManager.lookup('servicesStore'),
				flex: 1,
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
250
				height: 405,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
251
				columns: [
3a42858d   Nathanael Jourdane   Update the number...
252
253
					{text: 'Name', dataIndex: 'short_name', flex: 1},
					{text: '~Nb results', dataIndex: 'nb_results', flex: 1}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
254
				],
8d5634e3   Nathanael Jourdane   Use epn-tap store...
255
				renderer: function(value, metadata, record) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
256
257
258
259
260
					return getExpandableImage(value, metadata,record);
				},
				listeners: {
					'cellclick': function(grid, td, cellIndex, record) { mod.onServiceSelected(record.data['id']); }
				},
8d5634e3   Nathanael Jourdane   Use epn-tap store...
261
262
263
264
265
266
267
268
				viewConfig: {
					forceFit: true,
					getRowClass: function(record, index) {
						if (record.get('nb_results') === 0) {
							return 'disabled_row';
						}
					}
				},
b185823c   Nathanael Jourdane   Use IntervalUI mo...
269
270
				renderTo: Ext.getBody()
			});
78c2f505   Nathanael Jourdane   Improve granules ...
271

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
272
273
274
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapServicesGrid.getView().el,
				delegate: epnTapServicesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
275
276
277
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
12c10cdb   Nathanael Jourdane   Get the list of s...
278
279
280
281
282
283
284
285
286
287
						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'};
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
288
						var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
12c10cdb   Nathanael Jourdane   Get the list of s...
289
290
						var ttContent = '<h3>' + service.get('short_name') + '</h3><ul>';
						for (var column in column_titles) {
3a42858d   Nathanael Jourdane   Update the number...
291
292
293
294
295
							var col_content = service.get(column);
							if(column === 'content_level' && col_content!=='') {
								col_content = col_content.replace(/#/g, ", ");
							}
							ttContent += '<li><b>' + column_titles[column] + '</b>: ' + col_content + '</li>';
12c10cdb   Nathanael Jourdane   Get the list of s...
296
297
						}
						tooltip.update(ttContent + '</ul>');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
298
					}
784cf22c   Nathanael Jourdane   Fix crash when ep...
299
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
300
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
301
302

			return epnTapServicesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
303
304
305
306
		};

		/**
		Create `epnTapGranulesGrid`, an ExtJS grid containing the granules of the selected service in
12c10cdb   Nathanael Jourdane   Get the list of s...
307
		`epnTapServicesGrid`.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
308
309

		For each granule, this grid displays:
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
310
311
312
313
314
315
316
317
318
		- 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.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
319

b185823c   Nathanael Jourdane   Use IntervalUI mo...
320
		Each of these information are displayed in a specific rendering to improve user experience.
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
321
322
323
324
		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.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
325
326
327
328
329

		A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
		*/
		var createGranulesGrid = function() {
			var txtRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
330
331
332
				return '<p style="white-space: normal;">' + val + '</p>';
			};
			var linkRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
333
334
335
				return '<a href="' + val + '">data</a>';
			};
			var imgRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
336
337
338
				return '<img width="40px height="40px" src="' + val + '">';
			};
			var dptRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
339
340
341
				return (val in mod.productTypeDict) ? '<p style="white-space: normal;">' + mod.productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
			};
			var formatRender = function(val) {
b083bc63   Nathanael Jourdane   Update productTyp...
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
				// A dictionnary used to associate the mimetype (i.e "application/fits") to a pretty printed word (i.e "fits").
				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 (val in mod.mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
b185823c   Nathanael Jourdane   Use IntervalUI mo...
392
393
			};
			var sizeRender = function(val) {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
394
395
396
397
398
399
400
401
402
				var size = parseInt(val);
				if (isNaN(size)) {
					return '';
				} else if (size >= 1024*1024) {
					return (size/(1024*1024)).toPrecision(3) + 'Go';
				} else if (size >= 1024) {
					return (size/1024).toPrecision(3) + 'Mo';
				} else {
					return size + 'Ko';
7055f5d6   Nathanael Jourdane   Code refactoring
403
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
404
405
			};

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
406
			var epnTapGranulesGrid = new Ext.grid.Panel({
b185823c   Nathanael Jourdane   Use IntervalUI mo...
407
408
409
				id: 'epnTapGranulesGrid',
				title: 'Granules',
				store: Ext.data.StoreManager.lookup('granulesStore'),
3a42858d   Nathanael Jourdane   Update the number...
410
				flex: 4,
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
411
				height: 405,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
412
413
				columns: [
					{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender },
494949bb   Nathanael Jourdane   Remove dataproduc...
414
					// { text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
415
416
417
					{ text: 'Target', dataIndex: 'target_name', flex: 2, renderer: txtRender },
					{ text: 'Time min', dataIndex: 'time_min', flex: 2, renderer: txtRender },
					{ text: 'Time max', dataIndex: 'time_max', flex: 2, renderer: txtRender },
494949bb   Nathanael Jourdane   Remove dataproduc...
418
					// { text: 'Format', dataIndex: 'access_format', flex: 2, renderer: formatRender },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
419
420
421
422
423
424
					{ text: 'uid', dataIndex: 'granule_uid', flex: 2, renderer: txtRender },
					{ text: 'Size', dataIndex: 'access_estsize', flex: 1, renderer: sizeRender },
					{ text: 'URL', dataIndex: 'access_url', flex: 1, renderer: linkRender },
					{ text: 'Thumb.', dataIndex: 'thumbnail_url', flex: 1, renderer: imgRender}
				],
				listeners: {
1227cc87   Nathanael Jourdane   Fix the scrollbar...
425
					'cellclick': function(grid, td, cellIndex, record) { mod.onGranuleSelected(record.data['id']); }
b185823c   Nathanael Jourdane   Use IntervalUI mo...
426
427
428
				},
				renderTo: Ext.getBody()
			});
b185823c   Nathanael Jourdane   Use IntervalUI mo...
429

e3f1df86   Nathanael Jourdane   Fix tooltip bug.
430
431
432
			Ext.create('Ext.tip.ToolTip', {
				target: epnTapGranulesGrid.getView().el,
				delegate: epnTapGranulesGrid.getView().itemSelector,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
433
434
435
				trackMouse: true,
				listeners: {
					beforeshow: function updateTipBody(tooltip) {
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
436
						var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
b185823c   Nathanael Jourdane   Use IntervalUI mo...
437
438
						tooltip.update('<img src="' + thumb + '">');
					}
784cf22c   Nathanael Jourdane   Fix crash when ep...
439
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
440
			});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
441
442

			return epnTapGranulesGrid;
b185823c   Nathanael Jourdane   Use IntervalUI mo...
443
444
445
446
447
448
449
450
451
452
453
454
		};

		/**
		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.
		*/
		var createGridsPanel = function() {
			var self = this;
			return new Ext.panel.Panel({
				id: 'epnTapGridsPanel',
9f9ca1da   Nathanael Jourdane   Fix scrollbar (WIP)
455
				region: 'center',
1227cc87   Nathanael Jourdane   Fix the scrollbar...
456
457
				layout: { type: 'hbox' },
				height: 530,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
458
459
460
461
462
				items: [
					createServicesGrid(),
					createGranulesGrid()
				],
				listeners: {
9f9ca1da   Nathanael Jourdane   Fix scrollbar (WIP)
463
					afterrender: function() { mod.initWindow(); }
784cf22c   Nathanael Jourdane   Fix crash when ep...
464
465
				},
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
			});
		};

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

		/**
		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
		`epnTapTargetClassCB` and `epnTapGranulesGrid`.
		*/
		var createProductTypeCB = function() {
			return new Ext.form.field.ComboBox({
				id: 'epnTapProductTypeCB',
				fieldLabel: 'Product type',
				store: Ext.data.StoreManager.lookup('productTypesStore'),
				queryMode: 'local',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
486
				valueField: 'id',
b083bc63   Nathanael Jourdane   Update productTyp...
487
				displayField: 'name',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
488
489
490
491
				name: 'productType',
				editable: false,
				listeners: {
					'select': function(combo) { mod.onProductTypeCBChanged(combo.value); }
7055f5d6   Nathanael Jourdane   Code refactoring
492
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
			});
		};

		/**
		Create `epnTapTargetClassCB`, an ExtJS ComboBox, containing a list of target classes corresponding to the
		selected product type, as defined in `targetClassesStore`, which is initilized by `EpnTapModule`.

		The selection of a target class triggers the `EpnTapModule.onTargetClassCBChanged()`, which basically updates
		`targetNameCB` and `granulesGrid`.
		*/
		var createTargetClassCB = function() {
			return new Ext.form.field.ComboBox({
				id: 'epnTapTargetClassCB',
				fieldLabel: 'Target class',
				store: Ext.data.StoreManager.lookup('targetClassesStore'),
				queryMode: 'local',
				displayField: 'name',
				valueField: 'id',
				name: 'targetClass',
				editable: false,
				listeners: {
					'select': function(combo) { mod.onTargetClassCBChanged(combo.value); }
7055f5d6   Nathanael Jourdane   Code refactoring
515
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
			});
		};

		/**
		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`.
		*/
		var createTargetNameCB = function() {
			return new Ext.form.field.ComboBox({
				id: 'epnTapTargetNameCB',
				fieldLabel: 'Target name',
				store: Ext.data.StoreManager.lookup('targetNamesStore'),
				queryMode: 'local',
				displayField: 'name',
				valueField: 'id',
				name: 'targetName',
				triggerAction: 'all',
				typeAhead: true,
				mode: 'remote',
				minChars: 2,
				forceSelection: true,
				listeners: {
					'select': function(combo) { mod.onTargetNameCBChanged(combo.value); }
7055f5d6   Nathanael Jourdane   Code refactoring
542
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
			});
		};

		/**
		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.
		*/
		var createServiceFilterPanel = function() {
			return new Ext.panel.Panel({
				id: 'epnTapServiceFilterPanel',
				region : 'north',
				layout: { type: 'hbox', pack: 'start', align: 'stretch' },
				defaults: { margin: 5 },
				items: [{ // Left part
					xtype : 'container',
					layout: 'form',
9b951b58   Nathanael Jourdane   Move EPN-TAP modu...
561
					flex: 3,
b185823c   Nathanael Jourdane   Use IntervalUI mo...
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
					items: [
						createProductTypeCB(),
						createTargetClassCB(),
						createTargetNameCB(),
						{
							xtype: 'panel',
							layout: { type: 'hbox', pack: 'start', align: 'stretch' },
							border: false,
							items: [
								createRowPerPageNf(),
								createNavigationPanel()
							]
						}
					]
				}, { // Right part
					xtype : 'form',
					id: 'epnTapIntervalSelector',
					layout: 'form',
					border: 'false',
					flex: 2,
					items: [
						createTimeSelector()
					]
784cf22c   Nathanael Jourdane   Fix crash when ep...
585
586
				}],
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
587
588
589
590
591
592
593
594
595
596
597
			});
		};

		/**
		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.
		*/
		var createTimeSelector = function() {
			return Ext.create('amdaUI.IntervalUI', {
5e85f9e6   Nathanael Jourdane   Add 'durationLimi...
598
599
				id: 'epnTapTimeSelector',
				durationLimit: 99999
b185823c   Nathanael Jourdane   Use IntervalUI mo...
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
			});
		};

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

		/**
		Create `epnTapRowsPerPageNf`, a ExtJS Number field, allowing the user to select the number of rows to display in
		`epnTapGranulesGrid`.

		When a new number is entered, it triggers `EpnTapModule.onRowsPerPageChanged()`.
		*/
		var createRowPerPageNf = function() {
			return new Ext.form.field.Number({
				id: 'epnTapRowsPerPageNf',
				fieldLabel: 'Rows per page',
				margin: '4 0 4 0',
				width: 160,
				height: 20,
				value: 20,
				minValue: 1,
				maxValue: 2000,
				listeners: {
					'change': function(rowPerPageNf, newValue) { mod.onRowsPerPageChanged(newValue); }
7055f5d6   Nathanael Jourdane   Code refactoring
625
				}
b185823c   Nathanael Jourdane   Use IntervalUI mo...
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
			});
		};

		/**
		Create `epnTapNavigationPanel`, an ExtJSPanel containing several elements in order to navigate through the
		different pages of the query result. If the number of results is highter than the `epnTapRowsPerPageNf` field
		value, the result appears to be displayed in different pages. This panel is used to select and display the page
		number, mainly with these following elements:
		- `epnTapFirstPageBtn`: an ExtJS Button, used to come back to the first page of result,
				handling `EpnTapModule.onFirstPageBtnClicked()`;
		- `epnTapPreviousPageBtn`: an ExtJS Button, used to come back to the previous page of result,
				handling `EpnTapModule.onPreviousPageBtnClicked()`;
		- `epnTapCurrentPageLb`: an ExtJS Label, displaying the actual current page; TODO: use a Number field instead!
		- `epnTapTotalPagesLb`: an ExtJS Label, displaying the total page number of results (according to the
		`epnTapRowsPerPageNf` field value);
		- `epnTapNextPageBtn`: an ExtJS Button, used to go to the next page of result,
				handling `EpnTapModule.onNextPageBtnClicked()`;
		- `epnTapLastPageBtn`: an ExtJS Button, used to come back to the last page of result,
				handling `EpnTapModule.onLastPageBtnClicked()`.

		Note: Pages are not actually a "graphical filter": when the user navigate through the pages, a new query is send
		to the server with the corresponding range, which improves the response time on large requests.
		*/
		var createNavigationPanel = function() {
			return new Ext.panel.Panel({
				name: 'epnTapNavigationPanel',
				border: false,
				margin: '2 0 2 50',
				defaults: { margin: '0 5 0 5', width: 20, xtype: 'button', disabled: true},
				items: [{
					xtype: 'label',
					text: 'Page:'
				}, {
					id: 'epnTapFirstPageBtn',
					text: '|<',
					tooltip: 'First page',
					handler: function() { mod.onFirstPageBtnClicked(); }
				}, {
					id: 'epnTapPreviousPageBtn',
					text: '<',
					tooltip: 'Previous page',
					handler: function() { mod.onPreviousPageBtnClicked(); }
				}, {
					xtype: 'label',
					id: 'epnTapCurrentPageLb',
					tooltip: 'Current page',
					text: '-'
				}, {
					xtype: 'label',
					text: '/'
				}, {
					xtype: 'label',
					id: 'epnTapTotalPagesLb',
					tooltip: 'Total pages',
					text: '-'
				}, {
					id: 'epnTapNextPageBtn',
					text: '>',
					tooltip: 'Next page',
					handler: function() { mod.onNextPageBtnClicked(); }
				}, {
					id: 'epnTapLastPageBtn',
					text: '>|',
					tooltip: 'Last page',
					handler: function() { mod.onLastPageBtnClicked(); }
				}]
			});
		};

		/*******************
		*** Other panels ***
		*******************/

		/**
		Create `epnTapInfoPanel`, an ExtJS Panel used to display a brief user guide about how to use this module.
		*/
		var createInfoPanel = function() {
			return new Ext.panel.Panel({
				id: 'epnTapInfoPanel',
				region: 'south',
				title: 'Information',
				collapsible: true,
				flex: 0,
				height: 100,
				autoHide: false,
				bodyStyle: 'padding: 5px',
				iconCls: 'icon-information',
784cf22c   Nathanael Jourdane   Fix crash when ep...
713
714
				loader: { autoLoad: true, url: helpDir + 'epnTapHOWTO' },
				renderTo: Ext.getBody()
b185823c   Nathanael Jourdane   Use IntervalUI mo...
715
716
717
718
719
720
721
722
723
724
725
726
			});
		};

		// TODO tester ceci:
		// config.title = 'EPN-TAP';
		// config.layout = 'border';
		// config.items = [
		// 	createServiceFilterPanel(config.targetName),
		// 	createGridsPanel(),
		// 	createInfoPanel()
		// ];
		// Ext.apply(this, Ext.apply(arguments, config));
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
727

3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
728
		var myConf = {
98760ae1   Nathanael Jourdane   BugFix window siz...
729
			id: 'epnTapWindow',
9f9ca1da   Nathanael Jourdane   Fix scrollbar (WIP)
730
			layout: { type: 'vbox', align: 'stretch' },
b185823c   Nathanael Jourdane   Use IntervalUI mo...
731
732
			items: [
				createServiceFilterPanel(),
98760ae1   Nathanael Jourdane   BugFix window siz...
733
734
				createGridsPanel(),
				createInfoPanel()
4342b8c7   Nathanael Jourdane   Fix crash when lo...
735
736
			],
			listeners: {
84532d55   Nathanael Jourdane   Fix crash when lo...
737
738
739
740
741
				'beforerender': function(me) {
					if(Ext.getCmp('epntap-win') != null) {
						Ext.getCmp('epntap-win').setPosition(100, 100);
					}
				}
4342b8c7   Nathanael Jourdane   Fix crash when lo...
742
743
			}

3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
744
		};
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
745
		Ext.apply(this, Ext.apply(arguments, myConf));
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
746
747
	}
});