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

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

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

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

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

- `id`: the data product type IDs, according to the EPN-TAP specification (see

    https://voparis-confluence.obspm.fr/pages/viewpage.action?pageId=1148225);

- `name`: the data product name, according to the EPN-TAP specification (ibid).

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

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

*/

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

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

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

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

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

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

  storeId: 'targetNamesStore',
  fields: ['id', 'text', 'name', 'type', 'parent', 'aliases'],
  proxy: {
    type: 'ajax',
    url: 'php/epntap.php',
    extraParams: { action: 'resolver' }
  },
  errorDisplayed: false,
  listeners: {
    load: function (store, records, successful) {
      if (!successful && !store.errorDisplayed) {
        Ext.Msg.alert('Error', 'Can not load results from the resolver. Please enter target names manually.')
        store.errorDisplayed = true
      }
    }
  }
})

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

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

- `id`: the database name of the service, according to the `table_name` column from the `rr.res_table` in the

    registry database;

- `nbResults`: the number of granules matching with the granules filter for this service;
- `shortName`: the service short name, according to the `short_name` column from the `rr.resource` table in the registry

    database;

- `title`: the service title, according to the `res_title` column from the `rr.resource` table in the registry database;
- `accessURL`: the service access URL, according to the `access_url` column from the `rr.interface` table in the

    registry database.

*/

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

  storeId: 'servicesStore',
  autoLoad: true,
  fields: [
    {name: 'id', type: 'string'},
    {name: 'short_name', type: 'string'},
    {name: 'res_title', type: 'string'},
    {name: 'ivoid', type: 'string'},
    {name: 'access_url', type: 'string'},
    {name: 'table_name', type: 'string'},
    {name: 'content_type', type: 'string'},
    {name: 'creator_seq', type: 'string'},
    {name: 'content_level', type: 'string'},
    {name: 'reference_url', type: 'string'},
    {name: 'created', type: 'date', dateFormat: 'c'},
    {name: 'updated', type: 'date', dateFormat: 'c'},
    {name: 'nb_results', type: 'integer'},
    {name: 'info', type: 'string'}
  ],
  proxy: {
    type: 'ajax',
    url: 'php/epntap.php',
    extraParams: {action: 'getServices'}
  },
  sorters: [
    {property: 'nb_results', direction: 'DESC'},
    {property: 'short_name', direction: 'ASC'}
  ],
  listeners: {
    // beforeload: function(s, operation) { console.log(operation); },
    load: function (store, records, successful) {
      if (!successful) {
        Ext.Msg.alert('Error', 'Can not get epntap services from registries.')
      }
    }
  }
})

/**

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

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

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

- `num`: the line number, according to the order of the query response and the current page (see `currentPageLb`);
- `dataproduct_type`: the dataproduct_type EPN-TAP parameter, as defined in

  https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters.

- `target_name`: the target_name EPN-TAP parameter (ibid);
- `time_min`: the time_min EPN-TAP parameter (ibid);
- `time_max`: the time_max EPN-TAP parameter (ibid);
- `access_format`: the access_format EPN-TAP parameter (ibid);
- `granule_uid`: the granule_uid EPN-TAP parameter (ibid);
- `access_estsize`: the access_estsize EPN-TAP parameter (ibid);
- `access_url`: the access_url EPN-TAP parameter (ibid);
- `thumbnail_url`: the thumbnail_url EPN-TAP parameter (ibid).
*/

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

Ext.define('GranulesModel', {

  extend: 'Ext.data.Model'
  // columns are created dynamically
})

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

  storeId: 'granulesStore',
  model: 'GranulesModel',
  buffered: true,
  autoload: false,
  pageSize: 500,
  leadingBufferZone: 0,
  proxy: {
    type: 'ajax',
    url: 'php/epntap.php',
    reader: { type: 'json', root: 'data'},
    simpleSortMode: true
  },
  listeners: {
    'beforeprefetch': function (store, operation) {
      var service = Ext.data.StoreManager.lookup('servicesStore').getById(store.selectedService).data
      store.getProxy().extraParams = {
        'action': 'getGranules',
        'url': service['access_url'],
        'tableName': service['table_name'],
        'targetNames': Ext.getCmp('epnTapTargetNameCB').rawValue,
        'productTypes': Ext.getCmp('epnTapProductTypeCB').value.join(';'),
        'timeMin': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStartTime(), 'd/m/Y H:i:s'),
        'timeMax': Ext.Date.format(Ext.getCmp('epnTapTimeSelector').getStopTime(), 'd/m/Y H:i:s'),
        'nbRes': service['nb_results']
      }
    },
    'prefetch': function (store, records, successful, operation) {
      // console.log('(prefetch) operation ' + (successful ? 'success' : 'failed') + ': ', operation);
      // console.log(operation.params);
      // console.log(Ext.decode(operation.response.responseText));
    },
    'metachange': function (store, meta) {
      if (meta.metaHash != store.metaHash) {
        Ext.getCmp('epnTapGranulesGrid').reconfigure(store, meta.columns)
        store.metaHash = meta.metaHash
      }
    }
  }
})

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

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

  override: 'Ext.util.Format',

  // Utils

  'prettify': function (data) {
    return data.charAt(0).toUpperCase() + data.replace(/_/g, ' ').substr(1).toLowerCase()
  },
  'url': function (data) {
    var url_pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
        '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
    return url_pattern.test(data) ? data : null
  },
  'cell': function (content, tooltip, tooltipTitle) {
    var ttAttr = ''
    if (tooltip !== '') {
      var ttTitle = tooltipTitle ? " data-qtitle='" + tooltipTitle + "'" : ''
      ttAttr = ttTitle + "' data-qtip='" + (tooltip || (content || 'No value.')) + "'"
    }
    return '<div class=epntap_cell ' + ttAttr + '>' + (content || '-') + '</div>'
  },

  // Services grid

  'serviceTooltip': function (data) {
    for (var key in data) {
      if (typeof data[key] === 'string' && data[key] != '') {
        data[key] = data[key].replace(/'/g, '&#39;').replace(/"/g, '&#34;')
      }
    }
    var infoColor = data.nb_results == -2 ? 'IndianRed' : 'green'
    var info = data.info.length > 0 ? '<p style="color:' + infoColor + '">' + data.info + '</p>' : ''

    var colums = ['res_title', 'ivoid', 'access_url', 'table_name', 'content_type', 'creator_seq', 'content_level', 'reference_url', 'created', 'updated']
    var details = ''
    for (var key in colums) {
      if (data[colums[key]] !== '') {
        var val = colums[key] === 'content_level' ? data[colums[key]].replace(/#/g, ', ') : data[colums[key]]
        details += '<li><b>' + Ext.util.Format.prettify(colums[key]) + '</b>: ' + val + '</li>'
      }
    }
    return info + '<ul>' + details + '</ul>'
  },
  'service.text': function (data, metadata, record) {
    return Ext.util.Format.cell(data, Ext.util.Format.serviceTooltip(record.data), data)
  },
  'service.number': function (data, metadata, record) {
    value = '' + data
    if (data < 0) {
      value = '-'
    } else if (data >= 1000 * 1000) {
      value = (data / (1000 * 1000)).toPrecision(3) + 'm'
    } else if (data >= 1000) {
      value = (data / 1000).toPrecision(3) + 'k'
    }
    return Ext.util.Format.cell(value, Ext.util.Format.serviceTooltip(record.data), record.data.short_name)
  },

  // Granules grid

  'granule.text': function (data, metadata, record) {
    return Ext.util.Format.cell(data)
  },
  'granule.link': function (data, metadata, record) {
    var icon_b64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iNzY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02NDAgNzY4SDEyOFYyNTcuOTA1OTk5OTk5OTk5OTVMMjU2IDI1NlYxMjhIMHY3NjhoNzY4VjU3Nkg2NDBWNzY4ek0zODQgMTI4bDEyOCAxMjhMMzIwIDQ0OGwxMjggMTI4IDE5Mi0xOTIgMTI4IDEyOFYxMjhIMzg0eiIvPjwvc3ZnPg=='
    var icon = '<img style="width:15px;" alt="link" src="' + icon_b64 + '">'
    url = Ext.util.Format.url(data)
    if (url) {
      txt = '<a style="font-size:150%" target="_blank" href="' + url + '">' + icon + '</a>'
    }
    return Ext.util.Format.cell(txt, url)
  },
  'granule.img': function (data, metadata, record) {
    img_url = Ext.util.Format.url(data)
    if (img_url) {
      icon = '<img style="max-width:100%; max-height:100%" alt="-" src="' + img_url + '">'
      img = '<img style="max-width:200px; max-height:200px" src="' + img_url + '">'
    }
    return Ext.util.Format.cell(icon, img)
  },
  'granule.type': function (data, metadata, record) {
    var productTypeDict = Ext.data.StoreManager.lookup('productTypesStore').data.map
    return Ext.util.Format.cell(productTypeDict[data].data.name)
  },
  'granule.size': function (data, metadata, record) {
    var size = parseInt(data)
    if (isNaN(size)) {
    } else if (size >= 1024 * 1024) {
      txt = (size / (1024 * 1024)).toPrecision(3) + 'Go'
    } else if (size >= 1024) {
      txt = (size / 1024).toPrecision(3) + 'Mo'
    } else {
      txt = size + 'Ko'
    }
    return Ext.util.Format.cell(txt)
  },
  'granule.proc_lvl': function (data, metadata, record) {
    var levels = {1: 'Raw', 2: 'Edited', 3: 'Calibrated', 4: 'Resampled', 5: 'Derived', 6: 'Ancillary'}
    return Ext.util.Format.cell((data in levels) ? levels[data] : '<em>' + data + '</em>')
  },
  'granule.date': function (data, metadata, record) {
    if (isNaN(data)) {
      return ''
    }
    var f = Number(data) + 1401 + Math.floor((Math.floor((4 * Number(data) + 274277) / 146097) * 3) / 4) - 38
    var e = 4 * f + 3
    var g = Math.floor((e % 1461) / 4)
    var h = 5 * g + 2
    var D = Math.floor((h % 153) / 5) + 1
    var M = ((Math.floor(h / 153) + 2) % 12) + 1
    var Y = Math.floor(e / 1461) - 4716 + Math.floor((12 + 2 - M) / 12)
    var date = new Date(Y, M - 1, D)
    return Ext.util.Format.cell(Ext.Date.format(date, 'Y/m/d'), Ext.Date.format(date, 'F j, Y, g:i a'))
  },
  'granule.format': function (data, metadata, record) {
    var mimetypeDict = {
      'application/fits': 'fits',
      'application/x-pds': 'pds',
      'image/x-pds': 'pds',
      'application/gml+xml': 'gml',
      'application/json': 'json',
      'application/octet-stream': 'bin, idl, envi or matlab',
      'application/pdf': 'pdf',
      'application/postscript': 'ps',
      'application/vnd.geo+json': 'geojson',
      'application/vnd.google-earth.kml+xml': 'kml',
      'application/vnd.google-earth.kmz': 'kmz',
      'application/vnd.ms-excel': 'xls',
      'application/x-asdm': 'asdm',
      'application/x-cdf': 'cdf',
      'application/x-cdf-istp': 'cdf',
      'application/x-cdf-pds4': 'cdf',
      'application/x-cef1': 'cef1',
      'application/x-cef2': 'cef2',
      'application/x-directory': 'dir',
      'application/x-fits-bintable': 'bintable',
      'application/x-fits-euro3d': 'euro3d',
      'application/x-fits-mef': 'mef',
      'application/x-geotiff': 'geotiff',
      'application/x-hdf': 'hdf',
      'application/x-netcdf': 'nc',
      'application/x-netcdf4': 'nc',
      'application/x-tar': 'tar',
      'application/x-tar-gzip': 'gtar',
      'application/x-votable+xml': 'votable',
      'application/x-votable+xml;content=datalink': 'votable',
      'application/zip': 'zip',
      'image/fits': 'fits',
      'image/gif': 'gif',
      'image/jpeg': 'jpeg',
      'image/png': 'png',
      'image/tiff': 'tiff',
      'image/x-fits-gzip': 'fits',
      'image/x-fits-hcompress': 'fits',
      'text/csv': 'csv',
      'text/html': 'html',
      'text/plain': 'txt',
      'text/tab-separated-values': 'tsv',
      'text/xml': 'xml',
      'video/mpeg': 'mpeg',
      'video/quicktime': 'mov',
      'video/x-msvideo': 'avi'
    }
    return Ext.util.Format.cell((data in mimetypeDict) ? '<p>' + mimetypeDict[data] + '</p>' : '<em>' + data + '</em>')
  }
})

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

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

Ext.define('amdaUI.EpnTapUI', {

  extend: 'Ext.panel.Panel',
  alias: 'widget.panelEpnTap',
  requires: ['amdaUI.IntervalUI'],

  /**
  Method constructor, which basically call the `init()` method to create the EpnTap panel.
  */
  constructor: function (config) {
    this.init(config)
    this.callParent(arguments)
  },

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

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

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

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

  /**
  Create `epnTapServiceFilterPanel`, an ExtJS Panel containing two containers:
  - the left container, containing the combo boxes (for product type, target class and target name)
    and the navigation panel;
  - the right container, containing the time selector.
  */
  createServiceFilterPanel: function () {
    return {
      xtype: 'form',
      id: 'epnTapServiceFilterPanel',
      layout: { type: 'hbox', pack: 'start', align: 'stretch' },
      region: 'north',
      defaults: { margin: '5 0 5 5'},
      items: [{ // Left part
        xtype: 'container',
        flex: 1,
        items: [
          this.createTargetNameCB(),
          this.createProductTypeCB()
        ]
      }, { // Middle part
        xtype: 'container',
        flex: 1,
        items: [
          this.createTimeSelector()
        ]
      }, { // Right part
        xtype: 'container',
        items: [
          this.createSendButton()
        ]

      }]
    }
  },

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

    The selection of a target name triggers `EpnTapModule.onTargetNameCBChanged()`, which basically updates
    `granulesGrid`.
    */
    createTargetNameCB: function () {
      return {
        xtype: 'combobox',
        id: 'epnTapTargetNameCB',
        fieldLabel: 'Target name',
        emptyText: 'Earth, Saturn, 67P, ...',
        tooltip: 'Start to type a text, then select a target name (required). Several values are allowed, separated by a semicolon.',
        store: Ext.data.StoreManager.lookup('targetNamesStore'),
        queryMode: 'remote',
        queryParam: 'input',
        displayField: 'text',
        valueField: 'id',
        margin: '15 0 5 0',
        labelWidth: 71,
        minWidth: 20,
        minChars: 2,
        hideTrigger: true,
        listConfig: {
          getInnerTpl: function () {
            return '<div data-qtitle="{name}" data-qtip="<p>type: {type}</p><p>parent: {parent}</p><p>aliases:</p><ul>{aliases}</ul>">{name}</div>'
          }
        },
        listeners: {
          render: function (cb) {
            new Ext.ToolTip({ target: cb.getEl(), html: '<div style="width:200px">' + cb.tooltip + '</div>'})
          }
        }
      }
    },

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

  The selection of a produt type triggers `EpnTapModule.onProductTypeCBChanged()`, which basically update
  `epnTapGranulesGrid`.
  */
  createProductTypeCB: function () {
    return {
      xtype: 'combobox',
      id: 'epnTapProductTypeCB',
      fieldLabel: 'Product type',
      emptyText: 'Image, Time series, ...',
      tooltip: 'Select one or several data product types (required).',
      store: Ext.data.StoreManager.lookup('productTypesStore'),
      queryMode: 'local',
      valueField: 'id',
      multiSelect: true,
      displayField: 'name',
      labelWidth: 71,
      editable: false,
      listConfig: {
        getInnerTpl: function () {
          return '<div data-qtitle="{name}" data-qwidth=200 data-qtip="<p>{desc}</p>">{name}</div>'
        }
      },
      listeners: {
        change: function (cb, records) {
          var val = cb.value[cb.value.length - 1]
          if (val === 'all') {
            cb.select(cb.store.getRange().slice(2))
          } else if (val === 'clear') {
            cb.reset()
          }
        },
        render: function (cb) {
          new Ext.ToolTip({ target: cb.getEl(), html: '<div style="width:200px">' + cb.tooltip + '</div>'})
        }
      }
    }
  },

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

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

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

  /**
  The button used to send the query.
  */
  createSendButton: function () {
    return {
      xtype: 'button',
      id: 'epnTapGetBtn',
      text: 'Get services',
      disabled: true,
      width: 140,
      height: 50,
      margin: 10
    }
  },

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

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

  After the rendering of the grids, it triggers `epnTapModule.onWindowLoaded()`, which basically fill
  `epnTapServicesGrid` for the first time.
  */
  createGridsPanel: function () {
    return {
      xtype: 'panel',
      id: 'epnTapGridsPanel',
      layout: 'fit',
      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: 'short_name', flex: 1, renderer: 'service.text'},
        {text: 'Nb res.', dataIndex: 'nb_results', width: 50, renderer: 'service.number'}
      ],
      viewConfig: {
        getRowClass: function (record, index) {
          var nb_res = record.get('nb_results')
          if (nb_res == 0 || nb_res == -1) {
            return 'disabled_row'
          } else if (nb_res == -2) {
            return 'error_row'
          }
        }
      }
    }
  },

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

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

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

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

  A click on a granule triggers `EpnTapModule.onGranuleSelected()`.
  */
  createGranulesGrid: function () {
    return {
      xtype: 'grid',
      cls: 'epntap_grid',
      id: 'epnTapGranulesGrid',
      title: 'Granules',
      store: Ext.data.StoreManager.lookup('granulesStore'),
      flex: 4,
      plugins: {
        ptype: 'bufferedrenderer',
        trailingBufferZone: 20,
        leadingBufferZone: 50
      },
      columns: []
    }
  }
})