Escape sourceLabel ids when invalid characters are present

contribs/gmf/apps/desktop_alt/index.html

@@ -407,6 +407,9 @@
               defaultFeatureNS: 'http://mapserver.gis.umn.edu/mapserver',
               defaultFeaturePrefix: 'feature'
             }));
+        module.constant('ngeoQueryOptions', {
+          limit: 50
+        })
       })();
     </script>
   </body>

contribs/gmf/apps/desktop_alt/js/controller.js

@@ -114,13 +114,17 @@ app.AlternativeDesktopController = function($scope, $injector, ngeoFile, gettext
    * @export
    */
   this.gridMergeTabs = {
-    'OSM time merged': ['osm_time', 'osm_time2']
+    'OSM_time_merged': ['osm_time', 'osm_time2'],
+    'transport (merged)': ['fuel', 'parking'],
+    'Learning [merged]': ['information', 'bus_stop']
   };
 
   // Allow angular-gettext-tools to collect the strings to translate
   /** @type {angularGettext.Catalog} */
   const gettextCatalog = $injector.get('gettextCatalog');
-  gettextCatalog.getString('OSM time merged');
+  gettextCatalog.getString('OSM_time_merged');
+  gettextCatalog.getString('OSM_time (merged)');
+  gettextCatalog.getString('Learning [merged]');
   gettextCatalog.getString('Add a theme');
   gettextCatalog.getString('Add a sub theme');
   gettextCatalog.getString('Add a layer');

contribs/gmf/src/directives/displayquerygrid.js

@@ -348,14 +348,15 @@ gmf.DisplayquerygridController.prototype.updateData_ = function() {
     if (source.tooManyResults) {
       this.makeGrid_(null, source);
     } else {
+      source.id = this.escapeValue_(source.id);
       const features = source.features;
       if (features.length > 0) {
         this.collectData_(source);
       }
     }
   });
 
-  if (this.loadedGridSources.length == 0) {
+  if (this.loadedGridSources.length === 0) {
     // if no grids were created, do not show
     this.active = false;
     return;
@@ -381,6 +382,26 @@ gmf.DisplayquerygridController.prototype.hasOneWithTooManyResults_ = function()
   return this.ngeoQueryResult.sources.some(source => source.tooManyResults);
 };
 
+/**
+ * Returns an escaped value.
+ * @param {string|number} value A value to escape.
+ * @returns {string|number} value An escaped value.
+ * @private
+ */
+gmf.DisplayquerygridController.prototype.escapeValue_ = function(value) {
+  // Work-around for Number.isInteger() when not always getting a number ...
+  if (Number.isInteger(/** @type {number} */ (value))) {
+    return value;
+  } else {
+    const toEscape = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\ |]/g;
+    if (value.match(toEscape) !== null) {
+      return value.replace(toEscape, '_');
+    } else {
+      return value;
+    }
+  }
+};
+
 
 /**
  * Returns if the given grid source is selected?
@@ -684,21 +705,21 @@ gmf.DisplayquerygridController.prototype.selectTab = function(gridSource) {
   }
   this.updateFeatures_(gridSource);
 
-  this.reflowGrid_(this.selectedTab);
+  this.reflowGrid_(source.id);
 };
 
 
 /**
  * @private
- * @param {string|number} sourceLabel Id of the source that should be refreshed.
+ * @param {string|number} sourceId Id of the source that should be refreshed.
  */
-gmf.DisplayquerygridController.prototype.reflowGrid_ = function(sourceLabel) {
-  // this is a "work-around" to make sure that the grid is rendered correctly.
-  // when a pane is activated by setting `this.selectedTab`, the class `active`
-  // is not yet set on the pane. that's why the class is set manually, and
+gmf.DisplayquerygridController.prototype.reflowGrid_ = function(sourceId) {
+  // This is a "work-around" to make sure that the grid is rendered correctly.
+  // When a pane is activated by setting `this.selectedTab`, the class `active`
+  // is not yet set on the pane. That's why the class is set manually, and
   // after the pane is shown (in the next digest loop), the grid table can
   // be refreshed.
-  const activePane = this.$element_.find(`div.tab-pane#${sourceLabel}`);
+  const activePane = this.$element_.find(`div.tab-pane#${sourceId}`);
   activePane.removeClass('active').addClass('active');
   this.$timeout_(() => {
     activePane.find('div.ngeo-grid-table-container table')['trigger']('reflow');

contribs/gmf/src/directives/partials/displayquerygrid.html

@@ -10,15 +10,15 @@
     role="tablist">
 
     <li
-      ng-repeat="gridSource in ctrl.getGridSources() track by gridSource.source.label"
+      ng-repeat="gridSource in ctrl.getGridSources() track by gridSource.source.id"
       role="presentation"
       ng-class="{'active' : ctrl.isSelected(gridSource)}"
       ng-click="ctrl.selectTab(gridSource)">
 
       <a
-        href="#{{gridSource.source.label}}"
-        data-target="#{{gridSource.source.label}}"
-        aria-controls="{{gridSource.source.label}}"
+        href="#{{gridSource.source.id}}"
+        data-target="#{{gridSource.source.id}}"
+        aria-controls="{{gridSource.source.id}}"
         role="tab"
         data-toggle="tab">
 
@@ -34,11 +34,11 @@
 
   <div class="tab-content">
     <div
-      ng-repeat="gridSource in ctrl.getGridSources() track by gridSource.source.label"
+      ng-repeat="gridSource in ctrl.getGridSources() track by gridSource.source.id"
       role="tabpanel"
       class="tab-pane"
       ng-class="{'active' : ctrl.isSelected(gridSource)}"
-      id="{{gridSource.source.label}}">
+      id="{{gridSource.source.id}}">
 
       <ngeo-grid
         ngeo-grid-configuration="gridSource.configuration"