Blame view

js/app/views/EpnTapUI.js 20.7 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
/**
`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.
ebdc15a7   Nathanael Jourdane   remove targetclas...
28
TODO: try "var arrayStore = Ext.create(...);"
b185823c   Nathanael Jourdane   Use IntervalUI mo...
29
*/
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
30
Ext.create('Ext.data.Store', {
ebdc15a7   Nathanael Jourdane   remove targetclas...
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
	storeId:'productTypesStore',
	fields: ['id', 'name'],
	data: [
		{'id': 'im', 'name': 'Image'},
		{'id': 'ma', 'name': 'Map'},
		{'id': 'sp', 'name': 'Spectrum'},
		{'id': 'ds', 'name': 'Dynamic spectrum'},
		{'id': 'sc', 'name': 'Spectral cube'},
		{'id': 'pr', 'name': 'Profile'},
		{'id': 'vo', 'name': 'Volume'},
		{'id': 'mo', 'name': 'Movie'},
		{'id': 'cu', 'name': 'Cube'},
		{'id': 'ts', 'name': 'Time series'},
		{'id': 'ca', 'name': 'Catalogue'},
		{'id': 'ci', 'name': 'Catalogue item'}
	]
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
47
48
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
49
50
51
52
53
54
55
56
57
58
59
/**
`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()`).
*/
68664dca   Nathanael Jourdane   make epntap php f...
60
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
61
	storeId: 'targetNamesStore',
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
62
63
64
	fields: ['id', 'name', 'type', 'parent', 'aliases'],
	proxy: {
		type: 'ajax',
68664dca   Nathanael Jourdane   make epntap php f...
65
66
		url: 'php/epntap.php',
		extraParams : { action: 'resolver' }
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
67
	}
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
68
69
});

12c10cdb   Nathanael Jourdane   Get the list of s...
70
71
72
73
74
75
76
/**
`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...
77

12c10cdb   Nathanael Jourdane   Get the list of s...
78
79
80
81
82
83
84
85
86
- `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...
87
Ext.create('Ext.data.Store', {
12c10cdb   Nathanael Jourdane   Get the list of s...
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
	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'}
8d5634e3   Nathanael Jourdane   Use epn-tap store...
103
104
105
	],
	proxy: {
		type: 'ajax',
49401187   Nathanael Jourdane   epntap: Do not us...
106
107
		url: 'php/epntap.php',
		extraParams : { action: 'get_services' }
8d5634e3   Nathanael Jourdane   Use epn-tap store...
108
109
110
	}
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
111
/**
b185823c   Nathanael Jourdane   Use IntervalUI mo...
112
`granulesStore`: An ExtJS Store containing the list of granules of the selected service (on `servicesGrid`), which match
ba6dfa5e   Nathanael Jourdane   (regression bug) ...
113
with the granules filter (the selected data product type, target class and target name).
b185823c   Nathanael Jourdane   Use IntervalUI mo...
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

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...
130
Ext.create('Ext.data.Store', {
7055f5d6   Nathanael Jourdane   Code refactoring
131
	storeId:'granulesStore',
44c334be   Nathanael Jourdane   When lauched from...
132
	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...
133
134
});

b185823c   Nathanael Jourdane   Use IntervalUI mo...
135
136
137
138
139
140
/**
`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 ...
141
Ext.define('amdaUI.EpnTapUI', {
b185823c   Nathanael Jourdane   Use IntervalUI mo...
142
	extend: 'Ext.panel.Panel',
78c2f505   Nathanael Jourdane   Improve granules ...
143
	alias: 'widget.panelEpnTap',
b185823c   Nathanael Jourdane   Use IntervalUI mo...
144
	requires: ['amdaUI.IntervalUI'],
78c2f505   Nathanael Jourdane   Improve granules ...
145

b185823c   Nathanael Jourdane   Use IntervalUI mo...
146
147
148
	/**
	Method constructor, which basically call the `init()` method to create the EpnTap panel.
	*/
78c2f505   Nathanael Jourdane   Improve granules ...
149
	constructor: function(config) {
78c2f505   Nathanael Jourdane   Improve granules ...
150
151
152
153
		this.init(config);
		this.callParent(arguments);
	},

10162678   Nathanael Jourdane   Fix the infoPanel...
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
	/**
	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(),
cc6e16eb   Nathanael Jourdane   Remove info panel
172
					this.createGridsPanel()
10162678   Nathanael Jourdane   Fix the infoPanel...
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
				]
			}]
		};
		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: 'panel',
			id: 'epnTapServiceFilterPanel',
			layout: { type: 'hbox', pack: 'start', align: 'stretch' },
			region: 'north',
			defaults: { margin: 5 },
			items: [{ // Left part
				xtype : 'container',
				flex: 3,
				items: [
10162678   Nathanael Jourdane   Fix the infoPanel...
200
					this.createTargetNameCB(),
ebdc15a7   Nathanael Jourdane   remove targetclas...
201
					this.createProductTypeCB(),
10162678   Nathanael Jourdane   Fix the infoPanel...
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
					{
						xtype: 'panel',
						layout: { type: 'hbox', pack: 'start', align: 'stretch' },
						border: false,
						items: [
							this.createRowPerPageNf(),
							this.createNavigationPanel()
						]
					}
				]
			}, { // Right part
				xtype : 'form',
				id: 'epnTapIntervalSelector',
				layout: 'form',
				border: 'false',
				flex: 2,
				items: [
					this.createTimeSelector()
				]
			}]
		};
	},

	/**
	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
ebdc15a7   Nathanael Jourdane   remove targetclas...
230
	`epnTapGranulesGrid`.
10162678   Nathanael Jourdane   Fix the infoPanel...
231
232
233
234
235
236
237
238
239
	*/
	createProductTypeCB: function() {
		return {
			xtype: 'combobox',
			id: 'epnTapProductTypeCB',
			fieldLabel: 'Product type',
			store: Ext.data.StoreManager.lookup('productTypesStore'),
			queryMode: 'local',
			valueField: 'id',
10162678   Nathanael Jourdane   Fix the infoPanel...
240
			displayField: 'name',
10162678   Nathanael Jourdane   Fix the infoPanel...
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
			maxWidth: 100,
			editable: false
		};
	},

	/**
	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',
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
258
			emptyText: 'Earth, Saturn, 67P, ...',
10162678   Nathanael Jourdane   Fix the infoPanel...
259
			store: Ext.data.StoreManager.lookup('targetNamesStore'),
ebdc15a7   Nathanael Jourdane   remove targetclas...
260
			queryMode: 'remote',
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
261
			queryParam: 'input',
10162678   Nathanael Jourdane   Fix the infoPanel...
262
263
			displayField: 'name',
			valueField: 'id',
10162678   Nathanael Jourdane   Fix the infoPanel...
264
			maxWidth: 100,
10162678   Nathanael Jourdane   Fix the infoPanel...
265
			minChars: 2,
ebdc15a7   Nathanael Jourdane   remove targetclas...
266
			hideTrigger: true,
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
267
268
			listConfig: {
				getInnerTpl: function() {
68664dca   Nathanael Jourdane   make epntap php f...
269
					return '<div data-qtip="<h3>{name}</h3><p>type: {type}</p><p>parent: {parent}</p><p>aliases:</p><ul>{aliases}</ul>">{name}</div>';
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
270
271
				}
			},
ebdc15a7   Nathanael Jourdane   remove targetclas...
272
			listeners: {
8a0f1e9e   Nathanael Jourdane   Add autocompletio...
273
274
275
276
277
				render: function(c) {
					new Ext.ToolTip({
						target: c.getEl(),
						html: 'Type a text then select the correct target.'
					});
ebdc15a7   Nathanael Jourdane   remove targetclas...
278
279
				}
			}
10162678   Nathanael Jourdane   Fix the infoPanel...
280
281
		};
	},
ebdc15a7   Nathanael Jourdane   remove targetclas...
282

10162678   Nathanael Jourdane   Fix the infoPanel...
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
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
	/**
	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',
			durationLimit: 99999
		};
	},

	/***********************
	*** 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()`.
	*/
	createRowPerPageNf: function() {
		return {
			xtype: 'numberfield',
			id: 'epnTapRowsPerPageNf',
			fieldLabel: 'Rows per page',
			margin: '4 0 4 0',
			width: 160,
			height: 20,
			value: 20,
			minValue: 1,
			maxValue: 2000
		};
	},

	/**
	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.
	*/
	createNavigationPanel: function() {
		return {
			xtype: 'panel',
			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'
			}, {
				id: 'epnTapPreviousPageBtn',
				text: '<',
				tooltip: 'Previous page'
			}, {
				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'
			}, {
				id: 'epnTapLastPageBtn',
				text: '>|',
				tooltip: 'Last page'
			}]
		};
	},

9655907c   Nathanael Jourdane   use a more extjs-...
383
384
385
386
	/************
	*** Grids ***
	************/

b185823c   Nathanael Jourdane   Use IntervalUI mo...
387
	/**
10162678   Nathanael Jourdane   Fix the infoPanel...
388
389
390
391
392
393
394
395
396
397
	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',
cc6e16eb   Nathanael Jourdane   Remove info panel
398
			height: 400,
10162678   Nathanael Jourdane   Fix the infoPanel...
399
400
401
402
403
404
405
406
407
408
409
410
411
412
			region: 'center',
			items: [{
				xtype: 'container',
				layout: { type: 'hbox', pack: 'start', align: 'stretch'},
				items: [
					this.createServicesGrid(),
					this.createGranulesGrid()
				]
			}]
		};
	},


	/**
9655907c   Nathanael Jourdane   use a more extjs-...
413
414
	Create `epnTapServicesGrid`, an ExtJS grid containing the EPN-TAP services matching with the filter form
	(`serviceFilterPanel`).
b185823c   Nathanael Jourdane   Use IntervalUI mo...
415

9655907c   Nathanael Jourdane   use a more extjs-...
416
417
418
	For each service, this grid displays:
	- the service name;
	- the number of granules matching with the filter.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
419

9655907c   Nathanael Jourdane   use a more extjs-...
420
421
422
423
424
425
426
	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.
b185823c   Nathanael Jourdane   Use IntervalUI mo...
427
	*/
9655907c   Nathanael Jourdane   use a more extjs-...
428
	createServicesGrid: function() {
9b347550   Nathanael Jourdane   epntap serviceGri...
429
430
431
432
433
434
435
436
437
438
439
440
		var nbResRender = function(val) {
			if(val<0 || isNaN(val)) {
				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;
			}
		};

9655907c   Nathanael Jourdane   use a more extjs-...
441
442
443
444
445
		var epnTapServicesGrid = new Ext.grid.Panel({
			id: 'epnTapServicesGrid',
			title: 'Services',
			store: Ext.data.StoreManager.lookup('servicesStore'),
			flex: 1,
9655907c   Nathanael Jourdane   use a more extjs-...
446
			columns: [
49401187   Nathanael Jourdane   epntap: Do not us...
447
				{text: 'Name', dataIndex: 'short_name', flex: 3},
9b347550   Nathanael Jourdane   epntap serviceGri...
448
				{text: 'nb results', dataIndex: 'nb_results', flex: 2, renderer: nbResRender}
9655907c   Nathanael Jourdane   use a more extjs-...
449
			],
9655907c   Nathanael Jourdane   use a more extjs-...
450
			viewConfig: {
9655907c   Nathanael Jourdane   use a more extjs-...
451
				getRowClass: function(record, index) {
49401187   Nathanael Jourdane   epntap: Do not us...
452
453
					var nb_res = record.get('nb_results');
					if (nb_res <= 0 || isNaN(nb_res)) {
9655907c   Nathanael Jourdane   use a more extjs-...
454
						return 'disabled_row';
8d5634e3   Nathanael Jourdane   Use epn-tap store...
455
					}
9655907c   Nathanael Jourdane   use a more extjs-...
456
				}
b58c4275   Nathanael Jourdane   epntap: fix grids...
457
458
			},
			renderTo: Ext.getBody()
9655907c   Nathanael Jourdane   use a more extjs-...
459
460
461
462
463
464
465
466
		});

		Ext.create('Ext.tip.ToolTip', {
			target: epnTapServicesGrid.getView().el,
			delegate: epnTapServicesGrid.getView().itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
49401187   Nathanael Jourdane   epntap: Do not us...
467
468
469
470
471
472
473
474
475
476
477
					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'};
9655907c   Nathanael Jourdane   use a more extjs-...
478
479
480
481
482
483
					var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement);
					var ttContent = '<h3>' + service.get('short_name') + '</h3><ul>';
					for (var column in column_titles) {
						var col_content = service.get(column);
						if(column === 'content_level' && col_content!=='') {
							col_content = col_content.replace(/#/g, ", ");
12c10cdb   Nathanael Jourdane   Get the list of s...
484
						}
9655907c   Nathanael Jourdane   use a more extjs-...
485
						ttContent += '<li><b>' + column_titles[column] + '</b>: ' + col_content + '</li>';
b185823c   Nathanael Jourdane   Use IntervalUI mo...
486
					}
9655907c   Nathanael Jourdane   use a more extjs-...
487
					tooltip.update(ttContent + '</ul>');
784cf22c   Nathanael Jourdane   Fix crash when ep...
488
				}
9655907c   Nathanael Jourdane   use a more extjs-...
489
490
			}
		});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
491

9655907c   Nathanael Jourdane   use a more extjs-...
492
493
		return epnTapServicesGrid;
	},
b185823c   Nathanael Jourdane   Use IntervalUI mo...
494

9655907c   Nathanael Jourdane   use a more extjs-...
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
	/**
	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() {
		var txtRender = function(val) {
			return '<p style="white-space: normal;">' + val + '</p>';
		};
		var linkRender = function(val) {
			return '<a href="' + val + '">data</a>';
		};
		var imgRender = function(val) {
			return '<img width="40px height="40px" src="' + val + '">';
		};
		var dptRender = function(val) {
ebdc15a7   Nathanael Jourdane   remove targetclas...
529
530
531
			console.log(Ext.data.StoreManager.lookup('productTypesStore'));
			return val;
			// (val in productTypeDict) ? '<p style="white-space: normal;">' + productTypeDict[val] + '</p>' : '<em>' + val + '</em>';
9655907c   Nathanael Jourdane   use a more extjs-...
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
		};
		var formatRender = function(val) {
			// 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'
b185823c   Nathanael Jourdane   Use IntervalUI mo...
582
			};
9655907c   Nathanael Jourdane   use a more extjs-...
583
584
585
586
587
588
589
590
591
592
593
594
595
596
			return (val in mimetypeDict) ? mimetypeDict[val] : '<em style="white-space: normal;">' + val + '</em>';
		};
		var sizeRender = function(val) {
			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';
			}
		};
b185823c   Nathanael Jourdane   Use IntervalUI mo...
597

9655907c   Nathanael Jourdane   use a more extjs-...
598
599
600
601
602
		var epnTapGranulesGrid = new Ext.grid.Panel({
			id: 'epnTapGranulesGrid',
			title: 'Granules',
			store: Ext.data.StoreManager.lookup('granulesStore'),
			flex: 4,
9655907c   Nathanael Jourdane   use a more extjs-...
603
604
605
606
607
608
609
610
611
612
613
			columns: [
				{ text: 'Num',  dataIndex: 'num', flex: 1, renderer: txtRender },
				// { text: 'Type',  dataIndex: 'dataproduct_type', flex: 2, renderer: dptRender },
				{ 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 },
				// { text: 'Format', dataIndex: 'access_format', flex: 2, renderer: formatRender },
				{ 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}
b58c4275   Nathanael Jourdane   epntap: fix grids...
614
615
			],
			renderTo: Ext.getBody()
9655907c   Nathanael Jourdane   use a more extjs-...
616
617
618
619
620
621
622
623
624
625
		});

		Ext.create('Ext.tip.ToolTip', {
			target: epnTapGranulesGrid.getView().el,
			delegate: epnTapGranulesGrid.getView().itemSelector,
			trackMouse: true,
			listeners: {
				beforeshow: function updateTipBody(tooltip) {
					var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url');
					tooltip.update('<img src="' + thumb + '">');
784cf22c   Nathanael Jourdane   Fix crash when ep...
626
				}
9655907c   Nathanael Jourdane   use a more extjs-...
627
628
			}
		});
e3f1df86   Nathanael Jourdane   Fix tooltip bug.
629

9655907c   Nathanael Jourdane   use a more extjs-...
630
		return epnTapGranulesGrid;
3fc0b658   Nathanael Jourdane   Add EPN-TAP modul...
631
632
	}
});