diff --git a/gulpfile.js b/gulpfile.js
index dcaab6f2d..c633e1e79 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -90,7 +90,7 @@ const dev_plugins = Array.from(
  */
 function get_version(pluginName) {
   const src = (pluginName ? `${g3w.pluginsFolder}/${pluginName}` : '.');
-  // delete cache of require otherwise no package.json version rest the old (cache) one
+  // delete cache of require otherwise no package.json version rests the old (cache) one
   delete require.cache[require.resolve(`${src}/package.json`)];
   try {
     return require(`${src}/package.json`).version;
@@ -131,7 +131,7 @@ function get_branch(pluginName) {
 }
 
 /**
- * Create standard version format for app and plugins
+ * Create a standard version format for app and plugins
  * 
  * @param { string } pluginName
  * 
@@ -178,12 +178,12 @@ const browserify_plugin = (pluginName, watch = true) => {
   console.log(INFO__ + `Building plugin:` + __RESET + ' → ' + outputFolder);
 
   let bundler = browserify(`./${pluginName}/index.js`, {
-    basedir: `${g3w.pluginsFolder}`,
-    paths: [`${g3w.pluginsFolder}`],
-    debug: !production,
-    cache: {},
+    basedir:      `${g3w.pluginsFolder}`,
+    paths:        [`${g3w.pluginsFolder}`],
+    debug:        !production,
+    cache:        {},
     packageCache: {},
-    plugin: [
+    plugin:       [
       watch && !production ? watchify : undefined,
       /* Uncomment the following in next ESM release (v4.x) */
       // esmify
@@ -206,26 +206,26 @@ const browserify_plugin = (pluginName, watch = true) => {
     const branch  = get_branch(pluginName);
 
     return merge(
-        gulp
-          .src(`./src/plugins/_version.js`),                                // NB: hardcoded file, do not use `g3w.pluginsFolder`!
-        bundler
-          .bundle()
-          .on('error', (err) => { gutil.log(err); process.exit(); })
-          .pipe(source(`${src}/build.js`))
-          .pipe(buffer())
-          .pipe(rename('plugin.js'))
-      )
-      .pipe(concat('plugin.js'))
-      .pipe(replace('process.env.g3w_plugin_name', `"${pluginName}"`))
-      .pipe(replace('process.env.g3w_plugin_version', `"${is_prod_branch(branch) ? version : version.split('-')[0] + '-' + branch }"`))
-      .pipe(replace('process.env.g3w_plugin_hash', `"${hash}"`))
-      .pipe(replace('process.env.g3w_plugin_branch', `"${branch}"`))
-      .pipe(gulpif(production, sourcemaps.init()))
-      .pipe(gulpif(production, uglify({ compress: { drop_console: true } }).on('error', gutil.log)))
-      .pipe(gulpif(production, sourcemaps.write(src)))
-      .pipe(gulp.dest(src))           // put plugin.js to plugin folder (git source)
-      .pipe(gulp.dest(outputFolder)) // put plugin.js to static folder (PROD | DEV env)
-      .pipe(gulpif(!production, browserSync.reload({ stream: true }))); // refresh browser after changing local files (dev mode)
+      gulp
+        .src(`./src/plugins/_version.js`),                                // NB: hardcoded file, do not use `g3w.pluginsFolder`!
+      bundler
+        .bundle()
+        .on('error', (err) => { gutil.log(err); process.exit(); })
+        .pipe(source(`${src}/build.js`))
+        .pipe(buffer())
+        .pipe(rename('plugin.js'))
+    )
+    .pipe(concat('plugin.js'))
+    .pipe(replace('process.env.g3w_plugin_name', `"${pluginName}"`))
+    .pipe(replace('process.env.g3w_plugin_version', `"${is_prod_branch(branch) ? version : version.split('-')[0] + '-' + branch }"`))
+    .pipe(replace('process.env.g3w_plugin_hash', `"${hash}"`))
+    .pipe(replace('process.env.g3w_plugin_branch', `"${branch}"`))
+    .pipe(gulpif(production, sourcemaps.init()))
+    .pipe(gulpif(production, uglify({ compress: { drop_console: true } }).on('error', gutil.log)))
+    .pipe(gulpif(production, sourcemaps.write(src)))
+    .pipe(gulp.dest(src))           // put plugin.js to plugin folder (git source)
+    .pipe(gulp.dest(outputFolder)) // put plugin.js to static folder (PROD | DEV env)
+    .pipe(gulpif(!production, browserSync.reload({ stream: true }))); // refresh browser after changing local files (dev mode)
   };
 
   return rebundle();
@@ -393,12 +393,12 @@ gulp.task('browserify:app', function() {
  */
 gulp.task('images', function () {
   return gulp.src([
-      `${g3w.assetsFolder}/images/**/*.{png,jpg,gif,svg}`,
-      `${g3w.pluginsFolder}/**/*.{png,jpg,gif,svg}`,
-      '!./src/**/node_modules/**/'
-    ])
-    .pipe(flatten())
-    .pipe(gulp.dest(`${outputFolder}/static/client/images/`))
+    `${g3w.assetsFolder}/images/**/*.{png,jpg,gif,svg}`,
+    `${g3w.pluginsFolder}/**/*.{png,jpg,gif,svg}`,
+    '!./src/**/node_modules/**/'
+  ])
+  .pipe(flatten())
+  .pipe(gulp.dest(`${outputFolder}/static/client/images/`))
 });
 
 /**
@@ -415,14 +415,14 @@ gulp.task('datatable-images', function () {
  */
  gulp.task('fonts', function () {
   return gulp.src([
-      `${g3w.assetsFolder}/fonts/**/*.{eot,ttf,woff,woff2}`,
-      `${g3w.assetsFolder}/vendors/bootstrap/fonts/**/*.{eot,ttf,woff,woff2}`,
-      `${g3w.assetsFolder}/vendors/font-awesome-5.15.4/webfonts/**/*.{eot,ttf,woff,woff2}`,
-      `${g3w.pluginsFolder}/**/*.{eot,ttf,woff,woff2}`,
-      '!./src/**/node_modules/**/'
-    ])
-    .pipe(flatten())
-    .pipe(gulp.dest(`${outputFolder}/static/client/fonts/`))
+    `${g3w.assetsFolder}/fonts/**/*.{eot,ttf,woff,woff2}`,
+    `${g3w.assetsFolder}/vendors/bootstrap/fonts/**/*.{eot,ttf,woff,woff2}`,
+    `${g3w.assetsFolder}/vendors/font-awesome-5.15.4/webfonts/**/*.{eot,ttf,woff,woff2}`,
+    `${g3w.pluginsFolder}/**/*.{eot,ttf,woff,woff2}`,
+    '!./src/**/node_modules/**/'
+  ])
+  .pipe(flatten())
+  .pipe(gulp.dest(`${outputFolder}/static/client/fonts/`))
 });
 
 /**
@@ -489,15 +489,11 @@ gulp.task('concatenate:vendor_css', function() {
  */
 gulp.task('browser-sync', function() {
   browserSync.init({
-    port: g3w.port,
-    open: false,
+    port:      g3w.port,
+    open:      false,
     startPath: '/',
-    proxy: {
-      target: g3w.proxy.url
-    },
-    socket: {
-      domain: `${g3w.host}:${g3w.port}`
-    }
+    proxy:     { target: g3w.proxy.url },
+    socket:    { domain: `${g3w.host}:${g3w.port}`}
   });
 
   /* Uncomment the following in next Gulp Release (v4.x) */
@@ -531,15 +527,15 @@ gulp.task('clone:default_plugins', function() {
 });
 
 /**
- * Ask the developer which plugins wants to deploy
+ * Ask the developer which plugins want to deploy
  */
 gulp.task('select-plugins', function() {
   return gulp
     .src('./package.json')
     .pipe(
       prompt.prompt({
-        type: 'checkbox',
-        name: 'plugins',
+        type:    'checkbox',
+        name:    'plugins',
         message: 'Plugins',
         default: ['client'],
         // exclude from plugin list "client" and all "template_" plugins
@@ -662,8 +658,8 @@ gulp.task('test', function() {
  * @see src\app\version
  */
 gulp.task('version', function() {
-  set_version();                                                                     // client
-  dev_plugins.forEach(pluginName => set_version(pluginName)); // plugins
+  set_version(); // client
+  dev_plugins.forEach(name => set_version(name)); // plugins
 });
 
 /**
diff --git a/src/app/api.js b/src/app/api.js
index 2d2e15dba..957d816ca 100644
--- a/src/app/api.js
+++ b/src/app/api.js
@@ -166,7 +166,6 @@ const FormComponent              = require('gui/form/vue/form');
 const FormService                = require('gui/form/formservice');
 const InputsComponents           = require('gui/inputs/inputs');
 const Fields                     = require('gui/fields/fields');
-const SearchPanelService         = require('gui/search/vue/panel/searchservice');
 
 /**
  * G3W-OL modules
@@ -376,7 +375,6 @@ const g3wsdk = {
       Fields,
       Mixins,
       services: {
-        SearchPanel: SearchPanelService,
         FormService
       }
     }
diff --git a/src/app/config.js b/src/app/config.js
index 7b4430585..0de5d9d16 100644
--- a/src/app/config.js
+++ b/src/app/config.js
@@ -4,19 +4,16 @@
  */
 
 import translations from '../locales';
-const apptitle = "G3W Client";
+
+const apptitle           = "G3W Client";
 const supportedLanguages = ['en', 'it'];
 
 export const plugins = {};
 
-export const tools = {
-  tools:  []
-};
+export const tools = { tools:  [] };
 
-// get message from internationalization
-export const _i18n = {
-  resources: translations
-};
+// get a message from internationalization
+export const _i18n = { resources: translations };
 
 export const client = {
   debug:  true,
@@ -25,19 +22,17 @@ export const client = {
 
 export const server = {
   urls:  {
-    baseurl: '/',
-    ows:  'ows',
-    api:  'api',
+    baseurl:     '/',
+    ows:         'ows',
+    api:         'api',
     initconfig:  'api/initconfig',
-    config:  'api/config'
+    config:      'api/config'
   }
 };
 
 export const utils = {
   merge(type) {
-    if (type) {
-      console.log(CONFIG)
-    }
+    if (type) { console.log(type) }
   }
 };
 
diff --git a/src/app/constant.js b/src/app/constant.js
index 9a6801785..a36468d71 100644
--- a/src/app/constant.js
+++ b/src/app/constant.js
@@ -36,27 +36,27 @@ export const DEFAULT_EDITING_CAPABILITIES = [
 export const DOWNLOAD_FORMATS = {
   download: {
     format: 'shapefile',
-    url: 'shp'
+    url:    'shp'
   },
   download_gpkg: {
     format: 'gpkg',
-    url: 'gpkg'
+    url:    'gpkg'
   },
   download_gpx: {
     format: 'gpx',
-    url: 'gpx'
+    url:    'gpx'
   },
   download_csv: {
     format: 'csv',
-    url: 'csv'
+    url:    'csv'
   },
   download_xls: {
     format: 'xls',
-    url: 'xls'
+    url:    'xls'
   },
   download_raster: {
     format: 'geotiff',
-    url: 'geotiff'
+    url:    'geotiff'
   }
 };
 
@@ -88,19 +88,19 @@ export const G3W_FID = 'g3w_fid';
  * @type {Object<string, string>}
  * @since v3.5
  */
-export const FILTER_OPERATORS =  {
-  gte: '>=',
-  lte: '<=',
-  NOT: '!=',
-  eq: '=',
-  gt: '>',
-  lt: '<',
-  IN: 'IN',
+export const FILTER_OPERATORS = {
+  gte:      '>=',
+  lte:      '<=',
+  NOT:      '!=',
+  eq:       '=',
+  gt:       '>',
+  lt:       '<',
+  IN:       'IN',
   'NOT IN': 'NOT IN',
-  LIKE: 'LIKE',
-  ILIKE: 'ILIKE',
-  AND: 'AND',
-  OR: 'OR',
+  LIKE:     'LIKE',
+  ILIKE:    'ILIKE',
+  AND:      'AND',
+  OR:       'OR',
 };
 
 /**
@@ -108,10 +108,10 @@ export const FILTER_OPERATORS =  {
  * @since v3.5
  */
 export const FILTER_EXPRESSION_OPERATORS = {
-  lte: '<=',
-  ltgt: '!=',
+  lte:   '<=',
+  ltgt:  '!=',
   ilike: 'ILIKE',
-  like: 'LIKE',
+  like:  'LIKE',
   ...FILTER_OPERATORS,
 };
 
@@ -209,19 +209,12 @@ export const LOCALSTORAGE_EXTERNALWMS_ITEM = 'externalwms';
  * @type {MapSettings}
  */
 export const MAP_SETTINGS = {
-  ZOOM: {
-    maxScale: 1000,
-  },
-  ANIMATION: {
-    duration: 2000
-  },
+  ZOOM: { maxScale: 1000, },
+  ANIMATION: { duration: 2000, },
   LAYER_POSITIONS: {
     default: 'top',
-    getPositions(){
-      return [
-        'top',
-        'bottom'
-      ]
+    getPositions() {
+      return [ 'top', 'bottom' ]
     }
   }
 };
@@ -253,96 +246,96 @@ export const PRINT_RESOLUTIONS = [150, 300];
  */
 export const PRINT_SCALES = [
   {
-    value:100,
-    label:'1:100'
+    value: 100,
+    label: '1:100'
   },
   {
-    value:200,
-    label:'1:200'
+    value: 200,
+    label: '1:200'
   },
   {
-    value:500,
-    label:'1:500'
+    value: 500,
+    label: '1:500'
   },
   {
-    value:1000,
-    label:'1:1.000'
+    value: 1000,
+    label: '1:1.000'
   },
   {
-    value:2000,
-    label:'1:2.000'
+    value: 2000,
+    label: '1:2.000'
   },
   {
-    value:2500,
-    label:'1:2.500'
+    value: 2500,
+    label: '1:2.500'
   },
   {
-    value:5000,
-    label:'1:5.000'
+    value: 5000,
+    label: '1:5.000'
   },
   {
-    value:10000,
-    label:'1:10.000'
+    value: 10000,
+    label: '1:10.000'
   },
   {
-    value:20000,
-    label:'1:20.000'
+    value: 20000,
+    label: '1:20.000'
   },
   {
-    value:25000,
-    label:'1:25.000'
+    value: 25000,
+    label: '1:25.000'
   },
   {
-    value:50000,
-    label:'1:50.000'
+    value: 50000,
+    label: '1:50.000'
   },
   {
-    value:100000,
-    label:'1:100.000'
+    value: 100000,
+    label: '1:100.000'
   },
   {
-    value:250000,
-    label:'1:250.000'
+    value: 250000,
+    label: '1:250.000'
   },
   {
-    value:500000,
-    label:'1:500.000'
+    value: 500000,
+    label: '1:500.000'
   },
   {
-    value:1000000,
-    label:'1:1.000.000'
+    value: 1000000,
+    label: '1:1.000.000'
   },
   {
-    value:2500000,
-    label:'1:2.500.000'
+    value: 2500000,
+    label: '1:2.500.000'
   },
   {
-    value:5000000,
-    label:'1:5.000.000'
+    value: 5000000,
+    label: '1:5.000.000'
   },
   {
-    value:10000000,
-    label:'1:10.000.000'
+    value: 10000000,
+    label: '1:10.000.000'
   },
   {
-    value:20000000,
-    label:'1:20.000.000'
+    value: 20000000,
+    label: '1:20.000.000'
   },
   {
-    value:50000000,
-    label:'1:50.000.000'
+    value: 50000000,
+    label: '1:50.000.000'
   },
   {
-    value:100000000,
-    label:'1:100.000.000'
+    value: 100000000,
+    label: '1:100.000.000'
   },
   {
-    value:250000000,
-    label:'1:250.000.000'
+    value: 250000000,
+    label: '1:250.000.000'
   },
   {
-    value:500000000,
-    label:'1:500.000.000'
+    value: 500000000,
+    label: '1:500.000.000'
   }
 ];
 
@@ -352,7 +345,7 @@ export const PRINT_SCALES = [
  * @type {{unit: string, value: number}}
  */
 export const QUERY_POINT_TOLERANCE = {
-  unit: 'pixel',
+  unit:  'pixel',
   value: 10
 };
 
@@ -404,9 +397,7 @@ export const VIEWPORT = {
  * @type {Object<string, { tool: number }>}
  */
 export const ZINDEXES = {
-  usermessage: {
-    tool: 2
-  }
+  usermessage: { tool: 2 }
 };
 
 /**
@@ -597,12 +588,12 @@ export const FONT_AWESOME_ICONS = {
 export const LOCAL_ITEM_IDS = {
 
   MESSAGES: {
-    id: 'MESSAGES',
+    id:   'MESSAGES',
     value: {}
   },
 
   SPATIALBOOKMARKS: {
-    id: 'SPATIALBOOKMARKS',
+    id:    'SPATIALBOOKMARKS',
     value: {}
   },
 
@@ -633,7 +624,7 @@ export const DOTS_PER_INCH = 96;
  * @since 3.10.0
  */
 export const INCHES_PER_UNIT = {
-  m: 39.37,
+  m:       39.37,
   degrees: 4374754
 };
 
diff --git a/src/app/core/data/service.js b/src/app/core/data/service.js
deleted file mode 100644
index 604e5e683..000000000
--- a/src/app/core/data/service.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import ProjectsRegistry from 'store/projects';
-import GUI from 'services/gui';
-
-const { resolve } = require('utils');
-
-function BaseService(){
-  ProjectsRegistry.onbefore('setCurrentProject' , project => this.project = project);
-  this.project = ProjectsRegistry.getCurrentProject();
-}
-
-const proto = BaseService.prototype;
-/**
- *
- * @param request is a Promise(jquery promise at moment
- * @returns {Promise<unknown>}
- */
-proto.handleRequest = function(request){
-  //  OVERWRITE TO SERVICE
-};
-
-proto.handleResponse = async function(response){
-  //  OVERWRITE TO SERVICE
-};
-
-/**
- * @param {{ type: 'vector' }}
- * 
- * @returns { unknown[] } array of external layer add on project
- * 
- * @since 3.8.0
- */
-proto.getSelectedExternalLayers = function({type = 'vector'}) {
-  return GUI.getService('catalog').getExternalSelectedLayers({ type });
-};
-
-/**
- * @returns {Promise<[]>} a resolved request (empty array)
- * 
- * @since 3.8.0
- */
-proto.getEmptyRequest = function(){
-  return resolve([]);
-};
-
-/**
- * @param {{ type: 'vector' }}
- * 
- * @returns {boolean}
- * 
- * @since 3.8.0
- */
-proto.hasExternalLayerSelected = function({type = 'vector'}) {
-  return this.getSelectedExternalLayers({ type }).length > 0;
-};
-
-module.exports = BaseService;
\ No newline at end of file
diff --git a/src/app/core/g3w-barstack.js b/src/app/core/g3w-barstack.js
new file mode 100644
index 000000000..611d7221d
--- /dev/null
+++ b/src/app/core/g3w-barstack.js
@@ -0,0 +1,162 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Panel       from 'core/g3w-panel';
+import Component   from 'core/g3w-component';
+import G3WObject   from 'core/g3wobject';
+
+/**
+ * Barstack Class - used to mount panels stack on top of each parent
+ * 
+ * ORIGINAL SOURCE src/app/gui/utils/barstack.js@v3.9.3
+ * 
+ */
+export class BarStack extends G3WObject {
+
+  constructor() {
+
+    super();
+
+    /** identify the DOM element where insert the component/panel  */
+    this._parent = null;
+
+    /** barstack state. It stores the panel array */
+    this.state = {
+      contentsdata: [] // Array<{ content, options }> 
+    }
+
+  }
+
+  /**
+   * push componenet on top of parent
+   */
+  push(content, options={}) {
+    this._parent = options.parent;
+    return this._mount(content, options);
+  }
+
+  /**
+   * remove the last component from stack
+   */
+  pop() {
+    const d = $.Deferred();
+    const data = this.state.contentsdata;
+    if (data.length) {
+      this._unmount(data.slice(-1)[0].content).then(() => { d.resolve(data.pop()) });
+    } else {
+      d.resolve();
+    }
+    return d.promise();
+  }
+
+  /**
+   * clear all stacks
+   */
+  clear() {
+    const d = $.Deferred();
+    const data = this.state.contentsdata;
+    if (data.length) {
+      $
+        .when(data.map(d => this._unmount(d.content)))
+        .then(() => { data.splice(0, data.length); d.resolve(); });
+    } else {
+      d.resolve();
+    }
+    this.emit('clear');
+    return d.promise();
+  }
+
+  getContentData() {
+    return this.state.contentsdata;
+  }
+
+  getCurrentContentData() {
+    return this.state.contentsdata[this.state.contentsdata.length - 1];
+  }
+
+  getPreviousContentData() {
+    return this.state.contentsdata[this.state.contentsdata.length - 2];
+  }
+
+  /**
+   * Mount component to parent
+   */
+  _mount(content, options) {
+    const d    = $.Deferred();
+    const data = this.state.contentsdata;
+
+    // check the type of content:
+
+    // String or JQuery
+    if (content instanceof jQuery || _.isString(content)) {
+      let el = _.isString(content) ? ($(content).length ? $('<div>' + content + '</div>') : $(content)) : content
+      $(this._parent).append(el);
+      data.push({ content: el, options });
+      console.warn('[G3W-CLIENT] jQuery components will be discontinued, please update your code as soon as possible', data[data.length - 1]);
+      d.resolve();
+    }
+
+    // Vue element
+    else if (content.mount && 'function' === typeof content.mount) {
+      // Check duplicate element by component id (if already exist)
+      let id = data.findIndex(d => d.content.getId && (d.content.getId() === content.getId()));
+      if (-1 !== id) {
+        data[id].content.unmount().then(() => data.splice(id, 1));
+      }
+      // Mount vue component 
+      content
+        .mount(this._parent, options.append || false)
+        .then(() => {
+          $(this._parent).localize();
+          data.push({ content, options });
+          d.resolve(content);
+        });
+
+    }
+
+    // DOM element
+    else {
+      this._parent.appendChild(content);
+      data.push({ content, options });
+      d.resolve();
+    }
+
+    return d.promise();
+
+  }
+
+  /**
+   * unmount component
+   */
+  _unmount(content) {
+    const d = $.Deferred();
+    if (content instanceof Component || content instanceof Panel) {
+      content.unmount().then(() => d.resolve());
+    } else {
+      $(this._parent).empty();
+      d.resolve();
+    }
+    return d.promise();
+  }
+
+  forEach(cbk) {
+    this.state.contentsdata.forEach(d => cbk(d.content));
+  }
+
+  /**
+   * @returns number of elements stored in stack
+   */
+  getLength() {
+    return this.state.contentsdata.length;
+  }
+
+  /**
+   * @since 3.10.0
+   */
+  getComponentById(id) {
+    return (this.getContentData().find(d => d.content.id == id) || {}).content;
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/core/g3w-component.js b/src/app/core/g3w-component.js
new file mode 100644
index 000000000..c7667d065
--- /dev/null
+++ b/src/app/core/g3w-component.js
@@ -0,0 +1,344 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+import G3WObject                    from 'core/g3wobject';
+import { merge }                    from 'utils/merge';
+import { noop }                     from 'utils/noop';
+import { capitalize_first_letter }  from 'utils/capitalize_first_letter';
+import { resolve }                  from 'utils/resolve';
+import GUI                          from 'services/gui';
+
+/** @deprecated */
+const _cloneDeep = require('lodash.clonedeep');
+
+const deprecate  = require('util-deprecate');
+
+const çç = (a, b) => undefined !== a ? a : b; // like a ?? (coalesce operator)
+
+/**
+ * Component class
+ * 
+ * ORIGINAL SOURCE src/app/gui/component/component.js@v3.9.3
+ * 
+ * @param { Object} opts
+ * @param { number } opts.id 
+ * @param { string } opts.title
+ * @param { boolean } opts.visible
+ * @param { boolean } opts.open
+ * @param { boolean } opts.resizable
+ * @param { null | unknown } opts.info
+ * @param { boolean } opts.loading
+ * @param { boolean } opts.disabled
+ * @param { boolean } opts.closewhenshowviewportcontent
+ * @param opts.events
+ * @param opts.internalComponent since 3.10.0
+ * @param opts.service since 3.10.0
+ */
+export default class Component extends G3WObject {
+
+  constructor(opts = {}) {
+
+    // BACKOMP v3.x
+    if (opts.iconConfig) {
+      opts.iconColor = opts.iconConfig.color;
+      opts.icon      = opts.iconConfig.icon;
+      delete opts.iconConfig;
+    }
+
+    // TODO: check why `GUI.getFontClass` is undefined
+    opts.icon = GUI.getFontClass(opts.icon) || opts.icon;
+
+    super({
+      setters: {
+
+        setOpen(bool) {
+          this.state.open = bool;
+          if (this._setOpen) {
+            this._setOpen(bool);
+          }
+        },
+
+        setVisible(bool) {
+          this.state.visible = bool;
+          if (this._setVisible) {
+            this._setVisible(bool);
+          }
+        },
+
+        setLoading(bool = false) {
+          this.state.loading = bool;
+        },
+
+        setDisabled(bool = false) {
+          this.state.disabled = bool;
+        },
+
+        reload() {
+          console.warn('[G3W-CLIENT] reloading of components will be discontinued, please update your code as soon as possible', this.getId())
+          if (this._reload) {
+            this._reload();
+          }
+        },
+      }
+
+    });
+
+    this._firstLayout = true;
+
+    /** internal VUE component */
+    this.internalComponent = çç(opts.internalComponent, null);
+
+    /** @type { Array } */
+    this._components = [];
+
+    /** @type { string } */
+    this.id = çç(opts.id, Math.random() * 1000);
+
+    /** @type { string } */
+    this.title = çç(opts.title, '');
+
+    this.state = {
+      sizes:                        { width: 0, height:0 },
+      info:                         çç(opts.info, null),
+      open:                         çç(opts.open, false),
+      visible:                      çç(opts.visible, true),
+      loading:                      çç(opts.loading, false),
+      disabled:                     çç(opts.disabled, false),
+      resizable:                    çç(opts.resizable, false),
+      closewhenshowviewportcontent: çç(opts.closewhenshowviewportcontent, true),
+    };
+
+    this.setService(opts.service || this);
+
+    if (opts.internalComponent) {
+      this.setInternalComponent(opts.internalComponent);
+    }
+
+    merge(this, opts);
+
+    // add events options
+    this.events = çç(opts.events, {});
+
+    if (this.events.open) {
+      const { when = "after", cb = () => {} } = this.events.open;
+      this[`on${when}`]('setOpen', bool => cb(bool));
+    }
+
+    if (opts.vueComponentObject) {
+      this.init(opts);
+    }
+  }
+
+  /**
+   * @param { Object } opts
+   * @param { Array } opts.components
+   * @param { Object } opts.service
+   * @param { Function } opts.service.init
+   * @param opts.vueComponentObject
+   * @param opts.template
+   * @param opts.propsData
+   */
+  init(opts = {}) {
+    this.vueComponent = _cloneDeep(opts.vueComponentObject);
+    this._components  = opts.components || [];
+
+    this.setService(opts.service || this._service || noop);
+
+    if (this._service.init && this.init !== this._service.init) {
+      this._service.init(opts);
+    }
+
+    if (opts.template) {
+      this.vueComponent.template = opts.template;
+    }
+
+    this.setInternalComponent = function() {
+      this.internalComponent = new (Vue.extend(this.vueComponent))({
+        service: this._service,
+        template: opts.template,
+        propsData: opts.propsData
+      });
+      this.internalComponent.state = this.getService().state;
+    };
+
+    this.setInternalComponent();
+
+    return this;
+  }
+
+  getId() {
+    return this.id;
+  }
+
+  setId(id) {
+    this.id = id;
+  }
+
+  getOpen() {
+    return this.state.open;
+  }
+
+  closeWhenViewportContentIsOpen() {
+    return this.getOpen() && this.state.closewhenshowviewportcontent;
+  }
+
+  getVisible() {
+    return this.state.visible;
+  }
+
+  getTitle() {
+    return this.state.title;
+  }
+
+  setTitle(title) {
+    this.state.title = title;
+  }
+
+  getService() {
+    return this._service;
+  }
+
+  setService(service) {
+    this._service = service;
+  }
+  addComponent(Component) {
+    this._components.push(Component);
+  }
+
+  removeComponent(Component) {
+    this._components.find((c, i) => {
+      if (c === Component) {
+        this.splice(i, 1);
+        return true;
+      }
+    })
+  }
+
+  getInternalComponent() {
+    return this.internalComponent;
+  }
+
+  setInternalComponent(internalComponent, options={}) {
+    this.internalComponent = undefined === internalComponent && this.internalComponentClass ? new this.internalComponentClass : internalComponent;
+    (options.events || [])
+      .forEach(e => this.internalComponent.$on(e.name, data => e.handler && e.handler(data) || this[`set${capitalize_first_letter(e.name)}`](data)));
+    if (this._service && this._service.state) {
+      this.internalComponent.state = this._service.state;
+    }
+  }
+
+  /**
+   * @param { Element | 'string' } parent DOM element
+   * @param { boolean } append
+   *  
+   * @returns jquery promise
+   * 
+   * @fires internalComponent~ready
+   * @fires mount event
+   */
+  mount(parent, append) {
+    const d = $.Deferred();
+
+    if (!this.internalComponent) {
+      this.setInternalComponent();
+    }
+
+    if (append) {
+      $(parent).append(this.internalComponent.$mount().$el);
+    }
+    
+    if (!append){
+      this.internalComponent.$mount(parent);
+    }
+
+    this.internalComponent.$nextTick(() => {
+      $(parent).localize();
+      this.emit('ready');
+      d.resolve(true);
+    });
+
+    // emit mount event
+    this.emit('mount');
+
+    return d.promise();
+  }
+
+  /**
+   * @returns jquery promise
+   * 
+   * @fires unmount
+   */
+  unmount() {
+    if (!this.internalComponent) {
+      return resolve();
+    }
+    if (this.state.resizable) {
+      this.internalComponent.$off('resize-component', this.internalComponent.layout);
+    }
+    this.state.open = false;
+    this.internalComponent.$destroy(true);  // destroy vue component
+    $(this.internalComponent.$el).remove(); // remove dom element
+    this.internalComponent = null;          // set internal componet to null (for GC)
+    this.emit('unmount');                   // emit unmount event
+    return resolve();
+  }
+
+  /**
+   * @returns { Element } DOM element
+   */
+  ismount() {
+    return this.internalComponent && this.internalComponent.$el;
+  }
+
+  /**
+   * @param { number } width 
+   * @param { number } height 
+   * 
+   * @listens internalComponent~resize-component
+   * @fires internalComponent~resize-component
+   * @fires layout
+   */
+  layout(width, height) {
+    if (this.state.resizable && this._firstLayout) {
+      this.internalComponent.$on('resize-component', this.internalComponent.layout);
+      this._firstLayout = false;
+    }
+    this.internalComponent.$nextTick(() => { this.internalComponent.$emit('resize-component', { width, height }); });
+    this.emit('layout');
+  }
+
+}
+
+/**
+ * @deprecated since 3.10.0 Will be deleted in 4.x.
+ */
+Object.assign(Component.prototype, {
+  _setOpen:                          noop,
+  _setVisible:                       noop,
+  _reload:                           noop,
+  destroy:                           noop,
+  click:                             noop,
+  show:                              noop,
+  setComponents:                     deprecate(function(c) { this._components = Array.isArray(c) ? c: []; }, '[G3W-CLIENT] Component::setComponents(components) is deprecated'),
+  setInternalComponentTemplate:      deprecate(function(t) { t && (this.vueComponent.template = t); }, '[G3W-CLIENT] Component::setInternalComponentTemplate(template) is deprecated'),
+  getInternalTemplate:               deprecate(function() { return this.vueComponent.template; }, '[G3W-CLIENT] Component::getInternalTemplate() is deprecated'),
+  insertComponentAt:                 deprecate(function(i, c) { this._components.splice(i, 0, c); }, '[G3W-CLIENT] Component::insertComponentAt(index, Component) is deprecated'),
+  removeCompomentAt:                 deprecate(function(i) { this._components.splice(i, 1); }, '[G3W-CLIENT] Component::removeCompomentAt(index) is deprecated'),
+  exendComponents:                   deprecate(function(c) { _.merge(this._components, c); }, '[G3W-CLIENT] Component::exendComponents(components) is deprecated'),
+  addInternalComponentData:          deprecate(function(d) { _.merge(this.internalComponent, d) }, '[G3W-CLIENT] Component::addInternalComponentData(data) is deprecated'),
+  handleEventsComponent:             deprecate(function() { this.events.open && this['on' + (this.events.open || 'after')]('setOpen', b => (this.events.open.cb || (() => {}))(b)); }, '[G3W-CLIENT] Component::handleEventsComponent() is deprecated'),
+  popComponent:                      deprecate(function() { return this._components.pop(); }, '[G3W-CLIENT] Component::popComponent() is deprecated'),
+  overwriteServiceMethod:            deprecate(function(n, m) { this._service[n] = m; }, '[G3W-CLIENT] Component::overwriteServiceMethod(methodName, method) is deprecated'),
+  extendInternalComponentMethods:    deprecate(function(m) { m && Object.entries(m).forEach(([k, v]) => (!(v instanceof Function)) && delete m[k]); merge(this.vueComponent.methods, m); }, '[G3W-CLIENT] Component::extendInternalComponentMethods(methods) is deprecated'),
+  extendInternalComponentComponents: deprecate(function(c) { c && merge(this.vueComponent.components, c); }, '[G3W-CLIENT] Component::extendInternalComponentComponents(components) is deprecated'),
+  extendComponents:                  deprecate(function(c) { this.extendInternalComponentComponents(c); }, '[G3W-CLIENT] Component::extendComponents(components) is deprecated'),
+  extendInternalComponentComputed:   deprecate(function(c) { c && Object.entries(c).forEach(([k, v]) =>  (!(v instanceof Function)) && delete c[k]); merge(this.vueComponent.computed, c); }, '[G3W-CLIENT] Component::extendInternalComponentComputed(computed) is deprecated'),
+  extendService:                     deprecate(function(o) { this._service && merge(this._service, serviceOptions); }, '[G3W-CLIENT] Component::extendService(serviceOptions) is deprecated'),
+  createVueComponent:                deprecate(function(o) { return _cloneDeep(o); }, '[G3W-CLIENT] Component::createVueComponent(vueObjOptions) is deprecated'),
+  closeWhenViewportContentIsOpen:    deprecate(function() { return this.getOpen() && this.state.closewhenshowviewportcontent; }, '[G3W-CLIENT] Component::closeWhenViewportContentIsOpen() is deprecated'),
+  /** used by the following plugins: "cadastre", "iternet" */
+  overwriteServiceMethods:           deprecate(function(o) { Object.entries(o).forEach(([n, m]) => this._service[n] = m) }, '[G3W-CLIENT] Component::overwriteServiceMethods(methodsOptions) is deprecated'),
+  /** used by the following plugins: "cadastre" */
+  extendInternalComponent:           deprecate(function(o) { this.vueComponent ? Object.entries(o).forEach(([k, v]) => { switch (k) { case 'methods': this.extendInternalComponentMethods(v); break; case 'components': this.extendInternalComponentComponents(v); break; case 'computed':   merge(this.vueComponent[k], v); break; case 'data': merge(this.vueComponent[k], v); break; } }): (this.vueComponent = o); }, '[G3W-CLIENT] Component::extendInternalComponent(internalComponentOptions) is deprecated'),
+});
\ No newline at end of file
diff --git a/src/app/core/g3w-object.js b/src/app/core/g3w-object.js
new file mode 100644
index 000000000..7c22c26a2
--- /dev/null
+++ b/src/app/core/g3w-object.js
@@ -0,0 +1,265 @@
+import { noop }     from 'utils/noop';
+import { debounce } from 'utils/debounce';
+import { throttle } from 'utils/throttle';
+
+/**
+ * Mimics the behavior of child class fields in parent class,
+ * which is the only way to define a property (eg `this.setters = { ... }`)
+ * before invoking the `super()` constructor.
+ * 
+ * @TODO upgrade babel version in order to declare `setters`, `throttles` `debounces` as class fields
+ * 
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields
+ */
+function defineClassField(obj, key, cb, initVal) {
+  // The Field is already available within parent constructor
+  // in case of ES5 inheritance (i.e. `inherit(ChildClass, G3WObject);`)
+  if (initVal) {
+    return cb.call(obj, initVal);
+  }
+  // The Field is not available within parent constructor
+  // in case ES6 inheritance (i.e. `class ChildClass extends G3WObject { };`);
+  // I.e
+  // class A extends G3WObject {
+  //   constructor() {
+  //     super();
+  //     this.setters = {
+  //       foo() {},
+  //       bar() {},
+  //     };
+  //   }
+  // }
+  let currVal = initVal;
+  return Object.defineProperty(obj, key, {
+    get() { return currVal; },
+    set(value) {
+      currVal = value;
+      if (value) { cb.call(obj, value); }
+    },
+  });
+}
+
+/**
+ * Base object to handle a setter and its listeners.
+ */
+export default class G3WObject extends EventEmitter {
+
+  constructor(opts) {
+    super(opts);
+
+    opts = opts || {};
+
+    // Register the chain of events
+
+    defineClassField(this, 'setters',   this._setupListenersChain, opts.setters   || this.setters);
+    defineClassField(this, 'throttles', this._setupThrottles,      opts.throttles || this.throttles);
+    defineClassField(this, 'debounces', this._setupDebounces,      opts.debounces || this.debounces);
+  }
+
+  /**
+   * Attach an event listener after executing a setter method
+   * 
+   * @param {string}   setter   - function name to listen for 
+   * @param {function} listener - event listener (sync)
+   * @param {number}   priority - priority (lowest value executes first)
+   */
+  onafter(setter, listener, priority) {
+    return this._onsetter('after', setter, listener, false, priority);
+  }
+
+  /**
+   * Attach an event listener after executing a setter method (once)
+   * 
+   * @param {string}   setter   - function name to listen for 
+   * @param {function} listener - event listener (sync)
+   * @param {number}   priority - priority (lowest value executes first)
+   */
+  onceafter(setter, listener, priority) {
+    return this._onsetter('after', setter, listener, false, priority, true);
+  }
+
+  /**
+   * Attach an event listener before executing a setter method
+   * 
+   * @param {string}   setter   - function name to listen for
+   * @param {function} listener - event listener (sync)
+   * @param {number}   priority - priority (lowest value executes first)
+   */
+  onbefore(setter, listener, priority) {
+    return this._onsetter('before', setter, listener, false, priority);
+  }
+
+  /**
+   * Attach an event listener before executing a setter method (once)
+   * 
+   * @param {string}   setter   - function name to listen for
+   * @param {function} listener - event listener (sync)
+   * @param {number}   priority - priority (lowest value executes first)
+   */
+  oncebefore(setter, listener, priority) {
+    return this._onsetter('before', setter, listener, false, priority, true);
+  }
+
+  /**
+   * Attatch an event listener before executing a setter method (once)
+   * 
+   * @param {string}   setter   - function name to listen for
+   * @param {function} listener - event listener (async)
+   * @param {number}   priority - priority (lowest value executes first)
+   */
+  onbeforeasync(setter, listener, priority) {
+    return this._onsetter('before', setter, listener, true, priority);
+  }
+
+  /**
+   *  Loop each settersListeners (array) and find a setter key (before/after) to be removed
+   */
+  un(setter, key) {
+    Object.entries(this.settersListeners)
+      .forEach(([_key, setters]) => {
+        if (undefined === key) {
+          setters[setter].splice(0);
+        } else {
+          setters[setter].forEach((listener, idx) => { listener.key === key && setters[setter].splice(idx, 1); })
+        }
+      });
+  };
+
+/**
+  * Register and handle <before/after> listeners
+  * 
+  * @param { 'before' | 'after' } when
+  * @param { Function } setter
+  * @param { Object } listener
+  * @param { Boolean } async
+  * @param { Number } priority
+  * @param { Boolean }   once
+  */
+  _onsetter(when, setter, listener, async, priority = 0, once = false) {
+    // unique listenerKey
+    let key;
+    // check if setter function is registered
+    // and then add an info object to setter listeners
+    // (sorted based on priority)
+    if (this.settersListeners && undefined !== this.settersListeners[when][setter]) {
+      key = `${Math.floor(Math.random() * 1000000) + Date.now()}`;
+      this.settersListeners[when][setter].push({ key, fnc: listener, async, priority, once});
+      this.settersListeners[when][setter] = _.sortBy(this.settersListeners[when][setter], listener => listener.priority);
+    }
+    return key // in case of no setter register return undefined listenerKey
+  }
+
+  /**
+   * @returns {Promise}
+   */
+  _setupListenersChain(setters) {
+
+    // all methods inside object "setters" of child class.
+    this.settersListeners = {
+      after:  {},
+      before: {},
+    };
+
+    for (const setter in setters) {
+
+      // Array to push before and after subscribers
+      this.settersListeners.after[setter]  = [];
+      this.settersListeners.before[setter] = [];
+
+      // assign the property setter name to the object as own method
+      this[setter] = function(...args) {
+
+        // listener count
+        let count = 0;
+
+        const deferred = $.Deferred();
+
+        /**
+         *
+         * @param {undefined | Boolean} bool
+         */
+        const next = (bool) => {
+          //check if it needs to skip (exit)
+          const skip  = _.isBoolean(bool) ? !bool : false;
+          //get count of before subscribers on setter function
+          const len = this.settersListeners.before[setter].length;
+
+          // abort in case of error bool false,
+          // or we reached the end of onbefore subscriber
+          if (skip) {
+            (_.isFunction(setters[setter]) ? noop : (setters[setter].fallback || noop)).apply(this, args);
+            deferred.reject();
+            return;
+          }
+
+          // call complete method methods and check what returns
+          if (count === len) {
+            // run setter function (resolve promise)
+            deferred.resolve((_.isFunction(setters[setter]) ? setters[setter] : setters[setter].fnc).apply(this, args));
+            // call all subscribed methods after setter
+            const onceListeners = [];
+            this
+              .settersListeners
+              .after[setter]
+              .forEach(listener => {
+                listener.fnc.apply(this, args);
+                if (listener.once) {
+                  onceListeners.push(listener.key);
+                }
+              });
+            onceListeners.forEach(key => this.un(setter, key));
+            this.emitEvent(`set:${setter}`, args);
+          }
+          // still call an onbefore listener subscribers
+          if (count < len) {
+            //get on before listener subscribes and increment count to 1
+            const listener = this.settersListeners.before[setter][count++];
+            //check if it is async
+            if (listener.async) {
+              // add function next to argument of listener function
+              args.push(next);
+              listener.fnc.apply(this, args)
+            } else {
+              // return or undefined or a boolean to tell if ok(true) can continue or not (false)
+              next(listener.fnc.apply(this, args));
+            }
+            //in case of listener subscribe function need to run just one time
+            // after call remove it from listeners
+            if (listener.once) {
+              this.settersListeners.before[setter].splice(count - 1, 1);
+            }
+          }
+
+        };
+
+        // run all the subscribers and setters
+        next(true);
+
+        return deferred.promise();
+      }
+
+    }
+    return this.settersListeners;
+  }
+
+  _setupDebounces(debounces) {
+    for (const name in debounces) {
+      this[name] = debounce(debounces[name].fnc, debounces[name].delay);
+    }
+  }
+
+  _setupThrottles(throttles) {
+    for (const name in throttles) {
+      this[name] = throttle(throttles[name].fnc, throttles[name].delay);
+    }
+  }
+
+  get(key) {
+    return this[key] && !(this[key] instanceof Function) ? this[key] : null;
+  }
+
+  set(key, value) {
+    this[key] = value;
+  }
+
+};
\ No newline at end of file
diff --git a/src/app/core/g3w-panel.js b/src/app/core/g3w-panel.js
new file mode 100644
index 000000000..aef2f3ef3
--- /dev/null
+++ b/src/app/core/g3w-panel.js
@@ -0,0 +1,92 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import GUI         from 'services/gui';
+import G3WObject   from 'core/g3w-object';
+import { resolve } from 'utils/resolve';
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/panel.js@v3.9.3 
+ */
+export default class Panel extends G3WObject {
+
+  constructor (opts = {}) {
+    super();
+
+    this.id      = opts.id || null;
+
+    this.title   = opts.title || '';
+
+    this.service = opts.service;
+
+    if (opts.vueComponentObject) {
+      this.internalPanel = new (Vue.extend(opts.vueComponentObject))({ service: this.service });
+    } else {
+      this.internalPanel = opts.panel || opts.internalPanel || null;  
+    }
+
+    if (true === opts.show && this.internalPanel) {
+      this.show();
+    }
+  }
+
+  getId() {
+    return this.id;
+  }
+
+  getTitle() {
+    return this.title;
+  }
+
+  getService() {
+    return this.service;
+  }
+
+  setService(service) {
+    this.service = service;
+  }
+
+  getInternalPanel() {
+    return this.internalPanel;
+  }
+
+  setInternalPanel(internalPanel) {
+    this.internalPanel = internalPanel;
+  }
+
+  show() {
+    GUI.showPanel(this);
+  }
+
+  close() {
+    GUI.closePanel();
+  }
+
+  mount(parent) {
+    const panel = this.internalPanel;
+    const vueComp = panel.$mount();
+    $(parent).append(vueComp.$el);
+    vueComp.$nextTick(() => {
+      $(parent).localize();
+      if (panel.onShow) { panel.onShow();}
+    });
+    return resolve(true);
+  }
+
+  unmount() {
+    const panel = this.internalPanel;
+    panel.$destroy(true);
+    $(panel.$el).remove();
+    if (panel.onClose) { panel.onClose();}
+    this.internalComponent = null;
+    if (this.service && this.service.clear) {
+      this.service.clear();
+    }
+    return resolve();
+  }
+
+  onResize(parentWidth,parentHeight) {}
+
+}
\ No newline at end of file
diff --git a/src/app/core/g3wobject.js b/src/app/core/g3wobject.js
index fd30742c6..4fb4c686e 100644
--- a/src/app/core/g3wobject.js
+++ b/src/app/core/g3wobject.js
@@ -1,214 +1,7 @@
-const { inherit, noop, debounce, throttle } = require('utils');
-
-/**
- * Base object to handle a setter and its listeners.
- * @constructor
- */
-const G3WObject = function() {
-  //check if setters property is set. Register the chain of events
-  this.setters && this._setupListenersChain(this.setters);
-  // check debounces
-  this.debounces && this._setupDebounces(this.debounces);
-  //check throttles
-  this.throttles && this._setupThrottles(this.throttles);
-};
-
-inherit(G3WObject, EventEmitter);
-
-const proto = G3WObject.prototype;
-
 /**
- * Insert a listener on afeter setter was executed
- * @param {string} setter - IMethod name to register a listener function
- * @param {function} listener - listener function (only syncron)
- * @param {number} priority - Priorità di esecuzione: valore minore viene eseuito prima
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
  */
-proto.onafter = function(setter, listener, priority){
-  return this._onsetter('after', setter, listener, false, priority);
-};
-
-proto.onceafter = function(setter, listener, priority){
-  return this._onsetter('after', setter, listener, false, priority, true);
-};
-
-/**
- * Listern before cal sesster
- * @param {string} setter - Method name setter
- * @param {function} listener - function to call
- * @param {number} priority - Priority
- */
-proto.onbefore = function(setter, listener, priority) {
-  return this._onsetter('before', setter, listener, false, priority);
-};
-
-// once before
-proto.oncebefore = function(setter, listener, priority){
-  return this._onsetter('before', setter, listener, false, priority, true);
-};
-
-/**
- * @param {string} setter - Method name setter
- * @param {function} listener - function to call
- * @param {number} priority - Priority
- */
-proto.onbeforeasync = function(setter, listener, priority) {
-  return this._onsetter('before', setter, listener, true, priority);
-};
-
-proto.un = function(setter, key) {
-  // cicle on after before (key) and for each settersListeners (array) find key
-  Object.entries(this.settersListeners).forEach(([_key, settersListeners]) => {
-    if (key === undefined) settersListeners[setter].splice(0);
-    else settersListeners[setter].forEach((setterListener, idx) => {
-      if (setterListener.key === key) {
-        settersListeners[setter].splice(idx, 1);
-      }
-    })
-  });
-};
-
-// base function to register and handle on<before/after> setter listeners
-/*
-  when=before|after,
-  type=sync|async
-*/
-proto._onsetter = function(when, setter, listener, async, priority=0, once=false) {
-  let listenerKey;
-  // check if setter function is register.
-  if (typeof this.settersListeners[when][setter] !== "undefined") {
-    // set unique listenerKey value
-    listenerKey = `${Math.floor(Math.random()*1000000) + Date.now()}`;
-    // add info object to setters listeners
-    this.settersListeners[when][setter].push({
-      key: listenerKey,
-      fnc: listener,
-      async,
-      priority,
-      once
-    });
-    // set lineners base on priority
-    this.settersListeners[when][setter] = _.sortBy(this.settersListeners[when][setter], setterListener => setterListener.priority);
-  }
-  // return key
-  return listenerKey // in case of no setter register return undefined listerKey
-};
-
-proto._setupListenersChain = function(setters) {
-  // initialize all methods inside object "setters" of child class.
-  this.settersListeners = {
-    after: {},
-    before: {}
-  };
-  for (const setter in setters) {
-    const setterOption = setters[setter];
-    let setterFnc = noop;
-    let setterFallback = noop;
-    if (_.isFunction(setterOption)) setterFnc = setterOption;
-    else {
-      setterFnc = setterOption.fnc;
-      setterFallback = setterOption.fallback || noop; // method called in case of error
-    }
-    // create array to push before and after subscribers
-    this.settersListeners.after[setter] = [];
-    this.settersListeners.before[setter] = [];
-    // assign the property settern name to the object as own method
-    this[setter] = function(...args) {
-      const deferred = $.Deferred();
-      let returnVal = null;
-      let counter = 0;
-      // function to call original function(setter function)
-      const callSetter = () => {
-        // run setter function
-        returnVal = setterFnc.apply(this, args);
-        // resolve promise
-        deferred.resolve(returnVal);
-        //call all subscribed methods afet setter
-        const onceListenerKeys = [];
-        const afterListeners = this.settersListeners.after[setter];
-        afterListeners.forEach(listener => {
-          listener.fnc.apply(this, args);
-          listener.once && onceListenerKeys.push(listener.key);
-        });
-        onceListenerKeys.forEach(key => this.un(setter, key));
-      };
-      //  abort function
-      const abort = () => {
-        setterFallback.apply(this, args);
-        deferred.reject();
-      };
-      // get all before listeners functions of setter
-      const beforeListeners = this.settersListeners['before'][setter];
-      // listener counter
-      counter = 0;
-      const next = bool => {
-        // initilize cont to true (continue)
-        let cont = true;
-        // check if bool is Boolean
-        if (_.isBoolean(bool)) cont = bool;
-        // check if count is false or we are arrived to the end of onbefore subscriber
-        if (cont === false) {
-            // found an error so we can abort
-            abort.apply(this, args);
-        } else if (counter === beforeListeners.length) {
-          // call complete method methods
-          const completed = callSetter();
-          //verifico che cosa ritorna
-          if (completed === undefined || completed === true) {
-            this.emitEvent(`set:${setter}`,args);
-          }
-        } else if (cont) {
-          const listenerObj = beforeListeners[counter];
-          const currentCounter = counter;
-          // if is async functtion
-          if (beforeListeners[counter].async) {
-            //add function next to argument of listnerFunction
-            args.push(next);
-            // update counter
-            counter += 1;
-            listenerObj.fnc.apply(this, args)
-          } else {
-            // return or undefine or a boolen to tell if ok(true) can conitnue or not (false)
-            const bool = listenerObj.fnc.apply(this, args);
-            //update counter
-            counter += 1;
-            next(bool);
-          }
-          listenerObj.once && beforeListeners.splice(currentCounter, 1);
-        }
-      };
-      // run next to start to run all the subscribers and setrer its self
-      next();
-      // retun a promise
-      return deferred.promise();
-    }
-  }
-  return this.settersListeners
-};
-
-proto._setupDebounces = function(debounces) {
-  for (const name in debounces) {
-    const delay = debounces[name].delay;
-    const fnc = debounces[name].fnc;
-    this[name] = debounce(fnc, delay);
-  }
-};
-
-proto._setupThrottles = function(throttles) {
-  for (const name in throttles) {
-    const delay = throttles[name].delay;
-    const fnc = throttles[name].fnc;
-    this[name] = throttle(fnc, delay);
-  }
-};
-
-//method get
-proto.get = function(key) {
-  return this[key] && !(this[key] instanceof Function) ? this[key] : null;
-};
-
-//method set
-proto.set = function(key, value) {
-  this[key] = value;
-};
 
-module.exports = G3WObject;
+import G3WObject from 'core/g3w-object';
+module.exports = G3WObject;
\ No newline at end of file
diff --git a/src/app/core/i18n/i18n.service.js b/src/app/core/i18n/i18n.service.js
index 2c1788a0b..6a62c3191 100755
--- a/src/app/core/i18n/i18n.service.js
+++ b/src/app/core/i18n/i18n.service.js
@@ -34,8 +34,7 @@ function init(config) {
 
 }
 const getAppLanguage = function() {
-  const config = ApplicationService.getConfig();
-  return config.user.i18n || "en";
+  return ApplicationService.getConfig().user.i18n || "en";
 };
 
 
@@ -50,9 +49,7 @@ const tPlugin = function(text) {
 };
 
 const tPrefix = function(filter) {
-  return function(text) {
-    return i18next.t(`${filter}.${text}`);
-  }
+  return (text) => i18next.t(`${filter}.${text}`);
 };
 
 const addI18nPlugin = function({name, config}) {
diff --git a/src/app/core/layers/features/featuresstore.js b/src/app/core/layers/features/featuresstore.js
index c7e519805..dab3cf0d9 100644
--- a/src/app/core/layers/features/featuresstore.js
+++ b/src/app/core/layers/features/featuresstore.js
@@ -1,11 +1,11 @@
 const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject         = require('core/g3wobject');
 
 /** @deprecated */
-const _cloneDeep = require('lodash.clonedeep');
+const _cloneDeep        = require('lodash.clonedeep');
 
 // Object to store and handle features of layer
-function FeaturesStore(options={}) {
+function FeaturesStore(options = {}) {
   this._features = options.features || [];
   this._provider = options.provider || null;
   this._loadedIds = []; // store locked ids
@@ -13,9 +13,7 @@ function FeaturesStore(options={}) {
   //setters
   this.setters = {
     addFeatures(features) {
-      features.forEach(feature => {
-        this._addFeature(feature);
-      })
+      features.forEach(feature => this._addFeature(feature))
     },
     addFeature(feature) {
       this._addFeature(feature);
@@ -64,9 +62,7 @@ proto.getProvider = function() {
 proto.unlock = function() {
   const d = $.Deferred();
   this._provider.unlock()
-    .then(response => {
-      d.resolve(response)
-    })
+    .then(response => d.resolve(response))
     .fail(err => d.reject(err));
   return d.promise();
 };
@@ -94,13 +90,13 @@ proto._getFeatures = function(options={}) {
 proto._filterFeaturesResponse = function(options={}) {
   /**
    * get features returned from server and feature that are currently locked.
-   * If featurelocks are less that a features, it means that other user is editing these feature
+   * If featurelocks are less than features, it means that another user is editing these features
    * @type {*[]}
    */
-  const {features=[], featurelocks=[]} = options;
+  const { features = [], featurelocks = [] } = options;
 
-  //if no features locks mean all feature request are locked by another user
-  if (featurelocks.length === 0) {
+  //if no features locks mean all feature requests are locked by another user
+  if (0 === featurelocks.length) {
     //if there are feature on response are locked
     if (features.length > 0) {
       this.featuresLockedByOtherUser(features);
@@ -144,7 +140,7 @@ proto._filterFeaturesResponse = function(options={}) {
  * {featureid: "1", lockid: "6bbab1c1c03332fb39b8ffae35e557ba"}
  * @private
  */
-proto._filterLockIds = function(featurelocks=[]) {
+proto._filterLockIds = function(featurelocks = []) {
   const _lockIds = this._lockIds.map(lockid => lockid.featureid);
   const toAddLockId = featurelocks.filter(featurelock => _lockIds.indexOf(featurelock.featureid) === -1);
   this._lockIds = [...this._lockIds, ...toAddLockId];
@@ -177,7 +173,8 @@ proto._commit = function(commitItems) {
   const d = $.Deferred();
   if (commitItems && this._provider) {
     commitItems.lockids = this._lockIds;
-    this._provider.commit(commitItems)
+    this._provider
+      .commit(commitItems)
       .then(response => d.resolve(response))
       .fail(err => d.reject(err))
   } else d.reject();
@@ -186,11 +183,11 @@ proto._commit = function(commitItems) {
 
 // get feature from id
 proto.getFeatureById = function(featureId) {
-  return this._features.find(feature => feature.getId() == featureId);
+  return this._features.find(feature => featureId == feature.getId());
 };
 
 proto.getFeatureByUid = function(uid) {
-  return this._features.find(feature => feature.getUid() === uid);
+  return this._features.find(feature => uid === feature.getUid());
 };
 
 proto._addFeature = function(feature) {
diff --git a/src/app/core/layers/features/olfeaturesstore.js b/src/app/core/layers/features/olfeaturesstore.js
index d53b2ba4d..e0b983313 100644
--- a/src/app/core/layers/features/olfeaturesstore.js
+++ b/src/app/core/layers/features/olfeaturesstore.js
@@ -1,5 +1,5 @@
 const { inherit, base } = require('utils');
-const FeaturesStore = require('core/layers/features/featuresstore');
+const FeaturesStore     = require('core/layers/features/featuresstore');
 
 // Storage of the feature in vector layer
 function OlFeaturesStore(options={}) {
@@ -29,11 +29,11 @@ proto.getFeaturesCollection = function() {
 };
 
 proto.getFeatureById = function(featureId) {
-  return this._features.getArray().find(feature => feature.getId() == featureId);
+  return this._features.getArray().find(feature => featureId == feature.getId());
 };
 
 proto.getFeatureByUid = function(uid) {
-  return this._features.getArray().find(feature => feature.getUid() === uid);
+  return this._features.getArray().find(feature => uid === feature.getUid());
 };
 
 proto._addFeature = function(feature) {
@@ -42,7 +42,7 @@ proto._addFeature = function(feature) {
   this._features.dispatchEvent('change')
 };
 
-//sobtitute the feature after modify
+//substitute the feature after modifying
 proto._updateFeature = function(feature) {
   // set index at -1
   let index = -1;
diff --git a/src/app/core/layers/filter/expression.js b/src/app/core/layers/filter/expression.js
index 870f6f42a..7042a9560 100644
--- a/src/app/core/layers/filter/expression.js
+++ b/src/app/core/layers/filter/expression.js
@@ -1,170 +1,141 @@
-import { FILTER_EXPRESSION_OPERATORS as OPERATORS } from 'app/constant';
+import { FILTER_EXPRESSION_OPERATORS } from 'app/constant';
 
 //Expression
-function Expression(options={}) {
-  this._layerName = options.layerName;
-  const filter = options.filter;
-  this._expression = filter &&  filter ||  '';
-}
-
-const proto = Expression.prototype;
-
-proto.and = function(field, value) {
-  this._expression = this._expression ? this._expression + ' AND ': this._expression;
-  if (field && value) {
-    this.eq(field, value);
-  }
-  return this;
-};
-
-proto.or = function() {
-  if (field && value) {
-    this._expression = this._expression ? this._expression + ' OR ' : this._expression;
-    this.eq(field, value);
-  }
-  return this;
-};
-
-proto.eq = function (field, value) {
-  this._expression = this._expression + this._build('eq', field, value);
-  return this;
-};
-
-proto.like = function(field, value) {
-  this._expression = this._expression + this._build('LIKE', field, value);
-  return this;
-};
-
-proto.ilike = function(field, value) {
-  this._expression = this._expression + this._build('ILIKE', field, value);
-  return this;
-};
-
-proto.not = function(field, value) {
-  this._expression = this._expression + this._build('NOT', field, value);
-  return this;
-};
-
-proto.gt = function(field, value) {
-  this._expression = this._expression + this._build('gt', field, value);
-  return this;
-};
-
-proto.gte = function(field, value) {
-  this._expression = this._expression + this._build('gte', field, value);
-  return this;
-};
-
-proto.lt = function(field, value) {
-  this._expression = this._expression + this._build('lt', field, value);
-  return this;
-};
-
-proto.lte = function(field, value) {
-  this._expression = this._expression + this._build('lte', field, value);
-  return this;
-};
-
-proto.clear = function() {
-  this._expression = '';
-  return this;
-};
-
-// get expression method to get the realt value of the expression
-proto.get = function() {
-  return this._layerName ? `${this._layerName}: ${this._expression}`: this._expression;
-};
-
-proto._build = function(operator, field, value) {
-  return [`"${field}"`, OPERATORS[operator], `${value}`].join(' ');
-};
-
-proto.createSingleExpressionElement = function({value, attribute, operator, logicop}={}){
-  let filterElement;
-  const valueExtra = (operator === 'LIKE' || operator === 'ILIKE')  ? "%": "";
-  const filterOp = OPERATORS[operator];
-  const filterLogicOperator = logicop && ` ${logicop} ` || '';
-  if (operator === 'IN') {
-    const _value = Array.isArray(value) ? value : [value];
-    const filterValue = `( ${_value.map(value => `'${value}'`).join(',').replace(/,/g, ' , ')} )`;
-    filterElement = `"${attribute}" ${filterOp} ${filterValue}${filterLogicOperator}`;
-  } else if (
-    (value !== null && value !== undefined)
-    && !(Number.isNaN(value) || !value.toString().trim()) //check if a valid number (not a NaN and not an empty string)
-  ) {
-    const singolequote = Array.isArray(value) ? value :
-      typeof value !== 'number' ? value.split("'") : [];
-    if (singolequote.length > 1) {
-      const _filterElements = [];
-      for (let i = 0; i < singolequote.length; i++) {
-        const value = singolequote[i];
-        if (!value)
-          continue;
-        const filterValue = `%${value}%`.trim();
-        const filterElement = `"${attribute}" ${filterOp} '${filterValue}'`;
-        _filterElements.push(filterElement)
-      }
-      filterElement =  `${_filterElements.join(` ${logicop} `)}${filterLogicOperator}`;
-    } else filterElement = `"${attribute}" ${filterOp} '${valueExtra}${value}${valueExtra}'${filterLogicOperator}`;
-  }
-  return filterElement;
-};
-
-proto.createExpressionFromFilterObject = function(filter={}){
-  let filterElements = [];
-  let rootFilter;
-  for (const operator in filter) {
-    rootFilter = OPERATORS[operator];
-    const inputs = filter[operator];
-    inputs.forEach((input) => {
-      for (const operator in input) {
-        const value = input[operator];
-        if (Array.isArray(value)) {
-          this.createExpressionFromFilterObject(input);
-        } else {
-          const field = input[operator];
-          for (const attribute in field) {
-            const value = field[attribute];
-            const fieldElement = this.createSingleExpressionElement({
-              value,
-              operator,
-              attribute
-            });
-            filterElements.push(fieldElement);
+module.exports = class Expression {
+  
+  constructor(options={}) {
+    this._layerName  = options.layerName;
+    this._expression = options.filter || '';
+  }
+
+  and(field, value) {
+    this._expression = this._expression ? this._expression + ' AND ': this._expression;
+    if (field && value) {
+      this.eq(field, value);
+    }
+    return this;
+  }
+
+  or(field, value) {
+    if (field && value) {
+      this._expression = this._expression ? this._expression + ' OR ' : this._expression;
+      this.eq(field, value);
+    }
+    return this;
+  }
+
+  eq(field, value) {
+    this._expression = this._expression + this._build('eq', field, value);
+    return this;
+  }
+
+  like(field, value) {
+    this._expression = this._expression + this._build('LIKE', field, value);
+    return this;
+  };
+
+  ilike(field, value) {
+    this._expression = this._expression + this._build('ILIKE', field, value);
+    return this;
+  }
+
+  not(field, value) {
+    this._expression = this._expression + this._build('NOT', field, value);
+    return this;
+  }
+
+  gt(field, value) {
+    this._expression = this._expression + this._build('gt', field, value);
+    return this;
+  }
+
+  gte(field, value) {
+    this._expression = this._expression + this._build('gte', field, value);
+    return this;
+  }
+
+  lt(field, value) {
+    this._expression = this._expression + this._build('lt', field, value);
+    return this;
+  }
+
+  lte(field, value) {
+    this._expression = this._expression + this._build('lte', field, value);
+    return this;
+  }
+
+  clear() {
+    this._expression = '';
+    return this;
+  }
+
+  // get expression method to get the realt value of the expression
+  get() {
+    return this._layerName ? `${this._layerName}: ${this._expression}`: this._expression;
+  }
+
+  _build(operator, field, value) {
+    return [`"${field}"`, FILTER_EXPRESSION_OPERATORS[operator], `${value}`].join(' ');
+  }
+
+  createSingleExpressionElement({ value, attribute, operator, logicop } = {}) {
+    const op    = FILTER_EXPRESSION_OPERATORS[operator];
+    const logic = logicop && ` ${logicop} ` || '';
+    
+    if ('IN' === operator) {
+      return `"${attribute}" ${op} ( ${ [].concat(value).map(v => `'${v}'`).join(',').replace(/,/g, ' , ') } )${logic}`;
+    }
+
+    const is_num = ![null, undefined].includes(value) && !(Number.isNaN(value) || !value.toString().trim()) //check if a valid number (not a NaN and not an empty string)
+    const vals   = (Array.isArray(value) ? value : ('number' !== typeof value ? value.split("'") : []));
+
+    if (is_num && vals.length > 1) {
+      return `${vals.filter(v => v).map(v => `"${attribute}" ${op} '%${v}%'`).join(` ${logicop} `)}${logic}`;
+    }
+
+    if (is_num) {
+      const like = ['LIKE', 'ILIKE'].includes(operator) ? "%": ""
+      return `"${attribute}" ${op} '${like}${value}${like}'${logic}`;
+    }
+  }
+
+  createExpressionFromFilterObject(filter={}) {
+    let filters = [];
+    let rootFilter;
+    for (const operator in filter) {
+      rootFilter = FILTER_EXPRESSION_OPERATORS[operator];
+      filter[operator].forEach((input) => {
+        for (const operator in input) {
+          if (Array.isArray(input[operator])) {
+            this.createExpressionFromFilterObject(input);
+          } else {
+            for (const attribute in input[operator]) {
+              filters.push(this.createSingleExpressionElement({ value: input[operator][attribute], operator, attribute }));
+            }
           }
         }
-      }
-    });
-    rootFilter = (filterElements.length > 0) ? filterElements.join(" "+ rootFilter + " ") : false;
-  }
-  return rootFilter;
-};
-
-proto.createExpressionFromField = function({layerName, field, value, operator='eq'}){
-  const filter = this.createSingleExpressionElement({
-    attribute: field,
-    value,
-    operator
-  });
-  this._expression = `${layerName}:${filter}`;
-  return this;
-};
-
-proto.createExpressionFromFilterArray = function(inputs=[]){
-  let filter = '';
-  // set logicop of last element to null
-  const inputsLength = inputs.length ? inputs.length - 1 : inputs.length;
-  inputs.forEach((input, index) => {
-    const filterElement = this.createSingleExpressionElement(input);
-    filter = `${filter}${(input.logicop && index === inputsLength) ? filterElement.substring(0, filterElement.length - (input.logicop.length+1)): filterElement}`;
-  });
-  return filter || undefined;
-};
-
-proto.createExpressionFromFilter = function(filter, layerName) {
-  const filterParam = Array.isArray(filter)  ? this.createExpressionFromFilterArray(filter) : this.createExpressionFromFilterObject(filter);
-  if (filterParam) this._expression = `${layerName}:${filterParam}`;
-  return this
-};
-
-module.exports = Expression;
+      });
+      rootFilter = filters.join(' ' + rootFilter + ' ') || false;
+    }
+    return rootFilter;
+  }
+
+  createExpressionFromField({layerName, field, value, operator='eq'}) {
+    this._expression = `${layerName}:${this.createSingleExpressionElement({ attribute: field, value, operator })}`;
+    return this;
+  }
+
+  createExpressionFromFilterArray(inputs=[]) {
+    return inputs.reduce((acc, input, i) => {
+      const filter = this.createSingleExpressionElement(input);
+    // set logicop of last element to null
+      return `${acc}${(input.logicop && i === inputs.length - 1) ? filter.substring(0, filter.length - (input.logicop.length + 1)) : filter}`;
+    }, '') || undefined;
+  }
+
+  createExpressionFromFilter(filter, layerName) {
+    const fparam = Array.isArray(filter) ? this.createExpressionFromFilterArray(filter) : this.createExpressionFromFilterObject(filter);
+    if (fparam) this._expression = `${layerName}:${fparam}`;
+    return this
+  }
+};
\ No newline at end of file
diff --git a/src/app/core/layers/filter/filter.js b/src/app/core/layers/filter/filter.js
index d0da46c85..e5632fc1c 100644
--- a/src/app/core/layers/filter/filter.js
+++ b/src/app/core/layers/filter/filter.js
@@ -1,78 +1,73 @@
 // class Filter to build filter
 // useful by provider providers to get data
-function Filter(config={}) {
-  this._filter = null;
-  this._type = null;
-  this.config = config;
-}
-
-const proto = Filter.prototype;
-
-/**
- * Config methods
- */
-
-proto.getConfig = function(){
-  return this.config;
-};
-
-proto.setConfig = function(config = {}){
-  this.config = config;
-};
-
-proto.mergeConfig = function(config={}){
-  this.config = {...this.config, ...config};
-};
-
-/***
- *  end config methods
- */
-
-proto.getAll = function() {
-  this._type = Filter.TYPES.all;
-  this._filter = null
-};
-
-// to create complex filter
-proto.setExpression = function(expression) {
-  this._type = Filter.TYPES.expression;
-  this._filter = expression;
-};
+class Filter {
+
+  constructor(config = {}) {
+    this._filter = null;
+    this._type = null;
+    this.config = config;
+  }
+
+  getConfig() {
+    return this.config;
+  }
+
+  setConfig(config = {}) {
+    this.config = config;
+  };
+
+  mergeConfig(config={}) {
+    this.config = {...this.config, ...config};
+  }
+
+  getAll() {
+    this._type = Filter.TYPES.all;
+    this._filter = null
+  };
+
+  // to create complex filter
+  setExpression(expression) {
+    this._type = Filter.TYPES.expression;
+    this._filter = expression;
+    return this;
+  }
+
+  setGeometry(geometry) {
+    this._type = Filter.TYPES.geometry;
+    this._filter = geometry;
+    return this;
+  }
+
+  setBBOX(bbox) {
+    this._type = Filter.TYPES.bbox;
+    this._filter = bbox;
+    return this;
+  };
+
+  setFids(ids) {
+    this._type = Filter.TYPES.fids;
+    this._filter = ids;
+    return this;
+  }
+
+  serialize() {
+    return JSON.stringify(this);
+  }
+
+  // get filter value
+  get() {
+    return this._filter;
+  };
+
+  getType() {
+    return this._type;
+  }
+
+  clear() {
+    this._filter = null;
+  }
 
-proto.setGeometry = function(geometry) {
-  this._type = Filter.TYPES.geometry;
-  this._filter = geometry;
-  return this;
-};
-
-proto.setBBOX = function(bbox) {
-  this._type = Filter.TYPES.bbox;
-  this._filter = bbox;
-  return this;
-};
-
-proto.setFids = function(ids) {
-  this._type = Filter.TYPES.fids;
-  this._filter = ids;
-  return this;
-};
-
-proto.serialize = function() {
-  return JSON.stringify(this);
-};
-
-// get filter value
-proto.get = function() {
-  return this._filter;
-};
-
-proto.getType = function() {
-  return this._type;
-};
-
-proto.clear = function() {
-  this._filter = null;
-};
+}
 
 Filter.TYPES = {
   bbox: 'bbox',
diff --git a/src/app/core/layers/layer.js b/src/app/core/layers/layer.js
index 178ff0854..48d62e141 100644
--- a/src/app/core/layers/layer.js
+++ b/src/app/core/layers/layer.js
@@ -40,8 +40,8 @@ function Layer(config={}, options={}) {
     project = ProjectsRegistry.getCurrentProject()
   } = options;
 
-  //get search_end point value (api, ows)
-  this.config.search_endpoint = project.getSearchEndPoint();
+  /** @deprecated since 3.10.0. Will be removed in v.4.x. */
+  this.config.search_endpoint = 'api';
 
   // create relations
   this._relations = this._createRelations(project.getRelations());
@@ -320,12 +320,10 @@ proto.getSearchParams = function() {
 };
 
 /**
- * Return search_endpoint
- *
- * @returns {*}
+ * @deprecated since 3.10.0. Will be removed in v.4.x.
  */
 proto.getSearchEndPoint = function() {
-  return this.getType() !== Layer.LayerTypes.TABLE ? this.config.search_endpoint : 'api';
+  return 'api';
 };
 
 /**
@@ -459,6 +457,8 @@ proto.getFeatureByFids = async function({
 };
 
 /**
+ * @TODO deprecate `search_endpoint = 'ows'`
+ *
  * Search Features
  * 
  * @param { Object }        opts
diff --git a/src/app/core/layers/layersstoresregistry.js b/src/app/core/layers/layersstoresregistry.js
index 3bb1f47ab..e28782627 100644
--- a/src/app/core/layers/layersstoresregistry.js
+++ b/src/app/core/layers/layersstoresregistry.js
@@ -1,70 +1,62 @@
-const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
+import G3WObject from 'core/g3w-object';
 
 // Registy Layers
-function LayersStoresRegistry() {
-  this.stores = {};
-  this.storesArray = [];
-  // to react some application components that are binding to Layerstore
-  this.setters = {
-    addLayersStore: this._addLayersStore.bind(this),
-    removeLayersStore: this._removeLayersStore.bind(this),
-    removeLayersStores: this._removeLayersStores.bind(this),
-  };
-
-  base(this);
-}
-
-inherit(LayersStoresRegistry, G3WObject);
-
-const proto = LayersStoresRegistry.prototype;
-
-proto.getLayerById = function(layerId) {
-  let layer;
-  for (const storeId in this.stores) {
-    const layerStore = this.stores[storeId];
-    layer = layerStore.getLayerById(layerId);
-    if (layer) break;
+module.exports = (class LayersStoresRegistry extends G3WObject {
+
+  constructor() {
+    super();
+
+    this.stores = {};
+
+    this.storesArray = [];
+
+    // to react some application components that are binding to Layerstore
+    this.setters = {
+
+      addLayersStore(store, idx) {
+        const id = store.getId();
+        this.stores[id] = store;
+        if (null !== idx && undefined !== idx) {
+          this.storesArray.splice(idx, 0, id);
+        } else {
+          this.storesArray.push(id);
+        }
+      },
+
+      removeLayersStore(store) {
+        if (store) {
+          const id = store.getId();
+          this.storesArray = this.storesArray.filter(i => i != id);
+          delete this.stores[id];
+        }
+      },
+
+      removeLayersStores() {
+        this.storesArray = [];
+        this.stores = {};
+      },
+
+    };
   }
-  return layer
-};
-
-proto.getLayers = function(filter) {
-  return Object.values(this.stores).flatMap(store => store.getLayers(filter));
-};
-
-proto.getQuerableLayersStores = function() {
-  return this.getLayersStores().filter(store => store.isQueryable());
-};
 
-proto.getLayersStore = function(id) {
-  return this.stores[id];
-};
-
-proto.getLayersStores = function() {
-  return this.storesArray.map(storeId => this.stores[storeId]);
-};
-
-proto._addLayersStore = function(layersStore, idx) {
-  const storeId = layersStore.getId();
-  this.stores[storeId] = layersStore;
-  if (!_.isNil(idx)) this.storesArray.splice(idx,0, storeId);
-  else this.storesArray.push(storeId);
+  getLayerById(id) {
+    return Object.values(this.stores).map(store => store.getLayerById(id)).find(layer => layer);
+  }
 
-};
+  getLayers(filter) {
+    return Object.values(this.stores).flatMap(store => store.getLayers(filter));
+  }
 
-proto._removeLayersStore = function(layerStore) {
-  if (layerStore) {
-    const storeId = layerStore.getId();
-    this.storesArray = this.storesArray.filter((_storeId) => _storeId != storeId);
-    delete this.stores[storeId];
+  getQuerableLayersStores() {
+    return this.getLayersStores().filter(store => store.isQueryable());
   }
-};
 
-proto._removeLayersStores = function() {
-  this.storesArray = [];
-  this.stores = {};
-};
+  getLayersStore(id) {
+    return this.stores[id];
+  }
 
+  getLayersStores() {
+    return this.storesArray.map(id => this.stores[id]);
+  }
 
-module.exports = LayersStoresRegistry;
+});
\ No newline at end of file
diff --git a/src/app/core/layers/providersfactory.js b/src/app/core/layers/providersfactory.js
index 4044a47f3..dc38bb32c 100644
--- a/src/app/core/layers/providersfactory.js
+++ b/src/app/core/layers/providersfactory.js
@@ -145,7 +145,7 @@ const Providers = {
     }
 
     /**
-     * @TODO check if deprecated (broken and unusued code ?)
+     * @TODO check if deprecated (broken and unused code ?)
      */
     digestFeaturesForTable() {
       return {
diff --git a/src/app/core/plugin/plugin.js b/src/app/core/plugin/plugin.js
index c40a05882..9e3e72648 100644
--- a/src/app/core/plugin/plugin.js
+++ b/src/app/core/plugin/plugin.js
@@ -1,20 +1,18 @@
+import G3WObject          from 'core/g3w-object';
+import Component          from 'core/g3w-component';
 import PluginsRegistry    from 'store/plugins';
 import ProjectsRegistry   from 'store/projects';
 import ApplicationService from 'services/application';
 import GUI                from 'services/gui';
+import { toRawType }      from 'utils/toRawType';
 
-const {
-  base,
-  inherit,
-  toRawType
-}                       = require('utils');
-const G3WObject         = require('core/g3wobject');
-const Component         = require('gui/component/component');
 const { addI18nPlugin } = require('core/i18n/i18n.service');
 
 const TIMEOUT = 10000;
 
-const Plugin = function({
+module.exports = class Plugin extends G3WObject {
+  
+  constructor({
     name         = null,
     config       = PluginsRegistry.getPluginConfig(name),
     service      = null,
@@ -24,422 +22,396 @@ const Plugin = function({
     api          = {},
   } = {}) {
   
-  base(this);
-
-  this.setName(name);
-  this.setConfig(config);
-  this.setLocale(i18n);
-  this.setService(service);
-  this.setDependencies(dependencies);
-  this.addFontClasses(fontClasses);
-  this.setApi(api);
-  this.setHookService(null);
-
-  this._ready = false;
-
-  // List of sidebar services that usually plugin need to interact with (hook = place/name of component)
-  this.hookservices = {
-    'search': GUI.getService('search'),
-    'tools': GUI.getService('tools')
-  };
+    super();
+
+    this.setName(name);
+    this.setConfig(config);
+    this.setLocale(i18n);
+    this.setService(service);
+    this.setDependencies(dependencies);
+    this.addFontClasses(fontClasses);
+    this.setApi(api);
+    this.setHookService(null);
+
+    this._ready = false;
+
+    // List of sidebar services that usually plugin need to interact with (hook = place/name of component)
+    this.hookservices = {
+      'search': GUI.getService('search'),
+      'tools': GUI.getService('tools')
+    };
+
+    // Automatically remove the loading plugin indicator after timeout
+    this._timeout = setTimeout(() => {
+      PluginsRegistry.removeLoadingPlugin(this.name, this._ready);
+      this.removeLayout();
+    }, TIMEOUT)
+
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setName(name) {
+    this.name = name;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  getName() {
+    return this.name;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setConfig(config) {
+    this.config = toRawType(config) === 'Object' ? config : null;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  getConfig(name = this.name) {
+    return this.config || PluginsRegistry.getPluginConfig(name);
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setLocale(i18n) {
+    if (i18n && this.name) {
+      addI18nPlugin({ name: this.name, config: i18n});
+    }
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setService(service) {
+    this.service = service;
+    if (service) {
+      service.setPlugin(this);
+    }
+  }
+
+  /**
+   * @FIXME add description
+   */
+  getService() {
+    return this.service
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setDependencies(dependencies) {
+    this.dependencies = dependencies;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setApi(api = {}) {
+    this._api = api;
+    /**
+     * @FIXME useless assignment ?
+     */
+    api.getConfig = this._api.getConfig; // add alias for "api.getConfig()" method
+  }
+
+  /**
+   * @FIXME add description
+   */
+  getApi() {
+    return this._api;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setHookService(hook) {
+    this._hook = hook;
+  }
+
+  /**
+   * @FIXME add description
+   */
+  getHookService(hook = "tools") {
+    return this.hookservices[hook];
+  }
 
-  // Automatically remove the loading plugin indicator after timeout
-  this._timeout = setTimeout(() => {
-    PluginsRegistry.removeLoadingPlugin(this.name, this._ready);
-    this.removeLayout();
-  }, TIMEOUT)
-
-};
-
-inherit(Plugin, G3WObject);
-
-const proto = Plugin.prototype;
-
-/**
- * @FIXME add description
- */
-proto.setName = function(name) {
-  this.name = name;
-};
-
-/**
- * @FIXME add description
- */
-proto.getName = function() {
-  return this.name;
-};
-
-/**
- * @FIXME add description
- */
-proto.setConfig = function(config) {
-  this.config = toRawType(config) === 'Object' ? config : null;
-};
-
-/**
- * @FIXME add description
- */
-proto.getConfig = function(name = this.name) {
-  return this.config || PluginsRegistry.getPluginConfig(name);
-};
-
-/*
- * @FIXME add description
- */
-proto.setLocale = function(i18n) {
-  if (i18n && this.name) {
-    addI18nPlugin({ name: this.name, config: i18n});
-  }
-};
-
-/**
- * @FIXME add description
- */
-proto.setService = function(service) {
-  this.service = service;
-  if (service) {
-    service.setPlugin(this);
-  }
-};
-
-/**
- * @FIXME add description
- */
-proto.getService = function() {
-  return this.service
-};
-
-/**
- * @FIXME add description
- */
-proto.setDependencies = function(dependencies) {
-  this.dependencies = dependencies;
-};
-
-/**
- * @FIXME add description
- */
-proto.setApi = function(api = {}) {
-  this._api = api;
-  /**
-   * @FIXME useless assignment ?
-   */
-  api.getConfig = this._api.getConfig; // add alias for "api.getConfig()" method
-};
-
-/**
- * @FIXME add description
- */
-proto.getApi = function() {
-  return this._api;
-};
-
-/**
- * @FIXME add description
- */
-proto.setHookService = function(hook) {
-  this._hook = hook;
-};
-
-/**
- * @FIXME add description
- */
-proto.getHookService = function(hook = "tools") {
-  return this.hookservices[hook];
-};
-
-/**
- * Override plugin's content default layout (eg. default panel width, height, ...)
- * 
- * @see g3wsdk.core.ApplicationState.gui.layout
- */
-proto.setLayout = function(config = ApplicationService.cloneLayout('app')) {
-  ApplicationService.setLayout(this.name, config);
-};
-
-/**
- * @FIXME add description
- * 
- * @see g3wsdk.core.ApplicationState.gui.layout.__current
- */
-proto.setCurrentLayout = function() {
-  ApplicationService.setCurrentLayout(this.name);
-};
-
-/**
- * @FIXME add description
- * 
- * @see g3wsdk.core.ApplicationState.gui.layout
- */
-proto.removeLayout = function() {
-  ApplicationService.removeLayout(this.name)
-};
-
-/**
- * @FIXME add description
- */
-proto.setReady = function(isReady) {
-  this._ready = isReady;
-  if (this._ready) {
-    this.setLayout();
-  }
-  this.emit('set-ready', isReady, this.name);
-  /**
-   * @FIXME empty delay ?
-   */
-  setTimeout(() => {
-    clearTimeout(this._timeout);
-    PluginsRegistry.removeLoadingPlugin(this.name, this._ready);
-  }, 0 /* 0 = allow any previously "setTimeout" to execute */)
-};
-
-/**
- * @FIXME add description
- */
-proto.isReady = function() {
-  return new Promise((resolve) => {
-    this._ready
-      ? resolve(this._ready)
-      : this.once('set-ready', (isReady) => { this._ready = isReady; resolve(this._ready); })
-  });
-};
-
-/**
- * Check if plugin is compatible with current projectId
- */
-proto.isCurrentProjectCompatible = function(projectId) {
-  return projectId === ProjectsRegistry.getCurrentProject().getGid();
-};
-
-/**
- * Check and register plugin only when compatible with current projectId (eg: qdjango:1)
- */
-proto.registerPlugin = function(projectId) {
-  const iscompatible  = this.isCurrentProjectCompatible(projectId);
-  if (iscompatible) {
-    PluginsRegistry.registerPlugin(this);
-  } else {
-    PluginsRegistry.removeLoadingPlugin(this.name, false);
-    clearTimeout(this._timeout);
-  }
-  return iscompatible;
-};
-
-/**
- * @FIXME explain better what it does
- * 
- * Get plugin dependencies 
- */
-proto.getDependencyPlugins = function(pluginsName) {
-  this.dependencies = pluginsName || this.dependencies;
-  return Promise.all(this.dependencies.map(pluginName => this.getDependencyPlugin(pluginName)))
-};
-
-/**
- * @FIXME explain better what it does
- * 
- * Create to not replace above plugin method used by non changed old plugin
- */
-proto.getDependencyPluginsObject = async function(pluginsName) {
-  const pluginsApiObject = {};
-  const promises = await this.getDependencyPlugins(pluginsName);
-  this.dependencies.forEach((pluginName, index) => pluginsApiObject[pluginName] = promises[index]);
-  return pluginsApiObject
-};
-
-/**
- * @FIXME explain better what it does
- * 
- * Get plugin dependency
- */
-proto.getDependencyPlugin = function(pluginName) {
-  if (PluginsRegistry.isTherePlugin(pluginName)) {
+  /**
+   * Override plugin's content default layout (eg. default panel width, height, ...)
+   * 
+   * @see g3wsdk.core.ApplicationState.gui.layout
+   */
+  setLayout(config = ApplicationService.cloneLayout('app')) {
+    ApplicationService.setLayout(this.name, config);
+  }
+
+  /**
+   * @FIXME add description
+   * 
+   * @see g3wsdk.core.ApplicationState.gui.layout.__current
+   */
+  setCurrentLayout() {
+    ApplicationService.setCurrentLayout(this.name);
+  }
+
+  /**
+   * @FIXME add description
+   * 
+   * @see g3wsdk.core.ApplicationState.gui.layout
+   */
+  removeLayout() {
+    ApplicationService.removeLayout(this.name)
+  }
+
+  /**
+   * @FIXME add description
+   */
+  setReady(isReady) {
+    this._ready = isReady;
+    if (this._ready) {
+      this.setLayout();
+    }
+    this.emit('set-ready', isReady, this.name);
+    setTimeout(() => {
+      clearTimeout(this._timeout);
+      PluginsRegistry.removeLoadingPlugin(this.name, this._ready);
+    }, 0 /* 0 = allow any previously "setTimeout" to execute */)
+  }
+
+  /**
+   * @FIXME add description
+   */
+  isReady() {
     return new Promise((resolve) => {
-      const plugin = PluginsRegistry.getPlugin(pluginName);
-      /**
-       * @TODO refactor weird shortcircuiting logic
-       */
-      plugin
-      && plugin.isReady().then(() => resolve(plugin.getApi()))
-      || PluginsRegistry.onafter('registerPlugin', plugin => {
-        (plugin.name === pluginName) && plugin.isReady().then(() => {resolve(plugin.getApi())})
+      this._ready
+        ? resolve(this._ready)
+        : this.once('set-ready', (isReady) => { this._ready = isReady; resolve(this._ready); })
+    });
+  }
+
+  /**
+   * @returns whether plugin is compatible with current projectId
+   */
+  isCurrentProjectCompatible(projectId) {
+    return projectId === ProjectsRegistry.getCurrentProject().getGid();
+  }
+
+  /**
+   * Check and register plugin only when compatible with current projectId (eg: qdjango:1)
+   */
+  registerPlugin(projectId) {
+    const iscompatible  = this.isCurrentProjectCompatible(projectId);
+    if (iscompatible) {
+      PluginsRegistry.registerPlugin(this);
+    } else {
+      PluginsRegistry.removeLoadingPlugin(this.name, false);
+      clearTimeout(this._timeout);
+    }
+    return iscompatible;
+  }
+
+  /**
+   * @FIXME explain better what it does
+   * 
+   * Get plugin dependencies 
+   */
+  getDependencyPlugins(pluginsName) {
+    this.dependencies = pluginsName || this.dependencies;
+    return Promise.all(this.dependencies.map(pluginName => this.getDependencyPlugin(pluginName)))
+  }
+
+  /**
+   * @FIXME explain better what it does
+   * 
+   * Create to not replace above plugin method used by non changed old plugin
+   */
+  async getDependencyPluginsObject(pluginsName) {
+    const api = {};
+    const promises = await this.getDependencyPlugins(pluginsName);
+    this.dependencies.forEach((pluginName, index) => api[pluginName] = promises[index]);
+    return api;
+  }
+
+  /**
+   * @FIXME explain better what it does
+   * 
+   * Get plugin dependency
+   */
+  getDependencyPlugin(pluginName) {
+    if (PluginsRegistry.isTherePlugin(pluginName)) {
+      return new Promise((resolve) => {
+        const plugin = PluginsRegistry.getPlugin(pluginName);
+        /**
+         * @TODO refactor weird shortcircuiting logic
+         */
+        plugin
+        && plugin.isReady().then(() => resolve(plugin.getApi()))
+        || PluginsRegistry.onafter('registerPlugin', plugin => {
+          (plugin.name === pluginName) && plugin.isReady().then(() => {resolve(plugin.getApi())})
+        });
+      })
+    }
+    return Promise.reject({ error: 'no plugin' });
+  }
+
+  /**
+   * Handle loading process of a specific hook service (eg. "tools" interface on the left sidebar)
+   */
+  setHookLoading({ hook = "tools", loading = false } = {}) {
+    this.getHookService(hook).setLoading(loading);
+  }
+
+  /**
+   * @FIXME add description
+   */
+  addToolGroup({ hook = "tools", position:order, title:group } = {}) {
+    this.getHookService(hook).addToolGroup(order, group);
+  }
+
+  /**
+   * @FIXME add description
+   */
+  removeToolGroup({ hook, group } = {}) {
+    this.getHookService(hook).removeToolGroup(group.title);
+  }
+
+  /**
+   * @param tool
+   * @param group tools group
+   */
+  addTools(tool, group) {
+    const hook = tool.hook || 'tools';
+    let tools  = [];
+
+    if (!tool.action && !tool.type) {
+      this.removeToolGroup({ hook, group });
+    } else {
+      this.setHookService(hook);
+      tools = (this.config.configs || [this.config]).map(config => {
+          return {
+          icon:     tool.icon,
+          type:     tool.type,
+          name:     config.name || tool.name,
+          html:     tool.html,
+          options:  tool.options || {},
+          action:   tool.action && tool.action.bind(this, config),
+          loading:  undefined !== tool.loading  ? tool.loading  : false,
+          disabled: undefined !== tool.disabled ? tool.disabled : false,
+          offline:  undefined !== tool.offline  ? tool.offline  : true,
+          state:    undefined !== tool.state    ? tool.state    : ({ type: null, message: null })
+        };
       });
-    })
-  }
-  return Promise.reject({ error: 'no plugin' });
-};
-
-/**
- * Handle loading process of a specific hook service (eg. "tools" interface on the left sidebar)
- */
-proto.setHookLoading = function({ hook = "tools", loading = false } = {}) {
-  this.getHookService(hook).setLoading(loading);
-};
-
-/**
- * @FIXME add description
- */
-proto.addToolGroup = function({ hook = "tools", position:order, title:group } = {}) {
-  this.getHookService(hook).addToolGroup(order, group);
-};
-
-/**
- * @FIXME add description
- */
-proto.removeToolGroup = function({ hook, group } = {}) {
-  this.getHookService(hook).removeToolGroup(group.title);
-};
-
-/**
- * @FIXME add description
- */
-proto.addTools = function(
-  {
-    hook = "tools",
-    action,
-    html,
-    offline = true,
-    icon,
-    name,
-    type,
-    options = {},
-    loading = false,
-    disabled = false,
-    state = {
-      type:null,
-      message:null
+      this.getHookService(hook).addTools(tools, group);
     }
-  } = {},
-  groupTools
-  ) {
-  if (!action && !type) {
-    this.removeToolGroup({ hook, group: groupTools });
-    return [];
-  } else {
-    this.setHookService(hook);
-    const tools = (this.config.configs || [this.config]).map(config => {
-        return {
-        icon,
-        type,
-        name: config.name || name,
-        html,
-        loading,
-        disabled,
-        options,
-        offline,
-        action: action && action.bind(this, config),
-        state
-      };
-    });
-    this.getHookService(hook).addTools(tools, groupTools);
+
     return tools;
   }
-};
-
-/**
- * @FIXME add description
- */
-proto.setToolState = function({ id, state = { type:null, message: null } } = {}) {
-  this.hookservices[this._hook].setToolState({ id, state });
-};
-
-/**
- * @FIXME add description
- */
-proto.removeTools = function() {
-  this.hookservices[this._hook].removeTools();
-};
-
-/**
- * Helper method to create and add a custom component item on the left sidebar
- * 
- * @param                      vue                                  vue component object (SFC)
- * @param { Object }           options
- * @param { string }           options.id
- * @param { string }           options.title                        textual description on left sidebar (eg. "metadata")
- * @param { boolean }          options.open                         true = collapsible button; false = button
- * @param { boolean }          options.collapsible                  whether expand the button when plugin is loaded
- * @param { boolean }          options.isolate                      whether propagate click event to all sidebar item
- * @param { boolean }          options.closewhenshowviewportcontent
- * @param { Object }           options.iconConfig
- * @param { string }           options.iconConfig.color             color of icon
- * @param { string }           options.iconConfig.icon              see gui\vue\vueappplugin.js font list
- * @param { Object }           options.events                       eg. events = { open: { when: 'before', cb: () => { } }
- * @param { Object }           options.sidebarOptions
- * @param { number | string }  options.sidebarOptions.position
- * 
- * @returns component
- * 
- * @listens unload
- * 
- */
-proto.createSideBarComponent = function(vue, options = {}) {
-
-  const çç = (a, b) => undefined !== a ? a : b; // like a ?? (coalesce operator)
-
-  options.open                         = çç(options.open, false);
-  options.collapsible                  = çç(options.collapsible, true);
-  options.mobile                       = çç(options.mobile, true);
-  options.isolate                      = çç(options.isolate, false);
-  options.closewhenshowviewportcontent = çç(options.closewhenshowviewportcontent, true);
-  options.iconConfig                   = çç(options.iconConfig, {});
-  options.events                       = çç(options.events, {});
-  options.sidebarOptions               = çç(options.sidebarOptions, { position: 1 });
-  const { iconConfig, ...opts }        = Object.assign({}, options, { iconColor: options.iconConfig.color, icon: GUI.getFontClass(options.iconConfig.icon) });
-
-  const component = (new Component(opts)).init({ vueComponentObject: vue });
-
-  GUI.addComponent(component, 'sidebar', options.sidebarOptions);
-
-  this.once('unload', () => GUI.removeComponent(options.id, 'sidebar', options.sidebarOptions));
-
-  return component;
-};
-
-/**
- * @deprecated since v3.4.
- */
-proto.unload  = function() {
-  if (this.service) {
-    this.service.clearAllEvents();
-  }
-  this.emit('unload');
-  //console.log('UNLOAD can be overwritten by plugin');
-};
-
-/**
- * @deprecated since v3.4.
- */
-proto.load = function() {
-  //console.log('LOAD  need to be overwrite by plugin');
-};
-
-/**
- * @TODO it could be depecrated after v3.4 ?
- */
-proto.getProject = function() {
-  return ProjectsRegistry.getCurrentProject();
-};
-
-/**
- * @TODO it could be depecrated after v3.4 ?
- */
-proto.addDependency = function(dependency) {
-  this.dependencies.push(dependency);
-};
-
-/**
- * @TODO it could be depecrated after v3.4 ?
- */
-proto.addFontClass = function({ name, className }) {
-  Vue.prototype.g3wtemplate.addFontClass({ name, className });
-};
-
-/**
- * @TODO it could be depecrated after v3.4 ?
- */
-proto.addFontClasses = function(fonClasses = []) {
-  fonClasses.forEach(fontClass => this.addFontClass(fontClass));
-};
-
-module.exports = Plugin;
+
+  /**
+   * @FIXME add description
+   */
+  setToolState({ id, state = { type:null, message: null } } = {}) {
+    this.hookservices[this._hook].setToolState({ id, state });
+  }
+
+  /**
+   * @FIXME add description
+   */
+  removeTools() {
+    this.hookservices[this._hook].removeTools();
+  }
+
+  /**
+   * Helper method to create and add a custom component item on the left sidebar
+   * 
+   * @param                      vue                               vue component object (SFC)
+   * @param { Object }           opts
+   * @param { string }           opts.id
+   * @param { string }           opts.title                        textual description on left sidebar (eg. "metadata")
+   * @param { boolean }          opts.open                         true = collapsible button; false = button
+   * @param { boolean }          opts.collapsible                  whether expand the button when plugin is loaded
+   * @param { boolean }          opts.isolate                      whether propagate click event to all sidebar item
+   * @param { boolean }          opts.closewhenshowviewportcontent
+   * @param { Object }           opts.iconConfig
+   * @param { string }           opts.iconConfig.color             color of icon
+   * @param { string }           opts.iconConfig.icon              see gui\vue\vueappplugin.js font list
+   * @param { Object }           opts.events                       eg. events = { open: { when: 'before', cb: () => { } }
+   * @param { Object }           opts.sidebarOptions
+   * @param { number | string }  opts.sidebarOptions.position
+   * 
+   * @returns component
+   * 
+   * @listens unload
+   * 
+   */
+  createSideBarComponent(vue, opts = {}) {
+
+    const çç = (a, b) => undefined !== a ? a : b; // like a ?? (coalesce operator)
+
+    opts.vueComponentObject = vue; 
+    opts.collapsible        = çç(opts.collapsible, true);
+    opts.mobile             = çç(opts.mobile, true);
+    opts.isolate            = çç(opts.isolate, false);
+    opts.sidebarOptions     = çç(opts.sidebarOptions, { position: 1 });
+
+    GUI.addComponent(new Component(opts), 'sidebar', opts.sidebarOptions);
+
+    this.once('unload', () => GUI.removeComponent(opts.id, 'sidebar', opts.sidebarOptions));
+
+    return GUI.getComponent(opts.id) ;
+  }
+
+  /**
+   * @deprecated since v3.4.
+   * 
+   * @virtual method need to be implemented by subclasses
+   */
+  unload() {
+    if (this.service) {
+      this.service.clearAllEvents();
+    }
+    this.emit('unload');
+  }
+
+  /**
+   * @deprecated since v3.4.
+   * 
+   * @virtual method need to be implemented by subclasses
+   */
+  load() { }
+
+  /**
+   * @TODO it could be depecrated after v3.4 ?
+   */
+  getProject() {
+    return ProjectsRegistry.getCurrentProject();
+  }
+
+  /**
+   * @TODO it could be depecrated after v3.4 ?
+   */
+  addDependency(dependency) {
+    this.dependencies.push(dependency);
+  };
+
+  /**
+   * @TODO it could be depecrated after v3.4 ?
+   */
+  addFontClass({ name, className }) {
+    Vue.prototype.g3wtemplate.addFontClass({ name, className });
+  }
+
+  /**
+   * @TODO it could be depecrated after v3.4 ?
+   */
+  addFontClasses(fonClasses = []) {
+    fonClasses.forEach(fontClass => this.addFontClass(fontClass));
+  }
+
+};
\ No newline at end of file
diff --git a/src/app/core/plugin/pluginservice.js b/src/app/core/plugin/pluginservice.js
index 4ef1b5f34..636b609f6 100644
--- a/src/app/core/plugin/pluginservice.js
+++ b/src/app/core/plugin/pluginservice.js
@@ -1,147 +1,143 @@
+import G3WObject          from 'core/g3w-object';
 import ApplicationState   from 'store/application-state';
 import ApplicationService from 'services/application';
 
-const { base, inherit } = require('utils');
-const G3WObject         = require('core/g3wobject');
-
-function PluginService(options={}) {
-  base(this, options);
-  this.plugin;
-  this._api = {
-    own: null,
-    dependencies: {}
-  };
-  this._pluginEvents = {};
-  this._appEvents = [];
-  this.currentLayout = ApplicationService.getCurrentLayoutName();
-  this.vm = new Vue();
-  this.unwatch = this.vm.$watch(()=> ApplicationState.gui.layout.__current,
-    currentLayoutName => this.currentLayout = currentLayoutName !== this.getPlugin().getName() ? currentLayoutName : this.currentLayout);
-}
-
-inherit(PluginService, G3WObject);
-
-const proto = PluginService.prototype;
-
-/**
- * Set a default init method. Overwrite by each plugin
- * @param config: plugin configuration object
- */
-proto.init = function(config={}) {
-  this.config = config;
-};
+module.exports = class PluginService extends G3WObject {
+
+  constructor(options = {}) {
+    super(options);
+    this.plugin;
+    this._api = {
+      own: null,
+      dependencies: {}
+    };
+    this._pluginEvents = {};
+    this._appEvents = [];
+    this.currentLayout = ApplicationService.getCurrentLayoutName();
+    this.vm = new Vue();
+    this.unwatch = this.vm.$watch(
+      ()=> ApplicationState.gui.layout.__current,
+      layoutName => this.currentLayout = layoutName !== this.getPlugin().getName() ? layoutName : this.currentLayout
+    );
+  }
 
-proto.setCurrentLayout = function() {
-  ApplicationService.setCurrentLayout(this.getPlugin().getName());
-};
+  /**
+   * @param config: plugin configuration object
+   * 
+   * @virtual method need to be implemented by subclasses
+   */
+  init(config={}) {
+    this.config = config;
+  }
 
-proto.resetCurrentLayout = function() {
-  ApplicationService.setCurrentLayout(this.currentLayout);
-};
+  setCurrentLayout() {
+    ApplicationService.setCurrentLayout(this.getPlugin().getName());
+  }
 
-// set owner plugin of the service
-proto.setPlugin = function(plugin) {
-  this.plugin = plugin;
-};
+  resetCurrentLayout() {
+    ApplicationService.setCurrentLayout(this.currentLayout);
+  }
 
-// return the instance of the plugin owner of the service
-proto.getPlugin = function() {
-  return this.plugin;
-};
+  // set owner plugin of the service
+  setPlugin(plugin) {
+    this.plugin = plugin;
+  }
 
-proto.isIframe = function() {
-  return ApplicationService.isIframe();
-};
+  // return the instance of the plugin owner of the service
+  getPlugin() {
+    return this.plugin;
+  }
 
-/**
- * Get Current Project
- */
-proto.getCurrentProject = function() {
-  return ApplicationService.getCurrentProject();
-};
+  isIframe() {
+    return ApplicationService.isIframe();
+  }
 
-proto.getGid = function() {
-  const { gid } = this.config;
-  return gid && gid.split(':')[1];
-};
+  getCurrentProject() {
+    return ApplicationService.getCurrentProject();
+  }
 
-proto.getConfig = function() {
-  return this.config;
-};
+  getGid() {
+    return this.config.gid && this.config.gid.split(':')[1];
+  }
 
-proto.setConfig = function(config) {
-  this.config = config;
-};
+  getConfig() {
+    return this.config;
+  }
 
-proto.setApi = function({dependency, api} = {}) {
-  if (!dependency) this._api.own = api;
-  else this._api.dependencies[dependency] = api;
-};
+  setConfig(config) {
+    this.config = config;
+  }
 
-proto.getApi = function({dependency} = {}) {
-  return dependency && this._api.dependencies[dependency] || this._api.own;
-};
+  setApi({dependency, api} = {}) {
+    if (!dependency) this._api.own = api;
+    else this._api.dependencies[dependency] = api;
+  }
 
-proto.initEvents = function(events=[]) {
-  for (let i in events) {
-    const name = events[i];
-    this._pluginEvents[name] = {};
+  getApi({dependency} = {}) {
+    return dependency && this._api.dependencies[dependency] || this._api.own;
   }
-};
 
-proto.registerWindowEvent = function({evt, cb}={}) {
-  ApplicationService.registerWindowEvent({
-    evt,
-    cb
-  })
-};
+  initEvents(events=[]) {
+    for (let i in events) {
+      this._pluginEvents[events[i]] = {};
+    }
+  }
 
-proto.unregisterWindowEvent = function({evt, cb}) {
-  ApplicationService.unregisterWindowEvent({
-    evt,
-    cb
-  })
-};
+  registerWindowEvent({evt, cb}={}) {
+    ApplicationService.registerWindowEvent({ evt, cb });
+  }
 
-proto.subscribeEvent = function({name, once=false, owner, listener}) {
-  this._pluginEvents[name] = this._pluginEvents[name] ? this._pluginEvents[name] : {};
-  this._pluginEvents[name][owner] = listener;
-  once ? this.once(name, listener): this.on(name, listener);
-};
+  unregisterWindowEvent({evt, cb}) {
+    ApplicationService.unregisterWindowEvent({ evt, cb });
+  }
 
-proto.triggerEvent = function({name, params={}}) {
-  this.emit(name, params);
-};
+  subscribeEvent({name, once=false, owner, listener}) {
+    this._pluginEvents[name] = this._pluginEvents[name] ? this._pluginEvents[name] : {};
+    this._pluginEvents[name][owner] = listener;
+    if (once) {
+      this.once(name, listener);
+    } else {
+      this.on(name, listener);
+    }
+  }
 
-proto.unsubscribeEvent = function({name, owner}) {
-  const listener = this._pluginEvents[name][owner];
-  this.removeEvent(name, listener);
-  delete this._pluginEvents[name][owner];
-};
+  triggerEvent({name, params={}}) {
+    this.emit(name, params);
+  }
 
-proto.unsubscribeAllEvents = function() {
-  for (const name in this._pluginEvents) {
-    this.removeEvent(name);
-    delete this._pluginEvents[name];
+  unsubscribeEvent({name, owner}) {
+    this.removeEvent(name, this._pluginEvents[name][owner]);
+    delete this._pluginEvents[name][owner];
   }
-};
 
-proto.clearAllEvents = function() {
-  this.unsubscribeAllEvents();
-  this.unwatch();
-  this.vm = null;
-  this._pluginEvents = null
-};
+  unsubscribeAllEvents() {
+    for (const name in this._pluginEvents) {
+      this.removeEvent(name);
+      delete this._pluginEvents[name];
+    }
+  }
 
-// to owerwrite if we need some condition to load or not the plugin
-proto.loadPlugin = function() {
-  return true
-};
+  clearAllEvents() {
+    this.unsubscribeAllEvents();
+    this.unwatch();
+    this.vm = null;
+    this._pluginEvents = null
+  }
 
-//Called when plugin is removed to clear events and memory
-proto.clear = function() {
-  // to overwrite
-};
+  /**
+   * @returns need to load or not the plugin
+   * 
+   * @virtual method need to be implemented by subclasses 
+   */ 
+  loadPlugin() {
+    return true
+  }
 
+  /**
+   * Called when plugin is removed to clear events and memory
+   * 
+   * @virtual method need to be implemented by subclasses
+   */
+  clear() {}
 
-module.exports = PluginService;
+};
diff --git a/src/app/core/project/project.js b/src/app/core/project/project.js
index 1fb6cad87..6ec712e52 100644
--- a/src/app/core/project/project.js
+++ b/src/app/core/project/project.js
@@ -6,15 +6,15 @@ import {
 import ApplicationState   from 'store/application-state';
 import ApplicationService from 'services/application';
 import { crsToCrsObject } from 'utils/crsToCrsObject';
+import G3WObject          from 'core/g3wobject';
 
 const { base, inherit, XHR } = require('utils');
-const G3WObject = require('core/g3wobject');
-const LayerFactory = require('core/layers/layerfactory');
-const LayersStore = require('core/layers/layersstore');
-const Projections = require('g3w-ol/projection/projections');
+const LayerFactory           = require('core/layers/layerfactory');
+const LayersStore            = require('core/layers/layersstore');
+const Projections            = require('g3w-ol/projection/projections');
 
 /**
- * @FIXME options param appears to be unusued
+ * @FIXME options param appears to be unused
  * 
  * @param config.id
  * @param config.type
@@ -35,25 +35,24 @@ const Projections = require('g3w-ol/projection/projections');
  * @param config.bookmarks                     array of bookmarks
  * @param { 'POST' | 'GET' }                   config.ows_method
  * @param { boolean }                          config.wms_use_layer_ids
- * @param { 'ows' | 'api' }                    config.search_endpoint 
  * @param { 'tab' | 'toc' }                    config.legend_position 
  * @param { 'layers', 'baselayers', 'legend' } config.catalog_tab
  * 
  * @param options
  */
-function Project(config={}, options={}) {
+function Project(config = {}, options={}) {
   /**
    * For future implementation catalog tab actived
    */
-  config.catalog_tab = config.toc_tab_default || config._catalog_tab || 'layers';
+  config.catalog_tab            = config.toc_tab_default || config._catalog_tab || 'layers';
 
-  config.ows_method = config.ows_method || 'GET';
+  config.ows_method             = config.ows_method || 'GET';
 
   config.toc_layers_init_status = config.toc_layers_init_status || TOC_LAYERS_INIT_STATUS;
   
   config.toc_themes_init_status = config.toc_themes_init_status || TOC_THEMES_INIT_STATUS;
   
-  config.query_point_tolerance = config.query_point_tolerance || QUERY_POINT_TOLERANCE;
+  config.query_point_tolerance  = config.query_point_tolerance || QUERY_POINT_TOLERANCE;
   
   this.state = config;
 
@@ -76,9 +75,9 @@ function Project(config={}, options={}) {
   /**
    * Set the project projection to object crs
    */
-  this.state.crs = crsToCrsObject(this.state.crs);
+  this.state.crs    = crsToCrsObject(this.state.crs);
 
-  this._projection = Projections.get(this.state.crs);
+  this._projection  = Projections.get(this.state.crs);
 
   /**
    * Build a layersstore of the project
@@ -119,14 +118,17 @@ proto.getWmsGetmapFormat = function() {
 }
 
 /**
- * Get search end point value (ows or api)
+ * @deprecated since 3.10.0. Will be removed in v.4.x.
  */
 proto.getSearchEndPoint = function() {
-  return this.state.search_endpoint;
+  return 'api';
 };
 
+/**
+ * @deprecated since 3.10.0. Will be removed in v.4.x.
+ */
 proto.setSearchEndPoint = function() {
-  (this.state.search || []).forEach(search => search.search_endpoint = this.state.search_endpoint);
+  (this.state.search || []).forEach(search => search.search_endpoint = 'api');
 };
 
 proto.getAliasUrl = function() {
@@ -234,29 +236,27 @@ proto._buildLayersStore = function() {
   const overviewprojectgid = this.state.overviewprojectgid ? this.state.overviewprojectgid.gid : null;
 
   layersStore.setOptions({
-    id: this.state.gid,
+    id:         this.state.gid,
     projection: this._projection,
-    extent: this.state.extent,
+    extent:     this.state.extent,
     initextent: this.state.initextent,
-    wmsUrl: this.state.WMSUrl,
-    catalog: this.state.gid !== overviewprojectgid
+    wmsUrl:     this.state.WMSUrl,
+    catalog:    overviewprojectgid !== this.state.gid,
   });
 
   // instance each layer ad area added to layersstore
   const layers = this.getLayers();
   
   layers.forEach(layerConfig => {
-    //check and set crs in objectformat
-    layerConfig.crs = crsToCrsObject(layerConfig.crs);
+    //check and set crs in object format
+    layerConfig.crs               = crsToCrsObject(layerConfig.crs);
     // add projection
-    layerConfig.projection = layerConfig.crs ? Projections.get(layerConfig.crs) : this._projection;
+    layerConfig.projection        = layerConfig.crs ? Projections.get(layerConfig.crs) : this._projection;
     //add ows_method
-    layerConfig.ows_method = this.getOwsMethod();
+    layerConfig.ows_method        = this.getOwsMethod();
     layerConfig.wms_use_layer_ids = this.state.wms_use_layer_ids;
-    const layer = LayerFactory.build(layerConfig, { project: this });
-    if (layer) {
-      layersStore.addLayer(layer);
-    } 
+    const layer                   = LayerFactory.build(layerConfig, { project: this });
+    if (layer) { layersStore.addLayer(layer)}
   });
   
   // create layerstree from layerstore
@@ -281,20 +281,20 @@ proto.getBaseLayers = function() {
 };
 
 /**
- * Get configuration layers array from server config
+ * Get configuration layers an array from server config
  * 
  * @param filter property layer config to filter
  * @returns {*}
  */
-proto.getConfigLayers = function({key}={}) {
-  return key ? this.state.layers.filter(layer => layer[key] !== undefined) : this.state.layers;
+proto.getConfigLayers = function({ key } = {}) {
+  return key ? this.state.layers.filter(layer => undefined !== layer[key] ) : this.state.layers;
 };
 
 /**
  * Legend Position
  */
 
-proto.setLegendPosition = function(legend_position='tab') {
+proto.setLegendPosition = function(legend_position = 'tab') {
   this.state.legend_position = legend_position;
 };
 
@@ -361,7 +361,7 @@ proto.getCrs = function() {
 /**
  * @param {'major' | 'minor' | 'patch' } qgis.type 
  */
-proto.getQgisVersion = function({type}={}) {
+proto.getQgisVersion = function({ type } = {}) {
   const index = ['major', 'minor', 'patch'].indexOf(type);
   return -1 === index ? this.state.qgis_version : +this.state.qgis_version.split('.')[index];
 };
@@ -385,23 +385,24 @@ proto.getLayersStore = function() {
 /// Map Themes
 
 /**
- * Set properties ( checked and visible) from view to layerstree
+ * Set properties (checked and visible) from view to layerstree
  * 
  * @param map_theme map theme name
  * @param layerstree // current layerstree of TOC
  */
-proto.setLayersTreePropertiesFromMapTheme = async function({map_theme, layerstree=this.state.layerstree}) {
+proto.setLayersTreePropertiesFromMapTheme = async function({
+  map_theme,
+  layerstree = this.state.layerstree
+}) {
   /**
    * mapThemeConfig contain map_theme attributes coming from project map_themes attribute config
    * plus layerstree of map_theme get from api map theme
    */
   const mapThemeConfig = await this.getMapThemeFromThemeName(map_theme);
   // extract layerstree
-  const {layerstree:mapThemeLayersTree} = mapThemeConfig;
+  const { layerstree:mapThemeLayersTree } = mapThemeConfig;
   // create a chages need to apply map_theme changes to map and TOC
-  const changes = {
-    layers: {} // key is the layer id and object has style, visibility change (Boolean)
-  };
+  const changes  = {layers: {} }; // key is the layer id and object has style, visibility change (Boolean)
   const promises = [];
   /**
    * Function to traverse current layerstree of toc anche get changes with the new one related to map_theme choose
@@ -409,54 +410,52 @@ proto.setLayersTreePropertiesFromMapTheme = async function({map_theme, layerstre
    * @param layerstree // current layerstree
    */
   const groups = [];
-  const traverse = (mapThemeLayersTree, layerstree, checked) =>{
-    mapThemeLayersTree.forEach((node, index) => {
-      if (node.nodes) { // case of group
-        groups.push({
-          node,
-          group: layerstree[index]
-        });
-        traverse(node.nodes, layerstree[index].nodes, checked && node.checked);
-      } else {
-        // case of layer
-        node.style = mapThemeConfig.styles[node.id]; // set style from map_theme
-        if (layerstree[index].checked !== node.visible) {
-          changes.layers[node.id] = {
-            visibility: true,
-            style: false
-          };
-        }
-        layerstree[index].checked = node.visible;
-        // if has a style settled
-        if (node.style) {
-          const promise = new Promise((resolve, reject) =>{
-            const setCurrentStyleAndResolvePromise = node => {
-              if (changes.layers[node.id] === undefined) changes.layers[node.id] = {
-                visibility: false,
-                style: false
-              };
-              changes.layers[node.id].style = this.getLayerById(node.id).setCurrentStyle(node.style);
-              resolve();
-            };
-            if (this.getLayersStore()) setCurrentStyleAndResolvePromise(node);
-            else // case of starting project creation
-              node => setTimeout(() => {
-                setCurrentStyleAndResolvePromise(node);
-              })(node);
+  const traverse = (mapThemeLayersTree, layerstree, checked) => {
+    mapThemeLayersTree
+      .forEach((node, index) => {
+        if (node.nodes) { // case of a group
+          groups.push({
+            node,
+            group: layerstree[index]
           });
-          promises.push(promise);
+          traverse(node.nodes, layerstree[index].nodes, checked && node.checked);
+        } else {
+          // case of layer
+          node.style = mapThemeConfig.styles[node.id]; // set style from map_theme
+          if (layerstree[index].checked !== node.visible) {
+            changes.layers[node.id] = {
+              visibility: true,
+              style: false
+            };
+          }
+          layerstree[index].checked = node.visible;
+          // if it has a style settled
+          if (node.style) {
+            const promise = new Promise((resolve, reject) =>{
+              const setCurrentStyleAndResolvePromise = node => {
+                if (changes.layers[node.id] === undefined) changes.layers[node.id] = {
+                  visibility: false,
+                  style: false
+                };
+                changes.layers[node.id].style = this.getLayerById(node.id).setCurrentStyle(node.style);
+                resolve();
+              };
+              if (this.getLayersStore()) { setCurrentStyleAndResolvePromise(node) }
+              else { (node => setTimeout(() => setCurrentStyleAndResolvePromise(node)))(node) }// case of starting project creation
+            });
+            promises.push(promise);
+          }
         }
-      }
     });
   };
   traverse(mapThemeLayersTree, layerstree);
   await Promise.allSettled(promises);
   // all groups checked after layer checked so is set checked but not visible
-  groups.forEach(({group, node:{checked, expanded}}) => {
+  groups.forEach(({ group, node: { checked, expanded }}) => {
     group.checked = checked;
     group.expanded = expanded;
   });
-  return changes // eventually information about changes (for example style etc..)
+  return changes // eventually, information about changes (for example style etc..)
 };
 
 /**
@@ -465,9 +464,9 @@ proto.setLayersTreePropertiesFromMapTheme = async function({map_theme, layerstre
 proto.getMapThemeFromThemeName = async function(map_theme) {
   // get map theme configuration from map_themes project config
   const mapThemeConfig = this.state.map_themes.find(map_theme_config => map_theme_config.theme === map_theme);
-  // check if mapThemeConfig exist and if has layerstree (property get from server with a specific api)
+  // check if mapThemeConfig exist and if it has layerstree (property gets from server with a specific api)
   if (mapThemeConfig && undefined === mapThemeConfig.layerstree ) {
-    mapThemeConfig.layerstree =  await this.getMapThemeConfiguration(map_theme);
+    mapThemeConfig.layerstree = await this.getMapThemeConfiguration(map_theme);
   }
   return mapThemeConfig;
 };
@@ -482,9 +481,7 @@ proto.getMapThemeFromThemeName = async function(map_theme) {
 proto.getMapThemeConfiguration = async function(map_theme) {
   try {
     const response = await XHR.get({ url: `${this.urls.map_themes}${map_theme}/` });
-    if (response.result) {
-      return response.data;
-    }
+    if (response.result) { return response.data }
   } catch(err) {
     console.warn('Error while retreiving map theme configuration', err);
   }
diff --git a/src/app/g3w-ol/controls/streetviewcontrol.js b/src/app/g3w-ol/controls/streetviewcontrol.js
index 731d54376..a4f3f4722 100644
--- a/src/app/g3w-ol/controls/streetviewcontrol.js
+++ b/src/app/g3w-ol/controls/streetviewcontrol.js
@@ -1,9 +1,10 @@
-import ApplicationState from 'store/application-state';
-import GUI              from 'services/gui';
-import { mergeOptions } from 'utils/mergeOptions';
+import ApplicationState          from 'store/application-state';
+import GUI                       from 'services/gui';
+import { mergeOptions }          from 'utils/mergeOptions';
+import * as vueComp              from 'components/StreetView.vue';
+import Component                 from 'core/g3w-component';
 
 const { XHR }                    = require('utils');
-const StreetViewComponent        = require('gui/streetview/vue/streetview');
 const InteractionControl         = require('g3w-ol/controls/interactioncontrol');
 const PickCoordinatesInteraction = require('g3w-ol/interactions/pickcoordinatesinteraction');
 
@@ -120,7 +121,7 @@ proto.setPosition = function(position) {
       self._panorama.setPosition(data.location.latLng);
     }
   }).then(response => {
-    if (response === undefined) {
+    if (undefined === response) {
       GUI.closeContent();
     }
   }).catch(() => this.toggle())
@@ -135,26 +136,26 @@ proto.setMap = function(map) {
 
   this._interaction.on('picked', ({coordinate}) => {
     this.showStreetView(coordinate);
-    this._autountoggle && this.toggle();
+    if (this._autountoggle) {
+      this.toggle();
+    }
   });
 };
 
 /**
- * Method to show StreetView depending of key and keyError
+ * Method to show StreetView depending on a key and keyError
  * @param coordinate
  */
-proto.showStreetView = function(coordinate){
+proto.showStreetView = function(coordinate) {
   const [lng, lat] = ol.proj.transform(coordinate, this._map.getView().getProjection().getCode(), 'EPSG:4326');
   if (this.key) {
     GUI.setContent({
-      content: new StreetViewComponent({
-        keyError: this.keyError
-      }),
-      title: 'StreetView'
+      title: 'StreetView',
+      content: new Component({ internalComponent: new (Vue.extend(vueComp))({ keyError: this.keyError }) }),
     });
-    !this.keyError && this.setPosition({
-      lng, lat
-    })
+    if (!this.keyError) {
+      this.setPosition({ lng, lat });
+    }
   } else  {
     this._streetViewFeature.setGeometry(
       new ol.geom.Point(coordinate)
@@ -178,8 +179,11 @@ proto.clear = function() {
 
 proto.toggle = function(toggle) {
   InteractionControl.prototype.toggle.call(this, toggle);
-  if (!this.isToggled()) this.clear();
-  else this._layer.getSource().addFeatures([this._streetViewFeature]);
+  if (this.isToggled()) {
+    this._layer.getSource().addFeatures([this._streetViewFeature]);
+  } else {
+    this.clear();
+  }
 };
 
 module.exports = StreetViewControl;
\ No newline at end of file
diff --git a/src/app/g3w-ol/interactions/deletefeatureinteraction.js b/src/app/g3w-ol/interactions/deletefeatureinteraction.js
index 82727fe03..90f65681d 100644
--- a/src/app/g3w-ol/interactions/deletefeatureinteraction.js
+++ b/src/app/g3w-ol/interactions/deletefeatureinteraction.js
@@ -27,11 +27,11 @@ DeleteInteraction.handleEvent_ = function(mapBrowserEvent) {
     if(this.features_.getArray().length && mapBrowserEvent.originalEvent.keyCode == 46) {
       // an event can be string or an object with attribute type
       this.dispatchEvent(
-          new DeleteInteractionEvent(
-              'deleteend',
-              this.layer_,
-              this.features_,
-              event.coordinate));
+        new DeleteInteractionEvent(
+          'deleteend',
+          this.layer_,
+          this.features_,
+          event.coordinate));
       return true;
     }
   }
@@ -45,51 +45,46 @@ DeleteInteraction.handleDownEvent_ = function(event) {
   if (this.lastFeature_) {
     DeleteInteraction.handleMoveEvent_.call(this, event);
     this.dispatchEvent(
-            new DeleteInteractionEvent(
-                'deleteend',
-                this.layer_,
-                this.features_,
-                event.coordinate));
+      new DeleteInteractionEvent(
+        'deleteend',
+        this.layer_,
+        this.features_,
+        event.coordinate));
     return true;
   }
   return false;
 };
 
 DeleteInteraction.handleMoveEvent_ = function(event) {
-  this.map_ = event.map;
+  this.map_  = event.map;
   const elem = this.map_.getTargetElement();
-  if (this.startCursor_ === undefined) {
-    this.startCursor_ = elem.style.cursor;
-  }
+  if (undefined === this.startCursor_) { this.startCursor_ = elem.style.cursor }
   const intersectingFeature = this.map_.forEachFeatureAtPixel(event.pixel, (feature, layer) =>  {
-        ///check if is the same layero of editing
-        feature = (layer == this.layer_) ? feature : null;
-        return feature;
-      });
+    ///check if is the same layer of editing
+    feature = (layer == this.layer_) ? feature : null;
+    return feature;
+  });
   if (intersectingFeature) {
     this.previousCursor_ = elem.style.cursor;
-    elem.style.cursor =  'pointer';
+    elem.style.cursor    =  'pointer';
 
   } else {
-    elem.style.cursor = this.previousCursor_ !== undefined ?
-        this.previousCursor_ : '';
+    elem.style.cursor = undefined !== this.previousCursor_
+      ? this.previousCursor_
+      : '';
     this.previousCursor_ = undefined;
   }
 };
 
 DeleteInteraction.prototype.featuresAtPixel_ = function(pixel, map) {
   let found = null;
-  const intersectingFeature = map.forEachFeatureAtPixel(pixel, (feature) => {
-    return feature;
-  });
-  if (this.features_ &&
-     _.includes(this.features_.getArray(), intersectingFeature)) {
+  const intersectingFeature = map.forEachFeatureAtPixel(pixel, feature => feature);
+  if (this.features_ && this.features_.getArray().includes(intersectingFeature)) {
     found = intersectingFeature;
   }
   return found;
 };
 
-
 DeleteInteraction.prototype.clear = function() {
   let elem;
   if (this.map_) {
@@ -98,5 +93,4 @@ DeleteInteraction.prototype.clear = function() {
   }
 };
 
-
 module.exports = DeleteInteraction;
diff --git a/src/app/g3w-ol/interactions/measureinteraction.js b/src/app/g3w-ol/interactions/measureinteraction.js
index 7b0a655f5..2456b9b04 100644
--- a/src/app/g3w-ol/interactions/measureinteraction.js
+++ b/src/app/g3w-ol/interactions/measureinteraction.js
@@ -12,12 +12,13 @@ const MeasureIteraction = function(options={}) {
   this._featureGeometryChangelistener;
   this._poinOnMapMoveListener;
   this.testTooltip;
-  this._helpMsg = options.help;
-  this._projection = options.projection;
-  this.feature = options.feature;
-  const drawColor = options.drawColor || 'rgba(0, 0, 0, 0.5)';
+  this._helpTooltipElement;
+  this._helpMsg          = options.help;
+  this._projection       = options.projection;
+  this.feature           = options.feature;
+  const drawColor        = options.drawColor || 'rgba(0, 0, 0, 0.5)';
   const useSphereMethods = needUseSphereMethods(this._projection);
-  const measureStyle = new ol.style.Style({
+  const measureStyle     = new ol.style.Style({
     fill: new ol.style.Fill({
       color: 'rgba(255, 255, 255, 0.2)'
     }),
@@ -37,14 +38,13 @@ const MeasureIteraction = function(options={}) {
     })
   });
   const geometryType = options.geometryType || 'LineString';
-  const source = new ol.source.Vector();
-  this._helpTooltipElement;
-  this._map = null;
-  this._feature = null;
-  this._layer = new ol.layer.Vector({
+  const source       = new ol.source.Vector();
+  this._map          = null;
+  this._feature      = null;
+  this._layer        = new ol.layer.Vector({
     source,
     style() {
-      const styles = [
+      return [
         // linestring
         new ol.style.Style({
           stroke: new ol.style.Stroke({
@@ -56,7 +56,6 @@ const MeasureIteraction = function(options={}) {
           })
         })
       ];
-      return styles;
     }
   });
 
@@ -65,6 +64,7 @@ const MeasureIteraction = function(options={}) {
     type: geometryType,
     style: measureStyle
   });
+
   this.set('beforeRemove', this.clear);
   this.set('layer', this._layer);
   // register event on two action
@@ -97,21 +97,24 @@ proto._clearMessagesAndListeners = function() {
   this._feature = null;
   // unset tooltip so that a new one can be created
   if (this._map) {
-    this._measureTooltipElement = null;
+    this._measureTooltipElement        = null;
     this._helpTooltipElement.innerHTML = '';
+
     this._helpTooltipElement.classList.add('hidden');
+
     ol.Observable.unByKey(this._featureGeometryChangelistener);
     ol.Observable.unByKey(this._poinOnMapMoveListener);
+
     $(document).off('keydown', this._keyDownEventHandler);
   }
 };
 
 proto._removeLastPoint = function(event) {
   const geom = this._feature.getGeometry();
-  if (event.keyCode === 46) {
+  if (46 === event.keyCode) {
     if( geom instanceof ol.geom.Polygon && geom.getCoordinates()[0].length > 2) {
       this.removeLastPoint();
-    } else if(geom instanceof ol.geom.LineString && geom.getCoordinates().length > 1) {
+    } else if (geom instanceof ol.geom.LineString && geom.getCoordinates().length > 1) {
       this.removeLastPoint();
     }
   }
@@ -122,12 +125,12 @@ proto._drawStart = function(evt) {
   this._map = this.getMap();
   this._map.removeLayer(this._layer);
   this._feature = evt.feature;
-  this.feature && this._feature.setGeometry(this.feature.getGeometry());
+  if (this.feature) { this._feature.setGeometry(this.feature.getGeometry()) }
   this._keyDownEventHandler = this._removeLastPoint.bind(this);
   $(document).on('keydown', this._keyDownEventHandler);
   this._layer.getSource().clear();
   this._poinOnMapMoveListener = this._map.on('pointermove', evt => {
-    if (evt.dragging) return;
+    if (evt.dragging) { return }
     if (this._feature && this._helpMsg) {
       const helpMsg = t(this._helpMsg);
       this._helpTooltipElement.innerHTML = helpMsg;
@@ -140,8 +143,7 @@ proto._drawStart = function(evt) {
 };
 
 proto._drawEnd = function() {
-  const {tooltip}= this.measureTooltip;
-  setMeasureTooltipStatic(tooltip);
+  setMeasureTooltipStatic(this.measureTooltip.tooltip);
   this._clearMessagesAndListeners();
   this._map.addLayer(this._layer);
 };
@@ -150,15 +152,16 @@ proto._drawEnd = function() {
  * Creates a new help tooltip
  */
 proto._createHelpTooltip = function() {
-  this._helpTooltipElement && this._helpTooltipElement.parentNode.removeChild(this._helpTooltipElement);
-  this._helpTooltip && this._map.removeOverlay(this._helpTooltip);
-  this._helpTooltipElement = document.createElement('div');
+  if (this._helpTooltipElement) { this._helpTooltipElement.parentNode.removeChild(this._helpTooltipElement) }
+  if (this._helpTooltip) { this._map.removeOverlay(this._helpTooltip) }
+  this._helpTooltipElement           = document.createElement('div');
   this._helpTooltipElement.className = 'mtooltip hidden';
-  this._helpTooltip = new ol.Overlay({
+  this._helpTooltip                  = new ol.Overlay({
     element: this._helpTooltipElement,
     offset: [15, 0],
     positioning: 'center-left'
   });
+
   this._map.addOverlay(this._helpTooltip);
 };
 
@@ -166,15 +169,8 @@ proto._createHelpTooltip = function() {
  * Creates a new measure tooltip
  */
 proto._createMeasureTooltip = function() {
-  this.measureTooltip && removeMeasureTooltip({
-    ...this.measureTooltip,
-    map: this._map
-  });
-  this.measureTooltip = createMeasureTooltip({
-      map: this._map,
-      feature: this._feature
-    })
-
+  if (this.measureTooltip) { removeMeasureTooltip({ ...this.measureTooltip, map: this._map }) }
+  this.measureTooltip = createMeasureTooltip({ map: this._map, feature: this._feature });
 };
 // END MEASURE CONTROLS //
 
diff --git a/src/app/g3w-ol/interactions/pickcoordinatesinteraction.js b/src/app/g3w-ol/interactions/pickcoordinatesinteraction.js
index 670aa5614..b874de132 100644
--- a/src/app/g3w-ol/interactions/pickcoordinatesinteraction.js
+++ b/src/app/g3w-ol/interactions/pickcoordinatesinteraction.js
@@ -1,19 +1,17 @@
-const PickCoordinatesEventType = {
-  PICKED: 'picked'
-};
+const PickCoordinatesEventType = { PICKED: 'picked' };
 
 const PickCoordinatesEvent = function(type, coordinate) {
-  this.type = type;
+  this.type       = type;
   this.coordinate = coordinate;
 };
 
 const PickCoordinatesInteraction = function(options) {
   this.previousCursor_ = null;
-  this._centerMap = null;
+  this._centerMap      = null;
 
   ol.interaction.Pointer.call(this, {
     handleDownEvent: PickCoordinatesInteraction.handleDownEvent_,
-    handleUpEvent: PickCoordinatesInteraction.handleUpEvent_,
+    handleUpEvent:   PickCoordinatesInteraction.handleUpEvent_,
     handleMoveEvent: PickCoordinatesInteraction.handleMoveEvent_
   });
 };
@@ -22,28 +20,26 @@ ol.inherits(PickCoordinatesInteraction, ol.interaction.Pointer);
 
 PickCoordinatesInteraction.handleDownEvent_ = function(event) {
   this._centerMap = event.map.getView().getCenter();
-  // set timeout to avoid to block pan
+  // set timeout to avoid blocking pan
   setTimeout(() => {
     if (this._centerMap === event.map.getView().getCenter()) {
       PickCoordinatesInteraction.handleUpEvent_.call(this, event);
     }
   }, 300);
-  // return false to avoid  start of drag event
+  // return false to avoid start of drag event
   return false
 };
 
 PickCoordinatesInteraction.handleUpEvent_ = function(event) {
   this.dispatchEvent(
-          new PickCoordinatesEvent(
-              PickCoordinatesEventType.PICKED,
-              event.coordinate));
+    new PickCoordinatesEvent( PickCoordinatesEventType.PICKED, event.coordinate )
+  );
   // it used to stop drag event
   return false;
 };
 
-PickCoordinatesInteraction.handleMoveEvent_ = function(event) {
-  const elem = event.map.getTargetElement();
-  elem.style.cursor =  'pointer';
+PickCoordinatesInteraction.handleMoveEvent_ = function(e) {
+  e.map.getTargetElement().style.cursor = 'pointer';
   return true;
 };
 
@@ -54,17 +50,14 @@ PickCoordinatesInteraction.prototype.shouldStopEvent = function() {
 PickCoordinatesInteraction.prototype.setActive = function(active) {
   const map = this.getMap();
   if (map) {
-    const elem = map.getTargetElement();
+    const elem        = map.getTargetElement();
     elem.style.cursor = '';
   }
   ol.interaction.Pointer.prototype.setActive.call(this,active);
 };
 
-PickCoordinatesInteraction.prototype.setMap = function(map){
-  if (!map) {
-    const elem = this.getMap().getTargetElement();
-    elem.style.cursor = '';
-  }
+PickCoordinatesInteraction.prototype.setMap = function(map) {
+  if (!map) { this.getMap().getTargetElement().style.cursor = '' }
   ol.interaction.Pointer.prototype.setMap.call(this,map);
 };
 
diff --git a/src/app/g3w-ol/interactions/pickfeatureinteraction.js b/src/app/g3w-ol/interactions/pickfeatureinteraction.js
index 1eed19d17..a2439fe2c 100644
--- a/src/app/g3w-ol/interactions/pickfeatureinteraction.js
+++ b/src/app/g3w-ol/interactions/pickfeatureinteraction.js
@@ -1,44 +1,42 @@
-const PickFeatureEventType = {
-  PICKED: 'picked'
-};
+const PickFeatureEventType = { PICKED: 'picked' };
 
 const PickFeatureEvent = function(type, coordinate, layer, feature) {
-  this.type = type;
-  this.feature = feature;
+  this.type       = type;
+  this.feature    = feature;
   this.coordinate = coordinate;
-  this.layer = layer;
+  this.layer      = layer;
 };
 
-const PickFeatureInteraction = function(options={}) {
+const PickFeatureInteraction = function(options = {}) {
   ol.interaction.Pointer.call(this, {
     handleDownEvent: PickFeatureInteraction.handleDownEvent_,
-    handleUpEvent: PickFeatureInteraction.handleUpEvent_,
+    handleUpEvent:   PickFeatureInteraction.handleUpEvent_,
     handleMoveEvent: PickFeatureInteraction.handleMoveEvent_
   });
-  const {features} = options;
-  this.features_ = Array.isArray(features) && features.length && features || null;
-  this.layers_ = options.layers || null;
+  const { features } = options;
+  this.features_      = Array.isArray(features) && features.length && features || null;
+  this.layers_        = options.layers || null;
   this.pickedFeature_ = null;
-  this.pickedLayer_ = null;
-  this.layerFilter_ = (layer) =>  {
-    const include = _.includes(this.layers_, layer);
+  this.pickedLayer_   = null;
+  this.layerFilter_   = layer => {
+    const include = this.layers_.includes(layer);
     this.pickedLayer_ = include && layer;
     return include;
   };
 };
 ol.inherits(PickFeatureInteraction, ol.interaction.Pointer);
 
-PickFeatureInteraction.handleDownEvent_ = function(event) {
-  this.pickedFeature_ = this.featuresAtPixel_(event.pixel, event.map);
+PickFeatureInteraction.handleDownEvent_ = function(e) {
+  this.pickedFeature_ = this.featuresAtPixel_(e.pixel, e.map);
   return this.pickedFeature_;
 };
 
-PickFeatureInteraction.handleUpEvent_ = function(event) {
-  if(this.pickedFeature_){
+PickFeatureInteraction.handleUpEvent_ = function(e) {
+  if (this.pickedFeature_) {
     this.dispatchEvent(
       new PickFeatureEvent(
         PickFeatureEventType.PICKED,
-        event.coordinate,
+        e.coordinate,
         this.pickedLayer_,
         this.pickedFeature_)
     );
@@ -46,37 +44,33 @@ PickFeatureInteraction.handleUpEvent_ = function(event) {
   return true;
 };
 
-PickFeatureInteraction.handleMoveEvent_ = function(event) {
-  const elem = event.map.getTargetElement();
-  const intersectingFeature = this.featuresAtPixel_(event.pixel, event.map);
-  elem.style.cursor = intersectingFeature ?  'pointer': '';
+PickFeatureInteraction.handleMoveEvent_ = function(e) {
+  const intersectingFeature = this.featuresAtPixel_(e.pixel, e.map);
+  e.map.getTargetElement().style.cursor = intersectingFeature ? 'pointer': '';
 };
 
 PickFeatureInteraction.prototype.featuresAtPixel_ = function(pixel, map) {
   let featureFound = null;
-  const intersectingFeature = map.forEachFeatureAtPixel(pixel, (feature) => {
-        if (this.features_) {
-          if (this.features_.indexOf(feature) > -1)return feature
-          else return null;
-        }
-        return feature;
-      }, {
-        layerFilter: this.layerFilter_,
-        hitTolerance: (isMobile && isMobile.any) ? 10 : 0
-      });
-  if (intersectingFeature) featureFound = intersectingFeature;
+  const intersectingFeature = map.forEachFeatureAtPixel(pixel, feature => {
+    if (this.features_) {
+      if (this.features_.indexOf(feature) > -1) { return feature }
+      else { return null }
+    }
+    return feature;
+  }, {
+    layerFilter:  this.layerFilter_,
+    hitTolerance: (isMobile && isMobile.any) ? 10 : 0
+  });
+  if (intersectingFeature) { featureFound = intersectingFeature }
   return featureFound;
 };
 
-PickFeatureInteraction.prototype.shouldStopEvent = function(){
+PickFeatureInteraction.prototype.shouldStopEvent = function() {
   return false;
 };
 
-PickFeatureInteraction.prototype.setMap = function(map){
-  if (!map) {
-    const elem = this.getMap().getTargetElement();
-    elem.style.cursor = '';
-  }
+PickFeatureInteraction.prototype.setMap = function(map) {
+  if (!map) { this.getMap().getTargetElement().style.cursor = ''}
   ol.interaction.Pointer.prototype.setMap.call(this,map);
 };
 
diff --git a/src/app/g3w-ol/layers/bases.js b/src/app/g3w-ol/layers/bases.js
index 9e495e9bd..ba0fd7f5e 100755
--- a/src/app/g3w-ol/layers/bases.js
+++ b/src/app/g3w-ol/layers/bases.js
@@ -1,21 +1,29 @@
 const RasterLayers = require('g3w-ol/layers/rasters');
+
 const BaseLayers = {};
 
 BaseLayers.OSM = {};
 
-BaseLayers.OSM.get = function({title, id, url}={}){
+BaseLayers.OSM.get = function({ title, id, url } = {}) {
   return new ol.layer.Tile({
-    source: new ol.source.OSM({
-      url
-    }),
-    id: id || 'osm',
-    title: title || 'OSM',
+    source:  new ol.source.OSM({ url }),
+    id:      id || 'osm',
+    title:   title || 'OSM',
     basemap: true
   });
 };
 
 BaseLayers.TMS =  {
-  get({visible=false, url=null, source_type="xyz", minZoom, maxZoom, projection, attributions, crossOrigin='anonymous'}={}) {
+  get({
+    visible = false,
+    url = null,
+    source_type = "xyz",
+    minZoom,
+    maxZoom,
+    projection,
+    attributions,
+    crossOrigin = 'anonymous' } = {}
+  ) {
     let layer;
     switch(source_type) {
       case 'xyz':
@@ -44,7 +52,14 @@ BaseLayers.TMS =  {
 };
 
 BaseLayers.WMS = {
-  get({url, projection, attributions, layers, singleTile=false, opacity=1}){
+  get({
+    url,
+    projection,
+    attributions,
+    layers,
+    singleTile = false,
+    opacity = 1
+  } = {}) {
     return RasterLayers.WMSLayer({
       url,
       projection,
@@ -73,13 +88,13 @@ BaseLayers.WMTS = {
     } = {}) {
     if (matrixSet) {
       const projectionExtent = projection.getExtent();
-      const resolutions = new Array(14);
-      const size = ol.extent.getWidth(projectionExtent) / 256;
-      const matrixIds = new Array(14);
+      const resolutions      = new Array(14);
+      const size             = ol.extent.getWidth(projectionExtent) / 256;
+      const matrixIds        = new Array(14);
       for (var z = 0; z < 14; ++z) {
         // generate resolutions and matrixIds arrays for this WMTS
         resolutions[z] = size / Math.pow(2, z);
-        matrixIds[z] = z;
+        matrixIds[z]   = z;
       }
       return new ol.layer.Tile({
         opacity,
@@ -125,7 +140,7 @@ BaseLayers.WMTS = {
 
 BaseLayers.BING = {};
 
-BaseLayers.BING.get = (config={})=>{
+BaseLayers.BING.get = ( config = {} ) => {
   const imagerySet = config.imagerySet || 'Aerial'; // 'Road', 'AerialWithLabels', 'Aerial'
   return new ol.layer.Tile({
     name: imagerySet,
diff --git a/src/app/g3w-ol/layers/rasters.js b/src/app/g3w-ol/layers/rasters.js
index 3000b3b10..ab72a32e3 100755
--- a/src/app/g3w-ol/layers/rasters.js
+++ b/src/app/g3w-ol/layers/rasters.js
@@ -4,7 +4,11 @@ const DPI          = getDPI();
 
 const RasterLayers = {};
 
-const loadImageTileFunction = function({method='GET', type='image', sourceOptions={}}) {
+const loadImageTileFunction = function({
+  method = 'GET',
+  type = 'image',
+  sourceOptions = {}
+}) {
   window.URL = window.URL || window.webkitURL;
   sourceOptions[`${type}LoadFunction`] = function(imageTile, url) {
     const xhr = new XMLHttpRequest();
@@ -65,7 +69,7 @@ RasterLayers.TiledMapProxyWMSLayer = function(opts={}) {
   });
 };
 
-RasterLayers.WMSLayer = function(layerObj, extraParams={}, method='GET') {
+RasterLayers.WMSLayer = function(layerObj, extraParams = {}, method = 'GET') {
   return RasterLayers._WMSLayer({
     layerObj,
     extraParams,
@@ -73,50 +77,56 @@ RasterLayers.WMSLayer = function(layerObj, extraParams={}, method='GET') {
   });
 };
 
-RasterLayers.ImageArgisMapServer = function(options={}) {
-  return  new ol.layer.Image({
-    source: new ol.source.ImageArcGISRest({
-      ratio: options.ratio,
-      params: {
-        FORMAT: options.format
-      },
-      url: options.url
+RasterLayers.ImageArgisMapServer = function(options = {}) {
+  return new ol.layer.Image({
+    source:   new ol.source.ImageArcGISRest({
+      ratio:  options.ratio,
+      params: { FORMAT: options.format },
+      url:    options.url
     })
   })
 };
 
-RasterLayers.TiledArgisMapServer = function(options={}) {
-  const {url, visible=true, extent, projection, attributions, crossOrigin} = options;
+RasterLayers.TiledArgisMapServer = function(options = {}) {
+  const {
+    url,
+    visible = true,
+    extent,
+    projection,
+    attributions,
+    crossOrigin
+  } = options;
+
   const source = new ol.source.TileArcGISRest({
     url,
     projection,
     attributions,
     crossOrigin
   });
-  return  new ol.layer.Tile({
+
+  return new ol.layer.Tile({
     extent,
     visible,
     source
   })
 };
 
-RasterLayers._WMSLayer = function(options={}) {
-
+RasterLayers._WMSLayer = function(options = {}) {
   const {
     layerObj,
-    method='GET',
+    method = 'GET',
     extraParams,
-    tiled=false
+    tiled = false
   } = options;
 
   const {
-    iframe_internal=false,
-    layers='',
-    version='1.3.0',
-    sld_version='1.1.0',
+    iframe_internal = false,
+    layers          = '',
+    version         = '1.3.0',
+    sld_version     = '1.1.0',
     id,
     name,
-    opacity=1.0,
+    opacity         = 1.0,
     visible,
     extent,
     maxResolution,
@@ -127,8 +137,8 @@ RasterLayers._WMSLayer = function(options={}) {
   } = layerObj;
 
   let params = {
-    LAYERS: layers,
-    VERSION: version,
+    LAYERS:      layers,
+    VERSION:     version,
     TRANSPARENT: true,
     SLD_VERSION: sld_version,
     DPI
@@ -139,14 +149,12 @@ RasterLayers._WMSLayer = function(options={}) {
    *
    * @since 3.7.11
    */
-  if (undefined !== format) {
-    params.FORMAT = format
-  }
+  if (undefined !== format) { params.FORMAT = format }
 
   const sourceOptions = {
-    url: layerObj.url,
-    params: Object.assign({}, params, extraParams),
-    ratio: 1,
+    url:        layerObj.url,
+    params:     Object.assign({}, params, extraParams),
+    ratio:      1,
     projection: (layerObj.projection) ? layerObj.projection.getCode() : null
   };
 
@@ -173,21 +181,20 @@ RasterLayers._WMSLayer = function(options={}) {
 
 };
 
-RasterLayers.XYZLayer = function(options={}, method='GET') {
+RasterLayers.XYZLayer = function( options = {}, method = 'GET') {
   const iframe_internal = options.iframe_internal || false;
   const {
     url,
     projection,
     maxZoom,
     minZoom,
-    visible=true,
+    visible = true,
     crossOrigin,
     cache_provider, /** @since 3.10.0 **/
   } = options;
   //in case of no url provide, skip
-  if (!url) {
-    return;
-  }
+  if (!url) { return }
+
   const sourceOptions = {
     url,
     maxZoom,
@@ -205,7 +212,7 @@ RasterLayers.XYZLayer = function(options={}, method='GET') {
   }
   /** @since 3.10.0 add cache_provider **/
   if ('degrees' === projection.getUnits() || 'mapproxy' === cache_provider) {
-    const extent = projection.getExtent();
+    const extent      = projection.getExtent();
     const resolutions = ol.tilegrid.createXYZ({extent, maxZoom}).getResolutions();
     // Need to remove the first resolution because in this version of ol createXYZ doesn't accept maxResolution options.
     // The extent of EPSG:4326 is not squared [-180, -90, 180, 90] as EPSG:3857 so the resolution is calculated
@@ -215,11 +222,10 @@ RasterLayers.XYZLayer = function(options={}, method='GET') {
     sourceOptions.tileGrid = new ol.tilegrid.TileGrid({ extent, resolutions});
   }
 
-  const source = new ol.source.XYZ(sourceOptions);
   return new ol.layer.Tile({
     visible,
     projection,
-    source
+    source: new ol.source.XYZ(sourceOptions)
   });
 };
 
diff --git a/src/app/g3w-ol/projection/projection.js b/src/app/g3w-ol/projection/projection.js
index 325467193..c81692468 100644
--- a/src/app/g3w-ol/projection/projection.js
+++ b/src/app/g3w-ol/projection/projection.js
@@ -1,15 +1,14 @@
-const Projection = function(options={}) {
-  if (!options.crs) return null;
+const Projection = function(options = {}) {
+  if (!options.crs) { return null }
   // structure of information crs from server set on each layer and base layer
-  const {epsg, proj4:proj4def, geographic=false, axisinverted=false, extent} = options.crs;
-  proj4def && proj4.defs(epsg, proj4def);
+  const { epsg, proj4:proj4def, geographic = false, axisinverted = false, extent } = options.crs;
+  if (proj4def) { proj4.defs(epsg, proj4def) }
   this._axisOrientation = axisinverted ? 'neu' : 'enu';
-  const degrees = geographic;
   ol.proj.Projection.call(this, {
     code: epsg,
     extent,
     axisOrientation: this._axisOrientation,
-    units: degrees ? 'degrees' : 'm'
+    units: geographic ? 'degrees' : 'm'
   });
 };
 
@@ -22,7 +21,7 @@ proto.getAxisOrientation = function() {
 };
 
 proto.isInvertedAxisOrientation = function() {
-  return this._axisOrientation === 'neu';
+  return 'neu' === this._axisOrientation;
 };
 
 proto.getOlProjection = function() {};
diff --git a/src/app/g3w-ol/projection/projections.js b/src/app/g3w-ol/projection/projections.js
index b7fe9be47..31dfd4f52 100644
--- a/src/app/g3w-ol/projection/projections.js
+++ b/src/app/g3w-ol/projection/projections.js
@@ -13,14 +13,10 @@ const Projections = {
     return ol.proj.get(epsg);
   },
 
-  get(crs={}) {
+  get(crs = {}) {
     const cachedProjection = this.isRegistered(crs.epsg);
-    if (cachedProjection) {
-      return cachedProjection;
-    }
-    const projection = new Projection({
-      crs
-    });
+    if (cachedProjection) { return cachedProjection }
+    const projection = new Projection({ crs });
     ol.proj.addProjection(projection);
     ol.proj.proj4.register(proj4);
     return projection;
@@ -37,13 +33,12 @@ const Projections = {
     return new Promise((resolve, reject) => {
       let projection = this.isRegistered(epsg);
       // check if already register
-      if (projection) {
-        resolve(projection);
-      } else {
+      if (projection) { resolve(projection) }
+      else {
         XHR.get({url: `${API_BASE_URLS.CRS}${epsg.split(':')[1]}`})
-          .then(({result, data}) => {
+          .then(({ result, data }) => {
             if (result)  {
-              data.epsg = normalizeEpsg(data.epsg);
+              data.epsg  = normalizeEpsg(data.epsg);
               projection = this.get(data);
               ol.proj.proj4.register(proj4);
               resolve(projection);
diff --git a/src/app/gui/catalog/catalogservice.js b/src/app/gui/catalog/catalogservice.js
deleted file mode 100644
index 2a95cefb1..000000000
--- a/src/app/gui/catalog/catalogservice.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import ProjectsRegistry from 'store/projects';
-import ApplicationService from 'services/application';
-
-const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-
-function CatalogService() {
-  this.state = {
-    prstate: ProjectsRegistry.state,
-    highlightlayers: false,
-    external: {
-      wms: [], // added by wms cside bar component
-      vector: [] // added to map controls for the moment
-    },
-    layerstrees: [],
-    layersgroups: []
-  };
-
-  this.setters = {
-
-    /**
-     * @param {{ layer: unknown, type: 'vector' }}
-     * 
-     * @fires CatalogService~addExternalLayer
-     * 
-     * @since 3.8.0
-     */
-    addExternalLayer({layer, type='vector'} = {}) {
-      layer.removable = true;
-      this.state.external[type].push(layer);
-    },
-
-    /**
-     * @param {{ name: string, type: 'vector' }}
-     * 
-     * @fires CatalogService~removeExternalLayer
-     * 
-     * @since 3.8.0
-     */
-    removeExternalLayer({name, type='vector'} = {}) {
-      this.state.external[type].filter((layer, index) => {
-        if (layer.name === name) {
-          this.state.external[type].splice(index, 1);
-          return true
-        }
-      });
-    },
-
-    /**
-     * @param {{ layer: unknown, type: unknown, selected: unknown }}
-     * 
-     * @fires CatalogService~setSelectedExternalLayer
-     * 
-     * @since 3.8.0
-     */
-    setSelectedExternalLayer({layer, type, selected}) {
-      this.state.external[type].forEach(externalLayer => {
-        if (typeof externalLayer.selected != "undefined")
-          externalLayer.selected = (layer === externalLayer) ? selected : false;
-      })
-    },
-
-  };
-
-  base(this);
-  const layersStores = CatalogLayersStoresRegistry.getLayersStores();
-
-  layersStores.forEach(layersStore => this.addLayersStoreToLayersTrees(layersStore));
-
-  CatalogLayersStoresRegistry.onafter('addLayersStore', layersStore => {
-    this.addLayersStoreToLayersTrees(layersStore)
-  });
-
-  CatalogLayersStoresRegistry.onafter('removeLayersStore', layersStore => {
-    this.state.layerstrees.find((layersTree, idx) => {
-      if (layersTree.storeid === layersStore.getId()) {
-        this.state.layerstrees.splice(idx, 1);
-        return true;
-      }
-    });
-  });
-  CatalogLayersStoresRegistry.onafter('removeLayersStores', () => {
-    this.state.layerstrees.forEach((layersTree, idx) => {
-      this.state.layerstrees.splice(idx, 1);
-    });
-  });
-}
-
-inherit(CatalogService, G3WObject);
-
-const proto = CatalogService.prototype;
-
-proto.createLayersGroup = function({title = 'Layers Group', layers =[]} = {}) {
-  const nodes = [];
-  layers.forEach(layer => nodes.push(layer));
-  return {
-    title,
-    nodes
-  }
-};
-
-proto.getMajorQgisVersion = function() {
-  return ProjectsRegistry.getCurrentProject().getQgisVersion({
-    type: 'major'
-  });
-};
-
-// method to add a custom layers group
-proto.addLayersGroup = function(layersGroup) {
-  this.state.layersgroups.push(layersGroup);
-};
-
-proto.addLayersStoreToLayersTrees = function(layersStore) {
-  this.state.layerstrees.push({
-    tree: layersStore.getLayersTree(),
-    storeid: layersStore.getId()
-  });
-};
-
-proto.changeMapTheme = async function(map_theme) {
-  // set is changing project view
-  ApplicationService.changeProjectView(true);
-  const {currentProject} = this.state.prstate;
-  const rootNode = this.state.layerstrees[0];
-  rootNode.checked = true;
-  const layerstree = rootNode.tree[0].nodes;
-  const changeMapThemeProjectObj = await currentProject.setLayersTreePropertiesFromMapTheme({
-    map_theme,
-    layerstree,
-    rootNode
-  });
-  ApplicationService.changeProjectView(false);
-  return changeMapThemeProjectObj;
-};
-
-/**
- * @param {{ type: 'vector' }}
- * 
- * @returns {unknown}
- * 
- * @since 3.8.0
- */
-proto.getExternalLayers = function({type='vector'}) {
-  return this.state.external[type];
-};
-
-/**
- * @param {{ type: 'vector' }}
- * 
- * @returns {unknown}
- * 
- * @since 3.8.0
- */
-proto.getExternalSelectedLayers = function({type='vector'}) {
-  return this.getExternalLayers({type}).filter(layer => layer.selected);
-};
-
-/**
- * @param {{ id: string, type: 'vector' }}
- * 
- * @returns {unknown}
- * 
- * @since 3.8.0
- */
-proto.getExternalLayerById = function({id, type='vector'}) {
-  return this.state.external[type].find(layer => layer.id === id);
-};
-
-/**
- * @param {{ id: string, type: unknown }}
- * 
- * @returns {boolean}
- * 
- * @since 3.8.0
- */
-proto.isExternalLayerSelected = function({id, type}) {
-  const externalLayer = this.getExternalLayerById({ id, type });
-  return !!(externalLayer && externalLayer.selected);
-};
-
-module.exports = CatalogService;
diff --git a/src/app/gui/catalog/vue/catalog.js b/src/app/gui/catalog/vue/catalog.js
index 3b4177b01..d27c5ab10 100755
--- a/src/app/gui/catalog/vue/catalog.js
+++ b/src/app/gui/catalog/vue/catalog.js
@@ -1,54 +1,7 @@
-import * as catalogComponentOptions from 'components/Catalog.vue';
-import * as catalogLayersGroupComponentOptions from 'components/CatalogLayersGroup.vue';
-import * as catalogTristateTreeComponentOptions from 'components/CatalogTristateTree.vue';
-import * as catalogLayersLegendComponentOptions from 'components/CatalogLayersLegend.vue';
-import * as catalogLayersLegendItemsComponentOptions from 'components/CatalogLayersLegendItems.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-import ComponentsRegistry from 'store/components';
-import GUI from 'services/gui';
-
-
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-const Service = require('gui/catalog/catalogservice');
-
-const InternalComponent = Vue.extend(catalogComponentOptions);
-
-Vue.component('g3w-catalog', catalogComponentOptions);
-Vue.component('layers-group', catalogLayersGroupComponentOptions);
-Vue.component('tristate-tree', catalogTristateTreeComponentOptions);
-Vue.component('layerslegend', catalogLayersLegendComponentOptions);
-Vue.component('layerslegend-items', catalogLayersLegendItemsComponentOptions);
-
-function CatalogComponent(options={}) {
-  options.resizable = true;
-  base(this, options);
-  const {legend}  = options.config;
-  this.title = "catalog";
-  this.mapComponentId = options.mapcomponentid;
-  const service = options.service || new Service;
-  this.setService(service);
-  this.setInternalComponent(new InternalComponent({
-    service,
-    legend
-  }));
-  this.internalComponent.state = this.getService().state;
-  let listenToMapVisibility = map => {
-    const mapService = map.getService();
-    this.state.visible = !mapService.state.hidden;
-    mapService.onafter('setHidden', hidden => {
-      this.state.visible = !mapService.state.hidden;
-      this.state.expanded = true;
-    })
-  };
-  if (this.mapComponentId) {
-    const map = GUI.getComponent(this.mapComponentId);
-    !map && ComponentsRegistry.on('componentregistered', component =>
-      (component.getId() === this.mapComponentId) && listenToMapVisibility(component))
-    || listenToMapVisibility(map);
-  }
-}
-
-inherit(CatalogComponent, Component);
-
-module.exports = CatalogComponent;
+import vueComp from 'components/g3w-catalog';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/changemapmenu/changemapmenu.js b/src/app/gui/changemapmenu/changemapmenu.js
index f17e3ebb8..4ba1b2e19 100644
--- a/src/app/gui/changemapmenu/changemapmenu.js
+++ b/src/app/gui/changemapmenu/changemapmenu.js
@@ -1,23 +1,7 @@
 /**
  * @file
- * @since 3.8.0
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
  */
 
-import * as vueComponentOptions from 'components/ChangeMapMenu.vue';
-
-const { base, inherit, merge } = require('utils');
-const Component = require('gui/component/component');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function ChangeMapMenuComponent(options={}) {
-  options.id = 'changemapmenu';
-  base(this, options);
-  this.state.visible = true;
-  merge(this, options);
-  this.internalComponent = new InternalComponent();
-}
-inherit(ChangeMapMenuComponent, Component);
-
-module.exports = ChangeMapMenuComponent;
-
+import vueComp from 'components/g3w-changemapmenu';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/component/component.js b/src/app/gui/component/component.js
index c2f6ab21b..d4561527e 100644
--- a/src/app/gui/component/component.js
+++ b/src/app/gui/component/component.js
@@ -1,409 +1,7 @@
-const { 
-  base,
-  inherit,
-  merge,
-  noop,
-  capitalize_first_letter,
-  resolve
-}               = require('utils');
-const G3WObject = require('core/g3wobject');
-
-/** @deprecated */
-const _cloneDeep = require('lodash.clonedeep');
-
-/**
- * Component class
- * 
- * @param { Object} options
- * @param { number } options.id 
- * @param { string } options.title
- * @param { boolean } options.visible
- * @param { boolean } options.open
- * @param { boolean } options.resizable
- * @param { null | unknown } options.info
- * @param { boolean } options.loading
- * @param { boolean } options.disabled
- * @param { boolean } options.closewhenshowviewportcontent
- * @param options.events
- */
-const Component = function(options = {}) {
-
-  const {
-    id                           = Math.random() * 1000,
-    title                        = '',
-    visible                      = true,
-    open                         = false,
-    resizable                    = false,
-    info                         = null,
-    loading                      = false,
-    disabled                     = false,
-    closewhenshowviewportcontent = true,
-  } = options;
-
-  this._firstLayout = true;
-
-  /** internal VUE component */
-  this.internalComponent = null;
-
-  /** @type { Array } */
-  this._components = [];
-
-  /** @type { string } */
-  this.id = id;
-
-  /** @type { string } */
-  this.title = title;
-
-  this.state = {
-    visible,
-    open,
-    resizable,
-    info,
-    loading,
-    disabled,
-    closewhenshowviewportcontent,
-    sizes: {
-      width:0,
-      height:0
-    }
-  };
-
-  this.setters = {
-
-    setOpen(bool) {
-      this.state.open = bool;
-      this._setOpen(bool);
-    },
-
-    setVisible(bool) {
-      this.state.visible = bool;
-      this._setVisible(bool);
-    },
-
-    setLoading(bool=false) {
-      this.state.loading = bool;
-    },
-
-    setDisabled(bool=false) {
-      this.state.disabled = bool;
-    },
-
-    reload() {
-      this._reload();
-    },
-
-  };
-
-  merge(this, options);
-
-  base(this);
-
-  // add events options
-  this.events = options.events;
-
-  if (this.events) {
-    this.handleEventsComponent();
-  }
-
-};
-
-inherit(Component, G3WObject);
-
-const proto = Component.prototype;
-
-/**
- * @param { Object } options
- * @param { Array } options.components
- * @param { Object } options.service
- * @param { Function } options.service.init
- * @param options.vueComponentObject
- * @param options.template
- * @param options.propsData
- */
-proto.init = function(options = {}) {
-  this.vueComponent = this.createVueComponent(options.vueComponentObject);
-  this._components  = options.components || [];
-
-  this.setService(options.service || noop);
-
-  if (this._service.init) {
-    this._service.init(options);
-  }
-
-  if (options.template) {
-    this.setInternalComponentTemplate(options.template);
-  }
-
-  this.setInternalComponent = function() {
-    this.internalComponent = new (Vue.extend(this.vueComponent))({
-      service: this._service,
-      template: options.template,
-      propsData: options.propsData
-    });
-    this.internalComponent.state = this.getService().state;
-  };
-
-  this.setInternalComponent();
-
-  return this;
-};
-
-proto.getId = function() {
-  return this.id;
-};
-
-proto.setId = function(id) {
-  this.id = id;
-};
-
-proto.getOpen = function() {
-  return this.state.open;
-};
-
-proto.closeWhenViewportContentIsOpen = function() {
-  return this.getOpen() && this.state.closewhenshowviewportcontent;
-};
-
-proto.getVisible = function() {
-  return this.state.visible;
-};
-
-proto.getTitle = function() {
-  return this.state.title;
-};
-
-proto.setTitle = function(title) {
-  this.state.title = title;
-};
-
-proto.getService = function() {
-  return this._service;
-};
-
-proto.setService = function(service) {
-  this._service = service;
-};
-
-proto.handleEventsComponent = function() {
-  if (this.events.open) {
-    const { when = "after", cb = () => {} } = this.events.open;
-    this[`on${when}`]('setOpen', bool => cb(bool));
-  }
-};
-
-proto.insertComponentAt = function(index, Component) {
-  this._components.splice(index, 0, Component);
-};
-
-proto.removeCompomentAt = function(index) {
-  this._components.splice(index, 1);
-};
-
-proto.addComponent = function(Component) {
-  this._components.push(Component);
-};
-
-proto.popComponent = function() {
-  return this._components.pop();
-};
-
-proto.removeComponent = function(Component) {
-  this._components.forEach((c, i) => {
-    if (c === Component) {
-      this.splice(i, 1);
-      return false;
-    }
-  })
-};
-
-proto.setComponents = function(components) {
-  this._components = Array.isArray(components) ? components: [];
-};
-
-proto.exendComponents = function(components) {
-  _.merge(this._components, components);
-};
-
-proto.getInternalComponent = function() {
-  return this.internalComponent;
-};
-
-proto.setInternalComponent = function(internalComponent, options={}) {
-  this.internalComponent = !internalComponent && this.internalComponentClass ? new this.internalComponentClass : internalComponent;
-  (options.events || []).forEach(e => this.internalComponent.$on(e.name, data => e.handler && e.handler(data) || this[`set${capitalize_first_letter(e.name)}`](data)))
-};
-
-proto.createVueComponent = function (vueObjOptions) {
-  return _cloneDeep(vueObjOptions);
-};
-
-proto.addInternalComponentData = function(data) {
-  _.merge(this.internalComponent, data)
-};
-
-proto.overwriteServiceMethod = function(methodName, method) {
-  this._service[methodName] = method;
-};
-
-proto.overwriteServiceMethods = function(methodsOptions) {
-  Object.entries(methodsOptions).forEach(([methodName, method]) => this.overwriteServiceMethod(methodName, method))
-};
-
-proto.extendService = function(serviceOptions) {
-  if (this._service) {
-    merge(this._service, serviceOptions);
-  }
-};
-
-proto.extendInternalComponent = function(internalComponentOptions) {
-  if(!this.vueComponent) {
-    this.vueComponent = internalComponentOptions;
-    return;
-  }
-  Object
-    .entries(internalComponentOptions)
-    .forEach(([key, value]) => {
-      switch (key) {
-        case 'methods':    this.extendInternalComponentMethods(value); break;
-        case 'components': this.extendInternalComponentComponents(value); break;
-        case 'computed':   merge(this.vueComponent[key], value); break;
-        case 'data':       merge(this.vueComponent[key], value); break;
-      }
-    });
-};
-
-proto.extendInternalComponentComponents = function(components) {
-  if (components) {
-    merge(this.vueComponent.components, components);
-  }
-};
-
-proto.extendComponents = function(components) {
-  this.extendInternalComponentComponents(components);
-};
-
-proto.addComponent = function(component) {
-  if (component) {
-    this.vueComponent.components[component.key] = component.value;
-  }
-};
-
-/** @TODO check if unusued (invalid call to "forEach.forEach") */
-proto.extendInternalComponentMethods = function(methods) {
-  if (methods) {
-    Object.entries(methods).forEach.forEach(([key, value]) => (!(value instanceof Function)) && delete methods[key]);
-    merge(this.vueComponent.methods, methods);
-  }
-};
-
-proto.extendInternalComponentComputed = function(computed) {
-  if (computed) {
-    Object.entries(computed).forEach(([key, value]) =>  (!(value instanceof Function)) && delete computed[key]);
-    merge(this.vueComponent.computed, computed);
-  }
-};
-
-proto.setInternalComponentTemplate = function(template) {
-  if (template) {
-    this.vueComponent.template = template;
-  }
-};
-
-proto.getInternalTemplate = function() {
-  return this.vueComponent.template;
-};
-
-proto.destroy = function() {};
-
-proto.click = function() {};
-
-// hook function to show componet
-proto.show = function() {};
-
-proto._setOpen = function(bool) {};
-
-proto._setVisible = function() {};
-
-proto._reload = function() {};
-
-/**
- * @param { Element | 'string' } parent DOM element
- * @param { boolean } append
- *  
- * @returns jquery promise
- * 
- * @fires internalComponent~ready
- * @fires mount
- */
-proto.mount = function(parent, append) {
-  const d = $.Deferred();
-
-  if (!this.internalComponent) {
-    this.setInternalComponent();
-  }
-
-  if (append) {
-    $(parent).append(this.internalComponent.$mount().$el);
-  }
-  
-  if (!append){
-    this.internalComponent.$mount(parent);
-  }
-
-  this.internalComponent.$nextTick(() => {
-    $(parent).localize();
-    this.emit('ready');
-    d.resolve(true);
-  });
-
-  // emit mount event
-  this.emit('mount');
-
-  return d.promise();
-};
-
-/**
- * @returns jquery promise
- * 
- * @fires unmount
- */
-proto.unmount = function() {
-  if (!this.internalComponent) {
-    return resolve();
-  }
-  if (this.state.resizable) {
-    this.internalComponent.$off('resize-component', this.internalComponent.layout);
-  }
-  this.state.open = false;
-  this.internalComponent.$destroy(true);  // destroy vue component
-  $(this.internalComponent.$el).remove(); // remove dom element
-  this.internalComponent = null;          // set internal componet to null (for GC)
-  this.emit('unmount');                   // emit unmount event
-  return resolve();
-};
-
-/**
- * @returns { Element } DOM element
- */
-proto.ismount = function() {
-  return this.internalComponent && this.internalComponent.$el;
-};
-
 /**
- * @param { number } width 
- * @param { number } height 
- * 
- * @listens internalComponent~resize-component
- * @fires internalComponent~resize-component
- * @fires layout
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
  */
-proto.layout = function(width, height) {
-  if (this.state.resizable && this._firstLayout) {
-    this.internalComponent.$on('resize-component', this.internalComponent.layout);
-    this._firstLayout = false;
-  }
-  this.internalComponent.$nextTick(() => { this.internalComponent.$emit('resize-component', { width, height }); });
-  this.emit('layout');
-};
 
-module.exports = Component;
\ No newline at end of file
+import vueComp from 'core/g3w-component';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/external/select2/options/autocomplete.js b/src/app/gui/external/select2/options/autocomplete.js
deleted file mode 100644
index fe1cb0840..000000000
--- a/src/app/gui/external/select2/options/autocomplete.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const { t } = require('core/i18n/i18n.service');
-
-module.exports = {
-  matcher: (params, data) => {
-    const searchItem = params.term ? params.term.toLowerCase(): params.term;
-    // If there are no search terms, return all of the data
-    if ($.trim(searchItem) === '') return data;
-    // Do not display the item if there is no 'text' property
-    if (typeof data.text === 'undefined') return null;
-    // `params.term` should be the term that is used for searching
-    // `data.text` is the text that is displayed for the data object
-    if (data.text.toLowerCase().indexOf(searchItem) > -1) {
-      const modifiedData = $.extend({}, data, true);
-      // You can return modified objects from here
-      // This includes matching the `children` how you want in nested data sets
-      return modifiedData;
-    }
-    // Return `null` if the term should not be displayed
-    return null;
-  },
-  language: {
-    noResults(){
-      return t("sdk.search.no_results");
-    },
-    errorLoading(){
-      return t("sdk.search.error_loading")
-    },
-    searching(){
-      return t("sdk.search.searching")
-    },
-    inputTooShort(args) {
-      const remainingChars = args.minimum - args.input.length;
-      return `${t("sdk.search.autocomplete.inputshort.pre")} ${remainingChars} ${t("sdk.search.autocomplete.inputshort.post")}`;
-    }
-  },
-};
\ No newline at end of file
diff --git a/src/app/gui/fields/fields.js b/src/app/gui/fields/fields.js
index 158f32b32..75033607a 100644
--- a/src/app/gui/fields/fields.js
+++ b/src/app/gui/fields/fields.js
@@ -1,8 +1,8 @@
-import Text from 'components/FieldText.vue';
-import Link from 'components/FieldLink.vue';
-import Image from 'components/FieldImage.vue'
-import Geo from 'components/FieldGeo.vue';
-import Media from 'components/FieldMedia.vue';
+import Text     from 'components/FieldText.vue';
+import Link     from 'components/FieldLink.vue';
+import Image    from 'components/FieldImage.vue'
+import Geo      from 'components/FieldGeo.vue';
+import Media    from 'components/FieldMedia.vue';
 import VueField from 'components/FieldVue.vue';
 
 const Fields = {
diff --git a/src/app/gui/fields/fieldsservice.js b/src/app/gui/fields/fieldsservice.js
index 6c73f1171..0194b75aa 100644
--- a/src/app/gui/fields/fieldsservice.js
+++ b/src/app/gui/fields/fieldsservice.js
@@ -1,9 +1,9 @@
 import CatalogLayersStoresRegistry from 'store/catalog-layers';
 
-const Fields = require('./fields');
+const Fields        = require('./fields');
 const { toRawType } = require('utils');
 
-const URLPattern = /^(https?:\/\/[^\s]+)/g;
+const URLPattern   = /^(https?:\/\/[^\s]+)/g;
 const PhotoPattern = /[^\s]+.(png|jpg|jpeg|gif)$/g;
 
 const FieldType = {
@@ -21,76 +21,83 @@ const FieldType = {
 module.exports  = {
   /**
    * Get Type field from field value
-   * field : Object contain the value of the field
+   * field: Object contains the value of the field
    * @param field
    * @returns {string}
    */
-  getType(field){
+  getType(field) {
     let type = field.type;
     if (type !== 'vue'){
       const fieldValue = field.value;
       const value = fieldValue && toRawType(fieldValue) === 'Object' && !fieldValue.coordinates && !fieldValue.vue ? fieldValue.value : fieldValue;
-      if (!value) type = FieldType.SIMPLE;
-      else if (value && typeof value == 'object') {
-        if (value.coordinates) type = FieldType.GEO;
-        else if (value.vue) type = FieldType.VUE;
-      } else if(value && Array.isArray(value)) {
-        if (value.length && value[0].photo) type = FieldType.PHOTO;
-        else type = FieldType.SIMPLE
+      if (!value) {
+        type = FieldType.SIMPLE;
+      } else if (value && typeof value == 'object') {
+        if (value.coordinates) {
+          type = FieldType.GEO;
+        } else if (value.vue) {
+          type = FieldType.VUE;
+        }
+      } else if (value && Array.isArray(value)) {
+        if (value.length && value[0].photo) {
+          type = FieldType.PHOTO;
+        } else {
+          type = FieldType.SIMPLE
+        }
       } else if (value.toString().toLowerCase().match(PhotoPattern)) {
         type = FieldType.PHOTO;
       } else if (value.toString().match(URLPattern)) {
         type = FieldType.LINK;
-      } else type = FieldType.SIMPLE;
+      } else {
+        type = FieldType.SIMPLE;
+      }
     }
     return `${type}_field`;
   },
-  isSimple(field){
-    return this.getType(field) === `${FieldType.SIMPLE}_field`;
+  isSimple(field) {
+    return `${FieldType.SIMPLE}_field` === this.getType(field);
   },
-  isLink(field){
-    return this.getType(field) === `${FieldType.LINK}_field`;
+  isLink(field) {
+    return `${FieldType.LINK}_field` === this.getType(field);
   },
-  isImage(field){
-    return this.getType(field) === `${FieldType.IMAGE}_field`;
+  isImage(field) {
+    return `${FieldType.IMAGE}_field` === this.getType(field);
   },
-  isPhoto(field){
-    return this.getType(field) === `${FieldType.PHOTO}_field`;
+  isPhoto(field) {
+    return `${FieldType.PHOTO}_field` === this.getType(field);
   },
-  isVue(field){
-    return this.getType(field) === `${FieldType.VUE}_field`;
+  isVue(field) {
+    return `${FieldType.VUE}_field` === this.getType(field);
   },
   /**
    * Method to add a new field type to Fields
    * @param type
    * @param field
    */
-  add({type, field}){
+  add({type, field}) {
     Fields[type] = field;
   },
   /**
-   * Remove field from Fields list
+   * Remove field from a Fields list
    * @param type
    */
-  remove(type){
+  remove(type) {
     delete Fields[type];
   },
   /**
-   * chenge type of field (example to set vue type)
+   * change type of field (example to set vue type)
    * @param layerId
    * @param field
    */
-  changeConfigFieldType({layerId, field={}}){
-    const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-    layer.changeConfigFieldType(field);
+  changeConfigFieldType({layerId, field={}}) {
+    CatalogLayersStoresRegistry.getLayerById(layerId).changeConfigFieldType(field);
   },
   /**
    * Reset origin type
    * @param layerId
    * @param field
    */
-  resetConfigFieldType({layerId, field={}}){
-    const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
-    layer.resetConfigField(field);
+  resetConfigFieldType({layerId, field={}}) {
+    CatalogLayersStoresRegistry.getLayerById(layerId).resetConfigField(field);
   }
 };
\ No newline at end of file
diff --git a/src/app/gui/form/formservice.js b/src/app/gui/form/formservice.js
index b287e3c2d..0681d7e4b 100644
--- a/src/app/gui/form/formservice.js
+++ b/src/app/gui/form/formservice.js
@@ -453,8 +453,11 @@ proto.addComponents = function(components = []) {
 };
 
 proto.addComponent = function(component) {
+  if (!component) {
+    return;
+  }
   const {id, title, name, icon, valid, headerComponent, header=true} = component;
-  if (valid !== undefined) {
+  if (undefined !== valid) {
     this.state.componentstovalidate[id] = valid;
     this.state.valid = this.state.valid && valid;
     this.eventBus.$emit('add-component-validate', {
@@ -477,8 +480,11 @@ proto.replaceComponent = function({id, component}={}) {
 };
 
 proto.disableComponent = function({id, disabled}) {
-  if (disabled) this.state.disabledcomponents.push(id);
-  else this.state.disabledcomponents = this.state.disabledcomponents.filter(disableId => disabledId !== id);
+  if (disabled) {
+    this.state.disabledcomponents.push(id);
+  } else {
+    this.state.disabledcomponents = this.state.disabledcomponents.filter(disableId => disabledId !== id);
+  }
 };
 
 proto.setCurrentComponentById = function(id) {
@@ -518,7 +524,7 @@ proto.addedComponentTo = function(formcomponent = 'body') {
 
 proto.addToValidate = function(input) {
   this.state.tovalidate[input.name] = input;
-  // check if is mounted on form gui otherwise leave form component to run is Valid whe form is mounted on dom
+  // check if is mounted on form gui otherwise leave form component to run is Valid when form is mounted on dom
   if (this.state.ready) {
    this.isValid(input);
   }
@@ -529,7 +535,7 @@ proto.removeToValidate = function(input) {
   this.isValid();
 };
 
-proto.getState = function () {
+proto.getState = function() {
   return this.state;
 };
 
@@ -597,7 +603,7 @@ proto.saveDefaultExpressionFieldsNotDependencies = async function() {
   // disable listen changeInput
   this.listenChangeInput = false;
 
-  // Array contain field name already resolved with server default_expression request
+  // Array contains field name already resolved with server default_expression request
   const requested_expressions = [];
   // array of defaultExpressionPromises request
   const pending_expressions = [];
@@ -611,7 +617,7 @@ proto.saveDefaultExpressionFieldsNotDependencies = async function() {
         return (
           // check if dependency field is field on update
           this.default_expression_fields_on_update.find(({name}) => name === field) &&
-          // if has bind current field
+          // if it has bind current field
           this.default_expression_fields_dependencies[field].find(fieldName => fieldName === this.default_expression_fields_on_update[i].name)
         )
       });
@@ -620,7 +626,7 @@ proto.saveDefaultExpressionFieldsNotDependencies = async function() {
     // need to evaluate its value and after evaluate field value expression
     for (let i = 0; i < dFs.length; i++) {
       // in case already done a default_expression request evaluation from server
-      if ("undefined" !== typeof requested_expressions.find(name => name === dFs[i])) {
+      if (undefined !== requested_expressions.find(name => name === dFs[i])) {
         continue;
       }
       // get value. Need to wait response
@@ -643,7 +649,7 @@ proto.saveDefaultExpressionFieldsNotDependencies = async function() {
   }
 
   this.default_expression_fields_on_update.forEach(field => {
-    if ("undefined" === typeof requested_expressions.find(name => name === field.name)) {
+    if (undefined === requested_expressions.find(name => name === field.name)) {
       pending_expressions.push(FormService._getDefaultExpression({
         field,
         feature: this.feature,
@@ -810,7 +816,7 @@ FormService._getDefaultExpression = async function({
     return value;
 
   } catch(err) {
-    if ("undefined" !== typeof default_value) {
+    if (undefined !== default_value) {
       field.value = default_value
     }
     return Promise.reject(err);
diff --git a/src/app/gui/form/vue/form.js b/src/app/gui/form/vue/form.js
index 863ed5257..aac480630 100644
--- a/src/app/gui/form/vue/form.js
+++ b/src/app/gui/form/vue/form.js
@@ -1,90 +1,7 @@
-import * as vueComponentOptions from 'components/Form.vue';
-import BodyFormComponent from 'components/FormBody.vue';
-import GUI from 'services/gui';
-
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-const Service = require('gui/form/formservice');
-
-function FormComponent(options = {}) {
-  const {id='form', name, title, headerComponent} = options;
-  base(this, options);
-  options.service = options.service ? new options.service : new Service;
-  options.vueComponentObject = options.vueComponentObject  || vueComponentOptions;
-  //set element of the form
-  const components = options.components || [
-    {
-      id,
-      title,
-      name,
-      root: true,
-      component: BodyFormComponent,
-      headerComponent
-    }
-  ];
-  options.perc = options.layer.getFormPercentage() !== null ? options.layer.getFormPercentage() : options.perc;
-  // initialize component
-  this.init(options);
-  this.getService().addComponents(components);
-  this.getService().setComponent(components[0].component);
-  /**
-   * Used to add component to form body
-   * @param component
-   */
-  this.addBodyFormComponent = function({component, where='after'}={}){
-    this.getInternalComponent().body.components[where].push(component);
-  };
-
-  this.addBodyFormComponents = function({components=[], where="after"}={}){
-    components.forEach(component =>  this.addBodyFormComponent({
-      component,
-      where
-    }))
-  };
-
-  this.addFormComponents = function(components = []) {
-    this.getService().addComponents(components);
-  };
-
-  this.addFormComponent = function(component) {
-    component && this.getService().addComponent(component)
-  };
-  // some utilities methods
-  this.addDependecyComponents = function(components) {
-    this.getService().addDependecyComponents(components)
-  };
-  this.addComponentBeforeBody = function(Component) {
-    //this.getService().addedComponentTo('body');
-    //this.insertComponentAt(1, Component);
-  };
-
-  this.addComponentAfterBody = function(Component) {
-    //this.getService().addedComponentTo('body');
-    //this.insertComponentAt(2, Component)
-  };
-
-  this.addComponentBeforeFooter = function() {
-   //TODO
-  };
-
-  this.addComponentAfterFooter = function(Component) {
-    //TODO
-  };
-  // overwrite father mount method.
-  this.mount = function(parent, append) {
-    return base(this, 'mount', parent, append)
-    .then(() => {
-      // set modal window to true
-      GUI.setModal(true);
-    });
-  };
-
-  this.layout = function() {
-    this.internalComponent.reloadLayout();
-  };
-}
-
-inherit(FormComponent, Component);
-
-module.exports = FormComponent;
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-form';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js
index 315b313f7..1046b74e5 100644
--- a/src/app/gui/map/mapservice.js
+++ b/src/app/gui/map/mapservice.js
@@ -104,7 +104,7 @@ class OlMapViewer {
   }
 
   /**
-   * @FIXME add description
+   * Destroy OL map object
    */
   destroy() {
     if (this.map) {
@@ -114,7 +114,7 @@ class OlMapViewer {
   }
 
   /**
-   * @FIXME add description
+   * Get Ol Map view Object
    */
   getView() {
     return this.map.getView();
@@ -130,21 +130,24 @@ class OlMapViewer {
   updateView(){ }
 
   /**
-   * @FIXME add description
+   * Return mao OL object
    */
   getMap() {
     return this.map;
   }
 
   /**
-   * @FIXME add description
+   * Set Map Ol target (DOM element)
+   * @param { String } id
    */
   setTarget(id) {
     this.map.setTarget(id);
   }
 
   /**
-   * @FIXME add description
+   *
+   * @param { Array } coordinate
+   * @param { Number } zoom
    */
   zoomTo(coordinate, zoom) {
     const view = this.map.getView();
@@ -175,7 +178,9 @@ class OlMapViewer {
   }
 
   /**
-   * @FIXME add description
+   * Based on coordinates, set Map center to coordinate at resolution is passed as option
+   * @param { Array } coordinates
+   * @param { Object } options
    */
   goToRes(coordinates, options = {}) {
     return new Promise((resolve) => {
@@ -222,35 +227,36 @@ class OlMapViewer {
   }
 
   /**
-   * @FIXME add description
+   * Get current map zoom level
    */
   getZoom() {
     return this.map.getView().getZoom();
   }
 
   /**
-   * @FIXME add description
+   * Get current map resolution
    */
   getResolution() {
     return this.map.getView().getResolution();
   }
 
   /**
-   * @FIXME add description
+   * Get current map center
    */
   getCenter() {
     return this.map.getView().getCenter();
   }
 
   /**
-   * @FIXME add description
+   * Get current map Bounding Box
    */
   getBBOX() {
     return this.map.getView().calculateExtent(this.map.getSize());
   };
 
   /**
-   * @FIXME add description
+   * Get map layer by name
+   * @param { String } layerName
    */
   getLayerByName(layerName) {
     return this.map.getLayers().find(layer => layerName === layer.get('name'));
@@ -293,10 +299,7 @@ class OlMapViewer {
     return this
       .map
       .getLayers()
-      .filter((layer) => {
-        const props = layer.getProperties();
-        return (true !== props.basemap);
-      });
+      .filter(layer => !layer.getProperties().basemap);
   }
 
   /**
@@ -307,10 +310,10 @@ class OlMapViewer {
   };
 
   /**
-   * @TODO double check (unusued and broken code ?)
+   * @TODO double check (unused and broken code ?)
    */
   changeBaseLayer(layerName) {
-    this.map.getLayers().insertAt(0, this.getLayerByName(layername));
+    this.map.getLayers().insertAt(0, this.getLayerByName(layerName));
   }
 
 }
@@ -364,9 +367,9 @@ function MapService(options={}) {
   })
 
   this.viewer = null;
-  this.target = options.target || null;
+  this.target = options.target || 'map';
   this.layersCount = 0; // useful to set Zindex to layer order on map
-  this.maps_container = options.maps_container || null;
+  this.maps_container = options.maps_container || 'g3w-maps';
   this._layersStoresEventKeys = {};
   this._keyEvents = {
     ol: [],
@@ -474,14 +477,15 @@ function MapService(options={}) {
     }
     this._decrementLoaders();
   };
-  if (options.project) this.project = options.project;
-  else {
+  if (options.project) {
+    this.project = options.project;
+  } else {
     this.project = ProjectsRegistry.getCurrentProject();
-    //on after setting current project
+    //on after setting a current project
     const keysetCurrentProject = ProjectsRegistry.onafter('setCurrentProject', project => {
       this.removeLayers();
       this._removeListeners();
-      // check if reload same project
+      // check if reload a same project
       const isSameProject = this.project.getId() === project.getId();
       this.project = project;
       const changeProjectCallBack = () => {
@@ -491,7 +495,9 @@ function MapService(options={}) {
         this.setUpMapOlEvents();
         this.setupCustomMapParamsToLegendUrl();
       };
-      ApplicationService.isIframe() && changeProjectCallBack();
+      if (ApplicationService.isIframe()) {
+        changeProjectCallBack();
+      }
       isSameProject ? changeProjectCallBack() : this.getMap().once('change:size', changeProjectCallBack);
     });
     this._keyEvents.g3wobject.push({
@@ -570,7 +576,9 @@ function MapService(options={}) {
   });
 
   const extraParamsSet = (extraParams, update) => {
-    update && this.getMapLayers().forEach(mapLayer => mapLayer.update(this.state, extraParams));
+    if (update) {
+      this.getMapLayers().forEach(mapLayer => mapLayer.update(this.state, extraParams));
+    }
   };
 
   this.on('extraParamsSet', extraParamsSet);
@@ -607,10 +615,15 @@ proto.setUpMapOlEvents = function() {
   if (dynamicLegend) {
     const keyolmoveeend = this.viewer.map.on("moveend", evt => this.setupCustomMapParamsToLegendUrl());
     this._keyEvents.ol.push(keyolmoveeend);
-  } else this.setupCustomMapParamsToLegendUrl(); //set always to show legend at start
+  } else {
+    //set always to show legend at the start
+    this.setupCustomMapParamsToLegendUrl();
+  }
 };
 
-//clear methods to remove all listeners events
+/**
+ * Clear methods to remove all listeners events
+ */
 proto.clear = function() {
   Object
     .keys(this._keyEvents)
@@ -645,8 +658,7 @@ proto.hideMapSpinner = function() {
 
 proto.getScaleFromExtent = function(extent) {
   const resolution = this.getMap().getView().getResolutionForExtent(extent, this.getMap().getSize());
-  const scale = getScaleFromResolution(resolution, this.getMapUnits());
-  return scale;
+  return getScaleFromResolution(resolution, this.getMapUnits());
 };
 
 proto._addHideMap = function({ratio, layers=[], mainview=false} = {}) {
@@ -684,7 +696,9 @@ proto.removeHideMap = function(id) {
       break;
     }
   }
-  index !== undefined && this.state.hidemaps.splice(index,1);
+  if (index !== undefined) {
+    this.state.hidemaps.splice(index,1);
+  }
 };
 
 proto._showHideMapElement = function({map, show=false} = {}) {
@@ -707,7 +721,9 @@ proto.getApplicationAttribution = function() {
   const {header_terms_of_use_link, header_terms_of_use_text} = this.config.group;
   if (header_terms_of_use_text) {
     return header_terms_of_use_link ? `<a href="${header_terms_of_use_link}">${header_terms_of_use_text}</a>` : `<span class="skin-color" style="font-weight: bold">${header_terms_of_use_text}</span>`;
-  } else return false
+  } else {
+    return false
+  }
 };
 
 proto.slaveOf = function(mapService, sameLayers) {
@@ -732,8 +748,7 @@ proto.getMap = function() {
 };
 
 proto.getMapCanvas = function(map) {
-  const viewport = map ? map.getViewport() : $(`#${this.maps_container} .g3w-map`).last().children('.ol-viewport')[0];
-  return $(viewport).children('canvas')[0];
+  return $(map ? map.getViewport() : $(`#${this.maps_container} .g3w-map`).last().children('.ol-viewport')[0]).children('canvas')[0];
 };
 
 proto.getProjection = function() {
@@ -745,7 +760,7 @@ proto.isMapHidden = function() {
 };
 
 proto.isAxisOrientationInverted = function() {
-  return this.getProjection().getAxisOrientation() === 'neu' ? true : false;
+  return 'neu' === this.getProjection().getAxisOrientation();
 };
 
 proto.getCrs = function() {
@@ -769,8 +784,7 @@ proto.getEpsg = function() {
 };
 
 proto.getGetFeatureInfoUrlForLayer = function(layer, coordinates, resolution, epsg, params) {
-  const mapLayer = this.getMapLayerForLayer(layer);
-  return mapLayer.getGetFeatureInfoUrl(coordinates,resolution,epsg,params);
+  return this.getMapLayerForLayer(layer).getGetFeatureInfoUrl(coordinates,resolution,epsg,params);
 };
 
 /**
@@ -793,7 +807,7 @@ proto.getLayerById = function(id) {
   return this.getMap().getLayers().getArray().find(layer => layer.get('id') === id);
 };
 
-// method do get all feature from vector layer based on coordinates
+// method does get all features from vector layer based on coordinates
 proto.getVectorLayerFeaturesFromCoordinates = function(layerId, coordinates) {
   let intersectGeom;
   let features = [];
@@ -836,33 +850,28 @@ proto.getVectorLayerFeaturesFromCoordinates = function(layerId, coordinates) {
 };
 
 proto.getQueryLayerByCoordinates = function({layer, coordinates} = {}) {
-  const mapProjection = this.getProjection();
-  const resolution = this.getResolution();
   return new Promise((resolve, reject) => {
     layer.query({
       coordinates,
-      mapProjection,
-      resolution
-    }).then((response) => resolve(response))
-      .fail(err => reject(err))
+      mapProjection: this.getProjection(),
+      resolution: this.getResolution(),
+    })
+    .then((response) => resolve(response))
+    .fail(err => reject(err))
   })
 };
 
 proto.getQueryLayerPromiseByCoordinates = function({layer, coordinates} = {}) {
   return new Promise((resolve, reject) => {
-    const mapProjection = this.getProjection();
-    const resolution = this.getResolution();
     layer.query({
       coordinates,
-      mapProjection,
-      resolution
-    }).then((response) => {
-      resolve(response)
-    }).fail((error)=> {
-      reject(error);
+      mapProjection: this.getProjection(),
+      resolution: this.getResolution()
     })
+    .then((response) => resolve(response))
+    .fail((error) => reject(error))
   })
-};
+}
 
 //setup controls
 /*
@@ -871,10 +880,8 @@ proto.getQueryLayerPromiseByCoordinates = function({layer, coordinates} = {}) {
     lh: <options> h: horizontal: v vertical (default)
   }
  */
-
 proto.activeMapControl = function(controlName) {
-  const mapControl = this._mapControls.find(control => control.type === controlName);
-  const control = mapControl.control;
+  const control = this._mapControls.find(control => controlName === control.type).control;
   !control.isToggled() ? control.toggle() : null;
 };
 
@@ -903,7 +910,9 @@ proto.changeScaleLineUnit = function(unit) {
   const scalelinecontrol = this.getMapControlByType({
     type: 'scaleline'
   });
-  scalelinecontrol && scalelinecontrol.getOlControl().setUnits(unit);
+  if (scalelinecontrol) {
+    scalelinecontrol.getOlControl().setUnits(unit);
+  }
 };
 
 proto.showAddLayerModal = function() {
@@ -915,12 +924,10 @@ proto._checkMapControls = function() {
 };
 
 proto._setupControls = function() {
-  const baseLayers = getMapLayersByFilter({ BASELAYER: true });
-
   this.getMapLayers().forEach(mapLayer => mapLayer.getSource().setAttributions(this.getApplicationAttribution()));
 
-  // check if base layer is set. If true add attribution control
-  if (this.getApplicationAttribution() || baseLayers.length) {
+  // check if a base layer is set. If true, add attribution control
+  if (this.getApplicationAttribution() || getMapLayersByFilter({ BASELAYER: true }).length) {
     const attributionControl = new ol.control.Attribution({
       collapsible: false,
       target: 'map_footer_left'
@@ -1175,8 +1182,13 @@ proto._setupControls = function() {
 /**
  *  Set ZIndex layer from fa stack
  */
-proto.setZIndexLayer = function({layer, zindex=this.getMap().getLayers().getLength()}={}) {
-  layer && layer.setZIndex(zindex);
+proto.setZIndexLayer = function({
+  layer,
+  zindex = this.getMap().getLayers().getLength()
+}={}) {
+  if (layer) {
+    layer.setZIndex(zindex);
+  }
 };
 
 /**
@@ -1225,12 +1237,11 @@ proto.zoomToFid = async function(zoom_to_fid = '', separator = '|') {
 
 /**
  * Handle ztf url parameter
- * 
+ *
  * @param zoom_to_feature
  */
 proto.handleZoomToFeaturesUrlParameter = async function({
-  zoom_to_features = '',
-  search_endpoint = 'api',
+  zoom_to_features = ''
 } = {}) {
   try {
     const [id, filter] = zoom_to_features.split(':');
@@ -1251,8 +1262,7 @@ proto.handleZoomToFeaturesUrlParameter = async function({
     const r = pLayer && await DataRouterService.getData('search:features', {
       inputs: {
         layer,
-        filter: createFilterFromString({ layer, search_endpoint, filter }),
-        search_endpoint
+        filter: createFilterFromString({ layer, filter }),
       },
       outputs: {
         show: {
@@ -1297,14 +1307,12 @@ proto.addMapExtentUrlParameterToUrl = function(url, epsg) {
 
 proto.getMapExtentUrl = function() {
   const url = new URL(location.href);
-  const map_extent = this.getMapExtent().toString();
-  url.searchParams.set('map_extent', map_extent);
+  url.searchParams.set('map_extent', this.getMapExtent().toString());
   return url.toString()
 };
 
 proto.createCopyMapExtentUrl = function() {
-  const url = this.getMapExtentUrl();
-  copyUrl(url);
+  copyUrl(this.getMapExtentUrl());
 };
 
 proto._setMapControlsGrid = function(length) {
@@ -1350,9 +1358,8 @@ proto._setMapControlsInsideContainerLenght = function() {
   this.state.mapControl.length = 1;
   // count the mapcontrol inside g3w-map-control container
   this._mapControls.forEach(control => {
-    const map = this.getMap();
     this.state.mapControl.length+=control.mapcontrol ? control.id === 'zoom' ? 2 : 1: 0;
-    control.control.changelayout ? control.control.changelayout(map) : null;
+    control.control.changelayout ? control.control.changelayout(this.getMap()) : null;
   });
   // add 1 id odd number
   this.state.mapControl.length += this.state.mapControl.length% 2;
@@ -1361,16 +1368,16 @@ proto._setMapControlsInsideContainerLenght = function() {
 };
 
 /**
- * Get filtrable layer. Get parameter to custom filter Object
+ * Get filterable layer. Get parameter to custom filter Object
  */
-proto.filterableLayersAvailable = function(options={}) {
+proto.filterableLayersAvailable = function(options = {}) {
   return getMapLayersByFilter({
     FILTERABLE: true,
     SELECTED_OR_ALL: true,
   }, options).filter(layer => 'wfs' === layer.getProvider('filter').getName());
 };
 
-proto.setMapControlsAlignement = function(alignement='rv') {
+proto.setMapControlsAlignement = function(alignement = 'rv') {
   this.state.mapcontrolsalignement = alignement;
 };
 
@@ -1404,7 +1411,7 @@ proto.setMapControlsContainer = function(mapControlDom) {
 
 proto._updateMapControlsLayout = function({width, height}={}) {
   // case mobile open keyboard
-  (width == 0 || height == 0) ? this.state.mapcontrolDOM.css('z-index', 0) : this.state.mapcontrolDOM.css('z-index', 1);
+  (0 == width || 0 == height) ? this.state.mapcontrolDOM.css('z-index', 0) : this.state.mapcontrolDOM.css('z-index', 1);
   // update only when all control are ready
   if (this.state.mapcontrolready && this.state.mapControl.update) {
     const changedAndMoreSpace = {
@@ -1412,20 +1419,17 @@ proto._updateMapControlsLayout = function({width, height}={}) {
       space: false
     };
     // count the mapcontrol insied g3w-map-control container
-    this._mapControls.forEach(control => {
-      const map = this.getMap();
-      control.control.changelayout ? control.control.changelayout(map) : null;
-    });
+    this._mapControls.forEach(control => control.control.changelayout ? control.control.changelayout(this.getMap()) : null);
     // check if is vertical
     if (this.isMapControlsVerticalAlignement()) {
       const handleVerticalMapControlDOMElements = () => {
         const mapControslHeight = this.state.mapControl.grid[this.state.mapControl.currentIndex].columns * this.state.mapcontrolSizes.minWidth;
         // get bottom controls
-        const bottomMapControls =  $(`.ol-control-b${this.getMapControlsAlignement()[0]}`);
-        const bottomMapControlTop = bottomMapControls.length ? $(bottomMapControls[bottomMapControls.length - 1]).position().top: height;
+        const bottomMapControls =  document.getElementsByClassName(`.ol-control-b${this.getMapControlsAlignement()[0]}`);
+        const bottomMapControlTop = bottomMapControls.length ? $(bottomMapControls[bottomMapControls.length - 1]).getBoundingClientRect().top : height;
         const freeSpace =  bottomMapControlTop > 0 ? bottomMapControlTop - mapControslHeight : height - mapControslHeight;
         if (freeSpace < 10) {
-          this.state.mapControl.currentIndex = this.state.mapControl.currentIndex === this.state.mapControl.grid.length - 1 ? this.state.mapControl.currentIndex : this.state.mapControl.currentIndex +1;
+          this.state.mapControl.currentIndex = this.state.mapControl.currentIndex === this.state.mapControl.grid.length - 1 ? this.state.mapControl.currentIndex : this.state.mapControl.currentIndex + 1;
           changedAndMoreSpace.changed = true;
         } else {
           // check if there enough space to expand map controls
@@ -1445,11 +1449,17 @@ proto._updateMapControlsLayout = function({width, height}={}) {
           this.state.mapcontrolDOM.css('height', `${mapControslHeight}px`);
           this.state.mapcontrolDOM.css('width', `${mapControlsWidth}px`);
           changedAndMoreSpace.changed = false;
-          changedAndMoreSpace.space && setTimeout(()=> handleVerticalMapControlDOMElements());
+          if (changedAndMoreSpace.space) {
+            setTimeout(handleVerticalMapControlDOMElements);
+          }
         }
       };
       handleVerticalMapControlDOMElements();
-    } else isMobile.any && this.setMapControlsAlignement('rv');
+    } else {
+      if (isMobile.any) {
+        this.setMapControlsAlignement('rv');
+      }
+    }
   }
 };
 
@@ -1460,13 +1470,16 @@ proto._updateMapControlsLayout = function({width, height}={}) {
  * @private
  */
 proto._setMapControlVisible = function({control, visible=true}) {
-   control && control.setVisible(visible);
+   if (control) {
+     control.setVisible(visible);
+   }
 };
 
 proto._addControlToMapControls = function(control, visible=true) {
-  const controlElement = control.element;
-  if (!visible) control.element.style.display = "none";
-  $('.g3w-map-controls').append(controlElement);
+  if (!visible) {
+    control.element.style.display = "none";
+  }
+  $('.g3w-map-controls').append(control.element);
 };
 
 /**
@@ -1562,15 +1575,21 @@ proto.toggleControls = function(toggle, types) {
   this._removeControls();
   this._mapControls.forEach(controlObj => {
     if (types) {
-      if (types.indexOf(controlObj.type) > -1) controlObj.visible = toggle;
-    } else controlObj.visible = toggle;
+      if (types.indexOf(controlObj.type) > -1) {
+        controlObj.visible = toggle;
+      }
+    } else {
+      controlObj.visible = toggle;
+    }
   });
   this._layoutControls();
 };
 
 proto._layoutControls = function() {
   this._mapControls.forEach(controlObj => {
-    if (controlObj.visible) this.viewer.map.addControl(controlObj.control);
+    if (controlObj.visible) {
+      this.viewer.map.addControl(controlObj.control);
+    }
   })
 };
 
@@ -1615,7 +1634,9 @@ proto._unToggleControls = function({close=true} = {}) {
   this._mapControls.forEach(controlObj => {
     if (controlObj.control.isToggled && controlObj.control.isToggled()) {
       controlObj.control.toggle(false);
-      close && GUI.closeContent();
+      if (close) {
+        GUI.closeContent();
+      }
     }
   });
 };
@@ -1649,17 +1670,17 @@ proto._setupCustomMapParamsToLegendUrl = function(bool=true) {
   if (bool) {
     const map = this.getMap();
     const size = map && map.getSize().filter(value => value > 0) || null;
-    let bbox = size && size.length === 2 ? map.getView().calculateExtent(size) : this.project.state.initextent;
-    // in case of axis orientation inverted i need to inverted the axis
-    bbox = map.getView().getProjection().getAxisOrientation() === "neu" ? [bbox[1], bbox[0], bbox[3], bbox[2]] : bbox;
-    const crs = this.getEpsg();
-    //setup initial legend parameter
-    this.getMapLayers().forEach(mapLayer => {
-      mapLayer.setupCustomMapParamsToLegendUrl && mapLayer.setupCustomMapParamsToLegendUrl({
-        crs,
-        bbox
-      })
-    });
+    const bbox = size && size.length === 2 ? map.getView().calculateExtent(size) : this.project.state.initextent;
+    this.getMapLayers()
+      .forEach(mapLayer => {
+        if (mapLayer.setupCustomMapParamsToLegendUrl) {
+          mapLayer.setupCustomMapParamsToLegendUrl({
+            crs: this.getEpsg(),
+            // in the case of axis orientation inverted if it needs to invert the axis
+            bbox: map.getView().getProjection().getAxisOrientation() === "neu" ? [bbox[1], bbox[0], bbox[3], bbox[2]] : bbox,
+          })
+        }
+     })
     this.emit('change-map-legend-params')
   }
 
@@ -1671,9 +1692,7 @@ proto.addMapLayer = function(mapLayer) {
 };
 
 proto.getMapLayerByLayerId = function(layerId) {
-  return this.getMapLayers().find(mapLayer => {
-    return mapLayer.getLayerConfigs().find(layer => layer.getId() === layerId);
-  })
+  return this.getMapLayers().find(mapLayer => mapLayer.getLayerConfigs().find(layer => layerId === layer.getId()))
 };
 
 proto.getMapLayers = function() {
@@ -1685,10 +1704,7 @@ proto.getBaseLayers = function() {
 };
 
 proto.getMapLayerForLayer = function(layer) {
-  const multilayerId = `layer_${layer.getMultiLayerId()}`;
-  const mapLayers = this.getMapLayers();
-  const mapLayer = mapLayers.find(mapLayer => mapLayer.getId() === multilayerId);
-  return mapLayer;
+  return this.getMapLayers().find(mapLayer => `layer_${layer.getMultiLayerId()}` ===  mapLayer.getId());
 };
 
 proto.getProjectLayer = function(layerId) {
@@ -1696,10 +1712,10 @@ proto.getProjectLayer = function(layerId) {
 };
 
 proto._setSettings = function() {
-  const {ZOOM} = MAP_SETTINGS;
+  const { ZOOM } = MAP_SETTINGS;
   const maxScale = this.getScaleFromExtent(this.project.state.initextent);
   // settings maxScale
-  ZOOM.maxScale =  ZOOM.maxScale > maxScale ? maxScale :  ZOOM.maxScale;
+  ZOOM.maxScale = ZOOM.maxScale > maxScale ? maxScale : ZOOM.maxScale;
 };
 
 proto._resetView = function() {
@@ -1845,7 +1861,9 @@ proto.getMapUnits = function() {
 };
 
 proto._removeListeners = function() {
-  this._setBaseLayerListenerKey && this.project.un('setBaseLayer', this._setBaseLayerListenerKey);
+  if (this._setBaseLayerListenerKey) {
+    this.project.un('setBaseLayer', this._setBaseLayerListenerKey);
+  }
 };
 
 // remove all events of layersStore
@@ -1871,7 +1889,7 @@ proto._setUpEventsKeysToLayersStore = function(store) {
 };
 
 proto._setupListeners = function() {
-  this._setBaseLayerListenerKey = this.project.onafter('setBaseLayer',() => {
+  this._setBaseLayerListenerKey = this.project.onafter('setBaseLayer', () => {
     this.updateMapLayers();
   });
 };
@@ -2027,7 +2045,9 @@ proto.setLayerZIndex = function({layer, zindex=this.layersCount+=1}) {
  */
 proto.addLayerToMap = function(layer) {
   const olLayer = layer.getOLLayer();
-  olLayer && this.getMap().addLayer(olLayer);
+  if (olLayer) {
+    this.getMap().addLayer(olLayer);
+  }
 };
 
 /**
@@ -2041,9 +2061,8 @@ proto._setMapProjectionToLayers = function(layers) {
 
 proto.createMapLayer = function(layer) {
   layer.setMapProjection(this.getProjection());
-  const multilayerId = `layer_${layer.getMultiLayerId()}`;
   const mapLayer = layer.getMapLayer({
-    id: multilayerId,
+    id: `layer_${layer.getMultiLayerId()}`,
     projection: this.getProjection()
   }, this.layersExtraParams);
   mapLayer.addLayer(layer);
@@ -2077,8 +2096,8 @@ proto.getOverviewMapLayers = function(project) {
  * @param mapLayer
  * @param options
  */
-proto.updateMapLayer = function(mapLayer, options={force:false}, {showSpinner=true} = {}) {
-  // if force adds g3w_time parameter to force request of map layer from server
+proto.updateMapLayer = function(mapLayer, options = { force: false }, { showSpinner = true } = {}) {
+  // if force to add g3w_time parameter to force request of map layer from server
   if (options.force) {
     options.g3w_time = Date.now();
   }
@@ -2093,24 +2112,24 @@ proto.updateMapLayer = function(mapLayer, options={force:false}, {showSpinner=tr
 // run update function on each mapLayer
 proto.updateMapLayers = function(options={}) {
   this.getMapLayers().forEach(mapLayer => this.updateMapLayer(mapLayer, options));
-  const baseLayers = this.getBaseLayers();
-  //updatebase layer
-  Object.values(baseLayers).forEach(baseLayer => baseLayer.update(this.state, this.layersExtraParams));
+  //update base layer
+  Object.values(this.getBaseLayers()).forEach(baseLayer => baseLayer.update(this.state, this.layersExtraParams));
 };
 
 // register map Layer listeners of creation
 proto.registerMapLayerListeners = function(mapLayer, projectLayer=true) {
   this.registerMapLayerLoadingEvents(mapLayer);
   //listen change filter token
-  if (projectLayer && mapLayer.layers && Array.isArray(mapLayer.layers))
+  if (projectLayer && mapLayer.layers && Array.isArray(mapLayer.layers)) {
     mapLayer.layers.forEach(layer => {
       layer.onbefore('change', () => this.updateMapLayer(mapLayer, {force: true}));
       layer.on('filtertokenchange', () => this.updateMapLayer(mapLayer, {force: true}))
     });
+  }
   ///
 };
 
-/** Methods to register and unregister load map
+/** Methods to register and unregister map loadmap
  *
  * */
 proto.registerMapLayerLoadingEvents = function(mapLayer) {
@@ -2133,11 +2152,12 @@ proto.unregisterMapLayerLoadingEvents = function(mapLayer) {
 proto.unregisterMapLayerListeners = function(mapLayer, projectLayer=false) {
   this.unregisterMapLayerLoadingEvents(mapLayer);
   // try to remove layer filter token
-  if (projectLayer && mapLayer.layers && Array.isArray(mapLayer.layers))
+  if (projectLayer && mapLayer.layers && Array.isArray(mapLayer.layers)) {
     mapLayer.layers.forEach(layer => {
       layer.un('change');
       layer.removeEvent('filtertokenchange')
     });
+  }
 };
 
 proto.setTarget = function(elId) {
@@ -2155,7 +2175,7 @@ proto.getCurrentToggledMapControl = function() {
  * @param options is an object contain: {
  *   active: If set new interaction active or not
  *   active: If set new interaction active or not
- *   close: if close eventually GUI Content (es. result right content )
+ *   close: if eventually close GUI Content (es. result right content)
  * }
  * return object having current toggled control if there is a toggled mapcontrol
  */
@@ -2164,7 +2184,9 @@ proto.addInteraction = function(interaction, options={active:true, close:true})
   const control = this.getCurrentToggledMapControl();
   const toggled = control && control.isToggled && control.isToggled() || false;
   const untoggleMapControls = control && control.isClickMap ? control.isClickMap() : true;
-  untoggleMapControls && active && this._unToggleControls(options);
+  if (untoggleMapControls && active) {
+    this._unToggleControls(options);
+  }
   this.getMap().addInteraction(interaction);
   interaction.setActive(active);
   this._externalInteractions.push(interaction);
@@ -2175,7 +2197,9 @@ proto.addInteraction = function(interaction, options={active:true, close:true})
 };
 
 proto.removeInteraction = function(interaction) {
-  interaction && interaction.setActive(false);
+  if (interaction) {
+    interaction.setActive(false);
+  }
   this.viewer.map.removeInteraction(interaction);
   this._externalInteractions = this._externalInteractions.filter(_interaction => interaction !== _interaction);
 };
@@ -2229,22 +2253,30 @@ proto.getGeometryAndExtentFromFeatures = function(features=[]) {
         extent = !extent ? featureExtent : ol.extent.extend(extent, featureExtent);
         geometryType = geometryType ? geometryType : geometry.getType();
         coordinates = geometry.getCoordinates();
-        if (geometryType.includes('Multi')) geometryCoordinates = [...geometryCoordinates, ...coordinates];
-        else geometryCoordinates.push(coordinates);
+        if (geometryType.includes('Multi')) {
+          geometryCoordinates = [...geometryCoordinates, ...coordinates];
+        } else {
+          geometryCoordinates.push(coordinates);
+        }
       } else {
         const featureExtent = feature.bbox;
         extent = !extent ? featureExtent : ol.extent.extend(extent, featureExtent);
         geometryType = geometry.type;
         coordinates = geometry.coordinates;
       }
-      if (geometryType.includes('Multi')) geometryCoordinates = [...geometryCoordinates, ...coordinates];
-      else geometryCoordinates.push(coordinates);
+      if (geometryType.includes('Multi')) {
+        geometryCoordinates = [...geometryCoordinates, ...coordinates];
+      } else {
+        geometryCoordinates.push(coordinates);
+      }
     }
   }
   try {
     const olClassGeomType = geometryType.includes('Multi') ? geometryType : `Multi${geometryType}`;
     geometry = new ol.geom[olClassGeomType](geometryCoordinates);
-    if (extent === undefined) extent = geometry.getExtent();
+    if (extent === undefined) {
+      extent = geometry.getExtent();
+    }
   } catch(err) {}
   return {
     extent,
@@ -2253,7 +2285,7 @@ proto.getGeometryAndExtentFromFeatures = function(features=[]) {
 };
 
 proto.highlightFeatures = function(features, options={}) {
-  const {geometry} = this.getGeometryAndExtentFromFeatures(features);
+  const { geometry } = this.getGeometryAndExtentFromFeatures(features);
   //force zoom false
   options.zoom = false;
   this.highlightGeometry(geometry, options);
@@ -2284,7 +2316,7 @@ proto.zoomToFeatures = function(features, options = { highlight: false }) {
  * @param   { Object }      options
  * @param   { boolean }     options.force
  * @param   { ol.geometry } options.highLightGeometry
- * 
+ *
  * @returns { Promise<void> }
  */
 proto.zoomToExtent = async function(extent, options = {}) {
@@ -2311,11 +2343,8 @@ proto.zoomToProjectInitExtent = function() {
 /**
  * End zoom methods
  */
-
 proto.compareExtentWithProjectMaxExtent = function(extent) {
-  const projectExtent = this.project.state.extent;
-  const inside = ol.extent.containsExtent(projectExtent, extent);
-  return inside ? extent : projectExtent;
+  return ol.extent.containsExtent(this.project.state.extent, extent) ? extent : this.project.state.extent;
 };
 
 /**
@@ -2333,7 +2362,7 @@ proto.getResolutionForZoomToExtent = function(extent, options={force:false}) {
 
   const extentResolution = map.getView().getResolutionForExtent(extent, map.getSize());            // resolution of request extent
 
-  // retrive resolution from given `extent`
+  // retrieve resolution from given `extent`
   if (true === options.force) {
     return extentResolution; 
   }
@@ -2352,9 +2381,9 @@ proto.goToBBox = function(bbox, epsg=this.getEpsg()) {
   this.viewer.fit(this.compareExtentWithProjectMaxExtent(bbox));
 };
 
-proto.goToWGS84 = function(coordinates,zoom) {
+proto.goToWGS84 = function(coordinates, zoom) {
   coordinates = ol.proj.transform(coordinates,'EPSG:4326',this.project.state.crs.epsg);
-  this.goTo(coordinates,zoom);
+  this.goTo(coordinates, zoom);
 };
 
 proto.extentToWGS84 = function(extent) {
@@ -2363,7 +2392,7 @@ proto.extentToWGS84 = function(extent) {
 
 proto.getResolutionForMeters = function(meters) {
   const viewport = this.viewer.map.getViewport();
-  return meters / Math.max(viewport.clientWidth,viewport.clientHeight);
+  return meters / Math.max(viewport.clientWidth, viewport.clientHeight);
 };
 
 let animatingHighlight = false;
@@ -2405,20 +2434,20 @@ proto.clearSelectionFeatures = function() {
 /**
  * @since 3.9.0
  */
-proto.setSelectionLayerVisible = function(visible=true) {
+proto.setSelectionLayerVisible = function(visible = true) {
   this.defaultsLayers.selectionLayer.setVisible(visible);
 };
 
 /**
- * 
- * @param { ol.geom.Geometry | * } geometryObj 
+ *
+ * @param { ol.geom.Geometry | * } geometryObj
  * @param { Object } options
  * @param { boolean } options.zoom
  * @param { boolean } options.highlight
  * @param options.style
  * @param options.color
- *  
- * @returns { Promise<any> } 
+ *
+ * @returns { Promise<any> }
  */
 proto.highlightGeometry = function(geometryObj, options = {}) {
   const duration  = options.duration || MAP_SETTINGS.ANIMATION.duration;
@@ -2490,8 +2519,13 @@ proto.refreshMap = function(options={force: true}) {
   this.updateMapLayers(options);
 };
 
-// called when layout (window) resize
-proto.layout = function({width, height}) {
+// called when layout (window) resizes
+proto.layout = function({ width, height }) {
+  const el = document.getElementById(this.target);
+  if (el) {
+    el.style.height = height + 'px';
+    el.style.width  = width + 'px';
+  }
   const is_hidden = (width <= 0 || height <= 0);
   if (!this.viewer) {
     this.setupViewer(width,height);
@@ -2507,22 +2541,24 @@ proto.layout = function({width, height}) {
     }
   }
   this.setHidden(is_hidden);
-  this._mapControls.length && this._updateMapControlsLayout({width, height});
+  if (this._mapControls.length) {
+    this._updateMapControlsLayout({width, height});
+  }
 };
 
 //remove BaseLayers
 proto._removeBaseLayers = function() {
-  Object.keys(this.mapBaseLayers).forEach(baseLayerId=>{
-    this.viewer.map.removeLayer(this.mapBaseLayers[baseLayerId].getOLLayer())
-  })
+  Object.keys(this.mapBaseLayers)
+    .forEach(baseLayerId => this.viewer.map.removeLayer(this.mapBaseLayers[baseLayerId].getOLLayer()))
 };
 
 // function to remove maplayers
 proto._removeMapLayers = function() {
-  this.getMapLayers().forEach(mapLayer => {
-    this.unregisterMapLayerListeners(mapLayer);
-    this.viewer.map.removeLayer(mapLayer.getOLLayer());
-  });
+  this.getMapLayers()
+    .forEach(mapLayer => {
+      this.unregisterMapLayerListeners(mapLayer);
+      this.viewer.map.removeLayer(mapLayer.getOLLayer());
+    });
   this._mapLayers = [];
 };
 
@@ -2531,16 +2567,12 @@ proto.getMapBBOX = function() {
 };
 
 proto._updateMapView = function() {
-  const bbox = this.viewer.getBBOX();
-  const resolution = this.viewer.getResolution();
-  const center = this.viewer.getCenter();
-  const size = this.getMap().getSize();
-  this.updateMapView(bbox, resolution, center, size);
+  //bbox, resolution, center, size
+  this.updateMapView(this.viewer.getBBOX(), this.viewer.getResolution(), this.viewer.getCenter(), this.getMap().getSize());
 };
 
 proto.getMapSize = function() {
-  const map = this.viewer.map;
-  return map.getSize();
+  return this.viewer.map.getSize();
 };
 
 proto.setInnerGreyCoverScale = function(scale) {
@@ -2585,13 +2617,21 @@ proto.setInnerGreyCoverBBox = function(options={}) {
     this._drawShadow.inner[2] = x_max;
     this._drawShadow.inner[3] = y_max;
   }
-  if (_.isNil(scale)) this._drawShadow.scale = this._drawShadow.scale || 1;
-  else this._drawShadow.scale = scale;
+  if (_.isNil(scale)) {
+    this._drawShadow.scale = this._drawShadow.scale || 1;
+  } else {
+    this._drawShadow.scale = scale;
+  }
 
-  if (_.isNil(rotation)) this._drawShadow.rotation = this._drawShadow.rotation || 0;
-  else this._drawShadow.rotation = rotation;
+  if (_.isNil(rotation)) {
+    this._drawShadow.rotation = this._drawShadow.rotation || 0;
+  } else {
+    this._drawShadow.rotation = rotation;
+  }
 
-  this._drawShadow.outer &&  map.render();
+  if (this._drawShadow.outer) {
+    map.render();
+  }
 };
 
 // grey map precompose mapcompose
@@ -2603,13 +2643,13 @@ proto.startDrawGreyCover = function(message) {
   const postcompose = evt => {
     const ctx = evt.context;
     const size = this.getMap().getSize();
-    // Inner polygon,must be counter-clockwise
+    // Inner polygon must be counter-clockwise
     const height = size[1] * ol.has.DEVICE_PIXEL_RATIO;
     const width = size[0] * ol.has.DEVICE_PIXEL_RATIO;
     this._drawShadow.outer = [0,0,width, height];
     ctx.restore();
     ctx.beginPath();
-    // Outside polygon, must be clockwise
+    // Outside polygon must be clockwise
     ctx.moveTo(0, 0);
     ctx.lineTo(width, 0);
     ctx.lineTo(width, height);
@@ -2625,7 +2665,7 @@ proto.startDrawGreyCover = function(message) {
       y_max = this._drawShadow.inner[1];
       rotation = this._drawShadow.rotation;
       scale = this._drawShadow.scale;
-      // Inner polygon,must be counter-clockwise antiorario
+      // Inner polygon must be counter-clockwise antiorario
       ctx.translate((x_max+x_min)/2, (y_max+y_min)/2);
       ctx.rotate(rotation*Math.PI / 180);
       ctx.moveTo(-((x_max-x_min)/2),((y_max-y_min)/2));
@@ -2654,13 +2694,14 @@ proto.startDrawGreyCover = function(message) {
 };
 
 proto.stopDrawGreyCover = function() {
-  const map = this.getMap();
   if (this._greyListenerKey) {
     ol.Observable.unByKey(this._greyListenerKey);
     this._greyListenerKey = null;
-    this._drawShadow.inner.length && this._resetDrawShadowInner();
+    if (this._drawShadow.inner.length) {
+      this._resetDrawShadowInner();
+    }
   }
-  map.render();
+  this.getMap().render();
 };
 
 proto.removeExternalLayers = function() {
@@ -2678,8 +2719,10 @@ proto.changeLayerVisibility = function({id, external=false, visible}) {
 
 proto.changeLayerOpacity = function({id, opacity=1}={}) {
   const layer = this.getLayerById(id);
-  layer && layer.setOpacity(opacity);
-  this.emit('change-layer-opacity', {id, opacity});
+  if (layer) {
+    layer.setOpacity(opacity);
+    this.emit('change-layer-opacity', {id, opacity});
+  }
 };
 
 proto.changeLayerMapPosition = function({id, position=MAP_SETTINGS.LAYER_POSITIONS.default}) {
@@ -2706,11 +2749,13 @@ proto.removeExternalLayer = function(name) {
   this.viewer.map.removeLayer(layer);
   const type = layer._type || 'vector';
   GUI.getService('catalog').removeExternalLayer({ name, type });
-  if (type == 'wms') {
+  if ('wms' == type) {
     this._externalMapLayers = this._externalMapLayers
       .filter(ext => {
         const found = ext.getId() === layer.id;
-        if (found) this.unregisterMapLayerListeners(ext, layer.projectLayer);
+        if (found) {
+          this.unregisterMapLayerListeners(ext, layer.projectLayer);
+        }
         return !found;
       });
   }
@@ -2722,11 +2767,15 @@ proto.removeExternalLayer = function(name) {
 /**
  * Add external WMS layer to map
  * 
- * @param url
- * @param layers
- * @param name
- * @param projection
- * @param position
+ * @param { Object } wms
+ * @param { string } wms.url
+ * @param { string } wms.name
+ * @param wms.epsg
+ * @param wms.position
+ * @param wms.opacity
+ * @param wms.visible
+ * @param wms.layers
+ *
  * @returns {Promise<unknown>}
  */
 proto.addExternalWMSLayer = function({
@@ -2815,7 +2864,7 @@ proto.addExternalLayer = async function(externalLayer, options={}) {
 
     vectorLayer           = externalLayer;
     vectorLayer.filter    = { // used by `selection` for query result purpose ?
-      active: false           // UNUSUED - it means not yet implemented?
+      active: false           // UNUSED - it means not yet implemented?
     };
     vectorLayer.selection = {
       active: false,
@@ -2991,11 +3040,10 @@ proto.setExternalLayerStyle = function(color, field) {
       stroke: new ol.style.Stroke({ color, width: 3 })
     })
   };
-  const styleFunction = function(feature, resolution) {
+  return function(feature, resolution) {
     const func = feature.getStyleFunction();
     return func ? func.call(feature, resolution) : defaultStyle[feature.getGeometry().getType()];
   };
-  return styleFunction;
 };
 
 /**
@@ -3029,12 +3077,15 @@ proto._handlePrint = async function(controlType) {
       message: 'SecurityError' === err.name ? 'mapcontrols.screenshot.securityError' : 'mapcontrols.screenshot.error',
       autoclose: false
     });
+    console.warn(err);
   }
   // End download
   ApplicationService.setDownload(false, download_id);
   return true;
 };
 
+proto.getCookie = (name) => Vue.cookie.get(name);
+
 /**
  * Wrapper for native Open Layers controls 
  */
@@ -3102,7 +3153,6 @@ function OLControl(type) {
     });
 
   }
-
   ol.inherits(_ctor, ol.control.Control);
   return _ctor;
 }
diff --git a/src/app/gui/map/vue/map.js b/src/app/gui/map/vue/map.js
index 51219164e..25afd4001 100755
--- a/src/app/gui/map/vue/map.js
+++ b/src/app/gui/map/vue/map.js
@@ -1,45 +1,7 @@
-import * as vueComponentOptions from 'components/Map.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { base, merge, inherit } = require('utils');
-const Component = require('gui/component/component');
-const { MapService } = require('gui/map/mapservice');
-
-// interanl registration
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-Vue.component('g3w-map', vueComponentOptions);
-
-function MapComponent(options = {}) {
-  base(this, options);
-  this.id = "map-component";
-  this.title = "Map Component";
-  const target = options.target || "map";
-  const maps_container = options.maps_container || "g3w-maps";
-  options.target = target;
-  options.maps_container = maps_container;
-  const service = new MapService(options);
-  this.setService(service);
-  merge(this, options);
-  this.internalComponent = new InternalComponent({
-    service,
-    target,
-    maps_container
-  });
-  /**
-   * add Vue get cookie method
-   *
-   */
-  service.getCookie = this.internalComponent.$cookie.get;
-}
-
-inherit(MapComponent, Component);
-
-const proto = MapComponent.prototype;
-
-proto.layout = function(width, height) {
-  $(`#${this.target}`).height(height);
-  $(`#${this.target}`).width(width);
-  this._service.layout({width, height});
-};
-
-module.exports =  MapComponent;
\ No newline at end of file
+import vueComp from 'components/g3w-map';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/metadata/metadataservice.js b/src/app/gui/metadata/metadataservice.js
deleted file mode 100644
index ecfbe7941..000000000
--- a/src/app/gui/metadata/metadataservice.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import ProjectsRegistry from 'store/projects';
-import GUI from 'services/gui';
-
-const { inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-const ProjectMetadataComponent = require('gui/metadata/vue/components/project/project');
-
-const METADATAGROUPS = {
-  general: [
-    'title',
-    'name',
-    'description',
-    'abstract',
-    'keywords',
-    'fees',
-    'accessconstraints',
-    'contactinformation',
-    'wms_url'
-  ],
-  spatial: [
-    'crs',
-    'extent'
-  ],
-  layers: [
-    'layers'
-  ]
-};
-
-function MetadataService() {
-  this.content = null;
-  this.show = false;
-  this.state = {
-    name: '',
-    groups: {}
-  };
-  this._buildProjectGroupMetadata();
-}
-
-inherit(MetadataService, G3WObject);
-
-const proto = MetadataService.prototype;
-
-proto._buildProjectGroupMetadata = function() {
-  const project = ProjectsRegistry.getCurrentProject().getState();
-  this.state.name = project.title;
-  const groups = {};
-  Object.entries(METADATAGROUPS).forEach(([groupName, value]) => {
-    groups[groupName] = {};
-    value.forEach(field => {
-      const fieldValue = project.metadata && project.metadata[field] ? project.metadata[field] : project[field];
-      if (!!fieldValue) {
-        groups[groupName][field] = {
-          label: ['sdk','metadata','groups', groupName, 'fields', field].join('.'),
-          value: fieldValue
-        }
-      }
-    })
-  });
-  this.state.groups = groups;
-};
-
-proto.getProjectMetadata = function() {
-  return this.state;
-};
-
-proto.getLayersMetadata = function() {
-  return this.state.groups.layers;
-};
-
-proto.getLayerMetadata = function(id) {
-  const layerMetadata = this.state.groups.layers.filter(layer => layer.id === id);
-  return layerMetadata[0];
-};
-
-proto.showMetadata = function(bool) {
-  this.show = bool;
-  if (this.show) {
-    this.content = new ProjectMetadataComponent({
-      state: this.getProjectMetadata(),
-      service: this
-    });
-    GUI.setContent({
-      content: this.content,
-      title: "sdk.metadata.title",
-      perc: 100
-    });
-    this.show = true;
-  } else GUI.closeContent()
-
-};
-
-proto.reload = function() {
-  this.emit('reload');
-  this._buildProjectGroupMetadata();
-};
-
-
-
-module.exports = MetadataService;
diff --git a/src/app/gui/metadata/vue/components/layer/layer.js b/src/app/gui/metadata/vue/components/layer/layer.js
deleted file mode 100644
index b5f8d2011..000000000
--- a/src/app/gui/metadata/vue/components/layer/layer.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Layer from 'components/MetadataLayer.vue';
-
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-
-function LayerComponent({state = {}, service} = {}) {
-  base(this);
-  const vueComponent = Vue.extend(Layer);
-  this.setService(service);
-  this.internalComponent = new vueComponent({
-    state
-  });
-  this.layout = function() {};
-}
-
-inherit(LayerComponent, Component);
-
-module.exports = LayerComponent;
diff --git a/src/app/gui/metadata/vue/components/project/project.js b/src/app/gui/metadata/vue/components/project/project.js
deleted file mode 100644
index 9c46ddc3b..000000000
--- a/src/app/gui/metadata/vue/components/project/project.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import ProjectCatalog from 'components/MetadataProject.vue'
-
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-
-function ProjectMetadataComponent({state = {}, service} = {}) {
-  base(this);
-  const vueComponent = Vue.extend(ProjectCatalog);
-  this.setService(service);
-  this.internalComponent = new vueComponent({
-    state
-  });
-  this.layout = function() {};
-}
-
-inherit(ProjectMetadataComponent, Component);
-
-module.exports = ProjectMetadataComponent;
diff --git a/src/app/gui/metadata/vue/metadata.js b/src/app/gui/metadata/vue/metadata.js
index 882e74b37..48a434c32 100644
--- a/src/app/gui/metadata/vue/metadata.js
+++ b/src/app/gui/metadata/vue/metadata.js
@@ -1,38 +1,7 @@
-import * as vueComponentOptions from 'components/Metadata.vue';
-
-import GUI from 'services/gui';
-
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-const MetadataService = require('gui/metadata/metadataservice');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-const MetadataComponent = function(options = {}) {
-  base(this, options);
-  this.title = "sdk.metadata.title";
-  const service = options.service || new MetadataService(options);
-  this.setService(service);
-  this._service.on('reload', () => {
-    this.setOpen(false);
-  });
-  this.setInternalComponent = function () {
-    this.internalComponent = new InternalComponent({
-      service: service
-    });
-    this.internalComponent.state = service.state;
-    return this.internalComponent;
-  };
-  this._setOpen = function(bool) {
-    this._service.showMetadata(bool);
-  };
-  GUI.on('closecontent', ()=>{
-    this.state.open = false;
-  })
-};
-
-inherit(MetadataComponent, Component);
-
-module.exports = MetadataComponent;
-
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-metadata';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/panel.js b/src/app/gui/panel.js
index e9bf731ab..1df57eae0 100644
--- a/src/app/gui/panel.js
+++ b/src/app/gui/panel.js
@@ -1,74 +1,7 @@
-import GUI from 'services/gui';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { inherit, resolve: resolvedValue } = require('utils');
-const G3WObject = require('core/g3wobject');
-
-const Panel = function(options={}) {
-  this.id = options.id || null;
-  this.title = options.title || '';
-  this.internalPanel = options.panel || null;
-  this.service = options.service;
-};
-
-inherit(Panel, G3WObject);
-
-const proto = Panel.prototype;
-
-proto.getId = function(){
-  return this.id;
-};
-
-proto.getTitle = function(){
-  return this.title;
-};
-
-proto.getService = function(){
-  return this.service;
-};
-
-proto.setService = function(service) {
-  this.service = service;
-};
-
-proto.getInternalPanel = function() {
-  return this.internalPanel;
-};
-
-proto.setInternalPanel = function(internalPanel) {
-  this.internalPanel = internalPanel;
-};
-
-proto.show = function() {
-  GUI.showPanel(this);
-};
-
-proto.close = function(){
-  GUI.closePanel();
-};
-
-proto.mount = function(parent) {
-  const panel = this.internalPanel;
-  const iCinstance = panel.$mount();
-  $(parent).append(iCinstance.$el);
-  iCinstance.$nextTick(() => {
-    $(parent).localize();
-    panel.onShow && panel.onShow();
-  });
-  return resolvedValue(true);
-};
-
-proto.unmount = function() {
-  const panel = this.internalPanel;
-  const d = $.Deferred();
-  panel.$destroy(true);
-  $(panel.$el).remove();
-  panel.onClose && panel.onClose();
-  this.internalComponent = null;
-  d.resolve();
-  return d.promise();
-};
-
-proto.onResize = function(parentWidth,parentHeight){};
-
-
-module.exports = Panel;
+import vueComp from 'core/g3w-panel';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/print/printservice.js b/src/app/gui/print/printservice.js
deleted file mode 100644
index d76d30a02..000000000
--- a/src/app/gui/print/printservice.js
+++ /dev/null
@@ -1,678 +0,0 @@
-import ProjectsRegistry           from 'store/projects';
-import ApplicationService         from 'services/application';
-import ApplicationState           from 'store/application-state';
-import {
-  PRINT_SCALES as scale,
-  PRINT_RESOLUTIONS as dpis,
-  PRINT_FORMATS as formats
-}                                 from 'app/constant';
-import GUI                        from 'services/gui';
-import { getScaleFromResolution } from 'utils/getScaleFromResolution';
-import { getResolutionFromScale } from 'utils/getResolutionFromScale';
-import { getMetersFromDegrees }   from 'utils/getMetersFromDegrees';
-
-
-const {
-  base,
-  inherit,
-  downloadFile,
-  convertObjectToUrlParams,
-}                           = require('utils');
-const { t }                 = require('core/i18n/i18n.service');
-const G3WObject             = require('core/g3wobject');
-const PrintPage             = require('gui/print/vue/printpage');
-
-/*
- http://localhost/fcgi-bin/qgis_mapserver/qgis_mapserv.fcgi
-  ?MAP=/home/marco/geodaten/projekte/composertest.qgs
-  &SERVICE=WMS&VERSION=1.3.0
-  &REQUEST=GetPrint
-  &TEMPLATE=Composer 1
-  &map0:extent=693457.466131,227122.338236,700476.845177,230609.807051
-  &BBOX=693457.466131,227122.338236,700476.845177,230609.807051
-  &CRS=EPSG:21781
-  &WIDTH=1467
-  &HEIGHT=729
-  &LAYERS=layer0,layer1
-  &STYLES=,
-  &FORMAT=pdf
-  &DPI=300
-  &TRANSPARENT=true
-
- In detail, the following parameters can be used to set properties for composer maps:
-
- <mapname>:EXTENT=<xmin,ymin,xmax, ymax> //mandatory
- <mapname>:ROTATION=<double> //optional, defaults to 0
- <mapname>:SCALE=<double> //optional. Forces scale denominator as server and client may have different scale calculations
- <mapname>:LAYERS=<comma separated list with layer names> //optional. Defaults to all layer in the WMS request
- <mapname>:STYLES=<comma separated list with style names> //optional
- <mapname>:GRID_INTERVAL_X=<double> //set the grid interval in x-direction for composer grids
- <mapname>:GRID_INTERVAL_Y=<double> //set the grid interval in x-direction for composer grids
- */
-
-/**
- * @deprecated since 3.9.1 will be removed in 4.x
- * 
- * ORIGINAL SOURCE: src\app\core\print\printservice.js@3.9.0
- */
-const PRINT_UTILS = {
-  /**
-   * @param { Object } opts
-   * @param opts.rotation,
-   * @param opts.dpi
-   * @param opts.format
-   * @param opts.template
-   * @param { Array } opts.maps
-   * @param { Array } opts.labels
-   * @param opts.is_maps_preset_theme
-   * @param { 'GET' | 'POST' } method
-   */
-  print(opts = {}, method = 'GET') {
-    const store  = ProjectsRegistry.getCurrentProject().getLayersStore();
-    const layers = store
-      .getLayers({ PRINTABLE: { scale: opts.scale }, SERVERTYPE: 'QGIS' })
-      .reverse(); // reverse order is important
-
-    // skip when ..
-    if (!layers.length) {
-      return Promise.resolve({layers: false})
-    }
-
-    const LAYERS = layers.map(l => l.getPrintLayerName()).join();
-
-    return PRINT_UTILS[method]({
-      url: store.getWmsUrl(),
-      mime_type: ({ pdf: 'application/pdf', jpg: 'image/jpeg' })[opts.format],
-      params: {
-        SERVICE:     'WMS',
-        VERSION:     '1.3.0',
-        REQUEST:     'GetPrint',
-        TEMPLATE:    opts.template,
-        DPI:         opts.dpi,
-        STYLES:      layers.map(l => l.getStyle()).join(','),
-        LAYERS:      opts.is_maps_preset_theme ? undefined : LAYERS,
-        FORMAT:      opts.format,
-        CRS:         store.getProjection().getCode(),
-        filtertoken: ApplicationState.tokens.filtertoken,
-        ...(opts.maps || []).reduce((params, map) => {
-          params[map.name + ':SCALE']    = map.scale;
-          params[map.name + ':EXTENT']   = map.extent;
-          params[map.name + ':ROTATION'] = opts.rotation;
-          params[map.name + ':LAYERS']   = opts.is_maps_preset_theme && undefined === map.preset_theme ? LAYERS : undefined;
-          return params;
-        }, {}),
-        ...(opts.labels || []).reduce((params, label) => {
-          params[label.id] = label.text;
-          return params;
-        }, {})
-      },
-    });
-  },
-  /**
-   * @param { Object } opts
-   * @param opts.field
-   * @param opts.values
-   * @param opts.template
-   * @param opts.download
-   * @param { 'GET' | 'POST' } method
-   */
-  printAtlas(opts = {}, method = 'GET') {
-    const store = ProjectsRegistry.getCurrentProject().getLayersStore();
-    const multi = opts.values.length > 1;
-    return PRINT_UTILS[method]({
-      url: store.getWmsUrl(),
-      mime_type: 'application/pdf',
-      params:    {
-        SERVICE:     'WMS',
-        VERSION:     '1.3.0',
-        REQUEST:     'GetPrintAtlas',
-        EXP_FILTER:  opts.field + (multi ? ' IN (' : '=') + (opts.values.map(v => `'${v}'`).join()) + (multi ? ')' : ''),
-        TEMPLATE:    opts.template,
-        filtertoken: ApplicationState.tokens.filtertoken,
-        DOWNLOAD:    opts.download ? 1 : undefined,
-      },
-    })
-  },
-
-  /**
-   * @param { Object } opts
-   * @param opts.url
-   * @param opts.params
-   * @param opts.mime_type
-   * @return {Promise<{mime_type, layers: boolean, url: string}>}
-   * @constructor
-   */
-  async POST({ url, params, mime_type }) {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
-      body: convertObjectToUrlParams(params),
-    });
-    if (!response.ok) {
-      //@TODO Need to translate
-      throw new Error(500 === response.status ? 'Internal Server Error' : 'Request Failed');
-    }
-    return {
-      mime_type,
-      layers: true,
-      url: URL.createObjectURL(await response.blob()),
-    };
-  },
-  /**
-   * @param { Object } opts
-   * @param opts.url
-   * @param opts.params
-   * @param opts.mime_type
-   * @return {Promise<unknown>}
-   * @constructor
-   */
-  GET({url, params, mime_type}) {
-    return new Promise((resolve, reject) => {
-      resolve({
-        url: `${url}?${convertObjectToUrlParams(params)}`,
-        layers: true,
-        mime_type
-      });
-    })
-  },
-
-  /**
-   * Get wms url for current project
-   * @returns {*}
-   */
-  getUrl() {
-    return ProjectsRegistry.getCurrentProject().getLayersStore().getWmsUrl();
-  },
-
-};
-
-function PrintComponentService() {
-  base(this);
-
-  /** @deprecated since 3.9.1 will be removed in 4.x */
-  this.printService = PRINT_UTILS;
-
-  this._initialized = false;
-  this.state = {
-    loading: false
-  };
-  this._moveMapKeyEvent = null;
-  this._page = null;
-  this._mapService = null;
-  this._map = null;
-  this._mapUnits;
-  this._scalesResolutions = {};
-
-  this.init = function() {
-    this._project = ProjectsRegistry.getCurrentProject();
-    this.state.print = this._project.getPrint() || [];
-    this.state.visible = this.state.print.length > 0;
-    this.state.isShow = false;
-    this.state.url = null;
-    this.state.output = {
-      url: null,
-      method: this._project.getOwsMethod(),
-      layers: true,
-      format: null,
-      loading: false,
-      type: null
-    };
-    this.state.printextent = {
-      minx: [0, 0],
-      miny: [0, 0],
-      maxx: [0, 0],
-      maxy: [0, 0]
-    };
-    if (this.state.visible) {
-      this.setInitState();
-    }
-  };
-}
-
-inherit(PrintComponentService, G3WObject);
-
-const proto = PrintComponentService.prototype;
-
-/**
- *
- */
-proto.setInitState = function() {
-  this.state.template      = this.state.print[0].name;
-  this.state.atlas         = this.state.print[0].atlas;
-  this.state.atlasValues   = [];
-  this.state.rotation      = 0;
-  this.state.inner         = [0, 0, 0, 0];
-  this.state.center        = null;
-  this.state.size          = null;
-  this.state.scale         = scale;
-  this.state.scala         = null;
-  this.state.dpis          = dpis;
-  this.state.dpi           = dpis[0];
-  this.state.formats       = formats;
-  this.state.output.format = formats[0].value;
-  this.state.maps          = this.state.print[0].maps;
-  // label section
-  this.state.labels        = this.state.print[0].labels;
-};
-
-/**
- *
- */
-proto.changeTemplate = function() {
-  if (!this.state.template) {
-    return;
-  }
-  const has_previous = this.state.atlas || 0 === this.state.maps.length;
-  const print        = this.state.print.find(p => p.name === this.state.template)
-
-  this.state.maps        = print.maps;
-  this.state.atlas       = print.atlas;
-  this.state.labels      = print.labels;
-  this.state.atlasValues = [];
-
-  if (this.state.atlas) {
-    this._clearPrint();
-  } else if (has_previous) {
-    this.showPrintArea(true);
-  } else {
-    this._setPrintArea();
-  }
-};
-
-/**
- * On change scala set print area
- */
-proto.changeScale = function() {
-  if (this.state.scala) {
-    this._setPrintArea();
-  }
-};
-
-/**
- * On change rotation, rotate print area
- */
-proto.changeRotation = function() {
-  this._mapService
-    .setInnerGreyCoverBBox({
-      rotation: this.state.rotation
-    });
-};
-
-/**
- *
- * @returns {string}
- * @private
- */
-proto._getPrintExtent = function() {
-  const [minx, miny, maxx, maxy] = [
-    ... this.state.printextent.lowerleft,
-    ...this.state.printextent.upperright
-  ];
-  return (
-    this._mapService.isAxisOrientationInverted() ?
-      [miny, minx, maxy, maxx ] :
-      [minx, miny, maxx, maxy]
-  ).join();
-};
-
-/**
- *
- * @param extent
- * @returns {string}
- */
-proto.getOverviewExtent = function(extent={}) {
-  const {xmin, xmax, ymin, ymax} = extent;
-  return (
-    this._mapService.isAxisOrientationInverted() ?
-      [ymin, xmin, ymax, xmax ] :
-      [xmin, ymin, xmax, ymax]
-  ).join();
-};
-
-/**
- *
- * @returns {{template, maps: {extent: *, name: *, preset_theme: *, scale: *|null}[], rotation, format, scale: (null|*), is_maps_preset_theme: boolean, dpi: (number|*), labels}}
- * @private
- */
-proto._getOptionsPrint = function() {
-  let is_maps_preset_theme = false;
-  const maps = this.state.maps.map(map => {
-    is_maps_preset_theme = is_maps_preset_theme || undefined !== map.preset_theme;
-    return {
-      name: map.name,
-      preset_theme: map.preset_theme,
-      scale: map.overview ? map.scale : this.state.scala,
-      extent: map.overview ? this.getOverviewExtent(map.extent) : this._getPrintExtent()
-    }
-  });
-
-  return {
-    rotation: this.state.rotation,
-    dpi: this.state.dpi,
-    template: this.state.template,
-    maps,
-    scale: this.state.scala,
-    format: this.state.output.format,
-    labels: this.state.labels,
-    is_maps_preset_theme
-  };
-};
-
-/**
- *
- */
-proto.setPrintAreaAfterCloseContent = function() {
-  this._map.once('postrender', this._setPrintArea.bind(this));
-  this.stopLoading();
-};
-
-/**
- *
- * @returns {Promise<unknown>}
- */
-proto.print = function() {
-  return new Promise((resolve, reject) => {
-    //disable sidebar
-    GUI.disableSideBar(true);
-    //atlas print
-    if (this.state.atlas) {
-      const caller_download_id = ApplicationService.setDownload(true);
-      this.state.loading = true;
-      this.printService
-        .printAtlas({
-          template: this.state.template,
-          field: this.state.atlas.field_name || '$id',
-          values: this.state.atlasValues,
-          download: true
-        })
-        .then(({url}) => {
-          downloadFile({
-            url,
-            filename: this.state.template,
-            mime_type: 'application/pdf'
-          })
-            .then(resolve)
-            .catch(error => {
-              this.showError(error);
-              reject();
-            })
-            .finally(() => {
-              this.state.loading = false;
-              ApplicationService.setDownload(false, caller_download_id);
-              GUI.disableSideBar(false);
-            });
-        })
-    } else {
-      this.state.output.url = null;
-      this.state.output.layers = true;
-      this._page = new PrintPage({
-        service: this
-      });
-
-      GUI.setContent({
-        content: this._page,
-        title: 'print',
-        perc: 100
-      });
-
-      this.printService
-        .print(this._getOptionsPrint(), this.state.output.method)
-        .then((data) => {
-          this.state.output.url = data.url;
-          this.state.output.layers = data.layers;
-          this.state.output.mime_type = data.mime_type;
-          resolve();
-        })
-        .catch(err => {
-          this.showError();
-          reject(err);
-        })
-        .finally(() => {
-          // in case of no layers
-          if (!this.state.output.layers) {
-            GUI.disableSideBar(false);
-          }
-        });
-    }
-  })
-
-};
-
-/**
- * Set loading
- */
-proto.startLoading = function() {
-  this.state.output.loading = true;
-};
-
-/**
- *Stop Loading
- */
-proto.stopLoading = function() {
-  this.state.output.loading = false;
-};
-
-/**
- *
- * @param error
- */
-proto.showError = function(error) {
-  GUI.notify.error(error || t("info.server_error"));
-  GUI.closeContent();
-};
-
-/**
- *
- * @private
- */
-proto._calculateInternalPrintExtent = function() {
-  const resolution            = this._map.getView().getResolution();
-  const scala                 = parseFloat(this.state.scala);
-  const {h: height, w: width} = this.state.maps.find(map=> !map.overview);
-  const resolutionInMeters    = this._mapService.getMapUnits() === 'm' ? resolution : getMetersFromDegrees(resolution);
-  const w                     = (((width / 1000.0) * scala) / resolutionInMeters);
-  const h                     = (((height  / 1000.0) * scala) / resolutionInMeters);
-  // get current map center ( in pixel)
-  const center                = [
-    (this.state.size[0]) / 2, // X
-    (this.state.size[1]) / 2  // Y
-  ];
-  // Calculate the inner bbox in pixel
-  const xmin                  = center[0] - (w / 2);
-  const ymin                  = center[1] - (h / 2);
-  const xmax                  = center[0] + (w / 2);
-  const ymax                  = center[1] + (h / 2);
-
-  this.state.printextent.lowerleft = this._map.getCoordinateFromPixel([xmin, ymax])
-    ? this._map.getCoordinateFromPixel([xmin, ymax])
-    : this.state.printextent.lowerleft;
-
-  this.state.printextent.upperright = this._map.getCoordinateFromPixel([xmax, ymin])
-    ? this._map.getCoordinateFromPixel([xmax, ymin])
-    : this.state.printextent.upperright;
-
-  this.state.inner = [xmin, ymax, xmax, ymin];
-};
-
-/**
- *
- * @private
- */
-proto._setPrintArea = function() {
-  //No maps set. Only attributes label
-  if (0 === this.state.maps.length) {
-    this._clearPrint();
-    return;
-  }
-  this.state.size         = this._map.getSize();
-  const resolution        = this._map.getView().getResolution();
-  this.state.currentScala = getScaleFromResolution(resolution, this._mapUnits);
-  this.state.center       = this._map.getView().getCenter();
-
-  this._calculateInternalPrintExtent();
-  this._mapService.setInnerGreyCoverBBox({
-    type: 'pixel',
-    inner: this.state.inner,
-    rotation: this.state.rotation
-  });
-};
-
-/**
- *
- * @param reset
- * @private
- */
-proto._clearPrint = function(reset=false) {
-  ol.Observable.unByKey(this._moveMapKeyEvent);
-  this._moveMapKeyEvent = null;
-  this._mapService.stopDrawGreyCover();
-};
-
-/**
- *
- * @param maxResolution
- * @private
- */
-proto._setAllScalesBasedOnMaxResolution = function(maxResolution) {
-  let resolution             = maxResolution;
-  const mapScala             = getScaleFromResolution(resolution, this._mapUnits);
-  const orderScales          = _.orderBy(this.state.scale, ['value'], ['desc']);
-  let scale                  = [];
-  let addedFirstHighestScale = false;
-  const handleScala = (scala) => {
-    scale.push(scala);
-    resolution = getResolutionFromScale(scala.value, this._mapUnits);
-    this._scalesResolutions[scala.value] = resolution;
-    resolution = resolution / 2;
-  };
-  orderScales
-    .forEach((scala, index) => {
-      if (mapScala > scala.value) {
-        if (!addedFirstHighestScale) {
-          const higherScale = orderScales[index-1];
-          handleScala(higherScale);
-          addedFirstHighestScale = true;
-        }
-        handleScala(scala);
-      }
-    });
-
-  this.state.scale = scale;
-};
-
-/**
- *
- * @private
- */
-proto._setInitialScalaSelect = function() {
-  this.state.scala = this.state.scale[0].value;
-  $('#scala').val(this.state.scala);
-};
-
-/**
- *
- * @param resolution
- * @private
- */
-proto._setCurrentScala = function(resolution) {
-  Object
-    .entries(this._scalesResolutions)
-    .find(([scala, res]) => {
-      if (resolution <= res) {
-        this.state.scala = scala;
-        return true
-      }
-    });
-};
-
-/**
- *
- * @private
- */
-proto._setMoveendMapEvent = function() {
-  this._moveMapKeyEvent = this._map.on('moveend', this._setPrintArea.bind(this));
-};
-
-/**
- *
- * @private
- */
-proto._showPrintArea = function() {
-  if (this.state.atlas === undefined) {
-    this._setPrintArea();
-    this._mapService.startDrawGreyCover();
-  }
-};
-
-/**
- *
- * @private
- */
-proto._initPrintConfig = function() {
-  if (!this._initialized) {
-    const maxResolution = this._map.getView().getMaxResolution();
-    this._setAllScalesBasedOnMaxResolution(maxResolution);
-    this._initialized = true;
-  }
-  const resolution = this._map.getView().getResolution();
-  this._setCurrentScala(resolution);
-};
-
-/**
- *
- * @param bool
- */
-proto.showPrintArea = function(bool) {
-  // close content if open
-  this.state.isShow = bool;
-  GUI
-    .closeContent()
-    .then(mapComponent => {
-      setTimeout(() => {
-        this._mapService = mapComponent.getService();
-        this._mapUnits = this._mapService.getMapUnits();
-        this._mapService.getMap().once('postrender', evt => {
-          this._map = evt.map;
-          if (bool) {
-            this._setMoveendMapEvent();
-            this._initPrintConfig();
-            this._showPrintArea();
-          } else {
-            this._clearPrint();
-          }
-        });
-        this._mapService.getMap().renderSync();
-      })
-    })
-};
-
-/**
- *
- */
-proto.reload = function() {
-  this._project      = ProjectsRegistry.getCurrentProject();
-  this._mapService   = GUI.getService('map');
-  this._map          = this._mapService.viewer.map;
-  this.state.print   = this._project.state.print || [];
-  this.state.visible = this.state.print.length > 0;
-
-  if (this.state.visible) {
-    this.state.template = this.state.print[0].name;
-    if (!this._initialized) {
-      this.init();
-    }
-    this._initPrintConfig();
-    this._mapService.on('changeviewaftercurrentproject', () => {
-      const maxResolution = this._map.getView().getMaxResolution();
-      this.state.scale = scale;
-      this._setAllScalesBasedOnMaxResolution(maxResolution);
-    });
-  } else {
-    this._clearPrint();
-  }
-};
-
-module.exports = {
-  PrintComponentService,
-  PRINT_UTILS,
-};
\ No newline at end of file
diff --git a/src/app/gui/print/vue/print.js b/src/app/gui/print/vue/print.js
index 4983f0f2d..8bff1039a 100644
--- a/src/app/gui/print/vue/print.js
+++ b/src/app/gui/print/vue/print.js
@@ -1,41 +1,7 @@
-import * as vueComponentOptions from 'components/Print.vue';
-
-const { inherit, base }         = require('utils');
-const Component                 = require('gui/component/component');
-const { PrintComponentService } = require('gui/print/printservice');
-
-function PrintComponent(options={}) {
-  base(this, options);
-  this.title = "print";
-  this.vueComponent = vueComponentOptions;
-  this.internalComponent = null;
-  const service = options.service || new PrintComponentService;
-  this.setService(service);
-  // init service
-  this._service.init();
-  this.setInternalComponent = function() {
-    const InternalComponent = Vue.extend(this.vueComponent);
-    this.internalComponent = new InternalComponent({
-      service
-    });
-    this.state.visible = service.state.visible;
-    this.internalComponent.state = service.state;
-    return this.internalComponent;
-  };
-
-  this._reload = function() {
-    const service = this.getService();
-    service.reload();
-    this.state.visible = service.state.visible;
-  };
-
-  this._setOpen = function(bool) {
-    this._service.showPrintArea(bool);
-  };
-}
-
-inherit(PrintComponent, Component);
-
-module.exports = PrintComponent;
-
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-print';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/print/vue/printpage.js b/src/app/gui/print/vue/printpage.js
deleted file mode 100644
index 23b525d06..000000000
--- a/src/app/gui/print/vue/printpage.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as vueComponentOptions from 'components/PrintPage.vue';
-
-const { inherit, base }         = require('utils');
-const Component                 = require('gui/component/component');
-
-const InternalComponent         = Vue.extend(vueComponentOptions);
-
-const PrintPage = function(options={}) {
-  base(this);
-  const service = options.service;
-  this.setService(service);
-  const internalComponent = new InternalComponent({
-    service
-  });
-  this.setInternalComponent(internalComponent);
-  this.internalComponent.state = service.state.output;
-
-  this.unmount = function() {
-    this.getService().setPrintAreaAfterCloseContent();
-    return base(this, 'unmount')
-  }
-};
-
-inherit(PrintPage, Component);
-
-module.exports = PrintPage;
-
-
diff --git a/src/app/gui/projectsmenu/menu.js b/src/app/gui/projectsmenu/menu.js
deleted file mode 100644
index 1190f7537..000000000
--- a/src/app/gui/projectsmenu/menu.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as vueComponentOptions from 'components/ProjectsMenu.vue';
-
-const { base, inherit, merge } = require('utils');
-const Component = require('gui/component/component');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function MenuComponent(options={}){
-  base(this,options);
-  this.title = options.title || "menu";
-  this.state.visible = true;
-  this.state.menuitems = options.menuitems;
-  const host = options.host;
-  merge(this, options);
-  this.internalComponent = new InternalComponent({
-    service: this,
-    host
-  });
-  this.internalComponent.state = this.state;
-}
-inherit(MenuComponent, Component);
-
-const proto = MenuComponent.prototype;
-
-proto.trigger = function(item) {};
-
-module.exports = MenuComponent;
-
diff --git a/src/app/gui/projectsmenu/projectsmenu.js b/src/app/gui/projectsmenu/projectsmenu.js
index c96d8fb3a..f55d8715c 100644
--- a/src/app/gui/projectsmenu/projectsmenu.js
+++ b/src/app/gui/projectsmenu/projectsmenu.js
@@ -1,32 +1,7 @@
-import ProjectsRegistry from 'store/projects';
-import ApplicationService from 'services/application';
-
-const { base, inherit } = require('utils');
-const MenuComponent = require('gui/projectsmenu/menu');
-
-function ProjectsMenuComponent(options={}) {
-  options.id = 'projectsmenu';
-  base(this, options);
-  this.state.menuitems = [];
-  const host = options.host;
-  const projects = options.projects || ProjectsRegistry.getListableProjects();
-  this.state.menuitems = projects.map(project => ({
-    title: project.title,
-    description: project.description,
-    thumbnail: project.thumbnail,
-    gid: project.gid,
-    cbk: options.cbk || function(options={}) {
-      const {gid} = options;
-      return ApplicationService.changeProject({
-        gid,
-        host
-      })
-    }
-  }));
-}
-
-inherit(ProjectsMenuComponent, MenuComponent);
-
-module.exports = ProjectsMenuComponent;
-
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-projectsmenu';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/querybuilder/querybuilderuifactory.js b/src/app/gui/querybuilder/querybuilderuifactory.js
index 08ed75380..b225f3fd5 100644
--- a/src/app/gui/querybuilder/querybuilderuifactory.js
+++ b/src/app/gui/querybuilder/querybuilderuifactory.js
@@ -1,31 +1,7 @@
-const QueryBuilder = require('gui/querybuilder/vue/querybuilder');
-const QueryBuilderPanel = require('gui/querybuilder/vue/panel/querybuilderpanel');
-
-const QuerybuilderUIfactory = {
-  type: null,
-  show({type='sidebar', options}={}){
-    let QueryBuilderInstance; 
-    this.type = this.type === null ? type : this.type;
-    if (this.type==='modal') {
-      QueryBuilderInstance = new QueryBuilder({
-        options
-      });
-      const queryBuilderDom = QueryBuilderInstance.$mount().$el;
-      GUI.showModalDialog({
-        title: 'Query Builder',
-        message: queryBuilderDom,
-        className: "modal-background-dark "
-      })
-    } else {
-      const panel = new QueryBuilderPanel({
-        options
-      });
-      QueryBuilderInstance = panel.getInternalPanel();
-      panel.show();
-    }
-    return QueryBuilderInstance;
-  }
-};
-
-module.exports = QuerybuilderUIfactory;
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-querybuilder';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/querybuilder/vue/panel/querybuilderpanel.js b/src/app/gui/querybuilder/vue/panel/querybuilderpanel.js
deleted file mode 100644
index b164c8eb7..000000000
--- a/src/app/gui/querybuilder/vue/panel/querybuilderpanel.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const { inherit, base } = require('utils');
-const Panel = require('gui/panel');
-const QueryBuilder = require('gui/querybuilder/vue/querybuilder');
-
-function QueryBuilderPanel(options={}) {
-  options.title = 'Query Builder';
-  base(this, options);
-  const internalPanel = new QueryBuilder(options);
-  this.setInternalPanel(internalPanel);
-}
-
-inherit(QueryBuilderPanel, Panel);
-
-module.exports = QueryBuilderPanel;
diff --git a/src/app/gui/querybuilder/vue/querybuilder.js b/src/app/gui/querybuilder/vue/querybuilder.js
deleted file mode 100644
index d7d1e0cb4..000000000
--- a/src/app/gui/querybuilder/vue/querybuilder.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as vueComponentOptions from 'components/QueryBuilder.vue';
-
-const QueryBuilder = Vue.extend(vueComponentOptions);
-
-module.exports = QueryBuilder;
diff --git a/src/app/gui/queryresults/queryresultsservice.js b/src/app/gui/queryresults/queryresultsservice.js
index 27b0fd626..5990c1f45 100644
--- a/src/app/gui/queryresults/queryresultsservice.js
+++ b/src/app/gui/queryresults/queryresultsservice.js
@@ -18,6 +18,7 @@ import { createFeatureFromBBOX }                from 'utils/createFeatureFromBBO
 import { createFeatureFromCoordinates }         from 'utils/createFeatureFromCoordinates';
 import { intersects }                           from 'utils/intersects';
 import { within }                               from 'utils/within';
+import { printAtlas }                           from 'utils/printAtlas';
 
 const {
   noop,
@@ -30,14 +31,11 @@ const { t }                      = require('core/i18n/i18n.service');
 const Layer                      = require('core/layers/layer');
 const G3WObject                  = require('core/g3wobject');
 const VectorLayer                = require('core/layers/vectorlayer');
-const { PRINT_UTILS }            = require('gui/print/printservice');
 const RelationsPage              = require('gui/relations/vue/relationspage');
 const PickCoordinatesInteraction = require('g3w-ol/interactions/pickcoordinatesinteraction');
 
 const deprecate                  = require('util-deprecate');
 
-const { printAtlas } = PRINT_UTILS;
-
 /**
  * Get and set vue reactivity to QueryResultsService
  *
@@ -57,9 +55,6 @@ class QueryResultsService extends G3WObject {
     this._changeLayerResult = this.setters.changeLayerResult;
     this._addComponent      = this.setters.addComponent;
 
-    /** @deprecated since 3.9.1 will be removed in 4.x */
-    this.printService = PRINT_UTILS;
-
     /**
      * @FIXME add description
      */
@@ -2290,7 +2285,7 @@ QueryResultsService.prototype.setters = {
 
     // whether add external layers to response
     if (true === queryResponse.query.external.add && false === options.add) {
-      const catalogService = GUI.getService('catalog');
+      const catalog = GUI.getService('catalog');
 
       /** @type { boolean | undefined } */
       const FILTER_SELECTED = queryResponse.query.external.filter.SELECTED;
@@ -2299,7 +2294,7 @@ QueryResultsService.prototype.setters = {
       this._vectorLayers
         .forEach(layer => {
           const id = layer.get('id');
-          const is_selected  = catalogService.isExternalLayerSelected({ id, type: 'vector' });
+          const is_selected  = !!(catalog.state.external.vector.find(l => l.id === id) || {}).selected;
           const is_visible = layer.getVisible(); 
           // TODO: extract this into `layer.isSomething()` ?
           if (is_visible && ((is_selected === FILTER_SELECTED) || (undefined === FILTER_SELECTED))) {
diff --git a/src/app/gui/queryresults/vue/queryresults.js b/src/app/gui/queryresults/vue/queryresults.js
index a246181d7..379f81920 100644
--- a/src/app/gui/queryresults/vue/queryresults.js
+++ b/src/app/gui/queryresults/vue/queryresults.js
@@ -1,39 +1,7 @@
-import * as vueComponentOptions from 'components/QueryResults.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-const QueryResultsService = require('gui/queryresults/queryresultsservice');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function QueryResultsComponent(options={}) {
-  base(this, options);
-  this.id = "queryresults";
-  this.title = "Query Results";
-  this._service = new QueryResultsService();
-  this.setInternalComponent = function() {
-    this.internalComponent = new InternalComponent({
-      queryResultsService: this._service
-    });
-    this.internalComponent.querytitle = this._service.state.querytitle;
-  };
-
-  this.getElement = function() {
-    if (this.internalComponent) return this.internalComponent.$el;
-  };
-
-  this._service.onafter('setLayersData', async () => {
-    !this.internalComponent && this.setInternalComponent();
-    await this.internalComponent.$nextTick();
-  });
-
-  this.layout = function(width,height) {};
-  this.unmount = function() {
-    this.getService().closeComponent();
-    return base(this, 'unmount')
-  }
-}
-
-inherit(QueryResultsComponent, Component);
-
-module.exports = QueryResultsComponent;
+import vueComp from 'components/g3w-queryresults';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/relations/relationsservice.js b/src/app/gui/relations/relationsservice.js
deleted file mode 100644
index d62586e0c..000000000
--- a/src/app/gui/relations/relationsservice.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { G3W_FID } from 'app/constant';
-import RelationsService from 'services/relations';
-import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-
-const { inherit, base } = require('utils');
-const G3WObject = require('core/g3wobject');
-
-function RelationsComponentService(options={}) {
-  this.state = {};
-  this._options = {};
-  base(this);
-}
-
-inherit(RelationsComponentService, G3WObject);
-
-const proto = RelationsComponentService.prototype;
-
-proto.getRelations = function(options={}) {
-  this._options = options;
-  return RelationsService.getRelations(options);
-};
-
-proto.getRelationsNM = async function({nmRelation, features}){
-  return await RelationsService.getRelationsNM({
-    nmRelation,
-    features
-  })
-};
-
-proto.saveRelations = async function(type){
-  this._options.type = type;
-  const caller_download_id = ApplicationService.setDownload(true);
-  try {
-    await RelationsService.save(this._options)
-  } catch(err){
-    GUI.showUserMessage({
-      type: 'alert',
-      message: err || "info.server_error",
-      closable: true
-    })
-  }
-  ApplicationService.setDownload(false, caller_download_id);
-};
-
-proto.buildRelationTable = function(relations=[], id) {
-  const layer = ApplicationService.getCurrentProject().getLayerById(id);
-  const headers = layer.getTableHeaders();
-  let columns = null;
-  let rows = [];
-  let rows_fid = [];
-  let fields;
-  if (relations.length) {
-    const attributes = Object.keys(relations[0].attributes);
-    columns = headers.filter(header => attributes.indexOf(header.name) !==-1);
-    rows = relations.map(relation => {
-      rows_fid.push(relation.attributes[G3W_FID]);
-      return columns.map(column => {
-        return relation.attributes[column.name]
-      })
-    });
-    fields = columns;
-    columns = columns.map(column => column.label);
-  }
-  return {
-    columns,
-    rows,
-    rows_fid,
-    features: relations,
-    fields,
-    formStructure : layer.getLayerEditingFormStructure(),
-    rowFormStructure: null,
-    layerId: layer.getId()
-  }
-};
-
-module.exports = RelationsComponentService;
diff --git a/src/app/gui/relations/vue/relationspage.js b/src/app/gui/relations/vue/relationspage.js
index 30dc94a73..3aa54cb4e 100644
--- a/src/app/gui/relations/vue/relationspage.js
+++ b/src/app/gui/relations/vue/relationspage.js
@@ -1,37 +1,7 @@
-import * as vueComponentOptions from 'components/RelationsPage.vue';
-
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-const Service = require('gui/relations/relationsservice');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-const RelationsPage = function(options={}) {
-  base(this, options);
-  const service = options.service || new Service();
-  const {layer, relation=null, relations=[], feature=null, table=null, chartRelationIds=[], nmRelation, currentview="relations"} = options;
-  this.setService(service);
-  const internalComponent = new InternalComponent({
-    previousview: currentview,
-    service,
-    relations,
-    relation,
-    nmRelation,
-    chartRelationIds,
-    feature,
-    currentview,
-    layer,
-    table
-  });
-  this.setInternalComponent(internalComponent);
-  internalComponent.state = service.state;
-  this.layout = function() {
-    internalComponent.reloadLayout();
-  };
-};
-
-inherit(RelationsPage, Component);
-
-module.exports = RelationsPage;
-
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
+import vueComp from 'components/g3w-relationspage';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/search/service.js b/src/app/gui/search/service.js
deleted file mode 100644
index eff5c459b..000000000
--- a/src/app/gui/search/service.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import QueryBuilderService from 'services/querybuilder';
-import ProjectsRegistry from 'store/projects';
-
-const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-const SearchPanel = require('gui/search/vue/panel/searchpanel');
-
-function Service() {
-  base(this);
-  const currentProjectState = ProjectsRegistry.getCurrentProject().state;
-  this.title = currentProjectState.search_title || "search";
-  this.init = function(searchesObject) {
-    this.state.searches = searchesObject || currentProjectState.search;
-  };
-  this.state = {
-    searches: [],
-    searchtools: [],
-    querybuildersearches: QueryBuilderService.getCurrentProjectItems()
-  };
-}
-
-inherit(Service, G3WObject);
-
-const proto = Service.prototype;
-
-proto.removeItem = function({type, index}={}){
-  switch(type) {
-    case 'querybuilder':
-      this.state.querybuildersearches.splice(index, 1);
-      break;
-  }
-};
-
-proto.getTitle = function() {
-  return this.title;
-};
-
-proto.showPanel = function(config={}) {
-  const panel = new SearchPanel(config);
-  panel.show();
-  return panel;
-};
-
-proto.cleanSearchPanels = function() {
-  this.state.panels = {};
-};
-
-proto.stop = function(){
-  const d = $.Deferred();
-  d.resolve();
-  return d.promise();
-};
-
-proto.addTool = function(searchTool) {
-  this.state.searchtools.push(searchTool);
-};
-
-proto.addTools = function(searchTools) {
-  for (const searchTool of searchTools) {
-    this.addTool(searchTool);
-  }
-};
-
-proto.addQueryBuilderSearch = function(querybuildersearch){
-  this.state.querybuildersearches.push(querybuildersearch);
-};
-
-proto.removeTool = function(searchTool) {};
-
-proto.removeTools = function() {
-  this.state.searchtools.splice(0)
-};
-
-proto.reload = function() {
-  this.state.searches = ProjectsRegistry.getCurrentProject().state.search;
-  this.state.querybuildersearches = QueryBuilderService.getCurrentProjectItems();
-};
-
-
-module.exports = Service;
diff --git a/src/app/gui/search/vue/panel/searchpanel.js b/src/app/gui/search/vue/panel/searchpanel.js
index 976b1a13a..196e67cf9 100644
--- a/src/app/gui/search/vue/panel/searchpanel.js
+++ b/src/app/gui/search/vue/panel/searchpanel.js
@@ -1,28 +1,7 @@
-import * as vueComponentOptions from 'components/SearchPanel.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { base, inherit, uniqueId } = require('utils');
-const Panel = require('gui/panel');
-const Service = require('gui/search/vue/panel/searchservice');
-
-const SearchPanelComponent = Vue.extend(vueComponentOptions);
-
-function SearchPanel(options = {}) {
-  const service = options.service || new Service(options);
-  this.setService(service);
-  this.id = uniqueId();
-  this.title = 'search';
-  const SearchPanel = options.component || SearchPanelComponent;
-  const internalPanel = new SearchPanel({
-    service
-  });
-  this.setInternalPanel(internalPanel);
-  this.unmount = function() {
-    return base(this, 'unmount').then(() => {
-      service.clear()
-    })
-  }
-}
-
-inherit(SearchPanel, Panel);
-
-module.exports = SearchPanel;
+import { SearchPanel } from 'components/g3w-search';
+module.exports = SearchPanel;
\ No newline at end of file
diff --git a/src/app/gui/search/vue/panel/searchservice.js b/src/app/gui/search/vue/panel/searchservice.js
deleted file mode 100644
index 28285f031..000000000
--- a/src/app/gui/search/vue/panel/searchservice.js
+++ /dev/null
@@ -1,993 +0,0 @@
-import { SEARCH_ALLVALUE as ALLVALUE } from 'app/constant';
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import DataRouterService from 'services/data';
-import ProjectsRegistry from 'store/projects';
-import GUI from 'services/gui';
-
-const {
-  base,
-  inherit,
-  toRawType,
-  getUniqueDomId,
-  createFilterFormInputs,
-  createSingleFieldParameter,
-  isEmptyObject,
-  sortAlphabeticallyArray,
-  sortNumericArray
-} = require('utils');
-
-const G3WObject = require('core/g3wobject');
-
-const NONVALIDVALUES = [null, undefined, ALLVALUE];
-
-function SearchService(config = {}) {
-
-  this.debounces = {
-    run: {
-      fnc: (...args) => {
-        const [width, heigth] = this.mapService.getMap().getSize();
-        if (!GUI.isMobile() || !(width === 0 || heigth === 0)) {
-          this._run(...args);
-          return;
-        }
-        GUI.hideSidebar();
-        setTimeout(() => { this._run(...args); }, 600);
-      }
-    }
-  };
-
-  base(this);
-
-  /**
-   * reactivity data
-   */
-  this.state = {
-    title: null,
-    forminputs: [],
-    loading: {},
-    searching: false,
-  };
-
-  /**
-   * @FIXME add description
-   */
-  this.config            = config;
-
-  const { options = {} } = this.config;
-  const layerid          = options.querylayerid || options.layerid || null;
-
-  /**
-   * @FIXME add description
-   */
-  this.inputdependance = {};
-
-  /**
-   * @FIXME add description
-   */
-  this.inputdependencies = {};
-
-  /**
-   * @FIXME add description
-   */
-  this.cachedependencies = {};
-
-  /**
-   * @FIXME add description
-   */
-  this.project = ProjectsRegistry.getCurrentProject();
-
-  /**
-   * @FIXME add description
-   */
-  this.mapService = GUI.getService('map');
-
-  /**
-   * @FIXME add description
-   */
-  this.searchLayer = null;
-
-  /**
-   * @FIXME add description
-   */
-  this.filter = null;
-
-  /**
-   * @FIXME add description
-   */
-  this.inputs = [];
-
-  /**
-   * @FIXME add description
-   */
-  this.state.title = config.name;
-
-  /**
-   * @FIXME add description
-   */
-  this.search_endpoint = config.search_endpoint;
-
-  /**
-   * @FIXME add description
-   */
-  this.url = options.queryurl;
-
-  /**
-   * @FIXME add description
-   */
-  this.filter = options.filter;
-
-  /**
-   * @type { 'search' | 'search_1n' }
-   */
-  this.type = this.config.type || 'search';
-
-  /**
-   * @FIXME add description
-   */
-  this.return = options.return || 'data';
-
-  /**
-   * @FIXME add description
-   */
-  this.show = 'data' === this.return && 'search' === this.type;
-
-  /**
-   * @FIXME add description
-   */
-  this.searchLayer = CatalogLayersStoresRegistry.getLayerById(layerid);
-
-  /**
-   * Store layers that will be searchable for that search form.
-   * First one is layer owner of the search setted on admin.
-   */
-  this.searchLayers = [ layerid, ...(options.otherquerylayerids || []) ].map(id => CatalogLayersStoresRegistry.getLayerById(id));
-
-  /**
-   * Create the form search structure
-   */
-  this.createInputsFormFromFilter({ filter: (options.filter || []) });
-
-}
-
-inherit(SearchService, G3WObject);
-
-const proto = SearchService.prototype;
-
-/**
- * @TODO slim down and refactor
- * 
- * Create right search structure for search form
- * 
- * @param { Object } opts
- * @param { Array } opts.filter input
- * 
- * @returns { Promise<void> } form input
- */
-proto.createInputsFormFromFilter = async function({
-  filter = [],
-} = {}) {
-  for (let i = 0; i <= filter.length - 1; i++) {
-
-    const input = {
-      label:     filter[i].label,
-      attribute: filter[i].attribute,
-      type:      filter[i].input.type || 'textfield',
-      options:   { ...filter[i].input.options },
-      value:     null,
-      operator:  filter[i].op,
-      logicop:   i === (filter.length - 1) ? null : filter[i].logicop,
-      id:        filter[i].id || getUniqueDomId(),
-      loading:   false,
-      widget:    null,
-    };
-
-    // check if it has a dependence
-    const dependance_strict             = undefined !== input.options.dependance_strict ? input.options.dependance_strict : false;
-    const dependance                    = undefined !== input.options.dependance        ? input.options.dependance        : false;
-    const isInputSelectType             = ['selectfield', 'autocompletefield'].includes(input.type);
-    input.options.values                = undefined !== input.options.values            ? input.options.values            : [];
-    const { values }                    = input.options;
-
-    let promise;
-
-    //In case of select input
-    if ('selectfield' ===  input.type) {
-      // ensure setting values options to empty array when undefined
-      input.loading = true;
-
-      promise = new Promise((resolve, reject) => {
-
-        // in case of dependence load right now
-        if (dependance && dependance_strict) {
-          input.loading = false;
-          return resolve();
-        }
-
-        // not strictly dependence
-        if (!dependance_strict) {
-          this
-            .getValuesFromField(input)
-            .then(_values => { values.splice(0, values.length, ...this.valuesToKeysValues(_values)); })
-            .catch((err)  => { console.warn(err); values.length = 0 })
-            .finally(()   => { input.loading = false; resolve(); })
-        }
-      });
-
-      promise.then(() => {
-        values[values.length && ALLVALUE !== values[0].value ? 'unshift' : 'push']({ value:ALLVALUE });
-        input.value = ALLVALUE;
-      });
-
-    }
-
-    // there is a dependence
-    if (isInputSelectType && dependance) {
-      this.inputdependance[input.attribute] = dependance;              // set dependence of input
-      this.state.loading[dependance]        = false;
-      input.options.disabled                = dependance_strict;       // disabled for BACKCOMP
-      this.setInputDependencies({ master: dependance, slave: input }); // set dependence between input
-
-    }
-
-    // set widget type for fill dependency
-    if (isInputSelectType && dependance && values.length > 0) {
-      input.widget          = 'valuemap';
-      input.options._values = [...values];
-    }
-
-    //Set input widget
-    if (isInputSelectType && dependance && !values.length && input.options.layer_id) {
-      input.widget = 'valuerelation';
-    }
-
-    // add form inputs to list of search input
-    this.state.forminputs.push(input);
-  }
-};
-
-/**
- * Get return type
- */
-proto.getReturnType = function() {
-  return this.return;
-};
-
-/**
- * Set return type
- */
-proto.setReturnType = function(returnType='data') {
-  this.return = returnType;
-  this.show   = ('data' === returnType);
-};
-
-/**
- * @param field
- * 
- * @returns {*}
- */
-proto.getAutoFieldDependeciesParamField = function(field) {
-  const fieldDependency = this.getCurrentFieldDependance(field);
-  if (fieldDependency) {
-    const [field, value] = Object.entries(fieldDependency)[0];
-    return this.createFieldsDependenciesAutocompleteParameter({field, value})
-  }
-};
-
-/**
- * @param { Object } opts
- * @param opts.fields
- * @param opts.field
- * @param opts.value
- * 
- * @returns { string | undefined | * }
- */
-proto.createFieldsDependenciesAutocompleteParameter = function({
-  fields = [],
-  field,
-  value,
-} = {}) {
-  const dependendency = this.getCurrentFieldDependance(field);
-
-  if (undefined !== value) {
-    fields.push(createSingleFieldParameter({ field, value, operator: this.getFilterInputFromField(field).op }));
-  }
-  if (!dependendency) {
-    return fields.length && fields.join() || undefined;
-  }
-  const [dfield, dvalue] = Object.entries(dependendency)[0];
-  // In case of some input dependeny are not filled
-  if (undefined !== dvalue) {
-    // need to set to lower case for api purpose
-    const { op, logicop } = this.getFilterInputFromField(dfield);
-    fields.unshift(`${dfield}|${op.toLowerCase()}|${encodeURI(dvalue)}|` + (fields.length ? logicop.toLowerCase() : ''));
-  }
-  return this.createFieldsDependenciesAutocompleteParameter({ fields, dfield });
-};
-
-/**
- * Request to server value for a specific select field
- * 
- * @param field form input
- * 
- * @returns { Promise<[]> }
- */
-proto.getValuesFromField = async function(field) {
-  //if defined layer_id dependence
-  if (field.options.layer_id) {
-    //array of unique values
-    const uniqueValues = await this.getUniqueValuesFromField({ field: field.attribute });
-    return this.getValueRelationValues(
-      field,
-      // filter
-      createFilterFormInputs({
-        layer: CatalogLayersStoresRegistry.getLayerById(field.options.layer_id),
-        search_endpoint: this.getSearchEndPoint(),
-        inputs: [{value: uniqueValues, attribute: field.options.value, logicop: "OR", operator: "eq" }]
-      })
-    );
-  }
-
-  // Relation reference
-  if (field.options.relation_reference) {
-     try {
-       //call filter data with fformatter
-       const response = await this.searchLayer.getFilterData({ fformatter: field.attribute });
-       //check response
-       if (response && response.result && response.data) {
-         field.options.values = response.data.map(([value, key]) => ({ key, value }));
-       }
-     } catch(err) {
-       throw Error(err);
-     }
-  }
-
-  if (field.options.values.length > 0) {
-    return this.getValueMapValues(field);
-  }
-
-  return this.getUniqueValuesFromField({ field: field.attribute })
-};
-
-/**
- * @param field
- * @param filter
- * 
- * @returns { Promise<[]> }
- */
-proto.getValueRelationValues = async function(field, filter) {
-  try {
-    const { data = [] } = await DataRouterService.getData('search:features', {
-      inputs:{
-        layer: CatalogLayersStoresRegistry.getLayerById(field.options.layer_id),
-        search_endpoint: this.getSearchEndPoint(),
-        filter,
-        ordering: field.options.key
-      },
-      outputs: false
-    });
-    const values = [];
-    (data && data[0] && data[0].features || [])
-      .forEach(feature => {
-        values.push({ key: feature.get(field.options.key), value: feature.get(field.options.value) })
-      });
-    return values;
-  } catch(err) {
-    return [];
-  }
-};
-
-/**
- * Return mapped values
- * 
- * @param field
- * 
- * @returns { Promise<*> }
- */
-proto.getValueMapValues = async function(field) {
-  return field.options.values.filter(value => ALLVALUE !== value);
-};
-
-
-/**
- * @param layers
- * @param options.field
- * @param options.suggest
- * @param options.unique
- * @param options.fformatter since 3.9.0
- * @param options.ordering
- * 
- * @returns { Promise<*> }
- * 
- * @since 3.8.0
- */
-proto.getLayersFilterData = async function(layers, options = {}) {
-  const {
-    field,
-    suggest,
-    unique,
-    ordering,
-    fformatter,
-  } = options;
-  // get unique value from each layers
-  const promisesData = await Promise
-    .allSettled(layers.map(layer => layer.getFilterData({
-      field,
-      suggest,
-      unique,
-      ordering,
-      fformatter,
-    })));
-
-  const data = Array.from(
-    promisesData
-      .filter(({status}) => 'fulfilled' === status)
-      .reduce((accumulator, { value = [] }) => new Set([...accumulator, ...value]), [])
-  )
-  //check if is not empty array
-  switch (data.length && typeof data[0]) {
-    case 'string': return sortAlphabeticallyArray(data);
-    case 'number': return sortNumericArray(data);
-    default:       return data;
-  }
-};
-
-/**
- * Get unique values from field
- * 
- * @param { Object } options
- * @param options.field
- * @param options.value
- * @param options.unique 
- * 
- * @returns { Promise<[]> }
- */
-proto.getUniqueValuesFromField = async function({field, value, output}) {
-  let data = [];
-  try {
-    data = await this.getLayersFilterData(
-      (1 === this.searchLayers.length ? [this.searchLayer] : this.searchLayers), {
-      field: this.getAutoFieldDependeciesParamField(field),
-      suggest: value !== undefined ? `${field}|${value}` : undefined,
-      unique: field,
-      ordering: field
-    });
-
-    if ('autocomplete' === output) {
-      data = data.map(value => ({ id:value, text:value }));
-    }
-  } catch(e) { console.warn(e); }
-
-  return data;
-};
-
-/**
- * Perform search
- * 
- * @param { Object } opts
- * @param opts.filter
- * @param opts.search_endpoint
- * @param opts.queryUrl
- * @param opts.feature_count
- * @param opts.show
- * 
- * @returns { Promise<void|unknown> }
- */
-proto.doSearch = async function({
-  filter,
-  search_endpoint = this.getSearchEndPoint(),
-  queryUrl        = this.url,
-  feature_count   = 10000,
-  show            = this.show,
-} = {}) {
-
-  //get or create request filter
-  filter = filter || this.createFilter();
-
-  //set searching to true
-  this.state.searching = true;
-
-  let data;
-
-  try {
-    data = await DataRouterService.getData('search:features', {
-      inputs:{
-        layer: this.searchLayers,
-        search_endpoint,
-        filter,
-        queryUrl,
-        formatter: 1,
-        feature_count,
-        raw: ('search' === this.return) // in order to get raw response
-      },
-      outputs: show && { title: this.state.title }
-    });
-    // not show (request internal. No output data are show)
-    if (!show) {
-      const parsed = ('search_1n' === this.type)
-        ? await parse_search_1n(data, {
-          search_endpoint,
-          feature_count,
-          relation_id: this.config.options.search_1n_relationid,
-          output_title: this.state.title
-        })
-        : parse_search_by_returnType(data, this.return);
-      data = parsed ? parsed : data;
-    } else if (this.project.state.autozoom_query && data && 1 === data.data.length) {
-      this.mapService.zoomToFeatures(data.data[0].features); // auto zoom_query
-    }
-  } catch(e) {
-    console.warn(e);
-  }
-
-  //set searchin false
-  this.state.searching = false;
-
-  return data;
-};
-
-/**
- * Filter input by NONVALIDVALUES
- * 
- * @returns { Array }
- */
-proto.filterValidFormInputs = function() {
-  return this.state
-    .forminputs
-    .filter(input => -1 === NONVALIDVALUES.indexOf(input.value) && '' !== input.value.toString().trim());
-};
-
-/**
- * @returns { string | * }
- */
-proto.getSearchEndPoint = function() {
-  return this.search_endpoint || this.searchLayer.getSearchEndPoint()
-};
-
-/**
- * type wms, vector (for vector api)
- */
-proto.createFilter = function(search_endpoint = this.getSearchEndPoint()) {
-  return createFilterFormInputs({ layer: this.searchLayers, inputs: this.filterValidFormInputs(), search_endpoint });
-};
-
-/**
- * @private
- */
-proto._run = function() {
-  this.doSearch();
-};
-
-/**
- * Called on search input change
- * 
- * @param { Object } opts
- * @param opts.id
- * @param opts.value
- */
-proto.changeInput = function({id, value} = {}) {
-  this.state.forminputs.find(input => id == input.id).value = value;
-};
-
-/**
- * @param { Object } opts
- * @param opts.filter
- * 
- * @returns { Object }
- */
-proto.createQueryFilterFromConfig = function({ filter }) {
-  let queryFilter;
-  for (const operator in filter) {
-    queryFilter = create_boolean_filter(operator, filter[operator]);
-  }
-  return queryFilter;
-};
-
-/**
- * @param field
- * 
- * @returns {*}
- */
-proto.getFilterInputFromField = function(field) {
-  return this.filter.find(input =>  input.attribute === field);
-};
-
-/**
- * @param field
- * 
- * @returns { * | null }
- * 
- * @private
- */
-proto._getExpressionOperatorFromInput = function(field) {
-  const dependanceCascadeField = this.getFilterInputFromField(field);
-  return dependanceCascadeField ? dependanceCascadeField.op : null;
-};
-
-proto._getCascadeDependanciesFilter = function(field, dependencies = []) {
-  const dependance = this.getFilterInputFromField(field).input.options.dependance;
-  if (dependance) {
-    dependencies.unshift(dependance);
-    this._getCascadeDependanciesFilter(dependance, dependencies)
-  }
-  return dependencies;
-};
-
-/**
- * Check if a field has a dependance
- * 
- * @param field
- * 
- * @returns { Object }
- */
-proto.getCurrentFieldDependance = function(field) {
-  const dependance = this.inputdependance[field];
-  return dependance ? ({
-    [dependance]:
-      (this.cachedependencies[dependance] && ALLVALUE !== this.cachedependencies[dependance]._currentValue)
-        ? this.cachedependencies[dependance]._currentValue // dependance as value
-        : undefined                                        // undefined = so it no add on list o field dependance
-    }) : dependance;
-};
-
-/**
- * Check the current value of dependance
- */
-proto.getDependanceCurrentValue = function(field) {
-  return this.inputdependance[field] ?
-    this.cachedependencies[this.inputdependance[field]]._currentValue :
-    this.state.forminputs.find(forminput => forminput.attribute === field).value;
-};
-
-/**
- * @TODO slim down and refactor
- * 
- * Fill all dependencies inputs based on value
- */
-proto.fillDependencyInputs = function({field, subscribers=[], value=ALLVALUE}={}) {
-  const isRoot = this.inputdependance[field] === undefined;
-  //check id inpute father is valid to search on subscribers
-  const invalidValue = value===ALLVALUE || value === null || value === undefined || value.toString().trim() === '';
-  return new Promise((resolve, reject) => {
-    //loop over dependencies fields inputs
-    subscribers.forEach(subscribe => {
-      // in case of autocomplete reset values to empty array
-      if (subscribe.type === 'autocompletefield') {
-        subscribe.options.values.splice(0);
-      } else {
-        //set starting all values
-        if (subscribe.options._allvalues === undefined) {
-          subscribe.options._allvalues = [...subscribe.options.values];
-        }
-        //case of father is set an empty invalid value (all value example)
-        if (invalidValue) {
-          //subscribe has to set all valaues
-          subscribe.options.values.splice(0);
-          setTimeout(()=>subscribe.options.values = [...subscribe.options._allvalues]);
-        } else {
-          subscribe.options.values.splice(1);
-        } //otherwise has to get first __ALL_VALUE
-      }
-      subscribe.value =  subscribe.type !== 'selectfield' ? ALLVALUE : null;
-    });
-    // check if cache field values are set
-    this.cachedependencies[field] = this.cachedependencies[field] || {};
-    this.cachedependencies[field]._currentValue = value;
-    const notAutocompleteSubscribers = subscribers.filter(subscribe => subscribe.type !== 'autocompletefield');
-    if (value && value !== ALLVALUE) {
-      let isCached;
-      let rootValues;
-      if (isRoot) {
-        const cachedValue = this.cachedependencies[field] && this.cachedependencies[field][value];
-        isCached = cachedValue !== undefined;
-        rootValues = isCached && cachedValue;
-      } else {
-        const dependenceCurrentValue = this.getDependanceCurrentValue(field);
-        const cachedValue = this.cachedependencies[field]
-          && this.cachedependencies[field][dependenceCurrentValue]
-          && this.cachedependencies[field][dependenceCurrentValue][value];
-        isCached = cachedValue !== undefined;
-        rootValues = isCached && cachedValue;
-      }
-      if (isCached) {
-        for (let i = 0; i < subscribers.length; i++) {
-          const subscribe = subscribers[i];
-          const values = rootValues[subscribe.attribute];
-          if (values && values.length) {
-            for (let i = 0; i < values.length; i++) {
-              subscribe.options.values.push(values[i]);
-            }
-          }
-          // set disabled false to dependence field
-          subscribe.options.disabled = false;
-          resolve()
-        }
-      } else {
-        this.state.loading[field] = true;
-        if (isRoot) {
-          this.cachedependencies[field][value] = this.cachedependencies[field][value] || {};
-        } else {
-          const dependenceValue =  this.getDependanceCurrentValue(field);
-          this.cachedependencies[field][dependenceValue] = this.cachedependencies[field][dependenceValue] || {};
-          this.cachedependencies[field][dependenceValue][value] = this.cachedependencies[field][dependenceValue][value] || {}
-        }
-        // exclude autocomplete subscribers
-        if (notAutocompleteSubscribers.length > 0) {
-          const fieldParams = this.createFieldsDependenciesAutocompleteParameter({
-            field,
-            value
-          });
-          //need to set undefined because if
-          // it has a subscribe input with valuerelations widget needs to extract the value of the field to get
-          // filter data from relation layer
-          this.searchLayer.getFilterData({
-            field: fieldParams,
-            formatter: 0 //v3.0 need to force to use raw value with formatter 0 parameter
-          })
-          .then(async data => {
-            const parentData = data.data[0].features || [];
-            for (let i = 0; i < notAutocompleteSubscribers.length; i++) {
-              const subscribe = notAutocompleteSubscribers[i];
-              const { attribute, widget } = subscribe;
-              const uniqueValues = new Set();
-              // case value map
-              if (widget === 'valuemap') {
-                let values = [...subscribe.options._values];
-                parentData.forEach(feature => {
-                  const value = feature.get(attribute);
-                  if (value) {
-                    // need to covert to string
-                    // because input values are string
-                    uniqueValues.add(`${value}`);
-                  }
-                });
-                const data = [...uniqueValues];
-                values = values.filter(({key}) =>  data.indexOf(key) !== -1);
-                values.forEach(value => subscribe.options.values.push(value));
-              } else if (widget === 'valuerelation') {
-                parentData.forEach(feature => {
-                  const value = feature.get(attribute);
-                  value && uniqueValues.add(value);
-                });
-                if (uniqueValues.size > 0) {
-                  const filter = createSingleFieldParameter({
-                    layer: CatalogLayersStoresRegistry.getLayerById(subscribe.options.layer_id),
-                    search_endpoint: this.getSearchEndPoint(),
-                    field: subscribe.options.value, //v3.8.x has subscribe.options.key
-                    value: [...uniqueValues]
-                  });
-                  try {
-                    const values = await this.getValueRelationValues(subscribe, filter);
-                    values.forEach(value =>  subscribe.options.values.push(value));
-                  } catch(err) {console.log(err)}
-                }
-              } else {
-                parentData.forEach(feature => {
-                  const value = feature.get(attribute);
-                  value && uniqueValues.add(value);
-                });
-                this.valuesToKeysValues([...uniqueValues].sort()).forEach(value => subscribe.options.values.push(value));
-              }
-              if (isRoot) {
-                this.cachedependencies[field][value][subscribe.attribute] = subscribe.options.values.slice(1);
-              } else {
-                const dependenceValue = this.getDependanceCurrentValue(field);
-                this.cachedependencies[field][dependenceValue][value][subscribe.attribute] = subscribe.options.values.slice(1);
-              }
-              subscribe.options.disabled = false;
-            }
-          })
-          .catch(error => reject(error))
-          .finally(() => {
-            this.state.loading[field] = false;
-            resolve();
-          })
-        } else {
-          //set disable
-          subscribers.forEach(subscribe => {
-            if (subscribe.options.dependance_strict) {
-              subscribe.options.disabled = false;
-            }
-          });
-          this.state.loading[field] = false;
-          resolve();
-        }
-      }
-    } else {
-      subscribers
-        .forEach(subscribe => subscribe.options.disabled = subscribe.options.dependance_strict);
-      resolve();
-    }
-  })
-};
-
-/**
- * @param field
- * 
- * @returns { Array | * }
- */
-proto.getDependencies = function(field) {
-  return this.inputdependencies[field] || [];
-};
-
-/**
- * @param { Object } opts
- * @param opts.master
- * @param opts.slave
- */
-proto.setInputDependencies = function({ master, slave }={}) {
-  this.inputdependencies[master] = (undefined !== this.inputdependencies[master] ? this.inputdependencies[master] : []);
-  this.inputdependencies[master].push(slave);
-};
-
-/**
- * set key value for select
- */
-proto.valuesToKeysValues = function(values) {
-  return values.length ?
-    ('Object' !== toRawType(values[0]) ? values.map(value => ({ key: value, value })) : values) :
-    values;
-};
-
-/**
- * @param { Object } opts
- * @param opts.ogcService
- * @param opts.filter
- * 
- * @returns {{infoFormat: *, crs: *, serverType, layers: [], url: *} & {filter: {}, ogcService: string}}
- */
-proto.createQueryFilterObject = function({
-  ogcService = 'wms',
-  filter     = {},
-} = {}) {
-  return Object.assign(this.getInfoFromLayer(ogcService), { ogcService, filter });
-};
-
-/**
- * @param ogcService
- * 
- * @returns {{infoFormat: *, crs: *, serverType, layers: [], url: *}}
- */
-proto.getInfoFromLayer = function(ogcService) {
-  return {
-    url: ('wfs' === ogcService ? this.searchLayer.getProject().getWmsUrl() : this.searchLayer.getQueryUrl()),
-    layers: [],
-    infoFormat: this.searchLayer.getInfoFormat(ogcService),
-    crs: this.searchLayer.getCrs(),
-    serverType: this.searchLayer.getServerType()
-  };
-};
-
-/**
- * @param layer
- */
-proto.setSearchLayer = function(layer) {
-  this.searchLayer = layer;
-};
-
-/**
- * @returns { null | * }
- */
-proto.getSearchLayer = function() {
-  return this.searchLayer;
-};
-
-/**
- *
- */
-proto.clear = function() {
-  this.state = null;
-};
-
-function create_boolean_filter(operator, inputs = []) {
-  const boolean = { [operator]: [] };
-  inputs
-    .forEach((input) => {
-      for (const operator in input) {
-        if (Array.isArray(input[operator])) {
-          create_boolean_filter(operator, input[operator]); // recursion step.
-          break;
-        }
-      }
-      boolean[operator].push({
-        [input.op] : {
-        [input.attribute]: null
-      }});
-  });
-  return boolean;
-}
-
-/**
- * Search father layer id based on result of child layer
- */
-async function parse_search_1n(data, options) {
-  const { search_endpoint, feature_count, relation_id, output_title } = options;
-
-  const { features = [] } = data.data[0] || {};
-
-  const project = ProjectsRegistry.getCurrentProject();
-
-  // check if it has features on result
-  if (!features.length) {
-    //show empty result output
-    DataRouterService.showEmptyOutputs();
-    return [];
-  }
-
-  //get relation
-  const relation = project.getRelationById(relation_id);
-
-  //if exist relation
-  if (relation) {
-
-    const inputs = []; //store inputs
-
-    //extract properties from relation object
-    const {
-      referencedLayer, //father layer id
-      fieldRef: {referencingField, referencedField}} = relation; // child and father relation fields
-
-    //Number of relation fields
-    const rFLength = referencingField.length;
-
-    //Just one field
-    if (1 === rFLength) {
-      const uniqueValues = new Set();
-      //loop trough feature child layer
-      features.forEach(feature => {
-        const value = feature.get(referencingField[0]);
-        if (!uniqueValues.has(value)) {
-          uniqueValues.add(value);
-        }
-      })
-      inputs.push({ attribute: referencedField[0], logicop: "OR", operator: "eq", value: Array.from(uniqueValues) })
-    } else {
-      const uniqueValues = [];
-      features.forEach(feature => {
-        const values = referencingField.map(rF => feature.get(rF));
-        if (!uniqueValues.find((v) => {
-          return v.reduce((accumulator, value, index) => {
-            return accumulator && values[index] === value;
-          }, true);
-        })) {
-          uniqueValues.push(values);
-          inputs.push({ attribute: referencedField, logicop: "OR", operator: "eq", value: values })
-        }
-      })
-    }
-
-    const layer = project.getLayerById(referencedLayer);
-
-
-    data = await DataRouterService.getData('search:features', {
-      inputs: {
-        layer,
-        search_endpoint,
-        filter: createFilterFormInputs({ layer, search_endpoint, inputs }),
-        formatter: 1,
-        feature_count
-      },
-      outputs: {
-        title: output_title
-      }
-    });
-
-  }
-  return data;
-}
-
-function parse_search_by_returnType(data, returnType) {
-  if ('search' === returnType) {
-    GUI.closeContent();
-    // in case of api get first response on array
-    data = data.data[0].data;
-    if (isEmptyObject(data)) {
-      DataRouterService.showCustomOutputDataPromise(Promise.resolve({}));
-    } else {
-      const SearchPanel = require('gui/search/vue/panel/searchpanel');
-      (new SearchPanel(data)).show();
-    }
-  }
-  return data;
-}
-
-module.exports = SearchService;
diff --git a/src/app/gui/search/vue/search.js b/src/app/gui/search/vue/search.js
index f00e3ab06..b1633f624 100755
--- a/src/app/gui/search/vue/search.js
+++ b/src/app/gui/search/vue/search.js
@@ -1,31 +1,7 @@
-import * as vueComponentOptions from 'components/Search.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-const Service = require('gui/search/service');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function SearchComponent(options={}){
-  base(this, options);
-  this.id = "search";
-  this._service = options.service || new Service();
-  this._service.init();
-  this.title = this._service.getTitle();
-  this.internalComponent = new InternalComponent({
-    service: this._service
-  });
-  this.internalComponent.state = this._service.state;
-  this.state.visible = true;
-  this._reload = function() {
-    this._service.reload();
-  };
-  this.unmount = function() {
-    this._searches_searchtools.$destroy();
-    return base(this, 'unmount');
-  }
-}
-
-inherit(SearchComponent, Component);
-
-module.exports = SearchComponent;
+import { SearchComponent } from 'components/g3w-search';
+module.exports = SearchComponent;
\ No newline at end of file
diff --git a/src/app/gui/spatialbookmarks/vue/spatialbookmarks.js b/src/app/gui/spatialbookmarks/vue/spatialbookmarks.js
index dcf59dc99..43e7dd1ae 100644
--- a/src/app/gui/spatialbookmarks/vue/spatialbookmarks.js
+++ b/src/app/gui/spatialbookmarks/vue/spatialbookmarks.js
@@ -1,33 +1,7 @@
 /**
  * @file
- * @since v3.8
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
  */
- 
-import * as vueComponentOptions from 'components/SpatialBookMarks.vue';
-
-import GUI from 'services/gui';
-
-const { inherit, base } = require('utils');
-const Component = require('gui/component/component');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-const SpatialBookMarksComponent = function(options = {}) {
-  base(this, options);
-  this.title = "sdk.spatialbookmarks.title";
-  this.setInternalComponent = function () {
-    this.internalComponent = new InternalComponent();
-    return this.internalComponent;
-  };
-
-  GUI.on('closecontent', () => {
-    this.state.open = false;
-  });
-
-};
-
-inherit(SpatialBookMarksComponent, Component);
-
-module.exports = SpatialBookMarksComponent;
-
 
+import vueComp from 'components/g3w-spatialbookmarks';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/streetview/vue/streetview.js b/src/app/gui/streetview/vue/streetview.js
deleted file mode 100644
index 3595c0cfe..000000000
--- a/src/app/gui/streetview/vue/streetview.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as vueComponentOptions from 'components/StreetView.vue';
-
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-const StreetViewComponent = function(options={}) {
-  base(this);
-  const {keyError} = options;
-  const internalComponent = new InternalComponent({
-    keyError
-  });
-  this.setInternalComponent(internalComponent);
-  this.unmount = function() {
-    return base(this, 'unmount');
-  }
-};
-
-inherit(StreetViewComponent, Component);
-
-
-module.exports = StreetViewComponent;
-
-
diff --git a/src/app/gui/table/tableservice.js b/src/app/gui/table/tableservice.js
deleted file mode 100644
index 5f0be0836..000000000
--- a/src/app/gui/table/tableservice.js
+++ /dev/null
@@ -1,786 +0,0 @@
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import DataRouterService           from 'services/data';
-import GUI                         from 'services/gui';
-import { coordinatesToGeometry }   from 'utils/coordinatesToGeometry';
-
-const { inherit, noop }         = require('utils');
-const G3WObject                 = require('core/g3wobject');
-const { t }                     = require('core/i18n/i18n.service');
-const { SELECTION_STATE }       = require('core/layers/layer');
-
-const PAGELENGTHS = [10, 25, 50];
-
-/**
- * Create a unique feature key
- */
-function _createFeatureKey(values) {
-  return values.join('__');
-}
-
-/**
- * TableService Class
- * 
- * @param options.layer
- * @param options.formatter
- * 
- * @constructor
- */
-const TableService = function(options = {}) {
-
-  /**
-   * Number of pages
-   */
-  this.currentPage = 0;
- 
-  /**
-   * @FIXME add description
-   */
-  this.layer = options.layer;
-
-  /**
-   * @FIXME add description
-   */
-  this.formatter = options.formatter;
-
-  /**
-   * @FIXME add description
-   */
-  this.allfeaturesnumber = undefined;
-
-  /**
-   * @FIXME add description
-   */
-  this.nopaginationsfilter = [];
-
-  /**
-   * @FIXME add description
-   */
-  this.selectedfeaturesfid = this.layer.getSelectionFids();
-
-  /**
-   * Whether layer has geometry
-   */
-  this.geolayer = this.layer.isGeoLayer();
-
-  /**
-   * @FIXME add description
-   */
-  this.relationsGeometry = this._relationsGeometry();
-  
-  /**
-   * @FIXME add description
-   */
-  this.projection = this.geolayer ? this.layer.getProjection() : null;
-
-  /**
-   * @FIXME add description
-   */
-  this.mapService = GUI.getService('map');
-
-  /**
-   * @FIXME add description
-   */
-  this.getAll = false;
-
-  /**
-   * @FIXME add description
-   */
-  this.paginationfilter = false;
-
-  /**
-   * @FIXME add description
-   */
-  this.mapBBoxEventHandlerKey = {
-    key: null,
-    cb: null
-  };
-
-
-  // bind context on event listeners
-  this.clearAllSelection   = this.clearAllSelection.bind(this);
-  this.filterChangeHandler = this.filterChangeHandler.bind(this); 
-  this.onGUIContent        = this.onGUIContent.bind(this);
-
-  /**
-   * @FIXME add description
-   */
-  this.state = {
-    pageLengths:   PAGELENGTHS,
-    pageLength:    this.layer.getAttributeTablePageLength() || PAGELENGTHS[0],
-    features:      [],
-    title:         this.layer.getTitle(),
-    headers:       this.getHeaders(),
-    geometry:      true,
-    loading:       false,
-    allfeatures:   0,
-    pagination:    !this.getAll,
-    selectAll:     false,
-    nofilteredrow: false,
-    tools: {
-      geolayer: {
-        show:      this.geolayer,
-        active:    false,
-        in_bbox:   undefined,
-      },
-      show:        false,
-      filter:      this.layer.state.filter
-    }
-  };
-
-  /**
-   * Pagination filter features
-   */
-  this._async = {
-    state: false,
-    fnc:   noop
-  };
-
-  GUI.onbefore('setContent',         this.onGUIContent);
-  this.layer.on('unselectionall',    this.clearAllSelection);
-  this.layer.on('filtertokenchange', this.filterChangeHandler);
-};
-
-inherit(TableService, G3WObject);
-
-const proto = TableService.prototype;
-
-/**
- * @since 3.9.0
- */
-proto._relationsGeometry = function() {
-
-  // layer has geometry  
-  if (this.geolayer) {
-    return [];
-  }
-
-  const relations = [];
-
-  this.layer
-    .getRelations()
-    .getArray()
-    .forEach(relation => {
-      const layer = CatalogLayersStoresRegistry.getLayerById(relation.getFather()); // get project layer
-      if (
-        this.layer.getId() !== relation.getFather() && // current layer is not child layer of relation
-        layer.isGeoLayer()                             // relation layer has geometry
-      ) {
-        relations.push({
-          layer,
-          father_fields: relation.getFatherField(),    // NB: since g3w-admin@v3.7.0 this is an Array value.
-          fields:        relation.getChildField(),     // NB: since g3w-admin@v3.7.0 this is an Array value.
-          features:      {},
-        })
-      }
-    });
-
-  return relations;
-};
-
-/**
- * @since 3.9.0
- */
-proto.clearAllSelection = function() {
-  this.state.features.forEach(feature => feature.selected = false);
-  this.state.tools.show = false;
-  this.state.selectAll = false;
-};
-
-/**
- * @since 3.9.0
- * 
- * @param { Object } opts
- * @param { string } opts.type
- * 
- * @fires redraw when `opts.type` in_bbox filter (or not select all)
- */
-proto.filterChangeHandler = async function ({ type } = {}) {
-  this.allfeaturesnumber = undefined;
-  if (type === 'in_bbox' || !this.selectedfeaturesfid.has(SELECTION_STATE.ALL)) {
-    this.emit('redraw', this.state.pagination ? [] : await this.reloadData());
-  }
-};
-
-/**
- * @since 3.9.0
- */
-proto.onGUIContent = function(options) {
-  this._async.state = (100 === options.perc);
-};
-
-proto.toggleFilterToken = async function() {
-  await this.layer.toggleFilterToken();
-};
-
-/**
- * first value = `null` for DataTable purpose (used to add a custom input selector) 
- */
-proto.getHeaders = function() {
-  return [null, ...this.layer.getTableHeaders()];
-};
-
-/**
- * DataTable pagination
- */
-proto.setDataForDataTable = function() {
-  const data = [];
-  this.state.features.forEach(feature => {
-    const attributes = feature.attributes ? feature.attributes : feature.properties;
-    const values = [null];
-    this.state.headers.forEach(header => {
-      if (header) {
-        header.value = attributes[header.name];
-        values.push(header.value);
-        // header.label = undefined;            // removes label.
-      }
-    });
-    data.push(values)
-  });
-  return data;
-};
-
-proto.addRemoveSelectedFeature = function(feature) {
-  feature.selected = !feature.selected;
-
-  const selected       = this.selectedfeaturesfid;
-  const filter         = this.nopaginationsfilter;
-  const count          = this.allfeaturesnumber;
-
-  const select_all     = this.state.selectAll;
-  const has_pagination = this.state.pagination;
-  const features       = this.state.features;
-  const is_active      = this.state.tools && this.state.tools.filter && this.state.tools.filter.active
-
-  const is_exclude     = !select_all && selected.has(SELECTION_STATE.EXCLUDE);
-  const is_default     = !select_all && !is_exclude;
-
-  /** @FIXME add description */
-  if (select_all) {
-    this.state.selectAll = false;
-  }
-
-  /** @FIXME add description */
-  if (select_all) {
-    this.layer.excludeSelectionFid(feature.id, has_pagination);
-  }
-
-  /** @FIXME add description */
-  if (is_exclude || is_default) {
-    this.layer[feature.selected ? 'includeSelectionFid' : 'excludeSelectionFid'](feature.id);
-  }
-
-  /** @FIXME add description */
-  if (!is_active && ( (is_exclude && 1 === selected.size) || (is_default && selected.size === count)) ) {
-    this.layer.setSelectionFidsAll();
-  }
-
-  /** @FIXME add description */
-  if (is_exclude && 1 !== selected.size && selected.size === features.length + 1) {
-    this.layer.clearSelectionFids();
-  }
-
-  /** @FIXME add description */
-  this.state.tools.show = selected.size > 0;
-
-  /** @FIXME add description */
-  if (
-    (is_exclude && 1 === selected.size) ||
-    (is_default && selected.size === count) ||
-    (!has_pagination && filter.length && filter.length === features.filter(f => f.selected).length)
-  ) {
-    this.state.selectAll = true;
-  }
-
-};
-
-proto.createFeatureForSelection = function(feature) {
-  return {
-    attributes: feature.attributes ? feature.attributes : feature.properties,
-    geometry: this._returnGeometry(feature),
-  }
-};
-
-proto.getAllFeatures = function(params) {
-  GUI.setLoadingContent(true);
-  return new Promise((resolve, reject) => {
-    this.layer
-      .getDataTable(params || {})
-      .then(data => {
-        const is_valid = this.geolayer && data.features;
-
-        if (is_valid && !params) {
-          const loaded_features = this.state.features.map(f => f.id);
-          data.features.forEach(f => {
-            if (-1 === loaded_features.indexOf(f.id) && f.geometry) {
-              this.layer.addOlSelectionFeature({
-                id: f.id,
-                feature: this.createFeatureForSelection(f),
-              });
-            }
-          });
-          this.getAll = true;
-        }
-
-        if (is_valid) {
-          resolve(data.features);
-        }        
-      })
-      .fail(()   => reject())
-      .always(() => GUI.setLoadingContent(false));
-  });
-};
-
-proto.switchSelection = async function() {
-  const has_pagination = this.state.pagination;
-  const filter         = this.nopaginationsfilter;
-  const filtered       = !has_pagination && filter.length ? [] : undefined;
-  let selected         = false;
-
-  // pagination
-  if (has_pagination) {
-    this.state.features.forEach(f => {
-      f.selected = !f.selected;
-      selected   = f.selected;
-    });
-  }
-
-  if (has_pagination && !this.getAll) {
-    await this.getAllFeatures();
-  }
-
-  this.state.selectAll = (has_pagination && this.paginationfilter) ? selected : this.state.selectAll;
-
-  // filtered
-  if (!has_pagination && filter.length) {
-    this.state.features.forEach((f, i) => {
-      if (-1 !== filter.indexOf(i)) {
-        filtered.push(f);
-      }
-      f.selected = !f.selected;
-      this.layer[f.selected ? 'includeSelectionFid' : 'excludeSelectionFid' ](f.id);
-      selected = selected || f.selected;
-    });
-    this.state.tools.show = selected;
-  }
-  
-  // no filter
-  if (!has_pagination && !filter.length) {
-    this.state.features.forEach(f => { f.selected = !f.selected; });
-  }
-
-  if (has_pagination || !filter.length) {
-    this.layer.invertSelectionFids();
-  }
-
-  if (!has_pagination) {
-    this.checkSelectAll(filtered);
-  }
-
-  if (has_pagination || !filter.length) {
-    this.state.tools.show = this.selectedfeaturesfid.size > 0;
-  }
-
-};
-
-proto.clearLayerSelection = function() {
-  this.layer.clearSelectionFids();
-};
-
-/**
- * Called when a selected feature is checked
- * 
- * @returns {Promise<void>}
- */
-proto.selectAllFeatures = async function() {
-
-  // set inverse of selectAll
-  this.state.selectAll = !this.state.selectAll;
-
-  const has_pagination = this.state.pagination;
-  const filter         = this.nopaginationsfilter;
-  let selected         = false;
-
-  // filtered
-  if (!has_pagination && filter.length) {
-    this.state.features.forEach((f, i) =>{
-      if (-1 !== filter.indexOf(i)) {
-        f.selected = this.state.selectAll;
-        this.layer[f.selected ? 'includeSelectionFid': 'excludeSelectionFid'](f.id);
-        selected = selected || f.selected;
-      }
-    });
-    this.state.tools.show = selected;
-  }
-
-  // no filter
-  if (!has_pagination && !filter.length) {
-    this.state.tools.show = this.state.selectAll;
-    this.layer[this.state.selectAll ? 'setSelectionFidsAll': 'clearSelectionFids']();
-    this.state.features.forEach(f => f.selected = this.state.selectAll);
-  }
-
-  // filtered pagination
-  if (has_pagination && this.paginationfilter && this.state.featurescount >= this.state.allfeatures) {
-    this.state.features.forEach(f => {
-      f.selected = this.state.selectAll;
-      this.layer[f.selected ? 'includeSelectionFid': 'excludeSelectionFid'](f.id);
-    });
-  }
-
-  if (has_pagination && this.paginationfilter && this.state.featurescount < this.state.allfeatures) {
-    const features = await this.getAllFeatures({
-      search:    this.paginationParams.search,
-      ordering:  this.paginationParams.ordering,
-      formatter: this.paginationParams.formatter,
-      in_bbox:   this.paginationParams.in_bbox,
-    });
-    features.forEach(f => {
-      if (!this.getAll && this.geolayer && f.geometry) {
-        this.layer.addOlSelectionFeature({
-          id: f.id,
-          feature: this.createFeatureForSelection(f)
-        });
-      }
-      this.layer[this.state.selectAll ? 'includeSelectionFid' : 'excludeSelectionFid'](f.id);
-    })
-  }
-
-  if (has_pagination) {
-    this.state.features.forEach(f => f.selected = this.state.selectAll);
-  }
-
-  if (has_pagination && !this.paginationfilter && !this.getAll) {
-    await this.getAllFeatures();
-  }
-
-  if (has_pagination && !this.paginationfilter) {
-    this.layer[this.state.selectAll ? 'setSelectionFidsAll': 'clearSelectionFids']();
-  }
-
-  if (has_pagination) {
-    this.state.tools.show = this.state.selectAll || this.selectedfeaturesfid.size > 0;
-  }
-
-};
-
-/**
- * Set filtered features
- * 
- * @param index features index
- */
-proto.setFilteredFeature = function(index) {
-  const filter = this.nopaginationsfilter = index;
-  if (0 === index.length || index.length === this.allfeaturesnumber) {
-    this.checkSelectAll();
-  } else {
-    this.checkSelectAll(filter.map(i => this.state.features[i]));
-  }
-};
-
-proto.setAttributeTablePageLength = function(length) {
-  this.layer.setAttributeTablePageLength(length);
-};
-
-/**
- * Get DataTable layer
- * 
- * @param data.start
- * @param data.order
- * @param data.length
- * @param data.columns
- * @param data.search
- * @param data.firstCall
- * 
- * @returns {Promise<{{ data: [], recordsTotal: number, recordsFiltered: number }}>}
- */
-proto.getData = function({
-  start     = 0,
-  order     = [],
-  length    = this.state.pageLength,
-  columns   = [],
-  search    = { value: null },
-  firstCall = false
-} = {}) {
-
-  // reset features before load
-  GUI.setLoadingContent(true);
-
-  this.setAttributeTablePageLength(length);
-
-  return new Promise((resolve, reject) => {
-
-    // skip when ..
-    if (!this.state.headers.length) {
-      resolve({
-        data: [],
-        recordsTotal: 0,
-        recordsFiltered: 0
-      });
-      return;
-    }
-
-    let searchText = search.value && search.value.length > 0 ? search.value : null;
-
-    this.state.features.splice(0);
-
-    if (!order.length) {
-      order.push({
-        column: 1,
-        dir: 'asc',
-      });
-    }
-
-    const ordering = ('asc' === order[0].dir ? '' : '-') + this.state.headers[order[0].column].name;
-
-    this.currentPage = (start === 0 || (this.state.pagination && this.state.tools.filter.active)) ? 1 : (start/length) + 1;
-
-    const in_bbox = this.state.tools.geolayer.in_bbox;
-
-    const field =  this.state.pagination
-      ? columns.filter(c => c.search && c.search.value).map(c => `${c.name}|ilike|${c.search.value}|and`).join(',')
-      : undefined;
-
-    this.paginationParams = {
-      field:     field || undefined,
-      page:      this.currentPage,
-      page_size: length,
-      search:    searchText,
-      in_bbox,
-      formatter: this.formatter,
-      ordering
-    };
-
-    this.layer
-      .getDataTable(
-        this.state.pagination
-          ? this.paginationParams
-          : ({ ordering, in_bbox, formatter: this.formatter })
-      )
-      .then(data => {
-        const { features = [] }  = data;
-
-        this.state.allfeatures   = data.count || this.state.features.length;
-        this.state.featurescount = features.length;
-        this.allfeaturesnumber   = (undefined === this.allfeaturesnumber ? data.count : this.allfeaturesnumber);
-        this.paginationfilter    = (data.count !== this.allfeaturesnumber);
-        this.state.pagination    = firstCall
-          ? this.state.tools.filter.active || features.length < this.allfeaturesnumber
-          : this.state.pagination;
-
-        this.addFeatures(features);
-
-        resolve({
-          data:            this.setDataForDataTable(),
-          recordsFiltered: data.count,
-          recordsTotal:    data.count
-        });
-      })
-      .fail(err  => { GUI.notify.error(t("info.server_error")); reject(err); })
-      .always(() => { GUI.setLoadingContent(false); })
-  });
-};
-
-proto.setInBBoxParam = function() {
-  const { geolayer } = this.state.tools;
-  geolayer.in_bbox = geolayer.active ? this.mapService.getMapBBOX().join(',') : undefined;
-};
-
-proto.resetMapBBoxEventHandlerKey = function() {
-  const listener = this.mapBBoxEventHandlerKey;
-  ol.Observable.unByKey(listener.key);
-  listener.key = null;
-  listener.cb  = null;
-};
-
-proto.getDataFromBBOX = async function() {
-  const { geolayer } = this.state.tools;
-
-  geolayer.active = !geolayer.active;
-
-  const is_active = geolayer.active;
-  const listener  = this.mapBBoxEventHandlerKey;
-
-  if (is_active && this.state.pagination) {
-    listener.cb = () => {
-      this.setInBBoxParam();
-      this.emit('ajax-reload');
-    };
-  }
-
-  if (is_active && !this.state.pagination) {
-    listener.cb = async () => {
-      this.setInBBoxParam();
-      this.filterChangeHandler({ type: 'in_bbox' });
-    };
-  }
-
-  if (is_active) {
-    listener.key = this.mapService.getMap().on('moveend', listener.cb);
-  }
-
-  if (listener.cb) {
-    listener.cb();
-  }
-
-  if (!is_active) {
-    this.resetMapBBoxEventHandlerKey();
-  }
-};
-
-proto.addFeature = function(feature) {
-  const tableFeature = {
-    id:         feature.id,
-    selected:   this.layer.hasSelectionFid(feature.id),
-    attributes: feature.attributes                || feature.properties,
-    geometry:   this.geolayer && feature.geometry || undefined
-  };
-
-  const has_geom  = this.geolayer && feature.geometry;
-  const selection = has_geom && this.layer.getOlSelectionFeature(feature.id);
-
-  if (has_geom && !selection) {
-    this.layer.addOlSelectionFeature({
-      id:      feature.id,
-      feature: this.createFeatureForSelection(feature)
-    });
-  }
-
-  this.state.features.push(tableFeature);
-};
-
-proto.checkSelectAll = function(features = this.state.features) {
-  this.state.selectAll = (
-    this.selectedfeaturesfid.has(SELECTION_STATE.ALL) ||
-    (features.length && features.reduce((selectAll, f) => selectAll && f.selected, true))
-  );
-};
-
-proto.addFeatures = function(features=[]) {
-  features.forEach(f => this.addFeature(f));
-  this.state.tools.show = this.layer.getFilterActive() || this.selectedfeaturesfid.size > 0;
-  this.checkSelectAll();
-};
-
-proto.reloadData = async function(pagination=false) {
-  this.state.features.splice(0);
-  this.state.pagination = pagination;
-  const { data = [] }   = await this.getData();
-  return data;
-};
-
-proto._setLayout = function() {
-  //TODO
-};
-
-proto._returnGeometry = function(feature) {
-  if (feature.attributes) return feature.geometry;
-  if (feature.geometry)   return coordinatesToGeometry(feature.geometry.type, feature.geometry.coordinates);
-};
-
-proto.zoomAndHighLightFeature = function(feature, zoom = true) {
-  // async highlight
-  if (feature.geometry && this._async.state) {
-    this._async.fnc = this.mapService.highlightGeometry.bind(mapService, feature.geometry, { zoom });
-  }
-  // sync highlight
-  if (feature.geometry && !this._async.state) {
-    this.mapService.highlightGeometry(feature.geometry , { zoom });
-  }
-};
-
-/**
- * Zoom to eventually features relation
- */
-proto.zoomAndHighLightGeometryRelationFeatures = async function(feature, zoom = true) {
-
-  // skip when there are no relation features geometry
-  if (!this.relationsGeometry.length > 0) {
-    return;
-  }
-
-  const features     = [];
-  const promises     = [];
-  const field_values = []; // check if add or not
-
-  this.relationsGeometry
-    .forEach(({
-      layer,
-      father_fields,
-      fields,
-      features
-    }) => {
-      const values = fields.map(f => feature.attributes[f]);
-
-      field_values.push(values);
-      
-      let promise;
-
-      if (zoom && undefined === features[k]) {
-        promise = DataRouterService
-          .getData('search:features', {
-            inputs: {
-              layer,
-              formatter:       1,
-              search_endpoint: 'api',
-              filter: (
-                father_fields
-                  .reduce((filter, field, index) => {
-                    filter = `${filter}${index > 0 ? '|AND,' : ''}${field}|eq|${encodeURIComponent(values[index])}`
-                    return filter;
-                  }, '')
-              ),
-             },
-            outputs: false, // just a request not show on result
-          });
-      }
-
-      promises.push(promise);
-    });
-
-  (await Promise.allSettled(promises))
-    .forEach(({
-      status,
-      value
-    }, index) => {
-      if ('fulfilled' === status) {
-
-        const relation = this.relationsGeometry[index];
-        const k        = _createFeatureKey(field_values[index]);
-        const data     = value && value.data[0];
-       
-        if (undefined === relation.features[k]) {
-          relation.features[k] = data && data.features || [];
-        }        
-
-        relation.features[k].forEach(f => features.push(f));
-
-      }
-    });
-
-  if (zoom) {
-    this.mapService.zoomToFeatures(features, { highlight: true });
-  } else {
-    this.mapService.highlightFeatures(features);
-  }
-
-};
-
-proto.clear = function() {
-  this.layer.off('unselectionall',    this.clearAllSelection);
-  this.layer.off('filtertokenchange', this.filterChangeHandler);
-
-  this.resetMapBBoxEventHandlerKey();
-
-  this.allfeaturesnumber = null;
-  this.mapService        = null;
-
-  if (this._async.state) {
-    setTimeout(() => {
-      this._async.fnc();
-      this._async.state = false;
-      this._async.fnc   = noop;
-    });
-  }
-};
-
-module.exports = TableService;
diff --git a/src/app/gui/table/vue/table.js b/src/app/gui/table/vue/table.js
deleted file mode 100644
index a361b1802..000000000
--- a/src/app/gui/table/vue/table.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import Table from 'components/Table.vue';
-import GUI from 'services/gui';
-
-const { t } = require('core/i18n/i18n.service');
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-const TableService = require('gui/table/tableservice');
-
-const InternalComponent = Vue.extend(Table);
-
-const TableComponent = function(options = {}) {
-  base(this);
-  this.id = "openattributetable";
-  const {layer, formatter} = options;
-  const service = options.service || new TableService({
-    layer,
-    formatter
-  });
-
-  this.setService(service);
-  const internalComponent = new InternalComponent({
-    service
-  });
-
-  this.setInternalComponent(internalComponent);
-  internalComponent.state = service.state;
-
-  service.on('redraw', ()=>{
-    this.layout();
-  });
-
-  this.unmount = function() {
-    return base(this, 'unmount')
-  };
-
-  this.layout = function() {
-    internalComponent.reloadLayout();
-  };
-};
-
-inherit(TableComponent, Component);
-
-const proto = TableComponent.prototype;
-
-// overwrite show method
-proto.show = function(options = {}) {
-  const service = this.getService();
-  // close all sidebar open component
-  GUI.closeOpenSideBarComponent();
-  service.getData({firstCall: true})
-    .then(() => {
-      GUI.showContent({
-        content: this,
-        perc: 50,
-        split: GUI.isMobile() ? 'h': 'v',
-        push: false,
-        title: options.title
-      });
-    })
-    .catch(err => GUI.notify.error(t("info.server_error")))
-    .finally(() => this.emit('show'));
-};
-
-proto.unmount = function() {
-  return base(this, 'unmount').then(() => {
-    this._service.clear();
-  })
-};
-
-
-module.exports = TableComponent;
-
-
diff --git a/src/app/gui/tools/service.js b/src/app/gui/tools/service.js
deleted file mode 100644
index 0c2b51643..000000000
--- a/src/app/gui/tools/service.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import ProjectsRegistry from 'store/projects';
-
-const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-
-function Service(options={}){
-  this.config = null;
-  this.state = {
-    ...options,
-    toolsGroups: [],
-    visible: false,
-    loading: false
-  };
-  this.setters = {
-    addTool(tool, groupName) {
-      tool.state = tool.state ? tool.state : {
-        type: null,
-        message: null
-      };
-      return this._addTool(tool, groupName);
-    },
-    addTools(tools, groupName) {
-      return this._addTools(tools, groupName);
-    },
-    addToolGroup(order, name) {
-      return this._addToolGroup(order, name);
-    },
-    removeToolGroup(name){
-      return this._removeToolGroup(name);
-    },
-    removeTools() {
-      return this._removeTools();
-    }
-  };
-
-  base(this);
-
-  const project = ProjectsRegistry.getCurrentProject();
-  const {tools={}} = project.getState();
-  for (let toolName in tools) {
-    const groupName = toolName.toUpperCase();
-    this.addToolGroup(0, groupName);
-    const _tools = tools[toolName].map(tool => ({
-      name: tool.name,
-      action: ToolsService.ACTIONS[toolName].bind(null, tool)
-    }));
-    this.addTools(_tools, {position: 0, title: groupName})
-  }
-}
-
-inherit(Service, G3WObject);
-
-const proto = Service.prototype;
-
-proto.reload = function() {
-  this.removeTools();
-};
-
-proto._addTool = function(tool, {position : order, title: name}) {
-  let group = this._addToolGroup(order, name);
-  if (tool.action === undefined && tool.type)
-    tool.action = Service.ACTIONS[tool.type] ? Service.ACTIONS[tool.type].bind(null, tool.options) : ()=>{};
-  group.tools.push(tool);
-};
-
-proto._addTools = function(tools, groupName) {
-  tools.forEach(tool => this.addTool(tool, groupName));
-};
-
-proto.setLoading = function(bool=false) {
-  this.state.loading = bool;
-};
-
-proto._removeTool = function(toolIdx) {
-  this.state.toolsGroups = this.state.toolsGroups.splice(toolIdx, 1);
-};
-
-proto._removeTools = function() {
-  this.state.toolsGroups.splice(0);
-};
-
-proto.updateToolsGroup = function(order, groupConfig) {
-  Vue.set(this.state.toolsGroups, order, groupConfig);
-};
-
-proto.getState = function() {
-  return this.state;
-};
-
-proto._removeToolGroup = function(name) {
-  this.state.toolsGroups = this.state.toolsGroups.filter(group => group.name !== name);
-};
-
-proto._addToolGroup = function(order, name) {
-  let group = this.state.toolsGroups.find(_group => _group.name === name);
-  if (!group) {
-    group = {
-      name,
-      tools: []
-    };
-    this.state.toolsGroups.splice(order, 0, group);
-  }
-  return group;
-};
-
-proto.setToolState = function({id, state={type:null, message: null}}={}){
-  this.state.toolsGroups.find(toolGroup => {
-    const tool = toolGroup.tools.find(tool => tool.name === id);
-    if (tool) {
-      tool.state.type = state.type;
-      tool.state.message = state.message;
-      return true;
-    }
-  })
-};
-
-Service.ACTIONS = {};
-
-module.exports = Service;
diff --git a/src/app/gui/tools/vue/tools.js b/src/app/gui/tools/vue/tools.js
index a3292173c..affc2253c 100644
--- a/src/app/gui/tools/vue/tools.js
+++ b/src/app/gui/tools/vue/tools.js
@@ -1,32 +1,7 @@
-import * as vueComponentOptions from 'components/Tools.vue';
-import GUI from 'services/gui';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { base, inherit } = require('utils');
-const Component = require('gui/component/component');
-const ToolsService = require('gui/tools/service');
-
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function ToolsComponent(options={}) {
-  base(this, options);
-  this._service = new ToolsService(options);
-  this.title = "tools";
-
-  const internalComponent = new InternalComponent({
-    toolsService: this._service
-  });
-
-  internalComponent.state = this._service.state;
-  this.setInternalComponent(internalComponent, {
-    events: [{name: 'visible'}]
-  });
-
-  this._setOpen = function(bool=false) {
-    this.internalComponent.state.open = bool;
-    bool && GUI.closeContent();
-  }
-}
-
-inherit(ToolsComponent, Component);
-
-module.exports = ToolsComponent;
+import vueComp from 'components/g3w-tools';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/utils/barstack.js b/src/app/gui/utils/barstack.js
deleted file mode 100644
index 6f557421d..000000000
--- a/src/app/gui/utils/barstack.js
+++ /dev/null
@@ -1,167 +0,0 @@
-const { resolve, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-const Component = require('gui/component/component');
-const Panel = require('gui/panel');
-
-//Barstack Class
-// It used to mount panels stack
-// on top of each parent
-function BarStack() {
-  this._parent = null;
-  // barstack state. It store the panels array
-  this.state = {
-    contentsdata: []
-  }
-}
-
-inherit(BarStack, G3WObject);
-
-const proto = BarStack.prototype;
-
-// push componenet on top of parent
-proto.push = function(content, options={}) {
-  // parent identify the DOM element where insert (append o meno) the component/panel
-  this._parent = options.parent;
-  // call barstack mount method
-  return this._mount(content, options);
-};
-
-// remove last component from stack
-proto.pop = function() {
-  const d = $.Deferred();
-  if (this.state.contentsdata.length) {
-    const content = this.state.contentsdata.slice(-1)[0].content;
-    this._unmount(content).then(() => {
-      const content = this.state.contentsdata.pop();
-      d.resolve(content)
-    })
-  } else d.resolve();
-  return d.promise();
-};
-
-// clear all stack
-proto.clear = function() {
-  const d = $.Deferred();
-  if (this.state.contentsdata.length) {
-    let unmountRequests = [];
-    this.state.contentsdata.forEach((data) => {
-      unmountRequests.push(this._unmount(data.content));
-    });
-    $.when(unmountRequests).then(() => {
-      this.state.contentsdata.splice(0, this.state.contentsdata.length);
-      d.resolve();
-    });
-  }
-  else d.resolve();
-  return d.promise();
-};
-
-proto.getContentData = function() {
-  return this.state.contentsdata
-};
-
-proto.getCurrentContentData = function() {
-  return this.state.contentsdata[this.state.contentsdata.length - 1];
-};
-
-proto.getPreviousContentData = function() {
-  return this.state.contentsdata[this.state.contentsdata.length - 2];
-};
-
-// mount component
-proto._mount = function(content, options) {
-  // check the type of content:
-  // JQuery type
-  if (content instanceof jQuery) return this._setJqueryContent(content);
-  //String
-  else if (_.isString(content)) {
-    let jqueryEl = $(content);
-    if (!jqueryEl.length) jqueryEl = $('<div>'+content+'</div>');
-    return this._setJqueryContent(jqueryEl);
-  }
-  // Vue
-  else if (content.mount && typeof content.mount == 'function') {
-    this._checkDuplicateVueContent(content); // if already exist it removed before based on id
-    return this._setVueContent(content,options)
-  }
-  // DOM
-  else return this._setDOMContent(content);
-};
-
-// JQuery append jQuery component
-proto._setJqueryContent = function(content, options) {
-  $(this._parent).append(content);
-  this.state.contentsdata.push({
-    content,
-    options
-  });
-  return resolve();
-};
-
-//Append DOM element
-proto._setDOMContent = function(content, options) {
-  this._parent.appendChild(content);
-  this.state.contentsdata.push({
-    content,
-    options
-  });
-  return resolve();
-};
-
-// Mount component to parent
-proto._setVueContent = function(content, options={}) {
-  const d = $.Deferred();
-  const append = options.append || false;
-  content.mount(this._parent, append)
-  .then(() => {
-    $(this._parent).localize();
-    // Insert the content into the array with the following attributes:
-    // content: component object
-    // options: es. title, perc etc ...
-    this.state.contentsdata.push({
-      content,
-      options
-    });
-    d.resolve(content);
-  });
-  return d.promise();
-};
-
-// Check duplicate Vue Content
-proto._checkDuplicateVueContent = function(content) {
-  let idxToRemove = null;
-  const id = content.getId();
-  this.state.contentsdata.forEach((data, idx) => {
-    if (data.content.getId && (data.content.getId() == id)) idxToRemove = idx;
-  });
-  if (!_.isNull(idxToRemove)) {
-    const data = this.state.contentsdata[idxToRemove];
-    data.content.unmount()
-      .then(() => this.state.contentsdata.splice(idxToRemove,1));
-  }
-};
-
-// unmount component
-proto._unmount = function(content) {
-  const d = $.Deferred();
-  if (content instanceof Component || content instanceof Panel) {
-    content.unmount()
-    .then(() => d.resolve());
-  }
-  else {
-    $(this._parent).empty();
-    d.resolve();
-  }
-  return d.promise();
-};
-
-proto.forEach = function(cbk) {
-  this.state.contentsdata.forEach(data => cbk(data.content));
-};
-
-// Get lenght / numbero of element stored in stack
-proto.getLength = function() {
-  return this.state.contentsdata.length;
-};
-
-module.exports = BarStack;
diff --git a/src/app/gui/utils/utils.js b/src/app/gui/utils/utils.js
deleted file mode 100644
index 33cb7fdfa..000000000
--- a/src/app/gui/utils/utils.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  barstack: require('./barstack')
-};
\ No newline at end of file
diff --git a/src/app/gui/viewport/contentsviewer.js b/src/app/gui/viewport/contentsviewer.js
index 666a96c60..8c75b71bc 100644
--- a/src/app/gui/viewport/contentsviewer.js
+++ b/src/app/gui/viewport/contentsviewer.js
@@ -1,158 +1,7 @@
-import * as vueComponentOptions from 'components/ViewportContentsViewer.vue';
+/**
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
+ */
 
-const { base, inherit } = require('utils');
-const { barstack: Stack } = require('gui/utils/utils');
-const Component = require('gui/component/component');
-
-// Internal Component (VUE) of the content of the  viewport
-const InternalComponent = Vue.extend(vueComponentOptions);
-
-function ContentsViewerComponent(options={}) {
-  base(this, options);
-  this.stack = new Stack();
-  this.setService(this);
-  this.title = "contents";
-  this.contentsdata = this.stack.state.contentsdata;
-  this.state.visible = true;
-  const internalComponent = new InternalComponent({
-    service: this
-  });
-  this.setInternalComponent(internalComponent);
-  this.internalComponent.state = this.state;
-}
-
-inherit(ContentsViewerComponent, Component);
-
-const proto = ContentsViewerComponent.prototype;
-
-proto.setContent = function(options={}) {
-  const {push=false, content, crumb} = options;
-  const d = $.Deferred();
-  // clean the stack every time, sure to have just one component.
-  // Use barstack because it handle the logic og mounting component on DOM
-  if (push) {
-    this.addContent(content,options)
-      .then(() => d.resolve(options));
-  } else {
-    // clear stack
-    this.clearContents()
-      .then(() => {
-        this.addContent(content, options)
-          .then(() => d.resolve(options));
-      })
-  }
-
-  this.setOpen(true);
-  return d.promise();
-};
-
-proto.addContent = function(content, options={}) {
-  const d = $.Deferred();
-  // parent element is the internal element
-  options.parent = this.internalComponent.$el;
-  options.append = true;
-  const promise = this.stack.push(content, options);
-  promise.then(() => {
-    // get stack content
-    this.contentsdata = this.stack.state.contentsdata;
-    // update the visibility of the others components
-    this.updateContentVisibility();
-    d.resolve();
-  });
-  return d.promise();
-};
-
-// remove content from stack
-proto.removeContent = function() {
-  this.setOpen(false);
-  return this.clearContents();
-};
-
-// used by  viewport.js
-proto.popContent = function() {
-  return this.stack.pop()
-  .then(() => {
-    // update the content of contentsdata only after stack is updated
-    this.contentsdata = this.stack.state.contentsdata;
-    this.updateContentVisibility();
-  });
-};
-
-// get component through class
-proto.getComponentByClass = function(componentClass) {
-  let component;
-  const contentdata = this.stack.getContentData();
-  contentdata.forEach(content => {
-    if (content.content instanceof componentClass) {
-      component = content.content;
-      return false
-    }
-  });
-  return component
-};
-
-// get component by component id
-proto.getComponentById = function(id) {
-  let component;
-  const contentdata = this.stack.getContentData();
-  contentdata.forEach(content => {
-    if (content.content.id == id) {
-      component = content.content;
-      return false
-    }
-  });
-  return component
-};
-
-proto.getContentData = function() {
-  return this.stack.getContentData();
-};
-
-// get current contentdata
-proto.getCurrentContentData = function(){
-  return this.stack.getCurrentContentData();
-};
-
-// get  previuos contentdata
-proto.getPreviousContentData = function() {
-  return this.stack.getPreviousContentData();
-};
-
-// update visibility of the components of content
-proto.updateContentVisibility = function() {
-  // hide each elements but not the last one
-  const contentsEls = $(this.internalComponent.$el).children();
-  contentsEls.hide();
-  contentsEls.last().show();
-};
-
-// stack clear because if we want the contentComponente stack
-// it has to be empty stack
-proto.clearContents = function() {
-  return this.stack.clear().then(() => this.contentsdata = this.stack.state.contentsdata);
-};
-
-// Set layout of the content each time
-// Parameters are: height and with of the parent content
-proto.layout = function(parentWidth, parentHeight) {
-  const el = $(this.internalComponent.$el);
-  //run the callback only after that vue state is updated
-  Vue.nextTick(() => {
-    const contentsdata = this.stack.state.contentsdata;
-    // el.parent() is div g3w-view-content
-    const height = el.parent().height()
-      - el.siblings('.close-panel-block').outerHeight(true)
-      - el.siblings('.content_breadcrumb').outerHeight(true) - 10; // margin 10 from bottom
-    el.height(height);
-    el.children().first().height(height);
-    contentsdata.forEach(data => {
-      //check each componentstored in stack
-      if (typeof data.content.layout == 'function') {
-        //call function layout of each component that are stored into the stack
-        data.content.layout(parentWidth + 0.5, height);
-      }
-    })
-  })
-};
-
-module.exports = ContentsViewerComponent;
+import vueComp from 'components/g3w-contentsviewer';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/app/gui/wms/vue/wms.js b/src/app/gui/wms/vue/wms.js
index 71835c77c..23aae09f4 100644
--- a/src/app/gui/wms/vue/wms.js
+++ b/src/app/gui/wms/vue/wms.js
@@ -1,442 +1,7 @@
-import * as vueComponentOptions          from 'components/WMS.vue';
-import * as vuePanelComponentOptions     from 'components/WMSLayersPanel.vue';
-import { LOCALSTORAGE_EXTERNALWMS_ITEM } from 'app/constant';
-import DataRouterService                 from 'services/data';
-import ProjectsRegistry                  from 'store/projects';
-import ApplicationService                from 'services/application';
-import GUI                               from 'services/gui';
-import { base, inherit, uniqueId }       from 'utils';
-
-const Panel                   = require('gui/panel');
-const Component               = require('gui/component/component');
-const InternalComponent       = Vue.extend(vueComponentOptions);
-const WMSLayersPanelComponent = Vue.extend(vuePanelComponentOptions);
-
 /**
- * ORIGINAL SOURCE: src/app/gui/wms/vue/panel/wmslayerspanel.js@3.8.15
+ * @file
+ * @deprecated do not remove prior to https://github.com/g3w-suite/g3w-client/pull/451
  */
-function WmsLayersPanel(options = {}) {
-  const { service, config } = options;
-  this.setService(service);
-  this.id        = uniqueId();
-  this.title     = 'sidebar.wms.panel.title';
-  const internal = new WMSLayersPanelComponent({ service, config });
-  this.setInternalPanel(internal);
-  this.unmount   = function() { return base(this, 'unmount').then(() => service.clear()); };
-}
-
-inherit(WmsLayersPanel, Panel);
-
-/**
- * ORIGINAL SOURCE: src/app/gui/wms/service.js@3.8.15 
- */
-class Service {
-
-  constructor(options = {}) {
-
-    const {
-      wmsurls = []
-    } = options;
-
-    /**
-     * Current project id used to store data or get data to current project
-     */
-    this.projectId = ProjectsRegistry.getCurrentProject().getId(); // 
-
-    /**
-     * @FIXME add description
-     */
-    this.panel;
-
-    /**
-     * @FIXME add description
-     */
-    this.state = {
-      adminwmsurls: wmsurls,
-      localwmsurls: [] // array of object {id, url}
-    };
-
-    GUI.isReady()
-      .then(() => {
-        GUI.getService('map')
-          .isReady()
-          .then(async () => { this.state.localwmsurls = await this.loadClientWmsUrls(); });
-      });
-
-    ProjectsRegistry.onafter('setCurrentProject', async (project) => {
-      this.projectId = project.getId();
-      this.state.adminwmsurls = project.wmsurls || [];
-    });
-
-  }
-
-  /**
-   * Getting Wms Urls from local browser storage
-   */
-  async loadClientWmsUrls() {
-    let data = this.getLocalWMSData();
-
-    if (undefined === data) {
-      data = {
-        urls: [], // unique url for wms
-        wms:  {}, // bject contain url as key and array of layers bind to url
-      };
-      this.updateLocalWMSData(data);
-    }
-
-    await GUI.isReady();
-
-    setTimeout(() => {
-      const map = GUI.getService('map');
-
-      map.on('remove-external-layer', name => this.deleteWms(name));
-
-      map.on('change-layer-position-map', ({ id: name, position } = {}) => this.changeLayerData(name, { key: 'position', value: position }));
-      map.on('change-layer-opacity',      ({ id: name, opacity } = {})  => this.changeLayerData(name, { key: 'opacity',  value: opacity }));
-      map.on('change-layer-visibility',   ({ id: name, visible } = {})  => this.changeLayerData(name, { key: 'visible',  value: visible }));
-
-      // load eventually data
-      Object.keys(data.wms).forEach(url => { data.wms[url].forEach(config => { this.loadWMSLayerToMap({ url, ...config }) }); });
-    });
-
-    return data.urls;
-  }
-
-  /**
-   * Change config of storage layer options as position, opacity
-   * 
-   * @param { Object } opts
-   * @param { string } opts.name
-   * @param opts.config
-   */
-  changeLayerData(name, attribute = {}) {
-    const data = this.getLocalWMSData();
-    Object
-      .keys(data.wms)
-      .find((wmsurl) => {
-        const index = data.wms[wmsurl].findIndex(config => config.name == name);
-        if (-1 !== index) {
-          data.wms[wmsurl][index][attribute.key] = attribute.value;
-          return true;
-        }
-      });
-
-    this.updateLocalWMSData(data);
-  }
-
-  /**
-   * Create a common status object
-   * 
-   * @param { Object } request
-   * @param request.error
-   * @param request.added
-   * 
-   * @returns {{ error, status: string }}
-   */
-  getRequestStatusObject({
-    error = false,
-    added = false,
-  } = {}) {
-    return { error, added };
-  }
-
-  /**
-   * Add new WMS url
-   * 
-   * @param { Object } wms
-   * @param { string } wms.id
-   * @param { string } wms.url
-   * 
-   * @returns {*}
-   */
-  async addNewUrl({
-    id,
-    url,
-  } = {}) {
-    const found  = this.state.localwmsurls.find(({ id: localid, url: localurl }) => localurl == url || localid == id);
-    const status = this.getRequestStatusObject({ added: !!found });
-
-    // skip when url already added
-    if (found) {
-      return status;
-    }
-
-    try {
-      const response = await this.getWMSLayers(url);
-      // skip on invalid response
-      if (!response.result) {
-        throw 'invalid response';
-      }
-      const data = this.getLocalWMSData();
-      this.state.localwmsurls.push({ id, url });
-      data.urls = this.state.localwmsurls;
-      this.updateLocalWMSData(data);
-      response.wmsurl = url;
-      this.showWmsLayersPanel(response);
-    } catch(err) {
-      console.warn(err);
-      status.error = true;
-    }
-
-    return status;
-  }
-
-  /**
-   * Delete WMS by name
-   * 
-   * @param name
-   */
-  deleteWms(name) {
-    const data = this.getLocalWMSData();
-    Object
-      .keys(data.wms)
-      .find(wmsurl => {
-        const index = data.wms[wmsurl].findIndex(config => config.name == name);
-
-        // skip when ..
-        if (-1 === index) {
-          return;
-        }
-
-        /** @TODO add description */
-        data.wms[wmsurl].splice(index, 1);
-
-        /** @TODO add description */
-        if (0 == data.wms[wmsurl].length) {
-          delete data.wms[wmsurl];
-        }
-
-        return true;
-      });
-    this.updateLocalWMSData(data);
-  }
-
-  /**
-   * @param { Object } opts
-   * @param opts.name
-   * @param opts.layers
-   * 
-   * @returns { boolean } WMS is already added (by `name` or `layer` with a specific url) 
-   */
-  checkIfWMSAlreadyAdded({
-    url,
-    layers=[],
-  } = {}) {
-    const data = this.getLocalWMSData();
-
-    // wms url is not already added
-    if (!data.wms[url]) {
-      return false;
-    }
-
-    // check if wms layer is already added (by name)
-    return data.wms[url].some(
-      ({ layers: addedLayers }) => addedLayers.length === layers.length
-        ? layers.every((name) => addedLayers.includes(name))
-        : undefined
-    );
-  }
-
-  /**
-   * Delete url from local storage
-   * @param id
-   */
-  deleteWmsUrl(id) {
-    this.state.localwmsurls = this.state.localwmsurls .filter(({ id: localid }) => id !== localid);
-    const data = this.getLocalWMSData();
-    data.urls  = this.state.localwmsurls;
-    this.updateLocalWMSData(data);
-  }
-
-  /**
-   * Load data from server and show wms layer panel
-   * 
-   * @param url
-   * 
-   * @returns { Promise<{ added: boolean, error: boolean }> }
-   */
-  async loadWMSDataAndShowWmsLayersPanel(url) {
-    const status = this.getRequestStatusObject();
-    try {
-      const response = await this.getWMSLayers(url);
-      status.error = !response.result;
-      if (response.result) {
-        response.wmsurl = url;
-        this.showWmsLayersPanel(response);
-      }
-    } catch(err) {
-      console.warn(err);
-      status.error = true;
-    }
-    return status;
-  }
-
-  /**
-   * show add wms layers to wms panel
-   * @param config
-   * @returns {WmsLayersPanel}
-   */
-  showWmsLayersPanel(config={}) {
-    this.panel = new WmsLayersPanel({ service: this, config });
-    this.panel.show();
-    return this.panel;
-  }
-
-  /**
-   * Get data of wms url from server
-   * 
-   * @param { string } url
-   * 
-   * @returns { Promise<{
-  *    result:       boolean,
-  *    info_formats: [],
-  *    layers:       [],
-  *    map_formats:  [],
-  *    methods:      [],
-  *    abstract:     null,
-  *    title:        null,
-  *    }> }
-  */
-  async getWMSLayers(url) {
-    // base schema of response
-    let response = {
-      result:       false,
-      layers:       [],
-      info_formats: [], // @deprecated since 3.9.0 (inside methods)
-      abstract:     null,
-      methods:      [], // @since 3.9.0
-      map_formats:  [], // @deprecated since 3.9.0 (inside methods)
-      title:        null
-    };
-    try {
-      response = await DataRouterService.getData('ows:wmsCapabilities', { inputs: { url }, outputs: false });
-    } catch(err) {
-      console.warn(err);
-    }
-    return response;
-  }
-
-  /**
-   * Load wms to map
-   * 
-   * @param { Object } wms
-   * @param { string } wms.url
-   * @param { string } wms.name
-   * @param wms.epsg
-   * @param wms.position
-   * @param wms.opacity
-   * @param wms.visible
-   * @param wms.layers
-   * 
-   * @returns {*}
-   */
-  loadWMSLayerToMap({
-    url,
-    name,
-    epsg,
-    position,
-    opacity,
-    visible = true,
-    layers  = [],
-  } = {}) {
-    return GUI.getService('map').addExternalWMSLayer({ url, name, layers, epsg, position, visible, opacity });
-  }
-
-  /**
-   * Check if a layer is already added to map
-   * 
-   * @param { Object } wms
-   * @param { string } wms.url
-   * @param { string } wms.name
-   * @param wms.epsg
-   * @param wms.position
-   * @param wms.methods
-   * @param wms.layers
-   * 
-   * @returns { Promise<void> }
-   */
-  async addWMSlayer({
-    url,
-    epsg,
-    position,
-    name    = `wms_${uniqueId()}`,
-    layers  = [],
-    opacity = 1,
-    visible = true,
-  } = {}) {
-    const data   = this.getLocalWMSData();
-    const config = {
-      url,
-      name,
-      layers,
-      epsg,
-      position,
-      visible,
-      opacity
-    };
-
-    if (undefined === data.wms[url]) {
-      data.wms[url] = [config];
-    } else {
-      data.wms[url].push(config);
-    }
-
-    this.updateLocalWMSData(data);
-
-    try {
-      await this.loadWMSLayerToMap(config);
-    } catch(err) {
-      console.warn(err);
-      GUI.getService('map').removeExternalLayer(name);
-      this.deleteWms(name);
-      setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) });
-    }
-
-    this.panel.close();
-  }
-
-  /**
-   * Get local storage wms data based on current projectId
-   * 
-   * @returns {*}
-   */
-  getLocalWMSData() {
-    const item = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM);
-    return item && item[this.projectId];
-  }
-
-  /**
-   * Update local storage data based on changes
-   * 
-   * @param data
-   */
-  updateLocalWMSData(data) {
-    const alldata = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {};
-    alldata[this.projectId] = data;
-    ApplicationService.setLocalItem({ id: LOCALSTORAGE_EXTERNALWMS_ITEM, data: alldata });
-  }
-
-  clear() {
-    this.panel = null;
-  }
-
-}
-
-function WmsComponent(options={}) {
-  base(this, options);
-  this._service  = new Service(options);
-  this.title     = "WMS";
-  const internal = new InternalComponent({ service: this._service });
-  internal.state = this._service.state;
-  this.setInternalComponent(internal);
-  this._setOpen = function(bool = false) {
-    this.internalComponent.state.open = bool;
-    if (bool) {
-      GUI.closeContent();
-    }
-  };
-}
-
-inherit(WmsComponent, Component);
 
-module.exports = WmsComponent;
+import vueComp from 'components/g3w-wms';
+module.exports = vueComp;
\ No newline at end of file
diff --git a/src/components/App.vue b/src/components/App.vue
index c2fa36fd0..c503c7327 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -30,27 +30,49 @@
             data-toggle="collapse"
             data-target="#main-navbar"
           >
-            <i style="font-size: 1.3em;" :class="g3wtemplate.getFontClass('ellips-v')"></i>
+            <i
+              style="font-size: 1.3em;"
+              :class="g3wtemplate.getFontClass('ellips-v')">
+            </i>
           </button>
 
           <!-- HAMBURGER BUTTON (SIDEBAR MENU) -->
-          <a id="g3w-small-screen-hamburger-sidebar" href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-            <i style="font-size: 1.3em;" :class="g3wtemplate.getFontClass('bars')"></i>
+          <a
+            id="g3w-small-screen-hamburger-sidebar"
+            href="#"
+            class="sidebar-toggle"
+            data-toggle="offcanvas"
+            role="button"
+          >
+            <i
+              style="font-size: 1.3em;"
+              :class="g3wtemplate.getFontClass('bars')">
+            </i>
           </a>
 
           <!-- LOGO -->
-          <div class="logo-wrapper" :class="{'mobile': isMobile()}">
+          <div
+            class="logo-wrapper"
+            :class="{'mobile': isMobile()}"
+          >
             <a
               v-if="logo_url"
               :href="logo_link"
               :target="logo_link_target"
               class="project_logo_link"
             >
-              <img class="img-responsive" style="max-width: 250px;" ref="img_logo" :src="logo_url">
+              <img
+                class="img-responsive"
+                style="max-width: 250px;"
+                ref="img_logo"
+                :src="logo_url">
             </a>
-            <div ref="main_title_project_title" class="project_title_content">
+            <div
+              ref="main_title_project_title"
+              class="project_title_content"
+            >
               <div class="main_title">{{ main_title }}</div>
-              <div class="sub_title">{{project_title}}</div>
+              <div class="sub_title">{{ project_title }}</div>
             </div>
           </div>
 
@@ -78,7 +100,10 @@
             <!-- LOGIN -->
             <li v-if="!user" class="dropdown user user-menu">
               <a :href="login_url">
-                <i :class="g3wtemplate.getFontClass('sign-in')" aria-hidden="true"></i>
+                <i
+                  :class="g3wtemplate.getFontClass('sign-in')"
+                  aria-hidden="true">
+                </i>
                 <span v-t="'sign_in'"></span>
               </a>
             </li>
@@ -92,9 +117,21 @@
             />
 
             <!-- CHANGE MAP -->
-            <li v-if="hasRelatedMaps" id="changemaps" class="dropdown user">
-              <a href="#" @click="openChangeMapMenu" class="dropdown-toggle" data-toggle="dropdown">
-                <i :class="g3wtemplate.getFontClass('change-map')" aria-hidden="true"></i>
+            <li
+              v-if="hasRelatedMaps"
+              id="changemaps"
+              class="dropdown user"
+            >
+              <a
+                href="#"
+                @click.stop="openChangeMapMenu"
+                class="dropdown-toggle"
+                data-toggle="dropdown"
+              >
+                <i
+                  :class="g3wtemplate.getFontClass('change-map')"
+                  aria-hidden="true">
+                </i>
                 <span v-t="'changemap'"></span>
               </a>
             </li>
@@ -108,8 +145,15 @@
             />
 
             <!-- ADMIN / LOGOUT -->
-            <li v-if="user" class="dropdown user user-menu">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+            <li
+              v-if="user"
+              class="dropdown user user-menu"
+            >
+              <a
+                href="#"
+                class="dropdown-toggle"
+                data-toggle="dropdown"
+              >
                 <i :class="g3wtemplate.getFontClass('user')"></i>
                 <span class="hidden-xs">{{ user.username }}</span>
               </a>
@@ -120,14 +164,27 @@
                   </p>
                 </li>
                 <li class="user-footer">
-                  <div class="pull-left" v-if="user.admin_url">
-                    <a :href="user.admin_url" class="btn btn-default btn-flat skin-color bold" >
+                  <div
+                    v-if="user.admin_url"
+                    class="pull-left"
+                  >
+                    <a
+                      :href="user.admin_url"
+                      class="btn btn-default btn-flat skin-color bold"
+                    >
                       <i :class="g3wtemplate.getFontClass('folder')"></i> Admin
                     </a>
                   </div>
                   <div class="pull-right">
-                    <a :href="user.logout_url" class="btn btn-default btn-flat skin-color bold" v-t="'logout'">
-                      <i :class="g3wtemplate.getFontClass('sign-out')" style="margin-right: 2px;"></i>
+                    <a
+                      :href="user.logout_url"
+                      class="btn btn-default btn-flat skin-color bold"
+                      v-t="'logout'"
+                    >
+                      <i
+                        :class="g3wtemplate.getFontClass('sign-out')"
+                        style="margin-right: 2px;">
+                      </i>
                     </a>
                   </div>
                 </li>
@@ -144,8 +201,16 @@
 
             <!-- CREDITS -->
             <li class="dropdown user user-menu">
-              <a href="#" data-toggle="modal" data-target="#credits" class="dropdown-toggle">
-                <i :class="g3wtemplate.getFontClass('credits')" aria-hidden="true"></i>
+              <a
+                href="#"
+                data-toggle="modal"
+                data-target="#credits"
+                class="dropdown-toggle"
+              >
+                <i
+                  :class="g3wtemplate.getFontClass('credits')"
+                  aria-hidden="true">
+                </i>
                 <span>Credits</span>
               </a>
             </li>
@@ -182,7 +247,10 @@
             <!-- HOME PAGE -->
             <li v-if="frontendurl" class="dropdown">
               <a :href="frontendurl">
-                <span><i :class="g3wtemplate.getFontClass('home')"></i> Home</span>
+                <span>
+                  <i :class="g3wtemplate.getFontClass('home')">
+                  </i> Home
+                </span>
               </a>
             </li>
 
@@ -205,63 +273,144 @@
   <!-- Left side column. contains the logo and sidebar -->
   <sidebar></sidebar>
   <!-- Content Wrapper. Contains page content -->
-  <div class="content-wrapper" :style="{paddingTop: isIframe ? 0 : null}">
-    <viewport :appState="appState"></viewport>
+  <div
+    class="content-wrapper"
+    :style="{paddingTop: isIframe ? 0 : null}"
+  >
+    <viewport :appState="appState"/>
   </div>
   <!-- /.content-wrapper -->
   <!-- Control Sidebar -->
-  <floatbar></floatbar>
+  <floatbar/>
   <!-- /.control-sidebar -->
   <!-- Add the sidebar's background. This div must be placed
        immediately after the control sidebar -->
   <div class="control-sidebar-bg"></div>
   <!--full screen modal element-->
-  <div class="modal fade modal-fullscreen force-fullscreen" id="full-screen-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="full-screen-modal" aria-hidden="true"></div>
+  <div
+    class="modal fade modal-fullscreen force-fullscreen"
+    id="full-screen-modal"
+    tabindex="-1"
+    role="dialog"
+    data-backdrop="static"
+    data-keyboard="false"
+    aria-labelledby="full-screen-modal"
+    aria-hidden="true">
+  </div>
   <!---->
-  <div id="credits" class="modal fade">
-    <div class="modal-dialog" role="document">
+  <div
+    id="credits"
+    class="modal fade"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"
-            style="color: #ffffff; font-weight: bold; opacity: 1; position: absolute; right: 25px; top: 20px">
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+            style="color: #ffffff; font-weight: bold; opacity: 1; position: absolute; right: 25px; top: 20px"
+          >
             <span aria-hidden="true">&times;</span>
           </button>
           <div style="display: flex; flex-direction: column; justify-content: space-around; justify-items: center; align-items: center">
-            <div class="customcredits" v-if="!!customcredits" v-html="customcredits"></div>
+            <div
+              v-if="!!customcredits"
+              class="customcredits"
+              v-html="customcredits">
+            </div>
             <div v-if="powered_by">
               <div class="g3w-credits-block">
-                <div v-t="'credits.g3wSuiteFramework'" style="background-color: #95ad36; padding: 5px; border-radius:3px; color: #ffffff" class="credit-title-logo"></div>
-                <a target="_blank" href="https://g3wsuite.it/">
-                  <img class="g3w-suite-logo" :src="g3w_suite_logo" alt="">
+                <div
+                  v-t="'credits.g3wSuiteFramework'"
+                  style="background-color: #95ad36; padding: 5px; border-radius:3px; color: #ffffff"
+                  class="credit-title-logo">
+                </div>
+                <a
+                  target="_blank"
+                  href="https://g3wsuite.it/"
+                >
+                  <img
+                    class="g3w-suite-logo"
+                    :src="g3w_suite_logo"
+                    alt="">
                 </a>
-                <div v-t="'credits.g3wSuiteDescription'" style="margin-top: 10px;"></div>
+                <div
+                  v-t="'credits.g3wSuiteDescription'"
+                  style="margin-top: 10px;">
+                </div>
               </div>
-              <div v-t:pre ="'credits.productOf'" class="credit-title-logo g3w-credits-block" style="font-size: 1em; display: flex; justify-content: center">
-                <a style="text-align: center!important;" href="http://www.gis3w.it" target="_blank">
-                  <img width="60" style="margin-left: 5px" :src="credits_logo" class="img-responsive center-block" alt="">
+              <div
+                v-t:pre ="'credits.productOf'"
+                class="credit-title-logo g3w-credits-block"
+                style="font-size: 1em; display: flex; justify-content: center"
+              >
+                <a
+                  style="text-align: center!important;"
+                  href="http://www.gis3w.it"
+                  target="_blank"
+                >
+                  <img
+                    width="60"
+                    style="margin-left: 5px"
+                    :src="credits_logo"
+                    class="img-responsive center-block"
+                    alt="">
                 </a>
               </div>
-              <address id="address-credits"  style="line-height: 1.3; text-align: center; margin-top: 5px; display: flex; justify-content: center">
+
+              <address
+                id="address-credits"
+                style="line-height: 1.3; text-align: center; margin-top: 5px; display: flex; justify-content: center"
+              >
                 <span style="padding: 2px">
-                  <span style="color: #95ad36; font-weight: bold" :class="g3wtemplate.getFontClass('marker')" aria-hidden="true"></span> Montecatini Terme - Italy
+                  <span
+                    style="color: #95ad36; font-weight: bold"
+                    :class="g3wtemplate.getFontClass('marker')"
+                    aria-hidden="true">
+                  </span> Montecatini Terme - Italy
                 </span>
                 <span style="padding: 2px">
-                  <span style="color: #95ad36" :class="g3wtemplate.getFontClass('mobile')" aria-hidden="true"></span>  +39 393 8534336
+                  <span
+                    style="color: #95ad36"
+                    :class="g3wtemplate.getFontClass('mobile')"
+                    aria-hidden="true">
+                  </span>  +39 393 8534336
                 </span>
                 <span style="padding: 2px">
-                  <span style="color: #95ad36" :class="g3wtemplate.getFontClass('mail')" aria-hidden="true"></span>
-                  <a href="mailto:info@gis3w.it" style="color:#000000"> info@gis3w.it</a>
+                  <span
+                    style="color: #95ad36"
+                    :class="g3wtemplate.getFontClass('mail')"
+                    aria-hidden="true">
+                  </span>
+                  <a
+                    href="mailto:info@gis3w.it"
+                    style="color:#000000"> info@gis3w.it</a>
                 </span>
               </address>
+
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div id="custom_modal" class="modal fade">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content" v-html="current_custom_modal_content"></div>
+  <div
+    id="custom_modal"
+    class="modal fade"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div
+        class="modal-content"
+        v-html="current_custom_modal_content">
+      </div>
     </div>
   </div>
 </div>
@@ -436,8 +585,9 @@ $.LayoutManager = $.LayoutManager || {
           //Fix for the control sidebar height
           const controlSidebar = $($.LayoutManager.options.controlSidebarOptions.selector);
           if (typeof controlSidebar !== "undefined") {
-            if (controlSidebar.height() > postSetWidth)
+            if (controlSidebar.height() > postSetWidth) {
               $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
+            }
           }
 
         }
@@ -789,7 +939,7 @@ $.LayoutManager = $.LayoutManager || {
    * @type plugin
    * @usage $("#box-widget").boxRefresh( options );
    */
-  addRefreshButton: function () {
+  addRefreshButton() {
     "use strict";
 
     $.fn.boxRefresh = function (options) {
@@ -866,7 +1016,7 @@ $.LayoutManager = $.LayoutManager || {
    * @type plugin
    * @usage $("#box-widget").activateBox();
    */
-  activateBox: function () {
+  activateBox() {
     'use strict';
 
     $.fn.activateBox = function () {
@@ -884,7 +1034,7 @@ $.LayoutManager = $.LayoutManager || {
    * @type plugin
    * @usage $("#todo-widget").todolist( options );
    */
-  listCustomPlugin: function () {
+  listCustomPlugin() {
     'use strict';
 
     $.fn.todolist = function (options) {
@@ -937,7 +1087,7 @@ $.LayoutManager = $.LayoutManager || {
    * functions and plugins as specified by the
    * options above.
    */
-  setup: function () {
+  setup() {
     "use strict";
 
     //Fix for IE page transitions
@@ -1019,7 +1169,7 @@ $.LayoutManager = $.LayoutManager || {
       .listCustomPlugin();
   },
 
-  loading: function(start) {
+  loading(start) {
     $('#initerror').remove();
     start = _.isBoolean(start) ? start : true;
     if (start) {
@@ -1069,7 +1219,7 @@ export default {
     languages() {
 
       /***
-       * check if is length of languages is more than one
+       * check if the length of languages is more than one
        */
       const languages = Array.isArray(this.appconfig.i18n) && this.appconfig.i18n || [];
       return languages.length > 1 && languages;
@@ -1195,7 +1345,7 @@ export default {
     },
 
     showCustomModalContent(id) {
-      const {content} = this.custom_modals.find(custommodal => custommodal.id === id);
+      const { content } = this.custom_modals.find(custommodal => custommodal.id === id);
       this.current_custom_modal_content = content;
     },
 
@@ -1237,7 +1387,7 @@ export default {
           data[projectId] = [];
         }
 
-        // check if current project has already messages stored
+        // check if a current project has already messages stored
         if (undefined !== data[projectId].find(id => id === message.id)) {
           continue;
         }
@@ -1263,7 +1413,7 @@ export default {
         // append input don't show again checkbox vue component
         content.append(doNotShowAgainVueComponent.$mount().$el);
 
-        // show modal window
+        // show a modal window
         await new Promise((resolve) => {
           GUI.showModalDialog({
             title: message.title,
@@ -1327,22 +1477,25 @@ export default {
       3: [],
       4: []
     };
-    this.customlinks = Array.isArray(this.appconfig.header_custom_links) ? this.appconfig.header_custom_links.filter(customitem => {
-      if (customitem !== null) {
-        const id = customitem.id = uniqueId();
-        customitem.type === 'modal' && this.custom_modals.push({
-          id,
-          content: customitem.content
-        });
-        let position = 1*(customitem.position || 0);
-        position = position > 4 ? 4 : position < 0 || Number.isNaN(position)? 0 : position;
-        this.custom_header_items_position[position].push(customitem);
-        return true
-      }
-      return false;
-    }): [];
 
-    !!this.appconfig.credits && $.get(this.appconfig.credits).then(credits=> this.customcredits = credits !== 'None' && credits);
+    this.customlinks = Array.isArray(this.appconfig.header_custom_links)
+      ? this.appconfig.header_custom_links
+        .filter(customitem => {
+          if (customitem !== null) {
+            const id = customitem.id = uniqueId();
+            customitem.type === 'modal' && this.custom_modals.push({ id, content: customitem.content });
+            let position = 1*(customitem.position || 0);
+            position = position > 4 ? 4 : position < 0 || Number.isNaN(position)? 0 : position;
+            this.custom_header_items_position[position].push(customitem);
+            return true
+          }
+          return false;
+        })
+      : [];
+
+    if (!!this.appconfig.credits) {
+      $.get(this.appconfig.credits).then(credits=> this.customcredits = credits !== 'None' && credits);
+    }
   },
 
   async mounted() {
@@ -1368,7 +1521,7 @@ export default {
 
     await this.$nextTick();
 
-    // add some marging to logo
+    // add some marging to the logo
     if (!this.isIframe) {
       this.$refs.img_logo.addEventListener('load', () => {
         this.logoWidth = this.$refs.img_logo.offsetWidth + 15;
diff --git a/src/components/C3XYLine.vue b/src/components/C3XYLine.vue
index 745121a21..aa1c231cd 100644
--- a/src/components/C3XYLine.vue
+++ b/src/components/C3XYLine.vue
@@ -4,22 +4,29 @@
 -->
 
 <template>
-<div class="chart_wrapper" style="height: 100%; width: 100%">
-  <div style="height: 100%; min-height: 200px;  background-color: #ffffff" :id="id"></div>
-  <div v-for="component in components">
-    <span class="divider"></span>
+<div
+  class = "chart_wrapper"
+  style = "height: 100%; width: 100%"
+>
+  <div
+    style = "height: 100%; min-height: 200px;  background-color: #ffffff"
+    :id   = "id">
+  </div>
+  <div
+    v-for="component in components"
+  >
+    <divider/>
     <component
-      @change-item="changeItem"
-      @change-items="changeItems"
-      @select-item="selectItem"
-      @select-all="selectAll"
-      @unselect-all="unselectAll"
-      @unselect-item="unselectItem"
-      :data="data"
-      :selectitems="selectitems"
-      :size="size"
-      :is="component">
-    </component>
+      @change-item   = "changeItem"
+      @change-items  = "changeItems"
+      @select-item   = "selectItem"
+      @select-all    = "selectAll"
+      @unselect-all  = "unselectAll"
+      @unselect-item = "unselectItem"
+      :data          = "data"
+      :selectitems   = "selectitems"
+      :size          = "size"
+      :is            = "component"/>
   </div>
 </div>
 </template>
@@ -42,37 +49,27 @@ export default {
   },
   data() {
     return {
-      id: `graphline${getUniqueDomId()}`,
+      id:          `graphline${getUniqueDomId()}`,
       selectitems: [],
-      data: [],
-      components: [],
-      config: {
-        data: {
-          columns: [
-            ['x'],
-            ['y']
-          ]
-        }
-      },
-      size: {
-        width: 0,
-        height: 0
-      }
+      data:        [],
+      components:  [],
+      config:      { data: { columns: [ ['x'],  ['y'] ] } },
+      size:        { width: 0, height: 0 }
     }
   },
   methods: {
     addComponent(component) {
       this.components.push(component);
     },
-    addComponents(components=[]){
+    addComponents(components = []) {
       components.forEach(component => this.addComponent(component))
     },
-    setConfig(config={}){
+    setConfig(config = {}) {
       this.config = config;
     },
     setDataOffset(offset, render=false) {
       const data = this.getData();
-      for (let i =0; i < data.length; i++) {
+      for (let i = 0; i < data.length; i++) {
         const item = data[i];
         item.value+=offset;
       }
@@ -89,13 +86,13 @@ export default {
     unselectItem(id) {
       this.chart.unselect(['y'], [id]);
     },
-    selectItems(ids=[]) {
+    selectItems(ids = []) {
       this.chart.select([y], ids);
     },
-    unselectItems(ids=[]) {
+    unselectItems(ids = []) {
       this.chart.unselect(['y'], ids);
     },
-    unselectAll(){
+    unselectAll() {
       this.chart.unselect();
     },
     selectAll() {
@@ -104,50 +101,47 @@ export default {
     getData() {
       return this.data;
     },
-    async resize({width, height}={}) {
+    async resize({ width, height } = {}) {
       await this.$nextTick();
       this.chart.resize({
-        width: width,
+        width:  width,
         height: height || $(`#${this.id}`).height() - 4
       });
     },
     _setAllowedSpace() {
-      if (this.components && this.components.length)
+      if (this.components && this.components.length) {
         this.size.height =  document.querySelector('.g3wform_content').offsetHeight -
           this.$el.offsetHeight -
           document.querySelector('.g3wform_header').offsetHeight - 50;
+      }
     },
     _setMaxMin({value, max, min}) {
       min = value ? +value : +min;
       max = value ? +value : +max;
-      if (min < this.chart.axis.min().y)
+      if (min < this.chart.axis.min().y) {
         this.chart.axis.min(min);
-      else if (max > this.chart.axis.max().y)
+      } else if (max > this.chart.axis.max().y) {
         this.chart.axis.max(max);
-      else {
+      } else {
         const dataValues = this.data.map(data => +data.value);
         this.chart.axis.max(Math.max(...dataValues));
         this.chart.axis.min(Math.min(...dataValues));
-
       }
       this.resize();
     },
     changeItems(items) {
-      if (items.length === 1)
+      if (1 === items.length) {
         this._setMaxMin(items[0].value);
-      else {
-        const max = Math.max(...items.map(item => +item.value));
-        const min = Math.min(...items.map(item => +item.value));
+      } else {
         this._setMaxMin({
-          max,
-          min
+          max: Math.max(...items.map(item => +item.value)),
+          min: Math.min(...items.map(item => +item.value)),
         })
       }
       this.resize();
     },
-    changeItem({item, render=true}) {
-      const value = item.value;
-      this._setMaxMin({value});
+    changeItem({ item, render = true }) {
+      this._setMaxMin({value: item.value});
       if (render) {
         this.resize();
       }
@@ -157,21 +151,18 @@ export default {
     this.$nextTick(() => {
       GUI.on('resize', this.resize);
       const self = this;
-      this.config.data.onselected = function(evt) {
-        const _temp = [...self.selectitems, evt];
-        self.selectitems = _temp;
+      this.config.data.onselected = function(e) {
+        self.selectitems = [...self.selectitems, e];
       };
-      this.config.data.onunselected = function(evt){
-        self.selectitems = self.selectitems.filter((selectitem) => {
-          return selectitem.index !== evt.index
-        });
+      this.config.data.onunselected = function(e) {
+        self.selectitems = self.selectitems.filter(i => i.index !== e.index);
       };
       this.chart = c3.generate({
         bindto: `#${this.id}`,
         ...this.config,
       });
       const data = this.chart.data()[0] ? this.chart.data()[0].values : [];
-      data.forEach((item) => {this.data.push(item)});
+      data.forEach(i => this.data.push(i));
       this._setAllowedSpace();
       // emt event and pass chart
       this.$emit('chart-ready', this.chart);
diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
index 2cb956ee8..98720c0fe 100644
--- a/src/components/Catalog.vue
+++ b/src/components/Catalog.vue
@@ -10,18 +10,70 @@
     <div class="tabbable-line">
 
       <!-- TAB MENU (header) -->
-      <ul class="nav nav-tabs catalalog-nav-tabs" role="tablist" @click.capture="delegationClickEventTab">
-        <li v-if="hasLayers" role="presentation"  :class="{ active: ('layers' === activeTab) }">
-          <a href="#layers" aria-controls="layers" role="tab" data-toggle="tab" data-i18n="tree" v-t="'data'"></a>
+      <ul
+        class="nav nav-tabs catalalog-nav-tabs"
+        role="tablist"
+        @click.capture="onTabClick"
+      >
+        <!-- TAB TOC LAYERS -->
+        <li
+          v-if="hasLayers"
+          role="presentation"
+          :class="{ active: ('layers' === activeTab) }"
+        >
+          <a
+            href="#layers"
+            aria-controls="layers"
+            role="tab"
+            data-toggle="tab"
+            data-i18n="tree"
+            v-t="'data'">
+          </a>
         </li>
-        <li v-if="state.external.wms.length" role="presentation" :class="{ active: ('externalwms' === activeTab) }">
-          <a href="#externalwms" aria-controls="externalwms" role="tab" data-toggle="tab" data-i18n="externalwms" v-t="'externalwms'"></a>
+        <!-- TAB EXTERNAL WMS LAYERS -->
+        <li
+          v-if="state.external.wms.length"
+          role="presentation"
+          :class="{ active: ('externalwms' === activeTab) }"
+        >
+          <a
+            href="#externalwms"
+            aria-controls="externalwms"
+            role="tab"
+            data-toggle="tab"
+            data-i18n="externalwms"
+            v-t="'externalwms'">
+          </a>
         </li>
-        <li v-if="hasBaseLayers" role="presentation" :class="{ active: ('baselayers' === activeTab) }" >
-          <a href="#baselayers" aria-controls="baselayers" role="tab" data-toggle="tab" data-i18n="baselayers" v-t="'baselayers'"></a>
+        <!-- TAB BASE LAYERS -->
+        <li
+          v-if="hasBaseLayers"
+          role="presentation"
+          :class="{ active: ('baselayers' === activeTab) }"
+        >
+          <a
+            href="#baselayers"
+            aria-controls="baselayers"
+            role="tab"
+            data-toggle="tab"
+            data-i18n="baselayers"
+            v-t="'baselayers'">
+          </a>
         </li>
-        <li v-if="'tab' === legend.place && showlegend" role="presentation" :class="{ active: ('legend' === activeTab) }">
-          <a href="#legend" aria-controls="legend" role="tab" data-toggle="tab" data-i18n="legend" v-t="'legend'"></a>
+        <!-- TAB LEGEND LAYERS -->
+        <li
+          v-if="'tab' === state.legend.place && showlegend"
+          role="presentation"
+          :class="{ active: ('legend' === activeTab) }"
+        >
+          <a
+            href="#legend"
+            aria-controls="legend"
+            role="tab"
+            data-toggle="tab"
+            data-i18n="legend"
+            v-t="'legend'">
+          </a>
         </li>
       </ul>
 
@@ -30,111 +82,163 @@
 
         <bar-loader :loading="loading" />
 
-        <div id="layers" role="tabpanel" class="tab-pane" :class="{ active: ('layers' === activeTab) }">
+        <div
+          id     = "layers"
+          role   = "tabpanel"
+          class  = "tab-pane"
+          :class = "{ active: ('layers' === activeTab) }"
+        >
 
           <helpdiv message="catalog_items.helptext" />
 
           <!-- TOOLBAR -->
-          <div v-if="showTocTools" id="g3w-catalog-toc-layers-toolbar" style="margin: 2px;">
-            <change-map-themes-component
-              :key="project.state.gid"
-              :map_themes="project.state.map_themes"
-              @change-map-theme="changeMapTheme"
+          <div
+            v-if="showTocTools"
+            id="g3w-catalog-toc-layers-toolbar"
+            style="margin: 2px;"
+          >
+            <catalog-change-map-themes
+              :key              = "project.state.gid"
+              :map_themes       = "project.state.map_themes"
+              @change-map-theme = "changeMapTheme"
             />
           </div>
 
           <!-- LAYER TREES -->
           <ul
-            v-for="_layerstree in state.layerstrees"
-            :key="_layerstree.storeid"
-            class="tree-root root project-root"
+            v-for = "root in state.layerstrees"
+            :key  = "root.storeid"
+            class = "tree-root root project-root"
           >
-            <tristate-tree
-              v-for="layerstree in _layerstree.tree"
-              :key="layerstree.id"
-              :highlightlayers="state.highlightlayers"
-              :layerstree="layerstree"
-              class="item"
-              :parentFolder="false"
-              :root="true"
-              :legendplace="legend.place"
-              :parent_mutually_exclusive="false"
-              :storeid="_layerstree.storeid"
+            <catalog-tristate-tree
+              v-for                      = "tree in root.tree"
+              :key                       = "tree.id"
+              :highlightlayers           = "state.highlightlayers"
+              :layerstree                = "tree"
+              class                      = "item"
+              :parentFolder              = "false"
+              :root                      = "true"
+              :legendplace               = "state.legend.place"
+              :parent_mutually_exclusive = "false"
+              :storeid                   = "root.storeid"
             />
           </ul>
 
           <!-- EXTERNAL VECTOR LAYER -->
-          <ul v-if="state.external.vector.length" class="g3w-external_layers-group">
-            <tristate-tree
-              v-for="layerstree in state.external.vector"
-              :key="layerstree.id"
-              :externallayers="state.external.vector"
-              :layerstree="layerstree"
-              class="item"
+          <ul
+            v-if="state.external.vector.length"
+            class="g3w-external_layers-group"
+          >
+            <catalog-tristate-tree
+              v-for           = "vector in state.external.vector"
+              :key            = "vector.id"
+              :externallayers = "state.external.vector"
+              :layerstree     = "vector"
+              class           = "item"
             />
           </ul>
 
           <!-- GROUP OF LAYERS -->
-          <ul v-for="layersgroup in state.layersgroups">
-            <layers-group :layersgroup="layersgroup" />
+          <!-- ORIGINAL SOURCE: src/components/CatalogLayersGroup.vue@v3.9.3 -->
+          <ul
+            v-for="group in state.layersgroups"
+            class="g3w-catalog-layers-group"
+          >
+            <div>
+              <h4>{{ group.title }}</h4>
+              <catalog-tristate-tree
+                v-for       = "node in group.nodes"
+                :layerstree = "node"
+                class       = "item"
+              />
+            </div>
           </ul>
 
         </div>
 
         <!-- EXTERNAL WMS LAYER -->
-        <div v-if="state.external.wms.length" id="externalwms" role="tabpanel" class="tab-pane" :class="{ active: ('externalwms' === activeTab) }">
+        <div
+          v-if   = "state.external.wms.length"
+          id     = "externalwms"
+          role   = "tabpanel"
+          class  = "tab-pane"
+          :class = "{ active: ('externalwms' === activeTab) }"
+        >
           <ul class="g3w-external_wms_layers-group">
-            <tristate-tree
-              v-for="layerstree in state.external.wms"
-              :key="layerstree.id"
-              :externallayers="state.external.wms"
-              :layerstree="layerstree"
-              class="item"
+            <catalog-tristate-tree
+              v-for           = "wms in state.external.wms"
+              :key            = "wms.id"
+              :externallayers = "state.external.wms"
+              :layerstree     = "wms"
+              class           = "item"
             />
           </ul>
         </div>
 
         <!-- BASE LAYERS -->
-        <div v-if="hasBaseLayers" id="baselayers" role="tabpanel" class="tab-pane baselayers" :class="{ active: ('baselayers' === activeTab || !hasLayers) }">
+        <div
+          v-if   = "hasBaseLayers"
+          id     = "baselayers"
+          role   = "tabpanel"
+          class  = "tab-pane baselayers"
+          :class = "{ active: ('baselayers' === activeTab || !hasLayers) }"
+        >
           <ul
-            id="baselayers-content"
-            :class="{'mobile': isMobile()}"
-            :style="{ gridTemplateColumns: `repeat(auto-fill, minmax(${baselayers.length > 4 ? 80 : 120}px, 1fr))` }"
+            id     = "baselayers-content"
+            :class = "{'mobile': isMobile()}"
+            :style = "{ gridTemplateColumns: `repeat(auto-fill, minmax(${baselayers.length > 4 ? 80 : 120}px, 1fr))` }"
           >
             <li
-              v-if="!baselayer.fixed"
-              v-for="baselayer in baselayers"
-              :key="baselayer.title"
+              v-if  = "!base.fixed"
+              v-for = "base in baselayers"
+              :key  = "base.title"
             >
               <img
-                :src="getSrcBaseLayerImage(baselayer)"
-                @click.stop="setBaseLayer(baselayer.id)"
-                class="img-responsive img-thumbnail baselayer"
-                :style="{opacity: currentBaseLayer === baselayer.id ? 1 : 0.5}"
+                :src        = "getSrcBaseLayerImage(base)"
+                @click.stop = "setBaseLayer(base.id)"
+                class       = "img-responsive img-thumbnail baselayer"
+                :style      = "{ opacity: currentBaseLayer === base.id ? 1 : 0.5 }"
               >
-              <div class="baseselayer-text text-center g3w-long-text">{{ baselayer.title }}</div>
+              <div class="baseselayer-text text-center g3w-long-text">{{ base.title }}</div>
             </li>
             <li @click.stop="setBaseLayer(null)">
               <img
-                :src="getSrcBaseLayerImage(null)"
-                class="img-responsive img-thumbnail baselayer"
-                :style="{ opacity: currentBaseLayer === null ? 1 : 0.5 }"
+                :src   = "getSrcBaseLayerImage(null)"
+                class  = "img-responsive img-thumbnail baselayer"
+                :style = "{ opacity: currentBaseLayer === null ? 1 : 0.5 }"
               >
-              <div class="baseselayer-text text-center g3w-long-text" v-t="'nobaselayer'"></div>
+              <div
+                class="baseselayer-text text-center g3w-long-text"
+                v-t="'nobaselayer'">
+              </div>
             </li>
           </ul>
         </div>
 
-        <!-- TODO: add description -->
-        <layerslegend
-          v-if="'tab' === legend.place"
-          v-for="_layerstree in state.layerstrees"
-          :key="_layerstree.id"
-          :legend="legend"
-          :active="'legend' === activeTab"
-          :layerstree="_layerstree"
-          @showlegend="showLegend"
-        />
+        <!-- ORIGINAL SOURCE: src/components/CatalogLayersLegendItems.vue@v3.9.3 -->
+        <!-- ORIGINAL SOURCE: src/components/CatalogLayersLegend.vue@v3.9.3 -->
+        <div
+          v-if   = "'tab' === state.legend.place"
+          v-for  = "tree in state.layerstrees"
+          :key   = "tree.id"
+          role   = "tabpanel"
+          id     = "legend"
+          class  = "tab-pane"
+          :class = "{ active: 'legend' === activeTab }"
+        >
+          <div v-for="t in tree.tree" class="legend-item"> <!-- TODO: check if such nesting level really necessary.. -->
+            <figure v-for="url in t.legendurls">
+              <bar-loader :loading="url.loading" />
+              <img
+                v-show = "!url.loading && !url.error"
+                :src   = "url.url"
+                @error = "onLegendError(url)"
+                @load  = "onLegendLoad(url)"
+              />
+              <divider/>
+            </figure>
+          </div>
+        </div>
 
       </div>
 
@@ -148,17 +252,30 @@
 </template>
 
 <script>
-import { MAP_SETTINGS } from 'app/constant';
-import { CatalogEventBus as VM } from 'app/eventbus';
-import ChangeMapThemesComponent from 'components/CatalogChangeMapThemes.vue';
-import CatalogLayerContextMenu from 'components/CatalogLayerContextMenu.vue';
-import CatalogProjectContextMenu from 'components/CatalogProjectContextMenu.vue';
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import ApplicationService from 'services/application';
-import ControlsRegistry from 'store/map-controls';
-import GUI from 'services/gui';
 
-const DEFAULT_ACTIVE_TAB = 'layers';
+import { CatalogEventBus as VM }   from 'app/eventbus';
+import CatalogLayersStoresRegistry from 'store/catalog-layers';
+import ProjectsRegistry            from 'store/projects';
+import ControlsRegistry            from 'store/map-controls';
+import ApplicationService          from 'services/application';
+import GUI                         from 'services/gui';
+
+import CatalogChangeMapThemes      from 'components/CatalogChangeMapThemes.vue';
+import CatalogLayerContextMenu     from 'components/CatalogLayerContextMenu.vue';
+import CatalogProjectContextMenu   from 'components/CatalogProjectContextMenu.vue';
+import CatalogTristateTree         from 'components/CatalogTristateTree.vue';
+
+/**
+ * Stringify a query URL param (eg. `&WIDTH=700`)
+ *
+ * @param name
+ * @param value
+ *
+ * @returns { string | null } a string if value is set or null
+ */
+ function __(name, value) {
+  return (value || 0 === value) ? `${name}${value}` : null;
+}
 
 export default {
 
@@ -166,21 +283,20 @@ export default {
   name: 'catalog',
 
   data() {
-    this.$options.legend.place = ApplicationService.getCurrentProject().getLegendPosition() || 'tab';
     return {
-      state:            null,
-      legend:           this.$options.legend,
+      state:            this.$options.service.state || {},
       showlegend:       false,
       currentBaseLayer: null,
-      activeTab:        null,
+      activeTab:        'layers',
       loading:          false,
     }
   },
 
   components: {
-    ChangeMapThemesComponent,
+    CatalogChangeMapThemes,
     CatalogLayerContextMenu,
     CatalogProjectContextMenu,
+    CatalogTristateTree,
   },
 
   computed: {
@@ -193,7 +309,7 @@ export default {
     },
 
     project() {
-      return this.state.prstate.currentProject
+      return ProjectsRegistry.state.currentProject
     },
 
     title() {
@@ -218,6 +334,172 @@ export default {
 
   methods: {
 
+    onLegendError(legendurl) {
+      legendurl.error = true;
+      legendurl.loading = false;
+    },
+
+    onLegendLoad(legendurl) {
+      legendurl.loading = false;
+    },
+
+    /**
+     * Get legend src for visible layers
+     *
+     * @returns {Promise<void>}
+     */
+    getLegendSrc(change = false) {
+      // skip if not active
+      if ('tab' !== this.state.legend.place) {
+        return;
+      }
+
+      this.state.layerstrees.forEach(t => {
+        let layers = this._traverseVisibleLayers(t.tree);
+        this.showlegend = this.showlegend || layers.length > 0;
+        t.tree.forEach(async tree => {
+          try {
+            if (
+              change && (
+                (tree.legendurls && 0 === tree.legendurls.length) ||
+                layers.some(l => l.legend.change) ||
+                ProjectsRegistry.getCurrentProject().getContextBaseLegend()
+              )
+            ) {
+              layers.filter(l => l.legend.change).forEach(l => l.legend.change = false);
+            }
+            tree.legendurls = await this._getLegendSrc(layers);
+          } catch (e) {
+            console.warn(e);
+          }
+        });
+      });
+    },
+
+    _traverseVisibleLayers(obj, _layers = []) {
+      for (const layer of obj) {
+        if (null !== layer.id && undefined !== layer.id && layer.visible && layer.geolayer && !layer.exclude_from_legend) {
+          _layers.push(layer);
+        }
+        if (null !== layer.nodes && undefined !== layer.nodes) {
+          _layers = _layers.concat(this._traverseVisibleLayers(layer.nodes, _layers));
+        }
+      }
+      return _layers;
+    },
+
+    /**
+     * Get legend src for visible layers
+     *
+     * @returns {Promise<void>}
+     */
+    async _getLegendSrc(visiblelayers) {
+
+      // reset layers url
+      const legendurls = [];
+
+      // filter geolayer
+      const layers = visiblelayers.filter(l => l.geolayer);
+
+      const http = { GET: {}, POST: {} };
+
+      layers.forEach(layer => {
+        const name         = http[(layer.source && layer.source.url) || layer.external ? 'GET' : layer.ows_method];
+        const catalogLayer = CatalogLayersStoresRegistry.getLayerById(layer.id);
+
+        const url          = catalogLayer ? catalogLayer.getLegendUrl(this.state.legend.config, {
+          all:        !ProjectsRegistry.getCurrentProject().getContextBaseLegend(), // true = dynamic legend
+          format:     'image/png',
+          categories: layer.categories
+        }) : undefined;
+
+
+        // no url is set
+        if (undefined === catalogLayer) {
+          return;
+        }
+
+        if (layer.source && layer.source.url) {
+          name[url] = [];
+          return
+        }
+
+        // extract LEGEND_ON and LEGEND_OFF from prefix -> (in case of legend categories)
+        let prefix = url.split('LAYER=')[0].split('LEGEND_ON=')[0].split('LEGEND_OFF=')[0];
+
+        if (!name[prefix]) {
+          name[prefix] = [];
+        }
+
+        name[prefix].unshift({
+          layerName:  url.split('LAYER=')[1],
+          style:      (Array.isArray(layer.styles) && layer.styles.find(style => style.current) || ({ name: false })).name,
+          legend_on:  (url.split('LAYER=')[0].split('LEGEND_ON=')[1] || '').replace('&', ''),                         // remove eventually &
+          legend_off: (url.split('LAYER=')[0].split('LEGEND_ON=')[0].split('LEGEND_OFF=')[1] || '').replace('&', ''), // remove eventually &
+        });
+      });
+
+      for (const method in http) {
+        for (const url in http[method]) {
+          const obj = {
+            loading: true,
+            url: null,
+            error: false
+          };
+
+          legendurls.push(obj);
+
+          const params = {
+            LAYERS:[],
+            STYLES:[],
+            LEGEND_ON:[],
+            LEGEND_OFF:[]
+          };
+
+          (http[method][url] || []).reduce((_, layer) => {
+              params.LAYERS.push(layer.layerName);
+              params.STYLES.push(layer.style);
+              if (layer.legend_on)  { params.LEGEND_ON.push(layer.legend_on); }
+              if (layer.legend_off) { params.LEGEND_OFF.push(layer.legend_off); }
+              return params;
+            }, params);
+
+          let url_params = [
+            __('LAYERS=',     params.LAYERS.join(',')),
+            __('STYLES=',     params.STYLES.join(',')),
+            __('LEGEND_ON=',  params.LEGEND_ON.join(',')),
+            __('LEGEND_OFF=', params.LEGEND_OFF.join(',')),
+            __('filtertoken=', ApplicationService.getFilterToken()),
+          ]
+          .filter(p => p) // discard nullish parameters (without a value)
+          .join('&');
+
+          try {
+            obj.url = 'GET' === method
+              ? url + (http[method][url].length ? url_params : '')
+              : URL.createObjectURL(await (await fetch(url.split('?')[0], {
+                  method:  'POST',
+                  headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+                  // send encoded params
+                  body: // new URLSearchParams(url.split('?')[1])
+                    url
+                      .split('?')[1]
+                      .split('&')
+                      .filter(p => p.split('=')[0]).map(p => `${p.split('=')[0]}=${encodeURIComponent(p.split('=')[1])}`)
+                      .join('&')
+                      + '&' + url_params
+                })).blob());
+          } catch (e) {
+            console.warn(e);
+          }
+
+          obj.loading = false;
+        }
+      }
+
+    return legendurls;
+    },
+
     /**
      * Change view
      *
@@ -226,8 +508,17 @@ export default {
     async changeMapTheme(map_theme) {
       GUI.closeContent();
 
+      // change map theme
+      ApplicationService.changeProjectView(true);
+      this.state.layerstrees[0].checked = true;
+      const changes = (await ProjectsRegistry.getCurrentProject().setLayersTreePropertiesFromMapTheme({
+        map_theme,
+        rootNode:   this.state.layerstrees[0],
+        layerstree: this.state.layerstrees[0].tree[0].nodes
+      })).layers;
+      ApplicationService.changeProjectView(false);
+
       // get all layers with styles
-      const changes = (await this.$options.service.changeMapTheme(map_theme)).layers;
       const layers  = Object.keys(changes).filter(id => changes[id].style);
       const styles  = (await this.project.getMapThemeFromThemeName(map_theme)).styles;
 
@@ -245,12 +536,10 @@ export default {
 
     },
 
-    delegationClickEventTab(evt) {
-     this.activeTab = evt.target.attributes['aria-controls'] ? evt.target.attributes['aria-controls'].value : this.activeTab;
-    },
-
-    showLegend(bool) {
-      this.showlegend = bool;
+    onTabClick(e) {
+      if (e.target.attributes['aria-controls']) {
+        this.activeTab = e.target.attributes['aria-controls'].value;
+      }
     },
 
     setBaseLayer(id) {
@@ -260,27 +549,14 @@ export default {
     },
 
     getSrcBaseLayerImage(baseLayer) {
-      let image;
-      let customimage = false;
+      let image = 'nobaselayer.png';
       switch (baseLayer && baseLayer.servertype || baseLayer) {
-        case 'OSM':
-          image = 'osm.png';
-          break;
-        case 'Bing':
-          const subtype = baseLayer.source.subtype;
-          image = `bing${subtype}.png`;
-          break;
-        case 'TMS':
-        case 'WMTS':
-          if (baseLayer.icon) {
-            customimage = true;
-            image = baseLayer.icon;
-            break;
-          }
-        default:
-          image = 'nobaselayer.png';
+        case 'OSM':  image = 'osm.png';                                    break;
+        case 'Bing': image = `bing${baseLayer.source.subtype}.png`;        break;
+        case 'TMS':  image = baseLayer.icon ? baseLayer.icon : undefined;  break;
+        case 'WMTS': image = baseLayer.icon ? baseLayer.icon : undefined;  break;
       }
-      return customimage ? image : `${GUI.getResourcesUrl()}images/${image}`;
+      return (baseLayer || {}).icon ? image : `${GUI.getResourcesUrl()}images/${image}`;
     },
 
     /**
@@ -358,8 +634,10 @@ export default {
      */
     onRegisterControl(id, control) {
       if ('querybbox' === id) {
-        control.getInteraction().on('propertychange', evt => {
-          if ('active' === evt.key) this.state.highlightlayers = !evt.oldValue;
+        control.getInteraction().on('propertychange', e => {
+          if ('active' === e.key) {
+            this.state.highlightlayers = !e.oldValue;
+          }
         })
       }
     },
@@ -369,17 +647,17 @@ export default {
   watch: {
 
     /**
-     * Listen external wms change. If remove all layer nee to set active the project or default tab
+     * Listen external wms change. If remove all layer need to set active the project or default tab
      */
     'state.external.wms'(newlayers, oldlayers) {
       if (oldlayers && 0 === newlayers.length) {
-        this.activeTab = this.project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
+        this.activeTab = this.project.state.catalog_tab || 'layers';
       }
     },
 
-    'state.prstate.currentProject': {
+    project: {
       async handler(project, oldproject) {
-        const activeTab = project.state.catalog_tab || DEFAULT_ACTIVE_TAB;
+        const activeTab = project.state.catalog_tab || 'layers';
         this.loading = 'baselayers' === activeTab;
         await this.$nextTick();
         setTimeout(() => {
@@ -390,6 +668,12 @@ export default {
       immediate: false
     },
 
+    activeTab(tab) {
+      if ('legend' === tab) {
+        this.getLegendSrc(true);
+      }
+    },
+
   },
 
   /**
@@ -401,19 +685,39 @@ export default {
    * @listens ControlsRegistry~registerControl
    */
   created() {
-    this.layerpositions = MAP_SETTINGS.LAYER_POSITIONS.getPositions();
-
-    VM.$on('unselectionlayer',         this.onUnSelectionLayer);
-    VM.$on('activefiltertokenlayer',   this.onActiveFilterTokenLayer);
-    VM.$on('treenodevisible',          this.onTreeNodeVisible);
-    VM.$on('treenodeselected',         this.onTreeNodeSelected);
-    VM.$on('treenodeexternalselected', this.onTreeNodeExternalSelected);
-    ControlsRegistry.onafter('registerControl',     this.onRegisterControl);
+    VM.$on('unselectionlayer',                  this.onUnSelectionLayer);
+    VM.$on('activefiltertokenlayer',            this.onActiveFilterTokenLayer);
+    VM.$on('treenodevisible',                   this.onTreeNodeVisible);
+    VM.$on('treenodeselected',                  this.onTreeNodeSelected);
+    VM.$on('treenodeexternalselected',          this.onTreeNodeExternalSelected);
+    VM.$on('layer-change-style',                this.getLegendSrc);
+    ControlsRegistry.onafter('registerControl', this.onRegisterControl);
   },
 
   beforeMount() {
     this.currentBaseLayer = this.project.state.initbaselayer;
   },
 
+  async mounted() {
+    await this.$nextTick();
+    // in case of dynamic legend
+    if (ProjectsRegistry.getCurrentProject().getContextBaseLegend()) {
+      GUI.getService('map').on('change-map-legend-params', () => { this.getLegendSrc(); });
+    } else {
+      this.getLegendSrc();
+    }
+  },
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.g3w-catalog-layers-group > div {
+  border: 1px solid #ffffff33;
+  margin: 5px;
+}
+.g3w-catalog-layers-group > div > h4 {
+  margin: 5px;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/CatalogChangeMapThemes.vue b/src/components/CatalogChangeMapThemes.vue
index c8438c132..62e74f83f 100644
--- a/src/components/CatalogChangeMapThemes.vue
+++ b/src/components/CatalogChangeMapThemes.vue
@@ -35,7 +35,7 @@
   import ProjectsRegistry from 'store/projects';
 
   export default {
-    name: "changemapthemes",
+    name: "catalog-change-map-themes",
     data(){
       const collapsed = ProjectsRegistry.getCurrentProject().state.toc_themes_init_status === 'collapsed';
       const current_map_theme = this.map_themes.find(map_theme => map_theme.default);
diff --git a/src/components/CatalogLayerContextMenu.vue b/src/components/CatalogLayerContextMenu.vue
index 85c5cfbcc..4630921ee 100644
--- a/src/components/CatalogLayerContextMenu.vue
+++ b/src/components/CatalogLayerContextMenu.vue
@@ -552,26 +552,22 @@
 <script>
   import { Chrome as ChromeComponent } from 'vue-color';
 
-  import LayerOpacityPicker from "components/LayerOpacityPicker.vue";
+  import LayerOpacityPicker          from 'components/LayerOpacityPicker.vue';
 
-  import { CatalogEventBus as VM } from 'app/eventbus';
+  import { CatalogEventBus as VM }   from 'app/eventbus';
   import CatalogLayersStoresRegistry from 'store/catalog-layers';
-  import ApplicationService from 'services/application';
-  import GUI from 'services/gui';
+  import ApplicationService          from 'services/application';
+  import GUI                         from 'services/gui';
+  import Table                       from 'components/Table.vue';
+  import { downloadFile }            from 'utils/downloadFile';
 
-  const { t }             = require('core/i18n/i18n.service');
-  const shpwrite          = require('shp-write');
-  const TableComponent    = require('gui/table/vue/table');
-  const { downloadFile }  = require('utils');
+  const { t }                        = require('core/i18n/i18n.service');
+  const shpwrite                     = require('shp-write');
 
-
-  const OFFSETMENU = {
-    top: 50,
-    left: 15
-  };
+  const OFFSETMENU  = { top: 50, left: 15 };
 
   export default {
-    name: 'Cataloglayermenu',
+    name: 'catalog-layer-context-menu',
 
     props: {
       external: {
@@ -967,17 +963,14 @@
       showAttributeTable(layerId) {
         this.layerMenu.loading.data_table = false;
         GUI.closeContent();
-        const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
         this.layerMenu.loading.data_table = true;
-        const tableContent = new TableComponent({ layer, formatter: 1 });
-        tableContent.on('show', () => {
-          if (this.isMobile()) {
-            GUI.hideSidebar();
+        new (Vue.extend(Table))({
+          layerId,
+          onShow: () => {
+            this.layerMenu.loading.data_table = false;
+            this._hideMenu();
           }
-          this.layerMenu.loading.data_table = false;
-          this._hideMenu();
         });
-        tableContent.show({ title: layer.getName() });
       },
 
       startEditing() {
diff --git a/src/components/CatalogLayerLegend.vue b/src/components/CatalogLayerLegend.vue
index 5f30a5a1a..84a0ad65a 100644
--- a/src/components/CatalogLayerLegend.vue
+++ b/src/components/CatalogLayerLegend.vue
@@ -20,8 +20,10 @@
       <img :src="getWmsSourceLayerLegendUrl()" >
     </figure>
 
-    <figure v-else v-disabled="loading">
-
+    <figure
+      v-else
+      v-disabled="loading"
+    >
       <bar-loader :loading="loading"/>
 
       <div v-for="(category, index) in categories"
@@ -65,15 +67,15 @@
 </template>
 
 <script>
-  import GUI from 'services/gui';
-  import { CatalogEventBus as VM } from 'app/eventbus';
+  import GUI                         from 'services/gui';
+  import { CatalogEventBus as VM }   from 'app/eventbus';
   import CatalogLayersStoresRegistry from 'store/catalog-layers';
-  import ProjectsRegistry from 'store/projects';
-  import ClickMixin from 'mixins/click';
+  import ProjectsRegistry            from 'store/projects';
+  import ClickMixin                  from 'mixins/click';
 
 
   export default {
-    name: "layerlegend",
+    name: "catalog-layer-legend",
     props: {
       legendplace: {
         type: String
@@ -371,8 +373,8 @@
       /**
        * @FIXME the following comment seems wrong (isn't `this.dynamic` a `boolean` variable?)
        *
-       * Store legend url icons based on current style of layer.
-       * It use to cache all symbol of a style without get a new request to server
+       * Store legend url icons based on the current style of layer.
+       * It uses to cache all symbols of a style without get a new request to server
        *
        * @type {{}}
        */
@@ -380,7 +382,7 @@
 
       this.mapReady = false;
 
-      // listen layer change style event
+      // listen to layer change style event
       VM.$on('layer-change-style', this.onChangeLayerLegendStyle);
 
       // Get all legend graphics of a layer when start
diff --git a/src/components/CatalogLayersGroup.vue b/src/components/CatalogLayersGroup.vue
deleted file mode 100644
index 54efe8b05..000000000
--- a/src/components/CatalogLayersGroup.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <div style="border: 1px solid #ffffff33; margin: 5px">
-    <h4 style="margin: 5px; font-weight: bold">{{ layersgroup.title }}</h4>
-    <tristate-tree
-      v-for="node in layersgroup.nodes"  
-      :layerstree="node"
-      class="item"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-
-  /** @since 3.8.6 */
-  name: 'catalog-layers-group',
-
-  props: {
-    layersgroup: {
-      type: Object
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/src/components/CatalogLayersLegend.vue b/src/components/CatalogLayersLegend.vue
deleted file mode 100644
index 499e0da0a..000000000
--- a/src/components/CatalogLayersLegend.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-
-  <div
-    role="tabpanel"
-    id="legend"
-    class="tab-pane"
-    :class="{active:active}"
-  >
-
-    <layerslegend-items
-      :active="active"
-      :legend="legend"
-      :layers="visiblelayers"
-    />
-
-  </div>
-
-</template>
-
-<script>
-export default {
-  
-  /** @since 3.8.6 */
-  name: 'catalog-layers-legend',
-  
-  props: [
-    'layerstree',
-    'legend',
-    'active'
-  ],
-  data() {
-    return {}
-  },
-  computed: {
-    visiblelayers() {
-      let _visiblelayers = [];
-      let traverse = obj => {
-        for (const layer of obj) {
-          if (!_.isNil(layer.id) && layer.visible && layer.geolayer && !layer.exclude_from_legend) {
-            _visiblelayers.push(layer);
-          }
-          if (!_.isNil(layer.nodes)) {
-            traverse(layer.nodes);
-          }
-        }
-      };
-      traverse(this.layerstree.tree);
-      return _visiblelayers;
-    }
-  },
-  watch: {
-    'layerstree': {
-      handler(val, old) {},
-      deep: true
-    },
-    'visiblelayers'(visibleLayers) {
-      this.$emit('showlegend', visibleLayers.length > 0);
-    }
-  },
-  created() {
-    this.$emit('showlegend', this.visiblelayers.length > 0);
-  }
-};
-</script>
\ No newline at end of file
diff --git a/src/components/CatalogLayersLegendItems.vue b/src/components/CatalogLayersLegendItems.vue
deleted file mode 100644
index 3aa807e13..000000000
--- a/src/components/CatalogLayersLegendItems.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <div class="legend-item">
-
-    <figure v-for="legendurl in legendurls">
-        <bar-loader
-          :loading="legendurl.loading"
-        />
-
-        <img
-          v-show="!legendurl.loading && !legendurl.error"
-          :src="legendurl.url"
-          @error="setError(legendurl)"
-          @load="urlLoaded(legendurl)"
-        >
-
-        <span class="divider"></span>
-
-      </figure>
-
-  </div>
-</template>
-
-<script>
-import { CatalogEventBus as VM } from 'app/eventbus';
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import ApplicationService from 'services/application';
-import ProjectsRegistry from 'store/projects';
-import GUI from 'services/gui';
-
-export default {
-
-  /** @since 3.8.6 */
-  name: 'catalog-layers-legend-items',
-
-  props: {
-    layers: {
-      default: []
-    },
-    legend: {
-      type: Object
-    },
-    active: {
-      default: true
-    }
-  },
-  data() {
-    return {
-      legendurls: []
-    }
-  },
-  watch: {
-
-    /**
-     * It changes when change layer visibility
-     */
-    layers: {
-      handler() {
-        this.getLegendSrc();
-      },
-      immediate: false
-    },
-
-    async active(bool) {
-      if (bool) {
-        const changeLayersLegend = this.layers.filter(layer => layer.legend.change);
-        if (this.legendurls.length === 0 || this.dynamic || changeLayersLegend.length) {
-          await this.getLegendSrc(this.layers);
-          changeLayersLegend.forEach(layer => layer.legend.change = false);
-        }
-      }
-    }
-
-  },
-  methods: {
-
-    setError(legendurl) {
-      legendurl.error = true;
-      legendurl.loading = false;
-    },
-
-    urlLoaded(legendurl) {
-      legendurl.loading = false;
-    },
-
-    /**
-     * @param   {object} params    same as `src/core/layers/legend/wmslegend.js` params
-     * @param   {object} layer     layer config
-     * @returns {string|undefined} legend url of a layer (undefined if `layer.id` is not in CatalogRegistry)
-     */
-    getLegendUrl(layer, params={}) {
-      const catalogLayer = CatalogLayersStoresRegistry.getLayerById(layer.id);
-      if (catalogLayer) {
-          return catalogLayer.getLegendUrl(params, {
-            all: !this.dynamic, // set true or false based on legend is dynamic or not
-            format: 'image/png',
-            categories: layer.categories
-          });
-      }
-    },
-
-    /**
-     * Build params string url to add to base url legend
-     * 
-     * @since v3.8
-     */
-    getLegendUrlParams(urlLayerName=[]){
-      let paramsUrl = '';
-      const params = {
-        LAYERS:[],
-        STYLES:[],
-        LEGEND_ON:[],
-        LEGEND_OFF:[]
-      };
-
-      urlLayerName
-        .reduce((_, layer) => {
-          params.LAYERS.push(layer.layerName);
-          params.STYLES.push(layer.style);
-          if (layer.legend_on) {
-            params.LEGEND_ON.push(layer.legend_on);
-          }
-          if (layer.legend_off) {
-            params.LEGEND_OFF.push(layer.legend_off);
-          }
-          return params;
-        }, params);
-
-      paramsUrl += `LAYERS=${encodeURIComponent(params.LAYERS.join(','))}`;
-      paramsUrl += `&STYLES=${encodeURIComponent(params.STYLES.join(','))}`;
-
-      // Add LEGEND_ON parameter
-      if (params.LEGEND_ON.length) {
-        paramsUrl += `&LEGEND_ON=${encodeURIComponent(params.LEGEND_ON.join(','))}`;
-      }
-
-      // Add LEGEND_OFF parameter
-      if (params.LEGEND_OFF.length) {
-        paramsUrl += `&LEGEND_OFF=${encodeURIComponent(params.LEGEND_OFF.join(','))}`;
-      }
-
-      if (ApplicationService.getFilterToken()) {
-        paramsUrl += `&filtertoken=${ApplicationService.getFilterToken()}`;
-      }
-
-      return paramsUrl;
-    },
-
-    /**
-     * Get legend src for visible layers
-     * 
-     * @returns {Promise<void>}
-     */
-    async getLegendSrc() {
-
-      // reset layers url
-      this.legendurls = [];
-
-      await this.$nextTick();
-
-      // skip if not active
-      if (!this.active) {
-        return
-      }
-
-      const urlMethodsLayersName = {
-        GET: {},
-        POST: {}
-      };
-      const self = this;
-
-      // filter geolayer
-      const layers = this.layers.filter(layer => layer.geolayer);
-
-      for (let i=0; i < layers.length; i++) {
-        const layer = layers[i];
-        const style = Array.isArray(layer.styles) && layer.styles.find(style => style.current);
-        const urlLayersName =
-          (layer.source && layer.source.url) || layer.external
-            ? urlMethodsLayersName.GET
-            : urlMethodsLayersName[layer.ows_method];
-
-        const url = `${this.getLegendUrl(layer, this.legend.config)}`;
-        // in case of no url is get
-        if ("undefined" === typeof url){
-          continue;
-        }
-        if (layer.source && layer.source.url) {
-          urlLayersName[url] = [];
-        } else {
-          let prefix, legend_on, legend_off;
-
-          // extract LAYER from url
-          [prefix, layerName] = url.split('LAYER=');
-
-          // extract LEGEND_ON and LEGEND_OFF from prefix -> (in case of legend categories)
-          [prefix, legend_on] = prefix.split('LEGEND_ON=');
-          [prefix, legend_off] = prefix.split('LEGEND_OFF=');
-
-          if (!urlLayersName[prefix]) {
-            urlLayersName[prefix] = [];
-          }
-
-          urlLayersName[prefix].unshift({
-            layerName,
-            style: style && style.name,
-            legend_on:  (legend_on || '').replace('&', ''), // remove eventually &
-            legend_off: (legend_off || '').replace('&', ''),// remove eventually &
-          });
-        }
-
-      }
-      for (const method in urlMethodsLayersName) {
-        const urlLayersName = urlMethodsLayersName[method];
-        if ('GET' === method) {
-          for (let url in urlLayersName ) {
-            if (urlLayersName[url].length) {
-              url+=`${this.getLegendUrlParams(urlLayersName[url])}`;
-            }
-            this.legendurls.push({
-              loading: true,
-              error: false,
-              url
-            })
-          }
-        }
-        else {
-          for (const url in urlLayersName ) {
-            const xhr = new XMLHttpRequest();
-            const econdedParams = [];
-            let [_url, params] = url.split('?');
-
-            params = params.split('&');
-
-            params.forEach(param => {
-              const [key, value] = param.split('=');
-              if (key) {
-                econdedParams.push(`${key}=${encodeURIComponent(value)}`);
-              }
-            });
-
-            params = `${econdedParams.join('&')}&${this.getLegendUrlParams(urlLayersName[url])}`;
-
-            const legendUrlObject = {
-              loading: true,
-              url: null,
-              error: false
-            };
-
-            xhr.open('POST', _url);
-            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
-            xhr.responseType = 'blob';
-
-            self.legendurls.push(legendUrlObject);
-
-            xhr.onload = function() {
-              if (undefined !== this.response) {
-                legendUrlObject.url = window.URL.createObjectURL(this.response);
-              }
-              legendUrlObject.loading = false;
-            };
-
-            xhr.onerror = function() {
-              legendUrlObject.loading = false;
-            };
-
-            xhr.send(params);
-
-          }
-        }
-      }
-    }
-  },
-
-  created() {
-    /**
-     * check if has a dynamic legend
-     */
-    this.dynamic = ProjectsRegistry.getCurrentProject().getContextBaseLegend();
-    this.mapReady = false;
-    /**
-     * listen when layer has changed style
-     */
-    VM.$on('layer-change-style', (options={}) => {
-      this.getLegendSrc();
-    });
-  },
-
-  async mounted() {
-
-    await this.$nextTick();
-
-    // in case of dynamic legend
-    if (this.dynamic) {
-      GUI.getService('map').on('change-map-legend-params', ()=>{
-        this.mapReady = true;
-        this.getLegendSrc();
-      });
-    } else {
-      this.mapReady = true;
-    }
-
-  },
-
-};
-</script>
\ No newline at end of file
diff --git a/src/components/CatalogProjectContextMenu.vue b/src/components/CatalogProjectContextMenu.vue
index 4bb07dc90..922d8ffaf 100644
--- a/src/components/CatalogProjectContextMenu.vue
+++ b/src/components/CatalogProjectContextMenu.vue
@@ -53,7 +53,7 @@
   // };
 
   export default {
-    name: 'CatalogProjectmenu',
+    name: 'catalog-project-context-menu',
 
     props: {
       external: {
diff --git a/src/components/CatalogTristateTree.vue b/src/components/CatalogTristateTree.vue
index 102845c37..c8812f35d 100644
--- a/src/components/CatalogTristateTree.vue
+++ b/src/components/CatalogTristateTree.vue
@@ -6,13 +6,13 @@
 <template>
 
   <li
-    class="tree-item"
-    @contextmenu.prevent.stop="showContextMenu"
-    @click.stop="onTreeItemClick"
+    class                     = "tree-item"
+    @contextmenu.prevent.stop = "showContextMenu"
+    @click.stop               = "onTreeItemClick"
     :style="{
       marginLeft: !isGroup ? '5px' : '0'
     }"
-    :class="{
+    :class                    = "{
       selected: !isGroup || !isTable ? layerstree.selected : false,
       itemmarginbottom: !isGroup,
       disabled: isInGrey,
@@ -21,30 +21,30 @@
   >
     <!-- GROUP LAYER -->
     <span
-      v-if="isGroup"
-      style="padding-right: 2px;"
-      :class="[
+      v-if        = "isGroup"
+      style       = "padding-right: 2px;"
+      :class      = "[
         { bold : isGroup },
         g3wtemplate.getFontClass(layerstree.expanded ? 'caret-down' : 'caret-right')
       ]"
-      @click.stop="expandCollapse"
-      class="root collapse-expande-collapse-icon"
+      @click.stop = "expandCollapse"
+      class       = "root collapse-expande-collapse-icon"
     ></span>
 
     <!-- GROUP LAYER -->
     <span
-      v-if="isGroup"
-      @click.stop="toggle()"
-      style="color: #ffffff"
-      :class="[triClass()]"
+      v-if        = "isGroup"
+      @click.stop = "toggle()"
+      style       = "color: #ffffff"
+      :class      = "[triClass()]"
     ></span>
 
     <!-- TABLE LAYER -->
     <span
-      v-else-if="isTable"
-      v-show="!layerstree.hidden"
-      style="padding-left: 18px"
-      :class="[
+      v-else-if = "isTable"
+      v-show    = "!layerstree.hidden"
+      style     = "padding-left: 18px"
+      :class    = "[
         parentFolder ? 'child' : 'root',
         g3wtemplate.getFontClass('table')
       ]"
@@ -54,36 +54,36 @@
 
       <!-- EXTERNAL LAYER (REMOVABLE NODE) -->
       <span
-        v-if="layerstree.external && layerstree.removable"
-        style="color: red; padding-left: 1px;"
-        :class="g3wtemplate.getFontClass('trash')"
-        @click.stop="removeExternalLayer(layerstree.name, layerstree._type)"
+        v-if        = "layerstree.external && layerstree.removable"
+        style       = "color: red; padding-left: 1px;"
+        :class      = "g3wtemplate.getFontClass('trash')"
+        @click.stop = "removeExternalLayer(layerstree.name, layerstree._type)"
       ></span>
 
       <!-- EXTERNAL LAYER (DOWNLOADABLE NODE) -->
       <span
-        v-if="layerstree.external && layerstree.download"
-        style="color: #ffffff; margin-left: 5px;"
-        :class="g3wtemplate.getFontClass('download')"
-        @click="downloadExternalLayer(layerstree.download)"
+        v-if   = "layerstree.external && layerstree.download"
+        style  = "color: #ffffff; margin-left: 5px;"
+        :class = "g3wtemplate.getFontClass('download')"
+        @click = "downloadExternalLayer(layerstree.download)"
       ></span>
 
       <!-- HIDDEN NODE (LAYER) -->
       <span
-        v-show="!layerstree.hidden"
-        class="checkbox-layer"
-        :class="parentFolder ? 'child' : 'root'"
+        v-show = "!layerstree.hidden"
+        class  = "checkbox-layer"
+        :class = "parentFolder ? 'child' : 'root'"
       >
         <span
-          v-if="'toc' === legendlayerposition || !isGroup && layerstree.categories"
-          @click.self.stop="expandCollapse"
-          class="collapse-expande-collapse-icon"
-          :class="g3wtemplate.getFontClass(layerstree.visible && layerstree.expanded ? 'caret-down' : 'caret-right')"
+          v-if             = "'toc' === legendlayerposition || !isGroup && layerstree.categories"
+          @click.self.stop = "expandCollapse"
+          class            = "collapse-expande-collapse-icon"
+          :class           = "g3wtemplate.getFontClass(layerstree.visible && layerstree.expanded ? 'caret-down' : 'caret-right')"
         ></span>
 
         <span
-          @click.stop="toggle()"
-          :style="{
+          @click.stop = "toggle()"
+          :style      = "{
             paddingLeft: ('toc' === legendlayerposition)
               ? '5px'
               : !isGroup && layerstree.categories
@@ -92,7 +92,7 @@
                   ? '1px'
                   : '18px'
           }"
-          :class="[
+          :class      = "[
             g3wtemplate.getFontClass(layerstree.checked ? 'check': 'uncheck'),
             { 'toc-added-external-layer': (!layerstree.legend && layerstree.external) }
           ]"
@@ -104,15 +104,14 @@
 
     <!-- VISIBLE NODE (LAYER or GROUP) -->
     <div
-      v-show="!layerstree.hidden || isGroup"
-      class="tree-node-title"
-      :class="{
+      v-show = "!layerstree.hidden || isGroup"
+      class  = "tree-node-title"
+      :class = "{
         disabled: !layerstree.external && (layerstree.disabled || (layerstree.id && !layerstree.visible)),
         bold: isGroup
       }"
     >
 
-
       <span
         :class           = "{
           highlightlayer: isHighLight,
@@ -191,32 +190,32 @@
     </div>
 
     <!-- NODE LEGEND (LAYER) -->
-    <layerlegend
-      v-if="showLayerTocLegend"
-      :legendplace="legendplace"
-      :layer="layerstree"
+    <catalog-layer-legend
+      v-if         = "showLayerTocLegend"
+      :legendplace = "legendplace"
+      :layer       = "layerstree"
     />
 
     <!-- CHILD NODES (GROUP) -->
     <ul
-      v-if="isGroup"
-      class="tree-content-items group"
-      :class="[`g3w-lendplace-${legendplace}`]"
-      v-show="layerstree.expanded"
+      v-if   = "isGroup"
+      class  = "tree-content-items group"
+      :class = "[`g3w-lendplace-${legendplace}`]"
+      v-show ="layerstree.expanded"
     >
 
       <span v-for="_layerstree in layerstree.nodes" :key="_layerstree.id || _layerstree.groupId">
 
-        <tristate-tree
-          :root="false"
-          :legendConfig="legend"
-          :legendplace="legendplace"
-          :highlightlayers="highlightlayers"
-          :parentFolder="isGroup"
-          :layerstree="_layerstree"
-          :storeid="storeid"
-          :parent="layerstree"
-          :parent_mutually_exclusive="!!layerstree.mutually_exclusive"
+        <catalog-tristate-tree
+          :root                      = "false"
+          :legendConfig              = "legend"
+          :legendplace               = "legendplace"
+          :highlightlayers           = "highlightlayers"
+          :parentFolder              = "isGroup"
+          :layerstree                = "_layerstree"
+          :storeid                   = "storeid"
+          :parent                    = "layerstree"
+          :parent_mutually_exclusive = "!!layerstree.mutually_exclusive"
         />
 
       </span>
@@ -227,11 +226,11 @@
 </template>
 
 <script>
-import LayerLegend                 from 'components/CatalogLayerLegend.vue';
 import { CatalogEventBus as VM }   from 'app/eventbus';
 import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import ClickMixin                  from 'mixins/click';
 import GUI                         from 'services/gui';
+import ClickMixin                  from 'mixins/click';
+import CatalogLayerLegend          from 'components/CatalogLayerLegend.vue';
 
 const { downloadFile } = require('utils');
 
@@ -264,7 +263,7 @@ export default {
   ],
 
   components: {
-    'layerlegend': LayerLegend
+    CatalogLayerLegend
   },
 
   mixins: [ClickMixin],
diff --git a/src/components/ChangeMapMenu.vue b/src/components/ChangeMapMenu.vue
index 97f624b12..420cdc7be 100644
--- a/src/components/ChangeMapMenu.vue
+++ b/src/components/ChangeMapMenu.vue
@@ -8,17 +8,17 @@
     <!-- current node is a child -->
     <template v-if="'root' !== this.current">
       <div
-        style="
+        style = "
           display: flex;
           align-items: center;
           color: #ffffff"
-        class="skin-background-color"
+        class = "skin-background-color"
       >
         <span
-          v-t-tooltip:bottom.create="'change_session'"
-          v-disabled="loading"
-          @click.stop="back"
-          style="
+          v-t-tooltip:bottom.create = "'change_session'"
+          v-disabled                = "loading"
+          @click.stop               = "back"
+          style                     = "
             font-size: 2em;
             margin: 5px;
             cursor: pointer;
@@ -28,14 +28,14 @@
           "
         >
           <i
-            style="color: #FFFFFF"
-            :class="g3wtemplate.getFontClass('reply')">
+            style  = "color: #FFFFFF"
+            :class = "g3wtemplate.getFontClass('reply')">
           </i>
         </span>
 
         <div
-          v-if="parent"
-          style="margin: auto"
+          v-if  = "parent"
+          style = "margin: auto"
         >
           <h3 style="font-weight: bold">
             {{parent.title || parent.name}}
@@ -45,24 +45,24 @@
     </template>
 
     <div
-      v-if="items.length"
-      class="g3w-change-map-menu-container">
+      v-if  = "items.length"
+      class = "g3w-change-map-menu-container">
       <div
-        v-for="item in items"
-        :key="item.name"
-        class="menu-item"
+        v-for = "item in items"
+        :key  = "item.name"
+        class = "menu-item"
       >
 
       <!-- ITEM IMAGE -->
         <div
-          class="menu-item-image"
-          @click.stop="trigger(item)"
+          class       = "menu-item-image"
+          @click.stop = "trigger(item)"
         >
           <img
-            :src="item.thumbnail || item.header_logo_img || item.logo_img"
-            @error="setItemImageSrc({ item, type: 'net_error' })"
-            alt="logo"
-            class="img-responsive"
+            :src   = "item.thumbnail || item.header_logo_img || item.logo_img"
+            @error = "setItemImageSrc({ item, type: 'net_error' })"
+            alt    = "logo"
+            class  = "img-responsive"
           >
         </div>
 
@@ -81,8 +81,8 @@
 
     <template v-else>
       <h3
-        style="font-weight: bold"
-        v-t="`no_other_${current}`">
+        style = "font-weight: bold"
+        v-t   = "` no_other_${current}`">
       </h3>
     </template>
 
@@ -91,6 +91,7 @@
 </template>
 
 <script>
+
 import ApplicationService            from "services/application";
 import ProjectsRegistry              from "store/projects";
 import { API_BASE_URLS, LOGO_GIS3W } from "app/constant";
@@ -121,35 +122,35 @@ export default {
       /**
        * @type {uknown}
        */
-      state: null,
+      state:      null,
 
       /**
        * @type {boolean}
        */
-      loading: false,
+      loading:    false,
 
       /**
        * @type { 'projects' | 'groups' | 'root' }
        */
-      current: 'projects', 
+      current:    'projects',
 
       /**
        * @type {Array}
        */
-      items: [],
+      items:      [],
 
       /**
        * @type {uknown}
        */
-      parent: null,
+      parent:     null,
 
       /**
        * @type { Array } all items from top to bottom
        */
-      steps: [], 
+      steps:      [],
 
       /**
-       * @type { string } ID of current project group 
+       * @type { string } ID of a current project group
        */
       curr_group: null,
  
@@ -164,15 +165,15 @@ export default {
     async back() {
       const last_step   = this.steps.pop();                               // remove last
       const has_steps   = this.steps.length > 0;
-      const item        = has_steps && this.steps[this.steps.length - 1]; //get last step
+      const item        = has_steps && this.steps[this.steps.length - 1]; // get last step
 
       // back to macrogrup
       if (
         (has_steps && undefined !== item.macrogroup_id) ||
-        (!has_steps && undefined === last_step && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) // no steps done on first time
+        (!has_steps && undefined === last_step && Array.isArray(this.parent.macrogroup_id) && this.parent.macrogroup_id.length > 0) // no steps done the first time
       ) {
         const macrogroup_id = has_steps ? item.macrogroup_id : this.parent.macrogroup_id;
-        const add           = has_steps ? false : true; // false = step it's comping from bottom to top
+        const add           = !has_steps; // false = step it's comping from bottom to top
         return this.showMacroGroups(macrogroup_id, add);
       }
 
@@ -195,20 +196,20 @@ export default {
      * 
      * @since 3.10.0
      */
-    async showMacroGroups(macrogroup_id=[], addStep=true) {
-      // current project belongs to just one macrogroup
+    async showMacroGroups(macrogroup_id = [], addStep = true) {
+      // the current project belongs to just one macrogroup
       if (1 === macrogroup_id.length) {
-        this.parent = this.macrogroups.find(mg => macrogroup_id[0] === mg.id);
+        this.parent = this.macrogroups.find(mg => mg.id === macrogroup_id[0]);
         return await this.showGroups(this.parent);
       }
 
-      // current project belongs to more than one macrogroup
+      // the current project belongs to more than one macrogroup
       this.items   = this.macrogroups.filter(m => macrogroup_id.includes(m.id));
       this.current = 'macrogroups';
       this.parent  = {
         macrogroup_id,
         title: null, // hide title
-        name: null   // hide name
+        name:  null   // hide name
       }
 
       if (addStep) {
@@ -222,7 +223,7 @@ export default {
      * 
      * @returns { Promise<void> }
      */
-    async showGroups(item, addStep=true) {
+    async showGroups(item, addStep = true) {
       try {
         this.loading = true;
         this.parent  = item;
@@ -276,7 +277,7 @@ export default {
     async changeMapProject(item) {
       let url;
       const base_url = ProjectsRegistry.getBaseUrl();
-      const epsg = this.parent.srid ? `EPSG:${this.parent.srid}` : this.parent.crs.epsg;
+      const epsg     = this.parent.srid ? `EPSG:${this.parent.srid}` : this.parent.crs.epsg;
       await Projections.registerProjection(epsg);
       try {
         new URL(base_url);
diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 1a215eec1..6b2a8f6c2 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -11,7 +11,11 @@
     </context-menu>
 -->
 <template>
-  <ul ref="menu" class="vue-context-menu-list" :id="dynamicId">
+  <ul
+    ref="menu"
+    class="vue-context-menu-list"
+    :id="dynamicId"
+  >
     <slot></slot>
   </ul>
 </template>
diff --git a/src/components/ContextMenuItem.vue b/src/components/ContextMenuItem.vue
index e5682f9c2..63979e5db 100644
--- a/src/components/ContextMenuItem.vue
+++ b/src/components/ContextMenuItem.vue
@@ -5,7 +5,10 @@
   @example see components/ContextMenu.vue
 -->
 <template>
-  <li @click="$parent.$emit('select', select)" :style="{ opacity: this.disabled ? '0.5' : '1' }">
+  <li
+    @click.stop="$parent.$emit('select', select)"
+    :style="{ opacity: this.disabled ? '0.5' : '1' }"
+  >
     <slot></slot>
   </li>
 </template>
diff --git a/src/components/Form.vue b/src/components/Form.vue
index 056f10544..53eb07ce8 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -6,36 +6,51 @@
 <template>
   <div class="g3wform_content" style="position: relative">
     <bar-loader :loading="state.loading"/>
-    <g3wformheader ref="g3wformheader"
-      :currentid="state.currentheaderid"
-      :headers="state.headers"
-      :update="state.update"
-      :valid="state.valid"
-      @resize-form="resizeForm"
-      @clickheader="switchComponent">
-    </g3wformheader>
-    <div class="g3wform_body" ref="g3wform_body">
-      <component :fields="state.fields" v-for="component in body.components.before" :is="component"></component>
+
+    <!-- FORM HEADER  -->
+    <g3wformheader
+      ref          = "g3wformheader"
+      :currentid   = "state.currentheaderid"
+      :headers     = "state.headers"
+      :update      = "state.update"
+      :valid       = "state.valid"
+      @resize-form = "resizeForm"
+      @clickheader = "switchComponent"/>
+
+    <!-- FORM BODY  -->
+    <div
+      class="g3wform_body"
+      ref="g3wform_body"
+    >
+      <component :fields="state.fields" v-for="component in body.components.before" :is="component"/>
       <keep-alive>
         <component
-          :handleRelation="handleRelation"
-          @hook:activated="reloadLayout"
-          @addtovalidate="addToValidate"
-          @removetovalidate="removeToValidate"
-          @changeinput="changeInput"
-          :state="state"
-          :is="state.component">
-        </component>
+          :handleRelation   = "handleRelation"
+          @hook:activated   = "reloadLayout"
+          @addtovalidate    = "addToValidate"
+          @removetovalidate = "removeToValidate"
+          @changeinput      = "changeInput"
+          :state            = "state"
+          :is               = "state.component"/>
       </keep-alive>
-      <component :fields="state.fields" v-for="component in body.components.after" :is="component"></component>
+      <component
+        v-for="component in body.components.after"
+        :fields="state.fields"
+        :is="component"/>
     </div>
-    <g3w-form-footer ref="g3w_form_footer" :isRootComponent="isRootComponent" :backToRoot="backToRoot" :state="state"></g3w-form-footer>
+
+    <!-- FORM FOOTER  -->
+    <g3w-form-footer
+      ref              = "g3w_form_footer"
+      :isRootComponent = "isRootComponent"
+      :backToRoot      = "backToRoot"
+      :state           = "state"/>
   </div>
 </template>
 
 <script>
 import HeaderFormComponent from 'components/FormHeader.vue';
-import G3wFormFooter from 'components/FormFooter.vue';
+import G3wFormFooter       from 'components/FormFooter.vue';
 
 export default {
 
@@ -58,7 +73,7 @@ export default {
     g3wformheader: HeaderFormComponent,
     G3wFormFooter
   },
-  transitions: {'addremovetransition': 'showhide'},
+  transitions: { 'addremovetransition': 'showhide' },
   methods: {
     isRootComponent(component){
       return this.$options.service.isRootComponent(component);
@@ -69,7 +84,7 @@ export default {
     handleRelation(relationId){
       this.$options.service.handleRelation(relationId);
     },
-     disableComponent({id, disabled=false}) {
+     disableComponent({ id, disabled = false }) {
        this.$options.service.disableComponent({
          id,
          disabled
@@ -94,27 +109,24 @@ export default {
     // set layout
     reloadLayout() {
       const height = $(this.$el).height();
-      if(!height) return;
-      const footerDOM = $(this.$refs.g3w_form_footer.$el);
-      const bodyFromDOM = $(this.$refs.g3wform_body);
+      if (!height) { return };
+      const footerDOM    = $(this.$refs.g3w_form_footer.$el);
+      const bodyFromDOM  = $(this.$refs.g3wform_body);
       const footerHeight = footerDOM.height() ? footerDOM.height() + 50 : 50;
-      const bodyHeight = height - ($(this.$refs.g3wformheader.$el).height() +  footerHeight);
+      const bodyHeight   = height - ($(this.$refs.g3wformheader.$el).height() +  footerHeight);
       bodyFromDOM.height(bodyHeight);
     },
   },
   async updated() {
     await this.$nextTick();
-    this.switchcomponent && setTimeout(()=> this.switchcomponent = false, 0)
+    if (this.switchcomponent) { setTimeout(() => this.switchcomponent = false, 0) }
   },
   created() {
     this.$options.service.getEventBus().$on('set-main-component', () => {
       this.switchComponent(0);
     });
     this.$options.service.getEventBus().$on('component-validation', ({id, valid}) => {
-      this.$options.service.setValidComponent({
-        id,
-        valid
-      });
+      this.$options.service.setValidComponent({ id, valid });
     });
     this.$options.service.getEventBus().$on('addtovalidate', this.addToValidate);
     this.$options.service.getEventBus().$on('disable-component', this.disableComponent);
diff --git a/src/components/FormAddon.vue b/src/components/FormAddon.vue
index 9b4f965e5..93fe2f544 100644
--- a/src/components/FormAddon.vue
+++ b/src/components/FormAddon.vue
@@ -4,7 +4,10 @@
 -->
 
 <template functional>
-  <span class="circle-icon skin-background-color lighten" @click.stop="fnc" :id="id" :title="title || id">
+  <span
+    class       = "circle-icon skin-background-color lighten"
+    @click.stop = "fnc" :id="id" :title="title || id"
+  >
     <i :class="fontClass"></i>
   </span>
 
@@ -15,19 +18,19 @@
     name: "addon",
     props: {
       id: {
-        type: String,
+        type:     String,
         required: true
       },
       title: {
-        type: String,
+        type:     String,
         required: false
       },
       fontClass: {
-        type: String,
+        type:     String,
         required: true
       },
       fnc: {
-        type:Function,
+        type:     Function,
         required: true
       }
     }
diff --git a/src/components/FormAddons.vue b/src/components/FormAddons.vue
index ec22a0a8e..ef62f9b73 100644
--- a/src/components/FormAddons.vue
+++ b/src/components/FormAddons.vue
@@ -6,10 +6,12 @@
 <template>
   <span class="form-addons">
     <add-on
-      :id="addon.id"
-      :title="addon.title"
-      :fnc="addon.fnc"
-      :fontClass="addon.fontClass" v-for="addon in addons" :key="addon.id"></add-on>
+      v-for="addon in addons"
+      :key       = "addon.id"
+      :id        = "addon.id"
+      :title     = "addon.title"
+      :fnc       = "addon.fnc"
+      :fontClass = "addon.fontClass" />
   </span>
 
 </template>
@@ -21,17 +23,11 @@
     name: "addons",
     props: {
       addons: {
-        type: Array,
+        type:     Array,
         required: false,
-        default: []
+        default:  []
       }
     },
-    components: {
-      AddOn
-    }
+    components: { AddOn }
   }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/components/FormBody.vue b/src/components/FormBody.vue
index a4f4c6f0a..6464fc2e5 100644
--- a/src/components/FormBody.vue
+++ b/src/components/FormBody.vue
@@ -10,27 +10,25 @@
       <div class="box-body">
         <template v-if="hasFormStructure">
           <tabs
-            :layerid="state.layerid"
-            :feature="state.feature"
-            :handleRelation="handleRelation"
-            :contenttype="'editing'"
-            :addToValidate="addToValidate"
-            :changeInput="changeInput"
-            :removeToValidate="removeToValidate"
-            :tabs="state.formstructure"
-            :fields="state.fields">
-          </tabs>
+            :layerid          = "state.layerid"
+            :feature          = "state.feature"
+            :handleRelation   = "handleRelation"
+            :contenttype      = "'editing'"
+            :addToValidate    = "addToValidate"
+            :changeInput      = "changeInput"
+            :removeToValidate = "removeToValidate"
+            :tabs             = "state.formstructure"
+            :fields           = "state.fields"/>
         </template>
         <template v-else>
           <g3w-form-inputs
-            :state="state"
-            :addToValidate="addToValidate"
-            :removeToValidate="removeToValidate"
-            :changeInput="changeInput"
-            @changeinput="changeInput"
-            @addinput="addToValidate"
-            @removeinput="removeToValidate">
-          </g3w-form-inputs>
+            :state            = "state"
+            :addToValidate    = "addToValidate"
+            :removeToValidate = "removeToValidate"
+            :changeInput      = "changeInput"
+            @changeinput      = "changeInput"
+            @addinput         = "addToValidate"
+            @removeinput      = "removeToValidate"/>
         </template>
       </div>
     </div>
diff --git a/src/components/FormFooter.vue b/src/components/FormFooter.vue
index 189539f7b..bbdf1ede3 100644
--- a/src/components/FormFooter.vue
+++ b/src/components/FormFooter.vue
@@ -9,19 +9,32 @@
       <slot>
         <div style="margin:3px; font-weight: bold">
           * <span  v-t="'sdk.form.footer.required_fields'"></span>
-          <div v-if="state.footer.message" :style="[state.footer.style] ">{{ state.footer.message }}</div>
+          <div
+            v-if   = "state.footer.message"
+            :style = "[state.footer.style] "
+          >
+            {{ state.footer.message }}
+          </div>
         </div>
-        <button v-for="button in state.buttons" class="btn " :key="button.id"
-          :class="[button.class]"
-          :update="state.update"
-          :valid="state.valid"
-          @click.stop.prevent="exec(button.cbk)"
-          v-disabled="!btnEnabled(button)" v-t="button.title">
+        <button
+          v-for="button in state.buttons"
+          :key                = "button.id"
+          class               = "btn "
+          :class              = "[button.class]"
+          :update             = "state.update"
+          :valid              = "state.valid"
+          @click.stop.prevent = "exec(button.cbk)"
+          v-disabled          = "!btnEnabled(button)"
+          v-t="button.title">
         </button>
       </slot>
     </template>
     <template v-else>
-      <button v-t="'back'" class="btn skin-button" @click.stop.prevet="backToRoot"></button>
+      <button
+        v-t                = "'back'"
+        class              = "btn skin-button"
+        @click.stop.prevet = "backToRoot">
+      </button>
     </template>
   </div>
 </template>
@@ -41,9 +54,9 @@ export default Vue.extend({
     },
     backToRoot: {
       type: Function,
-      default: ()=>{}
+      default: () => {}
     },
-    isRootComponent:{
+    isRootComponent: {
       type: Function
     }
   },
@@ -56,13 +69,13 @@ export default Vue.extend({
       ...button
     }));
     return {
-      id:"footer",
+      id:     "footer",
       active: true,
-      show: true
+      show:   true,
     }
   },
   computed: {
-    enableSave(){
+    enableSave() {
       return this.state.valid && this.state.update;
     }
   },
@@ -71,7 +84,7 @@ export default Vue.extend({
       cbk instanceof Function ? cbk(this.state.fields): (function() { return this.state.fields})();
     },
     btnEnabled(button) {
-      const {enabled=true, type} = button;
+      const { enabled = true, type } = button;
       return enabled && (type !== 'save' ||  (type === 'save' && this.enableSave));
     },
     isValid() {
@@ -79,7 +92,7 @@ export default Vue.extend({
     },
   },
   watch: {
-    'state.component'(component){
+    'state.component'(component) {
       this.show = this.isRootComponent(component)
     },
     'state.update': {
@@ -92,17 +105,20 @@ export default Vue.extend({
                 ...button,
                 ...button.eventButtons.update[value]
               })
-            } else this.state.buttons.splice(index,1, this.originalbuttons[index]);
+            } else {
+               this.state.buttons.splice(index,1, this.originalbuttons[index]);
+            }
           }
         });
       }
     }
   },
-  activated(){
+  activated() {
     this.active = true;
   },
   deactivated() {
     this.active = false;
   }
 });
+
 </script>
\ No newline at end of file
diff --git a/src/components/FormHeader.vue b/src/components/FormHeader.vue
index c7d8a4867..b8a69581b 100644
--- a/src/components/FormHeader.vue
+++ b/src/components/FormHeader.vue
@@ -4,17 +4,29 @@
 -->
 
 <template>
-  <div class="g3wform_header box-header with-border" style="display: flex; flex-direction: column">
+  <div
+    class = "g3wform_header box-header with-border"
+    style = "display: flex; flex-direction: column"
+  >
     <section class="g3wform_header_content">
-      <span style="display:flex; justify-content: space-between; align-items: center" class="title" :style="{fontSize: isMobile() && '1em !important'}"
-        :class="[{item_selected: currentid === header.id && headers.length > 1},[headers.length > 1 ? 'tabs' : 'one' ]]"
-        v-for="header in headers" :key="header.id"
-        @click.stop="click(header.id)">
-      <span v-if="header.icon" style="margin-right: 5px">
+      <span
+        v-for="header in headers"
+        :key        = "header.id"
+        style       = "display:flex; justify-content: space-between; align-items: center"
+        class       = "title"
+        :style      = "{fontSize: isMobile() && '1em !important'}"
+        :class      = "[{item_selected: currentid === header.id && headers.length > 1},[headers.length > 1 ? 'tabs' : 'one' ]]"
+        @click.stop = "click(header.id)">
+      <span
+        v-if  = "header.icon"
+        style = "margin-right: 5px">
         <i :class="header.icon"></i>
       </span>
       <span v-t:pre="header.title" class="g3w-long-text">{{ header.name }}</span>
-     <component :valid="valid" :update="update" :is="header.component"/>
+     <component
+      :valid  = "valid"
+      :update = "update"
+      :is     = "header.component"/>
     </span>
     </section>
   </div>
@@ -32,7 +44,7 @@ export default Vue.extend({
   props: {
     headers: {
       type: Array,
-      default:[]
+      default: []
     },
     currentid: {
       type: String
@@ -50,11 +62,11 @@ export default Vue.extend({
        * @deprecated since 3.6.2
        * This was used when form headers has more than one (case relation)
        */
-      if (this.currentid !== id && this.headers.length > 1) {
+      if (id !== this.currentid  && this.headers.length > 1) {
         this.$emit('clickheader', id);
       }
     },
-    resizeForm(perc){
+    resizeForm(perc) {
       this.$emit('resize-form', perc);
     }
   }
diff --git a/src/components/GlobalBarLoader.vue b/src/components/GlobalBarLoader.vue
index 1c43e0b7f..05d95169c 100644
--- a/src/components/GlobalBarLoader.vue
+++ b/src/components/GlobalBarLoader.vue
@@ -4,12 +4,16 @@
 -->
 
 <template>
-  <div v-if="loading" class="bar-loader" :style="{ backgroundColor: (color || '#FFFFFF'), border:0 }"></div>
+  <div
+    v-if   = "loading"
+    class  = "bar-loader"
+    :style = "{ backgroundColor: (color || '#FFFFFF'), border:0 }">
+  </div>
 </template>
 
 <script>
   export default {
-    name: "bar-loader",
+    name:  "bar-loader",
     props: ['loading', 'color'],
   };
 </script>
diff --git a/src/components/GlobalDateTime.vue b/src/components/GlobalDateTime.vue
index 130e05559..e1a96a5a9 100644
--- a/src/components/GlobalDateTime.vue
+++ b/src/components/GlobalDateTime.vue
@@ -5,12 +5,26 @@
 
 <template>
   <div ref="datimecontainer">
-    <label :for="id" style="display: block" v-t="label"></label>
+    <label
+      :for  = "id"
+      style = "display: block"
+      v-t   = "label">
+    </label>
     <div class="form-group">
-      <div class='input-group date' ref="iddatetimepicker">
-        <input :id="id" ref="idinputdatetimepiker" type='text' @change="changeInput" class="form-control" />
+      <div
+        class = 'input-group date'
+        ref   = "iddatetimepicker">
+        <input
+          :id     = "id"
+          ref     = "idinputdatetimepiker"
+          type    = 'text'
+          @change = "changeInput"
+          class   = "form-control" />
         <span class="input-group-addon caret">
-          <span class="datetimeinput" :class="[type === 'time'? g3wtemplate.getFontClass('time') :  g3wtemplate.getFontClass('calendar')]"></span>
+          <span
+            class  = "datetimeinput"
+            :class = "g3wtemplate.getFontClass('time' === type ? 'time': 'calendar')">
+          </span>
         </span>
       </div>
     </div>
@@ -26,11 +40,11 @@
     name: "datetime",
     props: {
       type:{
-        type: String,
+        type:     String,
         default: 'date' // time
       },
       format: {
-        type: String,
+        type:    String,
         default: 'YYYY-MM-DD'
       },
       minDate:{
@@ -47,13 +61,13 @@
         default:'Date'
       }
     },
-    data(){
+    data() {
       return {
         datetimevalue: this.value
       }
     },
     methods: {
-      changeInput(evt){},
+      changeInput(e) {},
       change(value) {
         const date = moment(value).format(this.format);
         this.$emit('change', date)
@@ -63,19 +77,17 @@
       await this.$nextTick();
       this.datetimeinputelement = $(this.$refs.iddatetimepicker);
       this.datetimeinputelement.datetimepicker({
-        minDate: this.minDate,
-        maxDate: this.maxDate,
-        defaultDate: this.datetimevalue,
-        useCurrent: false,
-        allowInputToggle: true,
-        enabledDates: this.enabledDates,
-        showClose: true,
-        format: this.format,
-        locale: ApplicationState.language,
-        toolbarPlacement: 'top',
-        widgetPositioning: {
-          horizontal: 'right'
-        },
+        minDate:           this.minDate,
+        maxDate:           this.maxDate,
+        defaultDate:       this.datetimevalue,
+        useCurrent:        false,
+        allowInputToggle:  true,
+        enabledDates:      this.enabledDates,
+        showClose:         true,
+        format:            this.format,
+        locale:            ApplicationState.language,
+        toolbarPlacement:  'top',
+        widgetPositioning: { horizontal: 'right' },
       });
       this.datetimeinputelement.on("dp.change", ({date}) => {
         this.change(date);
@@ -86,24 +98,24 @@
          */
         //$(this.$refs.iddatetimepicker).data("DateTimePicker").show();
       });
-      ApplicationState.ismobile && setTimeout(() => datetimeinputelement.blur());
+      if (ApplicationState.ismobile) { setTimeout(() => datetimeinputelement.blur()) }
     },
     watch: {
-      value(datetime){
+      value(datetime) {
         this.datetimevalue = datetime;
         this.datetimeinputelement.data("DateTimePicker").date(datetime)
       },
-      async minDate(mindatetime){
+      async minDate(mindatetime) {
         this.datetimeinputelement.data("DateTimePicker").minDate(mindatetime);
       },
-      async maxDate(maxdatetime){
+      async maxDate(maxdatetime) {
         this.datetimeinputelement.data("DateTimePicker").maxDate(maxdatetime);
       },
-      enabledDates(dates){
+      enabledDates(dates) {
         this.datetimeinputelement.data("DateTimePicker").enabledDates(dates);
       }
     },
-    created(){
+    created() {
       this.id = getUniqueDomId();
     }
   }
diff --git a/src/components/GlobalGallery.vue b/src/components/GlobalGallery.vue
index 9a16d8805..0ef503b44 100644
--- a/src/components/GlobalGallery.vue
+++ b/src/components/GlobalGallery.vue
@@ -4,24 +4,50 @@
 -->
 
 <template>
-  <div class="modal fade modal-fullscreen force-fullscreen" :id="id" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" >
+  <div
+    class = "modal fade modal-fullscreen force-fullscreen"
+    :id             = "id"
+    tabindex        = "-1"
+    role            = "dialog"
+    aria-labelledby = ""
+    aria-hidden     = "true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
           <!--begin carousel-->
-          <div :id="carouselId" class="carousel slide" data-interval="false">
+          <div
+            :id           = "carouselId"
+            class         = "carousel slide"
+            data-interval = "false"
+          >
             <div class="carousel-inner">
-              <div v-for="(image, index) in images" class="item" :class="active == index ? 'active' : ''">
-                <img style="margin:auto" :src="isRelativePath(image.src)">
+              <div
+                v-for  = "(image, index) in images"
+                class  = "item"
+                :class = "active == index ? 'active' : ''"
+              >
+                <img
+                  style = "margin:auto"
+                  :src  = "isRelativePath(image.src)">
               </div>
             </div>
-            <a v-if="images.length> 1" class="left carousel-control" :href="'#'+carouselId" role="button" data-slide="prev">
-              <span :class="g3wtemplate.getFontClass('arrow-left')">
-              </span>
+            <a
+              v-if       ="images.length > 1"
+              class      = "left carousel-control"
+              :href      = "`#${carouselId}`"
+              role       = "button"
+              data-slide = "prev"
+            >
+              <span :class="g3wtemplate.getFontClass('arrow-left')"></span>
             </a>
-            <a v-if="images.length> 1" class="right carousel-control" :href="'#'+carouselId" role="button" data-slide="next">
-              <span :class="g3wtemplate.getFontClass('arrow-left')">
-              </span>
+            <a
+              v-if       = "images.length > 1"
+              class      = "right carousel-control"
+              :href      = "`#${carouselId}`"
+              role       = "button"
+              data-slide = "next"
+            >
+              <span :class="g3wtemplate.getFontClass('arrow-left')"></span>
             </a>
           </div>
         </div>
@@ -37,11 +63,11 @@
     name: "g3w-images-gallery",
     props: {
       images: {
-        type: Array,
+        type:    Array,
         default: []
       },
       id: {
-        type: String,
+        type:     String,
         default: 'gallery'
       },
       active: {
@@ -50,12 +76,12 @@
     },
     data() {
       return {
-        carouselId: 'carousel_'+ Date.now()
+        carouselId: `carousel_${Date.now()}`
       }
     },
     methods: {
       isActive(src) {
-        return src === active
+        return src === this.active;
       },
       isRelativePath(url) {
         if (!_.startsWith(url,'/') && !_.startsWith(url,'http')) {
diff --git a/src/components/GlobalGeo.vue b/src/components/GlobalGeo.vue
index 7a6214aac..12afc1ab3 100644
--- a/src/components/GlobalGeo.vue
+++ b/src/components/GlobalGeo.vue
@@ -5,8 +5,10 @@
 
 <template>
   <div class="geo-content">
-    <span @click.stop="showLayer()" class="show-hide-geo"
-          :class="[visible ? g3wtemplate.getFontClass('eye-close') : g3wtemplate.getFontClass('eye')]">
+    <span
+      @click.stop = "showLayer"
+      class       = "show-hide-geo"
+      :class      = "g3wtemplate.getFontClass(visible ? 'eye-close': 'eye')">
     </span>
   </div>
 </template>
@@ -19,12 +21,12 @@
     props: {
       data: {},
     },
-    mixins: [geoMixin],
+    mixins: [ geoMixin ],
     data() {
       return {
-        layerId: 'table_layer_' + Date.now(),
+        layerId: `table_layer_${Date.now()}`,
         visible: false,
-        id: 'geo_table_' + Date.now()
+        id:      `geo_table_${Date.now()}`,
       }
     }
   }
diff --git a/src/components/GlobalHelpDiv.vue b/src/components/GlobalHelpDiv.vue
index 381020f74..4b5df6f40 100644
--- a/src/components/GlobalHelpDiv.vue
+++ b/src/components/GlobalHelpDiv.vue
@@ -15,11 +15,11 @@
     name: "helpdiv",
     props: {
       message: {
-        type: String,
+        type:     String,
         required: true
       },
       type: {
-        type: String,
+        type:    String,
         default: 'info' // alert, warning
       }
     }
diff --git a/src/components/GlobalImage.vue b/src/components/GlobalImage.vue
index b3c74f3d0..c732f5d65 100644
--- a/src/components/GlobalImage.vue
+++ b/src/components/GlobalImage.vue
@@ -5,12 +5,21 @@
 
 <template>
   <div class="container-fluid">
-    <div  class="row">
-      <div  v-for="(value, index) in values" class="g3w-image col-md-6 col-sm-12">
-        <img class="img-thumbnail" @click="showGallery(index)" :src="getSrc(value)"/>
+    <div class="row">
+      <div
+        v-for="(value, index) in values"
+        class="g3w-image col-md-6 col-sm-12"
+      >
+        <img
+          class       = "img-thumbnail"
+          @click.stop = "showGallery(index)"
+          :src        = "getSrc(value)"/>
       </div>
     </div>
-    <g3w-images-gallery :id="galleryId" :active="active" :images="getGalleryImages()"/>
+    <g3w-images-gallery
+      :id     = "galleryId"
+      :active = "active"
+      :images = "getGalleryImages()"/>
   </div>
 </template>
 
@@ -24,8 +33,8 @@
     },
     data() {
       return {
-        galleryId: 'gallery_' + Date.now(),
-        active: null
+        galleryId: `gallery_${Date.now()}`,
+        active:     null
       }
     },
     components: {
@@ -48,19 +57,12 @@
         if (typeof this.value === 'object') {
           this.value.active = true;
         }
-        $('#'+this.galleryId).modal('show');
+        $(`#${this.galleryId}`).modal('show');
       },
       getGalleryImages() {
-        const images = [];
-        this.values.forEach((image) => {
-          images.push({
-            src: this.getSrc(image)
-          })
-        });
-        return images
+        return this.values.map(image => ({ src: this.getSrc(image) }));
       }
     },
-    created () {}
   }
 </script>
 
diff --git a/src/components/GlobalLayerPositions.vue b/src/components/GlobalLayerPositions.vue
index 6125d7a49..63d7a2646 100644
--- a/src/components/GlobalLayerPositions.vue
+++ b/src/components/GlobalLayerPositions.vue
@@ -4,13 +4,28 @@
 -->
 
 <template>
-  <div class="g3w-layer-positions" :id="ids.layerpositions">
-    <div class="g3w-layer-positions-info-message" v-t="`layer_position.message`">
+  <div
+    class = "g3w-layer-positions"
+    :id   = "ids.layerpositions"
+  >
+    <div
+      class = "g3w-layer-positions-info-message"
+      v-t   = "`layer_position.message`">
     </div>
     <div class="g3w-layer-positions-checkboxes">
-      <div v-for="layerposition in layerpositions" :key="layerposition">
-        <input @change="change" class="form-control magic-radio" type="radio" :id="ids[layerposition]" v-model="position" :value="layerposition" :checked="position === layerposition">
-        <label :for="ids[layerposition]" v-t="`layer_position.${layerposition}`"></label>
+      <div
+        v-for = "layerposition in layerpositions"
+        :key  = "layerposition"
+      >
+        <input
+          @change  = "change"
+          class    = "form-control magic-radio"
+          type     = "radio"
+          :id      = "ids[layerposition]"
+          v-model  = "position"
+          :value   = "layerposition"
+          :checked = "position === layerposition">
+        <label :for = "ids[layerposition]" v-t = "`layer_position.${layerposition}`"></label>
       </div>
     </div>
   </div>
@@ -24,18 +39,18 @@
   export default {
     name: "layerspositions",
     props:{
-      position:{
-        type: String,
+      position: {
+        type:    String,
         default: MAP_SETTINGS.LAYER_POSITIONS.default
       }
     },
-    data(){
+    data() {
       return {
         layerpositions: MAP_SETTINGS.LAYER_POSITIONS.getPositions()
       }
     },
     methods: {
-      change(){
+      change() {
         this.$emit('layer-position-change', this.position)
       }
     },
@@ -43,7 +58,7 @@
       this.ids = {
         layerpositions: getUniqueDomId(),
       };
-      this.layerpositions.forEach(layerposition => this.ids[layerposition] = getUniqueDomId());
+      this.layerpositions.forEach(lp => this.ids[lp] = getUniqueDomId());
       this.change();
     }
   }
diff --git a/src/components/GlobalProgressBar.vue b/src/components/GlobalProgressBar.vue
index ee226665b..ec0f078ef 100644
--- a/src/components/GlobalProgressBar.vue
+++ b/src/components/GlobalProgressBar.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div
-    v-if="(null !== progress && undefined !== progress)"
-    style="margin: 5px 0 5px 0; width: 100%; backgroundColor: #FFFFFF; border: 0; borderRadius: 3px;"
+    v-if  = "(null !== progress && undefined !== progress)"
+    style = "margin: 5px 0 5px 0; width: 100%; backgroundColor: #FFFFFF; border: 0; borderRadius: 3px;"
   >
     <div
-      class="skin-background-color"
-      style="display: flex; justifyContent: center; fontWeight: bold;"
-      :style="{ width: (progress < 10 ? 10 : progress) }"
+      class  = "skin-background-color"
+      style  = "display: flex; justifyContent: center; fontWeight: bold;"
+      :style = "{ width: (progress < 10 ? 10 : progress) }"
     >
       <span>{{ progress }}</span>
     </div>
diff --git a/src/components/GlobalRange.vue b/src/components/GlobalRange.vue
index d920fae16..fafe3414a 100644
--- a/src/components/GlobalRange.vue
+++ b/src/components/GlobalRange.vue
@@ -7,26 +7,26 @@
   <div>
     <section style="display: flex; justify-content: space-between; font-weight: bold;">
       <section style="align-self: flex-end">
-        <span class="min-max-label">{{min}}</span>
-        <span style="font-weight: bold;">{{unit}}</span>
+        <span class = "min-max-label">{{min}}</span>
+        <span style = "font-weight: bold;">{{unit}}</span>
       </section>
 
       <div style="display: flex; flex-direction: column; margin: 0 3px">
         <label
-          :for="id"
-          style="display: block"
-          class="skin-color"
-          v-t="label"
+          :for  = "id"
+          style = "display: block"
+          class = "skin-color"
+          v-t   = "label"
         ></label>
         <input
-          type="range"
-          ref="range-input"
-          @change="change"
-          v-model="state.value"
-          :id="id"
-          :min="min"
-          :max="max"
-          :step="step"
+          type    = "range"
+          ref     = "range-input"
+          @change = "change"
+          v-model = "state.value"
+          :id     = "id"
+          :min    = "min"
+          :max    = "max"
+          :step   = "step"
         >
       </div>
 
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-  const { debounce, uniqueId } = require('utils');
+  const { debounce } = require('utils');
 
   export default {
     name: "range",
@@ -62,7 +62,7 @@
        * @TODO find out what changes from the `unit` props
        */
       label: {
-        type: String,
+        type:    String,
         default: ''
       },
 
@@ -70,7 +70,7 @@
        * Min range slider value.
        */
       min: {
-        type: Number,
+        type:    Number,
         default: 0
       },
 
@@ -78,7 +78,7 @@
        * Max range slider value.
        */
       max: {
-        type: Number,
+        type:    Number,
         default: 10
       },
 
@@ -86,7 +86,7 @@
        * Range slider step.
        */
       step: {
-        type: Number,
+        type:    Number,
         default: 1
       },
 
@@ -106,7 +106,7 @@
        * Whether to emit the `changed` event.
        */
       sync: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
 
@@ -114,7 +114,7 @@
        * Whether display current range value.
        */
       showValue: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
 
@@ -122,7 +122,7 @@
        * Range unit.
        */
       unit: {
-        type: String,
+        type:    String,
         default: ''
       }
 
@@ -136,12 +136,11 @@
       changeBackGround(value) {
         this.$refs['range-input'].style.backgroundSize = `${value ? (value - this.min) * 100 / (this.max - this.min): 0}% 100%`;
       },
-      setValue(value){
+      setValue(value) {
         this.changedValue(value);
       },
-      change(evt) {
-        const value = 1*evt.target.value;
-        this.changedValue(value);
+      change(e) {
+        this.changedValue(1*e.target.value);
       },
       emitChangeValue(value) {
         this.state.value = value;
@@ -152,13 +151,17 @@
       }
     },
     watch: {
+      /**@since 3.8.0 need to watch changes of prop value and reflect it to state.value*/
+      'value'(value) {
+        this.state.value = value;
+      },
       'state.value'(value) {
         this.changeBackGround(value);
-        this.sync && this.emitChangeValue(value);
+        if (this.sync) { this.emitChangeValue(value) }
       }
     },
     created() {
-      this.changedValue =  this.sync ? ()=> this.$emit('changed') : debounce(value => {
+      this.changedValue =  this.sync ? () => this.$emit('changed') : debounce(value => {
         this.emitChangeValue(value)
       })
     },
diff --git a/src/components/GlobalResize.vue b/src/components/GlobalResize.vue
index bc6cff584..45ac48b5e 100644
--- a/src/components/GlobalResize.vue
+++ b/src/components/GlobalResize.vue
@@ -22,39 +22,39 @@
     props: {
 
       show: {
-        type: Boolean,
+        type:     Boolean,
         required: true,
-        default: true
+        default:  true
       },
 
       orientation: {
-        type: String,
+        type:    String,
         default: 'h'
       },
 
       where: {
-        type: String,
+        type:    String,
         default: 'document'
       },
 
       moveFnc: {
         type: Function,
-        default: evt=> console.log(evt)
+        default: e => console.log(e)
       },
     },
 
     computed: {
       style() {
         return {
-          minWidth: '5px',
+          minWidth:        '5px',
           backgroundColor: '#dddddd',
-          cursor: this.orientation === 'v' ? 'ns-resize' : 'col-resize',
+          cursor:          this.orientation === 'v' ? 'ns-resize' : 'col-resize',
         }
       }
     },
     methods: {
-      wrapMoveFnc(evt) {
-        this.moveFnc(evt);
+      wrapMoveFnc(e) {
+        this.moveFnc(e);
       },
 
       start() {
@@ -70,14 +70,11 @@
     },
 
     async mounted() {
-      this.domElementMoveListen;
-
       this.domElementMoveListen = (
         'content' === this.where
           ? document.getElementById('g3w-view-content')
           : document
       );
-
     },
 
     destroyed() {
diff --git a/src/components/GlobalResizeIcon.vue b/src/components/GlobalResizeIcon.vue
index 40bbddd06..2a1bc2554 100644
--- a/src/components/GlobalResizeIcon.vue
+++ b/src/components/GlobalResizeIcon.vue
@@ -41,7 +41,7 @@
 
     data() {
       return {
-        show: "undefined" !== typeof this.type,
+        show: undefined !== this.type,
       };
     },
 
diff --git a/src/components/GlobalSkeleton.vue b/src/components/GlobalSkeleton.vue
index 5f3f12d67..59c9fc62d 100644
--- a/src/components/GlobalSkeleton.vue
+++ b/src/components/GlobalSkeleton.vue
@@ -21,9 +21,6 @@
 <script>
   export default {
     name: "skeleton",
-    mounted() {
-      this.$nextTick(()=>{})
-    }
   }
 </script>
 
diff --git a/src/components/GlobalTabs.vue b/src/components/GlobalTabs.vue
index 32e12a390..5a14d7dd7 100644
--- a/src/components/GlobalTabs.vue
+++ b/src/components/GlobalTabs.vue
@@ -12,15 +12,15 @@
         <ul class="formquerytabs nav nav-tabs">
           <template v-for="(tab, index) in root_tab">
             <li
-              v-if="tab.visible === undefined || tab.visible"
-              :class="{active: index === 0}"
+              v-if   = "tab.visible === undefined || tab.visible"
+              :class = "{active: index === 0}"
               >
                 <a
-                  data-toggle="tab"
-                  class="tab_a"
-                  :href="`#${ids[index]}`"
-                  :class="{'mobile': isMobile(), 'group-title': group}"
-                  :style="{fontSize: isMobile() ? '1.0em': `${group ? '1.1': '1.2'}em`}"
+                  data-toggle = "tab"
+                  class       = "tab_a"
+                  :href       = "`#${ids[index]}`"
+                  :class      = "{'mobile': isMobile(), 'group-title': group}"
+                  :style      = "{fontSize: isMobile() ? '1.0em': `${group ? '1.1': '1.2'}em`}"
                 >
                  {{tab.name}} <span style="padding-left: 3px; font-size: 1.1em;" v-if="contenttype === 'editing' && tab.required">*</span>
                 </a>
@@ -29,43 +29,43 @@
         </ul>
         <div
           class="tab-content"
-          :class="{editing: contenttype === 'editing'}"
+          :class="{editing: 'editing' === contenttype }"
         >
           <template v-for="(tab, index) in root_tab">
             <div
-              v-if="tab.visible === undefined || tab.visible"
-              :id="ids[index]"
-              class="tab-pane fade"
-              :class="{'in active': index === 0}"
+              v-if   = "undefined === tab.visible || tab.visible"
+              :id    = "ids[index]"
+              class  = "tab-pane fade"
+              :class = "{'in active': index === 0}"
             >
               <node
-                :showRelationByField="showRelationByField"
-                :handleRelation="handleRelation"
-                :feature="feature"
-                :layerid="layerid"
-                :contenttype="contenttype"
-                :addToValidate="addToValidate"
-                :removeToValidate="removeToValidate"
-                :changeInput="changeInput"
-                :fields="fields"
-                :showTitle="false"
-                :node="tab"/>
+                :showRelationByField = "showRelationByField"
+                :handleRelation      = "handleRelation"
+                :feature             = "feature"
+                :layerid             = "layerid"
+                :contenttype         = "contenttype"
+                :addToValidate       = "addToValidate"
+                :removeToValidate    = "removeToValidate"
+                :changeInput         = "changeInput"
+                :fields              = "fields"
+                :showTitle           = "false"
+                :node                = "tab"/>
             </div>
           </template>
         </div>
       </template>
       <node v-else
-        :showRelationByField="showRelationByField"
-        :handleRelation="handleRelation"
-        :feature="feature"
-        :layerid="layerid"
-        :contenttype="contenttype"
-        :addToValidate="addToValidate"
-        :removeToValidate="removeToValidate"
-        :changeInput="changeInput"
-        :fields="fields"
-        :showTitle="false"
-        :node="root_tab"/>
+        :showRelationByField = "showRelationByField"
+        :handleRelation      = "handleRelation"
+        :feature             = "feature"
+        :layerid             = "layerid"
+        :contenttype         = "contenttype"
+        :addToValidate       = "addToValidate"
+        :removeToValidate    = "removeToValidate"
+        :changeInput         = "changeInput"
+        :fields              = "fields"
+        :showTitle           = "false"
+        :node                = "root_tab"/>
     </template>
   </div>
 </template>
@@ -87,7 +87,7 @@
     name: "tabs",
     props: {
       group: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
       contenttype: {
@@ -106,23 +106,23 @@
         required: true
       },
       addToValidate: {
-        type: Function,
+        type:    Function,
         default: noop
       },
       removeToValidate: {
-        type: Function,
+        type:    Function,
         default: noop
       },
       changeInput: {
-        type: Function,
+        type:    Function,
         default: noop
       },
       showRelationByField: {
-        type: Boolean,
+        type:    Boolean,
         default: true
       },
       handleRelation: {
-        type: Function,
+        type:     Function,
         default: ({relation, layerId, feature}={}) => GUI.getService('queryresults').showRelation({relation, layerId, feature})
       }
     },
@@ -132,11 +132,11 @@
       }
     },
     computed: {
-      required_fields(){
-        return this.contenttype === 'editing' && this.fields.filter(field => field.validate.required).map(field => field.name);
+      required_fields() {
+        return 'editing' ===  this.contenttype && this.fields.filter(f => f.validate.required).map(f => f.name);
       },
       show(){
-        return this.tabs.reduce((accumulator, tab) => accumulator || (tab.visible === undefined || !!tab.visible), false);
+        return this.tabs.reduce((a, t) => a || (t.visible === undefined || !!t.visible), false);
       }
     },
     methods: {
@@ -165,15 +165,15 @@
       // method to set required tab for editing
       setEditingRequireTab(obj) {
         let required = false;
-        if (obj.nodes === undefined) {
+        if (undefined === obj.nodes) {
           required = this.required_fields.indexOf(obj.field_name) !== -1;
         } else {
-          required = !!obj.nodes.find(node => this.setEditingRequireTab(node));
+          required = !!obj.nodes.find(n => this.setEditingRequireTab(n));
         }
         return required;
       },
       getField(fieldName) {
-        return this.fields.find(field => field.name === fieldName);
+        return this.fields.find(f => fieldName === f.name);
       }
     },
     components: {
@@ -181,28 +181,25 @@
     },
     async created() {
       this.unwatch = [];
-      this.tabs.forEach((tab , i) => {
+      this.tabs.forEach(async (tab , i) => {
         if (tab.visibility_expression) {
-           if (tab.visible === undefined) {
-             this.$set(tab, 'visible', 0);
-           }
-           this.setVisibility(tab);
+          if (undefined === tab.visible) { this.$set(tab, 'visible', 0) }
+          await this.setVisibility(tab);
         }
-        if (this.contenttype === 'editing') {
-          if (tab.required === undefined) {
+        if ('editing' === this.contenttype) {
+          if (undefined === tab.required) {
             tab.required = this.setEditingRequireTab(tab);
           }
           if (tab.visibility_expression) {
             tab.visibility_expression
               .referenced_columns
-              .forEach(column => {
-                const field = this.fields
-                  .find(field => field.name === column);
+              .forEach(c => {
+                const field = this.fields.find(f => c === f.name);
                 this.unwatch.push(
                   this.$watch(() => field.value,
-                    async (value) => {
-                      this.feature.set(field.name, value);
-                      this.setVisibility(tab);
+                    async (v) => {
+                      this.feature.set(field.name, v);
+                      await this.setVisibility(tab);
                     })
                 )
               })
@@ -212,16 +209,16 @@
       });
 
       this.root_tabs = [];
-      if (!this.group){
+      if (!this.group) {
         const nodes = [];
         this.tabs.forEach(tab_node => {
-          if (tab_node.nodes) {
-            nodes.push(tab_node);
-          } else {
+          if (tab_node.nodes) { nodes.push(tab_node) }
+          else {
             if (nodes.length) {
               this.root_tabs.push([...nodes]);
               nodes.splice(0);
-            } this.root_tabs.push({nodes:[tab_node]});
+            }
+            this.root_tabs.push({nodes:[tab_node]});
           }
         });
         if (nodes.length) {
@@ -232,8 +229,7 @@
       }
     },
     beforeDestroy() {
-      this.unwatch
-        .forEach(unwatch => unwatch());
+      this.unwatch.forEach(unwatch => unwatch());
       this.unwatch = null;
     }
   }
diff --git a/src/components/GlobalTabsNode.vue b/src/components/GlobalTabsNode.vue
index 8f5f9619d..78f46014c 100644
--- a/src/components/GlobalTabsNode.vue
+++ b/src/components/GlobalTabsNode.vue
@@ -6,46 +6,46 @@
 <template>
   <div class="tab-node group">
     <h5
-      v-if="showGroupTile"
-      class="title group-title"
-      :class="{'mobile': isMobile()}"
-      :style="{fontSize: isMobile() ? '1em' : '1.1em'}">{{ node.name }}
+      v-if   = "showGroupTile"
+      class  = "title group-title"
+      :class = "{'mobile': isMobile()}"
+      :style = "{fontSize: isMobile() ? '1em' : '1.1em'}">{{ node.name }}
     </h5>
     <div
-      v-for="row in rows"
-      class="node-row"
-      :class="{'mobile': isMobile()}"
+      v-for  = "row in rows"
+      class  = "node-row"
+      :class = "{'mobile': isMobile()}"
     >
       <template
-        v-for="column in columnNumber"
-        style="padding:2px"
+        v-for = "column in columnNumber"
+        style = "padding:2px"
       >
         <template v-if="getNode(row, column)">
           <component
-            v-if="getNodeType(getNode(row, column)) === 'field'"
-            style="padding: 5px 3px 5px 3px;"
-            :state="getField(getNode(row, column))"
-            @changeinput="changeInput"
-            @addinput="addToValidate"
-            @removeinput="removeToValidate"
-            :changeInput="changeInput"
-            :addToValidate="addToValidate"
-            :removeToValidate="removeToValidate"
-            :feature="feature"
-            :is="getComponent(getField(getNode(row, column)))"/>
+            v-if              = "'field' === getNodeType(getNode(row, column))"
+            style             = "padding: 5px 3px 5px 3px;"
+            :state            = "getField(getNode(row, column))"
+            @changeinput      = "changeInput"
+            @addinput         = "addToValidate"
+            @removeinput      = "removeToValidate"
+            :changeInput      = "changeInput"
+            :addToValidate    = "addToValidate"
+            :removeToValidate = "removeToValidate"
+            :feature          = "feature"
+            :is               = "getComponent(getField(getNode(row, column)))"/>
           <template v-else>
             <tabs
-              v-if="getNodeType(getNode(row, column)) === 'group'"
-              class="sub-group" style="width: 100% !important"
-              :group="true"
-              :tabs="[getNode(row, column)]"
-              v-bind="$props"/>
+              v-if   = "'group' === getNodeType(getNode(row, column))"
+              class  = "sub-group" style="width: 100% !important"
+              :group = "true"
+              :tabs  = "[getNode(row, column)]"
+              v-bind = "$props"/>
             <template v-else>
               <div
-                v-if="showRelationByField"
-                v-disabled="isRelationDisabled(getNode(row, column)) || loadingRelation(getNode(row, column)).loading"
-                @click.stop="handleRelation({relation: getNode(row, column), feature:feature, layerId: layerid})"
-                :style="{cursor: showRelationByField && 'pointer'}"
+                v-if        = "showRelationByField"
+                v-disabled  = "isRelationDisabled(getNode(row, column)) || loadingRelation(getNode(row, column)).loading"
+                @click.stop = "handleRelation({relation: getNode(row, column), feature:feature, layerId: layerid})"
+                :style      = "{cursor: showRelationByField && 'pointer'}"
               >
                 <bar-loader :loading="loadingRelation(getNode(row, column)).loading"/>
                 <div style="display: flex; align-items: center">
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-  import G3wInput from 'components/InputG3W.vue';
+  import G3wInput         from 'components/InputG3W.vue';
   import ProjectsRegistry from 'store/projects';
 
   const Fields = require('gui/fields/fields');
@@ -92,7 +92,7 @@
     },
     data() {
       return {
-        context: this.contenttype,
+        context:          this.contenttype,
         editing_required: false
       }
     },
@@ -103,15 +103,13 @@
        */
       filterNodes() {
         const filterNodes = this.node.nodes && this.node.nodes.filter(node => {
-          if (this.getNodeType(node) === 'group') {
-            return true
-          } else if (!node.nodes && node.name && this.getNodeType(node) != 'group') {
+          if ('group' === this.getNodeType(node) ) { return true }
+          else if (!node.nodes && node.name && 'group' != this.getNodeType(node)) {
             node.relation = true;
             return true
           } else {
             return !!this.fields.find(field => {
-              const field_name = node.field_name ? node.field_name.replace(/ /g,"_") :  node.field_name;
-              return field.name === field_name || node.relation;
+              return (node.field_name ? node.field_name.replace(/ /g,"_") : node.field_name) === field.name  || node.relation;
             })
           }
         });
@@ -130,11 +128,10 @@
        */
       rows() {
         let rowCount = 1;
-        if (this.nodesLength === 0) {
+        if (0 === this.nodesLength ) {
           rowCount = 0;
         } else if (this.columnNumber  <= this.nodesLength) {
-          const rest = this.nodesLength  % this.columnNumber;
-          rowCount = Math.floor(this.nodesLength / this.columnNumber) + rest;
+          rowCount = Math.floor(this.nodesLength / this.columnNumber) + (this.nodesLength % this.columnNumber);
         }
         return rowCount;
       },
@@ -172,7 +169,7 @@
        */
       isRelationDisabled(relation){
         return this.getRelationName(relation.name) === undefined ||
-          (this.contenttype === 'editing' && this.isRelationChildLayerNotEditable(relation));
+          ('editing' === this.contenttype  && this.isRelationChildLayerNotEditable(relation));
         //return this.getRelationName(relation.name) === undefined || (this.contenttype === 'editing' && (relation.nmRelationId || this.isRelationChildLayerNotEditable(relation.name)));
       },
       /**
@@ -192,10 +189,10 @@
       isRelationChildLayerNotEditable(relation){
         const {nmRelationId, name} = relation;
         ///TEMPORARY HANDLE N:M RELATION AS 1:N RELATION
-        const currentProject = ProjectsRegistry.getCurrentProject();
+        const currentProject  = ProjectsRegistry.getCurrentProject();
         const projectRelation = currentProject.getRelationById(name);
         const relationLayerId = projectRelation.referencingLayer;
-        const relationLayer = currentProject.getLayerById(relationLayerId);
+        const relationLayer   = currentProject.getLayerById(relationLayerId);
         // check if is editable. In case of nmRelation layer need to be table to be editable
         return !relationLayer.isEditable();
         // if (nmRelationId) return true;
@@ -239,11 +236,8 @@
        * @returns {{relation}|*}
        */
       getField(node) {
-        if (node.relation) return node;
-        return this.fields.find((field) => {
-          const field_name = node.field_name ? node.field_name.replace(/ /g,"_") : node.field_name;
-          return field.name === field_name;
-        });
+        if (node.relation) { return node }
+        return this.fields.find(f => (node.field_name ? node.field_name.replace(/ /g,"_") : node.field_name) === f.name);
       },
       /**
        *
@@ -254,19 +248,15 @@
         const type = (node.groupbox || node.nodes) ?
           'group' :
           node.relation ? 'relation': 'field';
-        if (type === 'field' && (node.alias === undefined || node.alias === '')) {
+        if ('field' === type && [undefined, ''].includes(node.alias)) {
           node.alias = node.field_name;
         }
         return type;
       },
       getComponent(field) {
-        if (field.relation) {
-          return;
-        } else if (field.query) {
-          return field.input.type;
-        } else {
-          return 'g3w-input';
-        }
+        if (field.relation) { return }
+        else if (field.query) { return field.input.type }
+        else { return 'g3w-input' }
       }
     }
   }
diff --git a/src/components/HeaderItem.vue b/src/components/HeaderItem.vue
index 611d34465..8ad71d442 100644
--- a/src/components/HeaderItem.vue
+++ b/src/components/HeaderItem.vue
@@ -4,15 +4,37 @@
 -->
 
 <template>
-  <li class="customheaderlink dropdown user user-menu" :title="state.title">
-    <a v-if="state.type === 'link'" :href="state.url" :class="{ imagelink : !!state.img}" :target="state.target" class="dropdown-toggle">
-      <img style="max-height: 20px" v-if="state.img" :src="state.img">
+  <li
+    class  = "customheaderlink dropdown user user-menu"
+    :title = "state.title"
+  >
+    <a
+      v-if    = "'link' === state.type"
+      :href   = "state.url"
+      class   = "dropdown-toggle"
+      :class  = "{ imagelink : !!state.img}"
+      :target = "state.target"
+    >
+      <img
+        v-if  = "state.img"
+        style = "max-height: 20px"
+        :src  = "state.img">
       <span v-else>
-        <span v-if="state.i18n" v-t="state.title"></span>
+        <span
+          v-if = "state.i18n"
+          v-t  = "state.title">
+        </span>
         <span v-else>{{state.title}}</span>
       </span>
     </a>
-    <a v-else-if="state.type === 'modal'" style="cursor: pointer" @click="showCustomModal(state.id)" data-toggle="modal" data-target="#custom_modal" class="dropdown-toggle">
+    <a
+      v-else-if   = "'modal' === state.type"
+      style       = "cursor: pointer"
+      @click.stop = "showCustomModal(state.id)"
+      data-toggle = "modal"
+      data-target = "#custom_modal"
+      class       = "dropdown-toggle"
+    >
       <span>{{state.title}}</span>
     </a>
   </li>
diff --git a/src/components/InputG3W.vue b/src/components/InputG3W.vue
index 27280ce8a..422f28f58 100644
--- a/src/components/InputG3W.vue
+++ b/src/components/InputG3W.vue
@@ -16,7 +16,7 @@
         :state="state"
         :is="type">
       </component>
-      <span class="divider"></span>
+      <divider/>
     </div>
     <div v-else style="border-top: 2px solid" class="skin-border-color field-child">
       <h4 style="font-weight: bold">{{ state.label}}</h4>
diff --git a/src/components/InputG3WFormInputs.vue b/src/components/InputG3WFormInputs.vue
index ee60946c5..0afe16f2d 100644
--- a/src/components/InputG3WFormInputs.vue
+++ b/src/components/InputG3WFormInputs.vue
@@ -7,19 +7,25 @@
   <form class="form-horizontal g3w-form">
     <div class="box-primary">
       <div class="box-body">
-          <template v-for="field in state.fields">
-            <g3w-input
-              :state="field"
-              :addToValidate="addToValidate"
-              :changeInput="changeInput"
-              @addToValidate="addToValidate"
-              @changeInput="changeInput">
-            </g3w-input>
-          </template>
+        <template v-for="field in state.fields">
+          <g3w-input
+            :state="field"
+            :removeToValidate="removeToValidate"
+            :addToValidate="addToValidate"
+            :changeInput="changeInput"
+            @addToValidate="addToValidate"
+            @changeInput="changeInput"/>
+        </template>
       </div>
-      <div v-if="show_required_field_message" id="g3w-for-inputs-required-inputs-message">
+      <div
+        v-if="show_required_field_message"
+        id="g3w-for-inputs-required-inputs-message"
+      >
         <span class="hide-cursor-caret-color">*</span>
-        <span class="hide-cursor-caret-color" v-t="'sdk.form.footer.required_fields'"></span>
+        <span
+          class="hide-cursor-caret-color"
+          v-t="'sdk.form.footer.required_fields'">
+        </span>
       </div>
     </div>
   </form>
@@ -46,6 +52,9 @@ export default {
     show_required_field_message: {
       type: Boolean,
       default: false
+    },
+    removeToValidate: {
+      type: Function
     }
 
   },
diff --git a/src/components/Map.vue b/src/components/Map.vue
index a0500c48c..c94cfff99 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -6,25 +6,29 @@
 <template>
 <div :id="maps_container">
 
-  <div v-for="hidemap in hidemaps" :id="hidemap.id" :key="hidemap.id" class="g3w-map hidemap"></div>
+  <div
+    v-for = "hidemap in hidemaps"
+    :key  = "hidemap.id"
+    :id   = "hidemap.id"
+    class = "g3w-map hidemap"></div>
 
   <div :id="target" class="g3w-map">
 
     <!-- COMMON MAP CONTROLS (zoom, querybypolygon, geoscreeenshot, ...) -->
     <div
-      ref="g3w-map-controls"
-      class="g3w-map-controls"
-      style="display: flex"
-      v-disabled="disableMapControls"
-      :class="mapcontrolsalignement"
+      ref        = "g3w-map-controls"
+      class      = "g3w-map-controls"
+      style      = "display: flex"
+      v-disabled = "disableMapControls"
+      :class     = "mapcontrolsalignement"
     ></div>
 
     <!-- FIXME: add description -->
     <div
-      v-if="map_info.info"
-      ref="g3w-map-info"
-      id="g3w-map-info"
-      :style="map_info.style"
+      v-if   = "map_info.info"
+      ref    = "g3w-map-info"
+      id     = "g3w-map-info"
+      :style = "map_info.style"
     >
       {{map_info.info}}
     </div>
@@ -56,13 +60,13 @@ export default {
   name: 'g3w-map',
 
   data() {
-    const {service, target} = this.$options;
+    const { service } = this.$options;
     return {
-      target,
-      maps_container: this.$options.maps_container,
+      target:         this.$options.service.target,
+      maps_container: this.$options.service.maps_container,
+      hidemaps:       service.state.hidemaps,
+      map_info:       service.state.map_info,
       service,
-      hidemaps: service.state.hidemaps,
-      map_info: service.state.map_info,
     }
   },
   components: {
@@ -79,8 +83,7 @@ export default {
   },
   methods: {
     showHideControls() {
-      const mapControls = this.service.getMapControls();
-      mapControls.forEach(control => control.type !== "scaleline" && control.control.showHide());
+      this.service.getMapControls().forEach(c => "scaleline" !== c.type && c.control.showHide());
     }
   },
   async mounted() {
diff --git a/src/components/MapAddLayer.vue b/src/components/MapAddLayer.vue
index 9a3e1392a..6ebe2a9b3 100644
--- a/src/components/MapAddLayer.vue
+++ b/src/components/MapAddLayer.vue
@@ -5,75 +5,161 @@
 
 <template>
   <!-- Modal -->
-  <div class="modal fade" id="modal-addlayer" ref="modal_addlayer" role="dialog">
-    <div class="modal-dialog">
-      <!-- Modal content-->
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal">&times;</button>
-          <h4 style="font-weight: bold" v-t="'mapcontrols.add_layer_control.header'" class="modal-title"></h4>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label v-t="'mapcontrols.add_layer_control.select_projection'" for="projection-layer"></label>
-            <select class="form-control" id="projection-layer" v-model="layer.crs">
-              <option v-for="option in options" :value="option">{{option}}</option>
-            </select>
+  <div
+    class = "modal fade"
+    id    = "modal-addlayer"
+    ref   = "modal_addlayer"
+    role  = "dialog"
+    >
+      <div class="modal-dialog">
+        <!-- Modal content-->
+        <div class="modal-content">
+          <div class="modal-header">
+            <button
+              type         = "button"
+              class        = "close"
+              data-dismiss = "modal">&times;</button>
+            <h4
+              style = "font-weight: bold"
+              v-t   = "'mapcontrols.add_layer_control.header'"
+              class = "modal-title"></h4>
           </div>
-          <layerspositions @layer-position-change="setLayerMapPosition($event)"></layerspositions>
-          <p v-t="'mapcontrols.add_layer_control.select_color'" style="font-weight: 700;"></p>
-          <chrome-picker
-            v-model="layer.color"
-            @input="onChangeColor"
-            style="width:100%; margin:auto"
-          ></chrome-picker>
-          <bar-loader :loading="loading"/>
-          <form id="addcustomlayer">
-            <input ref="input_file" type="file" title=" " @change="onAddLayer($event)" :accept="accepted_extension">
-            <h4 v-t="'mapcontrols.add_layer_control.drag_layer'"></h4>
-            <h4 class="skin-color" style="font-weight: bold" v-if="layer.name">{{ layer.name }}</h4>
-            <div>
-              <i :class="g3wtemplate.getFontClass('cloud-upload')" class="fa-5x" aria-hidden="true"></i>
-            </div>
-            <p style="font-weight: bold">[.gml, .geojson, .kml, .kmz ,.gpx, .csv, .zip(shapefile)]</p>
-          </form>
-          <div v-if="csv_extension" style="padding: 15px; border: 1px solid grey; border-radius: 3px">
-            <bar-loader :loading="csv.loading"/>
-            <div class="select_field">
-              <label v-t="'mapcontrols.add_layer_control.select_csv_separator'" for="g3w-select-field-layer"></label>
-              <select class="form-control" id="g3w-select-separator" v-model="csv.separator">
-                <option v-for="separator in csv.separators" :key="separator" :value="separator">{{ separator }}</option>
-              </select>
-            <div class="select_field" :class="{'g3w-disabled': !csv.headers || csv.headers.length === 0}">
-              <label v-t="'mapcontrols.add_layer_control.select_csv_x_field'" for="g3w-select-x-field"></label>
-              <select class="form-control" id="g3w-select-x-field" v-model="csv.x">
-                <option v-for="header in csv.headers" :key="header" :value="header">{{ header }}</option>
+          <div class="modal-body">
+            <div class="form-group">
+              <label v-t="'mapcontrols.add_layer_control.select_projection'" for="projection-layer"></label>
+              <select class="form-control" id="projection-layer" v-model="layer.crs">
+                <option v-for="option in options" :value="option">{{option}}</option>
               </select>
             </div>
-            <div class="select_field" :class="{'g3w-disabled': !csv.headers || csv.headers.length === 0}">
-              <label v-t="'mapcontrols.add_layer_control.select_csv_y_field'" for="g3w-select-y-field"></label>
-              <select class="form-control" id="g3w-select-y-field" v-model="csv.y">
-                <option v-for="header in csv.headers" :key="header" :value="header">{{ header }}</option>
+            <layerspositions @layer-position-change="setLayerMapPosition($event)"/>
+            <p v-t="'mapcontrols.add_layer_control.select_color'" style="font-weight: 700;"></p>
+            <chrome-picker
+              v-model="layer.color"
+              @input="onChangeColor"
+              style="width:100%; margin:auto"/>
+            <bar-loader :loading="loading"/>
+            <form id="addcustomlayer">
+              <input
+                ref     = "input_file"
+                type    = "file"
+                title   = " "
+                @change = "onAddLayer($event)"
+                :accept = "accepted_extension">
+              <h4 v-t="'mapcontrols.add_layer_control.drag_layer'"></h4>
+              <h4
+                v-if  = "layer.name"
+                class = "skin-color"
+                style = "font-weight: bold">{{ layer.name }}</h4>
+              <div>
+                <i
+                  :class      = "g3wtemplate.getFontClass('cloud-upload')"
+                  class       = "fa-5x"
+                  aria-hidden = "true">
+                </i>
+              </div>
+              <p style="font-weight: bold">[.gml, .geojson, .kml, .kmz ,.gpx, .csv, .zip(shapefile)]</p>
+            </form>
+            <div v-if="csv_extension" style="padding: 15px; border: 1px solid grey; border-radius: 3px">
+              <bar-loader :loading="csv.loading"/>
+              <div class="select_field">
+                <label
+                  v-t = "'mapcontrols.add_layer_control.select_csv_separator'"
+                  for = "g3w-select-field-layer">
+                </label>
+                <select
+                  id      = "g3w-select-separator"
+                  class   = "form-control"
+                  v-model = "csv.separator"
+                  >
+                    <option
+                      v-for  = "separator in csv.separators"
+                      :key   = "separator"
+                      :value = "separator">{{ separator }}</option>
+                  </select>
+                  <div
+                    class="select_field"
+                    :class="{'g3w-disabled': !csv.headers || 0 === csv.headers.length }"
+                  >
+                    <label
+                      for = "g3w-select-x-field"
+                      v-t = "'mapcontrols.add_layer_control.select_csv_x_field'">
+                    </label>
+                    <select
+                      class   = "form-control"
+                      id      = "g3w-select-x-field"
+                      v-model = "csv.x"
+                    >
+                      <option
+                        v-for  = "header in csv.headers"
+                        :key   = "header"
+                        :value = "header">{{ header }}</option>
+                    </select>
+                  </div>
+                  <div
+                    class  = "select_field"
+                    :class = "{ 'g3w-disabled': !csv.headers || 0 === csv.headers.length }"
+                  >
+                    <label
+                      v-t = "'mapcontrols.add_layer_control.select_csv_y_field'"
+                      for = "g3w-select-y-field">
+                    </label>
+                    <select
+                      class   = "form-control"
+                      id      = "g3w-select-y-field"
+                      v-model = "csv.y"
+                    >
+                    <option
+                      v-for  = "header in csv.headers"
+                      :key   = "header"
+                      :value = "header">{{ header }}</option>
+                    </select>
+                  </div>
+              </div>
+            </div>
+            <div
+              class="select_field"
+              :class="{ 'g3w-disabled': !fields || 0 === fields.length }"
+            >
+              <label
+                v-t = "'mapcontrols.add_layer_control.select_field_to_show'"
+                for = "g3w-select-field-layer">
+              </label>
+              <select
+                class   = "form-control"
+                id      = "g3w-select-field-layer"
+                v-model = "field"
+              >
+                <option :value="null">---</option>
+                <option
+                  v-for   = "field in fields"
+                  :key   = "field"
+                  :value = "field">{{ field }}</option>
               </select>
             </div>
-          </div>
-          </div>
-          <div class="select_field" :class="{'g3w-disabled': !fields || fields.length === 0}">
-            <label v-t="'mapcontrols.add_layer_control.select_field_to_show'" for="g3w-select-field-layer"></label>
-            <select class="form-control" id="g3w-select-field-layer" v-model="field">
-              <option :value="null">---</option>
-              <option v-for="field in fields" :key="field" :value="field">{{ field }}</option>
-            </select>
-          </div>
-          <div style="font-weight: bold; font-size: 1.2em; background-color: orange; padding: 10px; text-align: center" v-if="error" v-t="error_message"></div>
-          <div class="modal-footer">
-          <button v-t="'add'" type="button" class="btn btn-success pull-left" @click.stop="addLayer" :disabled="!add"></button>
-          <button v-t="'close'" type="button" class="btn btn-default" data-dismiss="modal"></button>
+            <div
+              v-if  = "error"
+              style = "font-weight: bold; font-size: 1.2em; background-color: orange; padding: 10px; text-align: center"
+              v-t   = "error_message">
+            </div>
+            <div class="modal-footer">
+              <button
+                v-t         = "'add'"
+                type        = "button"
+                class       = "btn btn-success pull-left"
+                @click.stop = "addLayer"
+                :disabled   = "!add">
+              </button>
+              <button
+                v-t          = "'close'"
+                type         = "button"
+                class        = "btn btn-default"
+                data-dismiss = "modal">
+              </button>
+            </div>
+            </div>
         </div>
       </div>
     </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -90,14 +176,14 @@ const CSV_SEPARATORS   = [',', ';'];
 
 //Vue color componet
 ChromeComponent.mounted = async function() {
-  await this.$nextTick();    // remove all the tihing that aren't useful
-  $('.vue-color__chrome__toggle-btn').remove();
-  $('.vue-color__editable-input__label').remove();
-  $('.vue-color__chrome__saturation-wrap').css('padding-bottom','100px');
-  $('.vue-color__chrome').css({
-    'box-shadow': '0 0 0 0',
-    'border': '1px solid #97A1A8'
-  });
+    await this.$nextTick();    // remove all the tihing that aren't useful
+    $('.vue-color__chrome__toggle-btn').remove();
+    $('.vue-color__editable-input__label').remove();
+    $('.vue-color__chrome__saturation-wrap').css('padding-bottom','100px');
+    $('.vue-color__chrome').css({
+      'box-shadow': '0 0 0 0',
+      'border': '1px solid #97A1A8'
+    });
 };
 
 export default {
@@ -109,30 +195,30 @@ export default {
   data() {
     //add map crs if not present
     const MAPEPSG = this.service.getCrs();
-    EPSG.find(epsg => epsg === MAPEPSG) === undefined && EPSG.unshift(MAPEPSG);
+    EPSG.find(epsg => MAPEPSG === epsg ) === undefined && EPSG.unshift(MAPEPSG);
     return {
-      vectorLayer: null,
-      options: EPSG,
-      error: false,
-      error_message: null,
-      position: null,
-      loading: false,
-      fields:[],
-      field: null,
-      accepted_extension: SUPPORTED_FORMAT.map(format => `.${format}`).join(','),
+      vectorLayer:        null,
+      options:            EPSG,
+      error:              false,
+      error_message:      null,
+      position:           null,
+      loading:            false,
+      fields:             [],
+      field:              null,
+      accepted_extension: SUPPORTED_FORMAT.map(f => `.${f}`).join(','),
       csv: {
-        valid: false,
-        loading:false,
-        headers: [],
-        x: null,
-        y: null,
+        valid:       false,
+        loading:     false,
+        headers:     [],
+        x:           null,
+        y:           null,
         separators : CSV_SEPARATORS,
-        separator: CSV_SEPARATORS[0],
+        separator:   CSV_SEPARATORS[0],
       },
       layer: {
-        name: null,
-        type: null,
-        crs: null,
+        name:   null,
+        type:   null,
+        crs:    null,
         mapCrs: null,
         color: {
           hex: '#194d33',
@@ -140,14 +226,14 @@ export default {
             r: 25,
             g: 77,
             b: 51,
-            a: 1
+            a: 1,
           },
           a: 1
         },
-        data: null,
-        visible: true,
-        title: null,
-        id: null,
+        data:     null,
+        visible:  true,
+        title:    null,
+        id:       null,
         external: true,
       }
     }
@@ -155,13 +241,13 @@ export default {
   components: {
     'chrome-picker': ChromeComponent
   },
-  computed:{
+  computed: {
 
     /**
      * @returns {boolean} check whether current uploaded file has CSV extension
      */
     csv_extension() {
-      return this.layer.type === 'csv';
+      return 'csv' === this.layer.type;
     },
 
     /**
@@ -173,14 +259,14 @@ export default {
 
   },
   methods: {
-    setLayerMapPosition(position){
+    setLayerMapPosition(position) {
       this.position = position;
     },
-    setError(type){
+    setError(type) {
       this.error_message = `sdk.errors.${type}`;
       this.error = true;
     },
-    clearError(){
+    clearError() {
       this.error = false;
       this.error_message = null;
     },
@@ -191,30 +277,30 @@ export default {
       const reader = new FileReader();
       const name = evt.target.files[0].name;
       let type = evt.target.files[0].name.split('.');
-      type = type[type.length-1].toLowerCase();
+      type = type[type.length - 1].toLowerCase();
       const input_file = $(this.$refs.input_file);
-      if (SUPPORTED_FORMAT.indexOf(type) !== -1) {
+      if (SUPPORTED_FORMAT.includes(type)) {
         this.clearError();
         this.layer.mapCrs = this.service.getEpsg();
-        this.layer.name = name;
-        this.layer.title = name;
-        this.layer.id = name;
-        this.layer.type = type;
-        if (this.layer.type === 'csv') { // in case of csv
+        this.layer.name   = name;
+        this.layer.title  = name;
+        this.layer.id     = name;
+        this.layer.type   = type;
+        if ('csv' === this.layer.type ) { // in the case of csv
           reader.onload = evt => {
             input_file.val(null);
-            const csv_data = evt.target.result.split(/\r\n|\n/).filter(row => row);
+            const csv_data             = evt.target.result.split(/\r\n|\n/).filter(row => row);
             const [headers, ...values] = csv_data;
             const handle_csv_headers = separator => {
-              let data = null;
+              let data         = null;
               this.csv.loading = true;
               const csv_headers = headers.split(separator);
               const headers_length = csv_headers.length;
               if (headers_length > 1) {
                 this.csv.headers = csv_headers;
-                this.fields = csv_headers;
-                this.csv.x = csv_headers[0];
-                this.csv.y = csv_headers[1];
+                this.fields      = csv_headers;
+                this.csv.x       = csv_headers[0];
+                this.csv.y       = csv_headers[1];
                 data = {
                   headers: csv_headers,
                   separator,
@@ -226,20 +312,20 @@ export default {
               } else {
                 this.csv.headers = this.fields = [];
                 this.vectorLayer = null;
-                this.csv.valid = false;
+                this.csv.valid   = false;
                 this.fields.splice(0);
               }
               this.csv.loading = false;
               return data;
             };
             this.layer.data = handle_csv_headers(this.csv.separator);
-            this.$watch('csv.separator', separator => this.layer.data = handle_csv_headers(separator))
+            this.$watch('csv.separator', s => this.layer.data = handle_csv_headers(s))
           };
           reader.readAsText(evt.target.files[0]);
         } else {
-          const promiseData = new Promise((resolve, reject) =>{
-            if (this.layer.type === 'zip'
-              || this.layer.type === 'kmz') { // in case of shapefile (zip file)
+          const promiseData = new Promise((resolve, reject) => {
+            // in case of shapefile (zip file) or kmz (compressed
+            if ( ['zip', 'kmz'].includes(this.layer.type)) {
               const data = evt.target.files[0];
               input_file.val(null);
               resolve(data);
@@ -254,57 +340,60 @@ export default {
           });
           this.layer.data = await promiseData;
           try {
-            this.fields.splice(0); //reset eventually the fields
+            this.fields.splice(0); //eventually reset the fields
             await this.createVectorLayer();
             this.fields = this.vectorLayer.get('_fields');
-          } catch(err){}
+          } catch(e) { console.warn(e) }
         }
-      } else this.setError('unsupported_format');
+      } else {
+        this.setError('unsupported_format');
+      }
     },
     async createVectorLayer(){
       try {
         this.vectorLayer = await createVectorLayerFromFile(this.layer);
         await this.$nextTick();
-      } catch(err){this.setError('add_external_layer');}
+      } catch(e) { console.warn(e); this.setError('add_external_layer'); }
     },
     async addLayer() {
       if (this.layer.data || this.csv.valid) {
         const {crs} = this.layer;
         try {
           /**
-           * waiting to register a epsg choose if all go right
+           * waiting to register an epsg choice if all go right
            */
           try {
             await Projections.registerProjection(crs);
-          } catch(error) {
-            this.setError(error);
+          } catch(e) {
+            this.setError(e);
+            console.warn(e);
             return;
           }
 
-          this.loading = true;
+          this.loading     = true;
           this.vectorLayer = await createVectorLayerFromFile(this.layer);
           this.vectorLayer.setStyle(createStyleFunctionToVectorLayer({
             color: this.layer.color,
             field: this.field
           }));
           await this.service.addExternalLayer(this.vectorLayer, {
-            crs: this.layer.crs,
-            type: this.layer.type,
+            crs:      this.layer.crs,
+            type:     this.layer.type,
             position: this.position
           });
           $(this.$refs.modal_addlayer).modal('hide');
           this.clear();
 
-        } catch(err){
+        } catch(err) {
           this.setError('add_external_layer');
         }
         this.loading = false
       }
     },
 
-    /**
-     * @since 3.8.0
-     */
+      /**
+       * @since 3.8.0
+       */
     clear() {
       this.clearError();
       this.loading     = false;
@@ -333,24 +422,22 @@ export default {
     }
 
   },
-  watch:{
-    'csv.x'(value){
-      if (value) this.layer.data.x = value
+  watch: {
+    'csv.x'(value) {
+      if (![undefined, null].includes(value)) { this.layer.data.x = value }
     },
-    'csv.y'(value){
-      if (value) this.layer.data.y = value
+    'csv.y'(value) {
+      if (![undefined, null].includes(value)) { this.layer.data.y = value }
     }
   },
   created() {
     this.layer.crs = this.service.getCrs();
     this.service.on('addexternallayer', () => this.modal.modal('show'));
   },
-  async mounted(){
+  async mounted() {
     await this.$nextTick();
     this.modal = $('#modal-addlayer').modal('hide');
-    this.modal.on('hide.bs.modal',  () => {
-      this.clear();
-    });
+    this.modal.on('hide.bs.modal',  () => this.clear() );
   },
   beforeDestroy() {
     this.clear();
diff --git a/src/components/MapControlGeocoding.vue b/src/components/MapControlGeocoding.vue
index d449c6006..dbaf6d04c 100644
--- a/src/components/MapControlGeocoding.vue
+++ b/src/components/MapControlGeocoding.vue
@@ -8,7 +8,7 @@
 -->
 <template>
   <div
-    v-if = "has_providers"
+    v-if   = "has_providers"
     :class = "[ 'ol-geocoder', { 'g3w-disabled': $data.disabled }]"
   >
 
@@ -231,7 +231,7 @@ const LAYER = new ol.layer.Vector({
   name: 'Geocoding',
   source: new ol.source.Vector(),
   style(feature) { // set style function to check if a coordinate search or a search from provider
-    if ('__g3w_marker_coordinates' ===  feature.getId()) {
+    if ('__g3w_marker_coordinates' === feature.getId()) {
       return new ol.style.Style({
         text: new ol.style.Text({
           offsetY: -15, //move marker icon on base point coordinate and not center
@@ -291,7 +291,7 @@ export default {
   props: {
 
     placeholder: {
-      type: String,
+      type:     String,
       required: true,
     },
 
@@ -299,7 +299,7 @@ export default {
      * @since 3.9.0
      */
     noresults: {
-      type: String,
+      type:     String,
       required: true,
     },
 
@@ -307,7 +307,7 @@ export default {
      * @since 3.9.0
      */
     limit: {
-      type: Number,
+      type:     Number,
       required: true,
     },
 
@@ -329,7 +329,7 @@ export default {
      * @since 3.9.0
      */
     providers: {
-      type: Object, // {nominatim: {url:<url>, bing:{url:<url}}}
+      type:     Object, // {nominatim: {url:<url>, bing:{url:<url}}}
       default:  {}
     },
 
@@ -363,7 +363,7 @@ export default {
     },
 
     /**
-     * Get dynamic extent (eg. Bing Places)
+     * Get a dynamic extent (e.g., Bing Places)
      * 
      * @TODO add a checkbox to let user choose whether include searches only from current map extent
      * 
@@ -373,8 +373,11 @@ export default {
      * @since 3.9.0
      */
     extent() {
-      const has_dynamic_extent = Object.keys(this.providers).filter(p => 'nominatim' != p).length > 0
-      return ol.proj.transformExtent(has_dynamic_extent ? GUI.getService('map').getMapExtent() : this.viewbox, this.mapCrs, 'EPSG:4326')
+      return ol.proj.transformExtent(
+        Object.keys(this.providers).filter(p => 'nominatim' != p).length > 0
+          ? GUI.getService('map').getMapExtent()
+          : this.viewbox, this.mapCrs, 'EPSG:4326'
+      )
     },
 
   },
@@ -479,8 +482,8 @@ export default {
             coordinates = ol.proj.transform(coordinates, projection.getCode(), 'EPSG:4326');
             transform = true;
           }
-        } catch (err) {
-          console.warn(err);
+        } catch (e) {
+          console.warn(e);
         }
 
         // request is for a single point (XCoord,YCoord)
@@ -503,7 +506,7 @@ export default {
           });
           //set id
           feature.setId('__g3w_marker_coordinates');
-          //add to layer marker source
+          //add to a layer marker source
           LAYER.getSource().addFeature(feature);
           this._showMarker(coordinates, transform);
           resolve(coordinates);
@@ -551,8 +554,8 @@ export default {
         // heading
         this.$data.results.push({
           __heading: true,
-          provider: p.value.provider,
-          label: this.providers[p.value.provider].label || p.value.label,
+          provider:  p.value.provider,
+          label:     this.providers[p.value.provider].label || p.value.label,
         });
 
         // no results
@@ -591,8 +594,8 @@ export default {
     /**
      * @since 3.9.0
      */
-    onValue(evt) {
-      this.$refs.reset.classList.toggle("gcd-hidden", evt.target.value.trim().length === 0);
+    onValue(e) {
+      this.$refs.reset.classList.toggle("gcd-hidden",0 === e.target.value.trim().length);
     },
 
     /**
@@ -613,18 +616,18 @@ export default {
     _removeItem(uid) {
       const item = (this.$data.results || []).find(r => uid === r.__uid);
 
-      // check if clear markers is running
+      // check if clear markers are running
       if (this.features.length) {
         const source = LAYER.getSource();
         source.removeFeature(source.getFeatureById(uid));
       }
 
-      // check if is open result list
+      // check if is an open result list
       if (item) {
         item.__selected = false;
       }
 
-      // no markers are on map
+      // no markers are on the map
       if (0 === this.features.length) {
         this._hideMarker();
       }
@@ -694,7 +697,7 @@ export default {
         GUI.closeContent();
         return;
       }
-      // check if is already open right panel
+      // check if is already an open right panel
       if (GUI.getCurrentContent()) {
         GUI.closeContent();
       }
@@ -719,13 +722,13 @@ export default {
       this.$data.disabled = true;
       try {
 
-        // get geometry type of target layer
+        // get a geometry type of target layer
         const type = CatalogLayersStoresRegistry.getLayerById(layerId).getGeometryType();
 
         // create a new editing feature (Point/MultiPoint + safe alias for keys without `raw_` prefix)
         const _feature = addZValueToOLFeatureGeometry({
           geometryType: type,
-          feature: new ol.Feature({
+          feature:      new ol.Feature({
             ...Object.entries(feature.attributes).reduce((acc, attr) => ({ ...acc, [attr[0].replace(feature.attributes.provider + '_', '').toLowerCase()]: attr[1] }), {}),
             ...feature.attributes,
             geometry: convertSingleMultiGeometry(feature.geometry, type),
@@ -735,8 +738,8 @@ export default {
         // start editing session
         await editing.getApi().addLayerFeature({ layerId: layerId, feature: _feature });
 
-      } catch(err) {
-        console.warn(err);
+      } catch(e) {
+        console.warn(e);
       }
       this.$data.disabled = false;
     },
@@ -797,12 +800,12 @@ export default {
         id: QueryResultsActionChooseLayer.name,
         layer,
         action: {
-          id: 'choose_layer',
-          class: GUI.getFontClass('pencil'),
-          state: queryresults.createActionState({ layer }),
+          id:         'choose_layer',
+          class:      GUI.getFontClass('pencil'),
+          state:      queryresults.createActionState({ layer }),
           toggleable: true,
-          hint: 'Choose a layer',
-          cbk: (layer, feature, action, index) => {
+          hint:       'Choose a layer',
+          cbk:        (layer, feature, action, index) => {
             // skip layer choose when there is only a single editable layer
             if (1 === editablePointLayers.length) {
               this._editItem(editablePointLayers[0].id, feature);
diff --git a/src/components/MapControlZoomHistory.vue b/src/components/MapControlZoomHistory.vue
index ad5750a79..5ba601f18 100644
--- a/src/components/MapControlZoomHistory.vue
+++ b/src/components/MapControlZoomHistory.vue
@@ -76,7 +76,7 @@
       this.history.items.push(view.calculateExtent(map.getSize()));
 
       this.changeKeyEvent = view.on('change' , debounce(evt => {
-        if (this.history.index !== this.history.items.length -1) {
+        if (this.history.index !== this.history.items.length - 1) {
           this.history.items.splice((this.history.index - this.history.items.length) + 1);
         }
         this.history.items.push(evt.target.calculateExtent(map.getSize()));
diff --git a/src/components/MapFooterLeft.vue b/src/components/MapFooterLeft.vue
index 93ca84ada..d34173e74 100644
--- a/src/components/MapFooterLeft.vue
+++ b/src/components/MapFooterLeft.vue
@@ -4,18 +4,18 @@
 
 <template>
   <div
-    id="map_footer_left"
-    style="display: flex;"
+    id    = "map_footer_left"
+    style = "display: flex;"
   >
     <a
-      href="https://g3wsuite.it/"
-      style="margin-left: 5px; align-self: center; box-shadow: 0 1px 4px 0 rgba(0,0,0,.1), 0 4px 8px 0 rgba(0,0,0,.3);"
-      target="_blank"
+      href   = "https://g3wsuite.it/"
+      style  = "margin-left: 5px; align-self: center; box-shadow: 0 1px 4px 0 rgba(0,0,0,.1), 0 4px 8px 0 rgba(0,0,0,.3);"
+      target = "_blank"
     >
       <img
-        height="15"
-        src="/static/client/images/g3wsuite_logo.png"
-        alt="">
+        height = "15"
+        src    = "/static/client/images/g3wsuite_logo.png"
+        alt    = "">
     </a>
   </div>
 </template>
diff --git a/src/components/MapFooterRight.vue b/src/components/MapFooterRight.vue
index f4d1ca687..47fb62494 100644
--- a/src/components/MapFooterRight.vue
+++ b/src/components/MapFooterRight.vue
@@ -4,62 +4,62 @@
 
 <template>
   <div
-    id="map_footer_right"
-    style="display: flex;"
+    id    = "map_footer_right"
+    style ="display: flex;"
   >
     <div id="scale-control"></div>
 
     <div
-      v-if="mouse.switch_icon && !isMobile()"
-      id="switch-mouse-coordinate"
-      v-t-tooltip:top.create="mouse.tooltip"
-      @click.stop.prevent="switchMapsCoordinateTo4326"
+      v-if                   = "mouse.switch_icon && !isMobile()"
+      id                     = "switch-mouse-coordinate"
+      v-t-tooltip:top.create = "mouse.tooltip"
+      @click.stop.prevent    = "switchMapsCoordinateTo4326"
     >
       <span
-        class="skin-color-dark hide-cursor-caret-color"
-        :class="g3wtemplate.getFontClass('mouse')">
+        class  = "skin-color-dark hide-cursor-caret-color"
+        :class = "g3wtemplate.getFontClass('mouse')">
       </span>
     </div>
 
     <div
-      v-show="!mouse.epsg_4326"
-      id="mouse-position-control">
+      v-show = "!mouse.epsg_4326"
+      id     = "mouse-position-control">
     </div>
 
     <div
-      v-show="mouse.epsg_4326"
-      id="mouse-position-control-epsg-4326">
+      v-show = "mouse.epsg_4326"
+      id     = "mouse-position-control-epsg-4326">
     </div>
 
     <div
-      v-if="showmapunits"
-      id="scale-line-units"
+      v-if = "showmapunits"
+      id   = "scale-line-units"
     >
       <select
-        style="padding: 5px 2px; font-weight: bold; border:0; cursor: pointer"
-        class="skin-color-dark"
-        v-model="mapunit"
+        style   = "padding: 5px 2px; font-weight: bold; border:0; cursor: pointer"
+        class   = "skin-color-dark"
+        v-model = "mapunit"
       >
         <option
-          v-for="unit in service.state.mapunits"
-          :value="unit"
-          v-t="`sdk.mapcontrols.scaleline.units.${unit}`"
-          :selected="mapunit === unit"
-          style="font-weight: bold">
+          v-for     = "unit in service.state.mapunits"
+          :value    = "unit"
+          v-t       = "`sdk.mapcontrols.scaleline.units.${unit}`"
+          :selected = "mapunit === unit"
+          style     = "font-weight: bold">
         </option>
       </select>
 
     </div>
 
     <div
-      id="permalink"
-      v-t-tooltip:top.create="'sdk.tooltips.copy_map_extent_url'"
-      style="background-color: #eeeeee"
+      id                     = "permalink"
+      v-t-tooltip:top.create = "'sdk.tooltips.copy_map_extent_url'"
+      style                  = "background-color: #eeeeee"
     >
       <span
-        class="skin-color-dark"
-        :class="g3wtemplate.getFontClass('link')"
-        @click.stop="createCopyMapExtentUrl">
+        class       = "skin-color-dark"
+        :class      = "g3wtemplate.getFontClass('link')"
+        @click.stop = "createCopyMapExtentUrl">
       </span>
 
     </div>
@@ -84,8 +84,8 @@
       return {
         mouse: {
           switch_icon: false,
-          epsg_4326: false,
-          tooltip: null
+          epsg_4326:   false,
+          tooltip:     null
         },
         mapunit: ApplicationState.map.unit,
       }
@@ -111,9 +111,10 @@
     },
     async mounted() {
       this.service.once('ready', () => {
-        this.mouse.switch_icon = this.service.getMapControlByType({
-          type: 'mouseposition'
-        }) && this.service.getEpsg() !== 'EPSG:4326';
+        this.mouse.switch_icon = (
+          this.service.getMapControlByType({ type: 'mouseposition'})
+          && 'EPSG:4326' !== this.service.getEpsg()
+        );
         this.mouse.tooltip = `ESPG ${this.service.getCrs().split(':')[1]} <--> WGS84`;
       });
     }
diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
index c8fd6e7be..a7c347a67 100644
--- a/src/components/Metadata.vue
+++ b/src/components/Metadata.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-    <div></div>
+  <div></div>
 </template>
 
 <script>
diff --git a/src/components/MetadataLayer.vue b/src/components/MetadataLayer.vue
index f0d685cd9..01a1341a8 100644
--- a/src/components/MetadataLayer.vue
+++ b/src/components/MetadataLayer.vue
@@ -5,25 +5,52 @@
 
 <template>
   <div class="row-info">
-    <h4 @click="showHideInfo" class="layer_header" data-toggle="collapse" :data-target="'#' + state.id">
-      <i class="layer-header-icon action-button nohover" :class="[isSpatial ? g3wtemplate.font['map']: g3wtemplate.font['table']]" aria-hidden="true"></i>
+    <h4
+      @click       = "showHideInfo"
+      class        = "layer_header"
+      data-toggle  = "collapse"
+      :data-target ="`#${state.id}`"
+    >
+      <i
+        class       = "layer-header-icon action-button nohover"
+        :class      = "g3wtemplate.font[isSpatial ? 'map': 'table']"
+        aria-hidden = "true">
+      </i>
       <span class="layer-name">{{ state.name }}</span>
-      <span class="action-button nohover open-close" :class="[show ? g3wtemplate.getFontClass('minus') :g3wtemplate.getFontClass('plus')]"></span>
+      <span
+        class  = "action-button nohover open-close"
+        :class = "g3wtemplate.getFontClass(show ? 'minus': 'plus')"></span>
     </h4>
     <div :id="state.id" class="collapse">
       <ul class="metadata-nav-tabs nav nav-tabs" role="tablist">
         <li role="presentation" class="active spatial-tab">
-          <a v-t="'sdk.metadata.groups.layers.groups.general'" :href="'#layer_general_' + state.id" aria-controls="general" role="tab" data-toggle="tab">
+          <a
+            v-t           = "'sdk.metadata.groups.layers.groups.general'"
+            :href         = "`#layer_general_${state.id}`"
+            aria-controls = "general"
+            role          = "tab"
+            data-toggle   = "tab">
           </a>
         </li>
-        <li v-if="isSpatial" role="presentation" class="spatial-tab">
-          <a v-t="'sdk.metadata.groups.layers.groups.spatial'" :href="'#layer_spatial_' + state.id" aria-controls="profile" role="tab" data-toggle="tab">
+        <li
+          v-if  = "isSpatial"
+          role  = "presentation"
+          class = "spatial-tab">
+          <a
+            v-t           = "'sdk.metadata.groups.layers.groups.spatial'"
+            :href         = "`#layer_spatial_${state.id}`"
+            aria-controls = "profile"
+            role          = "tab"
+            data-toggle   = "tab">
           </a>
         </li>
       </ul>
       <!-- Tab panes -->
       <div class="tab-content">
-        <div role="tabpanel" class="tab-pane active" :id="'layer_general_' + state.id">
+        <div
+          role  = "tabpanel"
+          class = "tab-pane active"
+          :id   = "`layer_general_${state.id}`">
           <div class="container-fluid">
             <div v-if="findAttributeFormMetadataAttribute('title')" class="row">
               <div v-t="'sdk.metadata.groups.layers.fields.subfields.title'" class="col-md-2 col-sm-12 metadata-label"></div>
@@ -78,7 +105,11 @@
             </div>
           </div>
         </div>
-        <div role="tabpanel" class="tab-pane" :id="'layer_spatial_'+state.id">
+        <div
+          role="tabpanel"
+          class="tab-pane"
+          :id="`layer_spatial_${state.id}`"
+        >
           <div class="container-fluid">
             <div v-if="findMetadataAttribute('crs')" class="row">
               <div v-t="'sdk.metadata.groups.layers.fields.subfields.crs'" class="col-sm-2 metadata-label"></div>
@@ -128,7 +159,7 @@
     },
     computed: {
       isSpatial() {
-        return this.state.geometrytype != 'NoGeometry'
+        return 'NoGeometry' !== this.state.geometrytype;
       }
     },
     methods: {
diff --git a/src/components/MetadataProject.vue b/src/components/MetadataProject.vue
index 9e80e2a8f..43214f6cd 100644
--- a/src/components/MetadataProject.vue
+++ b/src/components/MetadataProject.vue
@@ -6,22 +6,54 @@
 <template>
   <div id="project-catalog">
 <!--    <h4 class="content-header-component skin-color">{{ state.name }}</h4>-->
-    <div id="project-catalog-container" style="padding:0" :class="isMobile() ? 'mobile' : null">
+    <div
+      id     = "project-catalog-container"
+      style  = "padding:0"
+      :class = "isMobile() ? 'mobile' : null"
+    >
       <ul role="tablist" class="nav nav-tabs metadata-nav-bar">
+        <!-- GENERAL TAB -->
         <li class="active">
-          <a data-toggle="tab" href="#general"  class="metadata-item-tab general">
-            <i class="action-button nohover" :class="g3wtemplate.getFontClass('info')" aria-hidden="true"></i>
-            <span v-t="'sdk.metadata.groups.general.title'"  style="font-weight: bold"></span>
+          <a
+            data-toggle = "tab"
+            href        = "#general"
+            class       = "metadata-item-tab general"
+          >
+            <i
+              class       = "action-button nohover"
+              :class      = "g3wtemplate.getFontClass('info')"
+              aria-hidden = "true">
+            </i>
+            <span v-t="'sdk.metadata.groups.general.title'" style="font-weight: bold"></span>
           </a>
         </li>
+        <!-- SPATIAL INFO TAB -->
         <li>
-          <a data-toggle="tab" href="#spatial" class="metadata-item-tab spatial">
-            <i class="action-button nohover" :class="iconsClass.globe" aria-hidden="true"></i>
+          <a
+            data-toggle = "tab"
+            href        = "#spatial"
+            class       = "metadata-item-tab spatial"
+          >
+            <i
+              class       = "action-button nohover"
+              :class      = "iconsClass.globe"
+              aria-hidden = "true">
+            </i>
             <span v-t="'sdk.metadata.groups.spatial.title'" style="font-weight: bold"></span>
-          </a></li>
+          </a>
+        </li>
+        <!-- LAYERS TAB -->
         <li>
-          <a data-toggle="tab" href="#metadata_layers" class="metadata-item-tab layers">
-            <i class="action-button nohover" :class="iconsClass.bars" aria-hidden="true"></i>
+          <a
+            data-toggle = "tab"
+            href        = "#metadata_layers"
+            class       = "metadata-item-tab layers"
+          >
+            <i
+              class       = "action-button nohover"
+              :class      = "iconsClass.bars"
+              aria-hidden = "true">
+            </i>
             <span v-t="'sdk.metadata.groups.layers.title'" style="font-weight: bold"></span>
           </a>
         </li>
@@ -31,7 +63,7 @@
       <div id="general" class="tab-pane fade in active">
         <template>
           <div v-for="(data, key) in state.groups.general" class="row h_100 row-info">
-            <component :data="data" :fieldName="key" :is="setComponent(key)"></component>
+            <component :data="data" :fieldName="key" :is="setComponent(key)"/>
           </div>
         </template>
       </div>
@@ -39,13 +71,13 @@
         <div>
           <template>
             <div v-for="(data, key) in state.groups.spatial" class="row row-info">
-              <component :data="data" :fieldName="key" :is="setComponent(key)"></component>
+              <component :data="data" :fieldName="key" :is="setComponent(key)"/>
             </div>
           </template>
         </div>
       </div>
       <div id="metadata_layers" class="tab-pane fade">
-        <metadata-layer :state="layer" v-for="layer in state.groups.layers.layers.value"></metadata-layer>
+        <metadata-layer :state="layer" v-for="layer in state.groups.layers.layers.value"/>
       </div>
     </div>
   </div>
@@ -63,16 +95,16 @@
       return {
         state: this.$options.state,
         iconsClass: {
-          info: this.g3wtemplate.getFontClass("info-circle"),
+          info:  this.g3wtemplate.getFontClass("info-circle"),
           globe: this.g3wtemplate.getFontClass("globe"),
-          bars: this.g3wtemplate.getFontClass("bars")
+          bars:  this.g3wtemplate.getFontClass("bars")
         }
       }
     },
     components: {
-      'metadata-layer': Layer,
-      'metadata-tab-content': MetadataTabContent,
-      'metadata-bbox-content': MetadataBBOXContent,
+      'metadata-layer':            Layer,
+      'metadata-tab-content':      MetadataTabContent,
+      'metadata-bbox-content':     MetadataBBOXContent,
       'metadata-contacts-content': MetadataContactsContent
     },
     methods: {
diff --git a/src/components/MetadataProjectContactsContent.vue b/src/components/MetadataProjectContactsContent.vue
index 0c1f62985..5a261579c 100644
--- a/src/components/MetadataProjectContactsContent.vue
+++ b/src/components/MetadataProjectContactsContent.vue
@@ -11,18 +11,21 @@
         <div class="row">
           <div class="col-sm-2 metadata-contact-label">
             <i class="contact-icon" :class="iconsClass[key]" aria-hidden="true"></i>
-            <span v-t="'sdk.metadata.groups.general.fields.subfields.contactinformation.' + key"></span>
+            <span v-t="`sdk.metadata.groups.general.fields.subfields.contactinformation.${key}`"></span>
           </div>
           <div class="col-sm-10">
-            <template v-if="key === 'personprimary'" >
+            <template v-if="'personprimary' === key">
               <div v-for="(subvalue, key) in value">
-                <span v-t="'sdk.metadata.groups.general.fields.subfields.contactinformation.' + key" class="metadata-contact-label"></span>
+                <span
+                  v-t="`sdk.metadata.groups.general.fields.subfields.contactinformation.${key}`"
+                  class="metadata-contact-label">
+                </span>
                 <span>{{ subvalue }}</span>
               </div>
             </template>
             <div v-else>
-              <template v-if="key === 'contactelectronicmailaddress'">
-                <a style="font-weight: bold" :href="'mailto:' + sanitizeValue(value)">{{sanitizeValue(value)}}</a>
+              <template v-if="'contactelectronicmailaddress' === key ">
+                <a style="font-weight: bold" :href="`mailto: ${sanitizeValue(value)}`">{{sanitizeValue(value)}}</a>
               </template>
               <template v-else>
                 {{ sanitizeValue(value) }}
@@ -45,8 +48,8 @@
       return {
         iconsClass: {
           contactelectronicmailaddress: this.g3wtemplate.getFontClass("mail"),
-          personprimary: this.g3wtemplate.getFontClass("user"),
-          contactvoicetelephone: this.g3wtemplate.getFontClass("mobile")
+          personprimary:                this.g3wtemplate.getFontClass("user"),
+          contactvoicetelephone:        this.g3wtemplate.getFontClass("mobile")
         }
       }
     },
@@ -61,9 +64,7 @@
         }
         return value;
       },
-      geti18n(key) {
-
-      }
+      geti18n(key) {}
     }
   }
 </script>
diff --git a/src/components/MetadataProjectTabContent.vue b/src/components/MetadataProjectTabContent.vue
index 453789734..475a7c6f6 100644
--- a/src/components/MetadataProjectTabContent.vue
+++ b/src/components/MetadataProjectTabContent.vue
@@ -6,16 +6,16 @@
 <template>
   <div class="wrap-content-tab">
     <div class="col-sm-2 metadata-label" v-t="data.label"></div>
-    <div v-if="fieldName == 'keywords'" class="col-sm-10 value">
+    <div v-if="'keywords' === fieldName " class="col-sm-10 value">
       {{ arrayToString }}
     </div>
-    <div v-else-if="fieldName == 'wms_url'" class="col-sm-10 value" style="margin-top:0">
+    <div v-else-if="'wms_url' === fieldName " class="col-sm-10 value" style="margin-top:0">
       <span>{{ data.value }}</span>
     </div>
     <div v-else-if="!isArrayorObject(data.value)" class="col-sm-10 value" style="margin-top:0">
       <span v-html="data.value"></span>
     </div>
-    <div v-else-if="fieldName == 'abstract'" class="col-sm-10 value" style="margin-top:0">
+    <div v-else-if="'abstract' === fieldName " class="col-sm-10 value" style="margin-top:0">
       <span v-html="data.value"></span>
     </div>
     <div v-else class="col-sm-10 value" style="margin-top:0">
@@ -33,7 +33,7 @@
     name: "metadata-tab-content",
 
     props: {
-      data: {},
+      data:      {},
       fieldName: {}
     },
     computed: {
@@ -45,7 +45,7 @@
       isArrayorObject(value) {
         return Array.isArray(value) || typeof value === 'object';
       }
-    }
+    },
   }
 </script>
 
diff --git a/src/components/Print.vue b/src/components/Print.vue
index 28ff1f280..13932217d 100644
--- a/src/components/Print.vue
+++ b/src/components/Print.vue
@@ -7,221 +7,710 @@
   <ul id="print" class="treeview-menu">
     <li>
       <form class="g3w-search-form form-horizonal">
+
         <div class="box-body">
+
           <transition :duration="500" name="fade">
             <bar-loader :loading="state.loading"/>
           </transition>
+
           <helpdiv message='sdk.print.help'/>
 
+          <!-- PRINT TEMPLATE -->
           <label for="templates" v-t="'sdk.print.template'"></label>
           <select
-            id="templates"
-            class="form-control"
-            @change="onChangeTemplate"
-            v-model="state.template"
-            :style="{marginBottom: this.state.atlas && '10px'}">
-
-            <option
-              v-for="print in state.print"
-              :value="print.name">{{ print.name }}
-            </option>
-
+            id      = "templates"
+            class   = "form-control"
+            @change = "changeTemplate"
+            v-model = "state.template"
+            :style  = "{ marginBottom: this.state.atlas && '10px' }"
+          >
+            <option v-for="print in state.print" :value="print.name">{{ print.name }}</option>
           </select>
 
           <template v-if="!state.atlas">
 
-            <label for="scala" v-t="'sdk.print.scale'"></label>
+            <!-- PRINT SCALE -->
+            <label for="scale" v-t="'sdk.print.scale'"></label>
             <select
-              v-disabled="noMaps"
-              id="scala"
-              class="form-control"
-              @change="onChangeScale"
-              v-model="state.scala">
-
+              id         = "scale"
+              v-disabled = "!has_maps"
+              class      = "form-control"
+              @change    = "changeScale"
+              v-model    = "state.scale"
+            >
               <option
-                v-for="scala in state.scale"
-                :value="scala.value">{{ scala.label }}
+                v-for="scale in state.scales"
+                :value="scale.value">
+                {{ scale.label }}
               </option>
-
             </select>
 
+            <!-- PRINT DPI -->
             <label for="dpi">dpi</label>
             <select
-              class="form-control"
-              @change="onChangeDpi"
-              v-model="state.dpi" id="dpi"
+              id      = "dpi"
+              class   = "form-control"
+              v-model = "state.dpi"
             >
-              <option
-                v-for="dpi in state.dpis"
-              >{{ dpi }}</option>
+              <option v-for="dpi in state.dpis">{{ dpi }}</option>
             </select>
 
+            <!-- PRINT ROTATION -->
             <label for="rotation" v-t="'sdk.print.rotation'"></label>
             <input
-              v-disabled="noMaps"
-              min="-360"
-              max="360"
-              @input="onChangeRotation"
-              v-model="state.rotation"
-              id="rotation"
-              class="form-control"
-              type="number"
-            >
-            <label for="format" v-t="'sdk.print.format'"></label>
+              id         = "rotation"
+              v-disabled = "!has_maps"
+              min        = "-360"
+              max        = "360"
+              @input     = "changeRotation"
+              v-model    = "state.rotation"
+              class      = "form-control"
+              type       = "number"
+            />
 
+            <!-- PRINT FORMAT -->
+            <label for="format" v-t="'sdk.print.format'"></label>
             <select
-              class="form-control"
-              v-model="state.output.format"
-              id="format"
+              id      = "format"
+              class   = "form-control"
+              v-model = "state.format"
             >
               <option
                 v-for="format in state.formats"
-                :value="format.value"
-              >{{ format.label }}</option>
+                :value="format.value">
+                {{ format.label }}
+              </option>
             </select>
 
           </template>
 
-          <!-- since 3.8.7 -->
-          <!-- Needed to recreate a component on change template -->
-          <template v-else-if="!templateChanged">
-            <template v-if="state.atlas.field_name">
-              <select-atlas-field-values
-                @disable-print-button="setDisabledPrintButton"
-                @set-values="setAtlasValues"
-                :atlas="state.atlas"
-                :reset="!state.isShow"/>
+          <!-- PRINT ATLAS -->
+          <div
+            v-if  = "state.atlas"
+            class = "form-group"
+            style = "width: 100%;"
+            ref   = "print_atlas"
+          >
+            <!-- ORIGINAL SOURCE: src/componentsPrintSelectAtlasFieldValues.vue@v3.9.3 -->
+            <template v-if = "has_autocomplete">
+              <label for="print_atlas_autocomplete"><span>{{ state.atlas.field_name }}</span></label>
+              <select id="print_atlas_autocomplete" :name="state.atlas.field_name" class="form-control"></select>
             </template>
-
+            <!-- ORIGINAL SOURCE: src/components/PrintFidAtlasValues.vue@v3.9.3 -->
             <template v-else>
-              <fid-atlas-values
-                @disable-print-button="setDisabledPrintButton"
-                @set-values="setAtlasValues"
-                :atlas="state.atlas"
-                :reset="!state.isShow"/>
+              <label><span>fids [max: {{ state.atlas.feature_count - 1 }}]</span></label>
+              <input class="form-control" v-model="atlas_values" @keydown.space.prevent>
+              <div id="fid-print-atals-instruction">
+                <div id="fids_intruction"      v-t="'sdk.print.fids_instruction'"></div>
+                <div id="fids_examples_values" v-t="'sdk.print.fids_example'"></div>
+              </div>
             </template>
-          </template>
+          </div>
 
-          <template v-if="state.labels && state.labels.length">
-            <div
-              class="print-labels-content"
-              style="margin-top: 5px;"
-            >
-              <label
-                style="font-weight: bold; font-size: 1.1em; display: block; border-bottom: 2px solid #ffffff; margin-bottom: 5px;"
-                class="skin-color"
-                v-t="'sdk.print.labels'">
-              </label>
-              <div
-                class="labels-input-content"
-                style="max-height: 120px; overflow-y: auto"
+          <div v-if="state.labels && state.labels.length" class="print-labels-content">
+            <label class="skin-color" v-t="'sdk.print.labels'"></label>
+            <div class="labels-input-content">
+              <span
+                v-for = "label in state.labels"
+                :key  = "label.id"
               >
-                <span
-                  v-for="label in state.labels"
-                  :key="label.id"
-                >
-                  <label :for="`g3w_label_id_input_${label.id}`">{{label.id}}</label>
-                  <input
-                    :id="`g3w_label_id_input_${label.id}`"
-                    class="form-control"
-                    v-model="label.text"/>
-                </span>
-              </div>
+                <label :for="`g3w_label_id_input_${label.id}`">{{ label.id }}</label>
+                <input
+                  :id     = "`g3w_label_id_input_${label.id}`"
+                  class   = "form-control"
+                  v-model = "label.text"
+                />
+              </span>
             </div>
-          </template>
+          </div>
+
         </div>
-        <div
-          class="box-footer"
-          style="background-color: transparent"
-        >
+
+        <div class="box-footer">
           <span>
             <button
-              id="printbutton"
-              style="width:100%; font-weight: bold"
-              class="sidebar-button-run btn"
-              v-disabled="button.disabled"
-              @click.stop.prevent="print"
+              id                  = "printbutton"
+              class               = "sidebar-button-run btn"
+              v-disabled          = "disabled"
               v-download
-              v-t="'create_print'">
-            </button>
+              v-t                 = "'create_print'"
+              @click.stop.prevent = "print"
+            ></button>
           </span>
         </div>
+
       </form>
     </li>
   </ul>
 </template>
 
 <script>
-import SelectAtlasFieldValues from 'components/PrintSelectAtlasFieldValues.vue';
-import FidAtlasValues from 'components/PrintFidAtlasValues.vue';
+import {
+  PRINT_SCALES,
+  PRINT_RESOLUTIONS,
+  PRINT_FORMATS,
+  TIMEOUT,
+}                                   from 'app/constant';
+import Component                    from 'core/g3w-component';
+import ApplicationState             from 'store/application-state';
+import CatalogLayersStoresRegistry  from 'store/catalog-layers';
+import ProjectsRegistry             from 'store/projects';
+import ApplicationService           from 'services/application';
+import GUI                          from 'services/gui';
+import { getScaleFromResolution }   from 'utils/getScaleFromResolution';
+import { getResolutionFromScale }   from 'utils/getResolutionFromScale';
+import { getMetersFromDegrees }     from 'utils/getMetersFromDegrees';
+import { downloadFile }             from 'utils/downloadFile';
+import { printAtlas }               from 'utils/printAtlas';
+import { print }                    from 'utils/print';
+
+import resizeMixin                  from 'mixins/resize';
+
+import * as vueComp                 from 'components/PrintPage.vue';
+
+const { t } = require('core/i18n/i18n.service');
 
 export default {
 
   /** @since 3.8.6 */
   name: 'print',
 
+  mixins: [resizeMixin],
+
   data() {
+    this.init();
     return {
-      state: null,
-      /** @since 3.8.7 **/
-      templateChanged: false,  // useful to a redrawn component related to change template
-      button: {
-        class: "btn-success",
-        type :"print",
-        disabled: false
-      }
-    }
-  },
-  components: {
-    SelectAtlasFieldValues,
-    FidAtlasValues
+      state: this.state || {},
+      disabled: false,
+      /** @since 3.10.0 */
+      atlas_values: [],
+    };
   },
+
   computed: {
-    disabled() {
-      return this.state.output.loading || (!!this.state.atlas &&  0 === this.state.atlasValues.length);
-    },
+
     /**
-     * @since v3.10.0
-     * Check if current print has maps (only alphanumerical data)
-     * @return {boolean}
+     * @return { boolean } whether current print has maps (only alphanumerical data)
+     *
+     * @since 3.9.4
      */
-    noMaps() {
-      return 0 === this.state.maps.length;
-    }
+    has_maps() {
+      return (this.state.maps || []).length > 0;
+    },
+
+    has_autocomplete() {
+      return !!(this.state.atlas && this.state.atlas.field_name);
+    },
+
   },
+
   methods: {
-    setDisabledPrintButton(bool=false) {
-      this.button.disabled = bool;
+
+    init() {
+      this._init        = undefined !== this._init ? this._init: false;
+      this._moveKey     = this._moveKey || null;
+      this._page        = this._page || null;
+      this._resolutions = this._resolutions || {};
+
+      const print   = ProjectsRegistry.getCurrentProject().getPrint() || [];
+      const visible = print.length > 0;
+
+      this.state = Object.assign(this.state || {}, {
+        visible,
+        print,
+        loading:      false,
+        downloading:  false,
+        url:          null,
+        layers:       true,
+        maps:         visible ? print[0].maps   : undefined,
+        labels:       visible ? print[0].labels : undefined,
+        template:     visible ? print[0].name   : undefined,
+        atlas:        visible ? print[0].atlas  : undefined,
+        rotation:     visible ? 0               : undefined,
+        inner:        [0, 0, 0, 0],
+        scales:       PRINT_SCALES,
+        scale:        visible ? null            : undefined,
+        dpis:         PRINT_RESOLUTIONS,
+        dpi:          PRINT_RESOLUTIONS[0],
+        formats:      PRINT_FORMATS,
+        format:       PRINT_FORMATS[0].value,
+      });
     },
-    setAtlasValues(values=[]) {
-      this.state.atlasValues = values;
+
+    resize() {
+      if (this.select2 && !ApplicationState.ismobile) {
+        this.select2.select2('close');
+      }
     },
-    async onChangeTemplate() {
-      this.templateChanged = true; // set true
-      this.$options.service.changeTemplate();
+
+    async changeTemplate() {
+      if (!this.state.template) {
+        return;
+      }
+
       await this.$nextTick();
-      this.templateChanged = false; // reset to false
-    },
-    onChangeScale() {
-      this.$options.service.changeScale()
-    },
-    onChangeFormat() {},
-    onChangeDpi() {},
-    onChangeRotation(evt) {
-      if (this.state.rotation >= 0 && !_.isNil(this.state.rotation) && this.state.rotation != '') {
-        this.state.rotation = (this.state.rotation > 360) ? 360 : this.state.rotation;
-        evt.target.value = this.state.rotation;
-      } else if (this.state.rotation < 0) {
-        this.state.rotation = (this.state.rotation < -360) ? -360 : this.state.rotation;
-        evt.target.value = this.state.rotation;
+
+      // destroy select2 dom element and remove all events
+      if (this.select2) {
+        this.select2.select2('destroy');
+        this.select2.off();
+        this.select2 = null;
+      }
+
+      this.disabled = false;
+
+      const has_previous = this.state.atlas || 0 === this.state.maps.length;
+      const print        = this.state.print.find(p => p.name === this.state.template)
+
+      Object.assign(this.state, {
+        maps:        print.maps,
+        atlas:       print.atlas,
+        labels:      print.labels,
+      });
+
+      this.atlas_values = [];
+
+      if (this.state.atlas) {
+        this._clearPrint();
+      } else if (has_previous) {
+        this.showPrintArea(true);
       } else {
-        this.state.rotation = 0;
+        this._setPrintArea();
+      }
+
+      await this.$nextTick();
+    },
+
+    /**
+     * On scale change set print area
+     */
+    changeScale() {
+      if (this.state.scale) {
+        this._setPrintArea();
       }
-      this.$options.service.changeRotation();
     },
-    print() {
-      this.$options.service.print();
+
+    /**
+     * On change rotation, rotate print area
+     */
+    changeRotation() {
+      this.state.rotation = this.state.rotation >= 0 ? Math.min(this.state.rotation || 0, 360) : Math.max(this.state.rotation || 0, -360);
+      GUI.getService('map').setInnerGreyCoverBBox({ rotation: this.state.rotation });
+    },
+
+    /**
+     * @param extent
+     *
+     * @returns { string }
+     */
+    getOverviewExtent(extent={}) {
+      const { xmin, xmax, ymin, ymax } = extent;
+      return (GUI.getService('map').isAxisOrientationInverted() ? [ymin, xmin, ymax, xmax] : [xmin, ymin, xmax, ymax]).join();
+    },
+
+    /**
+     * @returns { string }
+     */
+    getPrintExtent() {
+      const map          = GUI.getService('map').viewer.map;
+      const [xmin, ymin] = map.getCoordinateFromPixel([this.state.inner[0], this.state.inner[1]]);
+      const [xmax, ymax] = map.getCoordinateFromPixel([this.state.inner[2], this.state.inner[3]]);
+      return (GUI.getService('map').isAxisOrientationInverted() ? [ymin, xmin, ymax, xmax] : [xmin, ymin, xmax, ymax]).join();
+    },
+
+    /**
+     * @returns { Promise<unknown> }
+     */
+    async print() {
+      const has_atlas = !!this.state.atlas;
+      let err, download_id;
+
+      this.state.loading = true;
+
+      try {
+
+        // disable sidebar
+        GUI.disableSideBar(true);
+
+        // ATLAS PRINT
+        if (has_atlas) {
+          download_id = ApplicationService.setDownload(true);
+          await downloadFile({
+            url: (await printAtlas({
+              template: this.state.template,
+              field:    this.state.atlas.field_name || '$id',
+              values:   this.state.atlas_values,
+              download: true
+            })).url,
+            filename: this.state.template,
+            mime_type: 'application/pdf'
+          });
+        }
+
+        // SIMPLE PRINT
+        if (!has_atlas) {
+          this.state.url       = null;
+          this.state.layers    = true;
+
+          //In case of already print page open, need to close it otherwise is appended on a dom element
+          if (this._page) {
+            GUI.closeContent();
+          }
+
+          this._page = new Component({ service: { state: this.state }, vueComponentObject: vueComp });
+
+          const output = await print(
+            {
+              rotation:             this.state.rotation,
+              dpi:                  this.state.dpi,
+              template:             this.state.template,
+              scale:                this.state.scale,
+              format:               this.state.format,
+              labels:               this.state.labels,
+              is_maps_preset_theme: this.state.maps.some(m => undefined !== m.preset_theme),
+              maps:                 this.state.maps.map(m => ({
+                name:         m.name,
+                preset_theme: m.preset_theme,
+                scale:        m.overview ? m.scale : this.state.scale,
+                extent:       m.overview ? this.getOverviewExtent(m.extent) : this.getPrintExtent()
+              })),
+            },
+            ProjectsRegistry.getCurrentProject().getOwsMethod()
+          );
+
+          this.state.url       = output.url;
+          this.state.layers    = output.layers;
+          //after component mount
+          this._page.getInternalComponent().$on('hook:mounted', () => this.state.loading = false);
+          // set print area after closing content
+          this._page.unmount = () => {
+            GUI.getService('map').viewer.map.once('postrender', this._setPrintArea.bind(this));
+            this.state.downloading = false;
+            this.state.loading     = false;
+            return Component.prototype.unmount.call(this._page);
+          };
+
+          GUI.setContent({
+            content: this._page,
+            title: 'print',
+            perc: 100
+          });
+        }
+
+      } catch(e) {
+        err = e;
+        this.state.loading = false;
+        console.warn(e);
+      }
+
+      if (download_id) {
+        ApplicationService.setDownload(false, download_id);
+      }
+
+      // in case of no layers
+      if (has_atlas || !this.state.layers) {
+        GUI.disableSideBar(false);
+      }
+
+      if (err) {
+        console.warn(err);
+        GUI.notify.error(err || t("info.server_error"));
+        GUI.closeContent();
+      }
+
+    },
+
+    /**
+     * @param { boolean } show
+     */
+    showPrintArea(show) {
+      // close content if open
+      const reset = !show;
+      if (reset && this.select2)           { this.select2.val(null).trigger('change'); }
+      if (reset)                           { this.atlas_values = []; }
+      if (reset && !this.has_autocomplete) { this.disabled = true }
+      GUI
+        .closeContent()
+        .then(component => {
+          setTimeout(() => {
+            const map      = component.getService();
+            map.getMap().once('postrender', e => {
+              if (!show) {
+                return this._clearPrint();
+              }
+              this._moveKey = map.viewer.map.on('moveend', this._setPrintArea.bind(this));
+              this._initPrintConfig();
+              // show print area
+              if (undefined === this.state.atlas) {
+                this._setPrintArea();
+                map.startDrawGreyCover();
+              }
+            });
+            map.getMap().renderSync();
+          })
+        })
+    },
+
+    /**
+     * Calculate internal print extent
+     */
+    _setPrintArea() {
+      // No maps set. Only attributes label
+      if (!this.has_maps) {
+        return this._clearPrint();
+      }
+      const map        = GUI.getService('map').viewer.map;
+      const size       = map.getSize();
+      const resolution = map.getView().getResolution();
+      const { h, w }   = this.state.maps.find(m => !m.overview);
+      const res        = GUI.getService('map').getMapUnits() === 'm' ? resolution : getMetersFromDegrees(resolution); // resolution in meters
+      const w2         = (((w / 1000.0) * parseFloat(this.state.scale)) / res) / 2;
+      const h2         = (((h / 1000.0) * parseFloat(this.state.scale)) / res) / 2;
+      const [x, y]     = [ (size[0]) / 2, (size[1]) / 2 ]; // current map center: [x, y] (in pixel)
+      this.state.inner = [x - w2, y + h2, x + w2, y - h2]; // inner bbox: [xmin, ymax, xmax, ymin] (in pixel)
+      GUI.getService('map').setInnerGreyCoverBBox({
+        type: 'pixel',
+        inner: this.state.inner,
+        rotation: this.state.rotation
+      });
+    },
+
+    _clearPrint() {
+      ol.Observable.unByKey(this._moveKey);
+      this._moveKey = null;
+      GUI.getService('map').stopDrawGreyCover();
+    },
+
+    /**
+     * Set all scales based on max resolution
+     *
+     * @param maxResolution
+     */
+    _setScales(maxResolution) {
+      let res        = maxResolution;
+      const units    = GUI.getService('map').getMapUnits();
+      const mapScale = getScaleFromResolution(res, units);
+      const scales   = this.state.scales.sort((a, b) => b.value - a.value);
+      let scale      = [];
+      let first      = true;
+      scales
+        .forEach((scala, i) => {
+          if (mapScale > scala.value) {
+            let s = first ? scales[i-1] : scala;
+            first = false;
+            scale.push(s);
+            res = getResolutionFromScale(s.value, units);
+            this._resolutions[s.value] = res;
+            res /= 2;
+          }
+        });
+      this.state.scales = scale;
+    },
+
+    _initPrintConfig() {
+      const view = GUI.getService('map').viewer.map.getView();
+      if (!this._initialized) {
+        this._setScales(view.getMaxResolution());
+        this._initialized = true;
+      }
+      const resolution = view.getResolution();
+
+      // set current scale
+      Object
+        .entries(this._resolutions)
+        .find(([scala, res]) => {
+          if (resolution <= res) {
+            this.state.scale = scala;
+            return true
+          }
+        });
+    },
+
+    reload() {
+      this.state.print    = ProjectsRegistry.getCurrentProject().state.print || [];
+      const visible       = this.state.print.length > 0;
+      const init          = this._initialized;
+      this.state.template = visible ? this.state.print[0].name : this.state.template;
+      if (visible && !init) {
+        this.init();
+      }
+      if (visible) {
+        this._initPrintConfig();
+        const map = GUI.getService('map');
+        map.on('changeviewaftercurrentproject', () => {
+          this.state.scales = PRINT_SCALES;
+          this._setScales(map.viewer.map.getView().getMaxResolution());
+        });
+      } else {
+        this._clearPrint();
+      }
+    },
+
+  },
+
+  watch: {
+
+    async has_autocomplete(b) {
+      if (!b) return;
+
+      await this.$nextTick();
+
+      this.select2 = $('#print_atlas_autocomplete').select2({
+        width: '100%',
+        multiple: true,
+        dropdownParent: $(this.$refs.print_atlas.$el),
+        minimumInputLength: 1,
+        ajax: {
+          delay: 500,
+          transport: async d => {
+            try {
+              d.success({
+                results: (await CatalogLayersStoresRegistry.getLayerById(this.state.atlas.qgs_layer_id).getFilterData({
+                  suggest: `${this.state.atlas.field_name}|${d.data.q}`,
+                  unique: this.state.atlas.field_name,
+                })).map(v => ({ id: v, text: v }))
+              });
+            } catch(e) {
+              console.warn(e);
+              d.failure(e);
+            }
+          }
+        },
+        /**
+         * @param { Object } params
+         * @param params.term the term that is used for searching
+         * @param { Object } data
+         * @param data.text the text that is displayed for the data object
+         */
+        matcher: (params, data) => {
+            const search = params.term ? params.term.toLowerCase() : params.term;
+            if ('' === (search || '').toString().trim())                             return data;        // no search terms → get all of the data
+            if (data.text.toLowerCase().includes(search) && undefined !== data.text) return { ...data }; // the searched term
+            return null;                                                                                 // hide the term
+        },
+        language: {
+          noResults:     () => t("sdk.search.no_results"),
+          errorLoading:  () => t("sdk.search.error_loading"),
+          searching:     () => t("sdk.search.searching"),
+          inputTooShort: d => `${t("sdk.search.autocomplete.inputshort.pre")} ${d.minimum - d.input.length} ${t("sdk.search.autocomplete.inputshort.post")}`,
+        },
+      });
+      this.select2.on('select2:select',   e => { this.atlas_values.push(e.params.data.id); });
+      this.select2.on('select2:unselect', e => { this.atlas_values = this.atlas_values.filter(v => v != e.params.data.id); }); // NB: != instead of !== because sometime we need to compare "numbers" with "strings"
+    },
+
+    atlas_values: {
+      immediate: true,
+      async handler(vals) {
+        if (this._skip_atlas_check || !this.atlas) {
+          return;
+        }
+        if (this.has_autocomplete) {
+          this.disabled = 0 === vals.length;
+          return;
+        }
+        const validate = n => (n && Number.isInteger(1 * n) && 1 * n >= 0 && 1 * n < this.state.atlas.feature_count) || null;
+        const values = new Set();
+        const value = (vals ? vals[0] : '') || '';
+        value
+          .split(',')
+          .filter(v => v)
+          .forEach(value => {
+            if (-1 === value.indexOf('-') && validate(value) !== null) {
+              values.add(value);
+              return;
+            }
+            const _values = value.split('-');
+            const range = _values.filter(v => validate(v) !== null);
+            if (range.length === _values.length && range.reduce((bool, value, i) => bool && ((0 === i) || range[i-1] <= value), true)) {
+              for (let i = 1; i < range.length; i++) {
+                for (let j = range[i-1]; j < range[i]; j++ ) { values.add(j+''); }
+              }
+              values.add(range[range.length-1]);
+            }
+          });
+        this._skip_atlas_check = true;
+        this.atlas_values = Array.from(values);
+        await this.$nextTick();
+        this._skip_atlas_check = false;
+        this.disabled = '' === value.trim();
+      }
+    },
+
+    'state.url': async function(url) {
+      if (!url) {
+        return;
+      }
+      let timeout;
+
+      try {
+
+        await this.$nextTick();
+
+        // add timeout
+        timeout = setTimeout(() => {
+          GUI.disableSideBar(false);
+          this.state.downloading = false;
+          GUI.showUserMessage({ type: 'alert', message: 'timeout' });
+        }, TIMEOUT);
+
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw response.statusText;
+        }
+      } catch (e) {
+        console.warn(e);
+        GUI.notify.error(e || t("info.server_error"));
+        GUI.closeContent();
+      } finally {
+        clearTimeout(timeout);
+        GUI.disableSideBar(false);
+        this.state.downloading = false;
+      }
+
     }
-  }
+
+  },
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.print-labels-content {
+  margin-top: 5px;
+}
+.print-labels-content > label.skin-color {
+  font-weight: bold;
+  font-size: 1.1em;
+  display: block;
+  border-bottom: 2px solid #ffffff;
+  margin-bottom: 5px;
+}
+.print-labels-content > .labels-input-content {
+  max-height: 120px;
+  overflow-y: auto
+}
+.g3w-search-form > .box-footer {
+  background-color: transparent;
+}
+#printbutton {
+  width:100%;
+  font-weight: bold;
+}
+.form-group > label {
+  display: block;
+}
+#fid-print-atals-instruction {
+  margin-top: 5px;
+  color: #fff;
+}
+#fids_intruction {
+  white-space: pre-line;
+}
+#fids_examples_values {
+  margin-top: 3px;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PrintFidAtlasValues.vue b/src/components/PrintFidAtlasValues.vue
deleted file mode 100644
index c9b21dfd6..000000000
--- a/src/components/PrintFidAtlasValues.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <div class="form-group" style="width: 100%;">
-    <label :for="print_atlas_fid" style="display: block">
-      <span>fids [max: {{atlas.feature_count - 1 }}]</span>
-    </label>
-    <input class="form-control" v-model="value" @keydown.space.prevent>
-    <div id="fid-print-atals-instruction" style="margin-top: 5px; color: #ffffff">
-      <div id="fids_intruction" v-t="'sdk.print.fids_instruction'" style="white-space: pre-line"></div>
-      <div id="fids_examples_values" style="margin-top: 3px; font-weight: bold" v-t="'sdk.print.fids_example'"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "fid-atlas-values",
-    props: {
-      atlas: {
-        type: Object
-      },
-      reset: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data(){
-      return {
-        value:''
-      }
-    },
-    methods: {
-      validateValue(value){
-        value = value && 1*value;
-        return Number.isInteger(value) && value >=0 && value < this.atlas.feature_count || null;
-      }
-    },
-    watch: {
-      value: {
-        immediate: true,
-        handler(value) {
-          this.value = value;
-          const values = new Set();
-          const addValue = value => this.validateValue(value) !== null && values.add(value);
-          const addRangeToValues = (range=[]) => {
-            const rangeLenght = range.length;
-            for (let i=1; i<rangeLenght; i++) {
-              const start = range[i-1];
-              const end = range[i];
-              for (let _i=start; _i < end; _i++ ){
-                values.add(_i+'');
-              }
-            }
-            values.add(range[rangeLenght-1]);
-          };
-          if (value) {
-            value.split(',').forEach(value => {
-              if (value) {
-                if (value.indexOf('-') !== -1) {
-                  const _values = value.split('-');
-                  const range = _values.filter(value => this.validateValue(value) !== null);
-                  if (range.length === _values.length) {
-                    const canAdd = range.reduce((bool, value, currentIndex) => {
-                      return bool && ((currentIndex === 0) || range[currentIndex-1] <= value);
-                    }, true);
-                    canAdd && addRangeToValues(range);
-                  }
-                } else addValue(value);
-              }
-            });
-          }
-          this.$emit('set-values', Array.from(values));
-          this.$emit('disable-print-button', value.trim() === '');
-        }
-      },
-      reset(bool){
-        if (bool) {
-          this.value = '';
-          this.$emit('set-values', []);
-          this.$emit('disable-print-button', true);
-        }
-      }
-    },
-    beforeDestroy() {
-      this.value = null;
-      this.$emit('disable-print-button', false);
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/PrintPage.vue b/src/components/PrintPage.vue
index b76fc99e5..be8a3be09 100644
--- a/src/components/PrintPage.vue
+++ b/src/components/PrintPage.vue
@@ -4,41 +4,65 @@
 -->
 
 <template>
-  <div id="print-output" style="height:100%; position: relative;">
+  <div id="print-output">
+
     <transition :duration="500" name="fade">
-      <bar-loader :loading="loading"/>
+      <bar-loader :loading="state.loading && state.layers"/>
     </transition>
-    <iframe  v-if="format === 'pdf'" :type="state.mime_type" ref="printoutput"  style="border:0;width:100%;height:100%;" :src="state.url"></iframe>
-    <div v-else-if="format === 'png'" class="g3w-print-png-output" style="display: flex; flex-direction: column; position: relative; height: 100%">
-      <div id="g3w-print-header" style="display: flex; justify-content: flex-end; align-items: flex-end; margin-top: 5px; margin-bottom: 5px;">
-        <div :class="{'g3w-disabled': disableddownloadbutton}">
-          <a :href="state.url" :download="downloadImageName">
-            <button
-              @click="downloadImage"
-              class="btn skin-button skin-tooltip-left"
-              style="font-weight: bold;"
-              data-placement="left"
-              data-toggle="tooltip"
-              data-container="body"
-              v-t-tooltip.create="'sdk.print.download_image'"
-              :class="g3wtemplate.getFontClass('download')"
-              role="button"></button>
-          </a>
+
+    <template v-if="state.layers">
+        <!-- PRINT as PDF -->
+        <iframe
+          v-if  = "'pdf' === state.format"
+          ref   = "out"
+          :src = "state.url"
+        ></iframe>
+
+      <!-- PRINT as PNG -->
+      <div
+        v-else-if = "'png' === state.format"
+        class     = "g3w-print-png-output"
+      >
+        <div id="g3w-print-header">
+          <div :class="{ 'g3w-disabled': !!(state.downloading && state.layers) }">
+            <a :href="state.url" :download="`download.${state.format}`">
+              <button
+                @click.stop        = "downloadImage"
+                class              = "btn skin-button skin-tooltip-left"
+                data-placement     = "left"
+                data-toggle        = "tooltip"
+                data-container     = "body"
+                v-t-tooltip.create = "'sdk.print.download_image'"
+                :class             = "g3wtemplate.getFontClass('download')"
+                role               = "button">
+              </button>
+            </a>
+          </div>
+        </div>
+        <div
+          v-if  = "state.url"
+          class = "g3w-print-url"
+        >
+          <img
+            ref  = "out"
+            :src = "state.url"
+          >
         </div>
       </div>
-      <div v-show="format==='png' && state.url" style="height: 100%; width: 100%; position: relative; overflow-y: auto" >
-        <img style="height:auto; max-width: 100%" ref="printoutput" :src="state.url">
-      </div>
-    </div>
-    <h4 style="font-weight: bold" v-if="!state.layers" v-t="'sdk.print.no_layers'"></h4>
+
+    </template>
+    <!---NO PRINT LAYERS-->
+    <h4
+      v-else
+      v-t="'sdk.print.no_layers'">
+    </h4>
   </div>
 </template>
 
 <script>
-import { TIMEOUT } from 'app/constant';
-import GUI from 'services/gui';
-
-const { imageToDataURL } = require('utils');
+import ProjectsRegistry   from 'store/projects';
+import GUI                from 'services/gui';
+import { imageToDataURL } from 'utils/imageToDataURL';
 
 export default {
 
@@ -47,64 +71,76 @@ export default {
 
   data() {
     return {
-      state: null,
-      disableddownloadbutton: true,
-      downloadImageName: '',
-      format: null
-    }
-  },
-  computed: {
-    loading() {
-      return this.state.loading && this.state.layers;
+      state: this.$options.service.state || {},
     }
   },
+
   methods: {
-    setLoading(bool=false){
-      GUI.disableSideBar(bool);
-      this.state.loading = bool;
-      this.disableddownloadbutton = bool;
-    },
-    downloadImage(){
-      this.setLoading(true);
-      if (this.format === 'jpg' || this.format === 'png' ) {
-        this.downloadImageName = `download.${this.state.format}`;
-        imageToDataURL({
-          src: this.state.url,
-          type: `image/${this.state.format}`,
-          callback: url => setTimeout(() => this.setLoading(false))
-        })
+
+    async downloadImage() {
+      try {
+        GUI.disableSideBar(true);
+        this.state.downloading = true;
+        if (['jpg', 'png'].includes(this.state.format)) {
+          await imageToDataURL({ src: this.state.url, type: `image/${this.state.format}` });
+          setTimeout(() => {
+            GUI.disableSideBar(false);
+            this.state.downloading = false;
+          });
+        }
+      } catch (e) {
+        console.warn(e);
       }
-    }
+    },
+
   },
-  watch: {
-    'state.url': async function(url) {
-      if (url) {
-        this.format = this.state.format;
-        await this.$nextTick();
-        // add timeout
-        const timeOut = setTimeout(()=>{
-          this.setLoading(false);
-          GUI.showUserMessage({
-            type: 'alert',
-            message: 'timeout'
-          })
-        }, TIMEOUT);
 
-        $(this.$refs.printoutput).load(url, (response, status) => {
-          this.$options.service.stopLoading();
-          status === 'error' && this.$options.service.showError();
-          clearTimeout(timeOut);
-          this.setLoading(false);
-        });
-      }
+  beforeDestroy() {
+    if (this.state.url && 'POST' === ProjectsRegistry.getCurrentProject().getOwsMethod()) {
+      window.URL.revokeObjectURL(this.state.url);
     }
   },
-  async mounted() {
-    await this.$nextTick();
-    this.state.layers && this.$options.service.startLoading();
-  },
-  beforeDestroy() {
-    (this.state.url && this.state.method === 'POST') && window.URL.revokeObjectURL(this.state.url);
-  }
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+#print-output {
+  height:100%;
+  position: relative;
+}
+#print-output > iframe {
+  border:0;
+  width:100%;
+  height:100%;
+}
+.g3w-print-png-output {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+#g3w-print-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+#g3w-print-header button {
+  font-weight: bold;
+}
+.g3w-print-url {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow-y: auto;
+}
+.g3w-print-url > img {
+  height:auto;
+  max-width: 100%;
+}
+#print-output > h4 {
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/PrintSelectAtlasFieldValues.vue b/src/components/PrintSelectAtlasFieldValues.vue
deleted file mode 100644
index 7be8815f7..000000000
--- a/src/components/PrintSelectAtlasFieldValues.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <div class="form-group" style="width: 100%;">
-    <label :for="print_atlas_autocomplete" style="display: block">
-      <span>{{ atlas.field_name}}</span>
-    </label>
-    <select :name="atlas.field_name" class="form-control"  id="print_atlas_autocomplete">
-    </select>
-  </div>
-</template>
-
-<script>
-  import { autocompleteMixin, select2Mixin } from 'mixins';
-
-  const autocompleteOptions = require('gui/external/select2/options/autocomplete');
-
-  export default {
-    name: "selectAtlasFieldValues",
-    mixins: [autocompleteMixin, select2Mixin],
-    props: {
-      atlas: {
-        type: Object,
-        required: true
-      },
-      reset: {
-        type: Boolean,
-        default: false
-      }
-    },
-    methods: {
-      async emitValues(){
-        await this.$nextTick();
-        this.$emit('set-values', this.values)
-      }
-    },
-    data(){
-      return {
-        values: []
-      }
-    },
-    watch: {
-      values: {
-        immediate: true,
-        handler(values){
-          this.$emit('disable-print-button', values.length === 0);
-        }
-      },
-      reset(bool) {
-       if (bool){
-         this.select2 && this.select2.val(null).trigger('change');
-         this.values = [];
-         this.emitValues();
-       }
-      }
-    },
-    async mounted(){
-      await this.$nextTick();
-      let {field_name:field, qgs_layer_id:layerId} = this.atlas;
-      this.select2 = $('#print_atlas_autocomplete').select2({
-        width: '100%',
-        multiple: true,
-        dropdownParent: $(this.$el),
-        minimumInputLength: 1,
-        ajax: {
-          delay: 500,
-          transport: async ({data:{q:value}}, success, failure) => {
-            try {
-              const data = await this.autocompleteRequest({
-                layerId,
-                field,
-                value
-              });
-              success({results: data});
-            } catch(error){
-              failure(error);
-            }
-          }
-        },
-        ...autocompleteOptions
-      });
-      this.select2.on('select2:select', evt => {
-        const value = evt.params.data.id;
-        this.values.push(value);
-        this.emitValues();
-      });
-      this.select2.on('select2:unselect', async evt => {
-        const value =  evt.params.data.id; // it seems always string
-        // need to check != instead of !== because we need to compare sometime number with string
-        this.values = this.values.filter(currentValue => currentValue != value);
-        this.emitValues();
-      });
-    },
-    beforeDestroy() {
-      this.values = null;
-      this.$emit('disable-print-button', false);
-    }
-  }
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/src/components/ProjectsMenu.vue b/src/components/ProjectsMenu.vue
index 55fe1abb5..45ae9fc8d 100644
--- a/src/components/ProjectsMenu.vue
+++ b/src/components/ProjectsMenu.vue
@@ -7,7 +7,12 @@
   <div id="menu-projects" class="container">
     <div class="row row-equal">
       <!-- item -->
-      <div v-for="menuitem in state.menuitems"  :key="menuitem.title" @click="trigger(menuitem)" class="col-xs-12 col-sm-4 project-menu">
+      <div
+        v-for  = "menuitem in state.menuitems"
+        :key   = "menuitem.title"
+        @click = "trigger(menuitem)"
+        class  ="col-xs-12 col-sm-4 project-menu"
+      >
         <div class="project-menu-item-image">
           <img :src="logoSrc(menuitem.thumbnail)" class="img-responsive">
         </div>
@@ -27,9 +32,9 @@
 
 <script>
 import ProjectsRegistry from 'store/projects';
-import GUI from 'services/gui';
+import GUI              from 'services/gui';
 
-const {t} = require('core/i18n/i18n.service');
+const { t } = require('core/i18n/i18n.service');
 
 const fakeImage = '/static/client/images/FakeProjectThumb.png';
 
@@ -40,7 +45,7 @@ export default {
 
   data() {
     return {
-      state: null,
+      state:   null,
       loading: false
     }
   },
diff --git a/src/components/QueryBuilder.vue b/src/components/QueryBuilder.vue
index 7e3711197..da35f9d77 100644
--- a/src/components/QueryBuilder.vue
+++ b/src/components/QueryBuilder.vue
@@ -4,85 +4,167 @@
 -->
 
 <template>
-  <div id="query_builder" class="form-group" style="flex-wrap: nowrap !important">
+  <div id="query_builder" class="form-group">
+
+    <!-- SEARCH HEADER -->
     <div id="query_builder_header"></div>
-      <div id="query_builder_layers" class="margin-between-element">
-        <label class="querybuilder-title" v-t="'sdk.querybuilder.panel.layers'"></label>
-        <select id="query_builder_layers_select" class="form-control">
-          <option v-for="(layer, index) in layers" :key="layer.label" :value="index" class="bold">{{ layer.label }}</option>
-        </select>
+    
+    <!-- SEARCH LAYERS -->
+    <div id="query_builder_layers" class="margin-between-element">
+      <label class="querybuilder-title" v-t="'sdk.querybuilder.panel.layers'"></label>
+      <select id="query_builder_layers_select" class="form-control">
+        <option
+          v-for  = "(layer, i) in layers"
+          :key   = "layer.label"
+          :value = "i"
+          class  = "bold"
+        >{{ layer.label }}</option>
+      </select>
+    </div>
+
+    <!-- SEARCH FIELDS -->
+    <div id="query_builder_fields" class="margin-between-element">
+      <div id="query_builder_fields_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.fields'"></div>
+      <div id="query_builder_fields_content" class="querybuilder-content">
+        <table class="table table-striped content-table">
+          <tbody>
+            <tr
+              v-for     = "field in fields"
+              :key      = "field.name"
+              @click    = "select.field = field.name"
+              @dblclick = "addToExpression({ value: field.name, type: 'field' })"
+              :class    = "{ 'skin-background-color lighten': select.field===field.name }"
+              style     = "cursor: pointer"
+            >
+              <th scope="row">{{ field.label }}</th>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <div id="query_builder_fields" class="margin-between-element">
-        <div id="query_builder_fields_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.fields'"></div>
-        <div id="query_builder_fields_content" class="querybuilder-content">
-          <table class="table table-striped content-table">
-            <tbody>
-              <tr v-for="{name, label} in fields" :key="name" @click="select.field = name" @dblclick="addToExpression({value: name, type: 'field'})" :class="{'skin-background-color lighten': select.field===name}" style="cursor: pointer">
-                <th scope="row">{{ label }}</th>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    </div>
+
+    <!-- SEARCH VALUES -->
+    <div id="query_builder_values" class="margin-between-element">
+      <div id="query_builder_values_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.values'"></div>
+      <div v-if="!manual" id="query_builder_values_content" class="querybuilder-content margin-between-element">
+        <bar-loader :loading="loading.values"/>
+        <table class="table table-striped content-table">
+          <tbody>
+            <tr
+              v-for     = "value in values"
+              @click    = "select.value = value"
+              :class    = "{ 'skin-background-color lighten': select.value === value }"
+              :key      = "value"
+              @dblclick = "addToExpression({ value: value, type: 'value' })"
+              style     = "cursor: pointer"
+            >
+              <th scope="row">{{ value }}</th>
+            </tr>
+            <tr>
+              <th scope="row"></th>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <div id="query_builder_values" class="margin-between-element">
-        <div id="query_builder_values_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.values'"></div>
-        <div v-if="!manual" id="query_builder_values_content" class="querybuilder-content margin-between-element">
-          <bar-loader :loading="loading.values"/>
-          <table class="table table-striped content-table">
-            <tbody>
-              <tr v-for="value in values" @click="select.value = value" :class="{'skin-background-color lighten': select.value===value}" :key="value" @dblclick="addToExpression({value: value, type: 'value'})" style="cursor: pointer">
-                <th scope="row">{{ value }}</th>
-              </tr>
-              <tr>
-                <th scope="row"></th>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div v-else id="querybuilder-manual" class="margin-between-element" style="display:flex; justify-content: space-between; align-items: stretch">
-          <input class="form-control" style="" v-model="manualvalue" style="border: 0;">
-          <span style="cursor: pointer; font-size: 1.2em; background-color: white; color: #000000; padding: 9px;"
-                @click="manualvalue && addToExpression({value: manualvalue, type: 'value'})"
-                :class="g3wtemplate.getFontClass('plus')"></span>
-        </div>
-        <div id="query_builder_values_buttons" class="content-end skin-color">
-          <button id="query_builder_values_buttons_sample" class="query_builder_button btn btn-secondary bold " v-t="'sdk.querybuilder.panel.button.manual'" @click="manual = true" :class="{'skin-border-color' : manual}"></button>
-          <button id="query_builder_values_buttons_all" class="query_builder_button btn btn-secondary bold " v-t="'sdk.querybuilder.panel.button.all'" @click="all" :disabled="select.field === null" :class="{'skin-border-color' : !manual}"></button>
-        </div>
+      <div v-else id="querybuilder-manual" class="margin-between-element">
+        <input class="form-control" v-model="manualvalue">
+        <span
+          @click = "manualvalue && addToExpression({value: manualvalue, type: 'value'})"
+          :class = "g3wtemplate.getFontClass('plus')"
+        ></span>
       </div>
-      <div id="query_builder_operators" class="margin-between-element" style="margin-top: auto !important">
-        <div id="query_builder_operators_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.operators'"></div>
-        <div id="query_builder_operators_content" class="content-wrap">
-          <button v-for="operator in operators" @click="addToExpression({value: operator, type: 'operator'})" :key="operator" class="query_builder_button btn btn-secondary skin-color bold">{{ operator }}</button>
-        </div>
+      <div id="query_builder_values_buttons" class="content-end skin-color">
+        <button
+          id        = "query_builder_values_buttons_sample"
+          class     = "query_builder_button btn btn-secondary bold"
+          v-t       = "'sdk.querybuilder.panel.button.manual'"
+          @click    = "manual = true"
+          :class    = "{'skin-border-color' : manual}"
+        ></button>
+        <button
+          id        = "query_builder_values_buttons_all"
+          class     = "query_builder_button btn btn-secondary bold"
+          v-t       = "'sdk.querybuilder.panel.button.all'"
+          @click    = "all"
+          :disabled = "select.field === null"
+          :class    = "{'skin-border-color' : !manual}"
+        ></button>
       </div>
-      <div id="query_builder_footer">
-        <div id="query_builder_expression">
-          <div id="query_builder_expression_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.expression'"></div>
-          <div id="query_builder_expression_content">
-            <textarea style="width: 100%; resize: none; height: 100px; color:#000000" v-model="filter"></textarea>
-          </div>
-        </div>
-        <div id="query_builder_message" class="margin-between-element">
-          <bar-loader :loading="loading.test"/>
-          <span class="bold skin-color" v-show="message" v-t="'sdk.querybuilder.messages.number_of_features'"></span><span class="bold skin-color">{{message}}</span>
-        </div>
-        <div id="query_builder_footer_buttons" class="content-end margin-between-element">
-          <button class="query_builder_button btn btn-secondary  bold" @click="test" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.test'"></button>
-          <button class="query_builder_button btn btn-secondary  bold" @click="reset" v-t="'sdk.querybuilder.panel.button.clear'"></button>
-          <button class="query_builder_button btn btn-secondary  bold" @click="run" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.run'"></button>
-          <button class="query_builder_button btn btn-secondary  bold" @click="save" :disabled="disabled" v-t="'sdk.querybuilder.panel.button.save'"></button>
+    </div>
+
+    <!-- SEARCH OPERATORS -->
+    <div id="query_builder_operators" class="margin-between-element">
+      <div id="query_builder_operators_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.operators'"></div>
+      <div id="query_builder_operators_content" class="content-wrap">
+        <button
+          v-for  = "operator in operators"
+          @click = "addToExpression({ value: operator, type: 'operator' })"
+          :key   = "operator"
+          class  = "query_builder_button btn btn-secondary skin-color bold"
+          >{{ operator }}</button>
+      </div>
+    </div>
+
+    <!-- SEARCH FOOTER -->
+    <div id="query_builder_footer">
+      <div id="query_builder_expression">
+        <div id="query_builder_expression_title" class="querybuilder-title" v-t="'sdk.querybuilder.panel.expression'"></div>
+        <div id="query_builder_expression_content">
+          <textarea v-model="filter"></textarea>
         </div>
       </div>
+      <div id="query_builder_message" class="margin-between-element">
+        <bar-loader :loading="loading.test"/>
+        <span
+          class  = "bold skin-color"
+          v-show = "message"
+          v-t    = "'sdk.querybuilder.messages.number_of_features'"
+        ></span>
+        <span class="bold skin-color">{{ message }}</span>
+      </div>
+      <div id="query_builder_footer_buttons" class="content-end margin-between-element">
+        <button
+          class     = "query_builder_button btn btn-secondary bold"
+          @click    = "test"
+          :disabled = "disabled"
+          v-t       = "'sdk.querybuilder.panel.button.test'"
+        ></button>
+        <button
+          class     = "query_builder_button btn btn-secondary bold"
+          @click    = "reset"
+          v-t       = "'sdk.querybuilder.panel.button.clear'"
+        ></button>
+        <button
+          class     = "query_builder_button btn btn-secondary bold"
+          @click    = "run"
+          :disabled = "disabled"
+          v-t       = "'sdk.querybuilder.panel.button.run'"
+        ></button>
+        <button
+          class     = "query_builder_button btn btn-secondary bold"
+          @click    = "save"
+          :disabled = "disabled"
+          v-t       = "'sdk.querybuilder.panel.button.save'"
+        ></button>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script>
-import QueryBuilderService from 'services/querybuilder';
-import { FILTER_OPERATORS as OPERATORS } from 'app/constant';
-import ProjectsRegistry from 'store/projects';
+import { FILTER_OPERATORS }        from 'app/constant';
+import ApplicationState            from 'store/application-state';
+import CatalogLayersStoresRegistry from 'store/catalog-layers';
+import ProjectsRegistry            from 'store/projects';
+import ApplicationService          from 'services/application';
+import DataRouterService           from 'services/data';
+import GUI                         from 'services/gui';
+import { getUniqueDomId }          from 'utils/getUniqueDomId';
+import { createFilterFromString }  from 'utils/createFilterFromString';
+import { XHR }                     from 'utils/XHR';
 
-const operators = Object.values(OPERATORS);
+const { t } = require('core/i18n/i18n.service');
 
 export default {
 
@@ -90,13 +172,11 @@ export default {
   name: 'query-builder',
 
   data() {
-    const options = this.$options.options;
-    const edit = options !== undefined;
     return {
-      edit,
+      edit: undefined !== this.$options.options,
       currentlayer: null,
       message: '',
-      filter: edit ? options.filter : '',
+      filter: (undefined !== this.$options.options ? this.$options.options.filter : ''),
       loading: {
         test: false,
         values: false
@@ -110,146 +190,253 @@ export default {
       }
     }
   },
+
   computed:{
+
     fields() {
       return this.currentlayer ? this.currentlayer.fields : [];
     },
+
     disabled() {
       return !this.filter;
-    }
+    },
+
   },
+
   watch: {
-    'select.field'(){
+
+    'select.field'() {
       this.values = [];
       this.manual = true;
-    }
+    },
+
   },
+
   methods: {
-    addToExpression({value, type}={}){
+
+    addToExpression({ value, type } = {}) {
       switch(type) {
-        case 'operator':
-          value = ` ${value} `;
-          break;
-        case 'field':
-          value = `"${value}"`;
-          break;
-        case 'value':
-          value = `'${value}'`;
-          break;
+        case 'operator': value = ` ${value} `; break;
+        case 'field':    value = `"${value}"`; break;
+        case 'value':    value = `'${value}'`; break;
       }
       if (value) this.filter = (`${this.filter}${value}`);
     },
-    async all(){
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
+    async all() {
       this.loading.values = true;
       try {
-        this.values = await QueryBuilderService.getValues({
-          layerId: this.currentlayer.id,
-          field: this.select.field
-        });
-      } catch(err){}
+        let layerId    = this.currentlayer.id;
+        let field      = this.select.field;
+        let CACHE      = ApplicationState.querybuilder.cache;
+        CACHE[layerId] = CACHE[layerId] || {};
+        if (undefined !== CACHE[layerId][field]) {
+          this.values = CACHE[layerId][field];
+        } else {
+          const response = await XHR.get({
+            url: CatalogLayersStoresRegistry.getLayerById(layerId).getUrl('data'),
+            params: { ordering: field, unique: field }
+          });
+          if (response.result) {
+            CACHE[layerId][field] = CACHE[layerId][field] || response.data;
+          }
+          this.values = CACHE[layerId][field] || [];
+        }
+      } catch(e) {
+        console.warn(e);
+      }
       this.loading.values = false;
       await this.$nextTick();
-      this.manualvalue = null;
-      this.manual = false;
+      this.manualvalue    = null;
+      this.manual         = false;
     },
+
     reset(){
-      this.filter = '';
-      this.message = '';
+      this.filter                 = '';
+      this.message                = '';
       this.filterElement.previous = null;
-      this.filterElement.current = null;
-      this.filterElement.operator =null;
+      this.filterElement.current  = null;
+      this.filterElement.operator = null;
     },
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
     async test() {
-      const layerId = this.currentlayer.id;
-      this.loading.test = true;
-      let number_of_features;
+      const data      = await this.run(false);
+      const n         = data.length && data[0].features.length; // number of features
+      this.message    = undefined !== n ? ` ${n}` : ''
+      await this.$nextTick();
+    },
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
+    async run(showResult = true) {
       try {
-        number_of_features = await QueryBuilderService.test({
-          layerId,
-          filter: this.filter
-        });
-        this.message = number_of_features !== undefined ? ` ${number_of_features}` : ''
-      } catch(err){
-        this.message = err;
+        this.loading.test = true;
+        const layer = CatalogLayersStoresRegistry.getLayerById(this.currentlayer.id);
+        return (
+          await DataRouterService.getData('search:features', {
+            inputs: {
+              layer,
+              filter: createFilterFromString({ layer, filter: this.filter }),
+              feature_count: 100,
+            },
+            outputs: showResult,
+          })
+        ).data;
+      } catch(e) {
+        console.warn(e);
+        if (!showResult) {
+          GUI.showUserMessage({ type: 'alert', message: 'sdk.querybuilder.error_run', autoclose: true });
+          this.message = t('sdk.querybuilder.error_test');
+        }
+      } finally {
+        this.loading.test = false;
       }
-      this.loading.test = false;
-      await this.$nextTick();
+      
     },
-    async run(){
-      const layerId = this.currentlayer.id;
-      this.loading.test = true;
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
+    async save() {
+      const id      = this.projectId || ProjectsRegistry.getCurrentProject().getId();
+      const edit_id = this.edit && this.$options.options.id;
+      let searches  = ApplicationService.getLocalItem('QUERYBUILDERSEARCHES');
+      let query;
+
       try {
-        const response = await QueryBuilderService.run({
-          layerId,
-          filter: this.filter
-        });
-      } catch(err){}
-      this.loading.test = false;
+        query = {
+          layerId:   this.currentlayer.id,
+          filter:    this.filter,
+          layerName: CatalogLayersStoresRegistry.getLayerById(this.currentlayer.id).getName(),
+          name:      edit_id ? (this.edit && this.$options.options.name) : await (new Promise((res, rej) => { GUI.dialog.confirm(t('sdk.querybuilder.additem'), d => d ? res(d) : rej()) })),
+          id:        edit_id || getUniqueDomId(),
+        };
+
+        // edit local item
+        if (edit_id) {
+          const i = searches[id].findIndex(s => s.id === query.id);
+          if (-1 !== i) {
+            searches[id][i] = query;
+          }
+        }
+
+        // add local item
+        else {
+          GUI.getComponent('search').getService().addQueryBuilderSearch(query);
+          if (undefined === searches) {
+            searches     = { [id]: [query] };
+          } else {
+            searches[id] = [...(searches[id] || []), query];
+          }
+        }
+      } catch (e) {
+        console.warn(e);
+        return;
+      }
+
+      // reset items
+      const ITEMS = ApplicationState.querybuilder.searches;
+      ApplicationService.setLocalItem({ id: 'QUERYBUILDERSEARCHES', data: searches });
+      setTimeout(() => { searches[id].forEach(q => ITEMS[id].push(q)); }, 0);
+      ITEMS[id].splice(0);
+      GUI.showUserMessage({ type: 'success', message: t("sdk.querybuilder.messages.changed"), autoclose: true });
     },
-    save() {
-      QueryBuilderService.save({
-        layerId: this.currentlayer.id,
-        filter: this.filter,
-        projectId: this.projectId,
-        name: this.edit && this.$options.options.name,
-        id: this.edit && this.$options.options.id,
-      });
-    }
+
   },
+
   created() {
+
     this.filterElement = {
       current: null,
       previous: null,
       operator: null
     };
+
     const project = ProjectsRegistry.getCurrentProject();
-    this.layers = project.getLayers().filter(layer => {
-      return !layer.baselayer && layer.geometrytype && layer.geometrytype !== 'NoGeometry' && Array.isArray(layer.fields);
-    }).map(layer => {
-      const relations = project.getRelationsByLayerId({
-        layerId: layer.id,
-        type: 'ONE'
-      });
-      let excludejoinfields = [];
-      relations.forEach( relation => {
-        let {customPrefix} = relation;
-        const joinLayer = project.getLayerById(relation.referencingLayer);
-        customPrefix = customPrefix === undefined ? `${joinLayer.getName()}_` : customPrefix;
-        const joinLayerFields = joinLayer.getFields().map(field => `${customPrefix}${field.name}`);
-        excludejoinfields = [...excludejoinfields, ...joinLayerFields];
+
+    this.layers = project
+      .getLayers()
+      .filter(l => !l.baselayer && l.geometrytype && l.geometrytype !== 'NoGeometry' && Array.isArray(l.fields))
+      .map(layer => {
+        // exclude join fields
+        let exclude = [];
+        project
+          .getRelationsByLayerId({ layerId: layer.id, type: 'ONE' })
+          .forEach( r => {
+            const l = project.getLayerById(r.referencingLayer);
+            r.customPrefix = r.customPrefix === undefined ? `${l.getName()}_` : r.customPrefix;
+            exclude = [...exclude, ...l.getFields().map(field => `${r.customPrefix}${field.name}`)];
+          });
+        return {
+          id: layer.id,
+          label: layer.name,
+          fields: layer.fields.filter(f => f.show).map(f => ({ label: f.label, name: f.name })).filter(f => -1 === exclude.indexOf(f))
+        }
       });
-      return {
-        id: layer.id,
-        label: layer.name,
-        fields: layer.fields.filter(field => field.show).map(({label, name}) => ({
-          label,
-          name
-        })).filter(field => excludejoinfields.indexOf(field) === -1)
-      }
-    });
-    this.operators = operators;
-    this.currentlayer = this.edit ? this.layers.find(layer => layer.id === this.$options.options.layerId) : this.layers[0];
+
+    this.operators = Object.values(FILTER_OPERATORS);
+
+    this.currentlayer = this.edit ? this.layers.find(l => l.id === this.$options.options.layerId) : this.layers[0];
+
   },
-  async mounted(){
+
+  async mounted() {
     await this.$nextTick();
-    this.select2 = $('#query_builder_layers_select').select2({
-      width: '100%',
-    });
+
+    this.select2 = $('#query_builder_layers_select').select2({ width: '100%' });
+
     if (this.edit) {
-      const index = this.layers.indexOf(this.currentlayer);
-      this.select2.val(index);
+      this.select2.val(this.layers.indexOf(this.currentlayer));
       this.select2.trigger('change');
     }
-    this.select2.on('select2:select', (evt) => {
-      this.currentlayer = this.layers[evt.params.data.id];
+
+    this.select2.on('select2:select', e => {
+      this.currentlayer = this.layers[e.params.data.id];
       this.select.field = null;
       this.select.value = null;
       this.reset();
     });
   },
+
   beforeDestroy(){
     this.select2.select2('destroy');
     this.select2 = null;
-  }
+  },
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+#query_builder {
+  flex-wrap: nowrap !important;
+}
+#querybuilder-manual {
+  display:flex;
+  justify-content: space-between;
+  align-items: stretch;
+  border: 0;
+}
+#querybuilder-manual > span {
+  cursor: pointer;
+  font-size: 1.2em;
+  background-color: white;
+  color: #000;
+  padding: 9px;
+}
+#query_builder_operators {
+  margin-top: auto !important;
+}
+#query_builder_expression_content > textarea {
+  width: 100%;
+  resize: none;
+  height: 100px;
+  color:#000;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/QueryBuilderSearch.vue b/src/components/QueryBuilderSearch.vue
deleted file mode 100644
index a66f8dc9b..000000000
--- a/src/components/QueryBuilderSearch.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <li>
-    <div style="position:relative">
-      <bar-loader :loading="loading"/>
-      <div class="querybuliserch-tools" style="display:flex; align-items: baseline">
-        <i :class="g3wtemplate.getFontClass('filter')" style="margin-right: 14px; margin-left: 1px;"></i>
-        <span style="white-space: pre-wrap">{{querybuildersearch.name}}</span>
-        <div style="margin-left: auto">
-          <span
-            class="icon-search-action skin-tooltip-bottom"
-            data-placement="bottom"
-            data-toggle="tooltip"
-            data-container="body"
-            v-t-tooltip="'sdk.querybuilder.search.run'">
-            <i @click.stop="run" style="color: green;  padding: 3px; font-size: 1.3em;" :class="g3wtemplate.getFontClass('run')"></i>
-          </span>
-          <span
-            class="icon-search-action skin-tooltip-bottom"
-            data-placement="bottom"
-            data-toggle="tooltip"
-            data-container="body"
-            v-t-tooltip="'sdk.querybuilder.search.info'">
-            <i @click.stop="showinfo=!showinfo" style="color: #FFFFFF; padding: 3px; font-size: 1.3em;" :class="g3wtemplate.getFontClass('info')"></i>
-          </span>
-          <span
-            class="icon-search-action skin-tooltip-bottom"
-            data-placement="bottom"
-            data-toggle="tooltip"
-            data-container="body"
-            v-t-tooltip="'sdk.querybuilder.search.edit'">
-            <i @click.stop="edit" style="color: #307095; padding: 3px; font-size: 1.3em;" :class="g3wtemplate.getFontClass('pencil')"></i>
-          </span>
-          <span
-            class="icon-search-action skin-tooltip-bottom"
-            data-placement="bottom"
-            data-toggle="tooltip"
-            data-container="body"
-            v-t-tooltip="'sdk.querybuilder.search.delete'">
-            <i @click.stop="remove" style="color: red;  padding: 3px; font-size: 1.3em;" :class="g3wtemplate.getFontClass('trash')"></i>
-          </span>
-        </div>
-      </div>
-      <div class="querybuildsearch-info" v-show="showinfo" style="margin-top: 5px;">
-        <div>
-          <span style="font-weight: bold; white-space: pre">LAYER: </span>
-          <span style="white-space: pre-wrap;">{{querybuildersearch.layerName}}</span>
-        </div>
-        <div>
-          <span style="font-weight: bold;">EXPRESSION: </span>
-          <span style="white-space: pre-wrap;">{{querybuildersearch.filter}}</span>
-        </div>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script>
-  import QueryBuilderService from 'services/querybuilder';
-
-  const QueryBuilderUIFactory = require('gui/querybuilder/querybuilderuifactory');
-
-  export default {
-    name: "g3w-querybuilder-search",
-    props: {
-      querybuildersearch: {
-        required: true
-      }
-    },
-    data() {
-      return {
-        loading: false,
-        showinfo: false
-      }
-    },
-    methods: {
-      async remove(){
-        try {
-          await QueryBuilderService.delete(this.querybuildersearch);
-          this.$emit('delete');
-        } catch(err){}
-
-      },
-      edit(){
-        QueryBuilderUIFactory.show({
-          options: {
-            id: this.querybuildersearch.id,
-            name: this.querybuildersearch.name,
-            layerId: this.querybuildersearch.layerId,
-            filter:  this.querybuildersearch.filter
-          }
-        });
-      },
-      run() {
-        this.loading = true;
-        QueryBuilderService.run({
-          layerId: this.querybuildersearch.layerId,
-          filter:  this.querybuildersearch.filter
-        }).finally(()=>{
-          this.loading = false;
-        })
-      }
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/QueryResults.vue b/src/components/QueryResults.vue
index 7d4c92baa..6235ccc7e 100644
--- a/src/components/QueryResults.vue
+++ b/src/components/QueryResults.vue
@@ -5,159 +5,198 @@
 
 <template>
   <div id="search-results" class="queryresults-wrapper">
-    <div v-if="info.message"
-      class="skin-color"
-      style="font-weight: bold; margin-bottom: 3px; font-size: 1.1em;"
+    <div
+      v-if  = "info.message"
+      class = "skin-color"
+      style = "font-weight: bold; margin-bottom: 3px; font-size: 1.1em;"
     >
       <span
-        v-if="info.icon"
-        class="action-button skin-tooltip-bottom"
-        :class="g3wtemplate.getFontClass(info.icon)">
+        v-if   = "info.icon"
+        class  = "action-button skin-tooltip-bottom"
+        :class = "g3wtemplate.getFontClass(info.icon)">
       </span>
       <span>{{info.message}}</span>
     </div>
     <div class="queryresults-container">
       <template v-if="state.layers.length">
-        <ul v-if="hasLayers" class="queryresults" id="queryresults" style="position: relative">
-          <li v-show="showLayer(layer)" v-for="layer in state.layers">
+        <ul
+          v-if  = "hasLayers"
+          class = "queryresults"
+          id    = "queryresults"
+          style = "position: relative"
+        >
+          <li
+            v-show="showLayer(layer)"
+            v-for="layer in state.layers"
+          >
             <bar-loader :loading="layer.loading"/>
             <div class="box box-primary">
-              <div class="box-header with-border" :class="{'mobile': isMobile()}" data-widget="collapse">
-                <div class="box-title query-layer-title" :style="{fontSize: isMobile() && '1em !important'}">{{ layer.title }}
-                  <span v-show="!layer.rawdata" class="query-layer-feature-count">({{layer.features.length}})</span>
+              <div
+                class="box-header with-border"
+                :class="{'mobile': isMobile()}"
+                data-widget="collapse"
+              >
+                <div
+                  class  = "box-title query-layer-title"
+                  :style = "{fontSize: isMobile() && '1em !important'}">{{ layer.title }}
+                  <span
+                    v-show = "!layer.rawdata"
+                    class  = "query-layer-feature-count">({{layer.features.length}})</span>
                 </div>
-                <div class="box-features-action" @click.stop="">
+                <div
+                  class       = "box-features-action"
+                  @click.stop = ""
+                >
                   <!-- info format layer component -->
                   <infoformats :layer="layer"/>
                   <template v-if="layer.features.length > 1">
                     <span
-                      v-if="layer.hasgeometry"
-                      @click.stop="zoomToLayerFeaturesExtent(layer)"
-                       class="action-button"
-                      v-t-tooltip:left.create="'sdk.mapcontrols.query.actions.zoom_to_features_extent.hint'">
-                      <span class="action-button-icon" :class="g3wtemplate.getFontClass('marker')"></span>
+                      v-if                    = "layer.hasgeometry"
+                      @click.stop             = "zoomToLayerFeaturesExtent(layer)"
+                       class                  = "action-button"
+                      v-t-tooltip:left.create = "'sdk.mapcontrols.query.actions.zoom_to_features_extent.hint'"
+                    >
+                      <span
+                        class  = "action-button-icon"
+                        :class = "g3wtemplate.getFontClass('marker')">
+                      </span>
                     </span>
                     <span
-                      v-if="layer.atlas.length"
-                      v-download @click.stop="printAtlas(layer)"
-                      class="action-button"
-                      v-t-tooltip:left.create="'sdk.mapcontrols.query.actions.atlas.hint'">
-                      <span class="action-button-icon" :class="g3wtemplate.getFontClass('print')"></span>
+                      v-if                    = "layer.atlas.length"
+                      @click.stop             = "printAtlas(layer)"
+                      class                   = "action-button"
+                      v-t-tooltip:left.create = "'sdk.mapcontrols.query.actions.atlas.hint'"
+                      v-download
+                    >
+                      <span
+                        class  = "action-button-icon"
+                        :class = "g3wtemplate.getFontClass('print')">
+                      </span>
                     </span>
                     <!--        DOWNLOAD        -->
-                    <template v-if="layer.downloads.length === 1">
+                    <template v-if="1 === layer.downloads.length">
                       <span
+                        class                   = "action-button"
+                        :class                  = "{'toggled': layer[layer.downloads[0]].active}"
+                        v-t-tooltip:left.create = "`sdk.mapcontrols.query.actions.download_features_${layer.downloads[0]}.hint`"
                         v-download
-                        class="action-button"
-                        :class="{'toggled': layer[layer.downloads[0]].active}"
-                        v-t-tooltip:left.create="`sdk.mapcontrols.query.actions.download_features_${layer.downloads[0]}.hint`"
                       >
                         <span
-                          class="action-button-icon"
-                          :class="g3wtemplate.getFontClass('download')"
-                          @click.stop="saveLayerResult(layer, layer.downloads[0])"
+                          class       = "action-button-icon"
+                          :class      = "g3wtemplate.getFontClass('download')"
+                          @click.stop = "saveLayerResult(layer, layer.downloads[0])"
                         ></span>
                       </span>
                     </template>
                     <template v-else-if="layer.downloads.length > 1">
                     <span
-                      v-download class="action-button"
-                      :class="{'toggled': layer.downloadformats.active}"
-                      v-t-tooltip:left.create="'Downloads'"
+                      class                   = "action-button"
+                      :class                  = "{'toggled': layer.downloadformats.active}"
+                      v-t-tooltip:left.create = "'Downloads'"
+                      v-download
                     >
                       <span
-                        class="action-button-icon"
-                        :class="g3wtemplate.getFontClass('download')"
-                        @click.stop="showLayerDownloadFormats(layer)"
+                        class       = "action-button-icon"
+                        :class      = "g3wtemplate.getFontClass('download')"
+                        @click.stop = "showLayerDownloadFormats(layer)"
                       ></span>
                     </span>
                     </template>
                     <!--        DOWNLOAD        -->
                   </template>
                   <span
-                    v-if="layer.external || (layer.source && layer.source.type !== 'wms')"
-                    @click.stop="addLayerFeaturesToResults(layer)"
-                    class="action-button"
-                    :class="{'toggled': layer.addfeaturesresults.active}"
-                    v-t-tooltip:left.create="'sdk.mapcontrols.query.actions.add_features_to_results.hint'"
+                    v-if                    = "layer.external || (layer.source && 'wms' !== layer.source.type )"
+                    @click.stop             = "addLayerFeaturesToResults(layer)"
+                    class                   = "action-button"
+                    :class                  = "{'toggled': layer.addfeaturesresults.active}"
+                    v-t-tooltip:left.create = "'sdk.mapcontrols.query.actions.add_features_to_results.hint'"
                   >
                     <span
-                      class="action-button-icon"
-                      :class="g3wtemplate.getFontClass('plus-square')"
+                      class  = "action-button-icon"
+                      :class = "g3wtemplate.getFontClass('plus-square')"
                     ></span>
                   </span>
                   <span
-                    v-if="
+                    v-if                    = "
                       layer.id !== '__g3w_marker' &&
                       layer.features.length > 1 &&
                       (layer.external || (layer.source && layer.source.type !== 'wms'))
                     "
-                    @click.stop="selectionFeaturesLayer(layer)"
-                    class="action-button skin-tooltip-left"
-                    v-t-tooltip:left.create="'sdk.mapcontrols.query.actions.add_selection.hint'"
-                    :class="{'toggled': layer.selection.active}"
+                    @click.stop             = "selectionFeaturesLayer(layer)"
+                    class                   = "action-button skin-tooltip-left"
+                    v-t-tooltip:left.create = "'sdk.mapcontrols.query.actions.add_selection.hint'"
+                    :class                  = "{'toggled': layer.selection.active}"
                   >
                     <span
-                      class="action-button-icon"
-                      :class="g3wtemplate.getFontClass('success')"
+                      class  = "action-button-icon"
+                      :class = "g3wtemplate.getFontClass('success')"
                     ></span>
                   </span>
                   <!-- Filter template tools -->
                   <template v-if="!layer.external && layer.selection.active">
                     <span
-                      @click.stop="addRemoveFilter(layer)"
-                      class="action-button skin-tooltip-left"
-                      :class="{'toggled': layer.filter.active}"
-                      v-t-tooltip:left.create="'layer_selection_filter.tools.filter'"
+                      @click.stop             = "addRemoveFilter(layer)"
+                      class                   = "action-button skin-tooltip-left"
+                      :class                  = "{'toggled': layer.filter.active}"
+                      v-t-tooltip:left.create = "'layer_selection_filter.tools.filter'"
                     >
                       <span
-                        class="action-button-icon"
-                        :class="g3wtemplate.getFontClass('filter')"
+                        class  = "action-button-icon"
+                        :class = "g3wtemplate.getFontClass('filter')"
                       ></span>
                     </span>
                     <!-- @since 3.9 add save -->
                     <span
-                      v-if="layer.filter.active && (null === layer.filter.current || layer.selection.active)"
-                      @click.stop="saveFilter(layer)"
-                      class="action-button skin-tooltip-left"
-                      v-t-tooltip:left.create="'layer_selection_filter.tools.savefilter'"
+                      v-if                    = "
+                        layer.filter.active
+                        && (null === layer.filter.current || layer.selection.active)
+                      "
+                      @click.stop             = "saveFilter(layer)"
+                      class                   = "action-button skin-tooltip-left"
+                      v-t-tooltip:left.create = "'layer_selection_filter.tools.savefilter'"
                     >
                       <span
-                        class="action-button-icon"
-                        :class="g3wtemplate.getFontClass('save')"
+                        class  = "action-button-icon"
+                        :class = "g3wtemplate.getFontClass('save')"
                       ></span>
                     </span>
 
                   </template>
 
                 </div>
-                <button class="btn btn-box-tool" data-widget="collapse">
-                  <i class="btn-collapser skin-color" :class="g3wtemplate.font['minus']"></i>
+                <button
+                  class       = "btn btn-box-tool"
+                  data-widget = "collapse"
+                >
+                  <i
+                    class  = "btn-collapser skin-color"
+                    :class = "g3wtemplate.font['minus']">
+                  </i>
                 </button>
               </div>
               <template v-if="state.layeractiontool[layer.id].component">
                 <div
-                  class="g3w-layer-action-tools with-border"
-                  style="padding: 5px"
-                  :class="{'mobile': isMobile()}">
+                  class  = "g3w-layer-action-tools with-border"
+                  style  = "padding: 5px"
+                  :class = "{'mobile': isMobile()}">
                   <component
-                    :is="state.layeractiontool[layer.id].component"
-                    :layer="layer"
-                    :config="state.layeractiontool[layer.id].config"/>
+                    :is     = "state.layeractiontool[layer.id].component"
+                    :layer  = "layer"
+                    :config = "state.layeractiontool[layer.id].config"/>
                 </div>
               </template>
               <!--     Add Custom layer components      -->
               <component
-                v-for="({component}) in getLayerCustomComponents(layer.id, 'layer', 'before')"
-                :is="component"
-                :layer="layer"/>
+                v-for = "({component}) in getLayerCustomComponents(layer.id, 'layer', 'before')"
+                :is   = "component"
+                :layer = "layer"/>
               <!--   End custom layer component         -->
               <div class="box-body" :class="{'mobile': isMobile()}">
                 <template v-if="layer.rawdata">
                   <div
-                    class="queryresults-text-html"
-                    :class="{text: layer.infoformat === 'text/plain'}"
-                    v-html="layer.rawdata">
+                    class  = "queryresults-text-html"
+                    :class = "{text: layer.infoformat === 'text/plain'}"
+                    v-html = "layer.rawdata">
                   </div>
                 </template>
                 <!-- CASE FORM STRUCTURE LAYER-->
@@ -166,85 +205,84 @@
                     <tbody>
                       <template v-if="feature.show" v-for="(feature, index) in layer.features">
                         <header-feature-actions-body
-                          :colspan="getColSpan(layer)"
-                          :actions="state.layersactions[layer.id]"
-                          :layer="layer"
-                          :feature="feature"
-                          :index="index"
-                          :onelayerresult="onelayerresult"
-                          :trigger="trigger"
-                          :toggleFeatureBoxAndZoom="toggleFeatureBoxAndZoom"
-                          :hasLayerOneFeature="hasLayerOneFeature"
-                          :boxLayerFeature="getLayerFeatureBox(layer, feature)"
-                          :attributesSubset="attributesSubset"
-                          :getLayerField="getLayerField"/>
+                          :colspan                 = "getColSpan(layer)"
+                          :actions                 = "state.layersactions[layer.id]"
+                          :layer                   = "layer"
+                          :feature                 = "feature"
+                          :index                   = "index"
+                          :onelayerresult          = "onelayerresult"
+                          :trigger                 = "trigger"
+                          :toggleFeatureBoxAndZoom = "toggleFeatureBoxAndZoom"
+                          :hasLayerOneFeature      = "hasLayerOneFeature"
+                          :boxLayerFeature         = "getLayerFeatureBox(layer, feature)"
+                          :attributesSubset        = "attributesSubset"
+                          :getLayerField           = "getLayerField"/>
                           <tr class="g3w-feature-result-action-tools">
                             <template v-if="state.currentactiontools[layer.id][index]">
                               <td :colspan="getColSpan(layer)">
                                 <component
-                                  :is="state.currentactiontools[layer.id][index]"
-                                  :colspan="getColSpan(layer)"
-                                  :layer="layer"
-                                  :feature="feature"
-                                  :featureIndex="index"
-                                  :config="state.actiontools[state.currentactiontools[layer.id][index].name][layer.id]"
+                                  :is           = "state.currentactiontools[layer.id][index]"
+                                  :colspan      = "getColSpan(layer)"
+                                  :layer        = "layer"
+                                  :feature      = "feature"
+                                  :featureIndex = "index"
+                                  :config       = "state.actiontools[state.currentactiontools[layer.id][index].name][layer.id]"
                                 />
                               </td>
                             </template>
                           </tr>
                           <tr
-                            v-if="!hasLayerOneFeature(layer)"
-                            style="font-weight: bold; text-align: center" >
-                            <td class="centered" v-for="(attribute, index) in attributesSubset(layer)">
+                            v-if  = "!hasLayerOneFeature(layer)"
+                            style = "font-weight: bold; text-align: center" >
+                            <td
+                              v-for="(attribute, index) in attributesSubset(layer)"
+                              class="centered"
+                            >
                               {{getLayerFeatureBox(layer, feature).collapsed ? attribute.label : ''}}
                             </td>
                             <td
-                              @click.stop="toggleFeatureBoxAndZoom(layer,feature)"
-                              class="collapsed"
-                              style="text-align: end"
-                              :class="{noAttributes: attributesSubset(layer).length === 0}">
+                              @click.stop = "toggleFeatureBoxAndZoom(layer,feature)"
+                              class       = "collapsed"
+                              style       = "text-align: end"
+                              :class      = "{noAttributes: attributesSubset(layer).length === 0}">
                               <span
-                                class="fa link morelink skin-color"
-                                :class="[
-                                  getLayerFeatureBox(layer, feature).collapsed ?
-                                  g3wtemplate.font['plus'] :
-                                  g3wtemplate.font['minus']
-                                ]">
+                                class  = "fa link morelink skin-color"
+                                :class = "g3wtemplate.font[getLayerFeatureBox(layer, feature).collapsed  ? 'plus': 'minus']">
                               </span>
                             </td>
                           </tr>
                         <header-feature-body
                           v-if="!hasLayerOneFeature(layer) && getLayerFeatureBox(layer, feature).collapsed"
-                          :actions="state.layersactions[layer.id]"
-                          :layer="layer"
-                          :feature="feature"
-                          :index="index"
-                          :onelayerresult="onelayerresult"
-                          :trigger="trigger"
-                          :toggleFeatureBoxAndZoom="toggleFeatureBoxAndZoom"
-                          :hasLayerOneFeature="hasLayerOneFeature"
-                          :boxLayerFeature="getLayerFeatureBox(layer, feature)"
-                          :attributesSubset="attributesSubset"
-                          :getLayerField="getLayerField"/>
+                          :actions                 = "state.layersactions[layer.id]"
+                          :layer                   = "layer"
+                          :feature                 = "feature"
+                          :index                   = "index"
+                          :onelayerresult          = "onelayerresult"
+                          :trigger                 = "trigger"
+                          :toggleFeatureBoxAndZoom = "toggleFeatureBoxAndZoom"
+                          :hasLayerOneFeature      = "hasLayerOneFeature"
+                          :boxLayerFeature         = "getLayerFeatureBox(layer, feature)"
+                          :attributesSubset        = "attributesSubset"
+                          :getLayerField           = "getLayerField"/>
                         <tr v-for="({component}) in getLayerCustomComponents(layer.id, 'feature', 'before')">
                           <td :colspan="getColSpan(layer)">
                             <component
-                            :is="component"
-                            :layer="layer"
-                            :feature="feature"/>
+                             :is      = "component"
+                             :layer   = "layer"
+                             :feature = "feature"/>
                           </td>
                         </tr>
                         <tr
                           v-show="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)"
-                          :id="`${layer.id}_${index}`"
-                          class="featurebox-body"
+                          :id   = "`${layer.id}_${index}`"
+                          class = "featurebox-body"
                         >
                           <td :colspan="getColSpan(layer)">
                             <tabs
-                              :fields="getQueryFields(layer, feature)"
-                              :layerid="layer.id"
-                              :feature="feature"
-                              :tabs="getLayerFormStructure(layer)"/>
+                              :fields  = "getQueryFields(layer, feature)"
+                              :layerid = "layer.id"
+                              :feature = "feature"
+                              :tabs    = "getLayerFormStructure(layer)"/>
                           </td>
                         </tr>
                         <tr
@@ -252,9 +290,9 @@
                         >
                           <td :colspan="getColSpan(layer)">
                             <component
-                              :is="component"
-                              :layer="layer"
-                              :feature="feature"/>
+                              :is      = "component"
+                              :layer   = "layer"
+                              :feature = "feature"/>
                           </td>
                         </tr>
                       </template>
@@ -264,73 +302,84 @@
                 <template v-else>
                   <!-- CASE SIMPLE LAYER WITH NO STRUCTURE -->
                   <table class="table" :class="{'mobile': isMobile()}">
-                    <tbody v-if="feature.show" v-for="(feature, index) in layer.features" :key="feature.id">
+                    <tbody
+                      v-if  = "feature.show"
+                      v-for = "(feature, index) in layer.features"
+                      :key  = "feature.id"
+                    >
                       <header-feature-actions-body
-                        :colspan="getColSpan(layer)"
-                        :actions="state.layersactions[layer.id]"
-                        :layer="layer"
-                        :feature="feature"
-                        :index="index"
-                        :onelayerresult="onelayerresult"
-                        :trigger="trigger"
-                        :toggleFeatureBoxAndZoom="toggleFeatureBoxAndZoom"
-                        :hasLayerOneFeature="hasLayerOneFeature"
-                        :boxLayerFeature="getLayerFeatureBox(layer, feature)"
-                        :attributesSubset="attributesSubset"
-                        :getLayerField="getLayerField"/>
+                        :colspan                 = "getColSpan(layer)"
+                        :actions                 = "state.layersactions[layer.id]"
+                        :layer                   = "layer"
+                        :feature                 = "feature"
+                        :index                   = "index"
+                        :onelayerresult          = "onelayerresult"
+                        :trigger                 = "trigger"
+                        :toggleFeatureBoxAndZoom = "toggleFeatureBoxAndZoom"
+                        :hasLayerOneFeature      = "hasLayerOneFeature"
+                        :boxLayerFeature         = "getLayerFeatureBox(layer, feature)"
+                        :attributesSubset        = "attributesSubset"
+                        :getLayerField           = "getLayerField"/>
                       <tr class="g3w-feature-result-action-tools">
                         <template v-if="state.currentactiontools[layer.id][index]">
                           <td :colspan="getColSpan(layer)">
                             <component
-                              :is="state.currentactiontools[layer.id][index]"
-                              :colspan="getColSpan(layer)"
-                              :layer="layer"
-                              :feature="feature"
-                              :featureIndex="index"
-                              :config="state.actiontools[state.currentactiontools[layer.id][index].name][layer.id]"/>
+                              :is           = "state.currentactiontools[layer.id][index]"
+                              :colspan      = "getColSpan(layer)"
+                              :layer        = "layer"
+                              :feature      = "feature"
+                              :featureIndex = "index"
+                              :config       = "state.actiontools[state.currentactiontools[layer.id][index].name][layer.id]"/>
                             </td>
                         </template>
                       </tr>
                       <tr
-                        v-if="!hasLayerOneFeature(layer)"
-                        style="font-weight: bold; text-align: center" >
-                        <td class="centered" v-for="(attribute, index) in attributesSubset(layer)">
+                        v-if  = "!hasLayerOneFeature(layer)"
+                        style = "font-weight: bold; text-align: center" >
+                        <td
+                          v-for="(attribute, index) in attributesSubset(layer)"
+                          class="centered"
+                        >
                           {{getLayerFeatureBox(layer, feature).collapsed ? attribute.label : ''}}
                         </td>
                         <td
-                          @click.stop="toggleFeatureBoxAndZoom(layer,feature)"
-                          class="collapsed"
-                          style="text-align: end"
-                          :class="{noAttributes: attributesSubset(layer).length === 0}">
+                          @click.stop = "toggleFeatureBoxAndZoom(layer,feature)"
+                          class       = "collapsed"
+                          style       = "text-align: end"
+                          :class      = "{ noAttributes: 0 === attributesSubset(layer).length }">
                             <span
-                              class="fa link morelink skin-color"
-                              :class="[
-                                getLayerFeatureBox(layer, feature).collapsed ?
-                                g3wtemplate.font['plus'] :
-                                g3wtemplate.font['minus']
-                              ]">
+                              class  = "fa link morelink skin-color"
+                              :class = "g3wtemplate.font[getLayerFeatureBox(layer, feature).collapsed ? 'plus': 'minus']">
                             </span>
                         </td>
                       </tr>
                       <header-feature-body
                         v-if="!hasLayerOneFeature(layer) && getLayerFeatureBox(layer, feature).collapsed"
-                        :actions="state.layersactions[layer.id]"
-                        :layer="layer"
-                        :feature="feature"
-                        :index="index"
-                        :onelayerresult="onelayerresult"
-                        :trigger="trigger"
-                        :toggleFeatureBoxAndZoom="toggleFeatureBoxAndZoom"
-                        :hasLayerOneFeature="hasLayerOneFeature"
-                        :boxLayerFeature="getLayerFeatureBox(layer, feature)"
-                        :attributesSubset="attributesSubset"
-                        :getLayerField="getLayerField"/>
+                        :actions                 = "state.layersactions[layer.id]"
+                        :layer                   = "layer"
+                        :feature                 = "feature"
+                        :index                   = "index"
+                        :onelayerresult          = "onelayerresult"
+                        :trigger                 = "trigger"
+                        :toggleFeatureBoxAndZoom = "toggleFeatureBoxAndZoom"
+                        :hasLayerOneFeature      = "hasLayerOneFeature"
+                        :boxLayerFeature         = "getLayerFeatureBox(layer, feature)"
+                        :attributesSubset        = "attributesSubset"
+                        :getLayerField           = "getLayerField"/>
                       <tr v-for="({component}) in getLayerCustomComponents(layer.id, 'feature', 'before')">
                         <td :colspan="getColSpan(layer)">
-                          <component class="box-body" :is="component" :layer="layer" :feature="feature"/>
+                          <component
+                            class    = "box-body"
+                            :is      = "component"
+                            :layer   = "layer"
+                            :feature = "feature"/>
                         </td>
                       </tr>
-                      <tr v-show="!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)" :id="`${layer.id}_${index}`" class="featurebox-body">
+                      <tr
+                        v-show = "!collapsedFeatureBox(layer,feature) || hasOneLayerAndOneFeature(layer)"
+                        :id    = "`${layer.id}_${index}`"
+                        class  = "featurebox-body"
+                      >
                         <td :colspan="getColSpan(layer)">
                           <table class="feature_attributes">
                             <template v-for="attribute in layer.attributes.filter(attribute => attribute.show)">
@@ -358,7 +407,11 @@
                       </tr>
                       <tr v-for="({component}) in getLayerCustomComponents(layer.id, 'feature', 'after')">
                         <td colspan="getColSpan(layer)">
-                          <component class="box-body" :is="component" :layer="layer" :feature="feature"/>
+                          <component
+                            class    = "box-body"
+                            :is      = "component"
+                            :layer   = "layer"
+                            :feature = "feature"/>
                         </td>
                       </tr>
                     </tbody>
@@ -367,26 +420,28 @@
                 </template>
               </div>
               <div
-                v-for="({component}) in getLayerCustomComponents(layer.id, 'layer', 'after')"
-                class="box-body"
-                :class="{'mobile': isMobile()}" >
+                v-for  = "({component}) in getLayerCustomComponents(layer.id, 'layer', 'after')"
+                class  = "box-body"
+                :class = "{'mobile': isMobile()}" >
                 <component :is="component" :layer="layer"/>
               </div>
             </div>
           </li>
           <li v-for="component in state.components">
-            <component
-              :is="component"
-              @showresults="showResults()" />
+            <component :is="component" @showresults="showResults()" />
           </li>
         </ul>
       </template>
+      <!--   NO RESULTS   -->
       <template v-else>
-        <div v-if="state.changed" class="query-results-not-found" >
+        <div
+          v-if  = "state.changed"
+          class = "query-results-not-found"
+        >
           <h4
-            class="skin-color"
-            style="font-weight: bold; text-align: center"
-            v-t="'info.no_results'">
+            class = "skin-color"
+            style = "font-weight: bold; text-align: center"
+            v-t   = "'info.no_results'">
           </h4>
         </div>
       </template>
@@ -421,9 +476,9 @@
 
     data() {
       return {
-        state: this.$options.queryResultsService.state,
+        state:                       this.$options.service.state,
         headerExpandActionCellWidth: headerExpandActionCellWidth,
-        headerActionsCellWidth: headerActionsCellWidth,
+        headerActionsCellWidth:      headerActionsCellWidth,
       }
     },
     mixins: [fieldsMixin],
@@ -435,7 +490,7 @@
     },
     computed: {
       onelayerresult() {
-        return this.state.layers.length  === 1;
+        return 1 === this.state.layers.length;
       },
       hasLayers() {
         return this.hasResults || !!this.state.components.length;
@@ -473,7 +528,7 @@
               return {
                 icon: 'draw',
                 message: (query.layerName) ?
-                  `${query.layerName} ${"undefined" !== typeof query.fid ? ` - Feature Id: ${query.fid}` : ''}` // <Feature ID>:   when polygon feature comes from a Feature layer
+                  `${query.layerName} ${undefined !== query.fid ? ` - Feature Id: ${query.fid}` : ''}` // <Feature ID>:   when polygon feature comes from a Feature layer
                   : ' '                                                                                         // <empty string>: when polygon feature comes from a Drawed layer (temporary layer)
               };
             default:
@@ -513,22 +568,22 @@
        *
        * @param layerId
        * @param type feature or layer
+       * @param position
        * @returns {*}
        */
-      getLayerCustomComponents(layerId, type='feature', position='after'){
-        return this.state.layerscustomcomponents[layerId] &&
-          this.state.layerscustomcomponents[layerId][type] &&
-          this.state.layerscustomcomponents[layerId][type][position] ||
-          [];
-      },
-      getLayerField({layer, feature, fieldName}) {
-        const layerField = layer.attributes.find(attribute => attribute.name === fieldName);
-        const field = {
+      getLayerCustomComponents(layerId, type = 'feature', position = 'after'){
+        return this.state.layerscustomcomponents[layerId]
+          && this.state.layerscustomcomponents[layerId][type]
+          && this.state.layerscustomcomponents[layerId][type][position]
+          || [];
+      },
+      getLayerField({ layer, feature, fieldName }) {
+        const layerField = layer.attributes.find(a => fieldName === a.name);
+        return {
           ...layerField,
           label: null, // needed to hide label in query result dom table value content
           value: feature.attributes[fieldName]
         };
-        return field;
       },
       getQueryFields(layer, feature) {
         const fields = [];
@@ -547,23 +602,23 @@
         return this.attributesSubsetLength(layer)+(!this.hasLayerOneFeature(layer)*1);
       },
       getDownloadActions(layer) {
-        return this.state.layersactions[layer.id].find(action => action.formats);
+        return this.state.layersactions[layer.id].find(a => a.formats);
       },
       addLayerFeaturesToResults(layer) {
-        this.$options.queryResultsService.addLayerFeaturesToResultsAction(layer);
+        this.$options.service.addLayerFeaturesToResultsAction(layer);
       },
       showDownloadAction(evt) {
         const display = evt.target.children[0].style.display;
         evt.target.children[0].style.display = display === 'none' ? 'inline-block' : 'none';
       },
       printAtlas(layer) {
-        this.$options.queryResultsService.printAtlas(layer);
+        this.$options.service.printAtlas(layer);
       },
       showLayerDownloadFormats(layer) {
-        this.$options.queryResultsService.showLayerDownloadFormats(layer)
+        this.$options.service.showLayerDownloadFormats(layer)
       },
       saveLayerResult(layer, type="csv") {
-        this.$options.queryResultsService.saveLayerResult({layer, type});
+        this.$options.service.saveLayerResult({layer, type});
       },
       hasLayerOneFeature(layer) {
         return layer.features.length === 1;
@@ -575,12 +630,12 @@
        * @since 3.9.0
        */
       saveFilter(layer) {
-        this.$options.queryResultsService.saveFilter(layer);
+        this.$options.service.saveFilter(layer);
       },
       addRemoveFilter(layer){
-        this.$options.queryResultsService.addRemoveFilter(layer);
+        this.$options.service.addRemoveFilter(layer);
       },
-      getContainerFromFeatureLayer({layer, index}={}) {
+      getContainerFromFeatureLayer({ layer, index } = {}) {
         return $(`#${layer.id}_${index} > td`);
       },
       hasOneLayerAndOneFeature(layer) {
@@ -593,7 +648,7 @@
         return Array.isArray(layer.features) && layer.features.length > 0;
       },
       selectionFeaturesLayer(layer) {
-        this.$options.queryResultsService.selectionFeaturesLayer(layer);
+        this.$options.service.selectionFeaturesLayer(layer);
       },
       layerHasActions(layer) {
         return this.state.layersactions[layer.id].length > 0;
@@ -602,7 +657,7 @@
         return this.geometryAvailable(feature);
       },
       geometryAvailable(feature) {
-        return feature.geometry ? true : false;
+        return !!feature.geometry;
       },
       extractAttributesFromFirstTabOfFormStructureLayers(layer) {
         const attributes = new Set();
@@ -657,13 +712,13 @@
         return this.attributesSubset(layer).length;
       },
       cellWidth(index,layer) {
-        const headerLength = MAX_SUBSET_LENGTH + this.state.layersactions[layer.id].length;
-        const subsetLength = this.attributesSubsetLength(layer);
-        const diff = headerLength - subsetLength;
-        const actionsCellWidth = layer.hasgeometry ? headerActionsCellWidth : 0;
+        const headerLength                  = MAX_SUBSET_LENGTH + this.state.layersactions[layer.id].length;
+        const subsetLength                  = this.attributesSubsetLength(layer);
+        const diff                          = headerLength - subsetLength;
+        const actionsCellWidth              = layer.hasgeometry ? headerActionsCellWidth : 0;
         const headerAttributeCellTotalWidth = 100 - headerExpandActionCellWidth - actionsCellWidth;
-        const baseCellWidth = headerAttributeCellTotalWidth / MAX_SUBSET_LENGTH;
-        if ((index === subsetLength-1) && diff>0) {
+        const baseCellWidth                 = headerAttributeCellTotalWidth / MAX_SUBSET_LENGTH;
+        if ((index === subsetLength - 1) && diff > 0) {
           return baseCellWidth * (diff+1);
         } else {
           return baseCellWidth;
@@ -687,14 +742,14 @@
         return layer.formStructure.structure.map(n => Vue.observable(structuredClone(n)));
       },
       isAttributeOrTab(layer, item) {
-        const isField = item.field_name !== undefined;
+        const isField = undefined !== item.field_name;
         return  {
           type: isField && 'field' || 'tab',
           item: isField && this.getLayerAttributeFromStructureItem(layer, item.field_name) || [item]
         };
       },
       getLayerAttributeFromStructureItem(layer, field_name) {
-        return layer.attributes.find(attribute => attribute.name === field_name);
+        return layer.attributes.find(a => field_name === a.name);
       },
       getLayerFeatureBox(layer, feature, relation_index) {
         const boxid = this.getBoxId(layer, feature, relation_index);
@@ -702,19 +757,14 @@
           this.state.layersFeaturesBoxes[boxid] = Vue.observable({
             collapsed: true
           });
-          this.$watch(() => this.state.layersFeaturesBoxes[boxid].collapsed, collapsed => {
-            const index = layer.features.findIndex(_feature => feature.id === _feature.id);
-            const container = this.getContainerFromFeatureLayer({
-              layer,
-              index
-            });
-            this.$options.queryResultsService.openCloseFeatureResult({
-              open:!collapsed,
-              layer,
-              feature,
-              container
-            })
-          });
+          this.$watch(
+            () => this.state.layersFeaturesBoxes[boxid].collapsed,
+            collapsed => {
+              const index = layer.features.findIndex(_feature => feature.id === _feature.id);
+              const container = this.getContainerFromFeatureLayer({ layer, index });
+              this.$options.service.openCloseFeatureResult({ open:!collapsed, layer, feature, container })
+            }
+          );
           this.state.layersFeaturesBoxes[boxid].collapsed = layer.features.length > 1;
         }
         return this.state.layersFeaturesBoxes[boxid];
@@ -728,14 +778,14 @@
 
       showFeatureInfo(layer, boxid) {
         const box = this.state.layersFeaturesBoxes[boxid];
-        this.$options.queryResultsService.emit('show-query-feature-info', {
+        this.$options.service.emit('show-query-feature-info', {
           layer,
           tabs: this.hasFormStructure(layer),
           show: box ? !box.collapsed : false,
         });
       },
       getBoxId(layer, feature, relation_index) {
-        return this.$options.queryResultsService.getBoxId(layer, feature, relation_index);
+        return this.$options.service.getBoxId(layer, feature, relation_index);
       },
       async toggleFeatureBox(layer, feature, relation_index) {
         const boxid = this.getBoxId(layer, feature, relation_index);
@@ -744,18 +794,17 @@
         this.showFeatureInfo(layer, boxid);
       },
       toggleFeatureBoxAndZoom(layer, feature, relation_index) {
-        !this.hasLayerOneFeature(layer) && this.toggleFeatureBox(layer, feature, relation_index);
+        if (!this.hasLayerOneFeature(layer)) { this.toggleFeatureBox(layer, feature, relation_index) }
       },
       async trigger(action,layer,feature, index) {
         if (action.opened && $(`#${layer.id}_${index}`).css('display') === 'none') {
           this.toggleFeatureBox(layer, feature);
           await this.$nextTick();
         }
-        const container = this.getContainerFromFeatureLayer({layer, index});
-        await this.$options.queryResultsService.trigger(action.id, layer,feature, index, container);
+        await this.$options.service.trigger(action.id, layer,feature, index, this.getContainerFromFeatureLayer({ layer, index }));
       },
       showFullPhoto(url) {
-        this.$options.queryResultsService.showFullPhoto(url);
+        this.$options.service.showFullPhoto(url);
       },
       openLink(link_url) {
         window.open(link_url, '_blank');
@@ -771,46 +820,43 @@
     },
 
     watch: {
-      async 'state.layers'(layers) {
+      async 'state.layers'(layers = []) {
         layers.forEach(layer => {
-          if (layer.attributes.length <= MAX_SUBSET_LENGTH && !layer.hasImageField) layer.expandable = false;
+          if (layer.attributes.length <= MAX_SUBSET_LENGTH && !layer.hasImageField) {
+            layer.expandable = false;
+          }
           layer.features.forEach(feature => {
             this.getLayerFeatureBox(layer, feature);
-           if (feature.attributes.relations) {
-              const relations = feature.attributes.relations;
-              relations.forEach(relation => {
-                const boxid = `${layer.id}_${feature.id}_${relation.name}`;
-                const elements = relation.elements;
-                elements.forEach((element, index) => {
-                  this.state.layersFeaturesBoxes[boxid+index] = {
-                    collapsed: true
-                  };
-                });
-              })
+            if (feature.attributes.relations) {
+              feature.attributes.relations
+                .forEach(relation => {
+                  relation.elements
+                    .forEach((element, index) => this.state.layersFeaturesBoxes[`${layer.id}_${feature.id}_${relation.name}${index}`] = { collapsed: true });
+                })
             }
           })
         });
 
         // check if is a single result layer and if it has one feature
         if (this.onelayerresult && this.hasLayerOneFeature(layers[0])) {
-          const layer = layers[0];
+          const layer   = layers[0];
           const feature = layer.features[0];
-          const boxid = this.getBoxId(layer, feature);
-          this.$options.queryResultsService.onceafter('postRender', () => {
+          const boxid   = this.getBoxId(layer, feature);
+          this.$options.service.onceafter('postRender', () => {
             this.showFeatureInfo(layer, boxid);
           });
         }
-        requestAnimationFrame(() => this.$options.queryResultsService.postRender(this.$el));
+        requestAnimationFrame(() => this.$options.service.postRender(this.$el));
         await this.$nextTick();
       },
       onelayerresult(bool) {
-        bool && this.$options.queryResultsService.highlightFeaturesPermanently(this.state.layers[0]);
+        bool && this.$options.service.highlightFeaturesPermanently(this.state.layers[0]);
       }
     },
     created() {
       //PUT HERE THROTTLED FUNCTION
       this.zoomToLayerFeaturesExtent = throttle(layer => {
-        this.$options.queryResultsService.zoomToLayerFeaturesExtent(layer, {
+        this.$options.service.zoomToLayerFeaturesExtent(layer, {
           highlight: true
         });
       })
@@ -819,7 +865,7 @@
       this.state.zoomToResult = true;
     },
     destroyed() {
-      this.$options.queryResultsService.clear();
+      this.$options.service.clear();
     }
   };
 </script>
diff --git a/src/components/QueryResultsAction.vue b/src/components/QueryResultsAction.vue
index fc1e30519..b1f1b280e 100644
--- a/src/components/QueryResultsAction.vue
+++ b/src/components/QueryResultsAction.vue
@@ -4,18 +4,20 @@
 -->
 
 <template>
-   <span v-if="show" @contextmenu.prevent.stop=""
-      @click.stop="clickAction(action, layer, feature, featureIndex, $event)"
-      v-download="action.download"
-      :class="{'toggled': action.state && action.state.toggled[featureIndex] }"
-      class="action-button"
-      v-t-tooltip:top.create="action.hint">
-      <span
-        style="padding: 2px;"
-        :style="action.style"
-        :class="`action-button-icon ${action.class}`">
-      </span>
-    </span>
+   <span
+     v-if                      = "show"
+     @contextmenu.prevent.stop = ""
+     @click.stop               = "clickAction(action, layer, feature, featureIndex, $event)"
+     v-download                = "action.download"
+     :class                    = "{'toggled': action.state && action.state.toggled[featureIndex] }"
+     class                     = "action-button"
+     v-t-tooltip:top.create    = "action.hint">
+     <span
+       style  = "padding: 2px;"
+       :style = "action.style"
+       :class = "`action-button-icon ${action.class}`">
+     </span>
+   </span>
 </template>
 
 <script>
@@ -54,7 +56,7 @@
           const originalDataTitle = element.attr('data-original-title');
           element.attr('data-original-title', t(action.hint_change.hint));
           element.tooltip('show');
-          setTimeout(()=>{
+          setTimeout(() => {
             element.attr('data-original-title', originalDataTitle);
             element.tooltip('show');
           }, action.hint_change.duration || 600)
@@ -62,12 +64,12 @@
         this.$emit('action-clicked', action)
       }
     },
-    async created(){
+    async created() {
       if (this.action.init){
         this.action.init({layer: this.layer, feature: this.feature, index:this.featureIndex, action:this.action});
       }
       if (typeof this.action.condition === 'function') {
-        const show = this.action.condition({layer:this.layer, feature:this.feature});
+        const show = this.action.condition({ layer: this.layer, feature: this.feature });
         this.show = show instanceof Promise ? await show: show;
       }
     },
diff --git a/src/components/QueryResultsActionChooseLayer.vue b/src/components/QueryResultsActionChooseLayer.vue
index cd8877c1a..f7cebf56d 100644
--- a/src/components/QueryResultsActionChooseLayer.vue
+++ b/src/components/QueryResultsActionChooseLayer.vue
@@ -53,11 +53,11 @@ export default {
     config: {
       type: Object,
       default: {
-        icon: 'pencil',
-        label: 'Choose a Layer',
+        icon:     'pencil',
+        label:    'Choose a Layer',
         nolayers: 'No layers found',
-        layers: [],
-        cbk: () => {},
+        layers:   [],
+        cbk:      () => {},
       }
     },
   },
diff --git a/src/components/QueryResultsActionDownloadFormats.vue b/src/components/QueryResultsActionDownloadFormats.vue
index 88cbeaea4..6415138d3 100644
--- a/src/components/QueryResultsActionDownloadFormats.vue
+++ b/src/components/QueryResultsActionDownloadFormats.vue
@@ -4,13 +4,32 @@
 -->
 
 <template>
-  <div class="g3w-download-formats-content" style="width: 100%; display: flex" @click.prevent.stop="">
-    <select  style="flex-grow: 1" v-select2="'download_format'" :search="false" class="form-control">
-      <option v-for="download in config.downloads" :key="download.id" v-download :value="download.format">
+  <div
+    class               = "g3w-download-formats-content"
+    style               = "width: 100%; display: flex"
+    @click.prevent.stop = ""
+  >
+    <select
+      style     = "flex-grow: 1"
+      v-select2 = "'download_format'"
+      :search   = "false"
+      class     ="form-control"
+    >
+      <option
+        v-for="download in config.downloads"
+        :key   = "download.id"
+        :value = "download.format"
+        v-download
+      >
         <span style="font-weight: bold">{{download.format}}</span>
       </option>
     </select>
-    <button style="border-radius: 0 3px 3px 0;" class="btn skin-button" @click.stop=download v-download>
+    <button
+      style       = "border-radius: 0 3px 3px 0;"
+      class       = "btn skin-button"
+      @click.stop = download
+      v-download
+    >
       <span :class="g3wtemplate.getFontClass('download')">
       </span>
     </button>
@@ -23,10 +42,9 @@ export default {
   /** @since 3.8.7 */
   name: "downloadformats",
 
-  data(){
-    const download_format = this.config.downloads[0].format;
+  data() {
     return {
-      download_format
+      download_format: this.config.downloads[0].format
     }
   },
   props: {
@@ -47,14 +65,11 @@ export default {
   methods: {
     async download(){
       try {
-        const download = this.config.downloads.find(action => action.format === this.download_format);
+        const download = this.config.downloads.find(a => a.format === this.download_format);
         await download.cbk(this.layer, this.feature ? this.feature : this.layer.features, download, this.featureIndex);
       }
-      catch(err){}
+      catch(e) {console.warn(e) }
     }
   }
 }
-</script>
-
-<style scoped>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/QueryResultsActionInfoFormats.vue b/src/components/QueryResultsActionInfoFormats.vue
index d67a6df3c..c0cce11c1 100644
--- a/src/components/QueryResultsActionInfoFormats.vue
+++ b/src/components/QueryResultsActionInfoFormats.vue
@@ -5,11 +5,11 @@
 
 <template>
   <select
-    v-if="hasInfo"
-    class="skin-color"
-    v-select2="'infoformat'"
-    :select2_value="infoformat"
-    :search="false"
+    v-if           = "hasInfo"
+    class          = "skin-color"
+    v-select2      = "'infoformat'"
+    :select2_value = "infoformat"
+    :search        = "false"
   >
     <option
       v-for  = "infoformat in infoformats"
@@ -33,7 +33,7 @@ export default {
 
   props: {
     layer: {
-      type: Object,
+      type:     Object,
       required: true
     }
   },
@@ -69,7 +69,7 @@ export default {
       try {
         const response = await this.projectLayer.changeProxyDataAndReloadFromServer('wms', {
           headers: { 'Content-Type': contenttype },
-          params: { INFO_FORMAT: contenttype }
+          params:  { INFO_FORMAT: contenttype }
         });
         this.layer.infoformat = contenttype;
         this.projectLayer.setInfoFormat(this.layer.infoformat);
@@ -79,8 +79,8 @@ export default {
         } else {
           this.__parserawdata(data);
         }
-      } catch (err) {
-        console.log(err);
+      } catch (e) {
+        console.warn(e);
       }
       this.layer.loading = false;
       // enable select during get data from server
@@ -101,10 +101,10 @@ export default {
           properties:attributes
         } = queryService.getFeaturePropertiesAndGeometry(feature);
 
-        // in case of starting raw data (html) need to sett attributes to visualized on result
+        // in the case of starting raw data (html) need to sett attributes to visualize on a result
         if (0 === this.layer.attributes.length) {
           this.layer.hasgeometry = !!geometry;
-          // need to setActionsForLayers to visualize eventually actions
+          // need to setActionsForLayers to visualize eventual actions
           queryService.setActionsForLayers([this.layer]);
           getAlphanumericPropertiesFromFeature(attributes).forEach(name =>{
             this.layer.attributes.push({
diff --git a/src/components/QueryResultsActionQueryPolygonCSVAttributes.vue b/src/components/QueryResultsActionQueryPolygonCSVAttributes.vue
index fe8ad3668..81e9cedc3 100644
--- a/src/components/QueryResultsActionQueryPolygonCSVAttributes.vue
+++ b/src/components/QueryResultsActionQueryPolygonCSVAttributes.vue
@@ -5,12 +5,31 @@
 
 <template>
   <div style="width:100%">
-    <h5 class="skin-background-color g3w-polygonattributes-types-title" v-t="'sdk.mapcontrols.querybypolygon.download.title'"></h5>
+    <h5
+      class = "skin-background-color g3w-polygonattributes-types-title"
+      v-t   = "'sdk.mapcontrols.querybypolygon.download.title'">
+    </h5>
     <div class="g3w-polygonattributes-types-content">
-      <select ref="g3w_select_feature_featurepolygon" style="width: 100%" v-select2="'type'" class="form-control" :search="false">
-        <option :ref="choice.type" v-for="choice in config.choices" :key="choice.type" :value="choice.type" v-t="choice.label"></option>
+      <select
+        ref       = "g3w_select_feature_featurepolygon"
+        style     = "width: 100%"
+        v-select2 = "'type'"
+        class     = "form-control"
+        :search   = "false"
+      >
+        <option
+          v-for  = "choice in config.choices"
+          :key   = "choice.type"
+          :value = "choice.type"
+          :ref   = "choice.type"
+          v-t    = "choice.label">
+        </option>
       </select>
-      <button style="border-radius: 0 3px 3px 0;" class="btn skin-button" @click.stop=config.download(type)>
+      <button
+        style       = "border-radius: 0 3px 3px 0;"
+        class       = "btn skin-button"
+        @click.stop = config.download(type)
+      >
         <span :class="g3wtemplate.getFontClass('download')"></span>
       </button>
     </div>
@@ -32,20 +51,23 @@
         type: Object
       },
       config: {
-        type: Object,
+        type:    Object,
         default: null
       },
     },
-    data(){
+    data() {
       return {
         type: this.config.choices[0].type
       }
     },
     created() {
-      this.unwatch =  this.$watch(()=>ApplicationState.language, ()=>{
-        this.config.choices.forEach(choice => $(this.$refs[choice.type]).text(t(choice.label)));
-        $(this.$refs.g3w_select_feature_featurepolygon).select2().trigger('change');
-      })
+      this.unwatch = this.$watch(
+        () => ApplicationState.language,
+        () => {
+          this.config.choices.forEach(c => $(this.$refs[c.type]).text(t(c.label)));
+          $(this.$refs.g3w_select_feature_featurepolygon).select2().trigger('change');
+        }
+      )
     },
     beforeDestroy() {
       this.unwatch && this.unwatch();
diff --git a/src/components/QueryResultsActions.vue b/src/components/QueryResultsActions.vue
index 128a08fb7..e4ee4b994 100644
--- a/src/components/QueryResultsActions.vue
+++ b/src/components/QueryResultsActions.vue
@@ -5,10 +5,10 @@
 
 <template>
   <td
-    v-if="actions.length"
-    style="padding: 3px"
-    class="g3w-feature-actions skin-background-color lighten"
-    :colspan="colspan">
+    v-if     = "actions.length"
+    style    = "padding: 3px"
+    class    = "g3w-feature-actions skin-background-color lighten"
+    :colspan = "colspan">
     <action v-for="action in actions" :key="action.id" v-bind="$props" :action="action"/>
   </td>
 </template>
@@ -32,7 +32,7 @@
         type: Function
       },
       actions: {
-        type: Array,
+        type:    Array,
         default: []
       },
       colspan: {
diff --git a/src/components/QueryResultsHeaderFeatureActionsBody.vue b/src/components/QueryResultsHeaderFeatureActionsBody.vue
index 79ae194a2..be04d10bd 100644
--- a/src/components/QueryResultsHeaderFeatureActionsBody.vue
+++ b/src/components/QueryResultsHeaderFeatureActionsBody.vue
@@ -5,21 +5,22 @@
 
 <template>
   <tr
-    @mouseover="trigger({id:'highlightgeometry'}, layer, feature, index)"
-    @mouseout="trigger({id:'clearHighlightGeometry'}, layer, feature, index)"
-    class="featurebox-header">
+    @mouseover = "trigger({id:'highlightgeometry'}, layer, feature, index)"
+    @mouseout  = "trigger({id:'clearHighlightGeometry'}, layer, feature, index)"
+    class      = "featurebox-header"
+  >
     <actions
-      :colspan="colspan"
-      :layer="layer"
-      :featureIndex="index"
-      :trigger="trigger"
-      :feature="feature"
-      :actions="actions"/>
+      :colspan      = "colspan"
+      :layer        = "layer"
+      :featureIndex = "index"
+      :trigger      = "trigger"
+      :feature      = "feature"
+      :actions      = "actions"/>
   </tr>
 </template>
 
 <script>
-  import Actions from 'components/QueryResultsActions.vue';
+  import Actions         from 'components/QueryResultsActions.vue';
   import { fieldsMixin } from 'mixins';
   
   export default {
diff --git a/src/components/QueryResultsHeaderFeatureBody.vue b/src/components/QueryResultsHeaderFeatureBody.vue
index 20065c411..c8a8d9bba 100644
--- a/src/components/QueryResultsHeaderFeatureBody.vue
+++ b/src/components/QueryResultsHeaderFeatureBody.vue
@@ -5,20 +5,25 @@
 
 <template>
   <tr>
-    <td class="attribute" v-for="attribute in attributesSubset(layer)">
+    <td
+      v-for = "attribute in attributesSubset(layer)"
+      class = "attribute"
+    >
       <span
-        v-if="isLink(getLayerField({layer, feature, fieldName: attribute.name}))"
-        class="skin-color"
-        :class="g3wtemplate.getFontClass('link')">
+        v-if   = "isLink(getLayerField({layer, feature, fieldName: attribute.name}))"
+        class  = "skin-color"
+        :class = "g3wtemplate.getFontClass('link')">
       </span>
 
-      <span v-else-if="isPhoto(getLayerField({layer, feature, fieldName: attribute.name}))"
-        class="skin-color"
-        :class="g3wtemplate.getFontClass('image')"></span>
+      <span
+        v-else-if = "isPhoto(getLayerField({layer, feature, fieldName: attribute.name}))"
+        class     = "skin-color"
+        :class    = "g3wtemplate.getFontClass('image')"></span>
 
-      <span v-else-if="isImage(getLayerField({layer, feature, fieldName: attribute.name}))"
-        class="skin-color"
-        :class="g3wtemplate.getFontClass('image')"></span>
+      <span
+        v-else-if = "isImage(getLayerField({layer, feature, fieldName: attribute.name}))"
+        class     = "skin-color"
+        :class    = "g3wtemplate.getFontClass('image')"></span>
       <span v-else >{{feature.attributes[attribute.name]}}</span>
 
     </td>
@@ -28,7 +33,7 @@
 </template>
 
 <script>
-  import Actions from 'components/QueryResultsActions.vue';
+  import Actions         from 'components/QueryResultsActions.vue';
   import { fieldsMixin } from 'mixins';
   
   export default {
diff --git a/src/components/QueryResultsTableAttributeFieldValue.vue b/src/components/QueryResultsTableAttributeFieldValue.vue
index 5118c8e76..baeee1f1d 100644
--- a/src/components/QueryResultsTableAttributeFieldValue.vue
+++ b/src/components/QueryResultsTableAttributeFieldValue.vue
@@ -4,16 +4,16 @@
 -->
 
 <template>
-    <g3w-vue v-if="isVue(field)" :feature="feature" :state="field"/>
-    <span v-else-if="isSimple(field)" v-html="field.value"></span>
-    <g3w-image v-else-if="isPhoto(field)" :value="field.value"/>
-    <g3w-image v-else-if="isImage(field)" :value="field.value"/>
-    <g3w-link v-else-if="isLink(field)" :state="{value: field.value}"/>
+    <g3w-vue   v-if      = "isVue(field)"   :feature="feature" :state="field"/>
+    <span      v-else-if = "isSimple(field)" v-html="field.value"></span>
+    <g3w-image v-else-if = "isPhoto(field)" :value="field.value"/>
+    <g3w-image v-else-if = "isImage(field)" :value="field.value"/>
+    <g3w-link  v-else-if = "isLink(field)"  :state="{value: field.value}"/>
 </template>
 
 <script>
-  import Link from 'components/FieldLink.vue';
-  import VueField from 'components/FieldVue.vue';
+  import Link            from 'components/FieldLink.vue';
+  import VueField        from 'components/FieldVue.vue';
   import { fieldsMixin } from 'mixins';
 
   export default {
@@ -23,13 +23,13 @@
         type: Object
       },
       feature: {
-          type: Object
+        type: Object
       }
     },
-    mixins: [fieldsMixin],
+    mixins: [ fieldsMixin ],
     components: {
       'g3w-link': Link,
-      'g3w-vue': VueField,
+      'g3w-vue':  VueField,
     }
   }
 </script>
diff --git a/src/components/RelationsPage.vue b/src/components/RelationsPage.vue
index 237c7584c..503690f4b 100644
--- a/src/components/RelationsPage.vue
+++ b/src/components/RelationsPage.vue
@@ -5,16 +5,20 @@
 
 <template>
   <div class="query-relations-page">
-    <component :loading="loading" @save-relation="saveRelations" @show-chart="showChart" @hide-chart="hideChart"
-      :ref="currentview"
-      :previousview="previousview"
-      :is="currentview"
-      :showChartButton="showChartButton"
-      :relations="relations"
-      :relation="relation"
-      :nmRelation="nmRelation"
-      :feature="feature"
-      :table="table"/>
+    <component
+      :loading         = "loading"
+      @save-relation   = "saveRelations"
+      @show-chart      = "showChart"
+      @hide-chart      = "hideChart"
+      :ref             = "currentview"
+      :previousview    = "previousview"
+      :is              = "currentview"
+      :showChartButton = "showChartButton"
+      :relations       = "relations"
+      :relation        = "relation"
+      :nmRelation      = "nmRelation"
+      :feature         = "feature"
+      :table           = "table"/>
   </div>
 </template>
 
@@ -28,6 +32,27 @@ import {
 }                                           from "app/constant";
 import { RelationEventBus as VM }           from "app/eventbus";
 import { getFeaturesFromResponseVectorApi } from "utils/getFeaturesFromResponseVectorApi";
+import RelationsService                     from 'services/relations';
+import ApplicationService                   from 'services/application';
+
+let _options;
+
+function _buildRelationTable(relations = [], id) {
+  relations = relations || [];
+  const layer = ApplicationService.getCurrentProject().getLayerById(id);
+  const attrs = Object.keys(relations[0] ? relations[0].attributes : {});
+  const cols  = layer.getTableHeaders().filter(h => -1 !== attrs.indexOf(h.name));
+  return {
+    columns:          cols.map(c => c.label),
+    rows:             relations.map(r => cols.map(c => r.attributes[c.name])),
+    rows_fid:         relations.map(r => r.attributes[G3W_FID]),
+    features:         relations,
+    fields:           cols.length ? cols : null,
+    formStructure:    layer.getLayerEditingFormStructure(),
+    rowFormStructure: null,
+    layerId:          layer.getId()
+  };
+}
 
 export default {
 
@@ -35,122 +60,119 @@ export default {
   name: 'relation-page',
 
   data() {
-    this.chartRelationIds = this.$options.chartRelationIds || [];
     const {
-      table,
-      relation=null,
-      relations,
+      table =            null,
+      relation =         null,
+      relations =        [],
       nmRelation,
-      feature,
-      currentview,
-      service
+      feature =           null,
+      currentview =      'relations',
+      chartRelationIds = [],
+      layer,
     } = this.$options;
     return {
-      loading: false,
-      state: null,
-      error: false,
-      table: table ? service.buildRelationTable(table) : null,
-      relation,
-      relations,
-      nmRelation,
+      loading:         false,
+      state:           null,
+      error:           false,
+      table:           table ? _buildRelationTable(table) : null,
+      previousview:    currentview,
       showChartButton: false,
       feature,
       currentview,
-      previousview: currentview
+      relation,
+      relations,
+      nmRelation,
+      chartRelationIds,
+      layer,
     }
   },
   provide() {
     return {
-      relationnoback: this.$options.relations.length === 1
+      relationnoback: 1 === this.$options.relations.length
     }
   },
   components: {
     'relations': RelationsComponent,
-    'relation': RelationComponent
+    'relation':  RelationComponent
   },
   methods: {
-    saveRelations(type){
-      this.$options.service.saveRelations(type)
+    async saveRelations(type) {
+      const id = ApplicationService.setDownload(true);
+      try      { await RelationsService.save(Object.assign(_options, { type })) }
+      catch(e) { console.warn(e); GUI.showUserMessage({ type: 'alert', message: e || 'info.server_error', closable: true }); }
+      ApplicationService.setDownload(false, id);
     },
     reloadLayout() {
       VM.$emit('reload');
     },
-    showChart(container, relationData){
-      const relationLayerId = this.relation.referencingLayer;
-      GUI.getService('queryresults').showChart([relationLayerId], container, relationData)
+    showChart(container, relationData) {
+      GUI.getService('queryresults').showChart([this.relation.referencingLayer], container, relationData)
     },
-    hideChart(container){
+    hideChart(container) {
       GUI.getService('queryresults').hideChart(container)
     },
     async showRelation(relation) {
       GUI.setLoadingContent(true);
-      this.loading = true;
-      this.relation = relation;
+      this.loading        = true;
+      this.relation       = relation;
       let relationLayerId = relation.referencingLayer;
-      const fid = this.feature.attributes[G3W_FID];
       try {
-        const response = await this.$options.service.getRelations({
+        _options = {
           layer: this.$options.layer,
+          fid:   this.feature.attributes[G3W_FID],
           relation,
-          fid
-        });
-        let relations = getFeaturesFromResponseVectorApi(response, {
-          type: 'result'
-        });
+        };
+        const response = await RelationsService.getRelations(_options);
+        let relations = getFeaturesFromResponseVectorApi(response, { type: 'result' });
         if (this.nmRelation) {
           relationLayerId = this.nmRelation.referencedLayer;
-          relations = await this.$options.service.getRelationsNM({
+          relations = await RelationsService.getRelationsNM({
             nmRelation: this.nmRelation,
-            features: relations
+            features:   relations
           });
         }
-        this.showChartButton = !!this.chartRelationIds.find(chartlayerid => chartlayerid === relationLayerId);
-        this.table = this.$options.service.buildRelationTable(relations, relationLayerId);
+        this.showChartButton = !!this.chartRelationIds.find(id => relationLayerId === id);
+        this.table           = _buildRelationTable(relations, relationLayerId);
 
         GUI.changeCurrentContentOptions({
           title: relation.name,
-          crumb: {
-            title: relation.name
-          }
+          crumb: { title: relation.name }
         });
+
         await this.$nextTick();
         this.previousview = this.currentview;
         this.currentview = 'relation';
-      } catch(err){
-        // manage error here
-      }
+      } catch(e) { console.warn(e); }
       GUI.setLoadingContent(false);
       this.loading = true;
     },
     setRelationsList() {
       this.previousview = 'relation';
-      this.currentview = 'relations';
-      GUI.changeCurrentContentOptions({
-        crumb: {
-          title: LIST_OF_RELATIONS_TITLE
-        }
-      });
+      this.currentview  = 'relations';
+      GUI.changeCurrentContentOptions({ crumb: { title: LIST_OF_RELATIONS_TITLE } });
       this.loading = false;
-    }
+    },
   },
   beforeMount() {
-    if (this.currentview === 'relation' || (this.relations.length === 1 && this.relations[0].type === 'ONE')) this.showRelation(this.relations[0])
+    if ('relation' === this.currentview  || (1 === this.relations.length && 'ONE' === this.relations[0].type)) {
+      this.showRelation(this.relations[0])
+    }
   },
   async mounted() {
     /**
      * Order relations by name
      */
-    this.relations.sort(({name:relationName1}, {name:relationName2}) => {
+    this.relations.sort(({ name: relationName1 }, { name: relationName2 }) => {
       if (relationName1 < relationName2) return -1;
       if (relationName1 > relationName2) return 1;
       return 0;
     });
     await this.$nextTick();
-    if (this.error)
-      requestAnimationFrame(() => {
-        GUI.popContent()
-      });
+    if (this.error) { requestAnimationFrame(() => GUI.popContent()) }
     this.error = false;
+  },
+  created() {
+    this.$on('resize-component', this.reloadLayout);
   }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Search.vue b/src/components/Search.vue
index f429c34ca..66ca0049d 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -4,23 +4,104 @@
 -->
 
 <template>
-  <ul id="g3w-search" class="treeview-menu g3w-search g3w-tools menu-items" v-if="show">
-    <li v-for="search in state.searches" class="menu-item" @click="showPanel(search)">
+  <ul
+    v-if  = "show"
+    id    = "g3w-search"
+    class ="treeview-menu g3w-search g3w-tools menu-items"
+  >
+
+    <!-- SAVED SEARCHES (from g3w-admin) -->
+    <li
+      v-for       = "search in state.searches"
+      class       = "menu-item"
+      @click.stop = "showPanel(search)"
+    >
       <i :class="g3wtemplate.getFontClass('empty-circle')"></i>
       <span>{{ search.name }}</span>
     </li>
-    <li v-for="searchtool in state.searchtools">
-      <g3w-tool :tool="searchtool"></g3w-tool>
+
+    <li v-for="searchtool in state.tools">
+      <g3w-tool :tool="searchtool" />
+    </li>
+
+    <!-- ORIGINAL SOURCE: src/components/QueryBuilderSearch.vue@v3.9.3 -->
+    <li
+      v-for = "(search, i) in state.querybuildersearches"
+      :key  = "search.id"
+    >
+      <div style="position:relative">
+        <bar-loader :loading="search.qbloading"/>
+        <div class="querybuliserch-tools">
+          <i :class="g3wtemplate.getFontClass('filter')"></i>
+          <span>{{ search.name }}</span>
+          <div>
+            <span
+              class          = "icon-search-action skin-tooltip-bottom"
+              data-placement = "bottom"
+              data-toggle    = "tooltip"
+              data-container = "body"
+              v-t-tooltip    = "'sdk.querybuilder.search.run'"
+            >
+              <i @click.stop="run(search)" style="color: green;" :class="g3wtemplate.getFontClass('run')"></i>
+            </span>
+            <span
+              class          = "icon-search-action skin-tooltip-bottom"
+              data-placement = "bottom"
+              data-toggle    = "tooltip"
+              data-container = "body"
+              v-t-tooltip    = "'sdk.querybuilder.search.info'"
+            >
+              <i @click.stop="search.qbshowinfo=!search.qbshowinfo" style="color: #FFF;" :class="g3wtemplate.getFontClass('info')"></i>
+            </span>
+            <span
+              class          = "icon-search-action skin-tooltip-bottom"
+              data-placement = "bottom"
+              data-toggle    = "tooltip"
+              data-container = "body"
+              v-t-tooltip    = "'sdk.querybuilder.search.edit'"
+            >
+              <i @click.stop="edit(search)" style="color: #307095;" :class="g3wtemplate.getFontClass('pencil')"></i>
+            </span>
+            <span
+              class          = "icon-search-action skin-tooltip-bottom"
+              data-placement = "bottom"
+              data-toggle    = "tooltip"
+              data-container = "body"
+              v-t-tooltip    = "'sdk.querybuilder.search.delete'"
+            >
+              <i @click.stop="remove(search, i)" style="color: red;" :class="g3wtemplate.getFontClass('trash')"></i>
+            </span>
+          </div>
+        </div>
+        <div class="querybuildsearch-info" v-show="search.qbshowinfo">
+          <div>
+            <span style="font-weight: bold; white-space: pre">LAYER: </span>
+            <span style="white-space: pre-wrap;">{{ search.layerName }}</span>
+          </div>
+          <div>
+            <span style="font-weight: bold;">EXPRESSION: </span>
+            <span style="white-space: pre-wrap;">{{ search.filter }}</span>
+          </div>
+        </div>
+      </div>
     </li>
-    <g3w-search-querybuilder v-for="(querybuildersearch, index) in state.querybuildersearches" :key="querybuildersearch.id"
-      :querybuildersearch="querybuildersearch"  @delete="removeItem({type:'querybuilder', index:index})">
-    </g3w-search-querybuilder>
+
   </ul>
 </template>
 
 <script>
-import G3WTool from 'components/Tool.vue';
-import G3WSearchQuerybuilder from 'components/QueryBuilderSearch.vue';
+import Panel                       from 'core/g3w-panel';
+import CatalogLayersStoresRegistry from 'store/catalog-layers';
+import ProjectsRegistry            from 'store/projects';
+import ApplicationService          from 'services/application';
+import DataRouterService           from 'services/data';
+import GUI                         from 'services/gui';
+import { createFilterFromString }  from 'utils/createFilterFromString';
+
+import G3WTool                     from 'components/Tool.vue';
+import * as vueComp                from 'components/QueryBuilder.vue';
+
+const { t } = require('core/i18n/i18n.service');
 
 export default {
 
@@ -29,32 +110,110 @@ export default {
 
   data() {
     return {
-      state: null
-    }
+      state: this.state || {},
+    };
   },
+
   components: {
     'g3w-tool': G3WTool,
-    'g3w-search-querybuilder': G3WSearchQuerybuilder
   },
+
   computed: {
-    show(){
-      return this.state.searches.length + this.state.searchtools.length + this.state.querybuildersearches.length > 0;
+    show() {
+      return this.state.searches.length + this.state.tools.length + this.state.querybuildersearches.length > 0;
     }
   },
+
   methods: {
-    showPanel(config={}) {
+
+    showPanel(config = {}) {
       this.$options.service.showPanel(config);
     },
-    removeItem({type, index}){
-      this.$options.service.removeItem({
-        type,
-        index
-      })
-    }
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
+    async remove(search, index) {
+      try {
+        await (new Promise((res, rej) => { GUI.dialog.confirm(t('sdk.querybuilder.delete'), d => d ? res() : rej()) }));
+        const items     = ApplicationService.getLocalItem('QUERYBUILDERSEARCHES');
+        const projectId = ProjectsRegistry.getCurrentProject().getId();
+        const searches  = (items ? items[projectId] || [] : []).filter(item => item.id !== search.id);
+        if (searches.length)           items[projectId] = searches;
+        else                           delete items[projectId];
+        if (Object.keys(items).length) ApplicationService.setLocalItem({ id: 'QUERYBUILDERSEARCHES', data: items });
+        else                           ApplicationService.removeLocalItem('QUERYBUILDERSEARCHES');
+        this.$options.service.removeItem({ type: 'querybuilder', index });
+      } catch(e) {
+        console.warn(e);
+      }
+    },
+
+    edit(search) {
+      const opts = {
+        id:            search.id,
+        name:          search.name,
+        layerId:       search.layerId,
+        filter:        search.filter,
+        title:         'Query Builder',
+        show:          true,
+      };
+      opts.internalPanel = new (Vue.extend(vueComp))(opts);
+      new Panel(opts);
+    },
+
+    /**
+     * ORIGINAL SOURCE: src/services/querybuilder.js@v3.9.3
+     */
+    async run(search) {
+      search.qbloading = true;
+      try {
+        const layer = CatalogLayersStoresRegistry.getLayerById(search.layerId);
+        await DataRouterService.getData('search:features', {
+          inputs: {
+            layer,
+            filter: createFilterFromString({ layer, filter: search.filter }),
+            feature_count: 100,
+          },
+          outputs: true,
+        });
+      } catch(e) {
+        console.warn(e);
+        GUI.showUserMessage({ type: 'alert', message: 'sdk.querybuilder.error_run', autoclose: true });
+      }
+      search.qbloading = false;
+    },
+
   },
+
   async mounted() {
     await this.$nextTick();
     $('.icon-search-action').tooltip();
-  }
+  },
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.querybuliserch-tools {
+  display:flex;
+  align-items: baseline;
+}
+.querybuliserch-tools > i {
+  margin-right: 14px;
+  margin-left: 1px;
+}
+.querybuliserch-tools > span {
+  white-space: pre-wrap;
+}
+.querybuliserch-tools > div {
+  margin-left: auto;
+}
+.querybuliserch-tools > div i {
+  padding: 3px;
+  font-size: 1.3em;
+}
+.querybuildsearch-info {
+  margin-top: 5px; 
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SearchDatetime.vue b/src/components/SearchDatetime.vue
deleted file mode 100644
index cc9440669..000000000
--- a/src/components/SearchDatetime.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div :id="id" class="input-group date">
-    <input :id="forminput.id" type='text' class="form-control"/>
-    <span class="input-group-addon skin-color">
-      <span :class="g3wtemplate.getFontClass(time ? 'time': 'calendar')"></span>
-    </span>
-  </div>
-
-</template>
-
-<script>
-  import ApplicationState from 'store/application-state';
-
-  const { getUniqueDomId, convertQGISDateTimeFormatToMoment } = require('utils');
-
-  export default {
-    name: 'Searchdatetime',
-    props: {
-      forminput: {
-        type: Object,
-        require: true
-      }
-    },
-    created(){
-      this.id = `search_datetime_${getUniqueDomId()}`;
-    },
-    computed: {
-      time() {
-        return this.forminput.options.format.time;
-      }
-    },
-    async mounted() {
-      await this.$nextTick();
-      const {options: {format}} = this.forminput;
-      let {fieldformat, displayformat} = format;
-      fieldformat = convertQGISDateTimeFormatToMoment(fieldformat);
-      displayformat = convertQGISDateTimeFormatToMoment(displayformat);
-      $(`#${this.id}`).datetimepicker({
-        defaultDate: null,
-        format: displayformat,
-        ignoreReadonly: true,
-        allowInputToggle: true,
-        toolbarPlacement: 'top',
-        widgetPositioning: {
-          vertical: 'bottom',
-          horizontal: 'left'
-        },
-        showClose: true,
-        locale: ApplicationState.language || 'en'
-      });
-
-      $(`#${this.id}`).on("dp.change", () => {
-        const newDate = $(`#${this.forminput.id}`).val();
-        this.forminput.value = _.isEmpty(_.trim(newDate)) ? null : moment(newDate, displayformat).format(fieldformat);
-        this.$emit('change', this.forminput);
-      });
-
-      ApplicationState.ismobile && setTimeout(()=>{
-        $(`#${this.forminput.id}`).blur();
-      })
-    }
-  };
-</script>
diff --git a/src/components/SearchPanel.vue b/src/components/SearchPanel.vue
index 39ae39644..c6517de77 100644
--- a/src/components/SearchPanel.vue
+++ b/src/components/SearchPanel.vue
@@ -4,112 +4,466 @@
 -->
 
 <template>
-  <div class="g3w-search-panel form-group" v-disabled="state.searching">
-    <h4 class=""><b>{{ state.title }}</b></h4>
+  <div
+    class      = "g3w-search-panel form-group"
+    v-disabled = "state.searching"
+  >
+
+    <h4><b>{{ state.title }}</b></h4>
+
+    <!-- SEARCH TOOLS -->
     <slot name="tools"></slot>
+
+    <!-- SEARCH FORM -->
     <slot name="form">
       <form class="g3w-search-form">
-        <span v-for="forminput in state.forminputs" :key="forminput.id">
-          <div v-if="forminput.type === 'numberfield'" class="form-group numeric">
-            <search-panel-label :forminput="forminput"/>
-            <input type="number" min="0" @change="changeNumericInput(forminput)" @input="changeNumericInput(forminput)"
-              v-model="forminput.value" class="form-control" :id="forminput.id">
-            </div>
-          <div v-else-if="forminput.type === 'textfield' || forminput.type === 'textField'" class="form-group form-item-search  text">
-            <search-panel-label :forminput="forminput"/>
-            <input @focus="onFocus" type="text" v-model="forminput.value" @change="changeInput(forminput)" class="form-control" :id="forminput.id" >
+
+        <div
+          v-for = "input in state.forminputs"
+          :key  = "input.id"
+          class = "form-group"
+        >
+
+          <!-- FIXME: hotfix for https://github.com/g3w-suite/g3w-admin/pull/787#discussion_r1537617143 -->
+          <!-- NUMBER FIELD -->
+          <div
+            v-if  = "'numberfield' === input.type || ('textfield' === input.type && 'Range' === input.widget_type)"
+            class = "numeric"
+          >
+            <label :for="input.id" class="search-label">
+              <span>{{ input.label || input.attribute }}</span>
+              <span class="skin-color">{{ getLabelOperator(input.operator)}}</span>
+            </label>
+            <input
+              type    = "number"
+              min     = "0"
+              @change = "changeInput(input)"
+              @input  = "changeInput(input)"
+              v-model = "input.value"
+              class   = "form-control"
+              :id     = "input.id"
+            />
           </div>
-          <div v-else-if="forminput.type === 'selectfield' || forminput.type === 'autocompletefield'" class="form-group text" v-disabled="isSelectDisabled(forminput)">
-            <search-panel-label :forminput="forminput"/>
-            <bar-loader v-if ="forminput.options.dependance" :loading="state.loading[forminput.options.dependance] || forminput.loading"/>
-            <select2 :forminput="forminput" :autocompleteRequest="autocompleteRequest" @select-change="changeInput"/>
+
+          <!-- TEXT FIELD -->
+          <div
+            v-else-if = "['textfield', 'textField'].includes(input.type)"
+            class     = "form-item-search text"
+          >
+            <label :for="input.id" class="search-label">
+              <span>{{ input.label || input.attribute }}</span>
+              <span class="skin-color">{{ getLabelOperator(input.operator)}}</span>
+            </label>
+            <input
+              @focus  = "onFocus"
+              type    = "text"
+              v-model = "input.value"
+              @change = "changeInput(input)"
+              class   = "form-control"
+              :id     = "input.id"
+            />
           </div>
-           <div v-if="forminput.type === 'datetimefield'" class="form-group text" v-disabled="state.loading[forminput.options.dependance] || false">
-             <search-panel-label :forminput="forminput"/>
-             <search-datetime :forminput="forminput" @change="changeInput"/>
+
+          <!-- AUTOCOMPLETE FIELD -->
+          <div
+            v-else-if  = "['selectfield', 'autocompletefield'].includes(input.type)"
+            class      = "text"
+            v-disabled = "state.loading[input.dependance] || input.loading || input.disabled"
+          >
+            <label :for="input.id" class="search-label">
+              <span>{{ input.label || input.attribute }}</span>
+              <span class="skin-color">{{ getLabelOperator(input.operator)}}</span>
+            </label>
+            <bar-loader
+              v-if     = "input.dependance"
+              :loading = "state.loading[input.dependance] || input.loading"
+            />
+            <select
+              :name      = "input.attribute"
+              class      = "form-control"
+              :id        = "input.id"
+              v-disabled = "input.disabled || input.loading"
+            >
+              <option
+                v-for  = "opt in input.values"
+                :key   = "opt.value"
+                :value = "opt.value"
+              >
+                <span v-if="opt.value === allvalue" v-t="'sdk.search.all'"></span>
+                <span v-else>{{ opt.key }}</span>
+              </option>
+            </select>
           </div>
-          <div v-if="forminput.logicop" class="search-logicop skin-border-color">
-            <h4>{{ forminput.logicop }}</h4>
+
+          <!-- DATETIME FIELD -->
+          <div
+            v-else-if  = "'datetimefield' === input.type"
+            class      = "text"
+            v-disabled = "state.loading[input.dependance] || false"
+          >
+            <label :for="input.id" class="search-label">
+              <span>{{ input.label || input.attribute }}</span>
+              <span class="skin-color">{{ getLabelOperator(input.operator)}}</span>
+            </label>
+            <div :ref="'date_' + input.id" class="input-group date">
+              <input :id="input.id" type='text' class="form-control" />
+              <span class="input-group-addon skin-color">
+                <span :class="g3wtemplate.getFontClass(input.options.format.time ? 'time': 'calendar')"></span>
+              </span>
+            </div>
           </div>
-        </span>
+
+          <sub>{{ input.options.description }}</sub>
+
+          <!-- DEBUG INFO -->
+          <sub v-if="is_superuser">
+            <br v-if="input.options.description">
+            <span class="skin-color">{{ input.type }}</span> | <span class="skin-color">{{ input.widget_type }}</span>
+            <template v-if="input.options.value">: { key: "{{ input.options.key }}", value: "{{ input.options.value }} }"</template>
+            <template v-if="input.options.layer_id"><br><span class="skin-color">layer_id:</span> "{{ input.options.layer_id }}"</template>
+            <template v-if="input.dependance"><br><span class="skin-color">depends_on:</span> "{{ input.dependance }}"</template>
+            <template v-if="input.dependance"><br><span class="skin-color">strict:</span> {{ input.dependance_strict }}</template>
+          </sub>
+
+          <!-- LOGIC OPERATOR (AND | OR) -->
+          <div
+            v-if  = "input.logicop"
+            class = "search-logicop skin-border-color"
+          >
+            <h4>{{ input.logicop }}</h4>
+          </div>
+
+        </div>
+
+        <!-- SEARCH BUTTON -->
         <div class="form-group">
-          <button id="dosearch" class="sidebar-button-run btn btn-block pull-right" @click.stop="doSearch" data-i18n="dosearch"  v-t="'dosearch'"></button>
+          <button
+            id          = "dosearch"
+            class       = "sidebar-button-run btn btn-block pull-right"
+            @click.stop = "doSearch"
+            data-i18n   = "dosearch"
+            v-t         = "'dosearch'"
+          ></button>
         </div>
+
       </form>
     </slot>
+
+    <!-- SEARCH FOOTER -->
     <slot name="footer"></slot>
+
+    <!-- Click to open G3W-ADMIN's project layers page -->
+    <div v-if="layers_url" style="padding-top: 5em;"><b><a :href="layers_url" target="_blank">Edit in admin</a></b></div>
+
   </div>
 </template>
 
 <script>
-import Select2 from 'components/SearchSelect2.vue';
-import SearchDatetime from 'components/SearchDatetime.vue';
-import SearchPanelLabel from 'components/SearchPanelLabel.vue';
+import {
+  FILTER_EXPRESSION_OPERATORS,
+  SEARCH_ALLVALUE,
+}                                            from 'app/constant';
+import ApplicationState                      from 'store/application-state';
+import ApplicationService                    from 'services/application';
+import { convertQGISDateTimeFormatToMoment } from 'utils/convertQGISDateTimeFormatToMoment';
+import { createSingleFieldParameter }        from 'utils/createSingleFieldParameter';
+import { getDataForSearchInput }             from 'utils/getDataForSearchInput';
+import resizeMixin                           from 'mixins/resize';
+
+const { t } = require('core/i18n/i18n.service');
+
+// store all select2 inputs
+const SELECTS = [];
 
 export default {
-  components:{
-    Select2,
-    SearchDatetime,
-    SearchPanelLabel
-  },
+
+  mixins: [resizeMixin],
+
   data() {
     return {
-     state: this.$options.service.state
+     state: this.$options.service.state,
+     allvalue: SEARCH_ALLVALUE,
     }
   },
+
+  computed: {
+
+    layers_url() {
+      return ApplicationService.getCurrentProject().getState().layers_url;
+    },
+
+    is_superuser() {
+      return ApplicationService.getConfig().user.is_superuser;
+    },
+
+  },
+
   methods: {
-    isSelectDisabled(forminput){
-      return [
-        this.state.loading[forminput.options.dependance],
-        forminput.loading,
-        forminput.options.disabled
-      ].reduce((disabled, current=false) => disabled || current , false)
+
+    resize() {
+      SELECTS.forEach(select2 => !ApplicationState.ismobile && select2.select2('close'));
     },
-    async onFocus(event) {
+
+    /**
+     * ORIGINAL SOURCE: src/components/SearchPanelLabel.vue@v3.9.3
+     */
+    getLabelOperator(operator) {
+      return `[ ${FILTER_EXPRESSION_OPERATORS[operator]} ]`
+    },
+
+    async onFocus(e) {
       if (this.isMobile()) {
-        const top = $(event.target).position().top - 10 ;
+        const top = $(e.target).position().top - 10 ;
         await this.$nextTick();
         setTimeout(() => $('.sidebar').scrollTop(top), 500);
       }
     },
-    async autocompleteRequest(params={}){
-      return this.$options.service.getUniqueValuesFromField({
-        ...params,
-        output: 'autocomplete'
-      });
+
+    /**
+     * Sync `this.state.forminputs` with `input.value`
+     */
+    async changeInput(input) {
+      const field  = input.attribute;
+      const parent = this.state.forminputs.find(d => d.attribute === field);     // current input dependance
+      const deps   = this.state.forminputs.filter(d => d.dependance === field);  // inputs that depends on the current one
+      const cached = parent && undefined !== input.dvalues[parent.value] ? input.dvalues[parent.value][value] : input.dvalues[value]; // cached data
+      const state  = this.state;
+      let value    = input.value;
+
+      const is_empty         = v => [SEARCH_ALLVALUE, null, undefined].includes(v) || '' === v.toString().trim(); // whether father input can search on subscribers
+      const has_autocomplete = s => 'autocompletefield' === s.type;
+
+      try {
+        this.state.searching = true;
+
+        if ('numberfield' === input.type) {
+          value = value || 0 === value ? value : null;
+        }
+
+        // fallback to default value → `SEARCH_ALLVALUE`
+        if (undefined === value) {
+          value = SEARCH_ALLVALUE;
+        }
+
+        /** @TODO check if it has one reason to trim  */
+        if (!['textfield', 'textField'].includes(input.type)) {
+          value = value.trim();
+        }
+
+        input.value = value;
+
+        // loop and update dependants
+        await Promise.allSettled(deps.map(async s => {
+
+          s.value  = 'selectfield' === s.type ? SEARCH_ALLVALUE : null;
+          s.values = Array.from(new Set([                                       // ensure uniques values
+            ...(!has_autocomplete(s) && !is_empty(value) ? [s.values[0]] : []), // get first value (ALL_VALUE)
+            ...(!has_autocomplete(s) && is_empty(value) ? s._values      : []), // parent has an empty value (eg. ALL_VALUE) → show all original values on subscriber
+            ...(input.dependance && cached && cached[s.attribute]       || [])  // get cached values 
+          ]));
+
+          // value is empty → disable dependants inputs
+          s.disabled = is_empty(value) ? s.dependance_strict : false;
+
+          // depentants values are there → no need to perform further server requests
+          if (has_autocomplete(s) || is_empty(value) || (input.dependance && cached)) {
+            return;
+          }
+
+          state.loading[field] = true;
+
+          // extract the value of the field to get filter data from the relation layer
+          // set undefined because if it has a subscribed input with valuerelations widget
+          
+          /** @TODO use `getDataForSearchInput` instead ? */
+          const data = await state.search_layers[0].getFilterData({
+            fformatter: s.attribute,
+            ordering: s.attribute,
+            field: getDataForSearchInput.field({
+              state,
+              field,
+              fields: undefined !== value ? [createSingleFieldParameter({ field, value, operator: parent.operator })] : []
+            }),
+          });
+
+          data.data = (data.data || []).map(([key, value]) => ({ key: value, value }));
+
+          // case value map
+          if (!s.dependance_strict && 'selectfield' === s.type) {
+            s._values.push(...s.values);
+          }
+
+          // set key value for select (!valuemap && !valuerelation)
+          if (1 === s.values.length) {
+            s.values.push(...data.data);
+          }
+
+          // update cache
+          if (input.dependance) {
+            input.dvalues[parent.value]        = input.dvalues[parent.value] || {};
+            input.dvalues[parent.value][value] = input.dvalues[parent.value][value] || {}
+            input.dvalues[parent.value][s.attribute] = s.values.slice(1); // exclude first element (ALL_VALUE)
+          } else {
+            input.dvalues[value] = input.dvalues[value] || {};
+            input.dvalues[value][s.attribute] = s.values.slice(1);        // exclude first element (ALL_VALUE)
+          }
+
+          s.disabled = false;
+
+        }));
+      } catch(e) {
+        console.warn(e);
+      } finally {
+        this.state.loading[field] = false;
+        this.state.searching = false;
+      }
     },
-    changeDependencyFields({attribute:field, value}) {
-      const subscribers = this.$options.service.getDependencies(field);
-      return subscribers.length ? this.$options.service.fillDependencyInputs({
-        field,
-        subscribers,
-        value
-      }): Promise.resolve();
+
+    doSearch(e) {
+      e.preventDefault();
+      this.$options.service.run();
     },
-    changeNumericInput(input) {
-      input.value = input.value || input.value === 0 ? input.value : null;
-      this.changeInput(input);
+
+    /**
+     * ORIGINAL SOURCE: src/components/SearchDatetime.vue@v3.9.3
+     */
+    async initDateTimeField(input) {
+      if ('datetimefield' !== input.type) {
+        return;
+      }
+
+      await this.$nextTick();
+
+      input.options.format.fieldformat   = convertQGISDateTimeFormatToMoment(input.options.format.fieldformat);
+      input.options.format.displayformat = convertQGISDateTimeFormatToMoment(input.options.format.displayformat);
+
+      $(this.$refs['date_' + input.id]).datetimepicker({
+        defaultDate:       null,
+        format:            input.options.format.displayformat,
+        ignoreReadonly:    true,
+        allowInputToggle:  true,
+        toolbarPlacement:  'top',
+        widgetPositioning: { vertical: 'bottom', horizontal: 'left' },
+        showClose:         true,
+        locale:            ApplicationState.language || 'en',
+      });
+
+      $(this.$refs['date_' + input.id]).on("dp.change", () => {
+        const newDate = $(`#${input.id}`).val();
+        input.value = newDate.trim()
+          ? moment(newDate, input.options.format.displayformat).format(input.options.format.fieldformat)
+          : null;
+        this.changeInput(input);
+      });
+
+      if (ApplicationState.ismobile) {
+        setTimeout(()=> { $('#' + input.id).blur(); });
+      }
     },
-    changeInput(input) {
-      let {id, attribute, value, type} = input;
-      try {
-        //try to trim value inside try catch some cases tha trim doesn't work to avoid
-        // to check if has one reason to trim
-        value = type === 'textfield' || type === 'textField' ? value : value.trim();
-      } catch(err){}
-      this.$options.service.changeInput({id, value});
-      this.state.searching = true;
-      this.changeDependencyFields({
-        attribute,
-        value
-      }).finally(() => {
-        this.state.searching = false;
-      })
+
+    /**
+     * ORIGINAL SOURCE: src/components/SearchSelect2.vue@v3.9.3
+     */
+    async initSelect2Field(input) {
+      if (!['selectfield', 'autocompletefield'].includes(input.type)) {
+        return;
+      }
+
+      await this.$nextTick();
+
+      const numdigaut        = input.options.numdigaut;
+      const has_autocomplete = 'autocompletefield' === input.type;
+      const ajax             = has_autocomplete ? {
+        delay: 500,
+        transport: async (d, ok, ko) => {
+          try      {
+            ok({
+              results: (await getDataForSearchInput({
+                state:   this.state,
+                field:   input.attribute,
+                suggest: `${input.attribute}|${d.data.q}`,
+              })).map(d => ({ id: d.value, text: d.key })
+              )
+            });
+          }
+          catch(e) { ko(e); }
+        }
+      } : null;
+
+      const select2 = $('#' + input.id).select2({
+        ajax,
+        width:              '100%',
+        dropdownParent:     $('.g3w-search-form:visible'),
+        minimumInputLength: has_autocomplete && (numdigaut && !Number.isNaN(1 * numdigaut) && 1 * numdigaut > 0 && 1 * numdigaut || 2) || 0, // get numdigaut and validate it
+        allowClear:         has_autocomplete,
+        placeholder:        has_autocomplete ? '' : null,
+        /**
+         * @param { Object } params
+         * @param params.term the term that is used for searching
+         * @param { Object } data
+         * @param data.text the text that is displayed for the data object
+         */
+        matcher: (params, data) => {
+          const search = params.term ? params.term.toLowerCase() : params.term;
+          if ('' === (search || '').toString().trim())                             return data;        // no search terms → get all of the data
+          if (data.text.toLowerCase().includes(search) && undefined !== data.text) return { ...data }; // the searched term
+          return null;                                                                                 // hide the term
+        },
+        language: {
+          noResults:     () => t("sdk.search.no_results"),
+          errorLoading:  () => t("sdk.search.error_loading"),
+          searching:     () => t("sdk.search.searching"),
+          inputTooShort: d => `${t("sdk.search.autocomplete.inputshort.pre")} ${d.minimum - d.input.length} ${t("sdk.search.autocomplete.inputshort.post")}`,
+        },
+      });
+      SELECTS.push(select2);
+
+      select2.on('select2:select select2:unselecting', e => {
+        if ('select2:select' === e.type || has_autocomplete) {
+          input.value = e.params.data ? `${e.params.data.id}` : SEARCH_ALLVALUE;
+          this.changeInput(input);
+        }
+      });
+
+      // trigger select2 change on input value change
+      this.$watch(() => input.value, async (value, oldVal) => {
+        if (value !== oldVal && value === SEARCH_ALLVALUE) {
+          select2.val(value).trigger('change');
+        }
+      });
+
+      // set initial value
+      select2.val(input.value).trigger('change');
     },
-    doSearch(event) {
-     event.preventDefault();
-     this.$options.service.run();
+
+  },
+
+  async mounted() {
+    await this.state.mounted;
+    for (const input of this.state.forminputs) {
+      await this.initSelect2Field(input);
+      await this.initDateTimeField(input);
     }
+  },
+
+  beforeDestroy() {
+    // remove all select2 DOM events
+    SELECTS.forEach(select2 => {
+      select2.select2('destroy');
+      select2.off();
+      select2 = null;
+    })
+    // reset SELECTS to empty array
+    SELECTS.splice(0);
   }
+
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.search-label {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SearchPanelLabel.vue b/src/components/SearchPanelLabel.vue
deleted file mode 100644
index 7eec6e00c..000000000
--- a/src/components/SearchPanelLabel.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <label :for="forminput.id" class="search-label" style="width: 100%; display: flex; justify-content: space-between">
-    <span>{{ forminput.label || forminput.attribute }}</span>
-    <span class="skin-color">{{ getLabelOperator(forminput.operator)}}</span>
-  </label>
-</template>
-
-<script>
-  import { FILTER_EXPRESSION_OPERATORS as EXPRESSION_OPERATORS } from 'app/constant';
-
-  export default {
-    name: 'Searchpanellabel',
-    props: {
-      forminput: {
-        type: Object,
-        require: true
-      }
-    },
-    methods: {
-      getLabelOperator(operator){
-        return `[ ${EXPRESSION_OPERATORS[operator]} ]`
-      },
-    }
-  };
-</script>
diff --git a/src/components/SearchSelect2.vue b/src/components/SearchSelect2.vue
deleted file mode 100644
index d7e8f9fe8..000000000
--- a/src/components/SearchSelect2.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <select :name="forminput.attribute" class="form-control" :id="forminput.id" v-disabled="forminput.options.disabled || forminput.loading">
-    <option :value="keyvalue.value" v-for="keyvalue in forminput.options.values" :key="keyvalue.value">
-      <span v-if="keyvalue.value === allvalue " v-t="'sdk.search.all'"></span>
-      <span v-else>{{ keyvalue.key }}</span>
-    </option>
-  </select>
-</template>
-
-<script>
-  import { SEARCH_ALLVALUE as ALLVALUE } from 'app/constant';
-  import { select2Mixin } from 'mixins';
-
-  const autocompleteOptions = require('gui/external/select2/options/autocomplete');
-  const { t } = require('core/i18n/i18n.service');
-  const { debounce } = require('utils');
-
-  export default {
-    name: "select2",
-    props: ['forminput','autocompleteRequest'],
-    mixins: [select2Mixin],
-    methods: {
-      emitChangeEvent(evt){
-        const id = $(evt.target).attr('id');
-        const attribute = $(evt.target).attr('name');
-        const data = evt.params.data;
-        const value =  data ?  data.id : ALLVALUE;
-        this.$emit('select-change', {
-          id,
-          attribute,
-          value,
-          type: this.forminput.type
-        });
-      },
-      _initSelect2Element() {
-        const { type, attribute, options } = this.forminput;
-        // get numdigaut and validate it
-        const numdigaut = options.numdigaut && !Number.isNaN(1*options.numdigaut) && 1*options.numdigaut > 0 && 1*options.numdigaut || 2;
-        const isAutocomplete = type === 'autocompletefield';
-        this.select2 = $(this.$el).select2({
-          width: '100%',
-          dropdownParent:$('.g3w-search-form:visible'),
-          minimumInputLength: isAutocomplete && numdigaut || 0,
-          allowClear: isAutocomplete,
-          placeholder : isAutocomplete ? '' : null,
-          ajax: isAutocomplete ? {
-            delay: 500,
-            transport: async ({data:{q:value}}, success, failure) => {
-              try {
-                const data = await this.autocompleteRequest({
-                  field: attribute,
-                  value
-                });
-                success({results: data});
-              } catch(error){
-                failure(error);
-              }
-            }
-          } : null,
-         ...autocompleteOptions
-        });
-        this.select2.on('select2:select', evt => {
-          this.emitChangeEvent(evt);
-        });
-        this.forminput.type === 'autocompletefield' && this.select2.on('select2:unselecting', evt => {
-          this.emitChangeEvent(evt);
-        });
-      }
-    },
-    watch : {
-      async 'forminput.value'(value) {
-        await this.$nextTick();
-        if (value === ALLVALUE) {
-          this.select2.val(value);
-          this.select2.trigger('change');
-        }
-      }
-    },
-    created(){
-      this.allvalue = ALLVALUE;
-    },
-    async mounted() {
-      await this.$nextTick();
-      this._initSelect2Element();
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/SidebarItem.vue b/src/components/SidebarItem.vue
index a0b337915..1442565ed 100644
--- a/src/components/SidebarItem.vue
+++ b/src/components/SidebarItem.vue
@@ -4,16 +4,38 @@
 -->
 
 <template>
-  <li :id="component.id" v-show="state.visible" class="treeview sidebaritem" :class="{'active': open}" v-disabled="state.disabled">
+  <li
+    :id        = "component.id"
+    v-show     = "state.visible"
+    class      = "treeview sidebaritem"
+    :class     = "{'active': open }"
+    v-disabled = "state.disabled"
+  >
     <bar-loader :loading="state.loading"/>
-    <a @click.prevent="onClickItem" ref="anchor_click" href="#" style="display: flex; justify-content: space-between; align-items: center">
+    <a
+      @click.prevent = "onClickItem"
+      ref            = "anchor_click"
+      href           = "#"
+      style          = "display: flex; justify-content: space-between; align-items: center"
+    >
       <div>
         <i :class="icon" :style="{color: iconColor}"></i>
         <span class="treeview-label" v-t="title"></span>
       </div>
       <div>
-        <span v-if="info.state" style="position: absolute; right: 5px; font-weight: bold" :class="info.class" :style="info.style" :title="info.tooltip">{{ info.state }}</span>
-        <sidebar-item-action v-for="action in actions" :component="component.internalComponent" :key="action.id" :action="action"/>
+        <span
+          v-if   = "info.state"
+          style  = "position: absolute; right: 5px; font-weight: bold"
+          :class = "info.class"
+          :style = "info.style"
+          :title = "info.tooltip"
+        >{{ info.state }}</span>
+        <sidebar-item-action
+          v-for      = "action in actions"
+          :component ="component.internalComponent"
+          :key       = "action.id"
+          :action    = "action"
+        />
       </div>
       <i v-if="collapsible" :class="g3wtemplate.getFontClass('angle-left')" class="pull-right"></i>
     </a>
@@ -23,24 +45,20 @@
 
 <script>
   import { SidebarEventBus as VM } from 'app/eventbus';
-  import SidebarItemAction from 'components/SidebarItemAction.vue';
+  import SidebarItemAction         from 'components/SidebarItemAction.vue';
 
   export default {
     name: "SidebarItem",
     data() {
       return {
-        info: this.$options.info || {
-          state: null,
-          style: null,
-          class: null
-        },
-        main: true,
-        component: this.$options.component,
-        active: false,
-        title: '',
-        open: false,
-        icon: null,
-        iconColor: null,
+        info:        this.$options.info || { state: null, style: null, class: null },
+        main:        true,
+        component:   this.$options.component,
+        active:      false,
+        title:       '',
+        open:        false,
+        icon:        null,
+        iconColor:   null,
         collapsible: null
       };
     },
@@ -50,19 +68,17 @@
     methods: {
       onClickItem(evt) {
         // force to close
-        this.component.isolate && evt.stopPropagation();
+        if (this.component.isolate) { evt.stopPropagation() }
         if (!this.component.isolate) {
-          // set state of opened component
-          this.$options.service.state.components.forEach(component => {
-            if (component !== this.component) {
-              if (component.getOpen()) {
-                component.click({
-                  open:component.isolate
-                });
+          // set state of an opened component
+          this.$options.service.state.components
+            .forEach(component => {
+              if (component !== this.component && component.getOpen()) {
+                component.click({ open:component.isolate });
               }
-            }
-          });
-          !this.component.collapsible && isMobile.any && VM.$emit('sidebaritemclick');
+           });
+
+          if (!this.component.collapsible && isMobile.any) { VM.$emit('sidebaritemclick') }
         }
         this.component.setOpen(!this.component.state.open);
       }
diff --git a/src/components/SidebarItemAction.vue b/src/components/SidebarItemAction.vue
index d083859c8..954e739cd 100644
--- a/src/components/SidebarItemAction.vue
+++ b/src/components/SidebarItemAction.vue
@@ -4,12 +4,12 @@
 
 <template>
   <span
-    @click.stop="triggerAction"
-    v-t-tooltip:left.create="action.tooltip"
-    style="font-weight: bold; padding:3px;"
-    :class="action.class"
-    class="action skin-tooltip-left"
-    :style="action.style"
+    @click.stop             = "triggerAction"
+    v-t-tooltip:left.create = "action.tooltip"
+    style                   = "font-weight: bold; padding:3px;"
+    :class                  = "action.class"
+    class                   = "action skin-tooltip-left"
+    :style                  = "action.style"
   ></span>
 </template>
 
@@ -18,7 +18,7 @@
     name: 'Sidebaritemaction',
     props: {
       action: {
-        type: Object,
+        type:     Object,
         required: true
       },
       component: {
@@ -26,7 +26,7 @@
       }
     },
     methods: {
-      triggerAction(){
+      triggerAction() {
         this.action.fnc(this.component)
       }
     }
diff --git a/src/components/SpatialBookMarkGroup.vue b/src/components/SpatialBookMarkGroup.vue
index e7e81408f..943bab6e0 100644
--- a/src/components/SpatialBookMarkGroup.vue
+++ b/src/components/SpatialBookMarkGroup.vue
@@ -5,16 +5,22 @@
 
 <template>
   <li>
-    <div style="font-weight: bold; width: 100%;" :style="{borderBottom: group.expanded ? '2px solid #2c3b41' : 'none'}"
-      @click.stop="group.expanded = !group.expanded">
+    <div
+      style       = "font-weight: bold; width: 100%;"
+      :style      = "{borderBottom: group.expanded ? '2px solid #2c3b41' : 'none'}"
+      @click.stop = "group.expanded = !group.expanded"
+    >
       <span
-        :class="[g3wtemplate.getFontClass(group.expanded ? 'caret-down' : 'caret-right')]"
-        style="margin-right: 5px;"
+        :class = "g3wtemplate.getFontClass(group.expanded ? 'caret-down' : 'caret-right')"
+        style  = "margin-right: 5px;"
       >
       </span>
       <span>{{group.name}}</span>
     </div>
-    <ul style="margin-left: 10px;" v-show="group.expanded">
+    <ul
+      v-show = "group.expanded"
+      style  = "margin-left: 10px;"
+    >
       <spatial-book-mark-item v-for="node in group.nodes" :bookmark="node"/>
     </ul>
   </li>
@@ -44,7 +50,6 @@
       SpatialBookMarkItem
     },
     methods: {},
-    async mounted() {}
   };
 </script>
 
diff --git a/src/components/SpatialBookMarkItem.vue b/src/components/SpatialBookMarkItem.vue
index 0e2a4ab3f..cb6c53c03 100644
--- a/src/components/SpatialBookMarkItem.vue
+++ b/src/components/SpatialBookMarkItem.vue
@@ -4,14 +4,22 @@
 -->
 
 <template>
-  <li @click.stop="gotoSpatialBookmark(bookmark)" class="spatial-bookmark">
+  <li
+    @click.stop = "gotoSpatialBookmark(bookmark)"
+    class       = "spatial-bookmark"
+  >
     <div>
-      <span :class="g3wtemplate.getFontClass('bookmark')" style="margin-right: 5px; font-size: 0.7em;"></span>
+      <span
+        :class = "g3wtemplate.getFontClass('bookmark')"
+        style  = "margin-right: 5px; font-size: 0.7em;">
+      </span>
       <span class="g3w-long-text">{{bookmark.name}}</span>
     </div>
-    <span v-if="bookmark.removable"
-       @click.stop="$emit('remove-bookmark', bookmark.id)"
-       style="color: red; margin: 5px; cursor: pointer">
+    <span
+      v-if        = "bookmark.removable"
+      @click.stop = "$emit('remove-bookmark', bookmark.id)"
+      style       = "color: red; margin: 5px; cursor: pointer"
+    >
       <i :class="g3wtemplate.getFontClass('trash')"></i>
     </span>
   </li>
@@ -44,9 +52,9 @@
       }
     },
     methods: {
-      removeBookMark(){},
-      async gotoSpatialBookmark({extent, crs}){
-        if (GUI.getService('map').getEpsg().split('EPSG:')[1] !== crs.epsg) {
+      removeBookMark() {},
+      async gotoSpatialBookmark({ extent, crs }) {
+        if (crs.epsg !== GUI.getService('map').getEpsg().split('EPSG:')[1]) {
           const projection = await Projections.registerProjection(`EPSG:${crs.epsg}`);
           extent = ol.proj.transformExtent(extent, projection, GUI.getService('map').getProjection())
         }
diff --git a/src/components/SpatialBookMarks.vue b/src/components/SpatialBookMarks.vue
index d23bff42b..df0f9abf1 100644
--- a/src/components/SpatialBookMarks.vue
+++ b/src/components/SpatialBookMarks.vue
@@ -5,9 +5,9 @@
 
 <template>
   <ul
-    id="g3w-spatial-bookmarks"
-    class="treeview-menu g3w-spatial-bookmarks menu-items"
-    :class="{'g3w-tools': !showaddform}"
+    id     = "g3w-spatial-bookmarks"
+    class  = "treeview-menu g3w-spatial-bookmarks menu-items"
+    :class = "{'g3w-tools': !showaddform}"
   >
 
     <!-- ADD NEW BOOKMARK (FORM) -->
@@ -17,11 +17,11 @@
         <div style="display: flex; justify-content: end">
 
           <span
-            v-t-tooltip:left.create="'close'"
-            @click.stop="showaddform = false"
-            :class="g3wtemplate.getFontClass('close')"
-            class="sidebar-button sidebar-button-icon"
-            style="padding: 5px; margin: 3px;"
+            v-t-tooltip:left.create = "'close'"
+            @click.stop             = "showaddform = false"
+            :class                  = "g3wtemplate.getFontClass('close')"
+            class                   = "sidebar-button sidebar-button-icon"
+            style                   = "padding: 5px; margin: 3px;"
           >
           </span>
 
@@ -33,10 +33,10 @@
         </div>
         <div style="margin-top: 5px;">
           <button
-            @click.stop="addBookMark"
-            class="sidebar-button-run btn btn-block"
-            v-t="'add'"
-            v-disabled="!addbookmarkinput.validate.valid"></button>
+            @click.stop = "addBookMark"
+            class       = "sidebar-button-run btn btn-block"
+            v-t         = "'add'"
+            v-disabled  = "!addbookmarkinput.validate.valid"></button>
         </div>
       </li>
     </template>
@@ -54,41 +54,41 @@
       </template>
 
       <div
-        class="content-bookmarks"
-        style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
+        class = "content-bookmarks"
+        style = "display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
 
         <span
-          style="font-weight: bold; color: #ffffff"
-          v-t="'sdk.spatialbookmarks.sections.user.title'">
+          style = "font-weight: bold; color: #ffffff"
+          v-t   = "'sdk.spatialbookmarks.sections.user.title'">
         </span>
 
         <span
-          @click.stop="showAddForm"
-          style="padding: 5px; cursor: pointer;"
-          class="sidebar-button sidebar-button-icon"
-          :class="g3wtemplate.getFontClass('plus')"
+          @click.stop = "showAddForm"
+          style       = "padding: 5px; cursor: pointer;"
+          class       = "sidebar-button sidebar-button-icon"
+          :class      = "g3wtemplate.getFontClass('plus')"
         >
         </span>
       </div>
       <spatial-book-mark-item
-        v-for="bookmark in user.bookmarks"
-        @remove-bookmark="removeBookMark"
-        :bookmark="bookmark"/>
+        v-for             = "bookmark in user.bookmarks"
+        @remove-bookmark = " removeBookMark"
+        :bookmark        = "bookmark"/>
     </template>
   </ul>
 </template>
 
 <script>
-  import { LOCAL_ITEM_IDS } from 'app/constant';
-  import GUI from 'services/gui';
-  import ApplicationService from 'services/application';
-  import ProjectsRegistry from 'store/projects';
+  import { LOCAL_ITEM_IDS }   from 'app/constant';
+  import GUI                  from 'services/gui';
+  import ApplicationService   from 'services/application';
+  import ProjectsRegistry     from 'store/projects';
   import SpatialBookMarkGroup from "components/SpatialBookMarkGroup.vue";
-  import SpatialBookMarkItem from "components/SpatialBookMarkItem.vue";
-  import InputText from "components/InputText.vue";
+  import SpatialBookMarkItem  from "components/SpatialBookMarkItem.vue";
+  import InputText            from "components/InputText.vue";
 
   const { uniqueId } = require('utils');
-  const { t } = require('core/i18n/i18n.service');
+  const { t }        = require('core/i18n/i18n.service');
 
 
   const SPATIAL_BOOKMARKS_LOCALITEMS = ApplicationService.getLocalItem(LOCAL_ITEM_IDS.SPATIALBOOKMARKS.id);
@@ -107,8 +107,8 @@
     data() {
       const project = ProjectsRegistry.getCurrentProject();
 
-      if ("undefined" === typeof SPATIAL_BOOKMARKS_LOCALITEMS[project.getId()]) {
-        SPATIAL_BOOKMARKS_LOCALITEMS[project.getId()] = []
+      if (undefined === SPATIAL_BOOKMARKS_LOCALITEMS[project.getId()]) {
+        SPATIAL_BOOKMARKS_LOCALITEMS[project.getId()] = [];
       }
 
       return {
@@ -135,22 +135,15 @@
         },
 
         addbookmarkinput: {
-          name: 'add-bookmark',
-          label: t('sdk.spatialbookmarks.input.name'),
-          value: null,
+          name:     'add-bookmark',
+          label:    t('sdk.spatialbookmarks.input.name'),
+          value:    null,
           editable: true,
-          type: 'varchar',
-          input: {
-            type: 'text',
-            options: {}
-          },
-          visible: true,
-          validate: {
-            valid: false,
-            required: true
-          }
+          type:     'varchar',
+          input:    { type: 'text', options: {} },
+          visible:  true,
+          validate: { valid:    false, required: true }
         }
-
       }
     },
 
@@ -166,20 +159,19 @@
 
       addBookMark() {
         this.user.bookmarks.push({
-          id: uniqueId(),
-          name: this.addbookmarkinput.value,
-          extent: GUI.getService('map').getMapExtent(),
+          id:        uniqueId(),
+          name:      this.addbookmarkinput.value,
+          extent:    GUI.getService('map').getMapExtent(),
           removable: true,
-          crs:{
-            epsg: 1*GUI.getService('map').getCrs().split('EPSG:')[1]
-          }
+          crs:       { epsg: 1*GUI.getService('map').getCrs().split('EPSG:')[1] }
         });
+
         this.saveUserBookMarks();
         this.showaddform = false;
       },
 
       removeBookMark(id) {
-        this.user.bookmarks = this.user.bookmarks.filter(bookmark => bookmark.id !== id);
+        this.user.bookmarks = this.user.bookmarks.filter(b => id !== b.id);
         this.saveUserBookMarks();
       },
 
@@ -193,20 +185,15 @@
 
       showAddForm() {
         this.addbookmarkinput.value = null;
-        this.showaddform = true;
+        this.showaddform            = true;
       }
 
     },
 
     created() {
-      this.$on('close', ()=>{
-        this.showaddform = false
-      })
+      this.$on('close', () => this.showaddform = false);
     },
 
-    /** @FIXME remove unusued method ? */
-    async mounted() {}
-
   };
 </script>
 
diff --git a/src/components/StreetView.vue b/src/components/StreetView.vue
index 56743bf10..9a12345c4 100644
--- a/src/components/StreetView.vue
+++ b/src/components/StreetView.vue
@@ -5,8 +5,8 @@
 
 <template>
   <div id="streetview">
-    <div id="streetview-error-key" v-if="$options.keyError">
-      <span class="skin-color"> {{ $options.keyError }}</span>
+    <div v-if="$options.keyError" id="streetview-error-key">
+      <span class="skin-color">{{ $options.keyError }}</span>
     </div>
   </div>
 </template>
@@ -24,6 +24,7 @@ export default {
   }
 };
 </script>
+
 <style scoped>
   #streetview-error-key {
     display: flex;
diff --git a/src/components/Table.vue b/src/components/Table.vue
index f9cd06209..26c34043c 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -6,36 +6,39 @@
 <template>
   <div id="open_attribute_table" style="margin-top: 5px">
     <table
-      v-if="hasHeaders()"
-      ref="attribute_table"
-      id="layer_attribute_table"
-      class="table table-striped row-border compact nowrap"
-      style="width:100%"
+      v-if  = "hasHeaders()"
+      ref   = "attribute_table"
+      id    = "layer_attribute_table"
+      class = "table table-striped row-border compact nowrap"
+      style = "width:100%"
     >
       <thead>
         <tr>
           <th></th>
-          <th v-if="index > 0" v-for="(header, index) in state.headers">
+          <th v-if="i > 0" v-for="(header, i) in state.headers">
             <input
               type         = "text"
               style        = "height: 25px; min-width: 40px; padding: 2px;"
               class        = "form-control column-search"
-              @keyup       = "changeColumn($event, index)"
-              :placeholder = "header.name"/>
+              @keyup       = "changeColumn($event, i)"
+              :placeholder = "header.name"
+            />
           </th>
         </tr>
         <tr>
-          <th v-for="(header, index) in state.headers">
-            <span v-if="index === 0">
+          <th v-for="(header, i) in state.headers">
+            <span v-if="0 === i">
               <input
                 type      = "checkbox"
                 id        = "attribute_table_select_all_rows"
                 :checked  = "state.selectAll"
                 class     = "magic-checkbox"
-                :disabled = "state.nofilteredrow || state.features.length === 0">
+                :disabled = "state.nofilteredrow || state.features.length === 0"
+              >
               <label
-                for   = "attribute_table_select_all_rows"
-                style = "margin-bottom:0 !important;" @click.capture.stop.prevent="selectAllRow"
+                for                         = "attribute_table_select_all_rows"
+                style                       = "margin-bottom:0 !important;"
+                @click.capture.stop.prevent = "selectAllRow"
               >
                 <span style="padding:5px"></span>
               </label>
@@ -45,179 +48,883 @@
         </tr>
       </thead>
 
-      <table-body
-        :headers                  = "state.headers"
-        :filter                   = state.tools.filter
-        :features                 = "state.features"
-        :addRemoveSelectedFeature = "addRemoveSelectedFeature"
-        :zoomAndHighLightFeature  = "zoomAndHighLightFeature"
-      />
+      <!-- ORIGINAL SOURCE: src/components/TableBody.vue@3.9.3 -->
+      <tbody id="table_body_attributes" >
+        <tr
+          v-for      = "(feature, i) in state.features" :key="feature.id"
+          role       = "row"
+          class      = "feature_attribute"
+          style      = "cursor: pointer"
+          @mouseover = "zoomAndHighLightFeature(feature, false)"
+          @click     = "zoomAndHighLightFeature(feature, true)"
+          :selected  = "selectedRow === i"
+          :class     = "[
+            i %2 == 1 ? 'odd' : 'pair',
+            { geometry: !!feature.geometry },
+            { 'selected': feature.selected }
+          ]">
+          <td v-for="(header, i) in state.headers" :tab-index="1">
+            <select-row
+              v-if      = "0 === i"
+              @selected = "addRemoveSelectedFeature"
+              :feature  = "feature"
+            />
+            <field
+              v-else
+              :feature = "feature"
+              :state   = "getField(feature, header)"
+            />
+          </td>
+        </tr>
+      </tbody>
 
     </table>
-    <div v-else id="noheaders" v-t="'dataTable.no_data'" ></div>
+    <div v-else id="noheaders" v-t="'dataTable.no_data'"></div>
   </div>
 </template>
 
 <script>
-import TableBody from 'components/TableBody.vue';
-import SelectRow from 'components/TableSelectRow.vue';
-import G3wTableToolbar from 'components/TableToolbar.vue';
-import Field from 'components/FieldG3W.vue';
-import GUI from 'services/gui';
-import { resizeMixin } from 'mixins';
-
-const { debounce } = require('utils');
-
-let dataTable;
-let fieldsComponents = [];
-let eventHandlers = {
-  pagination: {},
-  nopagination: {}
-};
+import SelectRow                   from 'components/TableSelectRow.vue';
+import G3wTableToolbar             from 'components/TableToolbar.vue';
+import Field                       from 'components/FieldG3W.vue';
+import CatalogLayersStoresRegistry from 'store/catalog-layers';
+import GUI                         from 'services/gui';
+import { resizeMixin }             from 'mixins';
+import { debounce }                from 'utils/debounce';
+import Component                   from 'core/g3w-component';
+import DataRouterService           from 'services/data';
+import { coordinatesToGeometry }   from 'utils/coordinatesToGeometry';
+import { noop }                    from 'utils/noop';
+import G3WObject                   from 'core/g3w-object';
+import { getUniqueDomId }          from 'utils/getUniqueDomId';
+
+const { t }                        = require('core/i18n/i18n.service');
+const { SELECTION_STATE }          = require('core/layers/layer');
+
+const PAGELENGTHS = [10, 25, 50];
+
+/**
+ * Create a unique feature key
+ */
+function _createFeatureKey(values) {
+  return values.join('__');
+}
+
+function _createFeatureForSelection(feature) {
+  let geometry;
+  if (feature.attributes) { geometry = feature.geometry }
+  if (feature.geometry) { geometry = coordinatesToGeometry(feature.geometry.type, feature.geometry.coordinates) }
+  return {
+    attributes: feature.attributes ? feature.attributes : feature.properties,
+    geometry,
+  }
+}
+
+function _hideDataTableElements() {
+  $('.dataTables_info, .dataTables_length').hide();
+  $('.dataTables_paginate').css({
+    'display': 'flex',
+    'justify-content': 'space-between',
+    'font-size': '0.8em',
+    'margin-top': '5px'
+  });
+  $('.dataTables_filter').css('float', 'right');
+  $('.dataTables_paginate').css('margin', '0');
+}
+
+/** Data Table */
+let table;
+let V_FIELDS = []; // fields components
 
 export default {
   name: "G3WTable",
   mixins: [resizeMixin],
+  components: {
+    SelectRow,
+    Field
+  },
   data() {
+    let relationsGeometry = [];
+    // layer doesn't have geometry
+    if (!this.layer.isGeoLayer()) {
+      this.layer
+        .getRelations()
+        .getArray()
+        .forEach(relation => {
+          const layer = CatalogLayersStoresRegistry.getLayerById(relation.getFather()); // get project layer
+          if (
+            this.layer.getId() !== relation.getFather() && // current layer is not child layer of relation
+            layer.isGeoLayer()                             // relation layer has geometry
+          ) {
+            relationsGeometry.push({
+              layer,
+              father_fields: relation.getFatherField(),    // NB: since g3w-admin@v3.7.0 this is an Array value.
+              fields:        relation.getChildField(),     // NB: since g3w-admin@v3.7.0 this is an Array value.
+              features:      {},
+            })
+          }
+        });
+    }
+
     return {
-      tableBodyComponent:null,
-      state: null,
-      table: null,
-      selectedRow: null
+      service:             this.service || undefined,
+      layer:               this.layer || undefined,
+      state:               this.service.state,
+      table:               null,
+      selectedRow:         null,
+      relationsGeometry,
+      paginationfilter:    false,
+      selectedfeaturesfid: this.layer.getSelectionFids(),
+      formatter:           1,
+      allfeaturesnumber:   undefined,
+      nopaginationsfilter: [],
+      /** Number of pages */
+      currentPage:         0,
+      /** Pagination filter features */
+      _async:              Object.assign({ state: false, fnc: noop}, (this._async || {})),
+      getAll:              !this.service.state.pagination,
+      /** Whether layer has geometry */
+      geolayer:            this.layer.isGeoLayer(),
+      paginationParams:    {},
     }
   },
-  components: {
-    TableBody
-  },
   methods: {
-    getDataFromBBOX() {
-      this.$options.service.getDataFromBBOX();
+    get_check_id(cache) {
+      if (cache) {
+        this.get_check_id.cached_id = getUniqueDomId();
+      }
+      return this.get_check_id.cached_id
     },
-    toggleFilterToken() {
-      this.$options.service.toggleFilterToken();
+
+    getField(feature, header) {
+      return {
+        value: feature.attributes[header.name],
+        label: undefined // temporary to avoid label
+      }
     },
-    clearAllSelection() {
-      this.$options.service.clearLayerSelection();
+
+    async getDataFromBBOX() {
+      const map = GUI.getService('map');
+
+      this.service.state.tools.geolayer.active = !this.service.state.tools.geolayer.active;
+
+      const is_active = this.service.state.tools.geolayer.active;
+      const listener  = this.mapBBoxEventHandlerKey;
+
+      if (is_active && this.service.state.pagination) {
+        listener.cb = () => {
+          this.service.state.tools.geolayer.in_bbox = this.service.state.tools.geolayer.active ? map.getMapBBOX().join(',') : undefined;
+          this.service.emit('ajax-reload');
+        };
+      }
+
+      if (is_active && !this.service.state.pagination) {
+        listener.cb = async () => {
+          this.service.state.tools.geolayer.in_bbox = this.service.state.tools.geolayer.active ? map.getMapBBOX().join(',') : undefined;
+          this.filterChangeHandler({ type: 'in_bbox' });
+        };
+      }
+
+      if (is_active) {
+        listener.key = map.getMap().on('moveend', listener.cb);
+      }
+
+      if (listener.cb) {
+        listener.cb();
+      }
+
+      if (!is_active) {
+        this.resetMapBBoxEventHandlerKey();
+      }
     },
-    switchSelection() {
-      this.$options.service.switchSelection();
+
+    async toggleFilterToken() {
+      await this.layer.toggleFilterToken();
     },
-    selectAllRow() {
-      this.state.features.length && this.$options.service.selectAllFeatures();
+
+    clearAllSelection() {
+      this.layer.clearSelectionFids();
     },
-    _setLayout() {
-      this.$options.service._setLayout();
+
+    async switchSelection() {
+      const has_pagination = this.service.state.pagination;
+      const filter         = this.nopaginationsfilter;
+      const filtered       = !has_pagination && filter.length ? [] : undefined;
+      let selected         = false;
+
+      // pagination
+      if (has_pagination) {
+        this.service.state.features.forEach(f => {
+          f.selected = !f.selected;
+          selected   = f.selected;
+        });
+      }
+
+      if (has_pagination && !this.getAll) {
+        await this.getAllFeatures();
+      }
+
+      this.service.state.selectAll = (has_pagination && this.paginationfilter) ? selected : this.service.state.selectAll;
+
+      // filtered
+      if (!has_pagination && filter.length) {
+        this.service.state.features.forEach((f, i) => {
+          if (-1 !== filter.indexOf(i)) {
+            filtered.push(f);
+          }
+          f.selected = !f.selected;
+          this.layer[f.selected ? 'includeSelectionFid' : 'excludeSelectionFid' ](f.id);
+          selected = selected || f.selected;
+        });
+        this.service.state.tools.show = selected;
+      }
+      
+      // no filter
+      if (!has_pagination && !filter.length) {
+        this.service.state.features.forEach(f => { f.selected = !f.selected; });
+      }
+
+      if (has_pagination || !filter.length) {
+        this.layer.invertSelectionFids();
+      }
+
+      if (!has_pagination) {
+        this.checkSelectAll(filtered);
+      }
+
+      if (has_pagination || !filter.length) {
+        this.service.state.tools.show = this.selectedfeaturesfid.size > 0;
+      }
+
+    },
+
+    /**
+     * Called when a selected feature is checked
+     */
+    async selectAllRow() {
+      if (!this.state.features.length) {
+        return;
+      }
+      // set inverse of selectAll
+      this.service.state.selectAll = !this.service.state.selectAll;
+
+      const has_pagination = this.service.state.pagination;
+      const filter         = this.nopaginationsfilter;
+      let selected         = false;
+
+      // filtered
+      if (!has_pagination && filter.length) {
+        this.service.state.features.forEach((f, i) => {
+          if (-1 !== filter.indexOf(i)) {
+            f.selected = this.service.state.selectAll;
+            this.layer[f.selected ? 'includeSelectionFid': 'excludeSelectionFid'](f.id);
+            selected = selected || f.selected;
+          }
+        });
+        this.service.state.tools.show = selected;
+      }
+
+      // no filter
+      if (!has_pagination && !filter.length) {
+        this.service.state.tools.show = this.service.state.selectAll;
+        this.layer[this.service.state.selectAll ? 'setSelectionFidsAll': 'clearSelectionFids']();
+        this.service.state.features.forEach(f => f.selected = this.service.state.selectAll);
+      }
+
+      // filtered pagination
+      if (has_pagination && this.paginationfilter && this.service.state.featurescount >= this.service.state.allfeatures) {
+        this.service.state.features.forEach(f => {
+          f.selected = this.service.state.selectAll;
+          this.layer[f.selected ? 'includeSelectionFid': 'excludeSelectionFid'](f.id);
+        });
+      }
+
+      if (has_pagination && this.paginationfilter && this.service.state.featurescount < this.service.state.allfeatures) {
+        const features = await this.getAllFeatures({
+          search:    this.paginationParams.search,
+          ordering:  this.paginationParams.ordering,
+          formatter: this.paginationParams.formatter,
+          in_bbox:   this.paginationParams.in_bbox,
+        });
+        features.forEach(f => {
+          if (!this.getAll && this.geolayer && f.geometry) {
+            this.layer.addOlSelectionFeature({
+              id: f.id,
+              feature: _createFeatureForSelection(f)
+            });
+          }
+          this.layer[this.service.state.selectAll ? 'includeSelectionFid' : 'excludeSelectionFid'](f.id);
+        })
+      }
+
+      if (has_pagination) {
+        this.service.state.features.forEach(f => f.selected = this.service.state.selectAll);
+      }
+
+      if (has_pagination && !this.paginationfilter && !this.getAll) {
+        await this.getAllFeatures();
+      }
+
+      if (has_pagination && !this.paginationfilter) {
+        this.layer[this.service.state.selectAll ? 'setSelectionFidsAll': 'clearSelectionFids']();
+      }
+
+      if (has_pagination) {
+        this.service.state.tools.show = this.service.state.selectAll || this.selectedfeaturesfid.size > 0;
+      }
+
     },
+
     async zoomAndHighLightFeature(feature, zoom=true) {
-      if (feature.geometry) {
-        this.$options.service.zoomAndHighLightFeature(feature, zoom);
-      } else {
-        await this.$options.service.zoomAndHighLightGeometryRelationFeatures(feature, zoom);
+      const map = GUI.getService('map');
+
+      // this._async = this._async || {};
+
+      // async highlight
+      if (feature.geometry && this._async.state) {
+        this._async.fnc = map.highlightGeometry.bind(map, feature.geometry, { zoom });
+        return;
+      }
+
+      // sync highlight
+      if (feature.geometry && !this._async.state) {
+        map.highlightGeometry(feature.geometry , { zoom });
+        return;
+      }
+
+      // skip when there is no relation features geometry
+      if (!feature.geometry && !this.relationsGeometry.length > 0) {
+        return;
+      }
+
+      // zoom and highlight relation features 
+      if (!feature.geometry) {
+
+        const features     = [];
+        const promises     = [];
+        const field_values = []; // check if add or not
+
+        this.relationsGeometry.forEach(({ layer, father_fields, fields, features }) => {
+          const values = fields.map(f => feature.attributes[f]);
+
+          field_values.push(values);
+
+          let promise;
+
+          if (zoom && undefined === features[k]) {
+            promise = DataRouterService
+              .getData('search:features', {
+                inputs: {
+                  layer,
+                  formatter:       1,
+
+                  filter: (
+                    father_fields
+                      .reduce((filter, field, index) => {
+                        filter = `${filter}${index > 0 ? '|AND,' : ''}${field}|eq|${encodeURIComponent(values[index])}`
+                        return filter;
+                      }, '')
+                  ),
+                },
+                outputs: false, // just a request not show on result
+              });
+          }
+
+          promises.push(promise);
+        });
+
+        (await Promise.allSettled(promises))
+          .forEach(({
+            status,
+            value
+          }, index) => {
+            if ('fulfilled' === status) {
+
+              const relation = this.relationsGeometry[index];
+              const k        = _createFeatureKey(field_values[index]);
+              const data     = value && value.data[0];
+            
+              if (undefined === relation.features[k]) {
+                relation.features[k] = data && data.features || [];
+              }        
+
+              relation.features[k].forEach(f => features.push(f));
+
+            }
+          });
+
+        if (zoom) {
+          map.zoomToFeatures(features, { highlight: true });
+        } else {
+          map.highlightFeatures(features);
+        }
       }
+
     },
+
     addRemoveSelectedFeature(feature) {
-      this.$options.service.addRemoveSelectedFeature(feature);
+      feature.selected = !feature.selected;
+
+      const selected       = this.selectedfeaturesfid;
+      const filter         = this.nopaginationsfilter;
+      const count          = this.allfeaturesnumber;
+
+      const select_all     = this.service.state.selectAll;
+      const has_pagination = this.service.state.pagination;
+      const features       = this.service.state.features;
+      const is_active      = this.service.state.tools && this.service.state.tools.filter && this.service.state.tools.filter.active
+
+      const is_exclude     = !select_all && selected.has(SELECTION_STATE.EXCLUDE);
+      const is_default     = !select_all && !is_exclude;
+
+      /** @FIXME add description */
+      if (select_all) {
+        this.service.state.selectAll = false;
+      }
+
+      /** @FIXME add description */
+      if (select_all) {
+        this.layer.excludeSelectionFid(feature.id, has_pagination);
+      }
+
+      /** @FIXME add description */
+      if (is_exclude || is_default) {
+        this.layer[feature.selected ? 'includeSelectionFid' : 'excludeSelectionFid'](feature.id);
+      }
+
+      /** @FIXME add description */
+      if (!is_active && ( (is_exclude && 1 === selected.size) || (is_default && selected.size === count)) ) {
+        this.layer.setSelectionFidsAll();
+      }
+
+      /** @FIXME add description */
+      if (is_exclude && 1 !== selected.size && selected.size === features.length + 1) {
+        this.layer.clearSelectionFids();
+      }
+
+      /** @FIXME add description */
+      this.service.state.tools.show = selected.size > 0;
+
+      /** @FIXME add description */
+      if (
+        (is_exclude && 1 === selected.size) ||
+        (is_default && selected.size === count) ||
+        (!has_pagination && filter.length && filter.length === features.filter(f => f.selected).length)
+      ) {
+        this.service.state.selectAll = true;
+      }
+
     },
+
     async reloadLayout() {
       await this.$nextTick();
-      if (dataTable) {
-        dataTable.columns.adjust();
+      if (table) {
+        table.columns.adjust();
       }
     },
+
     hasHeaders() {
       return !!this.state.headers.length;
     },
+
     createdContentBody() {
-      fieldsComponents = fieldsComponents.filter(fieldComponent => {
-        fieldComponent.$destroy();
-        return false;
-      });
-      const trDomeElements = dataTable.rows().nodes();
+      V_FIELDS = V_FIELDS.filter(comp => { comp.$destroy(); return false; });
       //trDomeElements
-      trDomeElements.each((rowElement, index) => {
-        $(rowElement).css('cursor', 'pointer');
-        if (this.state.features.length) {
-          const feature = this.state.features[index];
-          const hasGeometry = !!feature.geometry;
-          $(rowElement).addClass('feature_attribute');
-          feature.selected && $(rowElement).addClass('selected');
-          $(rowElement).on('click', () => {
-            if (hasGeometry) {
-              this.zoomAndHighLightFeature(feature);
-            }
-          });
-          $(rowElement).on('mouseover', () => {
-            if (hasGeometry) {
-              this.zoomAndHighLightFeature(feature, false);
-            }
-          });
-          $(rowElement)
+      table
+        .rows()
+        .nodes()
+        .each((row, i) => {
+          $(row).css('cursor', 'pointer');
+          if (!this.state.features.length) {
+            return;
+          }
+          const feature = this.state.features[i];
+          $(row).addClass('feature_attribute');
+          feature.selected && $(row).addClass('selected');
+          $(row).on('click',     () => { !!feature.geometry && this.zoomAndHighLightFeature(feature); });
+          $(row).on('mouseover', () => { !!feature.geometry && this.zoomAndHighLightFeature(feature, false); });
+          $(row)
             .children()
-            .each((index, element) => {
-              const header = this.state.headers[index];
-              let contentDOM;
-              if (header === null) {
-                const SelectRowClass = Vue.extend(SelectRow);
-                const SelectRowInstance = new SelectRowClass({
+            .each((j, element) => {
+              const header = this.state.headers[j];
+              let comp;
+              if (null === header) {
+                comp = new (Vue.extend(SelectRow))({
                   propsData: {
                     feature
                   }
                 });
-                SelectRowInstance.$on('selected', feature => this.$options.service.addRemoveSelectedFeature(feature));
+                comp.$on('selected', feature => this.addRemoveSelectedFeature(feature));
                 this.$watch(
                   () => feature.selected,
-                  function (selected) {
-                    selected ? $(rowElement).addClass('selected'): $(rowElement).removeClass('selected');
-                  }
+                  (selected) =>selected ? $(row).addClass('selected'): $(row).removeClass('selected')
                 );
-                contentDOM = SelectRowInstance.$mount().$el;
               } else {
-                const fieldClass = Vue.extend(Field);
-                const fieldInstance = new fieldClass({
+                comp = new (Vue.extend(Field))({
                   propsData: {
                     state: {
                       value: feature.attributes[header.name]
                     }
                   }
                 });
-                fieldInstance.$mount();
-                fieldsComponents.push(fieldInstance);
-                contentDOM = fieldInstance.$el
+                V_FIELDS.push(comp);
               }
-              $(element).html(contentDOM);
+              $(element).html(comp.$mount().$el);
           })
-        }
-      });
-      setTimeout(()=> this.reloadLayout(), 0)
+        });
+      setTimeout(() => this.reloadLayout(), 0)
     },
+
     async resize() {
       await this.$nextTick();
-      const tableHeight = $(".content").height();
-      const tableHeaderHeight = $('#open_attribute_table  div.dataTables_scrollHeadInner').height();
-      $('#open_attribute_table  div.dataTables_scrollBody').height(tableHeight - tableHeaderHeight - 130);
-    }
+      $('#open_attribute_table div.dataTables_scrollBody').height(
+        $(".content").height()                                               // table height
+        - $('#open_attribute_table div.dataTables_scrollHeadInner').height() // table header height
+        - 130
+      );
+    },
+
+    /**
+     * Set filtered features
+     * 
+     * @param index features index
+     */
+    setFilteredFeature(index) {
+      const filter = this.nopaginationsfilter = index;
+      if (0 === index.length || index.length === this.allfeaturesnumber) {
+        this.checkSelectAll();
+      } else {
+        this.checkSelectAll(filter.map(i => this.service.state.features[i]));
+      }
+    },
+
+    checkSelectAll(features) {
+      features = undefined === features ? this.service.state.features : features;
+      this.service.state.selectAll = (
+        this.selectedfeaturesfid.has(SELECTION_STATE.ALL) ||
+        (features.length && features.reduce((selectAll, f) => selectAll && f.selected, true))
+      );
+    },
+
+    getAllFeatures(params) {
+      GUI.setLoadingContent(true);
+      return new Promise((resolve, reject) => {
+        this.layer
+          .getDataTable(params || {})
+          .then(data => {
+            const is_valid = this.geolayer && data.features;
+
+            if (is_valid && !params) {
+              const loaded_features = this.service.state.features.map(f => f.id);
+              data.features.forEach(f => {
+                if (-1 === loaded_features.indexOf(f.id) && f.geometry) {
+                  this.layer.addOlSelectionFeature({ id: f.id, feature: _createFeatureForSelection(f) });
+                }
+              });
+              this.getAll = true;
+            }
+
+            if (is_valid) {
+              resolve(data.features);
+            }        
+          })
+          .fail(()   => reject())
+          .always(() => GUI.setLoadingContent(false));
+      });
+    },
+
+    /**
+     * Get DataTable layer
+     * 
+     * @param data.start
+     * @param data.order
+     * @param data.length
+     * @param data.columns
+     * @param data.search
+     * @param data.firstCall
+     * 
+     * @returns {Promise<{{ data: [], recordsTotal: number, recordsFiltered: number }}>}
+     */
+    getData({
+      start     = 0,
+      order     = [],
+      length    = this.service.state.pageLength,
+      columns   = [],
+      search    = { value: null },
+      firstCall = false,
+    } = {}) {
+
+      // reset features before load
+      GUI.setLoadingContent(true);
+
+      this.layer.setAttributeTablePageLength(length);
+
+      return new Promise((resolve, reject) => {
+
+        // skip when ..
+        if (!this.service.state.headers.length) {
+          resolve({
+            data: [],
+            recordsTotal: 0,
+            recordsFiltered: 0
+          });
+          return;
+        }
+
+        let searchText = search.value && search.value.length > 0 ? search.value : null;
+
+        this.service.state.features.splice(0);
+
+        if (!order.length) {
+          order.push({
+            column: 1,
+            dir: 'asc',
+          });
+        }
+
+        const ordering = ('asc' === order[0].dir ? '' : '-') + this.service.state.headers[order[0].column].name;
+
+        this.currentPage = (start === 0 || (this.service.state.pagination && this.service.state.tools.filter.active)) ? 1 : (start/length) + 1;
+
+        const in_bbox = this.service.state.tools.geolayer.in_bbox;
+
+        const field =  this.service.state.pagination
+          ? columns.filter(c => c.search && c.search.value).map(c => `${c.name}|ilike|${c.search.value}|and`).join(',')
+          : undefined;
+
+          this.paginationParams = {
+          field:     field || undefined,
+          page:      this.currentPage,
+          page_size: length,
+          search:    searchText,
+          in_bbox,
+          formatter: this.formatter,
+          ordering
+        };
+
+        this.layer
+          .getDataTable(
+            this.service.state.pagination
+              ? this.paginationParams
+              : ({ ordering, in_bbox, formatter: this.formatter })
+          )
+          .then(data => {
+            const { features = [] }  = data;
+
+            this.service.state.allfeatures   = data.count || this.service.state.features.length;
+            this.service.state.featurescount = features.length;
+            this.allfeaturesnumber           = (undefined === this.allfeaturesnumber ? data.count : this.allfeaturesnumber);
+            this.paginationfilter            = (data.count !== this.allfeaturesnumber);
+            this.service.state.pagination    = firstCall
+              ? this.service.state.tools.filter.active || features.length < this.allfeaturesnumber
+              : this.service.state.pagination;
+
+            // add features
+            (features || []).forEach(feature => {
+              const tableFeature = {
+                id:         feature.id,
+                selected:   this.layer.hasSelectionFid(feature.id),
+                attributes: feature.attributes                || feature.properties,
+                geometry:   this.geolayer && feature.geometry || undefined
+              };
+
+              const has_geom  = this.geolayer && feature.geometry;
+              const selection = has_geom && this.layer.getOlSelectionFeature(feature.id);
+
+              if (has_geom && !selection) {
+                this.layer.addOlSelectionFeature({
+                  id:      feature.id,
+                  feature: _createFeatureForSelection(feature)
+                });
+              }
+
+              this.service.state.features.push(tableFeature);
+            });
+
+            this.service.state.tools.show = this.layer.getFilterActive() || this.selectedfeaturesfid.size > 0;
+
+            this.checkSelectAll(); 
+
+            resolve({
+              // DataTable pagination
+              data: this.service.state.features.map(f => {
+                const attrs = f.attributes ? f.attributes : f.properties;
+                const values = [null];
+                this.service.state.headers.filter(h => h).forEach(h => {
+                  h.value = attrs[h.name];
+                  values.push(h.value);
+                });
+                return values;
+              }),
+              recordsFiltered: data.count,
+              recordsTotal:    data.count
+            });
+          })
+          .fail(e  => { console.warn(e); GUI.notify.error(t("info.server_error")); reject(e); })
+          .always(() => { GUI.setLoadingContent(false); })
+      });
+    },
+
+    clearAllServiceSelection() {
+      this.state.features.forEach(f => f.selected = false);
+      this.state.tools.show = false;
+      this.state.selectAll = false;
+    },
+
+    clearService() {
+      this.layer.off('unselectionall',    this.clearAllServiceSelection);
+      this.layer.off('filtertokenchange', this.filterChangeHandler);
+
+      this.resetMapBBoxEventHandlerKey();
+
+      this.allfeaturesnumber = null;
+
+      if (this._async.state) {
+        setTimeout(() => {
+          this._async.fnc();
+          this._async.state = false;
+          this._async.fnc   = noop;
+        });
+      }
+    },
+
+    resetMapBBoxEventHandlerKey() {
+      const listener = this.mapBBoxEventHandlerKey;
+      ol.Observable.unByKey(listener.key);
+      listener.key = null;
+      listener.cb  = null;
+    },
+
+    /**
+     * @param { Object } opts
+     * @param { string } opts.type
+     * 
+     * @fires redraw when `opts.type` in_bbox filter (or not select all)
+     */
+    async filterChangeHandler({ type } = {}) {
+      this.allfeaturesnumber = undefined;
+
+      if (false === (type === 'in_bbox' || !this.selectedfeaturesfid.has(SELECTION_STATE.ALL))) {
+        return;
+      }
+
+      let data = [];
+
+      // reload data
+      if (!this.service.state.pagination) {
+        this.service.state.features.splice(0);
+        this.service.state.pagination = false;
+        data = (await this.getData()).data || [];
+      }
+
+      this.service.emit('redraw', data);
+    },
+
+    onGUIContent(options) {
+      this._async = this._async || {};
+      this._async.state = (100 === options.perc);
+    },
+
   },
-  beforeCreate(){
+
+  beforeCreate() {
     this.delayType = 'debounce';
+    this.layer = CatalogLayersStoresRegistry.getLayerById(this.$options.layerId);
+    this.service = new G3WObject();
+    this.service.state = {
+      pageLengths:   PAGELENGTHS,
+      pageLength:    this.layer.getAttributeTablePageLength() || PAGELENGTHS[0],
+      features:      [],
+      title:         this.layer.getTitle(),
+      headers:       [null, ...this.layer.getTableHeaders()], // first value is `null` for DataTable purpose (used to add a custom input selector)
+      geometry:      true,
+      loading:       false,
+      allfeatures:   0,
+      pagination:    true,
+      selectAll:     false,
+      nofilteredrow: false,
+      tools: {
+        geolayer: {
+          show:      this.layer.isGeoLayer(),
+          active:    false,
+          in_bbox:   undefined,
+        },
+        show:        false,
+        filter:      this.layer.state.filter
+      }
+    };
   },
+
+  /**
+   * TableService Class
+   * 
+   * ORIGINAL SOURCE: src/app/gui/table/tableservice.js@v3.9.3
+   */
+  async created() {
+
+    this.mapBBoxEventHandlerKey = {
+      key: null,
+      cb: null
+    };
+    // table content
+    const comp = this.g3wComponent = new Component({
+      id: 'openattributetable',
+      service: this.service,
+      internalComponent: this,
+    });
+
+    comp.layout = () => { comp.internalComponent.reloadLayout(); };
+    this.service.on('redraw', ()=> { comp.layout(); });
+    comp.on('unmount', () => { this.clearService(); })
+
+    // bind context on event listeners
+    this.clearAllServiceSelection = this.clearAllServiceSelection.bind(this);
+    this.filterChangeHandler      = this.filterChangeHandler.bind(this);
+    this.onGUIContent             = this.onGUIContent.bind(this)
+
+    GUI.onbefore('setContent', this.onGUIContent);
+    this.layer.on('unselectionall',    this.clearAllServiceSelection);
+    this.layer.on('filtertokenchange', this.filterChangeHandler);
+
+    // overwrite show method
+    comp.show = async (opts = {}) => {
+      try {
+        GUI.closeOpenSideBarComponent(); // close other sidebar components
+        await this.getData({ firstCall: true });
+        GUI.showContent({
+          content: comp,
+          perc: 50,
+          split: GUI.isMobile() ? 'h': 'v',
+          push: false,
+          title: opts.title
+        });
+      } catch (e) {
+        console.warn(e);
+        GUI.notify.error(t("info.server_error"))
+      } finally {
+        comp.emit('show')
+      }
+    };
+
+    comp.on('show', () => {
+      if (this.isMobile()) {
+        GUI.hideSidebar();
+      }
+      this.$options.onShow()
+    });
+
+    comp.show({ title: this.layer.getName() });
+  },
+
   async mounted() {
+
     this.setContentKey = GUI.onafter('setContent', this.resize);
-    const hideElements = () => {
-      $('.dataTables_info, .dataTables_length').hide();
-      $('.dataTables_paginate').css({
-        'display': 'flex',
-        'justify-content': 'space-between',
-        'font-size': '0.8em',
-        'margin-top': '5px'
-      });
-      $('.dataTables_filter').css('float', 'right');
-      $('.dataTables_paginate').css('margin', '0');
-    };
+
     await this.$nextTick();
+
     this.first = false;
-    const commonDataTableOptions = {
-      "lengthMenu": this.state.pageLengths,
-      "pageLength": this.state.pageLength,
+
+    table = $(this.$refs.attribute_table).DataTable({
       "scrollX": true,
       "processing": false,
       "scrollCollapse": true,
@@ -229,97 +936,87 @@ export default {
         "orderable": false,
         "searchable": false,
         "width": '1%'
-      } ]
-    };
-    if (this.state.pagination) {
-      //pagination
-      dataTable = $(this.$refs.attribute_table).DataTable({
-          ...commonDataTableOptions,
+      } ],
+      "lengthMenu": this.state.pageLengths,
+      "pageLength": this.state.pageLength,
+      ...(
+        this.state.pagination
+        ? {
           "columns": this.state.headers,
-          "ajax": debounce((data, callback) => {
+          "ajax": debounce((data, cb) => {
             //remove listeners
-            const trDomeElements = $('#open_attribute_table table tr');
-            trDomeElements.each(element => {
-              $(element).off('click');
-              $(element).off('mouseover');
-            });
-            this.$options.service.getData(data)
-              .then(async serverData => {
-                callback(serverData);
+            $('#open_attribute_table table tr').each(el => { $(el).off('click'); $(el).off('mouseover'); });
+            this
+              .getData(data)
+              .then(async d => {
+                cb(d);
                 await this.$nextTick();
                 this.createdContentBody();
-                this.isMobile() && hideElements();
-              })
-              .catch(error => {
-                console.log(error)
+                this.isMobile() && _hideDataTableElements();
               })
+              .catch(console.warn)
           }, 800),
           "serverSide": true,
-          "deferLoading": this.state.allfeatures
-        });
-      this.$options.service.on('ajax-reload', dataTable.ajax.reload);
-      this.changeColumn = debounce(async (event, index) => {
-        dataTable
-          .columns(index)
-          .search(event.target.value.trim())
-          .draw();
-      });
+          "deferLoading": this.state.allfeatures,
+        } : {
+          "searchDelay": 600,
+        }
+      )
+    });
+
+    // pagination
+    if (this.state.pagination) {
+      this.service.on('ajax-reload', table.ajax.reload);
     } else { // no pagination all data
-      dataTable = $(this.$refs.attribute_table).DataTable({
-        ...commonDataTableOptions,
-        searchDelay: 600
-      });
-      const debounceSearch = debounce(() => {
-        this.$options.service.setFilteredFeature(dataTable.rows( {search:'applied'} )[0])
-      }, 600);
-      eventHandlers.nopagination['search.dt'] = debounceSearch;
-      dataTable.on('search.dt', debounceSearch);
-      dataTable.on('length.dt', (evt, settings, length) => {
-        this.$options.service.setAttributeTablePageLength(length)
-      });
-      this.changeColumn = debounce(async (event, index) => {
-        dataTable.columns(index).search(event.target.value.trim()).draw();
-        this.$options.service.setFilteredFeature(dataTable.rows( {search:'applied'})[0]);
-      });
+      table.on('search.dt', debounce(() => { this.setFilteredFeature(table.rows( {search:'applied'} )[0]) }, 600));
+      table.on('length.dt', (e, opts, len) => { this.layer.setAttributeTablePageLength(len); });
     }
 
+    this.changeColumn = debounce(async (e, i) => {
+      table.columns(i).search(e.target.value.trim()).draw();
+      if (!this.state.pagination) {
+        this.setFilteredFeature(table.rows( {search:'applied'})[0]);
+      }
+    });
+
     if (this.isMobile()) {
-      hideElements();
+      _hideDataTableElements();
     }
 
-    const G3WTableToolbarClass = Vue.extend(G3wTableToolbar);
-    const G3WTableToolbarInstance = new G3WTableToolbarClass({
+    $('#g3w-table-toolbar').html((new (Vue.extend(G3wTableToolbar))({
       propsData: {
-        tools: this.state.tools,
-        geolayer: this.state.geolayer,
-        switchSelection: this.switchSelection,
+        tools:             this.state.tools,
+        geolayer:          this.state.geolayer,
+        switchSelection:   this.switchSelection,
         clearAllSelection: this.clearAllSelection,
         toggleFilterToken: this.toggleFilterToken,
-        getDataFromBBOX: this.getDataFromBBOX
-      }
-    });
+        getDataFromBBOX:   this.getDataFromBBOX
+      },
+    })).$mount().$el);
 
-    $('#g3w-table-toolbar').html(G3WTableToolbarInstance.$mount().$el);
-
-    this.$options.service.on('redraw', data => {
-      dataTable.clear();
-      dataTable.draw(false);
+    this.service.on('redraw', data => {
+      table.clear();
+      table.draw(false);
       setTimeout(() => {
-        dataTable.rows.add(data);
-        dataTable.draw(false);
+        table.rows.add(data);
+        table.draw(false);
         this.createdContentBody();
-        this.isMobile() && hideElements();
+        if (this.isMobile()) {
+          _hideDataTableElements();
+        }
       })
     })
   },
+
   beforeDestroy() {
-    this.$options.service.clear();
-    this.$options.service.off('ajax-reload');
-    this.$options.service.off('redraw');
+    this.clearService();
+    this.service.off('ajax-reload');
+    this.service.off('redraw');
     GUI.un('setContent', this.setContentKey);
-    dataTable.destroy(true);
-    dataTable = null;
-  }
+    table.destroy(true);
+    table = null;
+  },
+
 };
 </script>
 
@@ -332,4 +1029,7 @@ export default {
     font-weight: bold;
     margin-top: 10px;
   }
+  input.form-control.column-search {
+  font-weight: normal;
+}
 </style>
diff --git a/src/components/TableBody.vue b/src/components/TableBody.vue
deleted file mode 100644
index 212d0305b..000000000
--- a/src/components/TableBody.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <tbody id="table_body_attributes" >
-    <tr
-      v-for      = "(feature, index) in features" :key="feature.id"
-      role       = "row"
-      class      = "feature_attribute"
-      style      = "cursor: pointer"
-      @mouseover = "zoomAndHighLightFeature(feature, false)"
-      @click     = "zoomAndHighLightFeature(feature, true)"
-      :selected  = "selectedRow === index"
-      :class     = "[
-        index %2 == 1 ? 'odd' : 'pair',
-        { geometry: !!feature.geometry },
-        { 'selected': feature.selected }
-      ]">
-      <td v-for="(header, hindex) in headers" :tab-index="1">
-        <select-row
-          v-if      = "0 === hindex"
-          @selected = "addRemoveSelectedFeature"
-          :feature  = "feature"
-        />
-        <field
-           v-else
-          :feature = "feature"
-          :state   = "getField(feature, header)"
-        />
-      </td>
-    </tr>
-  </tbody>
-</template>
-
-<script>
-import SelectRow from 'components/TableSelectRow.vue'
-import Field from 'components/FieldG3W.vue';
-
-export default {
-  name: "table-body",
-  props: {
-    headers: {
-      required: true,
-      type: Array
-    },
-    features: {
-      required: true,
-      type: Array
-    },
-    zoomAndHighLightFeature: {
-      type: Function
-    },
-    addRemoveSelectedFeature: {
-      type: Function
-    },
-    filter: {
-      type: Object,
-      default: {
-        active: false
-      }
-    }
-  },
-  data() {
-    return {
-      selectedRow: null
-    }
-  },
-  components: {
-    Field,
-    SelectRow
-  },
-  methods: {
-    getField(feature, header) {
-      return {
-        value: feature.attributes[header.name],
-        label: undefined // temporary to avoid label
-      }
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/src/components/TableLink.vue b/src/components/TableLink.vue
deleted file mode 100644
index bc551e3fe..000000000
--- a/src/components/TableLink.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-  @file
-  @since v3.7
-
-  @TODO check if "gui/table/vue/components/link.vue@v3.4" component is depreacated
--->
-
-<template>
-  <a :href="href" target="_blank">
-    <i :class="g3wtemplate.getFontClass('link')"></i>
-  </a>
-</template>
-
-<script>
-export default {
-
-  /** @since 3.8.6 */
-  name: "table-link",
-
-  props: ['href']
-};
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/Tool.vue b/src/components/Tool.vue
index 82092d7d6..a4e870116 100644
--- a/src/components/Tool.vue
+++ b/src/components/Tool.vue
@@ -5,28 +5,53 @@
 
 <template>
   <div>
-    <div v-if="tool.type === 'checkbox' " class="checkbox">
+
+    <!-- CHECKBOX -->
+    <div
+      v-if  = "'checkbox' === tool.type"
+      class = "checkbox"
+    >
       <label>
-        <input style="cursor:pointer"
-          :id="tool.layerName"
-          v-model="tool.isCheck"
-          type="checkbox"
-          :value="tool.layerName"
-          @click="fireAction(tool)">
+        <input
+          style   = "cursor:pointer"
+          :id     = "tool.layerName"
+          v-model = "tool.isCheck"
+          type    = "checkbox"
+          :value  = "tool.layerName"
+          @click  = "tool.action(tool)"
+        />
         {{ tool.name }}
       </label>
     </div>
-    <div v-else class="tool" @click="!disabled ? fireAction(tool) : null" :class="{tool_disabled: disabled}" style="position:relative">
+
+    <div
+      v-else
+      class  = "tool"
+      @click = "!disabled ? tool.action(tool) : null"
+      :class = "{ tool_disabled: disabled }"
+      style  = "position:relative"
+    >
+
       <bar-loader :loading="tool.loading"/>
-      <i :class="g3wtemplate.getFontClass(icon)"></i>
+
+      <i :class="g3wtemplate.getFontClass(tool.icon || 'caret-right')"></i>
+
       <span v-if="tool.html" >
         <i :class="tool.html.icon"></i>
         {{ tool.html.text || tool.name}}
       </span>
+
       <span v-else v-t="tool.name"></span>
-      <span @click.stop="showToolStateMessage" :style="{color: toolstatecolor}" v-if="tool.state.type" style="cursor: pointer; vertical-align: center; position:absolute; right: 0; top: 0; padding: 5px">
+
+      <span
+        v-if        = "tool.state.type"  
+        @click.stop = "showToolStateMessage"
+        class       = "tool_type"
+        :style      = "{ color: ({ alert: 'red', info: 'blue', warning: 'orange'})[tool.state.type] }"
+      >
         <i :class="g3wtemplate.getFontClass(tool.state.type)"></i>
       </span>
+
     </div>
   </div>
 </template>
@@ -35,51 +60,18 @@
 import ApplicationService from 'services/application';
 import GUI from 'services/gui';
 
-const AppState = ApplicationService.getState();
-
-const TOOLSTATE = {
-  alert: {
-    color: 'red'
-  },
-  info: {
-    color: 'blue'
-  },
-  warning: {
-    color: 'orange'
-  }
-};
-
 export default {
   name: "g3w-tool",
-  props: {
-    tool: {
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
+  props: ['tool'],
   methods: {
-    fireAction(tool) {
-      this.tool.action(tool);
-    },
-    showToolStateMessage(){
-      GUI.showModalDialog({
-        title: this.tool.state.type.toUpperCase(),
-        message: this.tool.state.message
-      })
+    showToolStateMessage() {
+      GUI.showModalDialog({ title: this.tool.state.type.toUpperCase(), message: this.tool.state.message });
     },
   },
   computed: {
     disabled() {
-      return (!this.tool.offline && !AppState.online)  || (this.tool.loading || this.tool.disabled);
-    },
-    icon() {
-      return this.tool.icon || 'caret-right'
+      return (!this.tool.offline && !ApplicationService.getState().online) || (this.tool.loading || this.tool.disabled);
     },
-    toolstatecolor() {
-      return TOOLSTATE[this.tool.state.type].color;
-    }
   }
 };
 </script>
@@ -88,8 +80,15 @@ export default {
   .tool_disabled {
     cursor: not-allowed;
   }
-
   .tool_disabled > span {
     color: #777;
   }
+  .tool_type {
+    cursor: pointer;
+    vertical-align: center;
+    position:absolute;
+    right: 0;
+    top: 0;
+    padding: 5px;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Tools.vue b/src/components/Tools.vue
deleted file mode 100644
index 437b4d10d..000000000
--- a/src/components/Tools.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <ul class="g3w-tools treeview-menu">
-    <bar-loader :loading="state.loading"/>
-    <li v-for="group in state.toolsGroups" :key="group.name">
-      <div class="tool-header">
-        <i :class="g3wtemplate.getFontClass('tool')"></i>
-        <span style="">{{ group.name }}</span>
-      </div>
-      <div :id="group.name + '-tools'" class="tool-box">
-        <g3w-tool v-for="tool in group.tools" :key="tool.name" :tool="tool"></g3w-tool>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-import G3wTool from 'components/Tool.vue';
-
-export default {
-
-  /** @since 3.8.6 */
-  name: 'g3w-tools',
-
-  data() {
-    return {
-      state: null
-    }
-  },
-  watch: {
-    'state.toolsGroups': {
-      handler(groups) {
-        this.$emit('visible', groups.length > 0);
-      }
-    }
-  },
-  components: {
-    G3wTool
-  }
-};
-</script>
\ No newline at end of file
diff --git a/src/components/UserMessage.vue b/src/components/UserMessage.vue
index aa7c1cea1..a86424350 100644
--- a/src/components/UserMessage.vue
+++ b/src/components/UserMessage.vue
@@ -4,25 +4,53 @@
 -->
 
 <template>
-  <div class="usermessage-content" :id="id" :style="style" :class="{'mobile': addClassMobile()}">
-    <div v-if="showheader" class="usermessage-header-content">
-      <i class="usermessage-header-icontype" :class="g3wtemplate.getFontClass(type)"></i>
+  <div
+    class  = "usermessage-content"
+    :id    = "id"
+    :style = "style"
+    :class = "{'mobile': addClassMobile()}"
+  >
+    <div
+      v-if="showheader"
+      class="usermessage-header-content"
+    >
+      <i
+        class="usermessage-header-icontype"
+        :class="g3wtemplate.getFontClass(type)">
+      </i>
       <div class="usermessage-header-title">
         <slot name="header">
-          <h4  v-if="title" v-t="title"></h4>
+          <h4
+            v-if = "title"
+            v-t  = "title">
+          </h4>
           <h4  v-else> {{ type.toUpperCase() }}</h4>
-          <h5 class="usermessage-header-subtitle" v-if="subtitle" v-t="subtitle"></h5>
+          <h5
+            v-if="subtitle"
+            class="usermessage-header-subtitle"
+            v-t="subtitle">
+          </h5>
         </slot>
       </div>
       <div class="usermessage-header-right">
-        <div v-if="!autoclose && closable" @click="closeUserMessage">
+        <div
+          v-if   = "!autoclose && closable"
+          @click = "closeUserMessage"
+        >
           <i class="usermessage-header-right-item" :class="g3wtemplate.getFontClass('close')"></i>
         </div>
       </div>
     </div>
     <slot name="body">
-      <div v-if="textMessage" class="usermessage-message">{{ message }}</div>
-      <div v-else class="usermessage-message" v-t="message"></div>
+      <div
+        v-if  = "textMessage"
+        class = "usermessage-message"
+      >{{ message }}</div>
+      <div
+        v-else
+        class = "usermessage-message"
+        v-t   = "message"
+      ></div>
     </slot>
     <slot name="footer"></slot>
   </div>
@@ -30,45 +58,45 @@
 
 <script>
   import { ZINDEXES } from 'app/constant';
-  import GUI from 'services/gui';
+  import GUI          from 'services/gui';
 
   const COLORS = {
     success: {
-      backgroundColor: '#62ac62',
-      color: '#FFFFFF'
+      backgroundColor: "#62ac62",
+      color:           "#FFFFFF"
     },
     info: {
-      backgroundColor: '#44a0bb',
-      color: '#FFFFFF'
+      backgroundColor: "#44a0bb",
+      color:           "#FFFFFF"
     },
     warning: {
-      backgroundColor: '#f29e1d',
-      color: '#FFFFFF'
+      backgroundColor: "#f29e1d",
+      color:           "#FFFFFF"
     },
     alert: {
-      backgroundColor: '#c34943',
-      color: '#FFFFFF'
+      backgroundColor: "#c34943",
+      color:           "#FFFFFF"
     },
     tool: {
-      backgroundColor: '#FFFFFF',
-      color: "#222d32"
+      backgroundColor: "#FFFFFF",
+      color:           "#222d32"
     },
     loading: {
-      backgroundColor: '#FFFFFF',
-      color: "#222d32",
-      fontWeight: "bold"
+      backgroundColor: "#FFFFFF",
+      color:           "#222d32",
+      fontWeight:      "bold"
     },
   };
   /**
-   * Add custom style to handle different type of usermessage
+   * Add custom style to handle a different type of usermessage
    * @type {{alert: {}, success: {}, warning: {}, loading: {}, tool: {"z-index": string}, info: {}}}
    */
   const STYLES = {
     success: {},
-    info: {},
+    info:    {},
     warning: {},
-    alert: {},
-    tool: {
+    alert:   {},
+    tool:    {
       "z-index": ZINDEXES.usermessage.tool,
       left: "40px"
     },
@@ -80,60 +108,60 @@
     props: {
       id:{},
       type: {
-        type: String,
-        default: 'info' // info, warning, alert, tool
+        type:    String,
+        default: "info" // info, warning, alert, tool
       },
       title: {
-        type: String,
+        type:    String,
         default: null,
       },
       subtitle: {
-        type: String,
+        type:    String,
         default: null,
       },
       position: {
-        type: String,
-        default: 'top'
+        type:    String,
+        default: "top"
       },
       size: {
-        type: String, // values [small, medium,fullpage]
-        default: 'fullpage'
+        type:    String, // values [small, medium,fullpage]
+        default: "fullpage"
       },
       message: {
-        type: String,
+        type:    String,
         default: ''
       },
       textMessage: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
       autoclose: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
       draggable: {
-        type: Boolean,
+        type:    Boolean,
         default: false
       },
       duration: {
-        type: Number,
+        type:    Number,
         default: 2000
       },
       closable: {
-        type: Boolean,
+        type:    Boolean,
         default: true
       }
     },
     computed:{
-      showheader(){
-        return this.type !== 'loading';
+      showheader() {
+        return 'loading'!== this.type ;
       }
     },
     methods: {
-      addClassMobile(){
+      addClassMobile() {
         return this.isMobile() && !GUI.isSidebarVisible();
       },
-      closeUserMessage(){
+      closeUserMessage() {
         this.$emit('close-usermessage')
       },
       hideShow() {}
@@ -152,10 +180,10 @@
         default:
           width = '100%';
       }
-      if (where === 'center')
+      if ('center' === where)
         where = {
-          top: 0,
-          bottom:0,
+          top:       0,
+          bottom:    0,
           maxHeight: '20%'
         };
       else {
@@ -171,8 +199,8 @@
         position.width = '25%';
         switch (alignement) {
           case 'center':
-            position.left = '0';
-            position.right = '0';
+            position.left   = '0';
+            position.right  = '0';
             position.margin = 'auto';
             break;
           case 'right':
@@ -186,10 +214,10 @@
         ...STYLES[this.type]
       }
     },
-    async mounted(){
+    async mounted() {
       if (this.autoclose) {
         await this.$nextTick();
-        const timeout = setTimeout(() =>{
+        const timeout = setTimeout(() => {
           this.closeUserMessage();
           clearTimeout(timeout)
         }, this.duration)
diff --git a/src/components/Viewport.vue b/src/components/Viewport.vue
index 4fd4d8496..325f2a95c 100644
--- a/src/components/Viewport.vue
+++ b/src/components/Viewport.vue
@@ -6,19 +6,23 @@
 <template>
   <div class="g3w-viewport">
     <transition name="fade" :duration="{ enter: 500, leave: 500 }">
-      <user-message v-if="usermessage.show" @close-usermessage="closeUserMessage"
-        :title="usermessage.title"
-        :subtitle="usermessage.subtitle"
-        :id="usermessage.id"
-        :message="usermessage.message"
-        :draggable="usermessage.draggable"
-        :closable="usermessage.closable"
-        :duration="usermessage.duration"
-        :position="usermessage.position"
-        :autoclose="usermessage.autoclose"
-        :textMessage="usermessage.textMessage"
-        :size="usermessage.size"
-        :type="usermessage.type">
+
+      <user-message
+        v-if               = "usermessage.show"
+        @close-usermessage = "closeUserMessage"
+        :title             = "usermessage.title"
+        :subtitle          = "usermessage.subtitle"
+        :id                = "usermessage.id"
+        :message           = "usermessage.message"
+        :draggable         = "usermessage.draggable"
+        :closable          = "usermessage.closable"
+        :duration          = "usermessage.duration"
+        :position          = "usermessage.position"
+        :autoclose         = "usermessage.autoclose"
+        :textMessage       = "usermessage.textMessage"
+        :size              = "usermessage.size"
+        :type              = "usermessage.type"
+      >
         <template v-if="hooks.header" slot="header">
           <component :is="hooks.header"/>
         </template>
@@ -28,46 +32,115 @@
         <template v-if="hooks.footer" slot="footer">
           <component :is="usermessage.hooks.footer"/>
         </template>
+
       </user-message>
+
     </transition>
-    <div id="g3w-view-map" :class="`split-${state.split}`" class="g3w-view map" :style="styles.map">
-      <g3w-resize id="resize-map-and-content" :show="showresize" :moveFnc="moveFnc" :orientation="state.split"
-        :style="{backgroundColor:'transparent'}" :class="`split-${state.split}`"/>
+    <div
+      id     = "g3w-view-map"
+      :class = "`split-${state.split}`"
+      class  = "g3w-view map"
+      :style = "styles.map"
+    >
+      <g3w-resize
+        id           = "resize-map-and-content"
+        :show        = "showresize"
+        :moveFnc     = "moveFnc"
+        :orientation = "state.split"
+        :style       = "{backgroundColor:'transparent'}"
+        :class       = "`split-${state.split}`"/>
       <div id="application-notifications">
         <online-notify/>
         <download-notify/>
         <plugins-notify/>
       </div>
     </div>
-    <div id="g3w-view-content" :class="`split-${state.split}`" class="g3w-view content" :style="styles.content" v-disabled="state.content.disabled">
-      <section :ref="breadcrumb" class="content_breadcrumb" v-if="breadcrumb.length > 1">
-        <span v-for="(crumb, index) in breadcrumb" :key="crumb.title">
-          <span class="skin-color-dark" :style="{fontWeight: isNotLastCrumb(index) ? 'bold' : 'normal'}"  v-t="crumb.title" ></span>
-          <span style="font-weight: bold; margin: 3px 0" v-if="isNotLastCrumb(index)">/</span>
+    <div
+      id         = "g3w-view-content"
+      :class     = "`split-${state.split}`"
+      class      = "g3w-view content"
+      :style     = "styles.content"
+      v-disabled = "state.content.disabled"
+    >
+      <section
+        v-if  = "breadcrumb.length > 1"
+        :ref  = "breadcrumb"
+        class = "content_breadcrumb"
+      >
+        <span
+          v-for="(crumb, index) in breadcrumb"
+          :key="crumb.title"
+        >
+          <span
+            class  = "skin-color-dark"
+            :style = "{fontWeight: isNotLastCrumb(index) ? 'bold' : 'normal'}"
+            v-t    = "crumb.title" >
+          </span>
+          <span
+            v-if  = "isNotLastCrumb(index)"
+            style = "font-weight: bold; margin: 3px 0">/</span>
         </span>
       </section>
-      <div v-if="(showtitle && contentTitle) || previousTitle || (state.content.closable && state.content.aside)" class="close-panel-block" style="display: flex; justify-content: space-between">
-        <div v-if="previousTitle" class="g3w_contents_back g3w-long-text">
-          <div :class="backOrBackTo" v-if ="backOrBackTo === 'back'">
-            <span class="action-button" :class="g3wtemplate.getFontClass('back')"></span>
+      <div
+        v-if  = "(showtitle && contentTitle) || previousTitle || (state.content.closable && state.content.aside)"
+        class = "close-panel-block"
+        style = "display: flex; justify-content: space-between"
+      >
+        <div
+          v-if  = "previousTitle"
+          class = "g3w_contents_back g3w-long-text"
+        >
+          <div
+            v-if   = "'back' === backOrBackTo "
+            :class = "backOrBackTo"
+          >
+            <span
+              class  = "action-button"
+              :class = "g3wtemplate.getFontClass('back')">
+            </span>
             <span v-t="'back'"></span>
           </div>
-          <div @click.stop="gotoPreviousContent()" :class="backOrBackTo" v-else>
-            <span class="action-button" :class="g3wtemplate.getFontClass('back')"></span>
+          <div
+            v-else
+            @click.stop="gotoPreviousContent()"
+            :class="backOrBackTo"
+          >
+            <span
+              class  = "action-button"
+              :class = "g3wtemplate.getFontClass('back')">
+            </span>
             <span v-t="'backto'"></span>
             <span v-if="!updatePreviousTitle" v-t="previousTitle"></span>
           </div>
         </div>
-        <div class="panel-title" :style="[state.content.style.title]" v-if="!previousTitle && showtitle && contentTitle" :class="{'mobile': isMobile()}">
+        <div
+          v-if   = "!previousTitle && showtitle && contentTitle"
+          class  = "panel-title"
+          :style = "[state.content.style.title]"
+          :class = "{'mobile': isMobile()}"
+        >
         <span id="contenttitle">
           <span v-t="contentTitle.title"></span>
           <span v-t="contentTitle.post_title"></span>
         </span>
         </div>
-        <div class="g3-content-header-action-tools" style="display: flex; align-items: center">
+        <div
+          class = "g3-content-header-action-tools"
+          style = "display: flex; align-items: center"
+        >
           <component v-for="tool in state.content.headertools" :is="tool"/>
-          <resize-icon v-if="showresizeicon" :type="state.split" style="font-size: 1em; padding: 0; align-self: center; margin-left: auto" :style="{marginRight: state.content.closable ? '5px': '0px'}"/>
-          <span v-if="state.content.closable && state.content.aside" @click="closeContent" :class="{'mobile': isMobile()}" class="action-button" style="display: flex; justify-content: center ">
+          <resize-icon
+            v-if   = "showresizeicon"
+            :type  = "state.split"
+            style  = "font-size: 1em; padding: 0; align-self: center; margin-left: auto"
+            :style = "{marginRight: state.content.closable ? '5px': '0px'}"/>
+          <span
+            v-if="state.content.closable && state.content.aside"
+            @click = "closeContent"
+            :class = "{'mobile': isMobile()}"
+            class  = "action-button"
+            style  = "display: flex; justify-content: center "
+          >
           <i class="skin-color-dark" :class="g3wtemplate.getFontClass('close')"></i>
         </span>
         </div>
@@ -101,25 +174,23 @@
     },
     data() {
       return {
-        state: viewportService.state,
+        state:               viewportService.state,
         updatePreviousTitle: false,
-        media: {
-          matches: true
-        }
+        media:              { matches: true }
       }
     },
     computed: {
-      breadcrumb(){
+      breadcrumb() {
          return this.state.content.contentsdata
-           .filter(content => content.options.crumb)
-           .map(content => content.options.crumb);
+           .filter(c => c.options.crumb)
+           .map(c => c.options.crumb);
       },
-      showresize(){
+      showresize() {
         const currentPerc = viewportService.getCurrentContentLayout()[this.state.split === 'h' ? 'width' : 'height'];
         return this.state.resized.start && this.state.secondaryPerc > 0 && this.state.secondaryPerc < 100 && currentPerc < 100 && currentPerc > 0;
       },
-      showresizeicon(){
-        return this.state.secondaryPerc !== 100;
+      showresizeicon() {
+        return 100 !== this.state.secondaryPerc;
       },
       hooks() {
         return this.usermessage.hooks;
@@ -128,13 +199,11 @@
         return this.state.usermessage;
       },
       showtitle() {
-        let showtitle = true;
-        const contentsData = this.state.content.contentsdata;
-        if (contentsData.length) {
-          const options = contentsData[contentsData.length - 1].options;
-          if (_.isBoolean(options.showtitle)) showtitle = options.showtitle;
+        if (this.state.content.contentsdata.length) {
+          const options = this.state.content.contentsdata[this.state.content.contentsdata.length - 1].options;
+          if (_.isBoolean(options.showtitle)) { return options.showtitle }
         }
-        return showtitle;
+        return true;
       },
       showContent() {
         return this.state.content.show;
@@ -156,21 +225,24 @@
         }
       },
       contentTitle() {
-        const contentsData = this.state.content.contentsdata;
-        if (contentsData.length) {
-          const {title, post_title} = contentsData[contentsData.length - 1].options;
+        if (this.state.content.contentsdata.length) {
+          const {title, post_title} = this.state.content.contentsdata[this.state.content.contentsdata.length - 1].options;
           return {title, post_title};
         }
       },
       backOrBackTo(){
-        const contentsData = this.state.content.contentsdata;
-        return (contentsData.length > 1 && this.state.content.showgoback) ? !(contentsData[contentsData.length - 2].options.title) ? 'back' : 'backto' : false;
+        return (this.state.content.contentsdata.length > 1 && this.state.content.showgoback)
+          ? !(this.state.content.contentsdata[this.state.content.contentsdata.length - 2].options.title)
+            ? 'back'
+            : 'backto'
+          : false;
       },
       previousTitle() {
-        const contentsData = this.state.content.contentsdata;
-        const title = (contentsData.length > 1 && this.state.content.showgoback) ? contentsData[contentsData.length - 2].options.title : null;
+        const title = (this.state.content.contentsdata.length > 1 && this.state.content.showgoback)
+          ? this.state.content.contentsdata[this.state.content.contentsdata.length - 2].options.title
+          : null;
         this.updatePreviousTitle = true;
-        this.$nextTick(()=> this.updatePreviousTitle = false);
+        this.$nextTick(() => this.updatePreviousTitle = false);
         return title;
       },
     },
@@ -187,21 +259,22 @@
       gotoPreviousContent() {
         GUI.popContent();
       },
-      closeUserMessage(){
+      closeUserMessage() {
         GUI.closeUserMessage();
       },
-      moveFnc(evt){
-        const size =  this.state.split === 'h' ? 'width' : 'height';
+      moveFnc(evt) {
+        const size = this.state.split === 'h' ? 'width' : 'height';
         evt.preventDefault();
         const sidebarHeaderSize = (size === 'width') ? $('.sidebar-collapse').length ? 0 : viewportService.SIDEBARWIDTH : $('#main-navbar').height();
         const viewPortSize = $(this.$el)[size]();
         let mapSize = (size === 'width' ? (evt.pageX+2): (evt.pageY+2)) - sidebarHeaderSize;
-        if (mapSize > viewPortSize - viewportConstraints.resize.content.min)
+        if (mapSize > viewPortSize - viewportConstraints.resize.content.min) {
           mapSize = viewPortSize -  viewportConstraints.resize.content.min;
-        else if( mapSize < viewportConstraints.resize.map.min)
+        } else if ( mapSize < viewportConstraints.resize.map.min) {
           mapSize = viewportConstraints.resize.map.min;
-        const contentSize = viewPortSize - mapSize;
-        const resizePercentageMap = Math.round((mapSize / viewPortSize) * 100);
+        }
+        const contentSize             = viewPortSize - mapSize;
+        const resizePercentageMap     = Math.round((mapSize / viewPortSize) * 100);
         const resizePercentageContent = 100 - resizePercentageMap;
         viewportService.resizeViewComponents(this.state.split, {
           map: {
@@ -214,14 +287,12 @@
       }
     },
     async mounted() {
-      const handleResizeViewport = () => {
-        this.state.resized.start = true;
-      };
+      const handleResizeViewport = () => this.state.resized.start = true;
       await this.$nextTick();
       const mediaQueryEventMobile = window.matchMedia("(min-height: 300px)");
       this.media.matches = mediaQueryEventMobile.matches;
-      mediaQueryEventMobile.addListener(event => {
-        if (event.type === 'change') this.media.matches = event.currentTarget.matches;
+      mediaQueryEventMobile.addListener(e => {
+        if (e.type === 'change') { this.media.matches = e.currentTarget.matches }
       });
       handleResizeViewport();
     }
diff --git a/src/components/ViewportContentsViewer.vue b/src/components/ViewportContentsViewer.vue
deleted file mode 100644
index b2df51eb1..000000000
--- a/src/components/ViewportContentsViewer.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-  @file
-  @since v3.7
--->
-
-<template>
-  <div id="contents" class="contents"></div>
-</template>
-
-<script>
-export default {
-
-  /** @since 3.8.6 */
-  name: 'viewport-contents-viewer',
-
-  data() {
-    return {
-      state: null
-    }
-  }
-};
-</script>
diff --git a/src/components/WMS.vue b/src/components/WMS.vue
index 76dc2c8b7..b5d1807c1 100644
--- a/src/components/WMS.vue
+++ b/src/components/WMS.vue
@@ -11,13 +11,7 @@
       <bar-loader :loading="loading"/>
     </li>
 
-    <li style="
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      background: transparent !important;
-      margin-bottom: 10px;
-    ">
+    <li class="new_wms_item">
 
       <!-- WMS NAME -->
       <div class="wms_url_input_content">
@@ -78,7 +72,7 @@
 
         <!-- LIST OF WMS LAYERS (STORED ON SERVER) -->
         <div
-          v-for = "({id, url}) in state.adminwmsurls"
+          v-for = "({ id }) in state.adminwmsurls"
           :key  = "wmsurl"
           style = "
             display: flex;
@@ -157,7 +151,23 @@
 </template>
 
 <script>
-  const { isURL } = require('utils');
+  import { LOCALSTORAGE_EXTERNALWMS_ITEM } from 'app/constant';
+  import Panel                             from 'core/g3w-panel';
+  import ProjectsRegistry                  from 'store/projects';
+  import ApplicationService                from 'services/application';
+  import DataRouterService                 from 'services/data';
+  import GUI                               from 'services/gui';
+  import { getUniqueDomId }                from 'utils/getUniqueDomId';
+  import { isURL }                         from 'utils/isURL';
+
+  import * as vuePanelComp                 from 'components/WMSLayersPanel.vue';
+
+  /**
+   * Current project id used to store data or get data to a current project
+   */
+  let PID = ProjectsRegistry.getCurrentProject().getId();
+
+  let panel;
 
   export default {
 
@@ -166,6 +176,10 @@
 
     data() {
       return {
+        state: {
+          adminwmsurls: this.$options.wmsurls || [],
+          localwmsurls: [], // array of object {id, url}
+        },
         url: null,
         id: null,
         loading: false,
@@ -199,41 +213,322 @@
 
     methods: {
 
+      /**
+       * Add new WMS url
+       * 
+       * @param { Object } wms
+       * @param { string } wms.id
+       * @param { string } wms.url
+       * 
+       * @returns {*}
+       */
+      async addNewUrl(wms) {
+        const found  = this.state.localwmsurls.find(l => l.url == wms.url || l.id == wms.id);
+        const status = { error: false, added: !!found };
+        // when url is not yet added
+        if (!found) {
+          try {
+            const response = await this.getWMSLayers(wms.url);
+            // skip on invalid response
+            if (!response.result) {
+              throw 'invalid response';
+            }
+            const data = this.getLocalWMSData();
+            this.state.localwmsurls.push(wms);
+            data.urls = this.state.localwmsurls;
+            this.updateLocalWMSData(data);
+            response.wmsurl = wms.url;
+            this._showWmsLayersPanel(response);
+          } catch(e) {
+            console.warn(e);
+            status.error = true;
+          }
+        }
+        return status;
+      },
+
       /**
        * @returns { Promise<void> }
        */
       async addwmsurl() {
         this.loading           = true;
-        const { error, added } = await this.$options.service.addNewUrl({ url: this.url, id: this.id });
+        const { error, added } = await this.addNewUrl({ url: this.url, id: this.id });
         this.status.error      = error;
         this.status.added      = added;
         this.loading           = false;
       },
 
       /**
+       * Delete url from local storage
+       * 
        * @param id
        */
       deleteWmsUrl(id) {
-        this.$options.service.deleteWmsUrl(id)
+        this.state.localwmsurls = this.state.localwmsurls.filter(l => id !== l.id);
+        const data              = this.getLocalWMSData();
+        data.urls               = this.state.localwmsurls;
+        this.updateLocalWMSData(data);
+      },
+
+      /**
+       * Check if a layer is already added to map
+       * 
+       * @param { Object } wms
+       * @param { string } wms.url
+       * @param { string } wms.name
+       * @param { string } wms.epsg
+       * @param { string} wms.position
+       * @param wms.opacity
+       * @param wms.layers
+       * @param {Boolean } wms.visible
+       * 
+       * @returns { Promise<void> }
+       */
+      async addWMSlayer({
+        url,
+        name    = `wms_${getUniqueDomId()}`,
+        layers  = [],
+        epsg,
+        position,
+        visible = true,
+        opacity = 1,
+      } = {}) {
+
+        try {
+          // check if WMS already added (by name)
+          const data = this.getLocalWMSData();
+
+          if (panel) {
+            const wms = data.wms[panel.internalPanel.url];
+            panel.internalPanel.added = wms && wms.some(w => w.layers.length === panel.internalPanel.selectedlayers.length
+              ? panel.internalPanel.selectedlayers.every(l => w.layers.includes(l))
+              : undefined
+            );
+            if (panel.internalPanel.added) {
+              console.warn('WMS Layer already added');
+              return;
+            }
+            panel.internalPanel.loading = true;
+          }
+
+          const config = { url, name, layers, epsg, position, visible, opacity };
+
+          if (undefined === data.wms[url]) {
+            data.wms[url] = [config];
+          } else {
+            data.wms[url].push(config);
+          }
+
+          this.updateLocalWMSData(data);
+
+          try {
+            await GUI.getService('map').addExternalWMSLayer(config);
+          } catch(e) {
+            console.warn(e);
+            GUI.getService('map').removeExternalLayer(name);
+            this.deleteWms(name);
+            setTimeout(() => { GUI.showUserMessage({ type: 'warning', message: 'sidebar.wms.layer_add_error' }) });
+          }
+        } catch(e) {
+          console.warn(e);
+        }
+        if (panel) {
+          panel.internalPanel.clear();
+          panel.close();
+        }
+      },
+
+      /**
+       * Get data of wms url from server
+       * 
+       * @param { string } url
+       * 
+       * @returns { Promise<{
+      *    result:       boolean,
+      *    info_formats: [],
+      *    layers:       [],
+      *    map_formats:  [],
+      *    methods:      [],
+      *    abstract:     null,
+      *    title:        null,
+      *    }> }
+      */
+      async getWMSLayers(url) {
+        // base schema of response
+        let response = {
+          result:       false,
+          layers:       [],
+          info_formats: [], // @deprecated since 3.9.0 (inside methods)
+          abstract:     null,
+          methods:      [], // @since 3.9.0
+          map_formats:  [], // @deprecated since 3.9.0 (inside methods)
+          title:        null
+        };
+        try {
+          response = await DataRouterService.getData('ows:wmsCapabilities', { inputs: { url }, outputs: false });
+        } catch(e) {
+          console.warn(e);
+        }
+        return response;
+      },
+
+      /**
+       * ORIGINAL SOURCE: src/app/gui/wms/vue/panel/wmslayerspanel.js@3.8.15
+       * 
+       * show add wms layers to wms panel
+       * 
+       * @param config
+       * 
+       * @returns { WmsLayersPanel }
+       */
+      _showWmsLayersPanel(config = {}) {
+        panel = new Panel({
+          service:       this,
+          id:            getUniqueDomId(),
+          title:         'sidebar.wms.panel.title',
+          internalPanel: new (Vue.extend(vuePanelComp))({ service: this, config }),
+          show:          true,
+        });
+        panel.internalPanel.$on('add-wms-layer', this.addWMSlayer.bind(this));
+        return panel;
       },
 
       /**
+       * Load WMS Data from server and show WMS Layers Panel
+       * 
        * @param url
        * 
        * @returns { Promise<void> }
        */
       async showWmsLayersPanel(url) {
+        let error = false;
+        let added = false;
         try {
-          this.loading           = true;
-          const { error, added } = await this.$options.service.loadWMSDataAndShowWmsLayersPanel(url);
-          this.status.error      = error;
-          this.status.added      = added;
-          this.loading           = false;
-        } catch(err) {
-          console.warn(err);
+          this.loading = true;
+          const d = await this.getWMSLayers(url);
+          error = !d.result;
+          if (!error) {
+            d.wmsurl = url;
+            this._showWmsLayersPanel(d);
+          }
+        } catch(e) {
+          console.warn(e);
+        } finally {
+          this.status.error = error;
+          this.status.added = added;
+          this.loading      = false;
         }
       },
 
+      /**
+       * Delete WMS by name
+       * 
+       * @param name
+       */
+      deleteWms(name) {
+        const data = this.getLocalWMSData();
+        Object.keys(data.wms).find(url => {
+          const index = data.wms[url].findIndex(w => w.name == name);
+          /** @TODO add description */
+          if (-1 !== index) {
+            data.wms[url].splice(index, 1);
+          }
+          /** @TODO add description */
+          if (-1 !== index && 0 == data.wms[url].length) {
+            delete data.wms[url];
+          }
+          return true;
+        });
+        this.updateLocalWMSData(data);
+      },
+
+      clear() {
+        panel = null;
+      },
+
+      /**
+       * Change config of storage layer options as position, opacity
+       */
+      changeLayerData(name, attr = {}) {
+        const data = this.getLocalWMSData();
+        Object
+          .keys(data.wms)
+          .find(url => {
+            const i = data.wms[url].findIndex(l => l.name == name);
+            if (-1 !== i) {
+              data.wms[url][i][attr.key] = attr.value;
+              return true;
+            }
+          });
+        this.updateLocalWMSData(data);
+      },
+
+      /**
+       * Get local storage wms data based on current projectId
+       * 
+       * @returns {*}
+       */
+      getLocalWMSData() {
+        return (ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {})[PID];
+      },
+
+      /**
+       * Update local storage data based on changes
+       * 
+       * @param data
+       */
+      updateLocalWMSData(data) {
+        const alldata = ApplicationService.getLocalItem(LOCALSTORAGE_EXTERNALWMS_ITEM) || {};
+        alldata[PID] = data;
+        ApplicationService.setLocalItem({ id: LOCALSTORAGE_EXTERNALWMS_ITEM, data: alldata });
+      },
+
+    },
+
+    // Load WMS urls from local storage
+    async mounted() {
+      /**@deprecated Will be removed on v4.x **/
+      ProjectsRegistry
+        .onafter('setCurrentProject', async project => {
+          this.projectId          = PID = project.getId();
+          this.state.adminwmsurls = project.wmsurls || [];
+        });
+
+      await GUI.isReady();
+
+      const map = GUI.getService('map');
+
+      await map.isReady();
+
+      this.deleteWms = this.deleteWms.bind(this);
+
+      map.on('remove-external-layer', this.deleteWms);
+
+      let data = this.getLocalWMSData();
+
+      if (undefined === data) {
+        data = {
+          urls: [], // unique url for wms
+          wms:  {}, // object contains url as a key and array of layers bind to url
+        };
+        this.updateLocalWMSData(data);
+      }
+
+      setTimeout(() => {
+        map.on('change-layer-position-map', ({ id: name, position } = {}) => this.changeLayerData(name, { key: 'position', value: position }));
+        map.on('change-layer-opacity',      ({ id: name, opacity } = {})  => this.changeLayerData(name, { key: 'opacity',  value: opacity }));
+        map.on('change-layer-visibility',   ({ id: name, visible } = {})  => this.changeLayerData(name, { key: 'visible',  value: visible }));
+
+        // load eventually data
+        Object.keys(data.wms).forEach(url => { data.wms[url].forEach(d => map.addExternalWMSLayer({ url, ...d })); });
+      });
+
+      this.state.localwmsurls = data.urls;
+
+    },
+
+    beforeDestroy() {
+      GUI.getService('map').off('remove-external-layer', this.deleteWms);
     },
 
   }
@@ -263,4 +558,11 @@
   .wms-icon-action:hover {
     box-shadow: none;
   }
+  .new_wms_item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: transparent !important;
+    margin-bottom: 10px;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/WMSLayersPanel.vue b/src/components/WMSLayersPanel.vue
index 2bb65f60f..b00036c83 100644
--- a/src/components/WMSLayersPanel.vue
+++ b/src/components/WMSLayersPanel.vue
@@ -23,7 +23,7 @@
     </label>
     <select
       id        = "g3w-wms-layers"
-      :multiple  = "true"
+      :multiple = "true"
       clear     = "true"
       v-select2 = "'selectedlayers'"
     >
@@ -74,7 +74,7 @@
     />
 
     <button
-      @click.stop = "addWMSlayer"
+      @click.stop = "$emit('add-wms-layer', { url, position, epsg, layers: selectedlayers, name: name && name.trim() || undefined })"
       v-disabled  = "0 === selectedlayers.length"
       class       = "btn wms-add-layer-button sidebar-button skin-button"
     >
@@ -114,44 +114,13 @@ export default {
 
   methods: {
 
-    /**
-     * @returns {Promise<void>}
-     */
-    async addWMSlayer() {
-      const config = {
-        url:      this.url,
-        name:     this.name && this.name.trim() || undefined,
-        layers:   this.selectedlayers,
-        epsg:     this.epsg,
-        position: this.position,
-      };
-
-      this.added = this.$options.service.checkIfWMSAlreadyAdded(config);
-
-      if (this.added) {
-        console.warn('WMS Layer already added');
-        return;
-      }
-
-      this.loading = true;
-
-      try {
-        await this.$options.service.addWMSlayer(config);
-      } catch(err) {
-        console.warn('unexpected error while adding WMS Layer');
-      }
-
-      this.loading = false;
-
-      this.clear();
-    },
-
     /**
      * @FIXME add description
      */
     clear() {
       this.selectedlayers = [];
-      this.name = null;
+      this.name           = null;
+      this.loading        = false;
     },
 
     /**
@@ -178,11 +147,11 @@ export default {
     /**
      * Handle selected layers change  
      */
-    selectedlayers(layers) {
-      if (!layers.length) {             // Reset epsg and projections to initial values
+    selectedlayers(layers = []) {
+      if (0 === layers.length) {             // Reset epsg and projections to initial values
         this.epsg        = null;
         this.projections = [];
-      } else if (layers.length === 1) { // take first layer selected supported crss
+      } else if (1 === layers.length) { // take first layer selected supported crss
         this.epsg        = this.layerProjections[layers[0]].crss[0];
         this.projections = this.layerProjections[layers[0]].crss;
       } else {                          // TODO: add description
@@ -214,8 +183,8 @@ export default {
      */
     try {
       this.url = methods.GetMap.urls.find(u => 'Get' === u.type).url;
-    } catch(err) {
-      console.warn(err);
+    } catch(e) {
+      console.warn(e);
       this.url = wmsurl;
     }
 
diff --git a/src/components/g3w-catalog.js b/src/components/g3w-catalog.js
new file mode 100644
index 000000000..8508cc08d
--- /dev/null
+++ b/src/components/g3w-catalog.js
@@ -0,0 +1,146 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import G3WObject                   from 'core/g3w-object';
+import Component                   from 'core/g3w-component';
+import ComponentsRegistry          from 'store/components';
+import CatalogLayersStoresRegistry from 'store/catalog-layers';
+import ProjectsRegistry            from 'store/projects';
+import GUI                         from 'services/gui';
+import ApplicationService          from 'services/application';
+
+import * as vueComp                from 'components/Catalog.vue';
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/catalog/vue/catalog.js@v3.9.3
+ * - src/app/gui/catalog/catalogservice.js@v3.9.3
+ */
+export default function(opts = {}) {
+
+  const state = {
+    highlightlayers: false,
+    external: {  // external layers
+      wms: [],   // added by wms sidebar component
+      vector: [] // added to map controls for the moment
+    },
+    layerstrees: CatalogLayersStoresRegistry.getLayersStores().map(s => ({ tree: s.getLayersTree(), storeid: s.getId() })),
+    layersgroups: [],
+    legend: Object.assign(opts.config.legend || {}, { place: ApplicationService.getCurrentProject().getLegendPosition() || 'tab' }),
+  };
+
+  const service = opts.service || new G3WObject({
+    setters: {
+      /**
+       * @param {{ layer: unknown, type: 'vector' }}
+       *
+       * @fires CatalogService~addExternalLayer
+       *
+       * @since 3.8.0
+       */
+      addExternalLayer({ layer, type='vector' } = {}) {
+        layer.removable = true;
+        state.external[type].push(layer);
+      },
+      /**
+       * @param {{ name: string, type: 'vector' }}
+       *
+       * @fires CatalogService~removeExternalLayer
+       *
+       * @since 3.8.0
+       */
+      removeExternalLayer({ name, type='vector' } = {}) {
+        state.external[type].filter((l, i) => {
+          if (l.name === name) {
+            state.external[type].splice(i, 1);
+            return true;
+          }
+        });
+      },
+      /**
+       * @param {{ layer: unknown, type: unknown, selected: unknown }}
+       *
+       * @fires CatalogService~setSelectedExternalLayer
+       *
+       * @since 3.8.0
+       */
+      setSelectedExternalLayer({ layer, type, selected }) {
+        state.external[type].forEach(l => { l.selected = (undefined === l.selected ? l.selected : (l === layer ? selected : false)); })
+      },
+    }
+  });
+
+  service.state                       = state;
+
+  /** used by the following plugins: "stress" */
+  service.createLayersGroup           = ({ title = 'Layers Group', layers = [] } = {}) => ({ title, nodes: layers.map(l => l) });
+  /** used by the following plugins: "stress" */
+  service.addLayersGroup              = g => { state.layersgroups.push(g); };
+  /** used by the following plugins: "processing" */
+  service.getExternalLayers           = ({ type = 'vector' })     => state.external[type];
+
+  /** @TODO check if deprecated */
+  service.getExternalSelectedLayers   = ({ type = 'vector' })     => state.external[type].filter(l => l.selected);
+  /** @TODO check if deprecated */
+  service.getExternalLayerById        = ({ id, type = 'vector' }) => state.external[type].find(l => l.id === id);
+  /** @TODO check if deprecated */
+  service.isExternalLayerSelected     = l => !!(service.getExternalLayerById(l) || {}).selected;
+  /** @TODO check if deprecated */
+  service.addLayersStoreToLayersTrees = s => state.layerstrees.push({tree: s.getLayersTree(), storeid: s.getId()});
+  /** @TODO check if deprecated */
+  service.getMajorQgisVersion         = () => ProjectsRegistry.getCurrentProject().getQgisVersion({type: 'major'});
+  /** @TODO check if deprecated */
+  service.changeMapTheme              = async map_theme => {
+    ApplicationService.changeProjectView(true);
+    const rootNode = state.layerstrees[0];
+    rootNode.checked = true;
+    const changes = await ProjectsRegistry.getCurrentProject().setLayersTreePropertiesFromMapTheme({ map_theme, rootNode, layerstree: rootNode.tree[0].nodes });
+    ApplicationService.changeProjectView(false);
+    return changes;
+  };
+
+  // add layers stores to tree
+  CatalogLayersStoresRegistry.onafter('addLayersStore',      s => { state.layerstrees.push({ tree: s.getLayersTree(), storeid: s.getId() }); });
+  CatalogLayersStoresRegistry.onafter('removeLayersStore',   s => { const i = state.layerstrees.findIndex(t => t.storeid === s.getId()); if (-1 !== i) { state.layerstrees.splice(i, 1); } });
+  CatalogLayersStoresRegistry.onafter('removeLayersStores', () => { state.layerstrees.forEach((_, i) => { state.layerstrees.splice(i, 1); }); });
+
+  const comp = new Component({
+    ...opts,
+    title: 'catalog',
+    resizable: true,
+    service,
+    vueComponentObject: vueComp,
+  });
+
+  /** @TODO check if deprecated */
+  _listenToMapVisibility(opts.mapcomponentid, comp);
+
+  return comp;
+};
+
+/**
+ * @TODO check if deprecated
+ */
+function _listenToMapVisibility(map_id, component) {
+  if(!map_id) {
+    return;
+  }
+
+  component.mapComponentId = map_id;
+
+  const map = GUI.getComponent(map_id);
+
+  const cb = map => {
+    const ms = map.getService();
+    component.state.visible = !ms.state.hidden;
+    ms.onafter('setHidden', () => { component.state.visible = !ms.state.hidden; component.state.expanded = true; });
+  };
+
+  if (map) {
+    cb(map);
+  } else {
+    ComponentsRegistry.on('componentregistered', c => map_id === c.getId() && cb(c));
+  }
+}
\ No newline at end of file
diff --git a/src/components/g3w-changemapmenu.js b/src/components/g3w-changemapmenu.js
new file mode 100644
index 000000000..3c30b6931
--- /dev/null
+++ b/src/components/g3w-changemapmenu.js
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+
+import * as vueComp from 'components/ChangeMapMenu.vue';
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/changemapmenu/changemapmenu.js@v3.9.3 
+ */
+export default function(opts = {}) {
+  return new Component({
+    ...opts,
+    id: 'changemapmenu',
+    vueComponentObject: vueComp,
+  })
+};
\ No newline at end of file
diff --git a/src/components/g3w-contentsviewer.js b/src/components/g3w-contentsviewer.js
new file mode 100644
index 000000000..6fa8ee8bd
--- /dev/null
+++ b/src/components/g3w-contentsviewer.js
@@ -0,0 +1,101 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+import { BarStack } from 'core/g3w-barstack';
+import { resolve }  from 'utils/resolve';
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/viewport/contentsviewer.js@v3.9.3
+ * - src/components/ViewportContentsViewer.vue@v3.9.3
+ */
+export default function(opts = {}) {
+
+  const stack = new BarStack(); // handles the logic of mounting component on DOM
+  const comp  = new Component({
+    ...opts,
+    title: 'contents',
+    vueComponentObject: {
+      name: 'viewport-contents-viewer',
+      template: `<div id="contents" class="contents"></div>`,
+      data: () => ({ state: null }),
+    },
+  });
+
+  stack.on('clear', () => comp.contentsdata = stack.state.contentsdata);
+
+  Object.assign(comp, {
+
+    stack,
+
+    contentsdata: stack.state.contentsdata,
+
+    // `push` = whether to clean the stack every time, sure to have just one component.
+    setContent(opts = {}) {
+      const d = $.Deferred();
+      (opts.push ? resolve() : stack.clear()).then(() => comp.addContent(opts.content, opts).then(() => d.resolve(opts)));
+      comp.setOpen(true);
+      return d.promise();
+    },
+
+    addContent(content, opts={}) {
+      const d = $.Deferred();
+      stack.push(content, Object.assign(opts, { parent: comp.internalComponent.$el, append: true })).then(() => {
+        comp.contentsdata = stack.state.contentsdata; // get stack content
+        Array
+          .from(comp.internalComponent.$el.children)  // hide other elements but not the last one
+          .forEach((el, i, a) => el.style.display = (i === a.length - 1) ? 'block' : 'none');
+        d.resolve();
+      });
+      return d.promise();
+    },
+
+    // remove content from stack
+    removeContent() {
+      comp.setOpen(false);
+      return stack.clear();
+    },
+
+    // used by  viewport.js, update the content of contentsdata only after stack is updated
+    popContent() {
+      return stack.pop().then(() => {
+        comp.contentsdata = stack.state.contentsdata;
+        Array
+          .from(comp.internalComponent.$el.children)       // hide other elements but not the last one
+          .forEach((el, i, a) => el.style.display = (i === a.length - 1) ? 'block' : 'none');
+      });
+    },
+
+    // Set layout of the content each time
+    layout(parentWidth) {
+      const el = comp.internalComponent.$el;
+      Vue.nextTick(() => {                                                     // run only after that vue state is updated
+        const height = el.parentElement.clientHeight                           // parent element is "g3w-view-content"
+          - ((el.parentElement.querySelector('.close-panel-block') || {}).offsetHeight || 0)
+          - ((el.parentElement.querySelector('.content_breadcrumb') || {}).offsetHeight || 0)
+          - 10;                                                                // margin 10 from bottom
+        el.style.height = height + 'px';
+        if (el.firstChild) {
+          el.firstChild.style.height = height + 'px';
+        }
+        stack.state.contentsdata.forEach(d => {                                // re-layout each component stored into the stack
+          if ('function' == typeof d.content.layout) {  
+            d.content.layout(parentWidth + 0.5, height);
+          }
+        })
+      })
+    },
+
+    getComponentById:       stack.getComponentById.bind(stack),
+    getContentData:         stack.getContentData.bind(stack),
+    getCurrentContentData:  stack.getCurrentContentData.bind(stack),
+    getPreviousContentData: stack.getPreviousContentData.bind(stack),
+    clearContents:          stack.clear.bind(stack),
+
+  }); 
+
+  return comp;
+}
\ No newline at end of file
diff --git a/src/components/g3w-form.js b/src/components/g3w-form.js
new file mode 100644
index 000000000..bb8fd58ec
--- /dev/null
+++ b/src/components/g3w-form.js
@@ -0,0 +1,58 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+import GUI          from 'services/gui';
+
+import * as vueComp from 'components/Form.vue';
+import BodyFormComp from 'components/FormBody.vue';
+
+const Service  = require('gui/form/formservice');
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/form/vue/form.js@v3.9.3 
+ * 
+ * Used by the following plugins: "editing", "cadastre", "geonotes", "iternet"  
+ */
+export default class FormComponent extends Component {
+  constructor(opts={}) {
+    super({
+      ...opts,
+      id: opts.id || 'form',
+      perc: null !== opts.layer.getFormPercentage() ? opts.layer.getFormPercentage() : opts.perc,
+      service: new (opts.service || Service)(),
+      vueComponentObject: opts.vueComponentObject || vueComp,
+    });
+
+    // set element of the form
+    const components = opts.components || [{
+      id: opts.id,
+      title: opts.title,
+      name: opts.name,
+      root: true,
+      component: BodyFormComp,
+      headerComponent: opts.headerComponent
+    }];
+
+    this.getService().addComponents(components);
+    this.getService().setComponent(components[0].component);
+
+    this.onafter('mount', () => GUI.setModal(true))
+  }
+
+  addFormComponents(c = []) { this.getService().addComponents(c); }
+  addFormComponent(c)       { c && this.getService().addComponent(c); }
+  layout()                  { this.getInternalComponent().reloadLayout(); }
+
+  /** @TODO check if deprecated */
+  addBodyFormComponent(c)   { c && this.getInternalComponent().body.components[c.where || 'after'].push(c.component); };
+  /** @TODO check if deprecated */
+  addBodyFormComponents(cs) { cs && (cs.components || []).forEach(c => this.addBodyFormComponent({ component: c, where: cs.where || 'after' })); }
+  /** @TODO check if deprecated */
+  addDependecyComponents(c) { this.getService().addDependecyComponents(c); }
+  /** @TODO check if superflous */
+  mount(parent, append)     { return super.mount(parent, append).then(() => { GUI.setModal(true); }); }
+
+};
\ No newline at end of file
diff --git a/src/components/g3w-map.js b/src/components/g3w-map.js
new file mode 100644
index 000000000..429dfb865
--- /dev/null
+++ b/src/components/g3w-map.js
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+
+import * as vueComp from 'components/Map.vue';
+
+const { MapService } = require('gui/map/mapservice');
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/map/vue/map.js@v3.9.3 
+ */
+export default function(opts = {}) {
+  const comp = new Component({
+    ...opts,
+    id: 'map',
+    title: 'Map Component',
+    service: new MapService(opts),
+    vueComponentObject: vueComp,
+  })
+
+  comp.layout = (w, h) => { comp.getService().layout({ width: w, height: h }); };
+
+  return comp;
+};
\ No newline at end of file
diff --git a/src/components/g3w-metadata.js b/src/components/g3w-metadata.js
new file mode 100644
index 000000000..8a99a88f1
--- /dev/null
+++ b/src/components/g3w-metadata.js
@@ -0,0 +1,77 @@
+import Component         from 'core/g3w-component';
+import G3WObject         from 'core/g3w-object';
+import ProjectsRegistry  from 'store/projects';
+import GUI               from 'services/gui';
+import { noop }          from 'utils/noop';
+
+import * as MetadataComp from 'components/Metadata.vue';
+import MetadataProjComp  from 'components/MetadataProject.vue';
+
+const GROUPS = {
+  general: ['title', 'name', 'description', 'abstract', 'keywords', 'fees', 'accessconstraints', 'contactinformation', 'wms_url'],
+  spatial: ['crs', 'extent'],
+  layers: ['layers'],
+};
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/metadata/vue/metadata.js@v3.9.3
+ * - src/app/gui/metadata/metadataservice.js@v3.9.3
+ */
+export default function(opts) {
+
+  const state = {
+    name: '',
+    groups: {}
+  };
+
+  const comp = new Component({
+    ...opts,
+    title: 'sdk.metadata.title',
+    service: Object.assign(opts.service || new G3WObject(), {
+      state,
+      content: null,
+      show: false,
+      reload(emit = true) {
+        if (emit) {
+          comp.getService().emit('reload');
+        }
+        const project = ProjectsRegistry.getCurrentProject().getState();
+        state.name    = project.title;
+        state.groups  = Object.entries(GROUPS).reduce((g, [name, fields]) => {
+          g[name] = fields.reduce((f, field) => {
+            const value = project.metadata && project.metadata[field] ? project.metadata[field] : project[field];
+            if (value) {
+              f[field] = { value, label: `sdk.metadata.groups.${name}.fields.${field}` };
+            }
+            return f;
+          }, {});
+          return g;
+        }, {});
+      }
+    }),
+    vueComponentObject: MetadataComp,
+  });
+
+  // build project group metadata
+  comp.getService().reload(false);
+  comp.getService().on('reload', () => comp.setOpen(false));
+
+  // show metadata
+  comp.onafter('setOpen', b => {
+    const service = comp.getService();
+    service.show = b;
+    if (b) {
+      service.content        = new Component({ service, internalComponent: new (Vue.extend(MetadataProjComp))({ state }) });
+      service.content.layout = noop;
+      GUI.setContent({ content: service.content, title: 'sdk.metadata.title', perc: 100 });
+      service.show = true;
+    } else {
+      GUI.closeContent()
+    }
+  });
+
+  GUI.on('closecontent', () => comp.state.open = false);
+
+  return comp;
+};
\ No newline at end of file
diff --git a/src/components/g3w-print.js b/src/components/g3w-print.js
new file mode 100644
index 000000000..28e57743c
--- /dev/null
+++ b/src/components/g3w-print.js
@@ -0,0 +1,38 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component      from 'core/g3w-component';
+
+import * as vueComp   from 'components/Print.vue';
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/print/vue/print.js@v3.9.3 
+ */
+export default function(opts = {}) {
+  const comp = new Component({
+    ...opts,
+    title: 'print',
+    service: {},
+    internalComponent: new (Vue.extend(vueComp)),
+  });
+
+  // BACKCOMP v3.x
+  const service             = comp.getService();
+  const internalComponent   = comp.getInternalComponent();
+
+  service.state             = internalComponent.state;
+  service.changeScale       = internalComponent.changeScale;
+  service.getOverviewExtent = internalComponent.getOverviewExtent;
+  service.changeRotation    = internalComponent.changeRotation;
+  service.changeTemplate    = internalComponent.changeTemplate;
+  service.print             = internalComponent.print;
+  service.showPrintArea     = internalComponent.showPrintArea;
+  service.reload            = internalComponent.reload;
+
+  comp.onafter('setOpen', b => service.showPrintArea(b));
+  comp.onafter('reload', () => { service.reload(); comp.state.visible = service.state.visible; });
+
+  return comp;
+};
\ No newline at end of file
diff --git a/src/components/g3w-projectsmenu.js b/src/components/g3w-projectsmenu.js
new file mode 100644
index 000000000..f599ad3de
--- /dev/null
+++ b/src/components/g3w-projectsmenu.js
@@ -0,0 +1,35 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component          from 'core/g3w-component';
+import ProjectsRegistry   from 'store/projects';
+import ApplicationService from 'services/application';
+
+import * as vueComp       from 'components/ProjectsMenu.vue';
+
+/**
+ * ORIGINAL SOURCE:
+ *  - src/app/gui/projectsmenu/projectsmenu.js@v3.9.3
+ *  - src/app/gui/projectsmenu/menu.js@v3.9.3
+ */
+export default function (opts={}) {
+  return new Component({
+    ...opts,
+    id: 'projectsmenu',
+    title: opts.title || 'menu',
+    internalComponent: new (Vue.extend(vueComp))({
+      host: opts.host,
+      state: {
+        menuitems: (opts.projects || ProjectsRegistry.getListableProjects()).map(p => ({
+          title:       p.title,
+          description: p.description,
+          thumbnail:   p.thumbnail,
+          gid:         p.gid,
+          cbk:         opts.cbk || ((o = {}) => ApplicationService.changeProject({ host: opts.host, gid: o.gid })),
+        }))
+      },
+    }),
+  });
+}
\ No newline at end of file
diff --git a/src/components/g3w-querybuilder.js b/src/components/g3w-querybuilder.js
new file mode 100644
index 000000000..5e2cc1f90
--- /dev/null
+++ b/src/components/g3w-querybuilder.js
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Panel        from 'core/g3w-panel';
+
+import * as vueComp from 'components/QueryBuilder.vue';
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/querybuilder/querybuilderuifactory.js@v3.9.3
+ */
+export default {
+  show: ({ opts = {} } = {}) => (new Panel(Object.assign(opts, {
+      title: 'Query Builder',
+      show: true,
+      internalPanel: new (Vue.extend(vueComp))(opts),
+    }))).getInternalPanel(),
+};
\ No newline at end of file
diff --git a/src/components/g3w-queryresults.js b/src/components/g3w-queryresults.js
new file mode 100644
index 000000000..96aa2ad9e
--- /dev/null
+++ b/src/components/g3w-queryresults.js
@@ -0,0 +1,37 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+import { noop }     from 'utils/noop';
+
+import * as vueComp from 'components/QueryResults.vue';
+
+const QueryResultsService = require('gui/queryresults/queryresultsservice');
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/queryresults/vue/queryresults.js@v3.9.3
+ */
+export default function(opts = {}) {
+  const comp = new Component({
+    ...opts,
+    id: 'queryresults',
+    title: 'Query Results',
+    service: new QueryResultsService(),
+    vueComponentObject: vueComp,
+  });
+
+  comp.getElement = () => comp.internalComponent ? comp.internalComponent.$el : undefined;
+  comp.unmount    = () => { comp.getService().closeComponent(); return Component.prototype.unmount.call(comp) };
+  comp.layout     = noop;
+
+  comp.getService().onafter('setLayersData', async () => {
+    if (!comp.internalComponent) {
+      comp.setInternalComponent();
+    }
+    await comp.internalComponent.$nextTick();
+  });
+
+  return comp;
+}
\ No newline at end of file
diff --git a/src/components/g3w-relationspage.js b/src/components/g3w-relationspage.js
new file mode 100644
index 000000000..f0d9f8084
--- /dev/null
+++ b/src/components/g3w-relationspage.js
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+
+import * as vueComp from 'components/RelationsPage.vue';
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/relations/vue/relationspage.js@v3.9.3
+ * - src/app/gui/relations/relationsservice.js@v3.9.3
+ */
+export default function(opts = {}) {
+  return new Component({
+    ...opts,
+    internalComponent: new (Vue.extend(vueComp))(opts)
+  });
+};
\ No newline at end of file
diff --git a/src/components/g3w-search.js b/src/components/g3w-search.js
new file mode 100644
index 000000000..20e7f3dfe
--- /dev/null
+++ b/src/components/g3w-search.js
@@ -0,0 +1,172 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import { SEARCH_ALLVALUE }            from 'app/constant';
+import G3WObject                      from 'core/g3w-object';
+import Component                      from 'core/g3w-component';
+import Panel                          from 'core/g3w-panel';
+import CatalogLayersStoresRegistry    from 'store/catalog-layers';
+import ApplicationState               from 'store/application-state';
+import ProjectsRegistry               from 'store/projects';
+import GUI                            from 'services/gui';
+import { resolve }                    from 'utils/resolve';
+import { noop }                       from 'utils/noop';
+import { getUniqueDomId }             from 'utils/getUniqueDomId';
+import { createFilterFormInputs }     from 'utils/createFilterFormInputs';
+import { createInputsFormFromFilter } from 'utils/createInputsFormFromFilter';
+import { doSearch }                   from 'utils/doSearch';
+import { debounce }                   from 'utils/debounce';
+
+import * as vueComp                   from 'components/Search.vue';
+import * as vueSearchComp             from 'components/SearchPanel.vue';
+
+/**
+ * Retrieve from local storage
+ */
+function _getSavedSearches() {
+  const ITEMS = ApplicationState.querybuilder.searches;
+  const id = ProjectsRegistry.getCurrentProject().getId();
+  ITEMS[id] = ITEMS[id] || [];
+  return ITEMS[id];
+}
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/search/vue/search.js@v3.9.3
+ * - src/app/gui/search/service.js@3.9.3
+ */
+export function SearchComponent(opts = {}) {
+
+  const project = ProjectsRegistry.getCurrentProject();
+
+  const state = {
+    searches: (project.state.search || []).sort((a, b) => `${a.name}`.localeCompare(b.name)),
+    tools: [],
+    querybuildersearches: _getSavedSearches()
+  };
+
+  const service = opts.service || new G3WObject();
+
+  const comp = new Component({
+    ...opts,
+    id: 'search',
+    visible: true,
+    title: project.state.search_title || 'search',
+    service: Object.assign(service, {
+      state,
+      title:                 project.state.search_title || "search",
+      addQueryBuilderSearch: s  => { state.querybuildersearches.push(s); },
+      addTool:               t  => { state.tools.push(t); },
+      addTools:              tt => { for (const t of tt) service.addTool(t); },
+      showPanel:             o  => new SearchPanel(o, true),
+      removeItem:            ({ type, index } = {}) => { 'querybuilder' === type && state.querybuildersearches.splice(index, 1); },
+      getTitle:              () => service.title,
+      cleanSearchPanels:     () => { state.panels = {}; },
+      removeTools:           () => { state.tools.splice(0) },
+      stop:                  resolve,
+      removeTool:            noop,
+      reload:                () => {
+        state.searches             = ProjectsRegistry.getCurrentProject().state.search;
+        state.querybuildersearches = _getSavedSearches();
+      },
+    }),
+    vueComponentObject: vueComp,
+  });
+
+  comp._reload = () => { comp._service.reload() };
+
+  return comp;
+}
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/search/vue/panel/searchpanel.js@v3.9.3
+ * ORIGINAL SOURCE: src/app/gui/search/vue/panel/searchservice.js@v3.9.3
+ */
+export function SearchPanel(opts = {}, show = false) {
+  const state = {
+    loading:              {}, // store loading state of each input and each dependency
+    searching:            false, //Boolean. If true, search request from server is starts. False no search
+    title:                opts.name,
+    /** @type { 'search' | 'search_1n' } */
+    type:                 opts.type || 'search',
+    /** @TODO check if deprecated */
+    queryurl:             (opts.options || {}).queryurl,
+    /** @deprecated will be removed in v4.x */
+    search_endpoint:      'api',
+    search_1n_relationid: opts.options.search_1n_relationid, //relations
+    /** Layers that will be searchable for that search form. The First one is a layer owner of the search set on admin. */
+    search_layers:        [(opts.options || {}).querylayerid || (opts.options || {}).layerid || null, ...((opts.options || {}).otherquerylayerids || [])].map(id => CatalogLayersStoresRegistry.getLayerById(id)),
+    /** Array of inputs that belongs to search form  */
+    forminputs:           ((opts.options || {}).filter || []).map((d, i) => ({
+      id:          d.id || getUniqueDomId(),
+      type:        d.input.type || 'textfield',
+      widget_type: d.input.widget_type,
+      label:       d.label,
+      attribute:   d.attribute,
+      values:      d.input.options.values || [],
+      /** group values by parent value */
+      dvalues: {},
+      /**
+       * true → initially it is disabled (values = [], ALL value)
+       *        as in the case in which the dependent field will
+       *        return to having ALL value. When a value is set to
+       *        the dependent field, the select will be enabled and
+       *        will contain the filtered values consistent with the
+       *        value of the dependent parent field
+       */
+      dependance_strict: d.input.options.dependance_strict || false,
+      /**
+       * true → the select is not disabled and will contain all possible values
+       *        (since at the beginning the parent will have the value ALL).
+       *        When the value of the dependent field changes, the values in the
+       *        select list will be filtered in a manner consistent with the value
+       *        of the parent
+       */
+      dependance: d.input.options.dependance || false,
+      value:     'selectfield' ===  d.input.type ? SEARCH_ALLVALUE : null,
+      operator:  d.op,
+      logicop:   i === (opts.options.filter.length - 1) ? null : d.logicop,
+      loading:   true,
+      disabled:  d.input.options.disabled || false, 
+      /** keep a reference to initial search options (you shouldn't mutate them..) */
+      options:   d.input.options,
+    })),
+  };
+
+  state.mounted = createInputsFormFromFilter(state);
+
+  const service = opts.service || Object.assign(new G3WObject, {
+    state,
+    doSearch,
+    run: debounce((...args) => {
+      const [w, h] = GUI.getService('map').getMap().getSize();
+      const hide   = GUI.isMobile() && (0 === w || 0 === h);
+      setTimeout(() => {
+        if (hide) {
+          GUI.hideSidebar();
+        }
+        panel.getService().doSearch({...args, state });
+      }, hide ? 0 : 600);
+    }),
+    clear() {
+      panel.getService().state = null;
+    },
+    createFilter: () => createFilterFormInputs({
+      layer: state.search_layers,
+      inputs: state.forminputs.filter(input => -1 === [null, undefined, SEARCH_ALLVALUE].indexOf(input.value) && '' !== input.value.toString().trim()), // Filter input by NONVALIDVALUES
+    }),
+  });
+
+  const panel = new Panel({
+    ...opts,
+    show,
+    id:                 opts.id        || getUniqueDomId(),
+    title:              opts.title     || 'search',
+    vueComponentObject: opts.component || vueSearchComp,
+    service,
+  });
+
+  return panel;
+}
\ No newline at end of file
diff --git a/src/components/g3w-spatialbookmarks.js b/src/components/g3w-spatialbookmarks.js
new file mode 100644
index 000000000..331a0e3c5
--- /dev/null
+++ b/src/components/g3w-spatialbookmarks.js
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component    from 'core/g3w-component';
+import GUI          from 'services/gui';
+
+import * as vueComp from 'components/SpatialBookMarks.vue';
+
+/**
+ * ORIGINAL SOURCE: src/app/gui/spatialbookmarks/vue/spatialbookmarks.js@v3.9.3
+ */
+export default function (opts = {}) {
+  const comp = new Component({
+    ...opts,
+    title: 'sdk.spatialbookmarks.title',
+    vueComponentObject: vueComp,
+  });
+
+  GUI.on('closecontent', () => { comp.state.open = false; });
+
+  return comp;
+};
\ No newline at end of file
diff --git a/src/components/g3w-tools.js b/src/components/g3w-tools.js
new file mode 100644
index 000000000..92cc67c24
--- /dev/null
+++ b/src/components/g3w-tools.js
@@ -0,0 +1,114 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component        from 'core/g3w-component';
+import G3WObject        from 'core/g3w-object';
+import ProjectsRegistry from 'store/projects';
+import GUI              from 'services/gui';
+import noop             from 'utils/noop';
+
+import G3wTool          from 'components/Tool.vue';
+
+/** @TODO check if deprecated */
+const ACTIONS = {};
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/tools/vue/tools.js@v3.9.3
+ * - src/app/gui/tools/service.js@v3.9.3
+ * - src/components/Tools.vue@v3.9.3
+ */
+export default function(opts = {}) {
+
+  const project = ProjectsRegistry.getCurrentProject();
+  const state   = {
+    ...opts,
+    toolsGroups: [],
+    visible: false,
+    loading: false
+  };
+
+  const service = new G3WObject({ setters: {
+    addTool(tool, { title, position }) {
+      let group = state.toolsGroups.find(g => g.name === title);
+      if (!group) { group = { name: title, tools: [] }; state.toolsGroups.splice(position, 0, group); }
+      return group.tools.push(Object.assign(tool, {
+        state:  tool.state || ({ type: null, message: null }),
+        action: tool.action || (ACTIONS[tool.type] || noop).bind(null, tool.options)
+      }));
+    },
+    addToolGroup(position, name) {
+      let group = state.toolsGroups.find(g => g.name === name);
+      if (!group) { group = { name, tools: [] }; state.toolsGroups.splice(position, 0, group); }
+      return group;  
+    },
+    addTools(tools, groupName)   { tools.forEach(t => this.addTool(t, groupName)); },
+    removeToolGroup(name)        { state.toolsGroups = state.toolsGroups.filter(g => g.name !== name); },
+    removeTools()                { state.toolsGroups.splice(0); },
+  }});
+
+  service.state            = state;
+  service.config           = null;
+  service.getState         = () => state;
+  service.reload           = () => { service.removeTools(); };
+  service.setLoading       = (bool = false) => { state.loading = bool; }
+  service.updateToolsGroup = (order, config) => { Vue.set(state.toolsGroups, order, config); }
+  service.setToolState     = ({ id, state: newState = { type: null, message: null } } = {}) => {
+    state.toolsGroups.find(g => {
+      const tool = g.tools.find(t => t.name === id);
+      if (tool) {
+        tool.state.type    = newState.type;
+        tool.state.message = newState.message;
+        return true;
+      }
+    })
+  };
+
+  // static class field
+  service.ACTIONS = ACTIONS;
+
+  const tools = project.getState().tools || {};
+
+  for (let t in tools) {
+    service.addToolGroup(0, t.toUpperCase());
+    service.addTools(
+      tools[t].map(tool => ({ name: tool.name, action: ACTIONS[t].bind(null, tool) })),
+      { position: 0, title: t.toUpperCase() }
+    );
+  }
+
+  const comp = new Component({
+    ...opts,
+    title: "tools",
+    service,
+    internalComponent: new (Vue.extend({
+      template: /* html */ `
+        <ul class="g3w-tools treeview-menu">
+          <bar-loader :loading="state.loading"/>
+          <li v-for="g in state.toolsGroups" :key="g.name">
+            <div class="tool-header"><i :class="g3wtemplate.getFontClass('tool')"></i><span>{{ g.name }}</span></div>
+            <div :id="g.name + '-tools'" class="tool-box"><g3w-tool v-for="t in g.tools" :key="t.name" :tool="t" /></div>
+          </li>
+        </ul>`,
+      components: { G3wTool },
+      data: () => ({ state: null }),
+      watch: {
+        'state.toolsGroups'(g) {
+          comp.setVisible(g.length > 0);
+          this.$emit('visible', g.length > 0);
+        }
+      },
+    }))(),
+  });
+
+  comp._setOpen = (b=false) => {
+    comp.internalComponent.state.open = b;
+    if (b) {
+      GUI.closeContent();
+    }
+  };
+
+  return comp;
+}
\ No newline at end of file
diff --git a/src/components/g3w-wms.js b/src/components/g3w-wms.js
new file mode 100644
index 000000000..7112300a3
--- /dev/null
+++ b/src/components/g3w-wms.js
@@ -0,0 +1,49 @@
+/**
+ * @file
+ * @since 3.10.0
+ */
+
+import Component                         from 'core/g3w-component';
+import GUI                               from 'services/gui';
+
+import * as vueComp                      from 'components/WMS.vue';
+
+/**
+ * ORIGINAL SOURCE:
+ * - src/app/gui/wms/vue/wms.js@v3.9.3
+ * - src/app/gui/wms/service.js@3.8.15
+ */
+export default function(opts = {}) {
+
+  const comp = new Component({
+    ...opts,
+    title: 'WMS',
+    service: {},
+    internalComponent: new (Vue.extend(vueComp))({ wmsurls: opts.wmsurls }),
+  });
+
+  const service             = comp.getService();
+  const internalComponent   = comp.getInternalComponent();
+
+  comp._setOpen = (b = false) => {
+    internalComponent.state.open = b;
+    if (b) {
+      GUI.closeContent();
+    }
+  };
+
+  // BACKCOMP v3.x
+  service.state              = internalComponent.state;
+  service.addNewUrl          = internalComponent.addNewUrl;
+  service.deleteWmsUrl       = internalComponent.deleteWmsUrl;
+  service.showWmsLayersPanel = internalComponent._showWmsLayersPanel;
+  service.addWMSlayer        = internalComponent.addWMSlayer;
+  service.getWMSLayers       = internalComponent.getWMSLayers;
+  service.deleteWms          = internalComponent.deleteWms;
+  service.clear              = internalComponent.clear;
+  service.changeLayerData    = internalComponent.changeLayerData;
+  service.getLocalWMSData    = internalComponent.getLocalWMSData;
+  service.updateLocalWMSData = internalComponent.updateLocalWMSData;
+
+  return comp;
+}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 73d76c798..8c347a7df 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,119 +1,108 @@
-import App from './App.vue';
-import C3XYLine from './C3XYLine.vue';
-import Catalog from './Catalog.vue';
-import CatalogChangeMapThemes from './CatalogChangeMapThemes.vue';
-import CatalogLayerContextMenu from './CatalogLayerContextMenu.vue';
-import CatalogProjectContextMenu from './CatalogProjectContextMenu.vue';
-import CatalogLayerLegend from './CatalogLayerLegend.vue';
-import CatalogLayersGroup from './CatalogLayersGroup.vue';
-import CatalogLayersLegendItems from './CatalogLayersLegendItems.vue';
-import CatalogTristateTree from './CatalogTristateTree.vue';
-import Field from './Field.vue';
-import FieldG3W from './FieldG3W.vue';
-import FieldGallery from './FieldGallery.vue';
-import FieldGeo from './FieldGeo.vue';
-import FieldImage from './FieldImage.vue';
-import FieldLink from './FieldLink.vue';
-import FieldMedia from './FieldMedia.vue';
-import FieldText from './FieldText.vue';
-import FieldVue from './FieldVue.vue';
-import Form from './Form.vue';
-import FormAddon from './FormAddon.vue';
-import FormAddons from './FormAddons.vue';
-import FormBody from './FormBody.vue';
-import FormFooter from './FormFooter.vue';
-import FormHeader from './FormHeader.vue';
-import GlobalHelpDiv from './GlobalHelpDiv.vue';
-import GlobalBarLoader from './GlobalBarLoader.vue';
-import GlobalDateTime from './GlobalDateTime.vue';
-import GlobalDivider from './GlobalDivider.vue';
-import GlobalGallery from './GlobalGallery.vue';
-import GlobalGeo from './GlobalGeo.vue';
-import GlobalImage from './GlobalImage.vue';
-import GlobalLayerPositions from './GlobalLayerPositions.vue';
-import GlobalProgressBar from './GlobalProgressBar.vue';
-import GlobalRange from './GlobalRange.vue';
-import GlobalResize from './GlobalResize.vue';
-import GlobalResizeIcon from './GlobalResizeIcon.vue';
-import GlobalSkeleton from './GlobalSkeleton.vue';
-import GlobalTabs from './GlobalTabs.vue';
-import GlobalTabsNode from './GlobalTabsNode.vue';
-import HeaderItem from './HeaderItem.vue';
-import InputCheckbox from './InputCheckbox.vue';
-import InputColor from './InputColor.vue';
-import InputDateTimePicker from './InputDateTimePicker.vue';
-import InputFloat from './InputFloat.vue';
-import InputG3W from './InputG3W.vue';
-import InputG3WFormInputs from './InputG3WFormInputs.vue';
-import InputInteger from './InputInteger.vue';
-import InputLonLat from './InputLonLat.vue';
-import InputMedia from './InputMedia.vue';
-import InputPickLayer from './InputPickLayer.vue';
-import InputRadio from './InputRadio.vue';
-import InputRange from './InputRange.vue';
-import InputSelect from './InputSelect.vue';
-import InputSliderRange from './InputSliderRange.vue';
-import InputTable from './InputTable.vue';
-import InputTableBody from './InputTableBody.vue';
-import InputTableHeader from './InputTableHeader.vue';
-import InputText from './InputText.vue';
-import InputTextArea from './InputTextArea.vue';
-import InputHtml from './InputTextHtml.vue';
-import InputUnique from './InputUnique.vue';
-import LayerOpacityPicker from './LayerOpacityPicker.vue';
-import Map from './Map.vue';
-import MapAddLayer from './MapAddLayer.vue';
-import MapControlButton from './MapControlButton.js';
-import MapControlGeocoding from './MapControlGeocoding.vue';
-import MapControlZoomHistory from './MapControlZoomHistory.vue';
-import MetadataLayer from './MetadataLayer.vue';
-import MetadataProject from './MetadataProject.vue';
-import MetadataProjectBBoxContent from './MetadataProjectBBoxContent.vue';
-import MetadataProjectContactsContent from './MetadataProjectContactsContent.vue';
-import MetadataProjectTabContent from './MetadataProjectTabContent.vue';
-import NotifyDownload from './NotifyDownload.vue';
-import NotifyOnline from './NotifyOnline.vue';
-import NotifyPlugins from './NotifyPlugins.vue';
-import Print from './Print.vue';
-import PrintFidAtlasValues from './PrintFidAtlasValues.vue';
-import PrintPage from './PrintPage.vue';
-import PrintSelectAtlasFieldValues from './PrintSelectAtlasFieldValues.vue';
-import ChangeMapMenu from "./ChangeMapMenu.vue";
-import ProjectsMenu from './ProjectsMenu.vue';
-import QueryBuilder from './QueryBuilder.vue';
-import QueryBuilderSearch from './QueryBuilderSearch.vue';
-import QueryResults from './QueryResults.vue';
-import QueryResultsAction from './QueryResultsAction.vue';
-import QueryResultsActionDownloadFormats from './QueryResultsActionDownloadFormats.vue';
-import QueryResultsActionInfoFormats from './QueryResultsActionInfoFormats.vue';
+import App                                         from './App.vue';
+import C3XYLine                                    from './C3XYLine.vue';
+import Catalog                                     from './Catalog.vue';
+import CatalogChangeMapThemes                      from './CatalogChangeMapThemes.vue';
+import CatalogLayerContextMenu                     from './CatalogLayerContextMenu.vue';
+import CatalogProjectContextMenu                   from './CatalogProjectContextMenu.vue';
+import CatalogLayerLegend                          from './CatalogLayerLegend.vue';
+import CatalogTristateTree                         from './CatalogTristateTree.vue';
+import Field                                       from './Field.vue';
+import FieldG3W                                    from './FieldG3W.vue';
+import FieldGallery                                from './FieldGallery.vue';
+import FieldGeo                                    from './FieldGeo.vue';
+import FieldImage                                  from './FieldImage.vue';
+import FieldLink                                   from './FieldLink.vue';
+import FieldMedia                                  from './FieldMedia.vue';
+import FieldText                                   from './FieldText.vue';
+import FieldVue                                    from './FieldVue.vue';
+import Form                                        from './Form.vue';
+import FormAddon                                   from './FormAddon.vue';
+import FormAddons                                  from './FormAddons.vue';
+import FormBody                                    from './FormBody.vue';
+import FormFooter                                  from './FormFooter.vue';
+import FormHeader                                  from './FormHeader.vue';
+import GlobalHelpDiv                               from './GlobalHelpDiv.vue';
+import GlobalBarLoader                             from './GlobalBarLoader.vue';
+import GlobalDateTime                              from './GlobalDateTime.vue';
+import GlobalDivider                               from './GlobalDivider.vue';
+import GlobalGallery                               from './GlobalGallery.vue';
+import GlobalGeo                                   from './GlobalGeo.vue';
+import GlobalImage                                 from './GlobalImage.vue';
+import GlobalLayerPositions                        from './GlobalLayerPositions.vue';
+import GlobalProgressBar                           from './GlobalProgressBar.vue';
+import GlobalRange                                 from './GlobalRange.vue';
+import GlobalResize                                from './GlobalResize.vue';
+import GlobalResizeIcon                            from './GlobalResizeIcon.vue';
+import GlobalSkeleton                              from './GlobalSkeleton.vue';
+import GlobalTabs                                  from './GlobalTabs.vue';
+import GlobalTabsNode                              from './GlobalTabsNode.vue';
+import HeaderItem                                  from './HeaderItem.vue';
+import InputCheckbox                               from './InputCheckbox.vue';
+import InputColor                                  from './InputColor.vue';
+import InputDateTimePicker                         from './InputDateTimePicker.vue';
+import InputFloat                                  from './InputFloat.vue';
+import InputG3W                                    from './InputG3W.vue';
+import InputG3WFormInputs                          from './InputG3WFormInputs.vue';
+import InputInteger                                from './InputInteger.vue';
+import InputLonLat                                 from './InputLonLat.vue';
+import InputMedia                                  from './InputMedia.vue';
+import InputPickLayer                              from './InputPickLayer.vue';
+import InputRadio                                  from './InputRadio.vue';
+import InputRange                                  from './InputRange.vue';
+import InputSelect                                 from './InputSelect.vue';
+import InputSliderRange                            from './InputSliderRange.vue';
+import InputTable                                  from './InputTable.vue';
+import InputTableBody                              from './InputTableBody.vue';
+import InputTableHeader                            from './InputTableHeader.vue';
+import InputText                                   from './InputText.vue';
+import InputTextArea                               from './InputTextArea.vue';
+import InputHtml                                   from './InputTextHtml.vue';
+import InputUnique                                 from './InputUnique.vue';
+import LayerOpacityPicker                          from './LayerOpacityPicker.vue';
+import Map                                         from './Map.vue';
+import MapAddLayer                                 from './MapAddLayer.vue';
+import MapControlButton                            from './MapControlButton.js';
+import MapControlGeocoding                         from './MapControlGeocoding.vue';
+import MapControlZoomHistory                       from './MapControlZoomHistory.vue';
+import MetadataLayer                               from './MetadataLayer.vue';
+import MetadataProject                             from './MetadataProject.vue';
+import MetadataProjectBBoxContent                  from './MetadataProjectBBoxContent.vue';
+import MetadataProjectContactsContent              from './MetadataProjectContactsContent.vue';
+import MetadataProjectTabContent                   from './MetadataProjectTabContent.vue';
+import NotifyDownload                              from './NotifyDownload.vue';
+import NotifyOnline                                from './NotifyOnline.vue';
+import NotifyPlugins                               from './NotifyPlugins.vue';
+import Print                                       from './Print.vue';
+import PrintPage                                   from './PrintPage.vue';
+import ChangeMapMenu                               from "./ChangeMapMenu.vue";
+import ProjectsMenu                                from './ProjectsMenu.vue';
+import QueryBuilder                                from './QueryBuilder.vue';
+import QueryResults                                from './QueryResults.vue';
+import QueryResultsAction                          from './QueryResultsAction.vue';
+import QueryResultsActionDownloadFormats           from './QueryResultsActionDownloadFormats.vue';
+import QueryResultsActionInfoFormats               from './QueryResultsActionInfoFormats.vue';
 import QueryResultsActionQueryPolygonCSVAttributes from './QueryResultsActionQueryPolygonCSVAttributes.vue';
-import QueryResultsActions from './QueryResultsActions.vue';
-import QueryResultsHeaderFeatureBody from './QueryResultsHeaderFeatureBody.vue';
-import QueryResultsAttributeFieldValue from './QueryResultsTableAttributeFieldValue.vue';
-import Relation from './Relation.vue';
-import Relations from './Relations.vue';
-import RelationsPage from './RelationsPage.vue';
-import Search from './Search.vue';
-import SearchPanel from './SearchPanel.vue';
-import SearchSelect2 from './SearchSelect2.vue';
-import Sidebar from './Sidebar.vue';
-import SidebarItem from './SidebarItem.vue';
-import SidebarItemAction from './SidebarItemAction.vue';
-import SpatialBookMarkGroup from './SpatialBookMarkGroup.vue';
-import SpatialBookMarkItem from './SpatialBookMarkItem.vue';
-import SpatialBookMarks from './SpatialBookMarks.vue';
-import StreetView from './StreetView.vue';
-import Table from './Table.vue';
-import TableBody from './TableBody.vue';
-import TableLink from './TableLink.vue';
-import TableSelectRow from './TableSelectRow.vue';
-import TableToolbar from './TableToolbar.vue';
-import Tool from './Tool.vue';
-import Tools from './Tools.vue';
-import UserMessage from './UserMessage.vue';
-import ViewportContentsViewer from './ViewportContentsViewer.vue';
-import WMS from './WMS.vue';
-import WMSLayersPanel from './WMSLayersPanel.vue';
+import QueryResultsActions                         from './QueryResultsActions.vue';
+import QueryResultsHeaderFeatureBody               from './QueryResultsHeaderFeatureBody.vue';
+import QueryResultsAttributeFieldValue             from './QueryResultsTableAttributeFieldValue.vue';
+import Relation                                    from './Relation.vue';
+import Relations                                   from './Relations.vue';
+import RelationsPage                               from './RelationsPage.vue';
+import Search                                      from './Search.vue';
+import SearchPanel                                 from './SearchPanel.vue';
+import Sidebar                                     from './Sidebar.vue';
+import SidebarItem                                 from './SidebarItem.vue';
+import SidebarItemAction                           from './SidebarItemAction.vue';
+import SpatialBookMarkGroup                        from './SpatialBookMarkGroup.vue';
+import SpatialBookMarkItem                         from './SpatialBookMarkItem.vue';
+import SpatialBookMarks                            from './SpatialBookMarks.vue';
+import StreetView                                  from './StreetView.vue';
+import Table                                       from './Table.vue';
+import TableToolbar                                from './TableToolbar.vue';
+import Tool                                        from './Tool.vue';
+import UserMessage                                 from './UserMessage.vue';
+import WMS                                         from './WMS.vue';
+import WMSLayersPanel                              from './WMSLayersPanel.vue';
 
 export {
   App,
@@ -126,8 +115,6 @@ export {
    */
   CatalogProjectContextMenu,
   CatalogLayerLegend,
-  CatalogLayersGroup,
-  CatalogLayersLegendItems,
   CatalogTristateTree,
   /**
    * @since 3.8.0
@@ -200,12 +187,9 @@ export {
   NotifyOnline,
   NotifyPlugins,
   Print,
-  PrintFidAtlasValues,
   PrintPage,
-  PrintSelectAtlasFieldValues,
   ProjectsMenu,
   QueryBuilder,
-  QueryBuilderSearch,
   QueryResults,
   QueryResultsAction,
   QueryResultsActionDownloadFormats,
@@ -219,7 +203,6 @@ export {
   RelationsPage,
   Search,
   SearchPanel,
-  SearchSelect2,
   Sidebar,
   SidebarItem,
   SidebarItemAction,
@@ -228,14 +211,9 @@ export {
   SpatialBookMarks,
   StreetView,
   Table,
-  TableBody,
-  TableLink,
-  TableSelectRow,
   TableToolbar,
   Tool,
-  Tools,
   UserMessage,
-  ViewportContentsViewer,
   WMS,
   WMSLayersPanel,
 };
diff --git a/src/directives/v-click-outside.js b/src/directives/v-click-outside.js
index 30c1d3f04..31bf1ff0f 100644
--- a/src/directives/v-click-outside.js
+++ b/src/directives/v-click-outside.js
@@ -6,7 +6,7 @@
 export default  {
   bind(el, binding, vnode) {
     this.event = (event) => {
-      // skip if clicked element is a child of element
+      // skip if a clicked element is a child of element
       if (el === event.target || el.contains(event.target)) {
         return;
       }
diff --git a/src/directives/v-disabled.js b/src/directives/v-disabled.js
index 2aec4e4a3..f08c6f442 100644
--- a/src/directives/v-disabled.js
+++ b/src/directives/v-disabled.js
@@ -6,6 +6,10 @@
 export default (el, binding) => {
   const className = 'g3w-disabled';
   if (binding.value) {
-    if (!el.classList.contains(className)) el.classList.add(className)
-  } else el.classList.remove(className);
+    if (!el.classList.contains(className)) {
+      el.classList.add(className)
+    }
+  } else {
+    el.classList.remove(className);
+  }
 };
\ No newline at end of file
diff --git a/src/directives/v-download.js b/src/directives/v-download.js
index 8b6fe65af..c23a118dc 100644
--- a/src/directives/v-download.js
+++ b/src/directives/v-download.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const attr = 'g3w-v-download-id';
diff --git a/src/directives/v-online.js b/src/directives/v-online.js
index c78016c28..5a8d7cef2 100644
--- a/src/directives/v-online.js
+++ b/src/directives/v-online.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const attr = 'g3w-v-offline-id';
diff --git a/src/directives/v-plugins.js b/src/directives/v-plugins.js
index 3c23060fb..8af1f620e 100644
--- a/src/directives/v-plugins.js
+++ b/src/directives/v-plugins.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const attr = 'g3w-v-plugins-id';
diff --git a/src/directives/v-t-html.js b/src/directives/v-t-html.js
index e40889ecc..c25933c75 100644
--- a/src/directives/v-t-html.js
+++ b/src/directives/v-t-html.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const { t } = require('core/i18n/i18n.service');
diff --git a/src/directives/v-t-placeholder.js b/src/directives/v-t-placeholder.js
index 54bc53e1f..22a059ee5 100644
--- a/src/directives/v-t-placeholder.js
+++ b/src/directives/v-t-placeholder.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const { t, tPlugin } = require('core/i18n/i18n.service');
diff --git a/src/directives/v-t-plugin.js b/src/directives/v-t-plugin.js
index aca4feda5..7024976fa 100644
--- a/src/directives/v-t-plugin.js
+++ b/src/directives/v-t-plugin.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const { tPlugin } = require('core/i18n/i18n.service');
diff --git a/src/directives/v-t-title.js b/src/directives/v-t-title.js
index c664a32c6..e37e8d688 100644
--- a/src/directives/v-t-title.js
+++ b/src/directives/v-t-title.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState   from 'store/application-state';
 import { watch, unwatch } from 'directives/utils';
 
 const { t, tPlugin } = require('core/i18n/i18n.service');
diff --git a/src/directives/v-t-tooltip.js b/src/directives/v-t-tooltip.js
index 738615b54..57cb17c43 100644
--- a/src/directives/v-t-tooltip.js
+++ b/src/directives/v-t-tooltip.js
@@ -3,7 +3,7 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState            from 'store/application-state';
 import { watch, unwatch, trigger } from 'directives/utils';
 
 const { t, tPlugin } = require('core/i18n/i18n.service');
@@ -21,7 +21,7 @@ export default {
       _el.setAttribute('data-container',"body");
       $(_el)
         .tooltip({ trigger : ApplicationState.ismobile ? 'click': 'hover', html: true })
-        // hide tooltip on mobile  after click
+        // hide tooltip on mobile after click
         .on('shown.bs.tooltip', () => { ApplicationState.ismobile && setTimeout(()=>$(_el).tooltip('hide'), 600) });
     }
     watch({
diff --git a/src/directives/v-t.js b/src/directives/v-t.js
index 10ccdad66..e39a44e06 100644
--- a/src/directives/v-t.js
+++ b/src/directives/v-t.js
@@ -3,8 +3,8 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
-import { watch, unwatch, trigger } from 'directives/utils';
+import ApplicationState   from 'store/application-state';
+import { watch, unwatch } from 'directives/utils';
 
 const { t } = require('core/i18n/i18n.service');
 
diff --git a/src/index.prod.js b/src/index.prod.js
index 8e5199876..7e6dbfae5 100644
--- a/src/index.prod.js
+++ b/src/index.prod.js
@@ -10,59 +10,60 @@ import './deprecated';
 import './globals';
 
 //import core
-import ApplicationState from 'store/application-state';
+import ApplicationState          from 'store/application-state';
+import ProjectsRegistry          from 'store/projects';
 
 //import services
-import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-import FloatbarService from "services/floatbar";
-import NavbarItemsService from 'services/navbaritems';
-import SidebarService from 'services/sidebar';
-import ViewportService from 'services/viewport';
+import ApplicationService        from 'services/application';
+import GUI                       from 'services/gui';
+import FloatbarService           from "services/floatbar";
+import NavbarItemsService        from 'services/navbaritems';
+import SidebarService            from 'services/sidebar';
+import ViewportService           from 'services/viewport';
 
 // import store
-import ComponentsRegistry from 'store/components';
+import ComponentsRegistry        from 'store/components';
 
 //components
-import App from 'components/App.vue';
-import ImageComponent from 'components/GlobalImage.vue';
-import GalleryImagesComponent from 'components/GlobalGallery.vue';
-import GeospatialComponet from 'components/GlobalGeo.vue';
-import Skeleton from 'components/GlobalSkeleton.vue';
-import BarLoader from 'components/GlobalBarLoader.vue';
-import Progressbar from 'components/GlobalProgressBar.vue';
-import HelpDiv from 'components/GlobalHelpDiv.vue';
-import Resize from 'components/GlobalResize.vue'
-import LayerPositions from 'components/GlobalLayerPositions.vue';
-import DateTime from 'components/GlobalDateTime.vue';
-import Range from 'components/GlobalRange.vue';
-import ResizeIcon from 'components/GlobalResizeIcon.vue';
-import Tabs from 'components/GlobalTabs.vue';
-import Divider from 'components/GlobalDivider.vue';
-import FloatbarComponent from "components/Floatbar.vue";
-import NavbaritemsLeftComponent from 'components/NavbaritemsLeft.vue';
+import App                       from 'components/App.vue';
+import ImageComponent            from 'components/GlobalImage.vue';
+import GalleryImagesComponent    from 'components/GlobalGallery.vue';
+import GeospatialComponet        from 'components/GlobalGeo.vue';
+import Skeleton                  from 'components/GlobalSkeleton.vue';
+import BarLoader                 from 'components/GlobalBarLoader.vue';
+import Progressbar               from 'components/GlobalProgressBar.vue';
+import HelpDiv                   from 'components/GlobalHelpDiv.vue';
+import Resize                    from 'components/GlobalResize.vue'
+import LayerPositions            from 'components/GlobalLayerPositions.vue';
+import DateTime                  from 'components/GlobalDateTime.vue';
+import Range                     from 'components/GlobalRange.vue';
+import ResizeIcon                from 'components/GlobalResizeIcon.vue';
+import Tabs                      from 'components/GlobalTabs.vue';
+import Divider                   from 'components/GlobalDivider.vue';
+import FloatbarComponent         from "components/Floatbar.vue";
+import NavbaritemsLeftComponent  from 'components/NavbaritemsLeft.vue';
 import NavbaritemsRightComponent from 'components/NavbaritemsRight.vue';
-import SidebarComponent from 'components/Sidebar.vue';
-import ViewportComponent from 'components/Viewport.vue';
+import SidebarComponent          from 'components/Sidebar.vue';
+import ViewportComponent         from 'components/Viewport.vue';
 
 //directives
-import vDisabled from 'directives/v-disabled';
-import vChecked from 'directives/v-checked';
-import vSelectedFirst from 'directives/v-selected-first';
-import vSelect2 from 'directives/v-select2';
-import vTToltip from 'directives/v-t-tooltip';
-import vTHtml from 'directives/v-t-html';
-import vTPlaceholder from 'directives/v-t-placeholder';
-import vTTitle from 'directives/v-t-title';
-import vT from "directives/v-t";
-import vTPlugin from 'directives/v-t-plugin';
-import vPlugins from 'directives/v-plugins';
-import vOnline from 'directives/v-online';
-import vDownload from 'directives/v-download';
-import vClickOutside from 'directives/v-click-outside'
+import vDisabled                 from 'directives/v-disabled';
+import vChecked                  from 'directives/v-checked';
+import vSelectedFirst            from 'directives/v-selected-first';
+import vSelect2                  from 'directives/v-select2';
+import vTToltip                  from 'directives/v-t-tooltip';
+import vTHtml                    from 'directives/v-t-html';
+import vTPlaceholder             from 'directives/v-t-placeholder';
+import vTTitle                   from 'directives/v-t-title';
+import vT                        from "directives/v-t";
+import vTPlugin                  from 'directives/v-t-plugin';
+import vPlugins                  from 'directives/v-plugins';
+import vOnline                   from 'directives/v-online';
+import vDownload                 from 'directives/v-download';
+import vClickOutside             from 'directives/v-click-outside'
 
 // constants
-import { FONT_AWESOME_ICONS } from 'app/constant';
+import { FONT_AWESOME_ICONS }    from 'app/constant';
 
 const { base, inherit, toRawType } = require('utils');
 const { t, tPlugin }               = require('core/i18n/i18n.service');
@@ -146,9 +147,11 @@ Vue.use({
           font: this.font
         }
       },
-      addFontClass({name, className}={}){
-        let added = this.font[name] === undefined;
-        if (added) this.font[name] = className;
+      addFontClass({ name, className } = {}) {
+        const added = undefined === this.font[name];
+        if (added) {
+          this.font[name] = className;
+        }
         return added;
       },
       /**
@@ -156,7 +159,7 @@ Vue.use({
        */
       getInfoString() {},
       getFontClass(type) {
-        return typeof this.font[type] !== "undefined" ? this.font[type] : '';
+        return undefined === this.font[type] ? '' : this.font[type];
       }
     };
     // include isMobile() method within all Vue instances
@@ -167,6 +170,22 @@ Vue.use({
         }
       }
     })
+
+    /** @since 3.10.0 remove _setUpTemplateDependencies method**/
+    GUI.isMobile = function() {
+      return isMobile.any;
+    };
+    // method that returns Template Info
+    GUI.getTemplateInfo = function() {
+      return Vue.prototype.g3wtemplate.getInfo();
+    };
+    GUI.getTemplateInfo = function() {
+      return Vue.prototype.g3wtemplate.getInfo();
+    };
+    GUI.getFontClass = function(type) {
+      return Vue.prototype.g3wtemplate.getFontClass(type);
+    };
+
   }
 }, {});
 
@@ -183,7 +202,7 @@ layout.loading(true);
 /**
  * ORIGINAL SOURCE: src/gui/app/index.js@3.4
  */
-const ApplicationTemplate = function({ApplicationService}) {
+const ApplicationTemplate = function({ ApplicationService }) {
   const appLayoutConfig = ApplicationService.getConfig().layout || {};
   // useful to build a difference layout/component based on mobile or not
   this._isMobile = isMobile.any;
@@ -195,10 +214,10 @@ const ApplicationTemplate = function({ApplicationService}) {
     }
   };
   /*
-    usefull to show onaly last waiting request output
-    at moment will be an object
+    usefully to show only last waiting request output
+    at a moment will be an object
     {
-      stop: method to sot to show result
+      stop: method to sot to show a result
     }
    */
   this.waitingoutputdataplace = null;
@@ -208,18 +227,17 @@ const ApplicationTemplate = function({ApplicationService}) {
   };
   // create application config
   this._createTemplateConfig = function() {
-    const G3WTemplate = Vue.prototype.g3wtemplate;
-    const appTitle = ApplicationService.getConfig().apptitle || 'G3W Suite';
-    const ContentsComponent = require('gui/viewport/contentsviewer');
-    const CatalogComponent = require('gui/catalog/vue/catalog');
-    const SearchComponent = require('gui/search/vue/search');
-    const QueryBuilderUIFactory = require('gui/querybuilder/querybuilderuifactory');
-    const PrintComponent = require('gui/print/vue/print');
-    const MetadataComponent = require('gui/metadata/vue/metadata');
-    const ToolsComponent = require('gui/tools/vue/tools');
-    const WMSComponent = require('gui/wms/vue/wms');
-    const MapComponent = require('gui/map/vue/map');
-    const QueryResultsComponent = require('gui/queryresults/vue/queryresults');
+    const appTitle                  = ApplicationService.getConfig().apptitle || 'G3W Suite';
+    const ContentsComponent         = require('gui/viewport/contentsviewer');
+    const CatalogComponent          = require('gui/catalog/vue/catalog');
+    const SearchComponent           = require('gui/search/vue/search');
+    const QueryBuilderUIFactory     = require('gui/querybuilder/querybuilderuifactory');
+    const PrintComponent            = require('gui/print/vue/print');
+    const MetadataComponent         = require('gui/metadata/vue/metadata');
+    const ToolsComponent            = require('gui/tools/vue/tools');
+    const WMSComponent              = require('gui/wms/vue/wms');
+    const MapComponent              = require('gui/map/vue/map');
+    const QueryResultsComponent     = require('gui/queryresults/vue/queryresults');
     const SpatialBookMarksComponent = require('gui/spatialbookmarks/vue/spatialbookmarks');
     return {
       title: appTitle,
@@ -230,100 +248,88 @@ const ApplicationTemplate = function({ApplicationService}) {
         sidebar: {
           components: [
             new MetadataComponent({
-              id: 'metadata',
-              open: false,
+              id:          'metadata',
+              open:        false,
               collapsible: false,
-              icon: G3WTemplate.getFontClass('file'),
-              mobile: true
+              icon:        GUI.getFontClass('file'),
+              mobile:      true,
             }),
             new SpatialBookMarksComponent({
-              id: 'spatialbookmarks',
-              open: false,
+              id:          'spatialbookmarks',
+              open:        false,
               collapsible: true,
-              icon: G3WTemplate.getFontClass('bookmark'),
-              mobile: true
+              icon:        GUI.getFontClass('bookmark'),
+              mobile:      true,
             }),
             new PrintComponent({
-              id: 'print',
-              open: false,
-              collapsible: true, //  it used to manage click event if can run setOpen component method
-              icon: G3WTemplate.getFontClass('print'),
-              mobile: false
+              id:          'print',
+              open:        false,
+              visible:     (ProjectsRegistry.getCurrentProject().getPrint() || []).length > 0, /** @since 3.10.0 Check if the project has print layout*/
+              collapsible: true, //  it used to manage click event if you can run setOpen component method
+              icon:        GUI.getFontClass('print'),
+              mobile:      false,
             }),
             new SearchComponent({
-              id: 'search',
-              open: false,
+              id:         'search',
+              open:        false,
               collapsible: true,
-              icon: G3WTemplate.getFontClass('search'),
-              actions: [{
-                id:"querybuilder",
-                class: `${G3WTemplate.getFontClass('calculator')} sidebar-button sidebar-button-icon`,
-                tooltip: 'Query Builder',
-                fnc:() => {
-                  GUI.closeContent();
-                  ApplicationTemplate.Services.sidebar.closeOpenComponents();
-                  QueryBuilderUIFactory.show({
-                    type: 'sidebar' // sidebar or modal
-                  });
-                },
-                style: {
-                  color: '#8DC3E3',
-                  padding: '6px',
-                  fontSize: '1.2em',
-                  borderRadius: '3px',
-                  marginRight: '5px'
-                }
+              icon:        GUI.getFontClass('search'),
+              actions:     [
+                {
+                  id:      "querybuilder",
+                  class:   `${GUI.getFontClass('calculator')} sidebar-button sidebar-button-icon`,
+                  tooltip: 'Query Builder',
+                  fnc:     () => {
+                    GUI.closeContent();
+                    ApplicationTemplate.Services.sidebar.closeOpenComponents();
+                    QueryBuilderUIFactory.show({ type: 'sidebar' });  // sidebar or modal
+                  },
+                  style: {
+                    color:        '#8DC3E3',
+                    padding:      '6px',
+                    fontSize:     '1.2em',
+                    borderRadius: '3px',
+                    marginRight:  '5px'
+                  }
               }],
-              mobile: true
+              mobile: true,
             }),
             // Component that store plugins
             new ToolsComponent({
-              id: 'tools',
-              open: false,
+              id:          'tools',
+              open:        false,
               collapsible: true,
-              icon: G3WTemplate.getFontClass('tools'),
-              mobile: true
+              icon:        GUI.getFontClass('tools'),
+              mobile:      true,
             }),
             new WMSComponent({
-              id: 'wms',
-              open: false,
+              id:          'wms',
+              open:        false,
               collapsible: true,
-              icon: G3WTemplate.getFontClass('layers'),
-              mobile: true
+              icon:        GUI.getFontClass('layers'),
+              mobile:      true,
             }),
             new CatalogComponent({
               id: 'catalog',
               open: false,
               collapsible: false,
-              isolate: true,
-              icon: G3WTemplate.getFontClass('map'),
-              mobile: true,
-              config: {
-                legend: {
-                  config: appLayoutConfig.legend
-                },
-              }
+              isolate:     true,
+              icon:        GUI.getFontClass('map'),
+              mobile:      true,
+              config:      { legend: { config: appLayoutConfig.legend } },
             }),
           ]
         },
-        floatbar:{
-          components: []
-        }
+        floatbar: { components: [] }
       },
       othercomponents: [
-        new QueryResultsComponent({
-          id: 'queryresults'
-        })
+        new QueryResultsComponent({ id: 'queryresults' })
       ],
       viewport: {
         // placeholder of the content (view content). Secondary view (hidden)
         components: {
-          map: new MapComponent({
-            id: 'map'
-          }),
-          content: new ContentsComponent({
-            id: 'contents'
-          })
+          map:     new MapComponent({ id: 'map' }),
+          content: new ContentsComponent({ id: 'contents' })
         }
       }
     }
@@ -333,28 +339,27 @@ const ApplicationTemplate = function({ApplicationService}) {
   this._createApp = function() {
     this._setDataTableLanguage();
     const self = this;
-    if (isMobile.any || this._isIframe) $('body').addClass('sidebar-collapse');
+    if (isMobile.any || this._isIframe) {
+      $('body').addClass('sidebar-collapse');
+    }
     return new Vue({
       el: '#app',
       created() {
-        // set general metods for the application as  GUI.showForm etc ..
+        // set general methods for the application as GUI.showForm etc ..
         self._setupInterface();
         // setup layout
         self._setupLayout();
-        //register all services fro the application
+        //register all services for the application
         self._setUpServices();
         // create templateConfig
         self.templateConfig = self._createTemplateConfig();
         // listen lng change and reset datatable language
-        this.$watch(()=> ApplicationState.language, ()=>{
-          self._setDataTableLanguage();
-        });
+        this.$watch(() => ApplicationState.language, () => self._setDataTableLanguage());
       },
       async mounted() {
         await this.$nextTick();
         self._buildTemplate();
         // setup Font, Css class methods
-        self._setUpTemplateDependencies(this);
         $(document).localize();
         self._setViewport(self.templateConfig.viewport);
         const skinColor = $('.navbar').css('background-color');
@@ -409,17 +414,15 @@ const ApplicationTemplate = function({ApplicationService}) {
     !dataTable ? $.extend( true, $.fn.dataTable.defaults, languageOptions) : dataTable.dataTable( {"oLanguage": languageOptions});
   };
 
-  // route setting att beginning (is an example)
+  // route setting at the beginning (is an example)
   this._addRoutes = function() {
-    const RouterService = ApplicationService.getRouterService();
-    const mapService = GUI.getComponent('map').getService();
-    RouterService.addRoute('map/zoomto/{coordinate}/:zoom:', function(coordinate, zoom) {
+    ApplicationService.getRouterService().addRoute('map/zoomto/{coordinate}/:zoom:', function(coordinate, zoom) {
       coordinate = _.map(coordinate.split(','), function(xy) {
         return Number(xy)
       });
       zoom = zoom ? Number(zoom): null;
       if (coordinate.length) {
-        mapService.on('ready', function() {
+        GUI.getService('map').on('ready', function() {
           this.zoomTo(coordinate, zoom);
         })
       }
@@ -428,29 +431,29 @@ const ApplicationTemplate = function({ApplicationService}) {
 
   //register all services
   this._setUpServices = function() {
-    Object.keys(ApplicationTemplate.Services).forEach(element => {
-      const service = ApplicationTemplate.Services[element];
-      ApplicationService.registerService(element, service);
-    });
-    Object.values(GUI.getComponents()).forEach(component => {
-      ApplicationService.registerService(component.id, component.getService());
-    });
-    ApplicationTemplate.Services.viewport.on('resize', ()=>GUI.emit('resize'));
+    Object
+      .keys(ApplicationTemplate.Services)
+      .forEach(element => ApplicationService.registerService(element, ApplicationTemplate.Services[element]));
+
+    Object
+      .values(GUI.getComponents())
+      .forEach(component => ApplicationService.registerService(component.id, component.getService()));
+
+    ApplicationTemplate.Services.viewport.on('resize', () => GUI.emit('resize'));
   };
   // build template function
   this._buildTemplate = function() {
     FloatbarService.init(layout);
-    const placeholdersConfig = this.templateConfig.placeholders;
-    Object.entries(placeholdersConfig).forEach(([placeholder, options]) => {
-      this._addComponents(options.components, placeholder);
-    });
-    //register other compoents
+    Object
+      .entries(this.templateConfig.placeholders)
+      .forEach(([placeholder, options]) => this._addComponents(options.components, placeholder));
+    //register other components
     this._addOtherComponents();
   };
 
   //add component not related to placeholder
   this._addOtherComponents = function() {
-    if (this.templateConfig.othercomponents) this._addComponents(this.templateConfig.othercomponents);
+    if (this.templateConfig.othercomponents) { this._addComponents(this.templateConfig.othercomponents) }
   };
   // viewport setting
   this._setViewport = function(viewportOptions) {
@@ -485,7 +488,9 @@ const ApplicationTemplate = function({ApplicationService}) {
     let register = true;
     if (placeholder && ApplicationTemplate.PLACEHOLDERS.indexOf(placeholder) > -1) {
       const placeholderService = ApplicationTemplate.Services[placeholder];
-      if (placeholderService) register = placeholderService.addComponents(components, options);
+      if (placeholderService) {
+        register = placeholderService.addComponents(components, options);
+      }
     }
     Object.entries(components).forEach(([key, component])=> {
       if (register) {
@@ -496,14 +501,15 @@ const ApplicationTemplate = function({ApplicationService}) {
   };
 
   this._removeComponent = function(componentId, placeholder, options) {
-    const component = ComponentsRegistry.unregisterComponent(componentId);
-    placeholder && ApplicationTemplate.Services[placeholder] && ApplicationTemplate.Services[placeholder].removeComponent(component, options);
+    if (placeholder && ApplicationTemplate.Services[placeholder]) {
+      ApplicationTemplate.Services[placeholder].removeComponent(ComponentsRegistry.unregisterComponent(componentId), options);
+    }
   };
 
   this._showModalOverlay = function(bool=false, message) {
     const mapService = GUI.getService('map');
-    if (bool) mapService.startDrawGreyCover(message);
-    else mapService.stopDrawGreyCover();
+    if (bool) { mapService.startDrawGreyCover(message) }
+    else { mapService.stopDrawGreyCover() }
   };
 
   this._isSidebarVisible = function() {
@@ -520,23 +526,6 @@ const ApplicationTemplate = function({ApplicationService}) {
     $('body').addClass('sidebar-collapse')
   };
 
-  // setup Fonts Css dependencies methods
-  this._setUpTemplateDependencies = function(VueApp) {
-    GUI.isMobile = function() {
-      return isMobile.any;
-    };
-    // method that return Template Info
-    GUI.getTemplateInfo = function() {
-      return VueApp.g3wtemplate.getInfo();
-    };
-    GUI.getTemplateInfo = function() {
-      return VueApp.g3wtemplate.getInfo();
-    };
-    GUI.getFontClass = function(type) {
-      return VueApp.g3wtemplate.getFontClass(type);
-    };
-  };
-
   /**
    * Convert error to user message showed
    * @param error
@@ -551,11 +540,11 @@ const ApplicationTemplate = function({ApplicationService}) {
       case 'Object':
         if (error.responseJSON) {
           error = error.responseJSON;
-          if (error.result === false){
-            const {code='', data='', message:msg=''} = error.error;
+          if (error.result === false) {
+            const { code='', data='', message:msg='' } = error.error;
             message = `${code.toUpperCase()} ${data} ${msg}`;
           }
-        } else if (error.responseText){
+        } else if (error.responseText) {
           message = error.responseText;
         }
         break;
@@ -571,41 +560,40 @@ const ApplicationTemplate = function({ApplicationService}) {
 
   // setup Interaces
   this._setupInterface = function() {
-    /* PLUBLIC INTERFACE */
+    /* PUBLIC INTERFACE */
 
     /* Common methods */
     GUI.layout = layout;
-    GUI.getSize = ({element, what}) => {
+    GUI.getSize = ({ element, what }) => {
       if (element && what)
         return this.sizes[element][what];
     };
 
-    GUI.addComponent = this._addComponent.bind(this);
+    GUI.addComponent    = this._addComponent.bind(this);
     GUI.removeComponent = this._removeComponent.bind(this);
 
     /* Metodos to define */
-    GUI.getResourcesUrl = ()=>ApplicationService.getConfig().resourcesurl;
+    GUI.getResourcesUrl = () => ApplicationService.getConfig().resourcesurl;
 
     //LIST
-    GUI.showList = FloatbarService.showPanel.bind(FloatbarService);
-    GUI.closeList = FloatbarService.closePanel.bind(FloatbarService);
-    GUI.hideList = FloatbarService.hidePanel.bind(FloatbarService);
+    GUI.showList        = FloatbarService.showPanel.bind(FloatbarService);
+    GUI.closeList       = FloatbarService.closePanel.bind(FloatbarService);
+    GUI.hideList        = FloatbarService.hidePanel.bind(FloatbarService);
 
     // TABLE
-    GUI.showTable = function() {};
-    GUI.closeTable = function() {};
+    GUI.showTable       = function() {};
+    GUI.closeTable      = function() {};
 
-    //Function called from DataRouterservice for gui output
     /**
-     *
-     * @param data
+     * Function called from DataRouterservice for gui output
+     * @param dataPromise
      * @param options
      */
-    GUI.outputDataPlace = async function(dataPromise, options={}){
+    GUI.outputDataPlace = async function(dataPromise, options = {}) {
       // show parameter it used to set condition to show result or not
       // loading parameter is used to show result content when we are wait the response. Default true otherwise we shoe result content at the end
-      const defaultOutputConfig = {condition:true, add:false, loading:true};
-      const {title='', show=defaultOutputConfig, before, after} = options;
+      const defaultOutputConfig = { condition:true, add:false, loading:true };
+      const { title='', show=defaultOutputConfig, before, after } = options;
       // convert show in an object
       const outputConfig = (toRawType(show) !== 'Object') ?
         {
@@ -619,7 +607,7 @@ const ApplicationTemplate = function({ApplicationService}) {
       const {condition, add, loading} = outputConfig;
       //check if waiting output data
       // in case we stop and substiute with new request data
-      this.waitingoutputdataplace && await this.waitingoutputdataplace.stop();
+      if (this.waitingoutputdataplace) { await this.waitingoutputdataplace.stop() }
       let queryResultsService = add ? GUI.getService('queryresults'): loading && this.showContentFactory('query')(title);
       this.waitingoutputdataplace = (() => {
         let stop = false;
@@ -629,11 +617,13 @@ const ApplicationTemplate = function({ApplicationService}) {
             //if set before call method and wait
             before && await before(data);
             // in case of usermessage show user message
-            data.usermessage && GUI.showUserMessage({
-              type: data.usermessage.type,
-              message: data.usermessage.message,
-              autoclose: data.usermessage.autoclose
-            });
+            if (data.usermessage) {
+              GUI.showUserMessage({
+                type:      data.usermessage.type,
+                message:   data.usermessage.message,
+                autoclose: data.usermessage.autoclose
+              });
+            }
             if (!stop) {
               // check condition
               const showResult = (toRawType(condition) === 'Function') ? condition(data) : (toRawType(condition) === 'Boolean') ? condition : true;
@@ -642,26 +632,23 @@ const ApplicationTemplate = function({ApplicationService}) {
                   add
                 });
               }
-              else GUI.closeContent();
+              else  { GUI.closeContent() }
               // call after is set with data
-              after && after(data);
+              if (after) { after(data) }
             }
-          } catch(error) {
-            const message = this.errorToMessage(error);
+          } catch(e) {
             this.showUserMessage({
-              type: 'alert',
-              message,
+              type:        'alert',
+              message:     this.errorToMessage(e),
               textMessage: true
             });
             this.closeContent();
           } finally {
-            if (!stop) this.waitingoutputdataplace = null;
+            if (!stop) { this.waitingoutputdataplace = null }
           }
         })();
         return {
-          stop: async ()=> {
-            stop = true;
-          }
+          stop: async () => stop = true
         }
       })();
     };
@@ -679,22 +666,22 @@ const ApplicationTemplate = function({ApplicationService}) {
       return showPanelContent;
     };
 
-    GUI.showForm = function(options={}) {
-      const {perc, split='h', push, showgoback, crumb} = options;
+    GUI.showForm = function(options = {}) {
+      const { perc, split = 'h', push, showgoback, crumb } = options;
       const FormComponent = require('gui/form/vue/form');
       // new isnstace every time
-      const formComponent = options.formComponent ? new options.formComponent(options) :  new FormComponent(options);
+      const formComponent = options.formComponent ? new options.formComponent(options) : new FormComponent(options);
       //get service
       const formService = formComponent.getService();
       // parameters : [content, title, push, perc, split, closable, crumb]
       GUI.setContent({
         perc,
-        content: formComponent,
+        content:    formComponent,
         split,
         crumb,
-        push: !!push, //only one( if other delete previous component)
+        push:       !!push, //only one (if other deletes previous component)
         showgoback: !!showgoback,
-        closable: false
+        closable:   false
       });
       // return service
       return formService;
@@ -704,15 +691,16 @@ const ApplicationTemplate = function({ApplicationService}) {
      *
      * @param pop remove or not content or pop
      */
-    GUI.closeForm = function({pop=false}={}) {
+    GUI.closeForm = function({ pop = false } = {}) {
       this.emit('closeform', false);
-      pop ? GUI.popContent() : ViewportService.removeContent();
+      if (pop) { GUI.popContent()}
+      else { ViewportService.removeContent() }
       // force set modal to false
       GUI.setModal(false);
     };
 
     GUI.disableElement = function({element, disable}) {
-      disable && $(element).addClass('g3w-disabled') || $(element).removeClass('g3w-disabled');
+      $(element)[disable ? 'addClass' : 'removeClass']('g3w-disabled');
     };
 
     GUI.disableContent = function(disable) {
@@ -736,28 +724,26 @@ const ApplicationTemplate = function({ApplicationService}) {
       return ViewportService.closeContent();
     };
 
-    GUI.closeOpenSideBarComponent = function(){
+    GUI.closeOpenSideBarComponent = function() {
       ApplicationTemplate.Services.sidebar.closeOpenComponents();
     };
 
     // show results info/search
     GUI.showQueryResults = function(title, results) {
       const queryResultsComponent = GUI.getComponent('queryresults');
-      const queryResultService = queryResultsComponent.getService();
+      const queryResultService    = queryResultsComponent.getService();
       queryResultService.reset();
       if (results) {
         queryResultService.setQueryResponse(results);
       }
       GUI.showContextualContent({
-        content: queryResultsComponent,
-        title: "info.title",
-        crumb: {
-          title: "info.title",
-          trigger: null
-        },
-        push: GUI.getPushContent(),
+        content:    queryResultsComponent,
+        title:      "info.title",
+        crumb:      { title: "info.title", trigger: null },
+        push:       GUI.getPushContent(),
         post_title: title
       });
+
       return queryResultService;
     };
 
@@ -767,17 +753,17 @@ const ApplicationTemplate = function({ApplicationService}) {
 
     GUI.removeNavBarItem = function() {};
 
-    GUI.showPanel = SidebarService.showPanel.bind(SidebarService);
+    GUI.showPanel  = SidebarService.showPanel.bind(SidebarService);
 
     GUI.closePanel = SidebarService.closePanel.bind(SidebarService);
 
     ///
-    GUI.disableApplication = function(bool=false){
+    GUI.disableApplication = function(bool = false) {
       ApplicationService.disableApplication(bool);
     };
 
     //showusermessage
-    GUI.showUserMessage = function(options={}) {
+    GUI.showUserMessage = function(options = {}) {
       return ViewportService.showUserMessage(options);
     };
 
@@ -817,30 +803,30 @@ const ApplicationTemplate = function({ApplicationService}) {
       }
     };
 
-    // proxy  bootbox library
+    // proxy bootbox library
     GUI.dialog = bootbox;
 
     //modal dialog//
-    GUI.showModalDialog = function(options={}) {
+    GUI.showModalDialog = function(options = {}) {
       return GUI.dialog.dialog(options);
     };
 
     /* spinner */
-    GUI.showSpinner = function(options={}){
-      const container = options.container || 'body';
-      const id = options.id || 'loadspinner';
-      const where = options.where || 'prepend'; // append | prepend
-      const style = options.style || '';
+    GUI.showSpinner = function(options = {}) {
+      const container   = options.container || 'body';
+      const id          = options.id || 'loadspinner';
+      const where       = options.where || 'prepend'; // append | prepend
+      const style       = options.style || '';
       const transparent = options.transparent ? 'background-color: transparent' : '';
-      const center = options.center ? 'margin: auto' : '';
-      if (!$("#"+id).length) {
-        $(container)[where].call($(container),'<div id="'+id+'" class="spinner-wrapper '+style+'" style="'+transparent+'"><div class="spinner '+style+'" style="'+ center+'"></div></div>');
+      const center      = options.center ? 'margin: auto' : '';
+      if (!$(`#${id}`).length) {
+        $(container)[where].call($(container),`<div id="${id}" class="spinner-wrapper ${style}" style="${transparent}"><div class="spinner ${style}" style="${center}"></div></div>`);
       }
     };
 
     //hide spinner
-    GUI.hideSpinner = function(id='loadspinner'){
-      $("#"+id).remove();
+    GUI.hideSpinner = function(id = 'loadspinner') {
+      $(`#${id}`).remove();
     };
 
     /* end spinner*/
@@ -858,12 +844,12 @@ const ApplicationTemplate = function({ApplicationService}) {
     };
 
     // SIDEBAR //
-    GUI.showSidebar = this._showSidebar.bind(this);
-    GUI.hideSidebar = this._hideSidebar.bind(this);
+    GUI.showSidebar      = this._showSidebar.bind(this);
+    GUI.hideSidebar      = this._hideSidebar.bind(this);
     GUI.isSidebarVisible = this._isSidebarVisible.bind(this);
 
     // RELOAD COMPONENTS
-    GUI.reloadComponents = function(){
+    GUI.reloadComponents = function() {
       ApplicationTemplate.Services.sidebar.reloadComponents();
     };
 
@@ -877,7 +863,7 @@ const ApplicationTemplate = function({ApplicationService}) {
       $(element).modal(show ? 'show' : 'hide')
     };
 
-    GUI.disableSideBar = function(bool=true) {
+    GUI.disableSideBar = function(bool = true) {
       ApplicationState.gui.sidebar.disabled = bool;
     };
 
@@ -891,11 +877,8 @@ const ApplicationTemplate = function({ApplicationService}) {
       ViewportService.showMap();
     };
 
-    GUI.showContextualMap = function(perc=30, split) {
-      ViewportService.showContextualMap({
-        perc,
-        split
-      })
+    GUI.showContextualMap = function(perc = 30, split) {
+      ViewportService.showContextualMap({ perc, split });
     };
 
     GUI.setContextualMapComponent = function(mapComponent) {
@@ -907,7 +890,7 @@ const ApplicationTemplate = function({ApplicationService}) {
     };
 
     //  (100%) content
-    GUI.showContent = (options={}) => {
+    GUI.showContent = (options = {}) => {
       GUI.setLoadingContent(false);
       options.perc = this._isMobile ? 100 : options.perc;
       GUI.setContent(options);
@@ -921,10 +904,10 @@ const ApplicationTemplate = function({ApplicationService}) {
     };
 
     // add component to stack (append)
-    // Differences between pushContent and setContent are :
-    //  - push every componet is added, set is refreshed
+    // Differences between pushContent and setContent are:
+    //  - push every component is added, set is refreshed
     //  - pushContent has a new parameter (backonclose) when is clicked x
-    //  - the contentComponet is close all stack is closed
+    //  - the contentComponent is close all stacks are closed
     GUI.pushContent = (options = {}) => {
       options.perc = this._isMobile ? 100 : options.perc;
       options.push = true;
@@ -941,16 +924,16 @@ const ApplicationTemplate = function({ApplicationService}) {
     GUI.popContent = function() {
       ViewportService.popContent();
     };
-    //return number of component of stack
+    //return number of a component of stack
     GUI.getContentLength = function() {
       return ViewportService.contentLength();
     };
 
-    GUI.getCurrentContentTitle = function(){
+    GUI.getCurrentContentTitle = function() {
       return ViewportService.getCurrentContentTitle();
     };
 
-    GUI.getCurrentContentId = function(){
+    GUI.getCurrentContentId = function() {
       return ViewportService.getCurrentContentId();
     };
 
@@ -958,7 +941,7 @@ const ApplicationTemplate = function({ApplicationService}) {
      * change current content title
      * @param title
      */
-    GUI.changeCurrentContentTitle = function(title){
+    GUI.changeCurrentContentTitle = function(title) {
       ViewportService.changeCurrentContentTitle(title);
     };
 
@@ -973,19 +956,19 @@ const ApplicationTemplate = function({ApplicationService}) {
     /**
      * Method to get current content
      */
-    GUI.getCurrentContent = function(){
+    GUI.getCurrentContent = function() {
       return ViewportService.getCurrentContent();
     };
 
-    GUI.toggleFullViewContent = function(){
+    GUI.toggleFullViewContent = function() {
       ViewportService.toggleFullViewContent();
     };
 
-    GUI.resetToDefaultContentPercentage = function(){
+    GUI.resetToDefaultContentPercentage = function() {
       ViewportService.resetToDefaultContentPercentage();
     };
 
-    GUI.getProjectMenuDOM = function({projects, host, cbk}={}) {
+    GUI.getProjectMenuDOM = function({ projects = [], host, cbk } = {}) {
       const projectVueMenuComponent = new ProjectsMenuComponent({
         projects: projects && Array.isArray(projects) && projects,
         cbk,
@@ -994,12 +977,12 @@ const ApplicationTemplate = function({ApplicationService}) {
       return projectVueMenuComponent.$mount().$el;
     };
 
-    GUI.setCloseUserMessageBeforeSetContent = function(bool=true){
+    GUI.setCloseUserMessageBeforeSetContent = function(bool = true) {
       this._closeUserMessageBeforeSetContent = bool;
     };
 
     GUI._setContent = (options={}) => {
-      this._closeUserMessageBeforeSetContent && GUI.closeUserMessage();
+      if (this._closeUserMessageBeforeSetContent) { GUI.closeUserMessage() }
       options.content     = options.content || null;
       options.title       = options.title || "";
       options.push        = _.isBoolean(options.push) ? options.push : false;
@@ -1023,20 +1006,17 @@ const ApplicationTemplate = function({ApplicationService}) {
       return BootstrapVersionClasses
     };
 
-    GUI.getTemplateClass = function({element, type}) {
+    GUI.getTemplateClass = function({ element, type } = {}) {
       return BootstrapVersionClasses[element][type];
     };
 
     GUI.setLoadingContent = function(loading = false) {
       ApplicationTemplate.Services.viewport.setLoadingContent(loading);
-      return loading && new Promise((resolve)=>{
-        setTimeout(resolve, 200)
-      })
+      return loading && new Promise((resolve) => setTimeout(resolve, 200))
     };
 
     GUI.openProjectsMenu = function() {
-      const isProjectMenuComponent = GUI.getComponent('contents').getComponentById('projectsmenu');
-      if (isProjectMenuComponent) {
+      if (GUI.getComponent('contents').getComponentById('projectsmenu')) {
         GUI.closeContent();
         return;
       }
@@ -1047,8 +1027,8 @@ const ApplicationTemplate = function({ApplicationService}) {
       ApplicationTemplate.Services.sidebar.closeOpenComponents();
       GUI.setContent({
         content: new ProjectsMenuComponent(),
-        title: '',
-        perc: 100
+        title:   '',
+        perc:    100
       });
     };
 
@@ -1056,8 +1036,7 @@ const ApplicationTemplate = function({ApplicationService}) {
      * @since 3.8.0
      */
     GUI.openChangeMapMenu = function() {
-      const isChangeMapMenuComponent = GUI.getComponent('contents').getComponentById('changemapmenu');
-      if (isChangeMapMenuComponent) {
+      if (GUI.getComponent('contents').getComponentById('changemapmenu')) {
         GUI.closeContent();
         return;
       }
@@ -1091,8 +1070,8 @@ ApplicationTemplate.PLACEHOLDERS = [
 
 // service know by the applications (standard)
 ApplicationTemplate.Services = {
-  navbar: null,
-  sidebar: SidebarService,
+  navbar:   null,
+  sidebar:  SidebarService,
   viewport: ViewportService,
   floatbar: null
 };
@@ -1129,13 +1108,13 @@ ApplicationTemplate.fail = function({ error }) {
 ApplicationService.init()
   .then(() => {
     const app = new ApplicationTemplate({ ApplicationService });
-    app.on('ready', () =>  ApplicationService.postBootstrap());
+    app.on('ready', () => ApplicationService.postBootstrap());
     app.init();
   })
-  .catch(({ error=null, language }) => {
+  .catch(({ error = null, language }) => {
     if (error) {
-      if (error.responseJSON && error.responseJSON.error.data) error = error.responseJSON.error.data;
-      else if (error.statusText) error = error.statusText;
+      if (error.responseJSON && error.responseJSON.error.data) { error = error.responseJSON.error.data }
+      else if (error.statusText) { error = error.statusText }
     }
     console.error(error);
     ApplicationTemplate.fail({ error });
diff --git a/src/mixins/autocomplete.js b/src/mixins/autocomplete.js
index f370adfcb..966226ac3 100644
--- a/src/mixins/autocomplete.js
+++ b/src/mixins/autocomplete.js
@@ -7,7 +7,7 @@ import CatalogLayersStoresRegistry from 'store/catalog-layers';
 
 export default {
   methods: {
-    async autocompleteRequest({layerId, field, value}={}){
+    async autocompleteRequest({ layerId, field, value } = {}) {
       let data = [];
       const layer = CatalogLayersStoresRegistry.getLayerById(layerId);
       try {
@@ -15,11 +15,10 @@ export default {
           suggest: `${field}|${value}`,
           unique: field
         })
-      } catch(error) {}
-      return data.map(value => ({
-        id:value,
-        text:value
-      }))
+      } catch(e) {
+        console.warn(e);
+      }
+      return data.map(value => ({ id:value, text:value }))
     }
   }
 };
\ No newline at end of file
diff --git a/src/mixins/base-input.js b/src/mixins/base-input.js
index cda5af366..8f1be4a82 100644
--- a/src/mixins/base-input.js
+++ b/src/mixins/base-input.js
@@ -5,20 +5,20 @@
 
 export default {
   computed: {
-    tabIndex(){
+    tabIndex() {
       return this.editable ? 0 : -1;
     },
     notvalid() {
-      return this.state.validate.valid === false;
+      return false === this.state.validate.valid;
     },
     editable() {
       return this.state.editable;
     },
-    showhelpicon(){
+    showhelpicon() {
       return this.state.help && this.state.help.message.trim();
     },
-    disabled(){
-      return !this.editable || this.loadingState === 'loading' || this.loadingState === 'error';
+    disabled() {
+      return !this.editable || ['loading', 'error'].includes(this.loadingState);
     },
     loadingState() {
       return this.state.input.options.loading ? this.state.input.options.loading.state : null;
@@ -32,11 +32,11 @@ export default {
     setLoading(bool) {
       this.state.input.options.loading.state = bool ? 'loading' : 'ready';
     },
-    showHideHelp(){
+    showHideHelp() {
       this.state.help.visible = !this.state.help.visible
     },
-    // used to text input to listen mobile changes
-    mobileChange(event){
+    // used to text input to listen to mobile changes
+    mobileChange(event) {
       this.state.value = event.target.value;
       this.change();
     },
@@ -45,7 +45,9 @@ export default {
       this.service.setEmpty();
       this.service.setUpdate();
       // validate input if is required or need to be unique
-      if (this.state.validate.required || this.state.validate.unique) this.service.validate();
+      if (this.state.validate.required || this.state.validate.unique) {
+        this.service.validate();
+      }
       // emit change input
       this.$emit('changeinput', this.state);
     },
diff --git a/src/mixins/form-inputs.js b/src/mixins/form-inputs.js
index 014814e6d..0c55bf495 100644
--- a/src/mixins/form-inputs.js
+++ b/src/mixins/form-inputs.js
@@ -4,19 +4,19 @@
  */
 
 export default {
-  data(){
+  data() {
     return {
       valid: false
     }
   },
   methods: {
-    addToValidate(input){
+    addToValidate(input) {
       this.tovalidate.push(input);
     },
-    changeInput(input){
+    changeInput(input) {
       this.isValid(input)
     },
-    // Every input send to form it valid value that will change the genaral state of form
+    // Every input sends to form it valid value that will change the genaral state of form
     isValid(input) {
       if (input) {
         // check mutually
@@ -56,7 +56,9 @@ export default {
           input.validate.valid = input.validate.min_field ?
             this.tovalidate[input.validate.min_field].validate.empty || 1*input.value > 1*this.tovalidate[input.validate.min_field].value :
             this.tovalidate[input.validate.max_field].validate.empty || 1*input.value < 1*this.tovalidate[input.validate.max_field].value;
-          if (input.validate.valid) this.tovalidate[input_name].validate.valid = true
+          if (input.validate.valid) {
+            this.tovalidate[input_name].validate.valid = true
+          }
         }
       }
       this.valid = Object.values(this.tovalidate).reduce((previous, input) => {
diff --git a/src/mixins/geo.js b/src/mixins/geo.js
index 61bb4c1ca..12980ca44 100644
--- a/src/mixins/geo.js
+++ b/src/mixins/geo.js
@@ -14,7 +14,7 @@ export default {
   },
   created() {
     const data = this.data;
-    const mapService = GUI.getComponent('map').getService();
+    const mapService = GUI.getService('map');
     const mapProjection = mapService.getProjection().getCode();
     let style;
     switch (data.type) {
@@ -72,7 +72,6 @@ export default {
     mapService.getMap().addLayer(this.layer);
   },
   beforeDestroy() {
-    const mapService = GUI.getComponent('map').getService();
-    mapService.getMap().removeLayer(this.layer);
+    GUI.getService('map').getMap().removeLayer(this.layer);
   }
 };
\ No newline at end of file
diff --git a/src/mixins/media.js b/src/mixins/media.js
index 633f5e14c..75bd94ac0 100644
--- a/src/mixins/media.js
+++ b/src/mixins/media.js
@@ -11,7 +11,9 @@ export default {
   },
   methods: {
     isMedia(value) {
-      if (value && typeof  value === 'object' && value.constructor === Object) return !!value.mime_type;
+      if (value && typeof  value === 'object' && value.constructor === Object) {
+        return !!value.mime_type;
+      }
       return false;
     },
     getMediaType(mime_type) {
diff --git a/src/mixins/metadata.js b/src/mixins/metadata.js
index df4b86373..a162abdff 100644
--- a/src/mixins/metadata.js
+++ b/src/mixins/metadata.js
@@ -6,7 +6,7 @@
 export default {
   methods: {
     findAttributeFormMetadataAttribute(name) {
-      return this.state.metadata ? this.state.metadata[name] !== undefined : false;
+      return this.state.metadata ? undefined !== this.state.metadata[name] : false;
     },
     findMetadataAttribute(name) {
       return this.state[name] !== undefined;
diff --git a/src/mixins/resize.js b/src/mixins/resize.js
index 422622c6d..ef9611436 100644
--- a/src/mixins/resize.js
+++ b/src/mixins/resize.js
@@ -13,16 +13,16 @@ const DELAY_TYPE = {
 };
 
 export default {
-  created(){
+  created() {
     const delayWrapper = this.delayType && DELAY_TYPE[this.delayType] || DELAY_TYPE.throttle;
     this.delayResize = this.resize ? delayWrapper(this.resize.bind(this), this.delayTime): null;
     GUI.on('resize', this.delayResize);
   },
-  async mounted(){
+  async mounted() {
     await this.$nextTick();
-    this.resize && this.resize();
+    if (this.resize) { this.resize(); }
   },
-  beforeDestroy(){
+  beforeDestroy() {
     GUI.off('resize', this.delayResize);
     this.delayResize = null;
     this.delayTime = null;
diff --git a/src/services/api.js b/src/services/api.js
index da0db6c3a..772486464 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -4,51 +4,51 @@
  */
 
 const { base, inherit, reject } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject                 = require('core/g3wobject');
 
 // Class Api Service
-function ApiService(){
-  this._config = null;
+function ApiService() {
+  this._config  = null;
   this._baseUrl = null;
-  this.init = function(config={}) {
-    const d = $.Deferred();
-    this._config = config;
-    // prende l'url base delle api dal config dell'applicazione
-    this._baseUrl = config.urls.api;
+  this.init = function(config = {}) {
+    const d            = $.Deferred();
+    this._config       = config;
+    // get url from base api of application config
+    this._baseUrl      = config.urls.api;
     this._apiEndpoints = config.urls.apiEndpoints;
     d.resolve();
     return d.promise();
   };
   let howManyAreLoading = 0;
-  this._incrementLoaders = function(){
-    howManyAreLoading === 0 && this.emit('apiquerystart');
+  this._incrementLoaders = function() {
+    if (0 === howManyAreLoading) { this.emit('apiquerystart') }
     howManyAreLoading += 1;
   };
 
-  this._decrementLoaders = function(){
+  this._decrementLoaders = function() {
     howManyAreLoading -= 1;
-    howManyAreLoading === 0 && this.emit('apiqueryend');
+    if (0 === howManyAreLoading) { this.emit('apiqueryend') }
   };
+
   this.get = function(api, options) {
     const apiEndPoint = this._apiEndpoints[api];
     if (apiEndPoint) {
-      let completeUrl = this._baseUrl + '/' + apiEndPoint;
-      if (options.request) completeUrl = completeUrl + '/' + options.request;
-      const params = options.params || {};
-      this.emit(api+'querystart');
+      const url = `${this._baseUrl}/${apiEndPoint}${options.request ? `/${options.request}` : '' }`;
+      this.emit(`${api}querystart`);
       this._incrementLoaders();
-      return $.get(completeUrl,params)
+      return $.get(url, (options.params || {}))
       .done(response => {
-        this.emit(api+'queryend',response);
+        this.emit(`${api}queryend`, response);
         return response;
       })
-      .fail(error => {
-        this.emit(api+'queryfail', error);
-        return error;
+      .fail(e => {
+        this.emit(`${api}queryfail`, e);
+        return e;
       })
       .always(() => this._decrementLoaders());
+    } else {
+      return reject();
     }
-    else return reject();
   };
   base(this);
 }
diff --git a/src/services/application.js b/src/services/application.js
index 2793708f2..81c7d2a59 100644
--- a/src/services/application.js
+++ b/src/services/application.js
@@ -3,20 +3,25 @@
  * @since v3.6
  */
 
-import appConfig from 'config';
-import { TIMEOUT, APP_VERSION, LOCAL_ITEM_IDS, API_BASE_URLS } from 'app/constant';
-import ApplicationState from 'store/application-state';
+import appConfig         from 'config';
+import {
+  TIMEOUT,
+  APP_VERSION,
+  LOCAL_ITEM_IDS,
+  API_BASE_URLS
+}                        from 'app/constant';
+import ApplicationState  from 'store/application-state';
 import DataRouterService from 'services/data';
-import PluginsRegistry from 'store/plugins';
-import ProjectsRegistry from 'store/projects';
-import ApiService from 'services/api';
-import ClipboardService from 'services/clipboard';
-import RouterService from 'services/router';
-import GUI from 'services/gui';
+import PluginsRegistry   from 'store/plugins';
+import ProjectsRegistry  from 'store/projects';
+import ApiService        from 'services/api';
+import ClipboardService  from 'services/clipboard';
+import RouterService     from 'services/router';
+import GUI               from 'services/gui';
 
 const { init: i18ninit, changeLanguage } = require('core/i18n/i18n.service');
-const { base, inherit, XHR, uniqueId } = require('utils');
-const G3WObject = require('core/g3wobject');
+const { base, inherit, XHR, uniqueId }   = require('utils');
+const G3WObject                          = require('core/g3wobject');
 
 /** @deprecated */
 const _cloneDeep = require('lodash.clonedeep');
@@ -26,48 +31,48 @@ const _cloneDeep = require('lodash.clonedeep');
  */
 const ApplicationService = function() {
 
-  this.version = APP_VERSION;
+  this.version              = APP_VERSION;
 
-  ApplicationState.iframe = window.top !== window.self;
+  ApplicationState.iframe   = window.top !== window.self;
 
-  ApplicationState.online = navigator.onLine;
+  ApplicationState.online   = navigator.onLine;
 
-  ApplicationState.ismobile= isMobile.any;
+  ApplicationState.ismobile = isMobile.any;
 
-  this.complete = false;
+  this.complete             = false;
 
   /**
    * set base url
    */
-  this.baseurl = '/'; 
+  this.baseurl              = '/';
 
-  this.download_caller_id = null;
+  this.download_caller_id   = null;
 
   /**
    * store all services sidebar etc..
    */
   this._applicationServices = {};
 
-  this.config = {};
+  this.config               = {};
 
-  this._initConfigUrl = null;
+  this._initConfigUrl       = null;
 
-  this._initConfig = null;
+  this._initConfig          = null;
 
-  this._groupId = null;
+  this._groupId             = null;
 
-  this._gid = null;
+  this._gid                 = null;
 
   this.setters = {
 
-    changeProject({gid, host}={}) {
+    changeProject({ gid, host } = {}) {
       return this._changeProject({gid, host})
     },
 
     /**
      * @since 3.8.0
      */
-    changeMapProject({url, epsg}) {
+    changeMapProject({ url, epsg } = {}) {
       url = GUI.getService('map').addMapExtentUrlParameterToUrl(url, epsg);
       history.replaceState(null, null, url);
       location.replace(url);
@@ -106,7 +111,7 @@ const ApplicationService = function() {
       return await this.bootstrap();
     } catch(error) {
       const browserLanguage = navigator && navigator.language || 'en';
-      const language = appConfig.supportedLanguages.find(language => browserLanguage.indexOf(language) !== -1);
+      const language        = appConfig.supportedLanguages.find(language => browserLanguage.indexOf(language) !== -1);
       return Promise.reject({ error, language })
     }
   };
@@ -115,10 +120,9 @@ const ApplicationService = function() {
    * Load application translations (i18n languages)
    */
   this.setupI18n = function() {
-    const languageConfig = this._config._i18n;
-    languageConfig.appLanguages = this._config.i18n.map(languageLabel => languageLabel[0]);
-    this.setApplicationLanguage(languageConfig.language);
-    i18ninit(languageConfig);
+    this._config._i18n.appLanguages = (this._config.i18n || []).map(l => l[0]);
+    this.setApplicationLanguage(this._config._i18n.language);
+    i18ninit(this._config._i18n);
     this._groupId = this._config.group.slug || this._config.group.name.replace(/\s+/g, '-').toLowerCase();
     // set Accept-Language request header based on config language
     $.ajaxSetup({
@@ -134,29 +138,17 @@ const ApplicationService = function() {
   };
 
   /**
+   * Only one caller can set download application to true
    * @param {boolean} bool
-   * @param {string} download_caller_id
+   * @param {string | null} download_caller_id
    * 
-   * @returns {null}
+   * @returns {null | string}
    */
-  this.setDownload = function(bool=false, download_caller_id) {
-    const give_me_a_name_0 = !download_caller_id;
-    const give_me_a_name_1 = !bool && download_caller_id && this.download_caller_id === download_caller_id
-    const give_me_a_name_2 = !give_me_a_name_1 && download_caller_id && bool && this.download_caller_id === null;
-
-    if (give_me_a_name_0) {
-      ApplicationState.download = bool;
-    }
-
-    if (give_me_a_name_1) {
-      ApplicationState.download = false;
-      this.download_caller_id = null;
-    }
-
-    if (give_me_a_name_2) {
-      ApplicationState.download = bool;
-      this.download_caller_id = uniqueId();
-    }
+  this.setDownload = function(bool = false, download_caller_id = null) {
+    //set the current application download state
+    ApplicationState.download = bool;
+    //Set this.download caller id. If download_caller_id is provided, reset to null (start value)
+    this.download_caller_id = download_caller_id ? null : uniqueId();
 
     return this.download_caller_id;
   };
@@ -177,7 +169,7 @@ const ApplicationService = function() {
    */
   this.loadedPlugin = function(plugin) {
     //remove from list loading plugin
-    ApplicationState.plugins = ApplicationState.plugins.filter(_plugin => _plugin !== plugin);
+    ApplicationState.plugins = ApplicationState.plugins.filter(p => plugin !== p);
   };
 
   /**
@@ -199,10 +191,11 @@ const ApplicationService = function() {
     /**
      * @deprecated Since v3.8. Will be deleted in v4.x. Use ApplicationState.language instead
      */
-    ApplicationState.lng = language;
+    ApplicationState.lng      = language;
     ApplicationState.language = language;
-    const pathArray = window.location.pathname.split('/');
-    pathArray[1] = language;
+    const pathArray           = window.location.pathname.split('/');
+    pathArray[1]              = language;
+
     history.replaceState(null, null, pathArray.join('/'));
   };
 
@@ -245,18 +238,18 @@ const ApplicationService = function() {
   /**
    * @FIXME weird parameter name (`bool`)
    */
-  this.disableApplication = function(bool=false) {
+  this.disableApplication = function(bool = false) {
     ApplicationState.gui.app.disabled = bool;
   };
 
   /**
    * @param {string} language 
    */
-  this.setApplicationLanguage = function(language='en') {
+  this.setApplicationLanguage = function(language = 'en') {
     /**
      * @deprecated Since v3.8. Will be deleted in v4.x. Use ApplicationState.language instead
      */
-    ApplicationState.lng = language;
+    ApplicationState.lng      = language;
     ApplicationState.language = language;
   };
 
@@ -280,13 +273,13 @@ const ApplicationService = function() {
    * @param {string} id 
    * @param {Object} data 
    */
-  this.setOfflineItem = async function(id, data={}) {
+  this.setOfflineItem = async function(id, data = {}) {
     this.setLocalItem({ id, data });
   };
 
-  this.setLocalItem = function({id, data}={}) {
+  this.setLocalItem = function({ id, data } = {}) {
     try { window.localStorage.setItem(id, JSON.stringify(data)); }
-    catch(error) { return error; }
+    catch(e) { console.warn(e); return e; }
   };
 
   /**
@@ -335,7 +328,7 @@ const ApplicationService = function() {
   /**
    * @param {Object} config 
    */
-  this.setConfig = function(config={}) {
+  this.setConfig = function(config = {}) {
     this._config = config;
   };
 
@@ -368,7 +361,7 @@ const ApplicationService = function() {
   };
 
   /**
-   * Create application config object
+   * Create an application config object
    * @param initConfig
    * @returns {Promise<string|{terms_of_use_link, projects: ([{gid: string, layers: [{qgs_layer_id: string, fields: [string, string, string]}], type: string}, {gid: string, layers: [{qgs_layer_id: string, fields: [string, string, string]}, {qgs_layer_id: string, fields: [string]}, {qgs_layer_id: string, fields: [string]}], type: string}, {gid: string, layers: [{qgs_layer_id: string, fields: [string, string, string]}, {qgs_layer_id: string, fields: [string]}], type: string}]|{gid: string, layers: [{qgs_layer_id: string, fields: [string, string, string]}], type: string}|[]), maxscale: (null|ProjectsRegistry.setProjects.config.maxscale), mediaurl: *, plugins: *, mapcontrols: *, tools: *, resourcesurl: *, initproject, urls: *, credits: *, getWmsUrl(*): string, _i18n: ({resources: {se: {translation: {cancel: string, no: string, error_map_loading: string, data: string, catalog: string, legend: string, copy_form_data: string, check_internet_connection_or_server_admin: string, show: string, save: string, back: string, server_error: string, mapcontrols: {area: {tooltip: string}, nominatim: {noresults: string, placeholder: string, notresponseserver: string}, add_layer_control: {select_csv_separator: string, select_csv_y_field: string, select_field_to_show: string, select_projection: string, header: string, select_color: string, select_csv_x_field: string, drag_layer: string}, query: {input_relation: string}, length: {tooltip: string}, screenshot: {error: string}, geolocations: {error: string}}, no_results: string, tools: string, changemap: string, default: string, logout: string, search: string, copy_form_data_from_feature: string, credits: {g3wSuiteFramework: string, productOf: string, g3wSuiteDescription: string}, sidebar: {}, close: string, exitnosave: string, sign_in: string, info: {link_button: string, open_link: string, server_error: string, title: string, no_results: string}, add: string, backto: string, yes: string, create_print: string, server_saver_error: string, tree: string, paste_form_data: string, no_other_projects: string, dosearch: string, baselayers: string, component: string, print: string, hide: string, annul: string, layer_selection_filter: {tools: {filter: string, nofilter: string, invert: string, show_features_on_map: string, clear: string}}, layer_is_added: string, catalog_items: {helptext: string, contextmenu: {vector_color_menu: string, show_metadata: string, open_attribute_table: string, styles: string, zoomtolayer: string}}, dataTable: {next: string, nodatafilterd: string, previous: string, no_data: string, infoFiltered: string, lengthMenu: string, info: string}, nobaselayer: string, could_not_load_vector_layers: string, street_search: string, sdk: {search: {all: string, layer_not_querable: string, error_loading: string, autocomplete: {inputshort: {pre: string, post: string}}, searching: string, layer_not_searchable: string, no_results: string}, print: {fids_instruction: string, help: string, no_layers: string, rotation: string, format: string, scale: string, fids_example: string, download_image: string}, metadata: {groups: {general: {title: string, fields: {fees: string, keywords: string, subfields: {contactinformation: {contactperson: string, contactvoicetelephone: string, personprimary: string, contactorganization: string, ContactOrganization: string, ContactPosition: string, contactposition: string, contactelectronicmailaddress: string, ContactPerson: string}}, accessconstraints: string, name: string, description: string, contactinformation: string, wms_url: string, abstract: string, title: string}}, layers: {groups: {general: string, spatial: string}, title: string, fields: {subfields: {dataurl: string, metadataurl: string, keywords: string, crs: string, bbox: string, name: string, attribution: string, attributes: string, source: string, abstract: string, title: string, geometrytype: string}, layers: string}}, spatial: {title: string, fields: {extent: string, crs: string}}}, title: string}, form: {footer: {required_fields: string}, inputs: {date: string, input_validation_exclude_values: string, input_validation_max_field: string, string: string, varchar: string, textarea: string, input_validation_min_field: string, integer: string, float: string, input_validation_error: string, messages: {errors: {picklayer: string}}, input_validation_mutually_exclusive: string, text: string, bigint: string, tooltips: {picklayer: string, lonlat: string}, table: string}, messages: {qgis_input_widget_relation: string}, loading: string}, catalog: {menu: {download: {gpkg: string, csv: string, shp: string, gpx: string, xls: string}, wms: {copied: string, copy: string, title: string}}}, querybuilder: {search: {edit: string, run: string, delete: string, info: string}, additem: string, messages: {changed: string, number_of_features: string}, panel: {button: {all: string, test: string, save: string, clear: string, run: string, manual: string}, expression: string, operators: string, values: string, layers: string, fields: string}, error_run: string, delete: string, error_test: string}, mapcontrols: {querybypolygon: {help: string, tooltip: string, no_geometry: string}, measures: {area: {help: string, tooltip: string}, length: {help: string, tooltip: string}}, querybybbox: {help: string, tooltip: string, nolayers_visible: string}, addlayer: {tooltip: string, messages: {csv: {warning: string}}}, query: {tooltip: string, actions: {add_features_to_results: {hint: string}, download_features_csv: {hint: string}, atlas: {hint: string}, download_xls: {hint: string}, relations_charts: {hint: string}, zoom_to_feature: {hint: string}, download_features_gpkg: {hint: string}, zoom_to_features_extent: {hint: string}, download_csv: {hint: string}, download_features_shapefile: {hint: string}, download_features_xls: {hint: string}, download_shapefile: {hint: string}, add_selection: {hint: string}, download_gpx: {hint: string}, remove_feature_from_results: {hint: string}, download_features_gpx: {hint: string}, relations: {hint: string}, download_gpkg: {hint: string}}}, scale: {no_valid_scale: string}, geolocation: {tooltip: string}}, wps: {list_process: string, tooltip: string}, relations: {no_relations_found: string, relation_data: string, back_to_relations: string, list_of_relations_feature: string, error_missing_father_field: string}, errors: {add_external_layer: string, layers: {load: string}, unsupported_format: string}, tooltips: {download_csv: string, download_shapefile: string, atlas: string, copy_map_extent_url: string, download_gpx: string, download_xls: string, relations: {row_to_form: string, form_to_row: string}, download_gpkg: string, show_chart: string}}}}, fi: {translation: {cancel: string, no: string, error_map_loading: string, data: string, catalog: string, legend: string, copy_form_data: string, check_internet_connection_or_server_admin: string, show: string, save: string, back: string, server_error: string, mapcontrols: {area: {tooltip: string}, nominatim: {noresults: string, placeholder: string, notresponseserver: string}, add_layer_control: {select_csv_separator: string, select_csv_y_field: string, select_field_to_show: string, select_projection: string, header: string, select_color: string, select_csv_x_field: string, drag_layer: string}, query: {input_relation: string}, length: {tooltip: string}, screenshot: {error: string}, geolocations: {error: string}}, no_results: string, tools: string, changemap: string, default: string, logout: string, search: string, copy_form_data_from_feature: string, credits: {g3wSuiteFramework: string, productOf: string, g3wSuiteDescription: string}, sidebar: {}, close: string, exitnosave: string, sign_in: string, info: {link_button: string, open_link: string, server_error: string, title: string, no_results: string}, add: string, backto: string, yes: string, create_print: string, server_saver_error: string, tree: string, paste_form_data: string, no_other_projects: string, dosearch: string, baselayers: string, component: string, print: string, hide: string, annul: string, layer_selection_filter: {tools: {filter: string, nofilter: string, invert: string, show_features_on_map: string, clear: string}}, layer_is_added: string, catalog_items: {helptext: string, contextmenu: {vector_color_menu: string, show_metadata: string, open_attribute_table: string, styles: string, zoomtolayer: string}}, dataTable: {next: string, nodatafilterd: string, previous: string, no_data: string, infoFiltered: string, lengthMenu: string, info: string}, nobaselayer: string, could_not_load_vector_layers: string, street_search: string, sdk: {search: {all: string, layer_not_querable: string, error_loading: string, autocomplete: {inputshort: {pre: string, post: string}}, searching: string, layer_not_searchable: string, no_results: string}, print: {fids_instruction: string, help: string, no_layers: string, rotation: string, format: string, scale: string, fids_example: string, download_image: string}, metadata: {groups: {general: {title: string, fields: {fees: string, keywords: string, subfields: {contactinformation: {contactperson: string, contactvoicetelephone: string, personprimary: string, contactorganization: string, ContactOrganization: string, ContactPosition: string, contactposition: string, contactelectronicmailaddress: string, ContactPerson: string}}, accessconstraints: string, name: string, description: string, contactinformation: string, wms_url: string, abstract: string, title: string}}, layers: {groups: {general: string, spatial: string}, title: string, fields: {subfields: {dataurl: string, metadataurl: string, keywords: string, crs: string, bbox: string, name: string, attribution: string, attributes: string, source: string, abstract: string, title: string, geometrytype: string}, layers: string}}, spatial: {title: string, fields: {extent: string, crs: string}}}, title: string}, workflow: {next: string, steps: {title: string}}, form: {footer: {required_fields: string}, inputs: {date: string, input_validation_exclude_values: string, input_validation_max_field: string, string: string, varchar: string, textarea: string, input_validation_min_field: string, integer: string, float: string, input_validation_error: string, messages: {errors: {picklayer: string}}, input_validation_mutually_exclusive: string, text: string, bigint: string, tooltips: {picklayer: string, lonlat: string}, table: string}, messages: {qgis_input_widget_relation: string}, loading: string}, catalog: {menu: {download: {gpkg: string, csv: string, shp: string, gpx: string, xls: string}, wms: {copied: string, copy: string, title: string}}}, querybuilder: {search: {edit: string, run: string, delete: string, info: string}, additem: string, messages: {changed: string, number_of_features: string}, panel: {button: {all: string, test: string, save: string, clear: string, run: string, manual: string}, expression: string, operators: string, values: string, layers: string, fields: string}, error_run: string, delete: string, error_test: string}, mapcontrols: {querybypolygon: {help: string, tooltip: string, no_geometry: string}, measures: {area: {help: string, tooltip: string}, length: {help: string, tooltip: string}}, querybybbox: {help: string, tooltip: string, nolayers_visible: string}, addlayer: {tooltip: string, messages: {csv: {warning: string}}}, query: {tooltip: string, actions: {add_features_to_results: {hint: string}, download_features_csv: {hint: string}, atlas: {hint: string}, download_xls: {hint: string}, relations_charts: {hint: string}, zoom_to_feature: {hint: string}, download_features_gpkg: {hint: string}, zoom_to_features_extent: {hint: string}, download_csv: {hint: string}, download_features_shapefile: {hint: string}, download_features_xls: {hint: string}, download_shapefile: {hint: string}, add_selection: {hint: string}, download_gpx: {hint: string}, remove_feature_from_results: {hint: string}, download_features_gpx: {hint: string}, relations: {hint: string}, download_gpkg: {hint: string}}}, scale: {no_valid_scale: string}, geolocation: {tooltip: string}}, wps: {list_process: string, tooltip: string}, relations: {no_relations_found: string, relation_data: string, back_to_relations: string, list_of_relations_feature: string, error_missing_father_field: string}, errors: {add_external_layer: string, layers: {load: string}, unsupported_format: string}, tooltips: {download_csv: string, download_shapefile: string, atlas: string, copy_map_extent_url: string, download_gpx: string, download_xls: string, relations: {row_to_form: string, form_to_row: string}, download_gpkg: string, show_chart: string}}}}, en: {translation: {cancel: string, no: string, error_map_loading: string, data: string, catalog: string, legend: string, copy_form_data: string, check_internet_connection_or_server_admin: string, show: string, save: string, back: string, server_error: string, mapcontrols: {area: {tooltip: string}, nominatim: {noresults: string, placeholder: string, notresponseserver: string}, add_layer_control: {select_csv_separator: string, select_csv_y_field: string, select_field_to_show: string, select_projection: string, header: string, select_color: string, select_csv_x_field: string, drag_layer: string}, query: {input_relation: string}, length: {tooltip: string}, screenshot: {error: string}, geolocations: {error: string}}, no_results: string, tools: string, changemap: string, default: string, logout: string, search: string, copy_form_data_from_feature: string, credits: {g3wSuiteFramework: string, productOf: string, g3wSuiteDescription: string}, sidebar: {}, close: string, exitnosave: string, sign_in: string, info: {link_button: string, open_link: string, server_error: string, title: string, no_results: string}, add: string, backto: string, yes: string, create_print: string, server_saver_error: string, tree: string, paste_form_data: string, no_other_projects: string, dosearch: string, baselayers: string, component: string, print: string, hide: string, annul: string, layer_selection_filter: {tools: {filter: string, nofilter: string, invert: string, show_features_on_map: string, clear: string}}, layer_is_added: string, catalog_items: {helptext: string, contextmenu: {vector_color_menu: string, show_metadata: string, open_attribute_table: string, styles: string, zoomtolayer: string}}, dataTable: {next: string, nodatafilterd: string, previous: string, no_data: string, infoFiltered: string, lengthMenu: string, info: string}, nobaselayer: string, could_not_load_vector_layers: string, street_search: string, sdk: {search: {all: string, layer_not_querable: string, error_loading: string, autocomplete: {inputshort: {pre: string, post: string}}, searching: string, layer_not_searchable: string, no_results: string}, print: {fids_instruction: string, help: string, no_layers: string, rotation: string, format: string, scale: string, fids_example: string, download_image: string}, metadata: {groups: {general: {title: string, fields: {fees: string, keywords: string, subfields: {contactinformation: {contactperson: string, contactvoicetelephone: string, personprimary: string, contactorganization: string, ContactOrganization: string, ContactPosition: string, contactposition: string, contactelectronicmailaddress: string, ContactPerson: string}}, accessconstraints: string, name: string, description: string, contactinformation: string, wms_url: string, abstract: string, title: string}}, layers: {groups: {general: string, spatial: string}, title: string, fields: {subfields: {dataurl: string, metadataurl: string, keywords: string, crs: string, bbox: string, name: string, attribution: string, attributes: string, source: string, abstract: string, title: string, geometrytype: string}, layers: string}}, spatial: {title: string, fields: {extent: string, crs: string}}}, title: string}, workflow: {next: string, steps: {title: string}}, form: {footer: {required_fields: string}, inputs: {date: string, input_validation_exclude_values: string, input_validation_max_field: string, string: string, varchar: string, textarea: string, input_validation_min_field: string, integer: string, float: string, input_validation_error: string, messages: {errors: {picklayer: string}}, input_validation_mutually_exclusive: string, text: string, bigint: string, tooltips: {picklayer: string, lonlat: string}, table: string}, messages: {qgis_input_widget_relation: string}, loading: string}, catalog: {menu: {download: {gpkg: string, csv: string, shp: string, gpx: string, xls: string}, wms: {copied: string, copy: string, title: string}}}, querybuilder: {search: {edit: string, run: string, delete: string, info: string}, additem: string, messages: {changed: string, number_of_features: string}, panel: {button: {all: string, test: string, save: string, clear: string, run: string, manual: string}, expression: string, operators: string, values: string, layers: string, fields: string}, error_run: string, delete: string, error_test: string}, mapcontrols: {querybypolygon: {help: string, tooltip: string, no_geometry: string}, measures: {area: {help: string, tooltip: string}, length: {help: string, tooltip: string}}, querybybbox: {help: string, tooltip: string, nolayers_visible: string}, addlayer: {tooltip: string, messages: {csv: {warning: string}}}, query: {tooltip: string, actions: {add_features_to_results: {hint: string}, download_features_csv: {hint: string}, atlas: {hint: string}, download_xls: {hint: string}, relations_charts: {hint: string}, zoom_to_feature: {hint: string}, download_features_gpkg: {hint: string}, zoom_to_features_extent: {hint: string}, download_csv: {hint: string}, download_features_shapefile: {hint: string}, download_features_xls: {hint: string}, download_shapefile: {hint: string}, add_selection: {hint: string}, download_gpx: {hint: string}, remove_feature_from_results: {hint: string}, download_features_gpx: {hint: string}, relations: {hint: string}, download_gpkg: {hint: string}}}, scale: {no_valid_scale: string}, geolocation: {tooltip: string}}, wps: {list_process: string, tooltip: string}, relations: {no_relations_found: string, relation_data: string, back_to_relations: string, list_of_relations_feature: string, error_missing_father_field: string}, errors: {add_external_layer: string, layers: {load: string}, unsupported_format: string}, tooltips: {download_csv: string, download_shapefile: string, atlas: string, copy_map_extent_url: string, download_gpx: string, download_xls: string, relations: {row_to_form: string, form_to_row: string}, download_gpkg: string, show_chart: string}}}}, it: {translation: {cancel: string, no: string, error_map_loading: string, data: string, catalog: string, legend: string, copy_form_data: string, check_internet_connection_or_server_admin: string, show: string, save: string, back: string, server_error: string, mapcontrols: {area: {tooltip: string}, nominatim: {noresults: string, placeholder: string, notresponseserver: string}, add_layer_control: {select_csv_separator: string, select_csv_y_field: string, select_field_to_show: string, select_projection: string, header: string, select_color: string, select_csv_x_field: string, drag_layer: string}, query: {input_relation: string}, length: {tooltip: string}, screenshot: {error: string}, geolocations: {title: string, error: string}}, no_results: string, tools: string, changemap: string, default: string, logout: string, search: string, copy_form_data_from_feature: string, credits: {g3wSuiteFramework: string, productOf: string, g3wSuiteDescription: string}, sidebar: {}, close: string, exitnosave: string, sign_in: string, info: {link_button: string, open_link: string, server_error: string, title: string, no_results: string}, add: string, backto: string, yes: string, create_print: string, server_saver_error: string, tree: string, paste_form_data: string, no_other_projects: string, dosearch: string, baselayers: string, component: string, print: string, hide: string, annul: string, layer_selection_filter: {tools: {filter: string, nofilter: string, invert: string, show_features_on_map: string, clear: string}}, layer_is_added: string, catalog_items: {helptext: string, contextmenu: {vector_color_menu: string, show_metadata: string, open_attribute_table: string, styles: string, zoomtolayer: string}}, dataTable: {next: string, nodatafilterd: string, previous: string, infoFiltered: string, lengthMenu: string, info: string}, nobaselayer: string, could_not_load_vector_layers: string, street_search: string, sdk: {search: {all: string, layer_not_querable: string, error_loading: string, autocomplete: {inputshort: {pre: string, post: string}}, searching: string, layer_not_searchable: string, no_results: string}, print: {fids_instruction: string, help: string, no_layers: string, rotation: string, format: string, scale: string, fids_example: string, download_image: string}, metadata: {groups: {general: {title: string, fields: {fees: string, keywords: string, subfields: {contactinformation: {contactperson: string, contactvoicetelephone: string, personprimary: string, contactorganization: string, ContactOrganization: string, ContactPosition: string, contactposition: string, contactelectronicmailaddress: string, ContactPerson: string}}, accessconstraints: string, name: string, description: string, contactinformation: string, wms_url: string, abstract: string, title: string}}, layers: {groups: {general: string, spatial: string}, title: string, fields: {subfields: {dataurl: string, metadataurl: string, keywords: string, crs: string, bbox: string, name: string, attribution: string, attributes: string, source: string, abstract: string, title: string, geometrytype: string}, layers: string}}, spatial: {title: string, fields: {extent: string, crs: string}}}, title: string}, workflow: {next: string, steps: {title: string}}, form: {footer: {required_fields: string}, inputs: {date: string, input_validation_exclude_values: string, input_validation_max_field: string, string: string, varchar: string, textarea: string, input_validation_min_field: string, integer: string, float: string, input_validation_error: string, messages: {errors: {picklayer: string}}, input_validation_mutually_exclusive: string, text: string, bigint: string, tooltips: {picklayer: string, lonlat: string}, table: string}, messages: {qgis_input_widget_relation: string}, loading: string}, catalog: {menu: {download: {gpkg: string, csv: string, shp: string, gpx: string, xls: string}, wms: {copied: string, copy: string, title: string}}}, querybuilder: {search: {edit: string, run: string, delete: string, info: string}, additem: string, messages: {changed: string, number_of_features: string}, panel: {button: {all: string, test: string, save: string, clear: string, run: string, manual: string}, expression: string, operators: string, values: string, layers: string, fields: string}, error_run: string, delete: string, error_test: string}, mapcontrols: {querybypolygon: {help: string, tooltip: string, no_geometry: string}, measures: {area: {help: string, tooltip: string}, length: {help: string, tooltip: string}}, querybybbox: {help: string, tooltip: string, nolayers_visible: string}, addlayer: {tooltip: string, messages: {csv: {warning: string}}}, query: {tooltip: string, actions: {add_features_to_results: {hint: string}, download_features_csv: {hint: string}, atlas: {hint: string}, download_xls: {hint: string}, relations_charts: {hint: string}, zoom_to_feature: {hint: string}, download_features_gpkg: {hint: string}, zoom_to_features_extent: {hint: string}, download_csv: {hint: string}, download_features_shapefile: {hint: string}, download_features_xls: {hint: string}, download_shapefile: {hint: string}, add_selection: {hint: string}, download_gpx: {hint: string}, remove_feature_from_results: {hint: string}, download_features_gpx: {hint: string}, relations: {hint: string}, download_gpkg: {hint: string}}}, scale: {no_valid_scale: string}, geolocation: {tooltip: string}}, wps: {list_process: string, tooltip: string}, relations: {no_relations_found: string, relation_data: string, back_to_relations: string, list_of_relations_feature: string, error_missing_father_field: string}, errors: {add_external_layer: string, layers: {load: string}, unsupported_format: string}, tooltips: {zoom_to_features_extent: string, download_csv: string, download_shapefile: string, atlas: string, copy_map_extent_url: string, download_gpx: string, download_xls: string, relations: {row_to_form: string, form_to_row: string}, download_gpkg: string, show_chart: string}}}}}}|{resources: *}), views: (*|{}), group: *, vectorurl: *, debug: boolean, crs: *, apptitle: (string), header_custom_links, i18n: *, overviewproject: (*|null), layout: (*|{}), logo_img: *, baselayers: (string|vueComponentOptions.computed.baselayers|{count: number}|*), logo_link: *, background_color, terms_of_use_text: *, main_map_title: *, getProjectConfigUrl(*): string, user: (*|null), minscale: ProjectsRegistry.setProjects.config.minscale}>}
    */
@@ -376,7 +369,7 @@ const ApplicationService = function() {
     const config = { ...appConfig };
     try {
 
-      initConfig = initConfig ? initConfig :  await this.obtainInitConfig({
+      initConfig = initConfig ? initConfig : await this.obtainInitConfig({
         initConfigUrl:  `${appConfig.server.urls.initconfig}`
       });
 
@@ -403,83 +396,78 @@ const ApplicationService = function() {
       config.server.urls.proxyurl        = initConfig.proxyurl;
       config.server.urls.rasterurl       = initConfig.rasterurl;
       config.server.urls.interfaceowsurl = initConfig.interfaceowsurl;
-      
-      config.main_map_title = initConfig.main_map_title;
-      
-      config.group = initConfig.group;
-      
-      config.user = initConfig.user;
-      
-      config.credits = initConfig.credits;
-      
-      config.i18n = initConfig.i18n;
-      
+      config.main_map_title              = initConfig.main_map_title;
+      config.group                       = initConfig.group;
+      config.user                        = initConfig.user;
+      config.credits                     = initConfig.credits;
+      config.i18n                        = initConfig.i18n;
+
       /**
        * get language from server
        */
-      config._i18n.language = config.user.i18n;
+      config._i18n.language              = config.user.i18n;
       
       /**
        * check if is inside a iframe
        */
-      config.group.layout.iframe = window.top !== window.self;
+      config.group.layout.iframe         = window.top !== window.self;
       
       /**
        * create application configuration
        */
       return  {
-        apptitle: config.apptitle || '',
-        logo_img: config.group.header_logo_img,
-        logo_link: config.group.header_logo_link,
-        terms_of_use_text: config.group.header_terms_of_use_text,
-        terms_of_use_link: config.group.terms_of_use_link,
+        apptitle:            config.apptitle || '',
+        logo_img:            config.group.header_logo_img,
+        logo_link:           config.group.header_logo_link,
+        terms_of_use_text:   config.group.header_terms_of_use_text,
+        terms_of_use_link:   config.group.terms_of_use_link,
         header_custom_links: config.group.header_custom_links,
-        debug: config.client.debug || false,
-        group: config.group,
-        urls: config.server.urls,
-        mediaurl: config.server.urls.mediaurl,
-        resourcesurl: config.server.urls.clienturl,
-        vectorurl:config.server.urls.vectorurl,
-        rasterurl:config.server.urls.rasterurl,
-        interfaceowsurl: config.server.urls.interfaceowsurl,
-        projects: config.group.projects,
-        initproject: config.group.initproject,
-        overviewproject: (config.group.overviewproject && config.group.overviewproject.gid) ? config.group.overviewproject : null,
-        baselayers: config.group.baselayers,
-        mapcontrols: config.group.mapcontrols,
-        background_color: config.group.background_color,
-        crs: config.group.crs,
-        minscale: config.group.minscale,
-        maxscale: config.group.maxscale,
-        main_map_title: config.main_map_title,
-        credits: config.credits,
-        _i18n: config._i18n,
-        i18n: config.i18n,
-        layout: config.group.layout || {},
+        debug:               config.client.debug || false,
+        group:               config.group,
+        urls:                config.server.urls,
+        mediaurl:            config.server.urls.mediaurl,
+        resourcesurl:        config.server.urls.clienturl,
+        vectorurl:           config.server.urls.vectorurl,
+        rasterurl:           config.server.urls.rasterurl,
+        interfaceowsurl:     config.server.urls.interfaceowsurl,
+        projects:            config.group.projects,
+        initproject:         config.group.initproject,
+        overviewproject:     (config.group.overviewproject && config.group.overviewproject.gid) ? config.group.overviewproject : null,
+        baselayers:          config.group.baselayers,
+        mapcontrols:         config.group.mapcontrols,
+        background_color:    config.group.background_color,
+        crs:                 config.group.crs,
+        minscale:            config.group.minscale,
+        maxscale:            config.group.maxscale,
+        main_map_title:      config.main_map_title,
+        credits:             config.credits,
+        _i18n:               config._i18n,
+        i18n:                config.i18n,
+        layout:              config.group.layout || {},
         /**
          * needed by ProjectService
          */
         getWmsUrl(project) {
-          return `${config.server.urls.baseurl+config.server.urls.ows}/${config.group.id}/${project.type}/${project.id}/`;
+          return `${config.server.urls.baseurl}${config.server.urls.ows}/${config.group.id}/${project.type}/${project.id}/`;
         },
         /**
-         * needed by ProjectsRegistry to get informations about project configuration 
+         * needed by ProjectsRegistry to get information about project configuration
          */
         getProjectConfigUrl(project) {
-          return `${config.server.urls.baseurl+config.server.urls.config}/${config.group.id}/${project.type}/${project.id}?_t=${project.modified}`;
+          return `${config.server.urls.baseurl}${config.server.urls.config}/${config.group.id}/${project.type}/${project.id}?_t=${project.modified}`;
         },
         plugins: config.group.plugins,
-        tools: config.tools,
-        views: config.views || {},
-        user: config.user || null,
+        tools:   config.tools,
+        views:   config.views || {},
+        user:    config.user || null,
         /**
          * @since 3.8.0
          */
         groups,
         macrogroups,
       };
-    } catch(error) {
-      return Promise.reject(error);
+    } catch(e) {
+      return Promise.reject(e);
     }
   };
 
@@ -490,22 +478,25 @@ const ApplicationService = function() {
    */
   this.getMacrogroupsGroups = async function() {
     let macrogroups = [];
-    let groups = [];
+    let groups      = [];
     try {
       macrogroups = await XHR.get({ url: `/${this.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.macrogroups}` })
-    } catch(err) {}
+    } catch(e) { console.warn(e); }
     try {
       groups = await XHR.get({ url: `/${this.getApplicationUser().i18n}${API_BASE_URLS.ABOUT.nomacrogoups}` })
-    } catch(err) {}
+    } catch(e) { console.warn(e); }
     return {
       macrogroups,
       groups
     }
   };
 
-  this.obtainInitConfig = async function({initConfigUrl, url, host}={}) {
-    if (!this._initConfigUrl) this._initConfigUrl = initConfigUrl;
-    else this.clearInitConfig();
+  this.obtainInitConfig = async function({ initConfigUrl, url, host } = {}) {
+    if (this._initConfigUrl) {
+      this.clearInitConfig();
+    } else {
+      this._initConfigUrl = initConfigUrl;
+    }
 
     // if exist a global initConfig
     this._initConfig = window.initConfig;
@@ -516,14 +507,14 @@ const ApplicationService = function() {
     const locationsearch = url ? url.split('?')[1] : location.search.substring(1);
 
     if (locationsearch) {
-      //check if exist project in url
+      //check an if exist project in url
       /**
-       * The way to extract project group,type and id
+       * The way to extract a project group,type and id
        * Example http:localhost:3000/?project=3003/qdjango/1
-       * is deprecate
+       * is deprecated
        */
-      locationsearch.split('&').forEach(queryTuple => {
-        projectPath = queryTuple.indexOf("project") > -1 ? queryTuple.split("=")[1] : projectPath;
+      locationsearch.split('&').forEach(qt => {
+        projectPath = qt.indexOf("project") > -1 ? qt.split("=")[1] : projectPath;
       });
 
     ///////////////////////////////////////////////////////////////////
@@ -542,17 +533,19 @@ const ApplicationService = function() {
       window.initConfig = this._initConfig;
       this.emit('initconfig', this._initConfig);
       this.setInitVendorKeys(this._initConfig);
-      return Promise.resolve(this._initConfig);
     }
+    return this._initConfig;
   };
 
   // method to get initial application configuration
   this.getInitConfig = function(url) {
     return new Promise((resolve, reject) => {
-      if (this._initConfig) resolve(this._initConfig);
-      else XHR.get({url})
-        .then(initConfig => resolve(initConfig))
-        .catch(error => reject(error));
+      if (this._initConfig) { resolve(this._initConfig) }
+      else {
+        XHR.get({url})
+          .then(initConfig => resolve(initConfig))
+          .catch(error => reject(error));
+      }
     })
   };
 
@@ -568,7 +561,7 @@ const ApplicationService = function() {
   };
 
   /**
-   * set EPSG of Application (eg. during a WMS request for table layer )
+   * set EPSG of Application (e.g., during a WMS request for table layer)
    */
   this.setEPSGApplication  = function(project) {
     ApplicationState.map.epsg = project.state.crs.epsg;
@@ -594,7 +587,7 @@ const ApplicationService = function() {
    * 1 - load translations (i18n languages)
    * 2 - skip loading on `ApplicationState.ready` (ie. already initialized) --> automatically reject after Timeout
    * 3 - initialize ProjectsRegistry
-   * 4 - inizialize ApiService
+   * 4 - initialize ApiService
    * 5 - attach DOM events ('online' and 'offline')
    * 6 - trigger 'ready' event
    * 7 - set current project `gid` (group id)
@@ -614,17 +607,17 @@ const ApplicationService = function() {
           clearTimeout(timeout);
           this.registerOnlineOfflineEvent();
           this.emit('ready');
+
           ApplicationState.ready = this.initialized = true;
-          const project = ProjectsRegistry.getCurrentProject();
-          this._gid = project.getGid();
+          const project          = ProjectsRegistry.getCurrentProject();
+          this._gid              = project.getGid();
+
           this.setEPSGApplication(project);
-          if (ApplicationState.iframe) {
-            this.startIFrameService({ project });
-          }
+          if (ApplicationState.iframe) { this.startIFrameService({ project }) }
           DataRouterService.init();
           this.initLocalItems();
           resolve(true);
-        }).fail(error => reject(error))
+        }).fail(e => reject(e))
       }
     });
   };
@@ -642,12 +635,12 @@ const ApplicationService = function() {
       try {
         RouterService.init();
         await PluginsRegistry.init({
-          pluginsBaseUrl: this._config.urls.staticurl,
-          pluginsConfigs: this._config.plugins,
+          pluginsBaseUrl:     this._config.urls.staticurl,
+          pluginsConfigs:     this._config.plugins,
           otherPluginsConfig: ProjectsRegistry.getCurrentProject().getState()
         });
-      } catch(err) {
-        console.warn(err);
+      } catch(e) {
+        console.warn(e);
       } finally {
         this.complete = true;
         this.emit('complete');
@@ -658,33 +651,33 @@ const ApplicationService = function() {
   /**
    * iframeservice 
    */
-  this.startIFrameService = function({project}={}) {
+  this.startIFrameService = function({ project } = {}) {
     const iframeService = require('services/iframe').default;
-    iframeService.init({project});
+    iframeService.init({ project });
   };
 
-  this.registerWindowEvent = function({evt, cb} ={}) {
+  this.registerWindowEvent = function({ evt, cb } = {}) {
     window.addEventListener(evt, cb);
   };
 
-  this.unregisterWindowEvent = function({evt, cb}={}) {
+  this.unregisterWindowEvent = function({ evt, cb } = {}) {
     window.removeEventListener(evt, cb)
   };
 
-  this.registerService = function(element, service) {
-    this._applicationServices[element] = service;
+  this.registerService = function(el, service) {
+    this._applicationServices[el] = service;
   };
 
-  this.unregisterService = function(element) {
-    delete this._applicationServices[element];
+  this.unregisterService = function(el) {
+    delete this._applicationServices[el];
   };
 
   this.getApplicationService = function(type) {
     return this._applicationServices[type];
   };
 
-  this.getService = function(element) {
-    return this._applicationServices[element];
+  this.getService = function(el) {
+    return this._applicationServices[el];
   };
 
   this.errorHandler = function(error) {};
@@ -696,25 +689,27 @@ const ApplicationService = function() {
     window.initConfig = this._initConfig = null;
   };
 
-  this.setInitVendorKeys = function(config={}) {
+  this.setInitVendorKeys = function(config = {}) {
    const vendorkeys = config.group.vendorkeys || {};
-   config.group.baselayers.forEach(baselayer => {
-     if (baselayer.apikey) {
-       vendorkeys[baselayer.servertype ? baselayer.servertype.toLowerCase() : null] = baselayer.apikey
-     }
-   });
+   config.group.baselayers
+     .forEach(baselayer => {
+        if (baselayer.apikey) {
+          vendorkeys[baselayer.servertype ? baselayer.servertype.toLowerCase() : null] = baselayer.apikey
+        }
+      });
    this.setVendorKeys(vendorkeys);
   };
 
-  this.setVendorKeys = function(keys={}) {
-    Object.keys(keys).forEach(key =>ApplicationState.keys.vendorkeys[key] = keys[key])
+  this.setVendorKeys = function(keys = {}) {
+    Object.keys(keys).forEach(k => ApplicationState.keys.vendorkeys[k] = keys[k])
   };
 
   /**
-   * change View 
+   * change View
+   * @param { Boolean } bool
    */
-  this.changeProjectView = function(change) {
-    ApplicationState.changeProjectview = change;
+  this.changeProjectView = function(bool) {
+    ApplicationState.changeProjectview = bool;
   };
 
   this.isProjectViewChanging = function() {
@@ -731,7 +726,7 @@ const ApplicationService = function() {
   /**
    * @TODO check if deprecated
    * 
-   * Perfom again all requests and rebuild interface on change project
+   * Perform again all requests and rebuild interface on change project
    *  
    * @param project.gid
    * @param project.host
@@ -739,11 +734,11 @@ const ApplicationService = function() {
    * 
    * @returns {JQuery.Promise<any, any, any>}
    */
-  this._changeProject = function({gid, host, crs}={}) {
-    const d = $.Deferred();
-    this._gid = gid;
+  this._changeProject = function({ gid, host, crs } = {}) {
+    const d          = $.Deferred();
+    this._gid        = gid;
     const projectUrl = ProjectsRegistry.getProjectUrl(gid);
-    const url = GUI.getService('map').addMapExtentUrlParameterToUrl(projectUrl, crs);
+    const url        = GUI.getService('map').addMapExtentUrlParameterToUrl(projectUrl, crs);
     /**
      * @since 3.7.15
      */
@@ -787,10 +782,10 @@ const ApplicationService = function() {
   };
 
   this.removeLayout = function(who) {
-    who && delete ApplicationState.gui.layout[who];
+    if (who) { delete ApplicationState.gui.layout[who] }
   };
 
-  this.setCurrentLayout = function(who='app') {
+  this.setCurrentLayout = function(who = 'app') {
     ApplicationState.gui.layout.__current = who;
   };
 
@@ -818,7 +813,7 @@ const ApplicationService = function() {
   this.initLocalItems = function() {
     Object
       .keys(LOCAL_ITEM_IDS)
-      .forEach(id => { undefined === this.getLocalItem(id) && this.setLocalItem({ id, data: LOCAL_ITEM_IDS[id].value }); })
+      .forEach(id => { if (undefined === this.getLocalItem(id)) { this.setLocalItem({ id, data: LOCAL_ITEM_IDS[id].value }); } })
   };
 };
 
diff --git a/src/services/clipboard.js b/src/services/clipboard.js
index 000d1e11e..93af68df0 100644
--- a/src/services/clipboard.js
+++ b/src/services/clipboard.js
@@ -4,17 +4,17 @@
  */
 
 function ClipboardService() {
-    this._data = {};
-    this.set = function(formId, data) {
-      const formLayer = formId.split('form')[0];
-      this._data[formLayer] = data;
-    };
-  
-    this.get = function(formLayer) {
-      const data = this._data[formLayer] || {};
-      this._data[formLayer] = {};
-      return data;
-    };
+  this._data = {};
+  this.set = function(formId, data) {
+    const formLayer = formId.split('form')[0];
+    this._data[formLayer] = data;
+  };
+
+  this.get = function(formLayer) {
+    const data = this._data[formLayer] || {};
+    this._data[formLayer] = {};
+    return data;
+  };
 }
 
 export default new ClipboardService();
diff --git a/src/services/data-expression.js b/src/services/data-expression.js
deleted file mode 100644
index 9920b94ee..000000000
--- a/src/services/data-expression.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-import { getFeaturesFromResponseVectorApi } from "utils/getFeaturesFromResponseVectorApi";
-
-const BaseService = require('core/data/service');
-const {
-  base,
-  inherit,
-  XHR
-}                 = require('utils');
-
-function ExpressionService() {
- 
-  base(this);
-  
-  /**
-   * POST only: accepts
-   * 
-   * Mandatory JSON body: expression
-   * Optional JSON body: form_data and qgs_layer_id (QGIS layer id)
-   * 
-   * @param params.qgis_layer_id layer id owner of the form data
-   * @param params.layer_id      layer owner of the data
-   * @param params.form_data
-   * @param params.field_name    since 3.8.0
-   * @param params.expression
-   * @param params.formatter
-   * @param params.parent
-   * 
-   * @returns { Promise<void> }
-   */
-  this.expression = async function(params= {}) {
-    try {
-      return this.handleResponse(
-        // response
-        await this.handleRequest({
-          url: `${this.project.getUrl('vector_data')}${params.layer_id}/`,
-          params
-        })
-      );
-    } catch(err) {
-      return Promise.reject(err);
-    }
-
-  };
-
-  /**
-   * POST only method to return QGIS Expressions evaluated in Project an optional Layer/Form context
-   *
-   * Mandatory JSON body: expression
-   * Optional JSON body: form_data and qgs_layer_id (QGIS layer id)
-   * 
-   * @param params.layer_id
-   * @param params.qgis_layer_id
-   * @param params.form_data
-   * @param params.field_name    since 3.8.0
-   * @param params.expression
-   * @param params.formatter
-   * @param params.parent
-   * 
-   * @returns { Promise<void> }
-   */
-   this.expression_eval = function(params={}) {
-    return this.handleRequest({
-      url: this.project.getUrl('expression_eval'),
-      params
-    });
-  };
-
-  /**
-   * Handle server request
-   * 
-   * @param url
-   * @param params
-   * @param contentType
-
-   * @returns { Promise<*> }
-   */
-  this.handleRequest = function({ url, params={}, contentType='application/json' } = {}) {
-    return XHR.post({ url, contentType, data: JSON.stringify(params) });
-  };
-
-  /**
-   * Handle server response
-   * 
-   * @param response
-   */
-  this.handleResponse = function(response = {}) {
-    return getFeaturesFromResponseVectorApi(response);
-  };
-
-}
-
-inherit(ExpressionService, BaseService);
-
-export default new ExpressionService();
\ No newline at end of file
diff --git a/src/services/data-ows.js b/src/services/data-ows.js
deleted file mode 100644
index 831ce78b2..000000000
--- a/src/services/data-ows.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-
-import ApplicationService from 'services/application';
-
-const { base, inherit, XHR } = require('utils');
-const BaseService = require('core/data/service');
-
-function OWSService(){
-  base(this);
-  /**
-   *
-   * @param params
-   * @returns {Promise<{data: string, response: *}>}
-   */
-  this.wmsCapabilities = async function({url} ={}){
-    const owsUrl = `${ApplicationService.getInterfaceOwsUrl()}`;
-    try {
-      const params = {
-        url,
-        service: "wms"
-      };
-      const data = JSON.stringify(params);
-      const response = await XHR.post({
-        url: owsUrl,
-        contentType: 'application/json',
-        data
-      });
-      return response;
-    } catch(err){
-      return;
-    }
-  };
-}
-
-inherit(OWSService, BaseService);
-
-export default new OWSService();
\ No newline at end of file
diff --git a/src/services/data-proxy.js b/src/services/data-proxy.js
deleted file mode 100644
index caf0efb33..000000000
--- a/src/services/data-proxy.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-
-import ApplicationService from 'services/application';
-
-const { base, inherit, XHR } = require('utils');
-const BaseService = require('core/data/service');
-
-function ProxyService(){
-  base(this);
-  /**
-   *
-   * @param data: Object conitans data to pass to proxy
-   * @returns {Promise<{data: string, response: *}>}
-   */
-  this.wms = async function({url, method='GET', params={}, headers={}}={}){
-    let proxyUrl = `${ApplicationService.getProxyUrl()}`;
-    if (method === 'GET') {
-      url = new URL(url);
-      Object.keys(params).forEach(param => url.searchParams.set(param, params[param]));
-      url = url.toString();
-    }
-    try {
-      const data = JSON.stringify({
-        url,
-        params,
-        headers,
-        method
-      });
-      const response = await XHR.post({
-        url: proxyUrl,
-        contentType: 'application/json',
-        data
-      });
-      return {
-        response,
-        data
-      };
-    } catch(err){
-      return;
-    }
-  };
-
-  /**
-   * Generic proxy data function
-   * @param params
-   */
-  this.data = function(params={}){}
-}
-
-inherit(ProxyService, BaseService);
-
-export default new ProxyService();
\ No newline at end of file
diff --git a/src/services/data-query.js b/src/services/data-query.js
deleted file mode 100644
index 4f5a20bbf..000000000
--- a/src/services/data-query.js
+++ /dev/null
@@ -1,281 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-
-import { G3W_FID, QUERY_POINT_TOLERANCE }      from "app/constant";
-import { getQueryLayersPromisesByCoordinates } from "utils/getQueryLayersPromisesByCoordinates";
-import { getQueryLayersPromisesByGeometry }    from "utils/getQueryLayersPromisesByGeometry";
-import { getQueryLayersPromisesByBBOX }        from "utils/getQueryLayersPromisesByBBOX";
-import { getMapLayersByFilter }                from "utils/getMapLayersByFilter";
-
-const { base, inherit } = require('utils');
-const { t }             = require('core/i18n/i18n.service');
-const BaseService       = require('core/data/service');
-
-function QueryService(){
-  base(this);
-  /**
-   *
-   * @type {{filtrable: {ows: string}}}
-   */
-  this.condition = {
-    filtrable: {
-      ows: 'WFS'
-    }
-  };
-
-  /**
-   * @param {{ feature: unknown, feature_count: unknown, filterConfig: unknown, multilayers: boolean, condition: boolean, excludeLayers: unknown[] }}
-   * 
-   * @returns {Promise<unknown>}
-   */
-  this.polygon = function({
-    feature,
-    feature_count   = this.project.getQueryFeatureCount(),
-    filterConfig    = {},
-    multilayers     = false,
-    condition       = this.condition,
-    /** @since 3.8.0 */
-    layerName       = '',
-    /** @since 3.8.0 */
-    excludeSelected = null,
-    /** @since 3.8.0 **/
-    external = {
-      add: true,
-      filter: {
-        SELECTED : false
-      }
-    },
-    /**@since 3.9.0**/
-    type = 'polygon'
-  } = {}) {
-    const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
-    const fid                       = (hasExternalLayersSelected) ? feature.getId() : feature.get(G3W_FID);
-    const geometry                  = feature.getGeometry();
-
-    // in case no geometry on polygon layer response
-    if (!geometry) {
-      return this.returnExceptionResponse({
-        usermessage: {
-          type: 'warning',
-          message: `${layerName} - ${t('sdk.mapcontrols.querybypolygon.no_geometry')}`,
-          messagetext: true,
-          autoclose: false
-        }
-      });
-    }
-    return this.handleRequest(
-      // request
-      getQueryLayersPromisesByGeometry(
-        // layers
-        getMapLayersByFilter({
-          ...(
-            "boolean" === typeof excludeSelected
-              ? { SELECTED: !excludeSelected }
-              : { SELECTED_OR_ALL: true }
-          ),
-          FILTERABLE: true,
-          VISIBLE: true
-        }, condition),
-        // options
-        {
-          geometry,
-          multilayers,
-          feature_count,
-          filterConfig,
-          projection: this.project.getProjection()
-        }
-      ),
-      // query
-      {
-        fid,
-        geometry,
-        layerName,
-        type,
-        filterConfig,
-        external
-      }
-    );
-  };
-
-  /**
-   *
-   * @param bbox
-   * @param feature_count
-   * @param multilayers
-   * @param condition
-   * @param layersFilterObject
-   * @returns {Promise<unknown>}
-   */
-  this.bbox = function({
-    bbox,
-    feature_count      = this.project.getQueryFeatureCount(),
-    filterConfig       = {},
-    multilayers        = false,
-    condition          = this.condition,
-    /** @since 3.8.0 **/
-    excludeSelected    = null,
-    /** @since 3.8.0 **/
-    addExternal = true,
-    layersFilterObject = { SELECTED_OR_ALL: true, FILTERABLE: true, VISIBLE: true }
-  } = {}) {
-
-    const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
-    const query = {
-      bbox,
-      type: 'bbox',
-      filterConfig,
-      external: {
-        add: addExternal,
-        filter: {
-          SELECTED: hasExternalLayersSelected || (('boolean' == typeof excludeSelected) ? excludeSelected : false)
-        }
-      },
-    };
-
-    // Check If LayerIds is length === 0 so i check if add external Layer is selected
-    if (hasExternalLayersSelected) {
-      return this.handleRequest(this.getEmptyRequest(), query);
-    }
-
-    return this.handleRequest(
-      //request
-      getQueryLayersPromisesByBBOX(
-        // layers
-        getMapLayersByFilter( layersFilterObject, condition ),
-        //options
-        {
-          bbox,
-          feature_count,
-          filterConfig,
-          multilayers,
-        }
-      ),
-      // query
-      query
-    );
-
-  };
-
-  /**
-   * @param {{ coordinates: unknown, layerIds: unknown[], multilayers: boolean, query_point_tolerance: number, feature_count: number }}
-   * 
-   * @returns {Promise<unknown>}
-   */
-  this.coordinates = async function({
-    coordinates,
-    layerIds              = [],                   // see: `QueryResultsService::addLayerFeaturesToResultsAction()`
-    multilayers           = false,
-    query_point_tolerance = QUERY_POINT_TOLERANCE,
-    /** @since 3.8.0 **/
-    addExternal = true,
-    feature_count
-  } = {}) {
-    const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
-    const query = {
-      coordinates,
-      type: 'coordinates',
-      external: {
-        add: addExternal,
-        filter: {
-          SELECTED: hasExternalLayersSelected
-        }
-      }
-    };
-
-    // Return an empty request if an external layer is selected
-    if (hasExternalLayersSelected && 0 === layerIds.length) {
-      return this.handleRequest(this.getEmptyRequest(), query);
-    }
-
-    const layersFilterObject = {
-      QUERYABLE: true,
-      SELECTED_OR_ALL: (0 === layerIds.length),
-      VISIBLE: true
-    };
-
-
-    if (Array.isArray(layerIds)) {
-      layerIds.forEach(id => {
-        if (!layersFilterObject.IDS) layersFilterObject.IDS = [];
-        layersFilterObject.IDS.push(id);
-      });
-    }
-
-    const layers = getMapLayersByFilter(layersFilterObject);
-
-    // set external property `add: false` in case
-    // of selected layer in order to avoid querying
-    // a temporary layer (external layer)
-
-    if (1 === layers.length && layers[0].isSelected()) {
-      query.external.add = false;
-    }
-
-    return this.handleRequest(
-      // request
-      getQueryLayersPromisesByCoordinates(
-        // layers
-        layers,
-        // options
-        {
-          multilayers,
-          feature_count,
-          query_point_tolerance,
-          coordinates
-        }
-      ),
-      // query
-      query
-    );
-
-  };
-
-  /**
-   *
-   * @param request is a Promise(jquery promise at moment
-   * @returns {Promise<unknown>}
-   */
-  this.handleRequest = function(request, query={}){
-    return new Promise((resolve, reject) =>{
-      request.then(response => {
-        const results = this.handleResponse(response, query);
-        resolve(results);
-      }).fail(reject)
-    })
-  };
-
-  /**
-   *
-   * @param response
-   * @returns {Promise<{result: boolean, data: [], query: (*|null)}>}
-   */
-  this.handleResponse = function(response, query={}){
-    const layersResults = response;
-    const results = {
-      query,
-      type: 'ows',
-      data: [],
-      result: true // set result to true
-    };
-    layersResults.forEach(result => result.data && result.data.forEach(data => results.data.push(data)));
-    return results;
-  };
-
-  /**
-   * Exception response has user message attribute
-   */
-  this.returnExceptionResponse = async function({usermessage}){
-    return {
-      data: [],
-      usermessage,
-      result: true,
-      error: true
-    }
-  };
-}
-
-inherit(QueryService, BaseService);
-
-export default new QueryService();
\ No newline at end of file
diff --git a/src/services/data-search.js b/src/services/data-search.js
deleted file mode 100644
index a15f776e4..000000000
--- a/src/services/data-search.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-import { createOlFeatureFromApiResponseFeature } from 'utils/createOlFeatureFromApiResponseFeature';
-
-const { base, inherit }                         = require('utils');
-const BaseService                               = require('core/data/service');
-
-function SearchService() {
-
-  base(this);
-
-  /**
-   * Method to search features
-   * 
-   * @param options.layer
-   * @param { 'api' | 'ows' } options.search_endpoint
-   * @param options.filter
-   * @param options.raw
-   * @param options.queryUrl
-   * @param options.feature_count
-   * @param options.formatter
-   * @param options.ordering
-   * 
-   * @returns { Promise<{ data: [], query: { type: 'search', search: * }, type: 'api' | 'ows' }> }
-   */
-  this.features = async function(options = {
-    layer,
-    search_endpoint,
-    filter,
-    raw: false,
-    queryUrl,
-    feature_count,
-    formatter: 1,
-    ordering,
-  }) {
-    
-    const promises                = [];
-    const { layer, ...params }    = options;
-    const { raw = false, filter } = options;
-    let data                      = [];
-    const layers                  = Array.isArray(layer) ? layer : [layer];                         // check if layer is array
-    params.filter                 = Array.isArray(params.filter) ? params.filter : [params.filter]; // check if filter is array
-
-    // if 'api' or 'ows' search_endpoint
-    if ('api' === params.search_endpoint) {
-      layers.forEach((layer, i) => promises.push(layer.searchFeatures({ ...params, filter: params.filter[i] })));
-    } else {
-      promises
-        .push(new Promise((resolve, reject) => {
-          layers[0]                                                  // get query provider for get one request only
-          .getProvider('search')
-          .query({ ...params, layers, ...layers[0].getSearchParams() /* get search params*/ })
-          .then(data => { resolve({ data })})
-          .fail(reject)
-        }));
-    }
-
-    (await Promise.allSettled(promises))
-      .forEach(({ status, value } = {}) => {
-        // filter only fulfilled response
-        if ('fulfilled' !== status) { 
-          return;
-        }
-        if (raw) {
-          data.push('api' === params.search_endpoint ? { data: value } : value);
-        } else if ('api' !== params.search_endpoint) {
-          data = value.data = undefined !== value.data ? value.data : [];
-        } else if(Array.isArray(value.data) && value.data.length) {
-          data.push(value.data[0]);
-        }
-      });
-
-    return {
-      data,
-      query: {
-        type: 'search',
-        search: filter,
-      },
-      type: params.search_endpoint,
-    };
-  };
-
-  /**
-   * Return feature from api
-   * 
-   * @param opts.layer
-   * @param opts.formatter
-   * @param opts.fids
-   * 
-   * @returns { Promise<{ data: Array<{ layer: *, features: []}>, query: { type: 'search' }}> } 
-   */
-  this.fids = async function({
-    layer,
-    formatter = 0,
-    fids      = [],
-  } = {}) {
-    const features = []; 
-    try {
-      const feats = layer && await layer.getFeatureByFids({ fids, formatter });
-      if (feats) {
-        feats.forEach(f => features.push(createOlFeatureFromApiResponseFeature(f)));
-      }
-    } catch(err) {
-      console.warn(err);
-    }
-    return {
-      data: [{
-        layer,
-        features
-      }],
-      query: { type: 'search' },
-    };
-  };
-
-  /**
-   * Search service function to load many layers with each one with its fids
-   * 
-   * @param options.layers    - Array of layers that we want serach fids features
-   * @param options.fids      - Array of array of fids
-   * @param options.formatter - how we want visualize
-   * 
-   * @returns { Promise<{ data: [], query: { type: 'search' }}> }
-   */
-  this.layersfids = async function({
-    layers    = [],
-    fids      = [],
-    formatter = 0,
-  } = {}) {
-    const promises = [];
-    const data     = [];
-    layers.forEach((layer, i) => { promises.push(this.fids({ layer, fids: fids[i], formatter })) });
-    try {
-      (await Promise.all(promises)).forEach(response => { data.push(response.data) });
-    } catch(err) {
-      console.warn(err);
-    }
-    return {
-      data,
-      query: { type: 'search' }
-    };
-  }
-
-}
-
-inherit(SearchService, BaseService);
-
-export default new SearchService();
\ No newline at end of file
diff --git a/src/services/data.js b/src/services/data.js
index 167a8a314..5be63bffe 100644
--- a/src/services/data.js
+++ b/src/services/data.js
@@ -2,150 +2,763 @@
  * @file
  * @since v3.6
  */
+import { G3W_FID, QUERY_POINT_TOLERANCE }        from 'app/constant';
+import ProjectsRegistry                          from 'store/projects';
+import ApplicationService                        from 'services/application';
+import GUI                                       from 'services/gui';
+import IFrameRouterService                       from 'services/iframe';
+import { splitContextAndMethod }                 from 'utils/splitContextAndMethod';
+import { getFeaturesFromResponseVectorApi }      from 'utils/getFeaturesFromResponseVectorApi';
+import { getQueryLayersPromisesByCoordinates }   from 'utils/getQueryLayersPromisesByCoordinates';
+import { getQueryLayersPromisesByGeometry }      from 'utils/getQueryLayersPromisesByGeometry';
+import { getQueryLayersPromisesByBBOX }          from 'utils/getQueryLayersPromisesByBBOX';
+import { getMapLayersByFilter }                  from 'utils/getMapLayersByFilter';
+import { createOlFeatureFromApiResponseFeature } from 'utils/createOlFeatureFromApiResponseFeature';
+import { resolve }                               from 'utils/resolve';
+import { XHR }                                   from 'utils/XHR';
 
-import ExpressionService from 'services/data-expression';
-import OWSService from 'services/data-ows';
-import ProxyService from 'services/data-proxy';
-import QueryService from 'services/data-query';
-import SearchService from 'services/data-search';
-import IFrameRouterService from 'services/iframe';
-import GUI from 'services/gui';
+const { t } = require('core/i18n/i18n.service');
 
-const { splitContextAndMethod } = require('utils');
+const DataService = {
 
-function DataService() {
-  //set deafult outputplace
-  this.defaultoutputplaces = ['gui'];
-  // set current outputplaces
-  this.currentoutputplaces =  [...this.defaultoutputplaces]; // array contains all
+  defaultoutputplaces: ['gui'], // set deafult outputplace
+  currentoutputplaces: ['gui'], // array contains all
 
   /**
    * Object contain output function to show results
    * @type {{gui(*=, *=): void, iframe(*=, *=): void}}
-   * dataPromise: is thre promise request for data,
+   * dataPromise: is a promise request for data,
    * options: {
    *   show: method or Boolean to set if show or not the result on output
-   *   before : async function to handle data return from server
-   *   after: method to handle or do some thisn after show data
+   *   before: async function to handle data return from server
+   *   after: method to handle or do some this after show data
    * }
    */
-  this.ouputplaces = {
-    async gui(dataPromise, options={}){
+  ouputplaces: {
+
+    async gui(dataPromise, options = {}) {
       GUI.setLoadingContent(true);
       try {
         GUI.outputDataPlace(dataPromise, options);
         await dataPromise;
-      } catch(err){}
+      } catch(e) {
+        console.warn(e);
+      }
       GUI.setLoadingContent(false);
     },
-    async iframe(dataPromise, options={}){
+
+    async iframe(dataPromise, options = {}) {
       IFrameRouterService.outputDataPlace(dataPromise, options);
     }
-  };
 
-  /**
-   *
-   * @returns {Promise<void>}
-   */
-  this.init = async function(){
-    this.services = {
-      query: QueryService,
-      search: SearchService,
-      expression: ExpressionService,
-      proxy: ProxyService,
-      ows: OWSService
-    };
-  };
+  },
 
   /**
-   *
    * @param contextAndMethod 'String contain type of service(search or query): method'
    * @param options
+   * 
    * @returns {Promise<void>}
    */
-  this.getData = async function(contextAndMethod, options={}){
-    const {context, method} = splitContextAndMethod(contextAndMethod);
-    const service = this.getService(context);
+  async getData(contextAndMethod, options = {}) {
+    const { context, method }     = splitContextAndMethod(contextAndMethod);
+    const service                 = DataService.getService(context);
     const {inputs={}, outputs={}} = options;
     //return a promise and not the data
     const dataPromise = service[method](inputs);
-    outputs && this.currentoutputplaces.forEach(place =>{
-      this.ouputplaces[place](dataPromise, outputs);
-    });
+    if (outputs) {
+      DataService.currentoutputplaces.forEach(p => DataService.ouputplaces[p](dataPromise, outputs));
+    }
     //return always data
-    const data = await dataPromise;
-    return await data;
-  };
+    return await (await dataPromise);
+  },
 
   /**
-   *Force to show empty output data
-   *
-   * */
-  this.showEmptyOutputs = function(){
-    const dataPromise = Promise.resolve({
-      data: []
-    });
-    this.currentoutputplaces.forEach(place =>{
-      this.ouputplaces[place](dataPromise);
-    });
-  };
+   * Force to show empty output data
+   */
+  showEmptyOutputs() {
+    DataService.currentoutputplaces.forEach(p => DataService.ouputplaces[p](Promise.resolve({ data: [] })));
+  },
 
   /**
    * Set a costum datapromiseoutput to applicationa outputs settede
+   * 
    * @param dataPromise
    */
-  this.showCustomOutputDataPromise = function(dataPromise){
-    this.currentoutputplaces.forEach(place =>{
-      this.ouputplaces[place](dataPromise, {});
-    });
-  };
+  showCustomOutputDataPromise(dataPromise) {
+    DataService.currentoutputplaces.forEach(place => DataService.ouputplaces[place](dataPromise, {}));
+  },
 
   /**
-   *
    * @param serviceName
+   * 
    * @returns {*}
    */
-  this.getService = function(serviceName){
-    return this.services[serviceName]
-  };
+  getService(serviceName) {
+    return DataService.services[serviceName]
+  },
 
-  /*
-  * */
-  this.setOutputPlaces = function(places=[]){
-    this.currentoutputplaces = places;
-  };
+  setOutputPlaces(places = []) {
+    DataService.currentoutputplaces = places;
+  },
 
   /**
-   *
    * @param place
    */
-  this.addCurrentOutputPlace = function(place){
-    place && this.currentoutputplaces.indexOf(place) === -1 && this.currentoutputplaces.push(place);
-  };
+  addCurrentOutputPlace(place) {
+    if (place && -1 === DataService.currentoutputplaces.indexOf(place)) {
+      DataService.currentoutputplaces.push(place);
+    }
+  },
 
   /**
-   *
    * @param place
    * @param method has to get two parameters data (promise) and options (Object)
    * ex {
    * place: <newplace>
-   * method(dataPromise, options={}){}
+   * method(dataPromise, options={}) {}
    *   }
    */
-  this.addNewOutputPlace = function({place, method=()=>{}}={}){
+  addNewOutputPlace({ place, method = () => {} } = {}) {
     let added = false;
-    if (this.ouputplaces[place] === undefined) {
-      this.ouputplaces[place] = method;
+    if (undefined === DataService.ouputplaces[place] ) {
+      DataService.ouputplaces[place] = method;
       added = true;
     }
     return added;
-  };
+  },
 
   // reset default configuration
-  this.resetDefaultOutput = function(){
-    this.currentoutputplaces = [...this.defaultoutputplaces];
+  resetDefaultOutput() {
+    DataService.currentoutputplaces = [...DataService.defaultoutputplaces];
+  },
+
+};
+
+/**
+ * @returns {Promise<void>}
+ */
+DataService.init = async () => {
+  DataService.services = {
+
+    /**
+     * ORIGINAL SOURCE: src/services/data-query.js@v3.9.3
+     */
+    query: new (class extends BaseService {
+      
+      constructor() {
+        super();
+        /** @type {{filtrable: {ows: string}}} */
+        this.condition = { filtrable: { ows: 'WFS' } };
+      }
+
+      /**
+       * @param {{ feature: unknown, feature_count: unknown, filterConfig: unknown, multilayers: boolean, condition: boolean, excludeLayers: unknown[] }}
+       * 
+       * @returns {Promise<unknown>}
+       */
+      polygon({
+        feature,
+        feature_count   = this.project.getQueryFeatureCount(),
+        filterConfig    = {},
+        multilayers     = false,
+        condition       = this.condition,
+        /** @since 3.8.0 */
+        layerName       = '',
+        /** @since 3.8.0 */
+        excludeSelected = null,
+        /** @since 3.8.0 **/
+        external = {
+          add: true,
+          filter: {
+            SELECTED : false
+          }
+        },
+        /**@since 3.9.0**/
+        type = 'polygon'
+      } = {}) {
+        const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
+        const fid                       = (hasExternalLayersSelected) ? feature.getId() : feature.get(G3W_FID);
+        const geometry                  = feature.getGeometry();
+
+        // in case no geometry on polygon layer response
+        if (!geometry) {
+          return this.returnExceptionResponse({
+            usermessage: {
+              type: 'warning',
+              message: `${layerName} - ${t('sdk.mapcontrols.querybypolygon.no_geometry')}`,
+              messagetext: true,
+              autoclose: false
+            }
+          });
+        }
+        return this.handleRequest(
+          // request
+          getQueryLayersPromisesByGeometry(
+            // layers
+            getMapLayersByFilter({
+              ...(
+                "boolean" === typeof excludeSelected
+                  ? { SELECTED: !excludeSelected }
+                  : { SELECTED_OR_ALL: true }
+              ),
+              FILTERABLE: true,
+              VISIBLE: true
+            }, condition),
+            // options
+            {
+              geometry,
+              multilayers,
+              feature_count,
+              filterConfig,
+              projection: this.project.getProjection()
+            }
+          ),
+          // query
+          {
+            fid,
+            geometry,
+            layerName,
+            type,
+            filterConfig,
+            external
+          }
+        );
+      }
+
+      /**
+       *
+       * @param bbox
+       * @param feature_count
+       * @param multilayers
+       * @param condition
+       * @param filterConfig
+       * @param excludeSelected
+       * @param addExternal
+       * @param layersFilterObject
+       * @returns {Promise<unknown>}
+       */
+      bbox({
+        bbox,
+        feature_count      = this.project.getQueryFeatureCount(),
+        filterConfig       = {},
+        multilayers        = false,
+        condition          = this.condition,
+        /** @since 3.8.0 **/
+        excludeSelected    = null,
+        /** @since 3.8.0 **/
+        addExternal = true,
+        layersFilterObject = { SELECTED_OR_ALL: true, FILTERABLE: true, VISIBLE: true }
+      } = {}) {
+
+        const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
+        const query = {
+          bbox,
+          type: 'bbox',
+          filterConfig,
+          external: {
+            add: addExternal,
+            filter: {
+              SELECTED: hasExternalLayersSelected || (('boolean' == typeof excludeSelected) ? excludeSelected : false)
+            }
+          },
+        };
+
+        // Check If LayerIds is length === 0 so i check if add external Layer is selected
+        if (hasExternalLayersSelected) {
+          return this.handleRequest(this.getEmptyRequest(), query);
+        }
+
+        return this.handleRequest(
+          //request
+          getQueryLayersPromisesByBBOX(
+            // layers
+            getMapLayersByFilter( layersFilterObject, condition ),
+            //options
+            {
+              bbox,
+              feature_count,
+              filterConfig,
+              multilayers,
+            }
+          ),
+          // query
+          query
+        );
+
+      }
+
+      /**
+       * @param {{ coordinates: unknown, layerIds: unknown[], multilayers: boolean, query_point_tolerance: number, feature_count: number }}
+       * 
+       * @returns {Promise<unknown>}
+       */
+      async coordinates({
+        coordinates,
+        layerIds              = [],                   // see: `QueryResultsService::addLayerFeaturesToResultsAction()`
+        multilayers           = false,
+        query_point_tolerance = QUERY_POINT_TOLERANCE,
+        /** @since 3.8.0 **/
+        addExternal = true,
+        feature_count
+      } = {}) {
+        const hasExternalLayersSelected = this.hasExternalLayerSelected({ type: "vector" });
+        const query = {
+          coordinates,
+          type: 'coordinates',
+          external: {
+            add: addExternal,
+            filter: {
+              SELECTED: hasExternalLayersSelected
+            }
+          }
+        };
+
+        // Return an empty request if an external layer is selected
+        if (hasExternalLayersSelected && 0 === layerIds.length) {
+          return this.handleRequest(this.getEmptyRequest(), query);
+        }
+
+        const layersFilterObject = {
+          QUERYABLE: true,
+          SELECTED_OR_ALL: (0 === layerIds.length),
+          VISIBLE: true
+        };
+
+
+        if (Array.isArray(layerIds)) {
+          layerIds.forEach(id => {
+            if (!layersFilterObject.IDS) layersFilterObject.IDS = [];
+            layersFilterObject.IDS.push(id);
+          });
+        }
+
+        const layers = getMapLayersByFilter(layersFilterObject);
+
+        // set external property `add: false` in case
+        // of selected layer in order to avoid querying
+        // a temporary layer (external layer)
+
+        if (1 === layers.length && layers[0].isSelected()) {
+          query.external.add = false;
+        }
+
+        return this.handleRequest(
+          // request
+          getQueryLayersPromisesByCoordinates(
+            // layers
+            layers,
+            // options
+            {
+              multilayers,
+              feature_count,
+              query_point_tolerance,
+              coordinates
+            }
+          ),
+          // query
+          query
+        );
+
+      }
+
+      /**
+      * Wrap jQuery request promise with native Promise
+      * @param request is a Promise(jquery promise)
+      * @param query
+      * @returns {Promise<unknown>}
+      */
+      handleRequest(request, query = {}) {
+        return new Promise((resolve, reject) => {
+          request
+            .then(response => {
+              const results = this.handleResponse(response, query);
+              resolve(results);
+            })
+            .fail(reject)
+        })
+      }
+
+      /**
+      *
+      * @param response
+      * @param query
+      * @returns {{result: boolean, data: FlatArray<*[][], 1>[], query: {}, type: string}}
+      */
+      handleResponse(response = [], query = {}) {
+        return {
+          query,
+          type:   'ows',
+          data:   response.map(({ data = [] }) => data).flat(),
+          result: true // set result to true
+        };
+
+      }
+
+      /**
+      * Exception response has user message attribute
+      */
+      async returnExceptionResponse({ usermessage }) {
+        return {
+          data:   [],
+          usermessage,
+          result: true,
+          error:  true
+        }
+      }
+
+    }),
+
+    /**
+     * ORIGINAL SOURCE: src/services/data-search.js@v3.9.3
+     */
+    search: new (class extends BaseService {
+
+      /**
+       * @TODO deprecate search_endpoint
+       * 
+       * Method to search features
+       * 
+       * @param options.layer
+       * @param { 'api' | 'ows' } options.search_endpoint
+       * @param options.filter
+       * @param options.raw
+       * @param options.queryUrl
+       * @param options.feature_count
+       * @param options.formatter
+       * @param options.ordering
+       * 
+       * @returns { Promise<{ data: [], query: { type: 'search', search: * }, type: 'api' | 'ows' }> }
+       */
+      async features(options = {
+        layer,
+        search_endpoint,
+        filter,
+        raw: false,
+        queryUrl,
+        feature_count,
+        formatter: 1,
+        ordering,
+      }) {
+        
+        options.search_endpoint = options.search_endpoint || 'api';
+
+        let promises                  = [];
+        const { layer, ...params }    = options;
+        const { raw = false, filter } = options;
+        let data                      = [];
+        const layers                  = [].concat(layer);         // check if layer is array
+        params.filter                 = [].concat(params.filter); // check if filter is array
+    
+        // if 'api' or 'ows' search_endpoint
+        if ('api' === params.search_endpoint) {
+          promises = layers.map((layer, i) => layer.searchFeatures({ ...params, filter: params.filter[i] }));
+        } else {
+          promises = [new Promise((resolve, reject) => {
+            layers[0]                                                  // get query provider for get one request only
+            .getProvider('search')
+            .query({ ...params, layers, ...layers[0].getSearchParams() /* get search params*/ })
+            .then(data => { resolve(data)})
+            .fail(reject)
+          })];
+        }
+    
+        (await Promise.allSettled(promises))
+          // filter only fulfilled response
+          .filter(d => 'fulfilled' === d.status)
+          .forEach(({ value } = {}) => {
+            if (raw) {
+              data.push({ data: value });
+            } else if ('api' !== params.search_endpoint) {
+              data = value.data = undefined !== value.data ? value.data : [];
+            } else if(Array.isArray(value.data) && value.data.length) {
+              data.push(value.data[0]);
+            }
+          });
+    
+        return {
+          data,
+          query: {
+            type: 'search',
+            search: filter,
+          },
+          type: params.search_endpoint,
+        };
+      }
+    
+      /**
+       * Return feature from api
+       * 
+       * @param opts.layer
+       * @param opts.formatter
+       * @param opts.fids
+       * 
+       * @returns { Promise<{ data: Array<{ layer: *, features: []}>, query: { type: 'search' }}> } 
+       */
+      async fids({
+        layer,
+        formatter = 0,
+        fids      = [],
+      } = {}) {
+        const features = []; 
+        try {
+          const feats = layer && await layer.getFeatureByFids({ fids, formatter });
+          if (feats) {
+            feats.forEach(f => features.push(createOlFeatureFromApiResponseFeature(f)));
+          }
+        } catch(err) {
+          console.warn(err);
+        }
+        return {
+          data: [{
+            layer,
+            features
+          }],
+          query: { type: 'search' },
+        };
+      }
+    
+      /**
+       * Search service function to load many layers with each one with its fids
+       * 
+       * @param options.layers    - Array of layers that we want serach fids features
+       * @param options.fids      - Array of array of fids
+       * @param options.formatter - how we want visualize
+       * 
+       * @returns { Promise<{ data: [], query: { type: 'search' }}> }
+       */
+      async layersfids({
+        layers    = [],
+        fids      = [],
+        formatter = 0,
+      } = {}) {
+        const promises = [];
+        const data     = [];
+        layers.forEach((layer, i) => { promises.push(this.fids({ layer, fids: fids[i], formatter })) });
+        try {
+          (await Promise.all(promises)).forEach(response => { data.push(response.data) });
+        } catch(err) {
+          console.warn(err);
+        }
+        return {
+          data,
+          query: { type: 'search' }
+        };
+      }
+    
+    }),
+
+    /**
+     * ORIGINAL SOURCE: src/services/data-expression.js@v3.9.3
+     */
+    expression: new (class extends BaseService {
+
+      /**
+       * POST only: accepts
+       * 
+       * Mandatory JSON body: expression
+       * Optional JSON body: form_data and qgs_layer_id (QGIS layer id)
+       * 
+       * @param params.qgis_layer_id layer id owner of the form data
+       * @param params.layer_id      layer owner of the data
+       * @param params.form_data
+       * @param params.field_name    since 3.8.0
+       * @param params.expression
+       * @param params.formatter
+       * @param params.parent
+       * 
+       * @returns { Promise<void> }
+       */
+      async expression(params= {}) {
+        try {
+          return this.handleResponse(
+            // response
+            await this.handleRequest({
+              url: `${this.project.getUrl('vector_data')}${params.layer_id}/`,
+              params
+            })
+          );
+        } catch(err) {
+          return Promise.reject(err);
+        }
+
+      }
+
+      /**
+       * POST only method to return QGIS Expressions evaluated in Project an optional Layer/Form context
+       *
+       * Mandatory JSON body: expression
+       * Optional JSON body: form_data and qgs_layer_id (QGIS layer id)
+       * 
+       * @param params.layer_id
+       * @param params.qgis_layer_id
+       * @param params.form_data
+       * @param params.field_name    since 3.8.0
+       * @param params.expression
+       * @param params.formatter
+       * @param params.parent
+       * 
+       * @returns { Promise<void> }
+       */
+      expression_eval(params={}) {
+        return this.handleRequest({
+          url: this.project.getUrl('expression_eval'),
+          params
+        });
+      }
+
+      /**
+       * Handle server request
+       * 
+       * @param url
+       * @param params
+       * @param contentType
+       * 
+       * @returns { Promise<*> }
+       */
+      handleRequest({ url, params = {}, contentType = 'application/json' } = {}) {
+        return XHR.post({ url, contentType, data: JSON.stringify(params) });
+      }
+
+      /**
+       * Handle server response
+       * 
+       * @param response
+       */
+      handleResponse(response = {}) {
+        return getFeaturesFromResponseVectorApi(response);
+      }
+    
+    }),
+
+    /**
+     * ORIGINAL SOURCE: src/services/data-proxy.js@v3.9.3
+     */
+    proxy: new (class extends BaseService {
+      /**
+       *
+       * @param data: Object conitans data to pass to proxy
+       * @returns {Promise<{data: string, response: *}>}
+       */
+      async wms({url, method='GET', params={}, headers={}}={}) {
+        let proxyUrl = `${ApplicationService.getProxyUrl()}`;
+        if (method === 'GET') {
+          url = new URL(url);
+          Object.keys(params).forEach(param => url.searchParams.set(param, params[param]));
+          url = url.toString();
+        }
+        try {
+          const data = JSON.stringify({
+            url,
+            params,
+            headers,
+            method
+          });
+          const response = await XHR.post({
+            url: proxyUrl,
+            contentType: 'application/json',
+            data
+          });
+          return {
+            response,
+            data
+          };
+        } catch(err) {
+          return;
+        }
+      }
+
+      /**
+       * Generic proxy data function
+       * @param params
+       */
+      data(params={}) {}
+    }),
+
+    /**
+     * ORIGINAL SOURCE: src/services/data-ows.js@v3.9.3
+     */
+    ows: new (class extends BaseService {
+      /**
+       * @param params
+       * 
+       * @returns {Promise<{data: string, response: *}>}
+       */
+      async wmsCapabilities({url} ={}) {
+        const owsUrl = `${ApplicationService.getInterfaceOwsUrl()}`;
+        try {
+          const params = {
+            url,
+            service: "wms"
+          };
+          const data = JSON.stringify(params);
+          const response = await XHR.post({
+            url: owsUrl,
+            contentType: 'application/json',
+            data
+          });
+          return response;
+        } catch(err) {
+          return;
+        }
+      }
+    }),
+
   };
+};
+
+/**
+ * ORIGINAL SOURCE: src/app/core/data/service.js@v3.9.3
+ */
+class BaseService {
+
+  constructor() {
+    ProjectsRegistry.onbefore('setCurrentProject', project => this.project = project);
+    this.project = ProjectsRegistry.getCurrentProject();
+  }
+  /**
+   * @virtual method need to be implemented by subclasses
+   * 
+   * @param request is a Promise(jquery promise at moment
+   * @returns {Promise<unknown>}
+   */
+  handleRequest() {}
+
+  /**
+   * @virtual method need to be implemented by subclasses
+   */
+  async handleResponse() {}
+
+  /**
+   * @param {{ type: 'vector' }}
+   * 
+   * @returns { unknown[] } array of external layer add on project
+   * 
+   * @since 3.8.0
+   */
+  getSelectedExternalLayers({type = 'vector'}) {
+    return GUI.getService('catalog').state.external[type].filter(l => l.selected);
+  }
+
+  /**
+   * @returns {Promise<[]>} a resolved request (empty array)
+   * 
+   * @since 3.8.0
+   */
+  getEmptyRequest() {
+    return resolve([]);
+  }
+
+  /**
+   * @param {{ type: 'vector' }}
+   * 
+   * @returns {boolean}
+   * 
+   * @since 3.8.0
+   */
+  hasExternalLayerSelected({type = 'vector'}) {
+    return this.getSelectedExternalLayers({ type }).length > 0;
+  }
 
 }
 
-export default new DataService();
\ No newline at end of file
+export default DataService;
\ No newline at end of file
diff --git a/src/services/floatbar.js b/src/services/floatbar.js
index 463e1c9ca..d15b3f34a 100644
--- a/src/services/floatbar.js
+++ b/src/services/floatbar.js
@@ -3,64 +3,71 @@
  * @since v3.7
  */
 
-import GUI from 'services/gui';
+import GUI          from 'services/gui';
+import { BarStack } from 'core/g3w-barstack';
 
-const { barstack:Stack } = require('gui/utils/utils');
+const service = {
 
-function FloatbarService(){
-  this.stack = new Stack();
-  this.init = function(layout){
-    this.layout = layout;
-    this.sidebarEl = $(this.layout.options.controlSidebarOptions.selector);
-    this._zindex = this.sidebarEl.css("z-index");
+  stack: new BarStack(),
+
+  init(layout) {
+    this.layout        = layout;
+    this.sidebarEl     = $(this.layout.options.controlSidebarOptions.selector);
+    this._zindex       = this.sidebarEl.css("z-index");
     this._modalOverlay = null;
-    this._modal = false;
-    this._isopen = false;
-  };
+    this._modal        = false;
+    this._isopen       = false;
+  },
 
-  this.isOpen = function() {
+  isOpen() {
     return this._isopen;
-  };
+  },
 
-  this.open = function() {
+  open() {
     this.layout.floatBar.open(this.sidebarEl,true);
     this._isopen = true;
-  };
+  },
 
-  this.close = function() {
+  close() {
     this.layout.floatBar.close(this.sidebarEl,true);
     this._isopen = false;
-  };
+  },
 
-  this.showPanel = function(panel, options){
-    options = options || {};
-    const append = options.append || false;
-    const modal = options.modal || false;
-    options.parent = "#g3w-floatbarpanel-placeholder";
-    this.stack.push(panel, options);
-    if (!this._isopen) this.open();
-  };
+  showPanel(panel, opts) {
+    opts        = opts || {};
+    opts.parent = "#g3w-floatbarpanel-placeholder";
+    this.stack.push(panel, opts);
+    if (!this._isopen) {
+      this.open();
+    }
+  },
 
-  this.closePanel = function(panel){
-    if (panel) this.stack.remove(panel);
-    else this.stack.pop();
-    if (!this.stack.getLength()) {
-      if (this._modal){
-        GUI.setModal(false);
-        this.close();
-        $('.control-sidebar-bg').toggleClass('control-sidebar-bg-shadow');
-        this.sidebarEl.css("z-index","");
-        this.sidebarEl.css("padding-top","50px");
-        $('.control-sidebar-bg').css("z-index","");
-        this._modal = false;
-      }
-      else this.close();
+  closePanel(panel) {
+    if (panel) {
+      this.stack.remove(panel);
+    } else {
+      this.stack.pop();
     }
-  };
 
-  this.hidePanel = function(){
+    const stack_len = this.stack.getLength();
+
+    if (!stack_len && this._modal) {
+      GUI.setModal(false);
+      this.close();
+      $('.control-sidebar-bg').toggleClass('control-sidebar-bg-shadow');
+      this.sidebarEl.css("z-index","");
+      this.sidebarEl.css("padding-top","50px");
+      $('.control-sidebar-bg').css("z-index","");
+      this._modal = false; 
+    } else if (!stack_len && !this._modal) {
+      this.close();
+    }
+  },
+
+  hidePanel() {
     this.close();
-  };
-}
+  },
+
+};
 
-export default new FloatbarService();
\ No newline at end of file
+export default service;
\ No newline at end of file
diff --git a/src/services/gui.js b/src/services/gui.js
index c854a90a8..a6b647c10 100644
--- a/src/services/gui.js
+++ b/src/services/gui.js
@@ -2,50 +2,59 @@ import ApplicationService from 'services/application';
 import RouterService      from 'services/router';
 import ComponentsRegistry from 'store/components';
 
-const { base, inherit, noop } = require('utils');
+const {
+  base,
+  inherit,
+  noop
+}               = require('utils');
 const G3WObject = require('core/g3wobject');
 
 // API della GUI.
 // methods have be defined by application
 // app should call GUI.ready() when GUI is ready
 function GUI() {
+
   this.setters = {
-    setContent(options={}) {
+    setContent(options = {}) {
       this.emit('opencontent', true);
       this._setContent(options)
     }
   };
-  this.isready = false;
+
+  this.isready          = false;
   // images urls
-  this.getResourcesUrl = noop;
+  this.getResourcesUrl  = noop;
   // show a Vue form
-  this.showForm = noop;
-  this.closeForm = noop;
-  this.showListing = noop;
-  this.closeListing = noop;
-  this.hideListing = noop;
+  this.showForm         = noop;
+  this.closeForm        = noop;
+  this.showListing      = noop;
+  this.closeListing     = noop;
+  this.hideListing      = noop;
   // modal
-  this.setModal = noop;
-  this.showFullModal = noop;
+  this.setModal         = noop;
+  this.showFullModal    = noop;
   // modal
   this.showQueryResults = noop;
   this.hideQueryResults = noop;
-  this.showPanel = noop;
-  this.hidePanel = noop;
+  this.showPanel        = noop;
+  this.hidePanel        = noop;
   this.reloadComponents = noop;
-  this.showUserMessage = noop;
+  this.showUserMessage  = noop;
   this.closeUserMessage = noop;
-  this.showModalDialog = noop;
-  //property to how result has to be add or close all and show new
+  this.showModalDialog  = noop;
+  //property to how a result has to be adding or close all and show new
   // false mean create new and close all open
-  this.push_content=false;
-  this.setPushContent = function (bool=false) {
+  this.push_content     = false;
+
+  this.setPushContent = function (bool = false) {
     this.push_content = bool;
   };
-  this.getPushContent = function(){
+  this.getPushContent = function() {
     return this.push_content;
   };
+
   this._closeUserMessageBeforeSetContent = true;
+
   this.setComponent = function(component) {
     ComponentsRegistry.registerComponent(component);
   };
@@ -71,22 +80,22 @@ function GUI() {
     return new Promise(resolve => this.isready ? resolve() : this.once('ready', resolve));
   };
   /**
-   * Passing a component application ui id return service that belong to component
+   * Passing a component application ui id return service that belongs to component
    * @param componentId
    * @returns {*}
    */
-  this.getService = function(componentId){
+  this.getService = function(componentId) {
     const component = this.getComponent(componentId);
     return component && component.getService();
   };
   /* spinner */
-  this.showSpinner = function(options={}){};
-  this.hideSpinner = function(id){};
+  this.showSpinner = function(options={}) {};
+  this.hideSpinner = function(id) {};
   /* end spinner */
-  this.notify = noop;
-  this.dialog = noop;
-  this.isMobile = noop;
-  //useful to registere setters
+  this.notify      = noop;
+  this.dialog      = noop;
+  this.isMobile    = noop;
+  //useful to register setters
   base(this);
 }
 
@@ -103,12 +112,14 @@ inherit(GUI, G3WObject);
 GUI.prototype.downloadWrapper = async function(downloadFnc, options = {}) {
   const download_caller_id = ApplicationService.setDownload(true);
   this.setLoadingContent(true);
+
   try {
     await downloadFnc(options);
-  } catch(err) {
-    this.showUserMessage({ type: 'alert', message: err || 'server_error', textMessage: !!err })
+  } catch(e) {
+    this.showUserMessage({ type: 'alert', message: e || 'server_error', textMessage: !!e })
   }
   ApplicationService.setDownload(false, download_caller_id);
+
   this.setLoadingContent(false);
 };
 
diff --git a/src/services/history.js b/src/services/history.js
index 709fd0f6a..29b309487 100644
--- a/src/services/history.js
+++ b/src/services/history.js
@@ -4,7 +4,7 @@
  */
 
 const { inherit, base, Base64 } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject                 = require('core/g3wobject');
 
 /*
  * HistoryService basato su History.js (https://github.com/browserstate/history.js) e Crossroads (https://github.com/millermedeiros/crossroads.js)
@@ -32,7 +32,7 @@ const G3WObject = require('core/g3wobject');
  * HistoryService.removeRoute(route);
 */
 
-const HistoryService = function(){
+const HistoryService = function() {
   this._initialLocationQuery;
   this._routeQuery = '';
   this.setters = {
@@ -42,30 +42,29 @@ const HistoryService = function(){
     }
   }
 
-  History.Adapter.bind(window,'statechange',() =>{
-      const state = History.getState();
-      const locationQuery = state.hash;
-      if(state.data && state.data.routequery){
-         this.setRouteQuery(state.data.routequery);
-      }
-      else {
-        this._setRouteQueryFromLocationQuery(locationQuery);
-      }
+  History.Adapter.bind(window,'statechange', () => {
+    const state = History.getState();
+    const locationQuery = state.hash;
+    if (state.data && state.data.routequery) {
+       this.setRouteQuery(state.data.routequery);
+    } else {
+      this._setRouteQueryFromLocationQuery(locationQuery);
+    }
   });
 
   base(this);
 };
-inherit(RouterService,G3WObject);
 
-const proto = RouterService.prototype;
+inherit(HistoryService, G3WObject);
 
-proto.init = function(){
-  const query = window.location.search;
-  this._setRouteQueryFromLocationQuery(query);
+const proto = HistoryService.prototype;
+
+proto.init = function() {
+  this._setRouteQueryFromLocationQuery(window.location.search);
 };
 
-proto.addRoute = function(pattern,handler,priority) {
-  return crossroads.addRoute(pattern,handler,priority);
+proto.addRoute = function(pattern, handler, priority) {
+  return crossroads.addRoute(pattern, handler, priority);
 };
 
 proto.removeRoute = function(route) {
@@ -76,11 +75,11 @@ proto.removeAllRoutes = function() {
   return crossroads.removeAllRoutes();
 };
 
-proto.parse = function(request,defaultArgs) {
-  return crossroads.parse(request,defaultArgs);
+proto.parse = function(request, defaultArgs) {
+  return crossroads.parse(request, defaultArgs);
 };
 
-proto.goto = function(routeQuery){
+proto.goto = function(routeQuery) {
   //var pathb64 = Base64.encode(path);
   //History.pushState({path:path},null,'?p='+pathb64);
   if (!this._initialQuery) {
@@ -95,11 +94,11 @@ proto.goto = function(routeQuery){
 
 proto.makeQueryString = function(queryParams){};
 
-proto.slicePath = function(path){
+proto.slicePath = function(path) {
   return path.split('?')[0].split('/');
 };
 
-proto.sliceFirst = function(path){
+proto.sliceFirst = function(path) {
   const pathAndQuery = path.split('?');
   const queryString = pathAndQuery[1];
   const pathArr = pathAndQuery[0].split('/')
@@ -109,33 +108,30 @@ proto.sliceFirst = function(path){
   return [firstPath,path];
 };
 
-proto.getQueryParams = function(query){
+proto.getQueryParams = function(query) {
   query = query.replace('?','');
   const queryParams = {};
   let queryPairs = [];
   if (query != "" && query.indexOf("&") == -1) {
     queryPairs = [query];
-  }
-  else {
+  } else {
     queryPairs = query.split('&');
   }
   try {
     queryPairs.forEach((queryPair) => {
       const pair = queryPair.split('=');
-      const key = pair[0];
-      const value = pair[1];
-      queryParams[key] = value;
+      queryParams[ pair[0]] = pair[1];
     });
   }
   catch (e) {}
   return queryParams;
 };
 
-proto.getQueryString = function(path){
+proto.getQueryString = function(path) {
   return path.split('?')[1];
 };
 
-proto._getQueryPortion = function(query,queryKey){
+proto._getQueryPortion = function(query,queryKey) {
   let queryPortion;
   try {
     const queryPairs = query.split('&');
@@ -181,7 +177,7 @@ proto._getRouteQueryFromLocationQuery = function(locationQuery) {
 };
 
 proto._stripInitialQuery = function(locationQuery) {
-  const previousQuery = this._getQueryPortion(locationQuery,'q');
+  const previousQuery = this._getQueryPortion(locationQuery, 'q');
   if (previousQuery) {
     const previousQueryLength = previousQuery.length;
     const previousQueryPosition = locationQuery.indexOf(previousQuery);
diff --git a/src/services/iframe.js b/src/services/iframe.js
index d49aeb644..94f4a526b 100644
--- a/src/services/iframe.js
+++ b/src/services/iframe.js
@@ -62,14 +62,14 @@ async function _getEpsgFromParam(epsg) {
 class IframePluginService {
 
   constructor() {
-    this.pendingactions = {};
-    this.getMessage = this.getMessage.bind(this);
+    this.pendingactions              = {};
+    this.getMessage                  = this.getMessage.bind(this);
     this.eventResponseServiceHandler = this.eventResponseServiceHandler.bind(this);
   }
 
   /**
    * @param { Object } opts
-   * @param opts.project current project send by application service
+   * @param opts.project current project sends by application service
    */
   async init({
     project,
@@ -78,14 +78,14 @@ class IframePluginService {
     await GUI.isReady();
 
     this.services = {
-      app: new AppService(),
+      app:     new AppService(),
       editing: new EditingService(),
     };
 
     // get layer attributes from project layers state
-    const layers = project.state.layers.map(layer => ({ id: layer.id, name: layer.name }));
+    const layers = project.state.layers.map(l => ({ id: l.id, name: l.name }));
 
-    // initialize all service
+    // initialize all services
     const serviceNames = Object.keys(this.services);
 
     for (let i = 0; i < serviceNames.length; i++) {
@@ -98,10 +98,10 @@ class IframePluginService {
       service.on('response', this.eventResponseServiceHandler);
     }
 
-    // Send post message is ready
+    // Send post-message is ready
     this.postMessage({
-      id: null,
-      action: 'app:ready',
+      id:        null,
+      action:   'app:ready',
       response: { result: true, data: { layers } },
     });
 
@@ -142,12 +142,10 @@ class IframePluginService {
   }
 
   /**
-   * post message to parent
+   * post a message to parent
    */
   postMessage(message = {}) {
-    if (window.parent) {
-      window.parent.postMessage(message, '*');
-    }
+    if (window.parent) { window.parent.postMessage(message, '*') }
   }
 
   async stopPendingActions() {
@@ -162,11 +160,11 @@ class IframePluginService {
   };
 
   /**
-   * handle all message from window
+   * handle all messages from the window
    */
   async getMessage(evt) {
     if (evt && evt.data) {
-      const { id = uniqueId(), single=true, action, data:params } = evt.data;
+      const { id = uniqueId(), single = true, action, data:params } = evt.data;
       const { context, method } = splitContextAndMethod(action);
       let result = false;
       let data;
@@ -196,12 +194,12 @@ class IframePluginService {
   /**
    * Called when change map or clear
    */
-  clear() {
+  async clear() {
     const serviceNames = Object.keys(this.services);
     for (let i = 0; i < serviceNames.length; i++) {
       this.services[serviceNames[i]].off('response', this.eventResponseServiceHandler)
     }
-    this.stopPendingActions();
+    await this.stopPendingActions();
     window.removeEventListener('message', this.getMessage, false);
   }
 
@@ -219,7 +217,7 @@ class BaseIframeService extends G3WObject {
     /**
      * @type { boolean }
      */
-    this.ready = false;
+    this.ready      = false;
 
     /**
      * Map service
@@ -229,12 +227,12 @@ class BaseIframeService extends G3WObject {
     /**
      * Current project
      */
-    this.project = ProjectsRegistry.getCurrentProject();
+    this.project    = ProjectsRegistry.getCurrentProject();
 
     /**
      * @type { Array | undefined }
      */
-    this.layers = undefined;
+    this.layers     = undefined;
 
     // common attributes between plugin service
 
@@ -274,13 +272,14 @@ class BaseIframeService extends G3WObject {
       this.setDependencyApi(plugin.getApi());
       this.setReady(true);
     } else {
-      PluginsRegistry.onafter('registerPlugin', async plugin => {
-        await plugin.isReady();
-        if (plugin.getName() === this.pluginName) {
-          this.setDependencyApi(plugin.getApi());
-          this.setReady(true);
-        }
-      })
+      PluginsRegistry
+        .onafter('registerPlugin', async plugin => {
+          await plugin.isReady();
+          if (plugin.getName() === this.pluginName) {
+            this.setDependencyApi(plugin.getApi());
+            this.setReady(true);
+          }
+        })
     }
   }
 
@@ -319,7 +318,7 @@ class BaseIframeService extends G3WObject {
    */
   getQgsLayerId({
     qgs_layer_id,
-    noValue = this.layers.map(layer => layer.id),
+    noValue = this.layers.map(l => l.id),
   }) {
     return qgs_layer_id ? [].concat(qgs_layer_id) : noValue;
   };
@@ -333,14 +332,12 @@ class BaseIframeService extends G3WObject {
     layer,
     feature,
   }) {
-    const search_endpoint   = this.project.getSearchEndPoint();
     const { field, value }  = feature;
     const DataRouterService = require('services/data').default;
     const { data = [] }     = await DataRouterService.getData('search:features', {
       inputs: {
         layer,
-        search_endpoint,
-        filter: createFilterFormField({ layer, search_endpoint, field, value })
+        filter: createFilterFormField({ layer, field, value })
       },
       outputs: false
     });
@@ -365,8 +362,8 @@ class BaseIframeService extends G3WObject {
     highlight    = false,
   } = {}) {
     const response = {
-      found: false,
-      features: [],
+      found:        false,
+      features:     [],
       qgs_layer_id: null
     };
     let layersCount = qgs_layer_id.length;
@@ -383,13 +380,11 @@ class BaseIframeService extends G3WObject {
         response.features     = features;
         response.qgs_layer_id = qgs_layer_id[i];
         if (zoom) {
-          this.mapService.zoomToFeatures(features, { highlight });
+          await this.mapService.zoomToFeatures(features, { highlight });
         }
-      } catch(err) {
-        i++;
-      }
+      } catch(e) { i++; console.warn(e);}
     }
-    // in case of no response zoom too initial extent
+    // in case of no response zoom to an initial extent
     if (!response.found) {
       this.mapService.zoomToProjectInitExtent();
     }
diff --git a/src/services/index.js b/src/services/index.js
index 0844d4f84..8f653032c 100644
--- a/src/services/index.js
+++ b/src/services/index.js
@@ -1,11 +1,6 @@
 import ApiService from './api';
 import ApplicationService from './application';
 import ClipboardService from './clipboard';
-import ExpressionService from './data-expression';
-import OWSService from './data-ows';
-import ProxyService from './data-proxy';
-import QueryService from './data-query';
-import SearchService from './data-search';
 import DataService from './data';
 import ChangesManager from './editing';
 import GUI from './gui';
@@ -26,11 +21,6 @@ export {
   ApiService,
   ApplicationService,
   ClipboardService,
-  ExpressionService,
-  OWSService,
-  ProxyService,
-  QueryService,
-  SearchService,
   DataService,
   ChangesManager,
   GUI,
diff --git a/src/services/navbaritems.js b/src/services/navbaritems.js
index 165740503..ae1b68473 100644
--- a/src/services/navbaritems.js
+++ b/src/services/navbaritems.js
@@ -3,17 +3,17 @@
  * @since v3.7
  */
 const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject         = require('core/g3wobject');
 
 // service sidebar
 function navbaritemsService() {
   this.state = {
     items: {
-      left:[],
+      left: [],
       right:[]
     }
   };
-  this.addItem = function(item, position='right') {
+  this.addItem = function(item, position = 'right') {
     this.state.items[position].push(item);
   };
 
diff --git a/src/services/querybuilder.js b/src/services/querybuilder.js
deleted file mode 100644
index 8be6ad171..000000000
--- a/src/services/querybuilder.js
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * @file
- * @since v3.6
- */
-
-import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import DataRouterService from 'services/data';
-import ProjectsRegistry from 'store/projects';
-import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-
-const { t } = require('core/i18n/i18n.service');
-const { uniqueId, createFilterFromString, XHR } = require('utils');
-
-const QUERYBUILDERSEARCHES = 'QUERYBUILDERSEARCHES';
-
-function QueryBuilderService(options={}){
-  this._cacheValues = {};
-  this._items = ApplicationService.getLocalItem(QUERYBUILDERSEARCHES) || {};
-}
-
-const proto = QueryBuilderService.prototype;
-
-proto.getCurrentProjectItems = function() {
-  const projectId = ProjectsRegistry.getCurrentProject().getId();
-  this._items[projectId] = this._items[projectId] || [];
-  return this._items[projectId];
-};
-
-proto.getItems = function(projectId) {
-  const items = ApplicationService.getLocalItem(QUERYBUILDERSEARCHES);
-  projectId = projectId || ProjectsRegistry.getCurrentProject().getId();
-  return items ? items[projectId] || [] : [];
-};
-
-proto._getLayerById = function(layerId){
-  return CatalogLayersStoresRegistry.getLayerById(layerId);
-};
-
-proto.getValues = async function({layerId, field}={}){
-  this._cacheValues[layerId] = this._cacheValues[layerId] || {};
-  let valuesField = this._cacheValues[layerId][field];
-  if (valuesField  === undefined) {
-    try {
-      const layer = this._getLayerById(layerId);
-      const dataUrl = layer.getUrl('data');
-      const response = await XHR.get({
-        url: dataUrl,
-        params: {
-          ordering:field,
-          unique: field
-        }
-      });
-      if (response.result) this._cacheValues[layerId][field] = this._cacheValues[layerId][field] || response.data;
-      return this._cacheValues[layerId][field] || [];
-    } catch(err) {
-      reject();
-    }
-  } else return valuesField;
-};
-
-proto.run = function({layerId, filter:stringFilter, showResult=true}={}){
-  return new Promise(async (resolve, reject) => {
-    const layer = this._getLayerById(layerId);
-    const search_endpoint = layer.getSearchEndPoint();
-    const filter = createFilterFromString({
-      layer,
-      search_endpoint,
-      filter: stringFilter
-    });
-    try {
-      const {data} = await DataRouterService.getData('search:features', {
-        inputs: {
-          layer,
-          filter,
-          search_endpoint,
-          feature_count: 100
-        },
-        outputs: showResult
-      });
-      resolve(data);
-    } catch(error){
-      GUI.showUserMessage({
-        type: 'alert',
-        message: 'sdk.querybuilder.error_run',
-        autoclose: true
-      });
-      reject(error)
-    }
-  })
-};
-
-proto.test = async function({layerId, filter}={}){
-  try {
-    const data = await this.run({
-      layerId,
-      filter,
-      showResult: false
-    });
-    return data.length && data[0].features.length;
-  } catch(err){
-    err = t('sdk.querybuilder.error_test');
-    return Promise.reject(err);
-  }
-};
-
-proto.delete = function({id}={}){
-  return new Promise((resolve, reject) => {
-    GUI.dialog.confirm(t('sdk.querybuilder.delete'), (result)=>{
-      if (result) {
-        const querybuildersearches = this.getItems().filter(item => item.id !== id);
-        const projectId = ProjectsRegistry.getCurrentProject().getId();
-        const saveitems = ApplicationService.getLocalItem(QUERYBUILDERSEARCHES);
-        if (querybuildersearches.length)
-          saveitems[projectId] = querybuildersearches;
-        else delete saveitems[projectId];
-        if (Object.keys(saveitems).length)
-          ApplicationService.setLocalItem({
-            id: QUERYBUILDERSEARCHES,
-            data: saveitems
-          });
-        else ApplicationService.removeLocalItem(QUERYBUILDERSEARCHES);
-        resolve();
-      } else reject();
-    })
-  })
-};
-
-proto.editLocalItem = function(projectId, querybuildersearch) {
-  projectId = projectId || ProjectsRegistry.getCurrentProject().getId();
-  const querybuildersearches = ApplicationService.getLocalItem(QUERYBUILDERSEARCHES);
-  querybuildersearches[projectId].find((_querybuildersearch, index) => {
-    if (_querybuildersearch.id === querybuildersearch.id) {
-      querybuildersearches[projectId][index] = querybuildersearch;
-      return true;
-    }
-  });
-  ApplicationService.setLocalItem({
-    id: QUERYBUILDERSEARCHES,
-    data: querybuildersearches
-  });
-  this._resetItems(projectId, querybuildersearches[projectId]);
-};
-
-proto._resetItems = function(projectId, querybuildersearches) {
-  setTimeout(()=> {
-    querybuildersearches.forEach(querybuildersearch => this._items[projectId].push(querybuildersearch));
-  },0);
-  this._items[projectId].splice(0);
-};
-
-proto.addLocalItem = function(projectId, querybuildersearch) {
-  querybuildersearch.id = uniqueId();
-  projectId = projectId || ProjectsRegistry.getCurrentProject().getId();
-  const querybuildersearches = ApplicationService.getLocalItem(QUERYBUILDERSEARCHES);
-  if (querybuildersearches === undefined) {
-    const querybuildersearches = [querybuildersearch];
-    ApplicationService.setLocalItem({
-      id: QUERYBUILDERSEARCHES,
-      data: {
-        [projectId]: querybuildersearches
-      }
-    });
-    this._resetItems(projectId, querybuildersearches);
-  } else {
-    querybuildersearches[projectId] =  querybuildersearches[projectId] ? [...querybuildersearches[projectId], querybuildersearch] : [querybuildersearch];
-    ApplicationService.setLocalItem({
-      id: QUERYBUILDERSEARCHES,
-      data: querybuildersearches
-    });
-    this._resetItems(projectId, querybuildersearches[projectId]);
-  }
-};
-
-proto.save = function({id, name, layerId, filter, projectId} = {}){
-  const layerName = this._getLayerById(layerId).getName();
-  const querybuildersearch = {
-    layerId,
-    filter,
-    layerName
-  };
-  if (id) {
-    querybuildersearch.name = name;
-    querybuildersearch.id = id;
-    this.editLocalItem(projectId, querybuildersearch);
-    GUI.showUserMessage({
-      type: 'success',
-      message: t("sdk.querybuilder.messages.changed"),
-      autoclose: true
-    });
-    return;
-  }
-  GUI.dialog.prompt(t('sdk.querybuilder.additem'), (result)=>{
-    if (result) {
-      const searchService = GUI.getComponent('search').getService();
-      querybuildersearch.name =result;
-      searchService.addQueryBuilderSearch(querybuildersearch);
-      this.addLocalItem(projectId, querybuildersearch);
-      GUI.showUserMessage({
-        type: 'success',
-        message: t("sdk.querybuilder.messages.changed"),
-        autoclose: true
-      });
-    }
-  })
-};
-
-proto.all = function() {};
-
-proto.sample = function() {};
-
-proto.clear = function() {
-  this._cacheValues = {};
-};
-
-proto.add = function() {};
-
-
-export default new QueryBuilderService();
\ No newline at end of file
diff --git a/src/services/relations.js b/src/services/relations.js
index b6e08a350..9dbf88263 100644
--- a/src/services/relations.js
+++ b/src/services/relations.js
@@ -17,31 +17,31 @@ const {
 }               = require('utils');
 const G3WObject = require('core/g3wobject');
 
-function RelationsService(options={}) {
-  base(this);
+function RelationsService(opts = {}) {
+  base(this, opts);
 }
 
 inherit(RelationsService, G3WObject);
 
 const proto = RelationsService.prototype;
 
-proto.createUrl = function(options={}){
+proto.createUrl = function(opts = {}) {
   const currentProject = ProjectsRegistry.getCurrentProject();
   // type : <editing, data, xls>
-  const {layer={}, relation={}, fid, type='data', formatter=1} = options;
+  const {layer = {}, relation = {}, fid, type = 'data', formatter = 1} = opts;
   let layerId;
-  const {father, child, referencedLayer, referencingLayer, id:relationId} = relation;
-  if (father !== undefined) layerId = layer.id === father ? child: father;
-  else layerId = layer.id === referencedLayer ? referencingLayer: referencedLayer;
-  const dataUrl = currentProject.getLayerById(layerId).getUrl(type);
-  const value = sanitizeFidFeature(fid);
-  return `${dataUrl}?relationonetomany=${relationId}|${value}&formatter=${formatter}`;
+  const { father, child, referencedLayer, referencingLayer, id:relationId } = relation;
+  if (father === undefined) {
+    layerId = layer.id === referencedLayer ? referencingLayer: referencedLayer;
+  } else {
+    layerId = layer.id === father ? child: father;
+  }
+  return `${currentProject.getLayerById(layerId).getUrl(type)}?relationonetomany=${relationId}|${sanitizeFidFeature(fid)}&formatter=${formatter}`;
 };
 
-proto.getRelations = function(options={}) {
-  const url = this.createUrl(options);
+proto.getRelations = function(opts={}) {
   return XHR.get({
-    url
+    url: this.createUrl(opts)
   })
 };
 
@@ -51,11 +51,11 @@ proto.getRelations = function(options={}) {
  * @param features
  * @returns {Promise<[]>}
  */
-proto.getRelationsNM = async function({nmRelation, features=[]}={}){
-  const {referencedLayer, referencingLayer, fieldRef: {referencingField, referencedField} } = nmRelation;
-  let relationsNM = []; // start with empty relations result
+proto.getRelationsNM = async function({nmRelation, features = [] } = {}) {
+  const { referencedLayer, referencingLayer, fieldRef: {referencingField, referencedField} } = nmRelation;
+  let relationsNM = []; // start with an empty relations result
   if (features.length) {
-    const values = features.map(feature => feature.attributes[referencingField]);
+    const values = features.map(f => f.attributes[referencingField]);
     const responseFids = await DataRouterService.getData('search:features', {
       inputs: {
         layer: CatalogLayersStoresRegistry.getLayerById(referencedLayer),
@@ -65,7 +65,6 @@ proto.getRelationsNM = async function({nmRelation, features=[]}={}){
           logicop: 'OR'
         })}`,
         formatter: 1, // set formatter to
-        search_endpoint: 'api'
       },
       outputs: null
     });
@@ -86,10 +85,9 @@ proto.getRelationsNM = async function({nmRelation, features=[]}={}){
   return relationsNM;
 };
 
-proto.save = function(options={}){
-  const url = this.createUrl(options);
+proto.save = function(opts = {}){
   return XHR.fileDownload({
-    url,
+    url:        this.createUrl(opts),
     httpMethod: "GET"
   })
 };
diff --git a/src/services/router.js b/src/services/router.js
index 3b69a87f0..2343b1359 100644
--- a/src/services/router.js
+++ b/src/services/router.js
@@ -4,7 +4,7 @@
  */
 
 const { base,inherit, Base64 } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject                = require('core/g3wobject');
 
 /*
  * RouterService based on  History.js (https://github.com/browserstate/history.js) e Crossroads (https://github.com/millermedeiros/crossroads.js)
@@ -35,7 +35,7 @@ const G3WObject = require('core/g3wobject');
 crossroads.ignoreState = true;
 crossroads.greedy = true;
 
-const RouterService = function(){
+const RouterService = function() {
 
   this._initialLocationQuery;
   this._routeQuery = '';
@@ -48,6 +48,7 @@ const RouterService = function(){
 
   base(this);
 };
+
 inherit(RouterService, G3WObject);
 
 const proto = RouterService.prototype;
@@ -58,8 +59,8 @@ proto.init = function() {
   this._setRouteQueryFromLocationQuery(query);
 };
 
-proto.addRoute = function(pattern,handler,priority) {
-  return crossroads.addRoute(pattern,handler,priority);
+proto.addRoute = function(pattern, handler, priority) {
+  return crossroads.addRoute(pattern, handler, priority);
 };
 
 proto.removeRoute = function(route) {
@@ -70,11 +71,11 @@ proto.removeAllRoutes = function() {
   return crossroads.removeAllRoutes();
 };
 
-proto.parse = function(request,defaultArgs) {
-  return crossroads.parse(request,defaultArgs);
+proto.parse = function(request, defaultArgs) {
+  return crossroads.parse(request, defaultArgs);
 };
 
-proto.goto = function(routeQuery){
+proto.goto = function(routeQuery) {
   if (!this._initialQuery) {
     this._initialLocationQuery = this._stripInitialQuery(location.search.substring(1));
   }
@@ -92,13 +93,13 @@ proto.makePermalink = function(routeQuery) {
   return '?'+this._initialLocationQuery + '&q='+this._encodeRouteQuery(routeQuery);
 };
 
-proto.makeQueryString = function(queryParams){};
+proto.makeQueryString = function(queryParams) {};
 
-proto.slicePath = function(path){
+proto.slicePath = function(path) {
   return path.split('?')[0].split('/');
 };
 
-proto.sliceFirst = function(path){
+proto.sliceFirst = function(path) {
   const pathAndQuery = path.split('?');
   const queryString = pathAndQuery[1];
   const pathArr = pathAndQuery[0].split('/');
@@ -114,8 +115,7 @@ proto.getQueryParams = function(query) {
   let queryPairs = [];
   if (query != "" && query.indexOf("&") == -1) {
     queryPairs = [query];
-  }
-  else {
+  } else {
     queryPairs = query.split('&');
   }
   try {
diff --git a/src/services/sidebar.js b/src/services/sidebar.js
index ab7cc472d..d044d1568 100644
--- a/src/services/sidebar.js
+++ b/src/services/sidebar.js
@@ -3,173 +3,204 @@
  * @since v3.7
  */
 
-import SidebarItemComponent from 'components/SidebarItem.vue';
+import G3WObject    from 'core/g3w-object';
+import { BarStack } from 'core/g3w-barstack';
+import vueComp      from 'components/SidebarItem.vue';
 
-const { base, inherit } = require('utils');
-const { barstack: Stack } = require('gui/utils/utils');
-const G3WObject = require('core/g3wobject');
+export default new (class SidebarService extends G3WObject {
 
-/**
- * TODO: temporary need to remove it
- */
-const SidebarItem = Vue.extend(SidebarItemComponent);
-
-function SidebarService() {
-  //set sidebar stack
-  this.stack = new Stack();
-  // set setter for close sidebarpanel to catch event
-  // of closing panel of the sidebar
-  this.setters = {
-    closeSidebarPanel() {},
-    openCloseItem(bool) {}
-  };
-  //service state
-  this.state = {
-    components: [],
-    gui: {
-      title: ''
-    },
-    disabled: false
-  };
-  //inizialize method
-  this.init = function(layout) {
+  constructor() {
+    super();
+
+    // sidebar stack
+    this.stack = new BarStack();
+
+    // service state
+    this.state = {
+      components: [],
+      gui: {
+        title: ''
+      },
+      disabled: false
+    };
+
+    /**
+     * setter for close sidebarpanel to catch the event
+     * of a closing panel of the sidebar
+     */
+    this.setters = {
+      closeSidebarPanel() {
+        console.info('closing sidebar panel');
+      },
+      openCloseItem(bool) {
+        console.info('toggle sidebar panel');
+      }
+    };
+
+  }
+
+  /**
+   * init method
+   */
+  init(layout) {
     this.layout = layout;
-  };
-  // add component to sidebar
-  this.addComponents = function(components, options={}) {
-    //for each component of the sidebar it is call addComponent method
-    components.forEach(component => this.addComponent(component, options));
+  }
+
+  /**
+   * add component to sidebar, internally call `addComponent`
+   * method on each component of the sidebar 
+   */
+  addComponents(components, options={}) {
+    components.forEach(c => this.addComponent(c, options));
     return true;
   };
-  // add each component to the sidebar
-  // add also position insiede the sidebar
-  this.addComponent = function(component, options={}) {
-    const {position, before=true, info} = options;
-    if (isMobile.any && !component.mobile) {
+
+  /**
+   * add component to the sidebar and set position inside the sidebar
+   */
+  addComponent(comp, opts={}) {
+
+    if (isMobile.any && !comp.mobile) {
       return false
     }
-    const sidebarItem = new SidebarItem({
-      service: this,
-      info,
-      component
-    });
-    sidebarItem.title = component.title || sidebarItem.title;
-    sidebarItem.info = component.info || sidebarItem.info;
-    sidebarItem.actions = component.actions || sidebarItem.actions;
-    sidebarItem.open = component.state.open; //(component.open === undefined) ? sidebarItem.open : component.open;
-    sidebarItem.icon = component.icon || sidebarItem.icon;
-    sidebarItem.iconColor = component.iconColor;
-    sidebarItem.state = component.state || true;
-    sidebarItem.collapsible = (typeof component.collapsible === 'boolean') ? component.collapsible : true;
-    sidebarItem.isolate = (typeof component.isolate === 'boolean') ? component.isolate: false;
-    //append component to  g3w-sidebarcomponents (template sidebar.html)
-    const DOMComponent = sidebarItem.$mount().$el;
-    this.state.components.push(component);
-    const isPanelSidebarShow = $('.g3w-sidebarpanel').is(':visible');
-    const sidebarcomponetsdomid = `#g3w-sidebarcomponents${isPanelSidebarShow ? ':hidden': ''}`;
-    const children = $(sidebarcomponetsdomid).children().filter(function(){
-      return this.style.display !== 'none'
-    });
-    const childrenLength = children.length;
-    if (position === null || position === undefined || position < 0 || position >= childrenLength) $(sidebarcomponetsdomid).append(DOMComponent);
-    else children.each((index, element) => {
-      const findElementIndexId = Number.isInteger(position) ? position === index : element.id === position;
-      findElementIndexId && $(DOMComponent)[`insert${before ? 'Before' : 'After'}`](element);
-    });
-    //mount componet to g3w-sidebarcomponent-placeholder (template sidebar-item.html);
-    component.mount("#g3w-sidebarcomponent-placeholder");
-    // check if componentonent has iniService method
-    component.initService && component.initService();
+
+    opts.before      = undefined === opts.before ? true : opts.before;
+
+    const item       = new (Vue.extend(vueComp))({ service: this, component: comp });
+    item.title       = comp.title       || item.title;
+    item.info        = comp.info        || item.info;
+    item.actions     = comp.actions     || item.actions;
+    item.open        = comp.state.open; // (comp.open === undefined) ? item.open : comp.open;
+    item.icon        = comp.icon        || item.icon;
+    item.iconColor   = comp.iconColor;
+    item.state       = comp.state       || true;
+    item.collapsible = ('boolean' === typeof comp.collapsible) ? comp.collapsible : true;
+    item.isolate     = ('boolean' === typeof comp.isolate)     ? comp.isolate     : false;
+
+    // append component to `g3w-sidebarcomponents`
+    const el = item.$mount().$el;
+    const id = `#g3w-sidebarcomponents${ $('.g3w-sidebarpanel').is(':visible') ? ':hidden': ''}`;
+
+    this.state.components.push(comp);
+
+    const children = $(id).children().filter(function() { return this.style.display !== 'none' });
+  
+    if (null === opts.position || undefined === opts.position || opts.position < 0 || opts.position >= children.length) {
+      $(id).append(el);
+    } else {
+      children.each((i, c) => {
+        const found = Number.isInteger(opts.position) ? opts.position === i : c.id === opts.position;
+        if (found) {
+          $(el)[`insert${opts.before ? 'Before' : 'After'}`](c);
+        }
+      });
+    }
+
+    // mount component to `g3w-sidebarcomponent-placeholder`
+    comp.mount("#g3w-sidebarcomponent-placeholder");
+
+    if (comp.initService) {
+      comp.initService();
+    }
+
     // add click handler
-    this.setComponentClickHandler(component);
+    this.setComponentClickHandler(comp);
+
     return true;
-  };
+  }
 
-  this.setComponentClickHandler = function(component){
-    component.click = ({open=false}={}) => {
+  /**
+   * @param comp component
+   */
+  setComponentClickHandler(comp) {
+    comp.click = ({ open = false } = {}) => {
       open = open || false;
-      $(component.getInternalComponent().$el).siblings('a').click();
-      component.setOpen(open);
-    }
-  };
+      $(comp.getInternalComponent().$el).siblings('a').click();
+      comp.setOpen(open);
+    };
+  }
 
-  // get component by id
-  this.getComponent = function(id) {
-    return this.state.components.find(component => component.getId() === id)
-  };
+  /**
+   * get component by id
+   */
+  getComponent(id) {
+    return this.state.components.find(c => c.getId() === id)
+  }
 
-  // get all components
-  this.getComponents = function() {
+  /**
+   * get all components
+   */
+  getComponents() {
     return this.state.components;
-  };
+  }
 
   /**
    * close for the moment only conlapsbale
    */
-  this.closeOpenComponents = function(collapsible=true){
-    this.getComponents().forEach(component => component.closeWhenViewportContentIsOpen() && component.collapsible && component.click({open: false}))
-  };
+  closeOpenComponents() {
+    this.getComponents().forEach(c => c.getOpen() && c.state.closewhenshowviewportcontent && c.collapsible && c.click({ open: false }))
+  }
 
-  this.reloadComponent = function(id) {
+  reloadComponent(id) {
     const component = this.getComponent(id);
     component && component.reload();
-  };
+  }
 
-  this.reloadComponents = function() {
+  reloadComponents() {
     // force close of the panel
     this.closePanel();
-    this.state.components.forEach(component => {
-      if (component.collapsible && component.state.open) component.click({open: false});
-      component.reload();
-    })
-  };
-  //remove component
-  this.removeComponent = function(component, options={}) {
-    const {position} = options;
-    this.state.components.forEach((sidebarComponent, index) => {
-      if (component === sidebarComponent) {
-        component.unmount();
-        this.state.components.splice(index, 1);
-        if (position !== undefined && Number.isInteger(position)) $('#g3w-sidebarcomponents').children(':visible')[position].remove();
-        else $('#g3w-sidebarcomponents').children(`#${component.id}`).remove();
+    this.state.components.forEach(c => { if (c.collapsible && c.state.open) { c.click({open: false}); } component.reload(); })
+  }
+
+  /**
+   * remove component 
+   */
+  removeComponent(comp, opts={}) {
+    this.state.components.forEach((c, i) => {
+      if (comp === c) {
+        comp.unmount();
+        this.state.components.splice(i, 1);
+        if (opts.position !== undefined && Number.isInteger(opts.position)) {
+          $('#g3w-sidebarcomponents').children(':visible')[opts.position].remove();
+        } else {
+          $('#g3w-sidebarcomponents').children(`#${comp.id}`).remove();
+        }
         return false;
       }
     })
-  };
-  // show panel on stack
-  this.showPanel = function(panel, options={}) {
-    return new Promise((resolve, reject) => {
-      this.state.gui.title = panel.title;
-      const parent =  "#g3w-sidebarpanel-placeholder";
-      this.stack.getCurrentContentData() && $(this.stack.getCurrentContentData().content.internalPanel.$el).hide();
-      this.stack.push(panel, {
-        parent,
-        ...options
-      }).then(content => resolve(content))
-    })
-  };
+  }
+
+  /**
+   * show panel on stack
+   */
+  async showPanel(panel, options={}) {
+    this.state.gui.title = panel.title;
+    const data = this.stack.getCurrentContentData();
+    if (data) {
+      $(data.content.internalPanel.$el).hide();
+    } 
+    return await this.stack.push(panel, { parent: '#g3w-sidebarpanel-placeholder', ...options });
+  }
 
-  // close panel
-  this.closePanel = function() {
+  /**
+   * close panel
+   */
+  closePanel() {
     this.closeSidebarPanel();
     this.stack.pop().then(content => {
       content = null;
-      if (this.stack.getCurrentContentData()) {
-        $(this.stack.getCurrentContentData().content.internalPanel.$el).show();
-        this.state.gui.title = this.stack.getCurrentContentData().content.title;
+      const data = this.stack.getCurrentContentData();
+      if (data) {
+        $(data.content.internalPanel.$el).show();
+        this.state.gui.title = data.content.title;
       }
     });
-  };
+  }
 
-  this.closeAllPanels = function(){
+  closeAllPanels() {
     this.state.gui.title = null;
     this.closeSidebarPanel();
     this.stack.clear();
-  };
-
-  base(this);
-}
-
-inherit(SidebarService, G3WObject);
+  }
 
-export default new SidebarService();
\ No newline at end of file
+})();
\ No newline at end of file
diff --git a/src/services/tasks.js b/src/services/tasks.js
index 1ecf847bc..9b1cfe08f 100644
--- a/src/services/tasks.js
+++ b/src/services/tasks.js
@@ -9,9 +9,9 @@ const { XHR } = require('utils');
  * Singletone service to run async task
  * @constructor
  */
-function TaskService(){
+function TaskService() {
   /**
-   * Array contain all task id that are running. Each item is an object contain:
+   * Array contains all task id that are running. Each item is an object contain:
    * {
    *   taskId: //taskId,
    *   intervalId: interval to clear clearInterval()
@@ -32,30 +32,31 @@ function TaskService(){
    *
    * return a Promise that return a task id
    */
-  this.runTask = async function(options={}){
-    let {method='GET', params={}, url, taskUrl, interval=1000, timeout=Infinity, listener=()=>{}} = options;
+  this.runTask = async function(options={}) {
+    let { method='GET', params={}, url, taskUrl, interval=1000, timeout=Infinity, listener= () => {} } = options;
     try {
-      const response =  method === 'GET' ? await XHR.get({
+      const response = 'GET' === method  ? await XHR.get({
         url,
         params
       }): await XHR.post({
         url,
-        data: params.data || {},
+        data:        params.data || {},
         contentType: params.contentType || "application/json"
       });
-      const {result, task_id} = response;
-      if (result){
-        const intervalId = setInterval(async ()=>{
+      const { result, task_id } = response;
+      if (result) {
+        const intervalId = setInterval(async () => {
           // check if timeout is defined
           timeout = timeout - interval;
-          if (timeout > 0){
+          if (timeout > 0) {
             let response;
             try {
               response = await XHR.get({
                 url: `${taskUrl}${task_id}`
               });
-            } catch(error){
-              response = error;
+            } catch(e) {
+              response = e;
+              console.warn(e);
             }
             listener({
               task_id,
@@ -83,10 +84,12 @@ function TaskService(){
           task_id,
           response
         });
-      } else return Promise.reject(response);
+      } else {
+        return Promise.reject(response);
+      }
 
-    } catch(err) {
-      return Promise.reject(err);
+    } catch(e) {
+      return Promise.reject(e);
     }
   };
 
@@ -96,21 +99,19 @@ function TaskService(){
    *   taskId: taskId that is running
    * }
    */
-  this.stopTask = function(options={}){
+  this.stopTask = function(options= {}) {
     const { task_id } = options;
     const task = tasks.find(task => task.task_id === task_id);
-    if (task)clearInterval(task.intervalId);
+    if (task) {
+      clearInterval(task.intervalId);
+    }
   };
 
   /**
    * clare all task
    */
-  this.clear = function(){
-    tasks.forEach(({ taskId }) =>{
-      this.stopTask({
-        taskId
-      })
-    });
+  this.clear = function() {
+    tasks.forEach(({ taskId }) => this.stopTask({ taskId }));
     //reset to empty tasks
     tasks.splice(0);
   }
diff --git a/src/services/viewport.js b/src/services/viewport.js
index 8104fe30f..05bd9cdd1 100644
--- a/src/services/viewport.js
+++ b/src/services/viewport.js
@@ -3,41 +3,41 @@
  * @since v3.7
  */
 
-import ApplicationState from 'store/application-state';
+import ApplicationState                    from 'store/application-state';
 import { VIEWPORT as viewportConstraints } from 'app/constant';
-import GUI from 'services/gui';
+import GUI                                 from 'services/gui';
 
 const { base, inherit, uniqueId } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject                   = require('core/g3wobject');
 
 const ViewportService = function() {
   // state of viewport
   this.state = {
-    primaryView: 'map', // primary view (default)
+    primaryView:  'map', // primary view (default)
     // percentage of secondary view
     secondaryPerc: 0, // setted to 0 at beginning (not visible)
     // used to store if content vertical or horizontal is  changed by resised
     resized: {
       start: false,
-      'h': false,
-      'v': false
+      'h':   false,
+      'v':   false
     },
     // splitting orientation (h = horizontal, v = vertical)
     split: 'h',
     //map
     map: {
       sizes: {
-        width:0,
-        height:0
+        width:  0,
+        height: 0
       },
       aside: false
     },
     //content
     content: {
-      loading: false,
+      loading:  false,
       disabled: false,
       sizes: {
-        width: 0,
+        width:  0,
         height: 0
       },
       // store the resize vertical or horizontal
@@ -49,34 +49,34 @@ const ViewportService = function() {
           perc: 0
         }
       },
-      aside: true,
-      showgoback: true,
-      stack: [], // array elements of  stack contents
-      closable: true, // (x) is closable
-      backonclose: false, // back on prevoius content
-      contentsdata:[], // content data array
+      aside:        true,
+      showgoback:   true,
+      stack:        [], // array elements of stack contents
+      closable:     true, // (x) is closable
+      backonclose:  false, // back on prevoius content
+      contentsdata: [], // content data array
     },
     usermessage: {
-      id: null, // unique identify
-      show: false,
-      title: null,
-      message: null,
-      position: null,
-      type: null,
-      draggable: null,
-      cloasable: null,
-      autoclose: null,
+      id:          null, // unique identify
+      show:        false,
+      title:       null,
+      message:     null,
+      position:    null,
+      type:        null,
+      draggable:   null,
+      cloasable:   null,
+      autoclose:   null,
       textMessage: false,
       hooks: {
         header: null,
-        body: null,
+        body:   null,
         footer: null
       }
     }
   };
   // content of viewport (map and content)
   this._components = {
-    map: null,
+    map:     null,
     content: null
   };
   // default contents
@@ -84,53 +84,66 @@ const ViewportService = function() {
   this._contextualMapComponent;
 
   // minimun height and width of secondary view
-  this._secondaryViewMinWidth = viewportConstraints.resize.content.min;
-  this._secondaryViewMinHeight =  viewportConstraints.resize.content.min;
+  this._secondaryViewMinWidth     = viewportConstraints.resize.content.min;
+  this._secondaryViewMinHeight    =  viewportConstraints.resize.content.min;
   this._immediateComponentsLayout = true;
-  this.init = function(options={}) {
-    const {primaryview='map', split='h', components} = options;
-    // check if it set primary view (map is default)
+  this.init = function(opts= {}) {
+    const { primaryview='map', split='h', components } = opts;
+    // check if it set primary view (a map is default)
     this.state.primaryView = primaryview;
     // check splitting property
-    this.state.split = split;
+    this.state.split       = split;
     // add component (map and content)
     this._addComponents(components);
   };
 
   // Method to set true or false of content
-  this.setResized = function (type, bool=false) {
+  this.setResized = function (type, bool= false) {
     this.state.resized[type] = bool;
   };
 
-  this.showUserMessage = function({title, subtitle, message, type, position, size, draggable, duration, textMessage=false, closable, autoclose, hooks={}}={}) {
+  this.showUserMessage = function({
+    title,
+    subtitle,
+    message,
+    type,
+    position,
+    size,
+    draggable,
+    duration,
+    textMessage = false,
+    closable,
+    autoclose,
+    hooks = {}
+  } = {}) {
     this.closeUserMessage();
     setTimeout(() => {
-      this.state.usermessage.id = uniqueId();
-      this.state.usermessage.show = true;
-      this.state.usermessage.message = message;
-      this.state.usermessage.textMessage = textMessage;
-      this.state.usermessage.title = title;
-      this.state.usermessage.subtitle = subtitle;
-      this.state.usermessage.position = position;
-      this.state.usermessage.duration = duration;
-      this.state.usermessage.type = type;
-      this.state.usermessage.show = true;
-      this.state.usermessage.size = size;
-      this.state.usermessage.autoclose = autoclose;
-      this.state.usermessage.closable = closable;
-      this.state.usermessage.draggable = draggable;
+      this.state.usermessage.id           = uniqueId();
+      this.state.usermessage.show         = true;
+      this.state.usermessage.message      = message;
+      this.state.usermessage.textMessage  = textMessage;
+      this.state.usermessage.title        = title;
+      this.state.usermessage.subtitle     = subtitle;
+      this.state.usermessage.position     = position;
+      this.state.usermessage.duration     = duration;
+      this.state.usermessage.type         = type;
+      this.state.usermessage.show         = true;
+      this.state.usermessage.size         = size;
+      this.state.usermessage.autoclose    = autoclose;
+      this.state.usermessage.closable     = closable;
+      this.state.usermessage.draggable    = draggable;
       this.state.usermessage.hooks.header = hooks.header; // has to be a vue component or vue object
-      this.state.usermessage.hooks.body = hooks.body; // has to be a vue component or vue object
+      this.state.usermessage.hooks.body   = hooks.body; // has to be a vue component or vue object
       this.state.usermessage.hooks.footer = hooks.footer; // has to be a vue component or vue object
     });
     return this.state.usermessage;
   };
 
   this.closeUserMessage = function() {
-    this.state.usermessage.id = null;
-    this.state.usermessage.show = false;
+    this.state.usermessage.id          = null;
+    this.state.usermessage.show        = false;
     this.state.usermessage.textMessage = false;
-    this.state.usermessage.message = '';
+    this.state.usermessage.message     = '';
   };
 
   this.getState = function() {
@@ -145,7 +158,7 @@ const ViewportService = function() {
     return this.state.content;
   };
 
-  this.setLoadingContent = function(loading=false) {
+  this.setLoadingContent = function(loading= false) {
     this.state.content.loading = loading;
   };
 
@@ -162,18 +175,22 @@ const ViewportService = function() {
       })
      }
      */
-    Object.entries(components).forEach(([viewName, component]) => {
-      // check if component are map or content
-      if (Object.keys(this._components).indexOf(viewName) > -1) {
-        component.mount(`#g3w-view-${viewName}`, true)
-          .then(() => {
-            this._components[viewName] = component;
-            // check if view name is map
-            if (viewName === 'map') this._defaultMapComponent = component; // set de default component to map
-          })
-          .fail(err => console.log(err));
-      }
-    })
+    Object
+      .entries(components)
+      .forEach(([viewName, component]) => {
+        // check if component are map or content
+        if (Object.keys(this._components).indexOf(viewName) > -1) {
+          component.mount(`#g3w-view-${viewName}`, true)
+            .then(() => {
+              this._components[viewName] = component;
+              // check if view name is map
+              if ('map' === viewName) {
+                this._defaultMapComponent = component;
+              } // set de default component to map
+            })
+            .fail(e => console.warn(e));
+        }
+      })
   };
 
   this.showMap = function() {
@@ -183,11 +200,16 @@ const ViewportService = function() {
   };
 
   this.showContextualMap = function(options={}) {
-    if (!this._contextualMapComponent) this._contextualMapComponent = this._defaultMapComponent;
-    if (this._contextualMapComponent != this._defaultMapComponent) this._toggleMapComponentVisibility(this._defaultMapComponent,false);
+    if (!this._contextualMapComponent) {
+      this._contextualMapComponent = this._defaultMapComponent;
+    }
+    if (this._contextualMapComponent != this._defaultMapComponent) {
+      this._toggleMapComponentVisibility(this._defaultMapComponent,false);
+    }
     if (!this._contextualMapComponent.ismount()) {
       const contextualMapComponent = this._contextualMapComponent;
-      contextualMapComponent.mount('#g3w-view-map', true)
+      contextualMapComponent
+        .mount('#g3w-view-map', true)
         .then(() => this._components['map'] = contextualMapComponent);
     } else {
       this._components['map'] = this._contextualMapComponent;
@@ -207,13 +229,19 @@ const ViewportService = function() {
   };
 
   this.setContextualMapComponent = function(mapComponent) {
-    if (mapComponent === this._defaultMapComponent) return;
-    if (this._contextualMapComponent) this._contextualMapComponent.unmount();
+    if (mapComponent === this._defaultMapComponent) {
+      return;
+    }
+    if (this._contextualMapComponent) {
+      this._contextualMapComponent.unmount();
+    }
     this._contextualMapComponent = mapComponent;
   };
 
   this.resetContextualMapComponent = function() {
-    this._contextualMapComponent && this._contextualMapComponent.unmount();
+    if (this._contextualMapComponent) {
+      this._contextualMapComponent.unmount();
+    }
     this._contextualMapComponent = this._defaultMapComponent;
   };
 
@@ -268,15 +296,15 @@ const ViewportService = function() {
 
   this.resetToDefaultContentPercentage = function(){
     const currentRightPanel = this.getCurrentContentLayout();
-    currentRightPanel[`${this.state.split === 'h'? 'width' : 'height'}`] = currentRightPanel[`${this.state.split === 'h'? 'width' : 'height'}_default`];
-    currentRightPanel[`${this.state.split === 'h'? 'width' : 'height'}_100`] = false;
+    currentRightPanel[`${this.state.split === 'h' ? 'width' : 'height'}`] = currentRightPanel[`${this.state.split === 'h' ? 'width' : 'height'}_default`];
+    currentRightPanel[`${this.state.split === 'h' ? 'width' : 'height'}_100`] = false;
     this._layoutComponents();
   };
 
   this.toggleFullViewContent = function(){
     ApplicationState.gui.layout[ApplicationState.gui.layout.__current]
-      .rightpanel[`${this.state.split === 'h'? 'width' : 'height'}_100`] = !ApplicationState.gui.layout[ApplicationState.gui.layout.__current]
-      .rightpanel[`${this.state.split === 'h'? 'width' : 'height'}_100`];
+      .rightpanel[`${this.state.split === 'h' ? 'width' : 'height'}_100`] = !ApplicationState.gui.layout[ApplicationState.gui.layout.__current]
+      .rightpanel[`${this.state.split === 'h' ? 'width' : 'height'}_100`];
     this._layoutComponents();
   };
 
@@ -292,7 +320,7 @@ const ViewportService = function() {
   // pull the last element of contentStack
   this.popContent = function() {
     const d = $.Deferred();
-    // check if content exist compontentStack
+    // check if content exists compontent Stack
     if (this.state.content.contentsdata.length) {
       this.recoverDefaultMap();
       const data = this._components.content.getPreviousContentData();
@@ -306,7 +334,9 @@ const ViewportService = function() {
           this._layout('pop-content');
           d.resolve(this._components.contentgetCurrentContentData)
         })
-    } else d.reject();
+    } else {
+      d.reject();
+    }
     return d.promise();
   };
 
@@ -332,14 +362,20 @@ const ViewportService = function() {
     const currentContent = this.getCurrentContent();
     if (currentContent) {
       const {title, crumb} = options;
-      if (title) currentContent.options.title = title;
-      if (crumb) currentContent.options.crumb = crumb;
+      if (title) {
+        currentContent.options.title = title;
+      }
+      if (crumb) {
+        currentContent.options.crumb = crumb;
+      }
     }
   };
 
   this.changeCurrentContentTitle = function(title=''){
     const currentContent = this.getCurrentContent();
-    if (currentContent) currentContent.options.title = title;
+    if (currentContent) {
+      currentContent.options.title = title;
+    }
   };
 
   this.isContentOpen = function() {
@@ -371,29 +407,34 @@ const ViewportService = function() {
   };
 
   this.removeContent = function() {
-    // check if backonclose proprerty is  true o false
-    // to remove all content stack or just last component
-    if (this.state.content.backonclose && this.state.content.contentsdata.length > 1) this.popContent();
-    else return this.closeContent();
+    // check if backonclose proprerty is true or false
+    // to remove all content stacks or just last component
+    if (this.state.content.backonclose && this.state.content.contentsdata.length > 1) {
+      this.popContent();
+    } else {
+      return this.closeContent();
+    }
   };
 
   this.isPrimaryView = function(viewName) {
-    return this.state.primaryView == viewName;
+    return viewName == this.state.primaryView ;
   };
 
   this.setPrimaryView = function(viewTag) {
-    if (this.state.primaryView !== viewTag) this.state.primaryView = viewTag;
+    if (viewTag !== this.state.primaryView ) {
+      this.state.primaryView = viewTag;
+    }
     this._layout();
   };
 
   this.showPrimaryView = function(perc=null) {
-    if (perc && this.state.secondaryVisible && this.state.secondaryPerc === 100) {
+    if (perc && this.state.secondaryVisible && 100 === this.state.secondaryPerc) {
       this.state.secondaryPerc = 100 - perc;
       this._layout();
     }
   };
 
-  this.showSecondaryView = function(split=this.state.split, perc=this.state.perc) {
+  this.showSecondaryView = function(split = this.state.split, perc = this.state.perc) {
     this.state.secondaryVisible = true;
     this.state.split = split;
     this.state.secondaryPerc = perc;
@@ -401,7 +442,7 @@ const ViewportService = function() {
   };
 
   // close secondary view
-  this.closeSecondaryView = function(event=null) {
+  this.closeSecondaryView = function(event = null) {
     const d = $.Deferred();
     const secondaryViewComponent = this._components[this._otherView(this.state.primaryView)];
     if (secondaryViewComponent.clearContents) {
@@ -443,37 +484,50 @@ const ViewportService = function() {
    * @private
    */
   this._prepareContentView = function(options={}) {
-    const {title, split=null,
-      closable=true, backonclose=true, style={}, showgoback=true, headertools=[]} = options;
-    this.state.content.title = title;
-    this.state.content.split =  split;
-    this.state.content.closable = closable;
-    this.state.content.backonclose = backonclose;
+    const {
+      title,
+      split          = null,
+      closable    = true,
+      backonclose = true,
+      style = {},
+      showgoback  = true,
+      headertools   = [],
+    } = options;
+    this.state.content.title        = title;
+    this.state.content.split        = split;
+    this.state.content.closable     = closable;
+    this.state.content.backonclose  = backonclose;
     this.state.content.contentsdata = this._components.content.contentsdata;
-    this.state.content.style = style;
-    this.state.content.headertools = headertools;
-    this.state.content.showgoback = showgoback;
+    this.state.content.style        = style;
+    this.state.content.headertools  = headertools;
+    this.state.content.showgoback   = showgoback;
   };
 
   // manage all layout logic
   // viewName: map or content
   //options.  percentage , splitting title etc ..
   this._showView = function(viewName, options={}) {
-    const {perc=this.getDefaultViewPerc(viewName), split='h'} = options;
+    const { perc= this.getDefaultViewPerc(viewName), split= 'h' } = options;
     let aside;
-    if (this.isPrimaryView(viewName)) aside = (typeof(options.aside) == 'undefined') ? false : options.aside;
-    else aside = true;
+    if (this.isPrimaryView(viewName)) {
+      aside = (typeof(options.aside) == 'undefined') ? false : options.aside;
+    } else {
+      aside = true;
+    }
     this.state[viewName].aside = aside;
     //calculate the content
     const secondaryPerc = this.isPrimaryView(viewName) ? 100 - perc : perc;
-    //show Secondary View content only if more then 0
-    if (secondaryPerc > 0) this.showSecondaryView(split, secondaryPerc);
-    else return this.closeSecondaryView();
+    //show Secondary View content only if more than 0
+    if (secondaryPerc > 0)  {
+      this.showSecondaryView(split, secondaryPerc);
+    } else {
+      return this.closeSecondaryView();
+    }
   };
 
   this._getReducedSizes = function() {
     const contentEl = $('.content');
-    let reducedWidth = 0;
+    let reducedWidth  = 0;
     let reducedHeight = 0;
     const sideBarToggleEl = $('.sidebar-aside-toggle');
     if (contentEl && this.state.secondaryVisible && this.isFullViewContent()) {
@@ -496,13 +550,15 @@ const ViewportService = function() {
   this._layout = function(event=null) {
     const reducesdSizes = this._getReducedSizes();
     this._setViewSizes(reducesdSizes.reducedWidth, reducesdSizes.reducedHeight);
-    if (this._immediateComponentsLayout) this._layoutComponents(event);
+    if (this._immediateComponentsLayout) {
+      this._layoutComponents(event);
+    }
   };
 
   this._setViewSizes = function() {
-    const primaryView = this.state.primaryView;
+    const primaryView   = this.state.primaryView;
     const secondaryView = this._otherView(primaryView);
-    const {width:viewportWidth, height:viewportHeight}= this.getViewportSize();
+    const { width: viewportWidth, height: viewportHeight } = this.getViewportSize();
     // assign all width and height of the view to primary view (map)
     let primaryWidth;
     let primaryHeight;
@@ -510,20 +566,20 @@ const ViewportService = function() {
     let secondaryHeight;
     // percentage of secondary view (content)
     const scale = (this.state.secondaryPerc !== 100 && !this.isFullViewContent() ? this.getContentPercentageFromCurrentLayout(this.state.split) : 100) / 100;
-    if (this.state.split === 'h') {
-      secondaryWidth = this.state.secondaryVisible ? Math.max((viewportWidth * scale), this._secondaryViewMinWidth) : 0;
+    if ('h' === this.state.split ) {
+      secondaryWidth  = this.state.secondaryVisible ? Math.max((viewportWidth * scale), this._secondaryViewMinWidth) : 0;
       secondaryHeight = viewportHeight;
-      primaryWidth = viewportWidth - secondaryWidth;
-      primaryHeight = viewportHeight;
+      primaryWidth    = viewportWidth - secondaryWidth;
+      primaryHeight   = viewportHeight;
     } else {
-      secondaryWidth = viewportWidth;
+      secondaryWidth  = viewportWidth;
       secondaryHeight = this.state.secondaryVisible ? Math.max((viewportHeight * scale),this._secondaryViewMinHeight) : 0;
-      primaryWidth = this.state.secondaryVisible && scale === 1 ? 0 : viewportWidth;
-      primaryHeight = viewportHeight - secondaryHeight;
+      primaryWidth    = this.state.secondaryVisible && scale === 1 ? 0 : viewportWidth;
+      primaryHeight   = viewportHeight - secondaryHeight;
     }
-    this.state[primaryView].sizes.width = primaryWidth;
-    this.state[primaryView].sizes.height = primaryHeight;
-    this.state[secondaryView].sizes.width = secondaryWidth;
+    this.state[primaryView].sizes.width    = primaryWidth;
+    this.state[primaryView].sizes.height   = primaryHeight;
+    this.state[secondaryView].sizes.width  = secondaryWidth;
     this.state[secondaryView].sizes.height = secondaryHeight;
   };
 
@@ -535,15 +591,14 @@ const ViewportService = function() {
   };
 
   this._viewportHeight = function() {
-    const topHeight = $('.navbar-header').innerHeight();
-    return $(document).innerHeight() - topHeight;
+    return $(document).innerHeight() - $('.navbar-header').innerHeight();
   };
 
   this._viewportWidth = function() {
-    const main_sidebar = $(".main-sidebar");
-    const offset = main_sidebar.length && main_sidebar.offset().left;
+    const main_sidebar  = $(".main-sidebar");
+    const offset         = main_sidebar.length && main_sidebar.offset().left;
     const width = main_sidebar.length && main_sidebar[0].getBoundingClientRect().width;
-    const sideBarSpace = width + offset;
+    const sideBarSpace   = width + offset;
     return $('#app')[0].getBoundingClientRect().width - sideBarSpace;
   };
 
@@ -565,44 +620,43 @@ const ViewportService = function() {
    * @param perc
    */
   this.setContentPercentageFromCurrentLayout = function(type=this.state.split, perc){
-    this.getCurrentContentLayout()[type==='h'? 'width': 'height'] = perc;
+    this.getCurrentContentLayout()['h' === type ? 'width' : 'height'] = perc;
   };
 
   this.getContentPercentageFromCurrentLayout = function(type= this.state.split){
-    return this.getCurrentContentLayout()[type==='h'? 'width': 'height'];
+    return this.getCurrentContentLayout()['h' === type ? 'width': 'height'];
   };
 
   this.getCurrentContentLayout = function(){
     return ApplicationState.gui.layout[ApplicationState.gui.layout.__current].rightpanel;
   };
 
-  // load components of  viewport
+  // load components of viewport
   // after right size setting
   this._layoutComponents = function(event=null) {
     requestAnimationFrame(() => {
       const reducesdSizes = this._getReducedSizes();
-      const reducedWidth = reducesdSizes.reducedWidth || 0;
+      const reducedWidth  = reducesdSizes.reducedWidth || 0;
       const reducedHeight = reducesdSizes.reducedHeight || 0;
-      // for each components
+      // for each component
       this._setViewSizes();
       Object.entries(this._components).forEach(([name, component]) => {
         const width = this.state[name].sizes.width - reducedWidth ;
         const height = this.state[name].sizes.height - reducedHeight;
         component.layout(width, height);
       });
-      event && setTimeout(()=> {
-        this.emit(event);
-        GUI.emit(event);
-      })
+      if (event) {
+        setTimeout(() => { this.emit(event); GUI.emit(event); })
+      }
     });
   };
 
   /**
-   * function called at start of application (just one time)
+   * function called at the start of application (just one time)
    * @private
    */
   this._firstLayout = function() {
-    let drawing = false;
+    let drawing     = false;
     let resizeFired = false;
     function triggerResize() {
       resizeFired = true;
@@ -612,7 +666,7 @@ const ViewportService = function() {
      * function called from resize of browser windows (also open dev tool)
      */
     const drawResize = () => {
-      if (resizeFired === true) {
+      if (true === resizeFired ) {
         resizeFired = false;
         drawing = true;
         this._layout('resize');
@@ -622,7 +676,7 @@ const ViewportService = function() {
       }
     };
     // GUI ready event
-    GUI.on('ready',() => {
+    GUI.on('ready', () => {
       /**
        * SetSidebar width (used by components/Viewport.vue single file component)
        */
diff --git a/src/store/application-state.js b/src/store/application-state.js
index 7841a3497..24073f4e9 100644
--- a/src/store/application-state.js
+++ b/src/store/application-state.js
@@ -128,7 +128,15 @@ const STATE = Vue.observable({
    */
   tokens: {
     filtertoken: undefined
-  }
+  },
+
+  /**
+   * @since 3.10.0
+   */
+  querybuilder: {
+    cache: {},
+    searches: JSON.parse(window.localStorage.getItem('QUERYBUILDERSEARCHES') || "{}"),
+  },
 
 });
 
diff --git a/src/store/catalog-layers.js b/src/store/catalog-layers.js
index d0cdcfd51..5841d0140 100644
--- a/src/store/catalog-layers.js
+++ b/src/store/catalog-layers.js
@@ -3,13 +3,6 @@
  * @since v3.6
  */
 
-const { base, inherit } = require('utils');
 const LayersStoresRegistry = require('core/layers/layersstoresregistry');
 
-function CatalogLayersStoresRegistry() {
-  base(this);
-}
-
-inherit(CatalogLayersStoresRegistry, LayersStoresRegistry);
-
-export default new CatalogLayersStoresRegistry();
+export default new LayersStoresRegistry();
\ No newline at end of file
diff --git a/src/store/components.js b/src/store/components.js
index 6eb989d1e..65c517d36 100644
--- a/src/store/components.js
+++ b/src/store/components.js
@@ -5,40 +5,45 @@
  * @deprecated will be probably removed after v4.x. Use Vue Single File Components (SFC) instead
  */
 
-const G3WObject = require('core/g3wobject');
-const { base, inherit } = require('utils');
+import G3WObject from 'core/g3w-object';
+
+const emitter = new G3WObject();
 
-//class Componet Registry (singleton)
 // store all components added
-function ComponentsRegistry() {
-  this.components = {};
-  this.registerComponent = function(component) {
+const ComponentsRegistry = {
+
+  components: {},
+
+  /** used only by "g3w-catalog" → "_listenToMapVisibility(map_id, component)" */
+  on: emitter.on.bind(emitter),
+
+  registerComponent(component) {
     const id = component.getId();
-    if (!this.components[id]) {
+    if (undefined === this.components[id]) {
       this.components[id] = component;
-      this.emit('componentregistered', component);
+      emitter.emit('componentregistered', component);
     }
-  };
+  },
 
-  this.getComponent = function(id) {
+  getComponent(id) {
     return this.components[id];
-  };
+  },
 
-  this.getComponents = function() {
+  getComponents() {
     return this.components;
-  };
+  },
 
-  this.unregisterComponent = function(id) {
+  unregisterComponent(id) {
     const component = this.components[id];
+    if (component && 'function' === typeof component.destroy) {
+      component.destroy();
+    }
     if (component) {
-      if (typeof component.destroy === 'function') component.destroy();
       this.components[id] = null;
     }
     return component;
-  };
-  base(this);
-}
+  },
 
-inherit(ComponentsRegistry, G3WObject);
+};
 
-export default new ComponentsRegistry();
+export default ComponentsRegistry;
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 7678e925a..31c819cd8 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,11 +4,11 @@
  */
 
 import CatalogLayersStoresRegistry from './catalog-layers';
-import ComponentsRegistry from './components';
-import ControlsRegistry from './map-controls';
-import LayersStoresRegistry from './map-layers';
-import PluginsRegistry from './plugins';
-import ProjectsRegistry from './projects';
+import ComponentsRegistry          from './components';
+import ControlsRegistry            from './map-controls';
+import LayersStoresRegistry        from './map-layers';
+import PluginsRegistry             from './plugins';
+import ProjectsRegistry            from './projects';
 
 /**
  * @FIXME importing directly from this file breaks application
diff --git a/src/store/map-controls.js b/src/store/map-controls.js
index 6037c4573..177cfb91f 100644
--- a/src/store/map-controls.js
+++ b/src/store/map-controls.js
@@ -4,22 +4,22 @@
  */
 
 import ApplicationService from 'services/application';
-import GUI from 'services/gui';
-import { VM } from 'app/eventbus';
+import GUI                from 'services/gui';
+import { VM }             from 'app/eventbus';
 
 const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
+const G3WObject         = require('core/g3wobject');
 
 function ControlsRegistry() {
 
-  this._controls = {};
+  this._controls      = {};
 
-  this._offlineids = [];
+  this._offlineids    = [];
 
   /**
    * @since 3.8.0
    */
-  this.selectedLayer = null;
+  this.selectedLayer  = null;
 
   /**
    * @since 3.8.0
@@ -45,9 +45,9 @@ function ControlsRegistry() {
       const unWatches = {};
 
       // 1. update list `this.externalLayers`
-      // 2. update list `unWatches` of layer un-watchers (based on unique name of layer)
+      // 2. update list `unWatches` of layer un-watchers (based on the unique name of layer)
       // 3. call `this.onAddExternalLayer`
-      CatalogService.onafter('addExternalLayer', ({layer, type}) => {
+      CatalogService.onafter('addExternalLayer', ({ layer, type }) => {
         if ('vector' === type) {
           this.externalLayers.push(layer);
           // Add event listener of selected property to set selected layer
@@ -68,8 +68,8 @@ function ControlsRegistry() {
         }
       });
 
-      // 4. clean up any previously attached event listener
-      CatalogService.onafter('removeExternalLayer', ({name, type}) => {
+      // 4. Clean up any previously attached event listener
+      CatalogService.onafter('removeExternalLayer', ({ name, type }) => {
         if ('vector' === type) {
           this.externalLayers = this.externalLayers.filter(layer => {
             if (name === layer.name) {
@@ -94,9 +94,9 @@ function ControlsRegistry() {
      * @since 3.8.0
      */
     () => {
-      this._offlineids.forEach(controlItem => {
-        const control = this._controls[controlItem.id];
-        controlItem.enable = control.getEnable();
+      this._offlineids.forEach(c => {
+        const control = this._controls[c.id];
+        c.enable = control.getEnable();
         control.setEnable(false);
       })
     }
@@ -109,9 +109,7 @@ function ControlsRegistry() {
      * @since 3.8.0
      */
     () => {
-      this._offlineids.forEach(controlItem => {
-        this._controls[controlItem.id].setEnable(controlItem.enable);
-      })
+      this._offlineids.forEach(({ id, enable }) => this._controls[id].setEnable(enable))
     }
   );
 
@@ -133,7 +131,7 @@ function ControlsRegistry() {
   /**
    * @since 3.8.0
    */
-  this.getSelectedLayer = function(){
+  this.getSelectedLayer = function() {
     return this.selectedLayer;
   };
 
@@ -142,19 +140,19 @@ function ControlsRegistry() {
    * 
    * @since 3.8.0
    */
-  this.getExternalLayers = function(){
+  this.getExternalLayers = function() {
     return this.externalLayers;
   };
 
   /**
    * @since 3.8.0
    */
-  this.catalogSelectedLayer = function(layer){
+  this.catalogSelectedLayer = function(layer) {
     this.setSelectedLayer(layer.isSelected() ? layer : null);
 
     this.callControlsEventHandler({
       handler: 'onSelectLayer',
-      param: this.selectedLayer
+      param:   this.selectedLayer
     });
   };
 
@@ -165,22 +163,22 @@ function ControlsRegistry() {
    * 
    * @since 3.8.0
    */
-  this.callControlsEventHandler = function({handler, param}){
-    Object.values(this._controls).forEach((control) => {
-      if ('function' === typeof control[handler]) {
-        control[handler](param)
+  this.callControlsEventHandler = function({ handler, param }) {
+    Object.values(this._controls).forEach(c => {
+      if ('function' === typeof c[handler]) {
+        c[handler](param)
       }
     })
   };
 
   this._registerControl = function(id, control) {
     this._controls[id] = control;
-    if (control.offline === false) {
+    if (false === control.offline) {
       this._offlineids.push({
         id,
         enable: control.getEnable()
       });
-      control.getEnable() && control.setEnable(ApplicationService.isOnline())
+      if (control.getEnable()) { control.setEnable(ApplicationService.isOnline()) }
     }
   };
 
@@ -194,9 +192,7 @@ function ControlsRegistry() {
 
   this.unregisterControl = function(id) {
     const control = this.getControl(id);
-    if (!control) {
-      return false;
-    }
+    if (!control) { return false }
     GUI.getService('map').getMap().removeControl(control);
     delete this._controls[id];
     this._offlineids = this._offlineids.filter(_id => _id !== id);
diff --git a/src/store/map-layers.js b/src/store/map-layers.js
index bbd2559ee..815a01a60 100644
--- a/src/store/map-layers.js
+++ b/src/store/map-layers.js
@@ -3,13 +3,6 @@
  * @since v3.6
  */
 
-const { inherit, base } = require('utils');
 const LayersStoresRegistry = require('core/layers/layersstoresregistry');
 
-function MapLayersStoresRegistry() {
-  base(this);
-}
-
-inherit(MapLayersStoresRegistry, LayersStoresRegistry);
-
-export default new MapLayersStoresRegistry();
+export default new LayersStoresRegistry();
\ No newline at end of file
diff --git a/src/store/plugins.js b/src/store/plugins.js
index 677c8381b..d0c488213 100644
--- a/src/store/plugins.js
+++ b/src/store/plugins.js
@@ -59,7 +59,7 @@ function PluginsRegistry() {
    * CHECK IF STILL USEFUL. IT RELATED TO CHANGE MAP OLD BEHAVIOR (PREVIOUS VERSION 3.4).
    * NOW WHEN CHANGE MAP IS TRIGGER, PAGE IS RELOADED.
    */
-  ProjectsRegistry.onafter('setCurrentProject', project =>{
+  ProjectsRegistry.onafter('setCurrentProject', project => {
     this.gidProject = project.getGid();
   });
 
@@ -79,11 +79,10 @@ function PluginsRegistry() {
     this.setPluginsConfig(options.pluginsConfigs);
     Object.keys(this.pluginsConfigs).forEach(name => this._configurationPlugins.push(name)); // filter
     this.addLoadingPlugins();
-    this.otherPluginsConfig = options.otherPluginsConfig; 
-    this.setOtherPlugins();                                                                  // set other plugin on in initConfig.group.plugins (law for example)
+    this.otherPluginsConfig = options.otherPluginsConfig || {};
+    this.setOtherPlugins(); // set another plugin on in initConfig.group.plugins (law for example)
     this.setDependencyPluginConfig();
-    const plugins = await this._loadPlugins();                                               // load plugins
-    return Promise.resolve(plugins);
+    return await this._loadPlugins();  // load plugins
   };
 
   /**
@@ -92,7 +91,7 @@ function PluginsRegistry() {
    * 
    */
   this.addLoadingPlugins = function() {
-    Object.keys(this.pluginsConfigs).forEach(plugin => ApplicationService.loadingPlugin(plugin));
+    Object.keys(this.pluginsConfigs).forEach(p => ApplicationService.loadingPlugin(p));
   };
 
   /**
@@ -138,7 +137,7 @@ function PluginsRegistry() {
     const law = OTHERPLUGINS[0];
     if (this.otherPluginsConfig && this.otherPluginsConfig[law] && this.otherPluginsConfig[law].length) {
       // law plugin
-      this.pluginsConfigs[law] = this.otherPluginsConfig[law];
+      this.pluginsConfigs[law]     = this.otherPluginsConfig[law];
       this.pluginsConfigs[law].gid = this.otherPluginsConfig.gid;
     } else {
       delete this.pluginsConfigs[law];
diff --git a/src/store/projects.js b/src/store/projects.js
index c4d75f005..7d7dd98d2 100644
--- a/src/store/projects.js
+++ b/src/store/projects.js
@@ -4,11 +4,11 @@
  */
 
 import CatalogLayersStoresRegistry from 'store/catalog-layers';
-import MapLayersStoresRegistry from 'store/map-layers';
+import MapLayersStoresRegistry     from 'store/map-layers';
 
 const { base, inherit } = require('utils');
-const G3WObject = require('core/g3wobject');
-const Project = require('core/project/project');
+const G3WObject         = require('core/g3wobject');
+const Project           = require('core/project/project');
 
 /* service
     setup: init method
@@ -34,7 +34,7 @@ function ProjectsRegistry() {
 
     setCurrentProject(project) {
 
-      if (this.state.currentProject !== project) {
+      if (project !== this.state.currentProject ) {
         CatalogLayersStoresRegistry.removeLayersStores();
         MapLayersStoresRegistry.removeLayersStores();
       }
@@ -67,7 +67,7 @@ function ProjectsRegistry() {
   this._groupProjects  = [];
   this._projectConfigs = {};
 
-  //Inizialize configuration for all project belong to group
+  //Inizialize configuration for all projects belongs to group
   this.init = function(config = {}) {
     const d = $.Deferred();
 
@@ -94,7 +94,7 @@ function ProjectsRegistry() {
         this.initialized = true;
         d.resolve(project);
       })
-      .fail(error => d.reject(error));
+      .fail(e => d.reject(e));
 
     return d.promise();
   };
@@ -184,16 +184,17 @@ function ProjectsRegistry() {
 
   /**
    * Get project configuration
-   *  
-   * @param {unknown} projectGid 
+   *
+   * @param {unknown} projectGid
+   * @param options
    * @param {unknown} options.map_theme
    * @param {boolean} [options.reload = false] `true` = force to get project configuration from server
    */
-  this.getProject = function(projectGid, options = { reload:false}) {
+  this.getProject = function(projectGid, options = { reload : false}) {
     const d = $.Deferred();
     const pendingProject = this._groupProjects.find(project => project.gid === projectGid);
 
-    // skipe if project doesn't exist
+    // skip if a project doesn't exist
     if (!pendingProject) {
       d.reject("Project doesn't exist");
       return d.promise();
@@ -223,16 +224,13 @@ function ProjectsRegistry() {
         // add to project
         d.resolve((new Project(projectConfig)));
       })
-      .fail(error => d.reject(error))
+      .fail(error => d.reject(e))
     return d.promise();
   };
 
   this._setProjectRelations = function(projectConfig) {
     projectConfig.relations = (projectConfig.relations ? projectConfig.relations : [])
-      .map(relation => {
-        relation = this._updateRelation(projectConfig, relation);
-        return relation;
-      });
+      .map(r => this._updateRelation(projectConfig, r));
     return projectConfig.relations;
   };
 
@@ -290,17 +288,18 @@ function ProjectsRegistry() {
   /**
    * @since 3.8.0
    */
-  this.getBaseUrl = function(){
+  this.getBaseUrl = function() {
     return this.config.urls.baseurl;
   };
 
   /**
    * Fetch project configuration from remote server 
    * 
-   * @param config project base config 
+   * @param config project base config
+   * @param { Object } options
    * @param options.map_theme
    */
-  this._getProjectFullConfig = function(config, options={}) {
+  this._getProjectFullConfig = function(config, options = {}) {
     const d = $.Deferred();
 
     $
@@ -330,7 +329,7 @@ function ProjectsRegistry() {
         }
 
       })
-      .fail(error => d.reject(error));
+      .fail(e => d.reject(e));
 
     return d.promise();
   };
@@ -338,7 +337,7 @@ function ProjectsRegistry() {
   /**
    * @since 3.8.0
    */
-  this.getCurrentProjectGroup = function(){
+  this.getCurrentProjectGroup = function() {
     return this.currentProjectGroup;
   };
 
diff --git a/src/utils/base.js b/src/utils/base.js
index 9f6d7dfd5..ef5833d72 100644
--- a/src/utils/base.js
+++ b/src/utils/base.js
@@ -1,21 +1,20 @@
 /**
- * goole closure library implementation
+ * google closure library implementation
  */
 export function base(me, opt_methodName, var_args) {
   // who call base
   // noinspection JSAnnotator
   const caller = arguments.callee.caller;
   if (caller.superClass_) {
-    // This function constructor (that inherit from superClass_). Call the superclass constructor.
-    //It is a easy way to cal super class in binding to this
-    return caller.superClass_.constructor.apply(
-        me, Array.prototype.slice.call(arguments, 1));
+    // This function constructor (that inherits from superClass_).
+    // Call the superclass constructor.
+    //It is an easy way to cal superclass in binding to this
+    return caller.superClass_.constructor.apply(me, Array.prototype.slice.call(arguments, 1));
   }
   const args = Array.prototype.slice.call(arguments, 2);
   let foundCaller = false;
   //constructor is the constructor function of the object
-  for (let ctor = me.constructor;
-       ctor; ctor = ctor.superClass_ && ctor.superClass_.constructor) {
+  for (let ctor = me.constructor; ctor; ctor = ctor.superClass_ && ctor.superClass_.constructor) {
     if (ctor.prototype[opt_methodName] === caller) {
       foundCaller = true;
     } else if (foundCaller) {
@@ -27,11 +26,11 @@ export function base(me, opt_methodName, var_args) {
   // 1) The caller is an instance method.
   // 2) This method was not called by the right caller.
   if (me[opt_methodName] === caller) {
-    // call the function from prototype object
+    // call the function from a prototype object
     return me.constructor.prototype[opt_methodName].apply(me, args);
   } else {
     throw Error(
-        'base called from a method of one name ' +
-        'to a method of a different name');
+      'base called from a method of one name ' +
+      'to a method of a different name');
   }
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/utils/createFilterFormField.js b/src/utils/createFilterFormField.js
index 31773261d..1db44acb8 100644
--- a/src/utils/createFilterFormField.js
+++ b/src/utils/createFilterFormField.js
@@ -1,25 +1,24 @@
-import { createSingleFieldParameter } from './createSingleFieldParameter';
+import { createSingleFieldParameter } from 'utils/createSingleFieldParameter';
 
 const Filter     = require('core/layers/filter/filter');
 const Expression = require('core/layers/filter/expression');
 
 /**
+ * @TODO deprecate `search_endpoint = 'ows'`
+ * 
  * Create filter from field based on search_endpoint
  */
 export function createFilterFormField({
   layer,
   field,
   value,
-  search_endpoint = 'ows',
+  search_endpoint = 'api',
   operator        = 'eq',
 }){
   let filter;
   switch (search_endpoint) {
     case 'ows':
-      const expression = new Expression();
-      expression.createExpressionFromField({ field, value, operator, layerName: layer.getWMSLayerName() });
-      filter = new Filter();
-      filter.setExpression(expression.get());
+      filter = (new Filter()).setExpression((new Expression()).createExpressionFromField({ field, value, operator, layerName: layer.getWMSLayerName() }).get());
       break;
     case 'api':
       filter = createSingleFieldParameter({ field, value, operator });
diff --git a/src/utils/createFilterFormInputs.js b/src/utils/createFilterFormInputs.js
index 006d41d03..c3703f465 100644
--- a/src/utils/createFilterFormInputs.js
+++ b/src/utils/createFilterFormInputs.js
@@ -1,9 +1,11 @@
-import { createSingleFieldParameter } from './createSingleFieldParameter';
+import { createSingleFieldParameter } from 'utils/createSingleFieldParameter';
 
 const Filter     = require('core/layers/filter/filter');
 const Expression = require('core/layers/filter/expression');
 
 /**
+ * @TODO deprecate `search_endpoint = 'ows'`
+ * 
  * @param layer single layer or an array of layers
  * @param search_endpoint
  * @param inputs
@@ -12,77 +14,41 @@ const Expression = require('core/layers/filter/expression');
  */
 export function createFilterFormInputs({
   layer,
-  search_endpoint = 'ows',
+  search_endpoint = 'api',
   inputs          = [],
 }) {
 
-  //check if is a single layer of array of layers
-  const isLayerArray = Array.isArray(layer);
-
-  let filter;
-  let filters = []; // in case of layer is an array
+  let filters;
 
   switch (search_endpoint) {
 
     case 'ows':
-      if (isLayerArray) {
-        layer.forEach(layer =>{
-          const expression = new Expression();
-          expression.createExpressionFromFilter(inputs, layer.getWMSLayerName());
-          filter = new Filter();
-          filter.setExpression(expression.get());
-          filters.push(filter);
-        })
-      } else {
-        const expression = new Expression();
-        expression.createExpressionFromFilter(inputs, layer.getWMSLayerName());
-        filter = new Filter();
-        filter.setExpression(expression.get());
-      }
+      filters = [].concat(layer).map(l => {
+        const e = new Expression();
+        e.createExpressionFromFilter(inputs, l.getWMSLayerName());
+        let f = new Filter();
+        f.setExpression(e.get());
+        return f;
+      });
       break;
 
     case 'api':
-      //get inputs length
-      const inputsLength = inputs.length;
-      const fields = inputs
-        .map((input, inputIndex) => {
-          //take in account multi key relation fields
-          if (Array.isArray(input.attribute)) {
-            const attributesLength = input.attribute.length;
-            return input.attribute
-              .reduce(
-                (accumulator, attribute, index) => {
-                return accumulator + createSingleFieldParameter({
-                  field: attribute,
-                  value: input.value[index],
-                  operator: input.operator,
-                  logicop: null
-                }) + (
-                  (index < attributesLength - 1) 
-                    ? '|AND,'
-                    : inputIndex < inputsLength - 1 
-                      ? `|${input.logicop},`
-                      : ''
-                );
-              }, '');
-          } else {
-            //need to add logic operator of input
-            return `${inputIndex > 0 ? `|${inputs[inputIndex -1].logicop},` : ''}${createSingleFieldParameter({
-              field: input.attribute,
-              value: input.value,
-              operator: input.operator,
-              logicop: input.logicop,
-            })}`
-          }
-        });
-      //need to join with empty value because comma separation at the end is already add at the end
-      filter = fields.length > 0 ? fields.join('') : undefined;
-      if (isLayerArray) {
-        layer.forEach(() => filters.push(filter));
-      }
+      const fields = inputs.map(({ attribute, value, operator, logicop }, i) => {
+        // multi key relation fields
+        if (Array.isArray(attribute)) {
+          return attribute
+            .map((attr, j) => createSingleFieldParameter({ field: attr, value: value[j], operator, logicop: null }))
+            .join('|AND,') || '';
+        }
+        // input logic operator 
+        return `${i > 0 ? `|${inputs[i-1].logicop},` : ''}${createSingleFieldParameter({ field: attribute, value, operator, logicop })}`
+      });
+      let filter = fields.join('') || undefined; // NB: comma separator is already added before
+      filters = [].concat(layer).map(() => filter);
       break;
 
   }
 
-  return isLayerArray ? filters  : filter;
-};
\ No newline at end of file
+  // check if is a single layer of an array of layers
+  return Array.isArray(layer) ? filters : filters[0];
+}
\ No newline at end of file
diff --git a/src/utils/createFilterFromString.js b/src/utils/createFilterFromString.js
index e726d83c3..17babb0e8 100644
--- a/src/utils/createFilterFromString.js
+++ b/src/utils/createFilterFromString.js
@@ -2,39 +2,38 @@ import { FILTER_EXPRESSION_OPERATORS } from 'app/constant';
 
 const Filter     = require('core/layers/filter/filter');
 const Expression = require('core/layers/filter/expression');
+const operators  = Object.entries(FILTER_EXPRESSION_OPERATORS);
 
+/**
+ * @TODO deprecate `search_endpoint = 'ows'`
+ */
 export function createFilterFromString({
   layer,
-  search_endpoint = 'ows',
+  search_endpoint = 'api',
   filter          = '',
 }) {
-  let stringFilter = filter;
+
   switch (search_endpoint) {
 
     case 'ows':
-      const expression = new Expression({ layerName: layer.getWMSLayerName(), filter:stringFilter });
-      filter = new Filter();
-      filter.setExpression(expression.get());
+      filter = (new Filter()).setExpression((new Expression({ filter, layerName: layer.getWMSLayerName() })).get());
       break;
 
     case 'api':
-      Object
-        .values(FILTER_EXPRESSION_OPERATORS)
-        .forEach(operator => {
-          stringFilter = stringFilter.replace(new RegExp(`\\s+${operator}\\s+`, 'g'), `${operator}`); // remove all blank space between operators
-          stringFilter = stringFilter.replace(new RegExp(`'${operator}`, 'g'), `${operator}`);        // leading single quote
-          stringFilter = stringFilter.replace(new RegExp(`${operator}'`, 'g'), `${operator}`);        // traling single quote
-        });
-      stringFilter = stringFilter.replace(/'$/g, '');
-      filter = stringFilter.replace(/"/g, '');
-
-      Object
-        .entries(FILTER_EXPRESSION_OPERATORS)
-        .forEach(([key, value]) => {
-        filter = filter.replace(new RegExp(value, "g"), value === 'AND' || value === 'OR' ? `|${key},` : `|${key}|`);
-      });
-      //encode value
-      filter = filter.split('|').map((value, index) => (0 === (index +1 ) % 3) ? encodeURIComponent(value) : value).join('|');
+      filter = operators
+        .reduce((acc, [_, op]) => acc
+          .replace(new RegExp(`\\s+${op}\\s+`, 'g'), `${op}`) // remove all blank space between operators
+          .replace(new RegExp(`'${op}`, 'g'), `${op}`)        // leading single quote
+          .replace(new RegExp(`${op}'`, 'g'), `${op}`)        // trailing single quote
+        , filter)
+        .replace(/'$/g, '')
+        .replace(/"/g, '');
+      filter = operators
+        .reduce((acc, [k, op]) => acc.replace(new RegExp(op, 'g'), ['AND', 'OR'].includes(op) ? `|${k},` : `|${k}|`), filter)
+        // encode value
+        .split('|')
+        .map((v, i) => (0 === (i+1) % 3) ? encodeURIComponent(v) : v)
+        .join('|');
       break;
 
   }
diff --git a/src/utils/createInputsFormFromFilter.js b/src/utils/createInputsFormFromFilter.js
new file mode 100644
index 000000000..7b33c1f49
--- /dev/null
+++ b/src/utils/createInputsFormFromFilter.js
@@ -0,0 +1,39 @@
+import { SEARCH_ALLVALUE }       from 'app/constant';
+import { toRawType }             from 'utils/toRawType';
+import { getDataForSearchInput } from 'utils/getDataForSearchInput';
+
+/**
+ * Create the right search structure for a search form
+ * 
+ * @param { Object } state
+ *
+ */
+export async function createInputsFormFromFilter(state) {
+
+  for (let i = 0; i <= state.forminputs.length - 1; i++) {
+
+    const input = state.forminputs[i];
+    const has_autocomplete = 'autocompletefield' === input.type;
+
+    // set key-values for select
+    input.values = [
+      ...('selectfield' === input.type ? [SEARCH_ALLVALUE] : []),          // set `SEARCH_ALLVALUE` as first element
+      ...(input.dependance_strict || has_autocomplete
+          ? input.values
+          : await getDataForSearchInput({ state, field: input.attribute }) // retrieve input values from server
+        )
+    ].map(value => 'Object' === toRawType(value) ? value : ({ key: value, value }));
+
+    // there is a dependence
+    if (input.dependance) {
+      state.loading[input.dependance] = false;
+      input.disabled                  = input.dependance_strict; // disabled for BACKCOMP
+    }
+
+    // save a copy of original values
+    input._values = [...input.values];
+
+    input.loading = false;
+  }
+
+}
\ No newline at end of file
diff --git a/src/utils/createSingleFieldParameter.js b/src/utils/createSingleFieldParameter.js
index 56f29e01f..6e276b966 100644
--- a/src/utils/createSingleFieldParameter.js
+++ b/src/utils/createSingleFieldParameter.js
@@ -1,7 +1,9 @@
 import { FILTER_EXPRESSION_OPERATORS } from 'app/constant';
-import { createFilterFromString } from './createFilterFromString';
+import { createFilterFromString }      from 'utils/createFilterFromString';
 
 /**
+ * @TODO deprecate `search_endpoint = 'ows'`
+ * 
  * @param { Object } opts
  * @param opts.layer
  * @param opts.field
@@ -10,7 +12,7 @@ import { createFilterFromString } from './createFilterFromString';
  * @param { string } [opts.logicop='OR']          'OR' as default
  * @param { string } [opts.search_endpoint='api'] 'api' as default
  * 
- * @returns {string}
+ * @returns { string } filter
  * 
  * @since 3.8.7
  */
@@ -22,41 +24,17 @@ export function createSingleFieldParameter({
   logicop         = 'OR',
   search_endpoint = 'api',
 }) {
-  /** Check if search_endpoint is api and value is an array */
-  if ('api' === search_endpoint && Array.isArray(value)) {
-    let filter = '';
-    const valueLenght = value.length;
-    value.forEach((value, index) => {
-      filter += `${field}|${operator.toLowerCase()}|${encodeURIComponent(value)}${index < valueLenght - 1 ? `|${logicop},` : ''}`;
-    });
-    return filter
-  }
-
-  /** Case search_endpoint is api and value is single value*/
-  if('api' === search_endpoint ) {
-    return `${field}|${operator.toLowerCase()}|${encodeURIComponent(value)}`;
-  }
-
-  //in case of search_endpoint equal to ows
-
-  // store filter string 
-  let filter = '';
 
-  // value is array of values
-  if (Array.isArray(value)) {
-    const valueLenght = value.length;
-    value.forEach((value, index) => {
-      filter += `"${field}" ${FILTER_EXPRESSION_OPERATORS[operator]} '${encodeURIComponent(value)}' ${index < valueLenght - 1 ? `${logicop} ` : ''}`
-    });
-  } else {
-    //single value
-    filter = `"${field}" ${FILTER_EXPRESSION_OPERATORS[operator]} '${encodeURIComponent(value)}'`;
+  // API search
+  if ('api' === search_endpoint) {
+    return [].concat(value).map(v => `${field}|${operator.toLowerCase()}|${encodeURIComponent(v)}`).join(`|${logicop},`);
   }
 
+  // OWS search
   return createFilterFromString({
     layer,
     search_endpoint,
-    filter,
+    filter: [].concat(value).map(v => `"${field}" ${FILTER_EXPRESSION_OPERATORS[operator]} '${encodeURIComponent(v)}' `).join(`${logicop} `),
   });
 
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/utils/doSearch.js b/src/utils/doSearch.js
new file mode 100644
index 000000000..3e04f6fbb
--- /dev/null
+++ b/src/utils/doSearch.js
@@ -0,0 +1,99 @@
+import { SEARCH_ALLVALUE }        from 'app/constant';
+import ProjectsRegistry           from 'store/projects';
+import DataRouterService          from 'services/data';
+import GUI                        from 'services/gui';
+import { createFilterFormInputs } from 'utils/createFilterFormInputs';
+
+/**
+ * Perform search
+ * 
+ * @param { Object } opts
+ * @param opts.filter
+ * @param opts.queryUrl
+ * @param opts.feature_count
+ * @param opts.show            - false = internal request (No output data)
+ * 
+ * @returns { Promise<void|unknown> }
+ */
+export async function doSearch({
+  filter,
+  queryUrl,
+  show,
+  feature_count = 10000,
+  state
+} = {}) {
+
+  queryUrl = undefined !== queryUrl ? queryUrl : state.queryurl;
+  show     = undefined !== show     ? show     : 'search' === state.type;
+
+  state.searching = true;
+
+  let data, parsed;
+
+  try {
+    data = await DataRouterService.getData('search:features', {
+      inputs: {
+        layer: state.search_layers,
+        filter: filter || createFilterFormInputs({
+          layer:  state.search_layers,
+          inputs: state.forminputs.filter(input => -1 === [null, undefined, SEARCH_ALLVALUE].indexOf(input.value) && '' !== input.value.toString().trim()), // Filter input by NONVALIDVALUES
+        }),
+        queryUrl,
+        formatter: 1,
+        feature_count,
+        raw: false // in order to get raw response
+      },
+      outputs: show && { title: state.title }
+    });
+
+    // auto zoom to query
+    if (show && ProjectsRegistry.getCurrentProject().state.autozoom_query && data && data.data && 1 === data.data.length) {
+      GUI.getService('map').zoomToFeatures(data.data[0].features);
+    }
+
+    const search_1n = !show           && ('search_1n' === state.type);
+    const features  = search_1n       && (data.data[0] || {}).features || []
+    const relation  = features.length && ProjectsRegistry.getCurrentProject().getRelationById(state.search_1n_relationid); // child and father relation fields (search father layer id based on result of child layer)
+    const layer     = relation        && ProjectsRegistry.getCurrentProject().getLayerById(relation.referencedLayer);      // father layer id
+
+    // no features on result → show empty message
+    if (search_1n && !features.length) {
+      DataRouterService.showEmptyOutputs();
+      parsed = [];
+    }
+
+    // parse search_1n
+    if (relation) {
+      const { referencedField, referencingField } = relation.fieldRef;
+      parsed = await DataRouterService.getData('search:features', {
+        inputs: {
+          layer,
+          filter: createFilterFormInputs({
+            layer,
+            inputs: features.map(f => ({
+              attribute: (1 === referencedField.length ? referencedField[0] : referencedField),
+              logicop:   'OR',
+              operator:  'eq',
+              value:     [...new Set((1 === referencingField.length // get unique values
+                ? features.map(f => f.get(referencingField[0]))     // → single field relation
+                : referencingField.map(rf => f.get(rf))             // → multi field relation
+              ))],
+            })),
+          }),
+          formatter: 1,
+          feature_count
+        },
+        outputs: {
+          title: state.title
+        }
+      });
+    }
+
+  } catch(e) {
+    console.warn(e);
+  }
+
+  state.searching = false;
+
+  return parsed ? parsed : data;
+}
\ No newline at end of file
diff --git a/src/utils/downloadFile.js b/src/utils/downloadFile.js
index 263d47ab8..127f49299 100644
--- a/src/utils/downloadFile.js
+++ b/src/utils/downloadFile.js
@@ -1,41 +1,52 @@
-export function downloadFile({
+/** 
+ * @param { Object } file
+ * @param { string } file.filename
+ * @param file.content
+ * @param { string } file.url
+ * @param { string } file.mime_type
+ *  
+ * @returns { Blob }
+ */
+export async function downloadFile({
   filename,
   content,
   url,
   mime_type = 'text/plain',
 } = {}) {
-  const download = blob =>{
-    let temapAncor = document.createElement('a');
-    temapAncor.setAttribute('href', window.URL.createObjectURL(blob));
-    temapAncor.setAttribute('download', filename);
-    temapAncor.dataset.downloadurl = [mime_type, temapAncor.download, temapAncor.href].join(':');
-    temapAncor.click();
-    temapAncor = null;
-  };
-  return new Promise((resolve, reject) =>{
-    if (content) {
-      const blob = new Blob([content], {type: mime_type});
-      download(blob);
-      resolve();
-    } else if (url) {
-     fetch(url)
-       .then(async response => {
-         if (response.status === 200) {
-           mime_type = mime_type || response.headers.get('content-type');
-           filename = filename || response.headers.get('content-disposition').split('filename=').length ?
-             response.headers.get('content-disposition').split('filename=')[1] : 'g3w_download_file';
-           return response.blob();
-         } else if (response.status === 400 || response.status === 500){
-           const {message} = await response.json();
-           return Promise.reject(message)
-         }
-       })
-       .then(blob => {
-         download(blob);
-         resolve();
-       }).catch(error => {
-        reject(error)
-      })
+
+  if (content) {
+    return _download(
+      new Blob([content], { type: mime_type }),
+      filename,
+      mime_type,
+    );
+  }
+
+  if (url) {
+    const d = await fetch(url);
+    if (400 === d.status || 500 === d.status) {
+      throw (await d.json()).message;
     }
-  })
-};
\ No newline at end of file
+    if (200 === d.status) {
+      _download(
+        await d.blob(),
+        (
+          filename || d.headers.get('content-disposition').split('filename=').length
+            ? d.headers.get('content-disposition').split('filename=')[1]
+            : 'g3w_download_file'
+        ),
+        mime_type || d.headers.get('content-type'),
+      );
+    }
+  }
+
+}
+
+function _download(blob, filename, mime_type) {
+  let a = document.createElement('a');
+  a.setAttribute('href', window.URL.createObjectURL(blob));
+  a.setAttribute('download', filename);
+  a.dataset.downloadurl = [mime_type, a.download, a.href].join(':');
+  a.click();
+  a = null;
+}
\ No newline at end of file
diff --git a/src/utils/getDataForSearchInput.js b/src/utils/getDataForSearchInput.js
new file mode 100644
index 000000000..87f64e40f
--- /dev/null
+++ b/src/utils/getDataForSearchInput.js
@@ -0,0 +1,63 @@
+import { SEARCH_ALLVALUE }            from 'app/constant';
+import { createSingleFieldParameter } from 'utils/createSingleFieldParameter';
+
+/**
+ * @returns { Array } of unique values from field
+ */
+export async function getDataForSearchInput({ state, field, suggest }) {
+
+  try {
+
+    // check if a field has a dependance
+    const parent = state.forminputs.find(d => d.attribute === field);
+    let dep      = parent && parent.dependance;
+    const cached = dep && state.forminputs.some(d => dep === d.dependance && d.dvalues.length);
+
+    // get unique value from each layers
+    let response = (
+      await Promise.allSettled(state.search_layers.map(l => l.getFilterData({
+          suggest,
+          fformatter: field,
+          ordering: field,
+          field: getDataForSearchInput.field({
+            state,
+            field: dep,
+            fields: cached && ![SEARCH_ALLVALUE, undefined].includes(parent.value)
+              ? [createSingleFieldParameter({ field: dep, value: parent.value, operator: state.forminputs.find(d =>  d.attribute === dep).operator }) ]
+              : [],
+          }),
+        })))
+    )
+      .filter(d => 'fulfilled' === d.status)
+      .reduce((acc, d) => acc.concat(d.value.data || []), []) // uniques by fformatter
+      .map(([value, key]) => ({ key, value }));
+
+    return response;
+
+  } catch(e) { console.warn(e); }
+
+  return [];
+}
+
+/**
+ * Traverse field dependecies
+ */
+getDataForSearchInput.field = ({ state, field, fields = [] } = {}) => {
+  const parent = state.forminputs.find(d => d.attribute === field);
+  let dep      = parent && parent.dependance;
+  const cached = dep && state.forminputs.some(d => dep === d.dependance && d.dvalues.length);
+
+  if (!cached || SEARCH_ALLVALUE === parent.value) {
+    return (fields || []).join() || undefined;
+  }
+
+  // get current field dependance
+  // In case of some input dependency is not filled
+  if (undefined !== parent.value) {
+    // need to set to lower a case for api purpose
+    const { op, logicop } = state.forminputs.find(f =>  f.attribute === dep).operator;
+    fields.unshift(`${dep}|${op.toLowerCase()}|${encodeURI(parent.value)}|` + (fields.length ? logicop.toLowerCase() : ''));
+  }
+
+  return getDataForSearchInput.field({ state, fields, field: dep });
+}
\ No newline at end of file
diff --git a/src/utils/imageToDataURL.js b/src/utils/imageToDataURL.js
index ce69cb2c3..b231970da 100644
--- a/src/utils/imageToDataURL.js
+++ b/src/utils/imageToDataURL.js
@@ -3,15 +3,19 @@ export function imageToDataURL({
   type     = 'image/jpeg',
   callback = () => {},
 }) {
-  const image = new Image();
-  image.onload = function() {
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    canvas.height = this.naturalHeight;
-    canvas.width = this.naturalWidth;
-    context.drawImage(this, 0, 0);
-    const dataURL = canvas.toDataURL(type);
-    callback(dataURL);
-  };
-  image.src = src;
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = function() {
+      const canvas  = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      canvas.height = this.naturalHeight;
+      canvas.width  = this.naturalWidth;
+      context.drawImage(this, 0, 0);
+      const dataURL = canvas.toDataURL(type);
+      callback(dataURL);
+      resolve(dataURL);
+    };
+    image.onerror = reject;
+    image.src = src;
+  });
 };
\ No newline at end of file
diff --git a/src/utils/index.js b/src/utils/index.js
index 87ed14945..d20408591 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -11,6 +11,7 @@ import { merge }                             from './merge';
 import { hasOwn }                            from './hasOwn';
 import { inherit }                           from './inherit';
 import { base }                              from './base';
+import { noop }                              from './noop';
 import { resolve }                           from './resolve';
 import { reject }                            from './reject';
 import { getAjaxResponses }                  from './getAjaxResponses';
@@ -71,14 +72,14 @@ function decimalAdjust(type, value, exp) {
 
 // Decimal round
 if (!Math.round10) {
-  /** @TODO deprecate (unusued code + bad practice) */
+  /** @TODO deprecate (unused code + bad practice) */
   Math.round10 = function(value, exp) {
     return decimalAdjust('round', value, exp);
   };
 }
 // Decimal floor
 if (!Math.floor10) {
-  /** @TODO deprecate (unusued code + bad practice) */
+  /** @TODO deprecate (unused code + bad practice) */
   Math.floor10 = function(value, exp) {
     return decimalAdjust('floor', value, exp);
   };
@@ -86,13 +87,13 @@ if (!Math.floor10) {
 
 // Decimal ceil
 if (!Math.ceil10) {
-  /** @TODO deprecate (unusued code + bad practice) */
+  /** @TODO deprecate (unused code + bad practice) */
   Math.ceil10 = function(value, exp) {
     return decimalAdjust('ceil', value, exp);
   };
 }
 
-/** @TODO deprecate (unusued code + bad practice) */
+/** @TODO deprecate (unused code + bad practice) */
 String.prototype.hashCode = function() {
   let hash = 0, i, chr, len;
   if (this.length === 0) return hash;
@@ -113,13 +114,13 @@ const utils = {
   hasOwn,
   inherit,
   base,
-  noop() {},
+  noop,
   truefnc() { return true },
-  /** @FIXME broken implementation, maybe unusued? */
+  /** @FIXME broken implementation, maybe unused? */
   falsefnc() { return true }, 
   resolve,
   reject,
-  /** @TODO remove if unusued */
+  /** @TODO remove if unused */
   getValueFromG3WObjectEvent() { },
   getAjaxResponses,
   trimValue,
diff --git a/src/utils/noop.js b/src/utils/noop.js
new file mode 100644
index 000000000..03b8b83a4
--- /dev/null
+++ b/src/utils/noop.js
@@ -0,0 +1 @@
+export function noop() {};
\ No newline at end of file
diff --git a/src/utils/print.js b/src/utils/print.js
new file mode 100644
index 000000000..2f65817dd
--- /dev/null
+++ b/src/utils/print.js
@@ -0,0 +1,124 @@
+import ProjectsRegistry             from 'store/projects';
+import ApplicationState             from 'store/application-state';
+import { convertObjectToUrlParams } from 'utils/convertObjectToUrlParams';
+
+const FETCH = {
+  /**
+   * @param { Object } opts
+   * @param opts.url
+   * @param opts.params
+   * @param opts.mime_type
+   * @return {Promise<{mime_type, layers: boolean, url: string}>}
+   */
+  async POST({ url, params, mime_type }) {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+      body: convertObjectToUrlParams(params),
+    });
+    if (!response.ok) {
+      //@TODO Need to translate
+      throw new Error(500 === response.status ? 'Internal Server Error' : 'Request Failed');
+    }
+    return {
+      mime_type,
+      layers: true,
+      url: URL.createObjectURL(await response.blob()),
+    };
+  },
+  /**
+   * @param { Object } opts
+   * @param opts.url
+   * @param opts.params
+   * @param opts.mime_type
+   * @return {Promise<unknown>}
+   */
+  async GET({url, params, mime_type}) {
+    return {
+      url: `${url}?${convertObjectToUrlParams(params)}`,
+      layers: true,
+      mime_type
+    };
+  },
+};
+
+/*
+ http://localhost/fcgi-bin/qgis_mapserver/qgis_mapserv.fcgi
+  ?MAP=/home/marco/geodaten/projekte/composertest.qgs
+  &SERVICE=WMS&VERSION=1.3.0
+  &REQUEST=GetPrint
+  &TEMPLATE=Composer 1
+  &map0:extent=693457.466131,227122.338236,700476.845177,230609.807051
+  &BBOX=693457.466131,227122.338236,700476.845177,230609.807051
+  &CRS=EPSG:21781
+  &WIDTH=1467
+  &HEIGHT=729
+  &LAYERS=layer0,layer1
+  &STYLES=,
+  &FORMAT=pdf
+  &DPI=300
+  &TRANSPARENT=true
+
+ In detail, the following parameters can be used to set properties for composer maps:
+
+ <mapname>:EXTENT=<xmin,ymin,xmax, ymax> //mandatory
+ <mapname>:ROTATION=<double> //optional, defaults to 0
+ <mapname>:SCALE=<double> //optional. Forces scale denominator as server and client may have different scale calculations
+ <mapname>:LAYERS=<comma separated list with layer names> //optional. Defaults to all layer in the WMS request
+ <mapname>:STYLES=<comma separated list with style names> //optional
+ <mapname>:GRID_INTERVAL_X=<double> //set the grid interval in x-direction for composer grids
+ <mapname>:GRID_INTERVAL_Y=<double> //set the grid interval in x-direction for composer grids
+ */
+
+/**
+ * ORIGINAL SOURCE: src\app\core\print\printservice.js@3.9.0
+ * 
+ * @param { Object } opts
+ * @param opts.rotation,
+ * @param opts.dpi
+ * @param opts.format
+ * @param opts.template
+ * @param { Array } opts.maps
+ * @param { Array } opts.labels
+ * @param opts.is_maps_preset_theme
+ * @param { 'GET' | 'POST' } method
+ */
+export function print(opts = {}, method = 'GET') {
+ const store  = ProjectsRegistry.getCurrentProject().getLayersStore();
+ const layers = store.getLayers({ PRINTABLE: { scale: opts.scale }, SERVERTYPE: 'QGIS' }).reverse(); // reverse order is important
+
+ // No layers are printable (i.e., no visible layers)
+ if (!layers.length) {
+   return Promise.resolve({layers: false})
+ }
+
+ const LAYERS = layers.map(l => l.getPrintLayerName()).join();
+
+ return FETCH[method]({
+   url: store.getWmsUrl(),
+   mime_type: ({ pdf: 'application/pdf', jpg: 'image/jpeg' })[opts.format],
+   params: {
+     SERVICE:     'WMS',
+     VERSION:     '1.3.0',
+     REQUEST:     'GetPrint',
+     TEMPLATE:    opts.template,
+     DPI:         opts.dpi,
+     STYLES:      layers.map(l => l.getStyle()).join(','),
+     LAYERS:      opts.is_maps_preset_theme ? undefined : LAYERS,
+     FORMAT:      opts.format,
+     CRS:         store.getProjection().getCode(),
+     filtertoken: ApplicationState.tokens.filtertoken,
+     ...(opts.maps || []).reduce((params, map) => {
+       params[map.name + ':SCALE']    = map.scale;
+       params[map.name + ':EXTENT']   = map.extent;
+       params[map.name + ':ROTATION'] = opts.rotation;
+       params[map.name + ':LAYERS']   = opts.is_maps_preset_theme && undefined === map.preset_theme ? LAYERS : undefined;
+       return params;
+     }, {}),
+     ...(opts.labels || []).reduce((params, label) => {
+       params[label.id] = label.text;
+       return params;
+     }, {})
+   },
+ });
+}
\ No newline at end of file
diff --git a/src/utils/printAtlas.js b/src/utils/printAtlas.js
new file mode 100644
index 000000000..6ae976552
--- /dev/null
+++ b/src/utils/printAtlas.js
@@ -0,0 +1,99 @@
+import ProjectsRegistry             from 'store/projects';
+import ApplicationState             from 'store/application-state';
+import { convertObjectToUrlParams } from 'utils/convertObjectToUrlParams';
+
+/*
+ http://localhost/fcgi-bin/qgis_mapserver/qgis_mapserv.fcgi
+  ?MAP=/home/marco/geodaten/projekte/composertest.qgs
+  &SERVICE=WMS&VERSION=1.3.0
+  &REQUEST=GetPrint
+  &TEMPLATE=Composer 1
+  &map0:extent=693457.466131,227122.338236,700476.845177,230609.807051
+  &BBOX=693457.466131,227122.338236,700476.845177,230609.807051
+  &CRS=EPSG:21781
+  &WIDTH=1467
+  &HEIGHT=729
+  &LAYERS=layer0,layer1
+  &STYLES=,
+  &FORMAT=pdf
+  &DPI=300
+  &TRANSPARENT=true
+
+ In detail, the following parameters can be used to set properties for composer maps:
+
+ <mapname>:EXTENT=<xmin,ymin,xmax, ymax> //mandatory
+ <mapname>:ROTATION=<double> //optional, defaults to 0
+ <mapname>:SCALE=<double> //optional. Forces scale denominator as server and client may have different scale calculations
+ <mapname>:LAYERS=<comma separated list with layer names> //optional. Defaults to all layer in the WMS request
+ <mapname>:STYLES=<comma separated list with style names> //optional
+ <mapname>:GRID_INTERVAL_X=<double> //set the grid interval in x-direction for composer grids
+ <mapname>:GRID_INTERVAL_Y=<double> //set the grid interval in x-direction for composer grids
+ */
+
+/**
+ * ORIGINAL SOURCE: src\app\core\print\printservice.js@3.9.0
+ * 
+ * @param { Object } opts
+ * @param opts.field
+ * @param opts.values
+ * @param opts.template
+ * @param opts.download
+ * @param { 'GET' | 'POST' } method
+ */
+export function printAtlas(opts = {}, method = 'GET') {
+  const store = ProjectsRegistry.getCurrentProject().getLayersStore();
+  const multi = opts.values.length > 1;
+  return FETCH[method]({
+    url: store.getWmsUrl(),
+    mime_type: 'application/pdf',
+    params:    {
+      SERVICE:     'WMS',
+      VERSION:     '1.3.0',
+      REQUEST:     'GetPrintAtlas',
+      EXP_FILTER:  opts.field + (multi ? ' IN (' : '=') + (opts.values.map(v => `'${v}'`).join()) + (multi ? ')' : ''),
+      TEMPLATE:    opts.template,
+      filtertoken: ApplicationState.tokens.filtertoken,
+      DOWNLOAD:    opts.download ? 1 : undefined,
+    },
+  })
+}
+
+const FETCH = {
+  /**
+   * @param { Object } opts
+   * @param opts.url
+   * @param opts.params
+   * @param opts.mime_type
+   * @return {Promise<{mime_type, layers: boolean, url: string}>}
+   */
+  async POST({ url, params, mime_type }) {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+      body: convertObjectToUrlParams(params),
+    });
+    if (!response.ok) {
+      //@TODO Need to translate
+      throw new Error(500 === response.status ? 'Internal Server Error' : 'Request Failed');
+    }
+    return {
+      mime_type,
+      layers: true,
+      url: URL.createObjectURL(await response.blob()),
+    };
+  },
+  /**
+   * @param { Object } opts
+   * @param opts.url
+   * @param opts.params
+   * @param opts.mime_type
+   * @return {Promise<unknown>}
+   */
+  async GET({url, params, mime_type}) {
+    return {
+      url: `${url}?${convertObjectToUrlParams(params)}`,
+      layers: true,
+      mime_type
+    };
+  },
+};
\ No newline at end of file
diff --git a/src/utils/toRawType.js b/src/utils/toRawType.js
index ecb28d9b1..9d10cbd0e 100644
--- a/src/utils/toRawType.js
+++ b/src/utils/toRawType.js
@@ -1,4 +1,3 @@
 export function toRawType(value) {
-  const _toString = Object.prototype.toString;
-  return _toString.call(value).slice(8, -1)
+  return Object.prototype.toString.call(value).slice(8, -1)
 };
\ No newline at end of file