/**
 * Project: AMDA-NG
 * Name: EpnTapUI.js
 * @class amdaUI.EpnTapUI
 * @extends Ext.tab.Panel
 * @author Nathanael JOURDANE
 * 24/10/2016: file creation
 */

'use strict'
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,
  tMin: null,
  tMax: null,
  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'},
    {name: 'time_min', type: 'string'},
    {name: 'time_max', 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) {
      const 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()
  },
  'sanitizeData': function (data) {
    // noinspection ES6ConvertVarToLetConst
    for (var dKey in data) {
      if (data.hasOwnProperty(dKey) && typeof data[dKey] === 'string' && data[dKey] !== '') {
        data[dKey] = data[dKey].replace(/'/g, ''').replace(/"/g, '"')
      }
    }
    return data
  },
  'url': function (data) {
    const urlPattern = 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 urlPattern.test(data) ? data : null
  },
  'cell': function (content, tooltip, tooltipTitle) {
    const ttTitle = tooltipTitle ? " data-qtitle='" + tooltipTitle + "'" : ''
    const ttAttr = tooltip === '' ? '' : "' data-qtip='" + (tooltip || content || 'No value.') + "'"
    return '<div class=epntap_cell ' + ttTitle + ttAttr + '>' + (content || '-') + '</div>'
  },

  // Services grid

  'serviceTooltip': function (data) {
    const sData = Ext.util.Format.sanitizeData(data)
    const infoColor = sData['nb_results'] === -2 ? 'IndianRed' : 'green'
    const info = sData.info.length > 0 ? '<p style="color:' + infoColor + '">' + sData.info + '</p>' : ''
    const timeInfo = sData['time_min'] !== '-' || sData['time_min'] !== '-' ? '<p>Time period: from ' + sData['time_min'] + ' to ' + sData['time_min'] + '</p>' : ''

    const colums = ['short_name', 'res_title', 'ivoid', 'access_url', 'table_name', 'content_type', 'creator_seq', 'content_level', 'reference_url', 'created', 'updated']
    // noinspection ES6ConvertVarToLetConst
    var details = ''
    // noinspection ES6ConvertVarToLetConst
    for (var cKey in colums) {
      if (colums.hasOwnProperty(cKey) && sData[colums[cKey]] !== '') {
        const val = colums[cKey] === 'content_level' ? sData[colums[cKey]].replace(/#/g, ', ') : sData[colums[cKey]]
        details += '<li><b>' + Ext.util.Format.prettify(colums[cKey]) + '</b>: ' + val + '</li>'
      }
    }
    return info + timeInfo + '<ul>' + details + '</ul>'
  },
  'service.text': function (data, metadata, record) {
    const serviceName = Ext.util.Format.prettify(data.replace('.epn_core' , ''))
    return Ext.util.Format.cell(serviceName, Ext.util.Format.serviceTooltip(record.data), data)
  },
  'service.number': function (data, metadata, record) {
    const block = Math.pow(10, 3)
    const value = data < 0 ? '-'
      : data >= block * block ? (data / (block * block)).toPrecision(3) + 'm'
      : data >= block ? (data / block).toPrecision(3) + 'k'
      : '' + data
    return Ext.util.Format.cell(value, Ext.util.Format.serviceTooltip(record.data), record.data['short_name'])
  },

  // Granules grid

  'granule.text': function (data) {
    return Ext.util.Format.cell(data)
  },
  'granule.link': function (data) {
    const iconImage = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iNzY4' +
      'IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NDAgNzY4SDEyOFYyNTcuOTA1OTk5OTk5OTk5OTVMMjU2ID' +
      'I1NlYxMjhIMHY3NjhoNzY4VjU3Nkg2NDBWNzY4ek0zODQgMTI4bDEyOCAxMjhMMzIwIDQ0OGwxMjggMTI4IDE5Mi0xOTIgMTI4IDEyOFYxMjhI' +
      'Mzg0eiIvPjwvc3ZnPg=='
    const icon = '<img style="width:15px;" alt="link" src="' + iconImage + '">'
    const url = Ext.util.Format.url(data)
    const txt = url ? '<a style="font-size:150%" target="_blank" href="' + url + '">' + icon + '</a>' : false
    return Ext.util.Format.cell(txt, url)
  },
  'granule.img': function (data) {
    const imgUrl = Ext.util.Format.url(data)
    const icon = imgUrl ? '<img style="max-width:100%; max-height:100%" alt="-" src="' + imgUrl + '">' : false
    const img = imgUrl ? '<img style="max-width:200px; max-height:200px" src="' + imgUrl + '">' : false
    return Ext.util.Format.cell(icon, img)
  },
  'granule.type': function (data) {
    const productTypeDict = Ext.data.StoreManager.lookup('productTypesStore').data.map
    return Ext.util.Format.cell(productTypeDict[data].data.name)
  },
  'granule.size': function (data) {
    const size = parseInt(data)
    const block = Math.pow(2, 10)
    const txt = isNaN(size) ? false
      : size >= block * block ? (size / (block * block)).toPrecision(3) + 'Go'
        : size >= block ? (size / block).toPrecision(3) + 'Mo'
          : size + 'Ko'
    return Ext.util.Format.cell(txt)
  },
  'granule.proc_lvl': function (data) {
    const 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) {
    // See https://en.wikipedia.org/wiki/Julian_day#Julian_or_Gregorian_calendar_from_Julian_day_number
    // noinspection MagicNumberJS
    const jd = {y: 4716, j: 1401, m: 2, n: 12, r: 4, p: 1461, v: 3, u: 5, s: 153, w: 2}
    // noinspection ES6ConvertVarToLetConst
    var strDate
    if (isNaN(data)) {
      strDate = false
    } else {
      const f = Number(data) + jd.j
      const e = jd.r * f + jd.v
      const g = Math.floor((e % jd.p) / jd.r)
      const h = jd.u * g + jd.w
      const day = Math.floor((h % jd.s) / jd.u) + 1
      const month = ((Math.floor(h / jd.s) + jd.m) % jd.n) + 1
      const year = Math.floor(e / jd.p) - jd.y + Math.floor((jd.n + jd.m - month) / jd.n)
      const date = new Date(year, month - 1, day)
      strDate = Ext.util.Format.cell(Ext.Date.format(date, 'Y/m/d'), Ext.Date.format(date, 'F j, Y, g:i a'))
    }
    return strDate
  },
  'granule.format': function (data) {
    const 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.superclass.constructor.apply(this, 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) {
    const myConf = {
      id: 'epntapTab',
      title: 'EPN-TAP',
      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 () {
          const ttContent = '<p>type: {type}</p><p>parent: {parent}</p><p>aliases:</p><ul>{aliases}</ul>'
          return '<div data-qtitle="{name}" data-qtip="' + ttContent + '">{name}</div>'
        }
      },
      listeners: {
        render: function (cb) {
          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) {
          const 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) {
          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',
      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',
      flex: 1,
      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: 'table_name', flex: 1, renderer: 'service.text'},
        {text: 'Nb res.', dataIndex: 'nb_results', width: 50, renderer: 'service.number'}
      ],
      viewConfig: {
        getRowClass: function (record) {
          const nbRes = record.get('nb_results')
          return nbRes === 0 || nbRes === -1 ? 'disabled_row'
            : nbRes === -2 ? 'error_row'
            : false
        }
      }
    }
  },

  /**
   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,
      loadMask: true,
      plugins: {
        ptype: 'bufferedrenderer',
        trailingBufferZone: 20,
        leadingBufferZone: 50
      },
      columns: []
    }
  }
})