diff --git a/README.md b/README.md
index 9d9614c4fd32e65dcbefff34b758d7824b397181..22555772d89cba9d2d3e02574732d162655075ca 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,20 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
+### `npm run lint`
+
+Runs `eslint ./src` to analyze and find problems in source code.
+
+[ESLint](https://eslint.org/docs/latest/) package is configured in `package.json`, under `eslintConfig`.
+
+### `npm run lint:fix`
+
+Runs `eslint --fix ./src` to analyze and find problems in source code and fix them automatically if possible.
+
+### `npm run format`
+
+Format code according to [Prettier](https://prettier.io/docs/en/) config, found in `package.json`, under `prettier`.
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
diff --git a/package.json b/package.json
index 9add7f446ad21fa589078970403e2e78b7a2e9ff..c706491433ac7e31c08ae506d715918096870261 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,13 @@
     "react-scripts": "^3.3.0"
   },
   "scripts": {
-    "start": "PORT=3001 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
+    "format": "prettier --write \"./src/**/*.+(js|jsx|json|css|md)\""
   },
   "browserslist": {
     "production": [
@@ -42,6 +45,53 @@
     ]
   },
   "devDependencies": {
-    "jscs": "^3.0.7"
+    "jscs": "^3.0.7",
+    "husky": "8.0.3",
+    "lint-staged": "14.0.1",
+    "prettier": "^3.2.5",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint:fix && npm run format"
+    }
+  },
+  "eslintConfig": {
+    "env": {
+      "node": true,
+      "browser": true,
+      "es6": true
+    },
+    "extends": [
+      "plugin:react/recommended",
+      "plugin:prettier/recommended",
+      "airbnb"
+    ],
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "plugins": [
+      "react"
+    ]
+  },
+  "lint-staged": {
+    "*.+(js|jsx)": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.+(json|css|md)": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 90,
+    "singleQuote": true,
+    "arrowParens": "always",
+    "trailingComma": "es5",
+    "tabWidth": 2
   }
 }
diff --git a/public/index.html b/public/index.html
index b747f93f3b16b5a9a524b3e1630034538e505c46..38223fe591121af96fe75b88c0b43242e7ad2dd6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,4 +40,4 @@
     -->
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/App.js b/src/App.js
index a423de05e85a74e2eea368478a7f5c2496c744d9..b73433f8138b04bf0f5d38a783fbf2a95c48970a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,36 +1,11 @@
-/* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
+import { EuiPage, EuiPageBody } from '@elastic/eui';
+import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
+import Layout from './components/Layout';
 
-import {
-  EuiPage,
-  EuiPageBody,
-} from '@elastic/eui';
-
-import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
-import Layout from './components/Layout'
-
-// import { useUserState, useUserDispatch, checkUserLogin } from "./context/UserContext";
-// import { redirect } from "./Utils.js";
-
-/* const loginUrl = (process.env.REACT_APP_IN_SYLVA_LOGIN_PORT) ? `${process.env.REACT_APP_IN_SYLVA_LOGIN_HOST}:${process.env.REACT_APP_IN_SYLVA_LOGIN_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_LOGIN_HOST}:${window.env.REACT_APP_IN_SYLVA_LOGIN_PORT}`
-
-debugger
-
-console.log(loginUrl) */
-
-const App = (props) => {
-
-  /* var { isAuthenticated } = useUserState()
-  var userDispatch = useUserDispatch() */
-
-  /* useEffect(() => {
-    checkUserLogin(userDispatch, props.userId, props.accessToken);
-    redirect(!isAuthenticated, loginUrl + '?requestType=search')
-  }, []) */
-
+const App = () => {
   return (
-
-    < EuiPage restrictWidth={false} >
+    <EuiPage restrictWidth={false}>
       <EuiPageBody>
         <HashRouter>
           <Switch>
@@ -39,12 +14,8 @@ const App = (props) => {
             <Route component={Error} />
           </Switch>
         </HashRouter>
-
       </EuiPageBody>
-    </EuiPage >
+    </EuiPage>
   );
-
-}
-
+};
 export default App;
-
diff --git a/src/Utils.js b/src/Utils.js
index 7bb17ab9e530215a518e78d99fe3a80fc6914b1a..b36276204824efa394ca81a3d9d8d3f45d950135 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1,344 +1,355 @@
 export class SearchField {
-    constructor(name, type, values, isValidated, sources) {
-        this.name = name;
-        this.type = type;
-        this.values = values;
-        this.isValidated = isValidated;
-        this.sources = sources;
-    }
+  constructor(name, type, values, isValidated, sources) {
+    this.name = name;
+    this.type = type;
+    this.values = values;
+    this.isValidated = isValidated;
+    this.sources = sources;
+  }
 }
 
+export const getLoginUrl = () => {
+  return process.env.REACT_APP_IN_SYLVA_LOGIN_PORT
+    ? `${process.env.REACT_APP_IN_SYLVA_LOGIN_HOST}:${process.env.REACT_APP_IN_SYLVA_LOGIN_PORT}`
+    : `${window._env_.REACT_APP_IN_SYLVA_LOGIN_HOST}`;
+};
+
 export const removeNullFields = (standardFields) => {
-    let standardFieldsNoNull = standardFields
-    let nullIndex
-    if (standardFields.length) {
-        for (let i = 0; i < standardFieldsNoNull.length; i++) {
-            if (!standardFieldsNoNull[i].field_name) {
-                nullIndex = i
-            }
-        }
-        standardFieldsNoNull = removeArrayElement(standardFieldsNoNull, nullIndex)
+  let standardFieldsNoNull = standardFields;
+  let nullIndex;
+  if (standardFields.length) {
+    for (let i = 0; i < standardFieldsNoNull.length; i++) {
+      if (!standardFieldsNoNull[i].field_name) {
+        nullIndex = i;
+      }
     }
+    standardFieldsNoNull = removeArrayElement(standardFieldsNoNull, nullIndex);
+  }
 
-    return (standardFieldsNoNull)
-}
+  return standardFieldsNoNull;
+};
 
 export const getSections = (fields) => {
-    let sections = []
-    let sectionsLabels = []
-    fields.forEach(field => {
-        if (field.field_name && field.field_name.includes(".")) {
-            sections.push(field.field_name.split('.', 1)[0])
-
-        }
-    })
-    sections = [...new Set(sections)]
-    sections.forEach(section => {
-        sectionsLabels.push({
-            label: section.replace(/_|\./g, ' ')
-        })
-    })
-    return sectionsLabels
-}
+  let sections = [];
+  let sectionsLabels = [];
+  fields.forEach((field) => {
+    if (field.field_name && field.field_name.includes('.')) {
+      sections.push(field.field_name.split('.', 1)[0]);
+    }
+  });
+  sections = [...new Set(sections)];
+  sections.forEach((section) => {
+    sectionsLabels.push({
+      label: section.replace(/_|\./g, ' '),
+    });
+  });
+  return sectionsLabels;
+};
 
 export const getFieldsBySection = (fields, fieldSection) => {
-    let filteredFields = []
-    fields.forEach(field => {
-        if (field.field_name && field.field_name.split(".", 1)[0].replace(/_|\./g, ' ') === fieldSection.label) {
-            if (field.sources.length) {
-                filteredFields.push({ label: field.field_name.substring(field.field_name.indexOf('.') + 1).replace(/_|\./g, ' '), color: "danger" })
-            } else {
-                filteredFields.push({ label: field.field_name.substring(field.field_name.indexOf('.') + 1).replace(/_|\./g, ' '), color: "primary" })
-            }
-        }
-    })
-    return filteredFields
-}
+  let filteredFields = [];
+  fields.forEach((field) => {
+    if (
+      field.field_name &&
+      field.field_name.split('.', 1)[0].replace(/_|\./g, ' ') === fieldSection.label
+    ) {
+      if (field.sources.length) {
+        filteredFields.push({
+          label: field.field_name
+            .substring(field.field_name.indexOf('.') + 1)
+            .replace(/_|\./g, ' '),
+          color: 'danger',
+        });
+      } else {
+        filteredFields.push({
+          label: field.field_name
+            .substring(field.field_name.indexOf('.') + 1)
+            .replace(/_|\./g, ' '),
+          color: 'primary',
+        });
+      }
+    }
+  });
+  return filteredFields;
+};
 
 export const updateArrayElement = (array, index, value) => {
-    let newArray = array.slice()
-    newArray[index] = value
-    return newArray
-}
+  let newArray = array.slice();
+  newArray[index] = value;
+  return newArray;
+};
 
 export const removeArrayElement = (array, index) => {
-    let newArray = array.slice()
-    newArray.splice(index, 1)
-    return newArray
-}
+  let newArray = array.slice();
+  newArray.splice(index, 1);
+  return newArray;
+};
 
 export const updateSearchFieldValues = (searchFields, index, values) => {
-    let newSearchFields = searchFields.slice()
-    newSearchFields[index].values = values
-    return newSearchFields
-}
+  let newSearchFields = searchFields.slice();
+  newSearchFields[index].values = values;
+  return newSearchFields;
+};
 
 export const getUrlParams = () => {
-    let lets = {};
-    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
-        lets[key] = value;
-    });
-    return lets;
-}
+  let lets = {};
+  window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+    lets[key] = value;
+  });
+  return lets;
+};
 
 export const getUrlParam = (parameter, defaultvalue) => {
-    let urlParameter = defaultvalue;
-    if (window.location.href.indexOf(parameter) > -1) {
-        urlParameter = getUrlParams()[parameter];
-    }
-    return urlParameter;
-}
+  let urlParameter = defaultvalue;
+  if (window.location.href.indexOf(parameter) > -1) {
+    urlParameter = getUrlParams()[parameter];
+  }
+  return urlParameter;
+};
 
 export const changeNameToLabel = (object) => {
-    object.label = object.name
-    delete object.name
-    return object
-}
+  object.label = object.name;
+  delete object.name;
+  return object;
+};
 
 export const redirect = (url, condition = true) => {
-    if (condition) {
-        console.log("redirect to " + url)
-
-        window.location.replace(url)
-    }
-}
+  if (condition) {
+    window.location.replace(url);
+  }
+};
 
 export const tokenTimedOut = (validityDurationInMin) => {
-    const timeSinceLastRefresh = Date.now() - sessionStorage.getItem("token_refresh_time")
-    if (timeSinceLastRefresh > (validityDurationInMin * 60000)) {
-        return true
-    }
-    return false
-}
-
-export const createSqlSelectQueries = (indexList, indexes, conditions, fields = "*") => {
-    let queries = []
-    let query = ""
-
-    if (!conditions) {
-        throw new Error("Conditions are empty, SQL query cannot be created.")
-    }
-    if (!indexes) {
-        indexes = indexList
-    }
-    indexes.forEach(element => {
-        query = "select " + fields + " from " + element.label + " where " + conditions
-        queries.push(query)
-    })
-    console.log(queries)
-    return queries
-}
+  const timeSinceLastRefresh = Date.now() - sessionStorage.getItem('token_refresh_time');
+  if (timeSinceLastRefresh > validityDurationInMin * 60000) {
+    return true;
+  }
+  return false;
+};
+
+export const createSqlSelectQueries = (indexList, indexes, conditions, fields = '*') => {
+  let queries = [];
+  let query = '';
+
+  if (!conditions) {
+    throw new Error('Conditions are empty, SQL query cannot be created.');
+  }
+  if (!indexes) {
+    indexes = indexList;
+  }
+  indexes.forEach((element) => {
+    query = 'select ' + fields + ' from ' + element.label + ' where ' + conditions;
+    queries.push(query);
+  });
+  return queries;
+};
 
 const splitString = (str, bracketOpenRegex, bracketCloseRegex, separatorRegex) => {
-    let strToSplit = str
-    let requestTokens = str.split('')
-    let openBracketCount = 0
-    let startSplitIndex = 0
-    let splitStr = []
-    for (let i = 0; i < requestTokens.length; i++) {
-        requestTokens.forEach((token, index) => { })
-        switch (true) {
-            case bracketOpenRegex.test(requestTokens[i]):
-                openBracketCount = openBracketCount + 1
-                if (openBracketCount === 1) startSplitIndex = i + 1
-                break
-
-            case bracketCloseRegex.test(requestTokens[i]):
-                openBracketCount = openBracketCount - 1
-                if (openBracketCount === 0) {
-                    splitStr.push(strToSplit.substring(startSplitIndex, i).trim())
-                    startSplitIndex = i + 1
-                }
-                break
-
-            case separatorRegex.test(requestTokens[i]):
-                if (openBracketCount === 0) {
-                    let tmpStr = strToSplit.substring(startSplitIndex, i).trim()
-                    if (tmpStr !== '') {
-                        splitStr.push(tmpStr)
-                    }
-                    splitStr.push(strToSplit[i])
-                    startSplitIndex = i + 1
-                }
-                break
-
-            default:
+  let strToSplit = str;
+  let requestTokens = str.split('');
+  let openBracketCount = 0;
+  let startSplitIndex = 0;
+  let splitStr = [];
+  for (let i = 0; i < requestTokens.length; i++) {
+    requestTokens.forEach((token, index) => {});
+    switch (true) {
+      case bracketOpenRegex.test(requestTokens[i]):
+        openBracketCount = openBracketCount + 1;
+        if (openBracketCount === 1) startSplitIndex = i + 1;
+        break;
+      case bracketCloseRegex.test(requestTokens[i]):
+        openBracketCount = openBracketCount - 1;
+        if (openBracketCount === 0) {
+          splitStr.push(strToSplit.substring(startSplitIndex, i).trim());
+          startSplitIndex = i + 1;
         }
+        break;
+      case separatorRegex.test(requestTokens[i]):
+        if (openBracketCount === 0) {
+          let tmpStr = strToSplit.substring(startSplitIndex, i).trim();
+          if (tmpStr !== '') {
+            splitStr.push(tmpStr);
+          }
+          splitStr.push(strToSplit[i]);
+          startSplitIndex = i + 1;
+        }
+        break;
+      default:
     }
-    if (startSplitIndex < requestTokens.length) {
-        splitStr.push(strToSplit.substring(startSplitIndex, requestTokens.length).trim())
-    }
-    return (splitStr)
-}
+  }
+  if (startSplitIndex < requestTokens.length) {
+    splitStr.push(strToSplit.substring(startSplitIndex, requestTokens.length).trim());
+  }
+  return splitStr;
+};
 
 // const buildDslClause = (clause, query, fields) => {
 //     let tmpQuery = query
 const buildDslClause = (clause, fields) => {
-    let clauseStr = clause.replace(/ or /g, " | ").replace(/ and /g, " & ").replace(/{|}/g, "").trim()
-    let splitClause = splitString(clauseStr, /\(/, /\)/, /&|\|/)
-    let firstValue, secondValue, thirdValue
-
-    // tmpQuery = `${tmpQuery} { "bool": { "should": [ `
-    let tmpQuery = ` { "bool": { "should": [ `
-
-    for (let i = 0; i < splitClause.length; i++) {
-        switch (true) {
-            case splitClause[i].includes("<="):
-                tmpQuery = `${tmpQuery} { "range": `
-                firstValue = splitClause[i].substring(0, splitClause[i].indexOf("<=") - 1).trim()
-                secondValue = splitClause[i].substring(splitClause[i].indexOf("<=") + 2, splitClause[i].length).trim()
-                if (secondValue.includes("<=")) { //case value <= field <= value
-                    thirdValue = secondValue.substring(secondValue.indexOf("<=") + 2, secondValue.length).trim()
-                    secondValue = secondValue.substring(0, secondValue.indexOf("<=") - 1).trim()
-                    tmpQuery = `${tmpQuery} { "${secondValue}": { "gte": "${firstValue}", "lte": "${thirdValue}" } } }, `
-                }
-                else { //case field <= value
-                    tmpQuery = `${tmpQuery} { "${firstValue}": { "lte": "${secondValue}" } } }, `
-                }
-                break
-            case splitClause[i].includes(">="):
-                tmpQuery = `${tmpQuery} { "range": `
-                firstValue = splitClause[i].substring(0, splitClause[i].indexOf(">=") - 1).trim()
-                secondValue = splitClause[i].substring(splitClause[i].indexOf(">=") + 2, splitClause[i].length).trim()
-                tmpQuery = `${tmpQuery} { "${firstValue}": { "gte": "${secondValue}" } } }, `
-                break
+  let clauseStr = clause
+    .replace(/ or /g, ' | ')
+    .replace(/ and /g, ' & ')
+    .replace(/{|}/g, '')
+    .trim();
+  let splitClause = splitString(clauseStr, /\(/, /\)/, /&|\|/);
+  let firstValue, secondValue, thirdValue;
+
+  // tmpQuery = `${tmpQuery} { "bool": { "should": [ `
+  let tmpQuery = ` { "bool": { "should": [ `;
+
+  for (let i = 0; i < splitClause.length; i++) {
+    switch (true) {
+      case splitClause[i].includes('<='):
+        tmpQuery = `${tmpQuery} { "range": `;
+        firstValue = splitClause[i].substring(0, splitClause[i].indexOf('<=') - 1).trim();
+        secondValue = splitClause[i]
+          .substring(splitClause[i].indexOf('<=') + 2, splitClause[i].length)
+          .trim();
+        if (secondValue.includes('<=')) {
+          //case value <= field <= value
+          thirdValue = secondValue
+            .substring(secondValue.indexOf('<=') + 2, secondValue.length)
+            .trim();
+          secondValue = secondValue.substring(0, secondValue.indexOf('<=') - 1).trim();
+          tmpQuery = `${tmpQuery} { "${secondValue}": { "gte": "${firstValue}", "lte": "${thirdValue}" } } }, `;
+        } else {
+          //case field <= value
+          tmpQuery = `${tmpQuery} { "${firstValue}": { "lte": "${secondValue}" } } }, `;
+        }
+        break;
+      case splitClause[i].includes('>='):
+        tmpQuery = `${tmpQuery} { "range": `;
+        firstValue = splitClause[i].substring(0, splitClause[i].indexOf('>=') - 1).trim();
+        secondValue = splitClause[i]
+          .substring(splitClause[i].indexOf('>=') + 2, splitClause[i].length)
+          .trim();
+        tmpQuery = `${tmpQuery} { "${firstValue}": { "gte": "${secondValue}" } } }, `;
+        break;
+      default:
+        let fieldName = splitClause[i]
+          .substring(0, splitClause[i].indexOf('=') - 1)
+          .trim();
+        let field = fields.find((item) => item.field_name === fieldName);
+        if (field) {
+          switch (field.field_type) {
+            case 'Date':
+            case 'Numeric':
+              tmpQuery = `${tmpQuery} { "term": { "${fieldName}": "${splitClause[i].substring(splitClause[i].indexOf('=') + 1, splitClause[i].length).trim()}" } }, `;
+              break;
             default:
-                let fieldName = splitClause[i].substring(0, splitClause[i].indexOf("=") - 1).trim()
-                let field = fields.find(item => item.field_name === fieldName)
-                if (field) {
-                    switch (field.field_type) {
-                        case 'Date':
-                        case 'Numeric':
-                            tmpQuery = `${tmpQuery} { "term": { "${fieldName}": "${splitClause[i].substring(splitClause[i].indexOf("=") + 1, splitClause[i].length).trim()}" } }, `
-                            break
-                        default:
-                            let values = splitClause[i].substring(splitClause[i].indexOf("=") + 1, splitClause[i].length).split(',')
-                            values.forEach(value => {
-                                tmpQuery = `${tmpQuery} { "match": { "${fieldName}": { "query": "${value.trim()}", "operator": "AND" } } }, `
-                            })
-
-                    }
-                }
+              let values = splitClause[i]
+                .substring(splitClause[i].indexOf('=') + 1, splitClause[i].length)
+                .split(',');
+              values.forEach((value) => {
+                tmpQuery = `${tmpQuery} { "match": { "${fieldName}": { "query": "${value.trim()}", "operator": "AND" } } }, `;
+              });
+          }
         }
     }
-
-    if (tmpQuery.endsWith(", ")) {
-        tmpQuery = tmpQuery.substring(0, tmpQuery.length - 2)
-    }
-
-    tmpQuery = `${tmpQuery} ] } }, `
-    return (tmpQuery)
-}
+  }
+  if (tmpQuery.endsWith(', ')) {
+    tmpQuery = tmpQuery.substring(0, tmpQuery.length - 2);
+  }
+  tmpQuery = `${tmpQuery} ] } }, `;
+  return tmpQuery;
+};
 
 // const buildDslQuery = (request, query, fields) => {
 //     let tmpQuery = query
 const buildDslQuery = (request, fields) => {
-    let requestStr = request.replace(/ OR /g, " | ").replace(/ AND /g, " & ").trim()
-    let splitRequest = splitString(requestStr, /\(/, /\)/, /&|\|/)
-    let tmpQuery = ''
-
-    if (splitRequest.length === 1) {
-        // tmpQuery = `${tmpQuery} { "bool": { "must": [ `
-        tmpQuery = ` { "bool": { "must": [ `
-    }
-    else {
-        for (let i = 0; i < splitRequest.length; i++) {
-            if (splitRequest[i] === '|') {
-                // tmpQuery = `${tmpQuery} { "bool": { "should": [ `
-                tmpQuery = ` { "bool": { "should": [ `
-                break
-            }
-            else if (splitRequest[i] === '&') {
-                // tmpQuery = `${tmpQuery} { "bool": { "must": [ `
-                tmpQuery = ` { "bool": { "must": [ `
-                break
-            }
-        }
-    }
-
+  let requestStr = request.replace(/ OR /g, ' | ').replace(/ AND /g, ' & ').trim();
+  let splitRequest = splitString(requestStr, /\(/, /\)/, /&|\|/);
+  let tmpQuery = '';
+
+  if (splitRequest.length === 1) {
+    // tmpQuery = `${tmpQuery} { "bool": { "must": [ `
+    tmpQuery = ` { "bool": { "must": [ `;
+  } else {
     for (let i = 0; i < splitRequest.length; i++) {
-        if (!splitRequest[i].includes('|') && !splitRequest[i].includes('&')) {
-            // tmpQuery = buildDslClause(splitRequest[i], tmpQuery, fields)
-            tmpQuery = `${tmpQuery} ${buildDslClause(splitRequest[i], fields)}`
-        }
-        else if ((splitRequest[i].includes('|') || splitRequest[i].includes('&')) && splitRequest[i].length > 1) {
-            // tmpQuery = buildDslQuery(splitRequest[i], tmpQuery, fields)
-            tmpQuery = `${tmpQuery} ${buildDslQuery(splitRequest[i], fields)}`
-        }
+      if (splitRequest[i] === '|') {
+        // tmpQuery = `${tmpQuery} { "bool": { "should": [ `
+        tmpQuery = ` { "bool": { "should": [ `;
+        break;
+      } else if (splitRequest[i] === '&') {
+        // tmpQuery = `${tmpQuery} { "bool": { "must": [ `
+        tmpQuery = ` { "bool": { "must": [ `;
+        break;
+      }
     }
-
-    if (tmpQuery.endsWith(", ")) {
-        tmpQuery = tmpQuery.substring(0, tmpQuery.length - 2)
+  }
+
+  for (let i = 0; i < splitRequest.length; i++) {
+    if (!splitRequest[i].includes('|') && !splitRequest[i].includes('&')) {
+      // tmpQuery = buildDslClause(splitRequest[i], tmpQuery, fields)
+      tmpQuery = `${tmpQuery} ${buildDslClause(splitRequest[i], fields)}`;
+    } else if (
+      (splitRequest[i].includes('|') || splitRequest[i].includes('&')) &&
+      splitRequest[i].length > 1
+    ) {
+      // tmpQuery = buildDslQuery(splitRequest[i], tmpQuery, fields)
+      tmpQuery = `${tmpQuery} ${buildDslQuery(splitRequest[i], fields)}`;
     }
-
-    tmpQuery = `${tmpQuery} ] } }, `
-
-    return (tmpQuery)
-}
+  }
+  if (tmpQuery.endsWith(', ')) {
+    tmpQuery = tmpQuery.substring(0, tmpQuery.length - 2);
+  }
+  tmpQuery = `${tmpQuery} ] } }, `;
+  return tmpQuery;
+};
 
 export const createAdvancedQuery = (fields, searchRequest) => {
-    let sourceParam = `"_source": [`
-    fields.forEach(field => {
-        sourceParam = `${sourceParam} "${field.field_name}", `
-    })
-    if (sourceParam.endsWith(", ")) {
-        sourceParam = sourceParam.substring(0, sourceParam.length - 2)
-    }
-    sourceParam = `${sourceParam}],`
-
-    let query = `{ ${sourceParam} "query": `
-
-    query = buildDslQuery(searchRequest, query, fields)
-
-    if (query.endsWith(", ")) {
-        query = query.substring(0, query.length - 2)
-    }
-
-    query = query + "}"
-
-    const queryObject = JSON.parse(query)
-    return (queryObject)
-
-}
+  let sourceParam = `"_source": [`;
+  fields.forEach((field) => {
+    sourceParam = `${sourceParam} "${field.field_name}", `;
+  });
+  if (sourceParam.endsWith(', ')) {
+    sourceParam = sourceParam.substring(0, sourceParam.length - 2);
+  }
+  sourceParam = `${sourceParam}],`;
+  let query = `{ ${sourceParam} "query": `;
+  query = buildDslQuery(searchRequest, query, fields);
+  if (query.endsWith(', ')) {
+    query = query.substring(0, query.length - 2);
+  }
+  query = query + '}';
+  const queryObject = JSON.parse(query);
+  return queryObject;
+};
 
 //find an array in a multidimensional array and return the index
 const findArray = (multiArray, array) => {
-    let found = false
-    for (let index = 0; index < multiArray.length; index++) {
-        if (multiArray[index].length === 0 && array.length === 0)
-            return (index)
-
-        if (multiArray[index].length === array.length) {
-            for (let i = 0; i < array.length; i++) {
-                if (array[i] === multiArray[index][i]) {
-                    found = true
-                }
-                else
-                    found = false
-            }
-        }
-        if (found) {
-            return (index)
-        }
+  let found = false;
+  for (let index = 0; index < multiArray.length; index++) {
+    if (multiArray[index].length === 0 && array.length === 0) {
+      return index;
     }
-    return -1;
-}
-
-export const createAdvancedQueriesBySource = (fields, searchRequest, selectedSources, sources) => {
-
-    const queries = []
-    let fieldsLists = [[]]
-    let sourcesLists = [[]]
-    let queriedSourcesId = []
-    let noPolicySourcesId = []
-    const indicesLists = []
-    const publicFieldnames = []
-    const privateFields = []
-
-    console.log(fields)
-    console.log(selectedSources)
-
-    /* fields.forEach(field => {
+    if (multiArray[index].length === array.length) {
+      for (let i = 0; i < array.length; i++) {
+        found = array[i] === multiArray[index][i];
+      }
+    }
+    if (found) {
+      return index;
+    }
+  }
+  return -1;
+};
+
+export const createAdvancedQueriesBySource = (
+  fields,
+  searchRequest,
+  selectedSources,
+  sources
+) => {
+  const queries = [];
+  let fieldsLists = [[]];
+  let sourcesLists = [[]];
+  let queriedSourcesId = [];
+  let noPolicySourcesId = [];
+  const indicesLists = [];
+  const publicFieldnames = [];
+  const privateFields = [];
+  /* fields.forEach(field => {
         if (field.ispublic) {
             publicFieldnames.push(field.field_name)
         } else {
@@ -358,8 +369,8 @@ export const createAdvancedQueriesBySource = (fields, searchRequest, selectedSou
 
     noPolicySourcesId = queriedSourcesId
 
-    //browse fields to create a map containing the fields available by source 
-    //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []  
+    //browse fields to create a map containing the fields available by source
+    //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []
     //empty brackets means "the sources not affected by policies" at that point - this list is being compiled at the same time
     if (privateFields.length) {
         privateFields.forEach(field => {
@@ -385,7 +396,7 @@ export const createAdvancedQueriesBySource = (fields, searchRequest, selectedSou
     }
 
     const indexOfAllSources = findArray(sourcesLists, [])
-    //if there isn't any source with no policy, remove corresponding items in sourcesLists and fieldsLists 
+    //if there isn't any source with no policy, remove corresponding items in sourcesLists and fieldsLists
     if (!noPolicySourcesId.length) {
         sourcesLists = removeArrayElement(sourcesLists, indexOfAllSources)
         fieldsLists = removeArrayElement(fieldsLists, indexOfAllSources)
@@ -403,193 +414,195 @@ export const createAdvancedQueriesBySource = (fields, searchRequest, selectedSou
         indicesLists.push(indicesList)
     }) */
 
-    fields.forEach(field => {
-        if (field.ispublic) {
-            publicFieldnames.push(field.field_name)
-        } else {
-            privateFields.push(field)
-        }
-    })
-
-    if (selectedSources.length) {
-        selectedSources.forEach(source => {
-            queriedSourcesId.push(source.id)
-        })
+  fields.forEach((field) => {
+    if (field.ispublic) {
+      publicFieldnames.push(field.field_name);
     } else {
-        if (sources.length) {
-            sources.forEach(source => {
-                queriedSourcesId.push(source.id)
-            })
-        }
+      privateFields.push(field);
     }
+  });
 
-    noPolicySourcesId = queriedSourcesId
-
-    //browse fields to create a map containing the fields available by source 
-    //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []  
-    //empty brackets means "the sources not affected by policies" at that point
-    if (privateFields.length) {
-        privateFields.forEach(field => {
-            field.sources.forEach(sourceId => {
-                if (queriedSourcesId.includes(sourceId)) {
-                    const index = findArray(sourcesLists, [sourceId])
-                    if (index >= 0) {
-                        fieldsLists[index].push(field.field_name)
-                    } else {
-                        fieldsLists.push([field.field_name])
-                        sourcesLists.push([sourceId])
-                    }
-                }
-                //filter no policy sources
-                if (noPolicySourcesId.includes(sourceId))
-                    noPolicySourcesId = removeArrayElement(noPolicySourcesId, noPolicySourcesId.indexOf(sourceId))
-            })
-        })
-        //add the public fields for every source
-        fieldsLists.forEach(fieldList => {
-            fieldList.push(...publicFieldnames)
-        })
-    }
-
-    const indexOfAllSources = findArray(sourcesLists, [])
-    //if there is no source with no policy, remove corresponding items in sourcesLists and fieldsLists 
-    if (!noPolicySourcesId.length) {
-        sourcesLists = removeArrayElement(sourcesLists, indexOfAllSources)
-        fieldsLists = removeArrayElement(fieldsLists, indexOfAllSources)
-    } else {
-        sourcesLists = updateArrayElement(sourcesLists, indexOfAllSources, noPolicySourcesId)
-        fieldsLists = updateArrayElement(fieldsLists, indexOfAllSources, publicFieldnames)
+  if (selectedSources.length) {
+    selectedSources.forEach((source) => {
+      queriedSourcesId.push(source.id);
+    });
+  } else {
+    if (sources.length) {
+      sources.forEach((source) => {
+        queriedSourcesId.push(source.id);
+      });
     }
-
-    //get elastic indices from sources id
-    sourcesLists.forEach(sourceList => {
-        const indicesList = []
-        sourceList.forEach(sourceId => {
-            const source = sources.find(src => src.id === sourceId)
-            indicesList.push(source.index_id)
-        })
-        indicesLists.push(indicesList)
-    })
-
-    const queryContent = buildDslQuery(searchRequest, fields)
-
-    sourcesLists.forEach((sourcesArray, index) => {
-        let sourceParam = `"_source": [`
-        fieldsLists[index].forEach(fieldname => {
-            sourceParam = `${sourceParam} "${fieldname}", `
-        })
-        if (sourceParam.endsWith(", "))
-            sourceParam = sourceParam.substring(0, sourceParam.length - 2)
-        sourceParam = `${sourceParam}],`
-
-        let query = `{ ${sourceParam} "query": ${queryContent}`
-
-        if (query.endsWith(", "))
-            query = query.substring(0, query.length - 2)
-
-        query = query + "}"
-        queries.push({ indicesId: indicesLists[index], query: JSON.parse(query) })
-    })
-
-    console.log(queries)
-    return (queries)
-
-}
-
-export const createBasicQueriesBySource = (fields, searchRequest, selectedSources, sources) => {
-    const queries = []
-    let fieldsLists = [[]]
-    let sourcesLists = [[]]
-    let queriedSourcesId = []
-    let noPolicySourcesId = []
-    const indicesLists = []
-    const publicFieldnames = []
-    const privateFields = []
-
-    fields.forEach(field => {
-        if (field.ispublic) {
-            publicFieldnames.push(field.field_name)
-        } else {
-            privateFields.push(field)
+  }
+
+  noPolicySourcesId = queriedSourcesId;
+
+  //browse fields to create a map containing the fields available by source
+  //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []
+  //empty brackets means "the sources not affected by policies" at that point
+  if (privateFields.length) {
+    privateFields.forEach((field) => {
+      field.sources.forEach((sourceId) => {
+        if (queriedSourcesId.includes(sourceId)) {
+          const index = findArray(sourcesLists, [sourceId]);
+          if (index >= 0) {
+            fieldsLists[index].push(field.field_name);
+          } else {
+            fieldsLists.push([field.field_name]);
+            sourcesLists.push([sourceId]);
+          }
         }
-    })
-
-    if (selectedSources.length) {
-        selectedSources.forEach(source => {
-            queriedSourcesId.push(source.id)
-        })
-    } else {
-        if (sources.length) {
-            sources.forEach(source => {
-                queriedSourcesId.push(source.id)
-            })
+        //filter no policy sources
+        if (noPolicySourcesId.includes(sourceId)) {
+          noPolicySourcesId = removeArrayElement(
+            noPolicySourcesId,
+            noPolicySourcesId.indexOf(sourceId)
+          );
         }
-    }
+      });
+    });
+    //add the public fields for every source
+    fieldsLists.forEach((fieldList) => {
+      fieldList.push(...publicFieldnames);
+    });
+  }
+
+  const indexOfAllSources = findArray(sourcesLists, []);
+  //if there is no source with no policy, remove corresponding items in sourcesLists and fieldsLists
+  if (!noPolicySourcesId.length) {
+    sourcesLists = removeArrayElement(sourcesLists, indexOfAllSources);
+    fieldsLists = removeArrayElement(fieldsLists, indexOfAllSources);
+  } else {
+    sourcesLists = updateArrayElement(sourcesLists, indexOfAllSources, noPolicySourcesId);
+    fieldsLists = updateArrayElement(fieldsLists, indexOfAllSources, publicFieldnames);
+  }
+
+  //get elastic indices from sources id
+  sourcesLists.forEach((sourceList) => {
+    const indicesList = [];
+    sourceList.forEach((sourceId) => {
+      const source = sources.find((src) => src.id === sourceId);
+      indicesList.push(source.index_id);
+    });
+    indicesLists.push(indicesList);
+  });
 
-    noPolicySourcesId = queriedSourcesId
+  const queryContent = buildDslQuery(searchRequest, fields);
 
-    //browse fields to create a map containing the fields available by source 
-    //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []  
-    //empty brackets means "the sources not affected by policies" at that point
-    if (privateFields.length) {
-        privateFields.forEach(field => {
-            field.sources.forEach(sourceId => {
-                if (queriedSourcesId.includes(sourceId)) {
-                    const index = findArray(sourcesLists, [sourceId])
-                    if (index >= 0) {
-                        fieldsLists[index].push(field.field_name)
-                    } else {
-                        fieldsLists.push([field.field_name])
-                        sourcesLists.push([sourceId])
-                    }
-                }
-                //filter no policy sources
-                if (noPolicySourcesId.includes(sourceId))
-                    noPolicySourcesId = removeArrayElement(noPolicySourcesId, noPolicySourcesId.indexOf(sourceId))
-            })
-        })
-        //add the public fields for every source
-        fieldsLists.forEach(fieldList => {
-            fieldList.push(...publicFieldnames)
-        })
+  sourcesLists.forEach((sourcesArray, index) => {
+    let sourceParam = `"_source": [`;
+    fieldsLists[index].forEach((fieldname) => {
+      sourceParam = `${sourceParam} "${fieldname}", `;
+    });
+    if (sourceParam.endsWith(', '))
+      sourceParam = sourceParam.substring(0, sourceParam.length - 2);
+    sourceParam = `${sourceParam}],`;
+    let query = `{ ${sourceParam} "query": ${queryContent}`;
+    if (query.endsWith(', ')) {
+      query = query.substring(0, query.length - 2);
     }
-
-    const indexOfAllSources = findArray(sourcesLists, [])
-    //if there is no source with no policy, remove corresponding items in sourcesLists and fieldsLists 
-    if (!noPolicySourcesId.length) {
-        sourcesLists = removeArrayElement(sourcesLists, indexOfAllSources)
-        fieldsLists = removeArrayElement(fieldsLists, indexOfAllSources)
+    query = query + '}';
+    queries.push({ indicesId: indicesLists[index], query: JSON.parse(query) });
+  });
+  return queries;
+};
+
+export const createBasicQueriesBySource = (
+  fields,
+  searchRequest,
+  selectedSources,
+  sources
+) => {
+  const queries = [];
+  let fieldsLists = [[]];
+  let sourcesLists = [[]];
+  let queriedSourcesId = [];
+  let noPolicySourcesId = [];
+  const indicesLists = [];
+  const publicFieldnames = [];
+  const privateFields = [];
+
+  fields.forEach((field) => {
+    if (field.ispublic) {
+      publicFieldnames.push(field.field_name);
     } else {
-        sourcesLists = updateArrayElement(sourcesLists, indexOfAllSources, noPolicySourcesId)
-        fieldsLists = updateArrayElement(fieldsLists, indexOfAllSources, publicFieldnames)
+      privateFields.push(field);
     }
+  });
 
-    //get elastic indices from sources id
-    sourcesLists.forEach(sourceList => {
-        const indicesList = []
-        sourceList.forEach(sourceId => {
-            const source = sources.find(src => src.id === sourceId)
-            indicesList.push(source.index_id)
-        })
-        indicesLists.push(indicesList)
-    })
-
-    sourcesLists.forEach((sourcesArray, index) => {
-
-        let sourceParam = `"_source": [`
-        fieldsLists[index].forEach(fieldname => {
-            sourceParam = `${sourceParam} "${fieldname}", `
-        })
-        if (sourceParam.endsWith(", ")) {
-            sourceParam = sourceParam.substring(0, sourceParam.length - 2)
+  if (selectedSources.length) {
+    selectedSources.forEach((source) => {
+      queriedSourcesId.push(source.id);
+    });
+  } else {
+    if (sources.length) {
+      sources.forEach((source) => {
+        queriedSourcesId.push(source.id);
+      });
+    }
+  }
+
+  noPolicySourcesId = queriedSourcesId;
+
+  //browse fields to create a map containing the fields available by source
+  //ie : [field1, field2] - [source1], [field1, field3, field4] - [source2], [field1] - []
+  //empty brackets means "the sources not affected by policies" at that point
+  if (privateFields.length) {
+    privateFields.forEach((field) => {
+      field.sources.forEach((sourceId) => {
+        if (queriedSourcesId.includes(sourceId)) {
+          const index = findArray(sourcesLists, [sourceId]);
+          if (index >= 0) {
+            fieldsLists[index].push(field.field_name);
+          } else {
+            fieldsLists.push([field.field_name]);
+            sourcesLists.push([sourceId]);
+          }
         }
-        sourceParam = `${sourceParam}],`
-
-        let query = `{ ${sourceParam} "query": { "multi_match": { "query": "${searchRequest}" } } }`
-
-        queries.push({ indicesId: indicesLists[index], query: JSON.parse(query) })
-    })
+        //filter no policy sources
+        if (noPolicySourcesId.includes(sourceId))
+          noPolicySourcesId = removeArrayElement(
+            noPolicySourcesId,
+            noPolicySourcesId.indexOf(sourceId)
+          );
+      });
+    });
+    //add the public fields for every source
+    fieldsLists.forEach((fieldList) => {
+      fieldList.push(...publicFieldnames);
+    });
+  }
+
+  const indexOfAllSources = findArray(sourcesLists, []);
+  //if there is no source with no policy, remove corresponding items in sourcesLists and fieldsLists
+  if (!noPolicySourcesId.length) {
+    sourcesLists = removeArrayElement(sourcesLists, indexOfAllSources);
+    fieldsLists = removeArrayElement(fieldsLists, indexOfAllSources);
+  } else {
+    sourcesLists = updateArrayElement(sourcesLists, indexOfAllSources, noPolicySourcesId);
+    fieldsLists = updateArrayElement(fieldsLists, indexOfAllSources, publicFieldnames);
+  }
+
+  //get elastic indices from sources id
+  sourcesLists.forEach((sourceList) => {
+    const indicesList = [];
+    sourceList.forEach((sourceId) => {
+      const source = sources.find((src) => src.id === sourceId);
+      indicesList.push(source.index_id);
+    });
+    indicesLists.push(indicesList);
+  });
 
-    console.log(queries)
-    return (queries)
-}
\ No newline at end of file
+  sourcesLists.forEach((sourcesArray, index) => {
+    let sourceParam = `"_source": [`;
+    fieldsLists[index].forEach((fieldname) => {
+      sourceParam = `${sourceParam} "${fieldname}", `;
+    });
+    if (sourceParam.endsWith(', ')) {
+      sourceParam = sourceParam.substring(0, sourceParam.length - 2);
+    }
+    sourceParam = `${sourceParam}],`;
+    let query = `{ ${sourceParam} "query": { "multi_match": { "query": "${searchRequest}" } } }`;
+    queries.push({ indicesId: indicesLists[index], query: JSON.parse(query) });
+  });
+  return queries;
+};
diff --git a/src/actions/index.js b/src/actions/index.js
index 98eb4983b13a7a09afac76fe13c0913c8f4395b8..245f568201757c06ee57c2d7c5ba4c3850037dab 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,3 +1,2 @@
-import * as user from './user'
-
-export { user }
+import * as user from './user';
+export { user };
diff --git a/src/actions/source.js b/src/actions/source.js
index 523bbeea1d3ac9cd543c748f6a43d1b89a116fa7..cd208f5527c2288ee9efe5417e86370af3434bdd 100644
--- a/src/actions/source.js
+++ b/src/actions/source.js
@@ -1,62 +1,61 @@
-import { InSylvaSourceManagerClient } from '../context/InSylvaSourceManagerClient'
-import { InSylvaSearchClient } from '../context/InSylvaSearchClient'
-import { refreshToken } from "../context/UserContext";
-import { tokenTimedOut } from '../Utils'
+import { InSylvaSourceManagerClient } from '../context/InSylvaSourceManagerClient';
+import { InSylvaSearchClient } from '../context/InSylvaSearchClient';
+import { refreshToken } from '../context/UserContext';
+import { tokenTimedOut } from '../Utils';
 
 const ismClient = new InSylvaSourceManagerClient();
-ismClient.baseUrl = process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_PORT ? `${process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_HOST}:${process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_SOURCE_MANAGER_HOST}`
+ismClient.baseUrl = process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_HOST}:${process.env.REACT_APP_IN_SYLVA_SOURCE_MANAGER_PORT}`
+  : `${window._env_.REACT_APP_IN_SYLVA_SOURCE_MANAGER_HOST}`;
 const isClient = new InSylvaSearchClient();
-isClient.baseUrl = process.env.REACT_APP_IN_SYLVA_SEARCH_PORT ? `${process.env.REACT_APP_IN_SYLVA_SEARCH_HOST}:${process.env.REACT_APP_IN_SYLVA_SEARCH_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_SEARCH_HOST}`
-
-export { fetchPublicFields, fetchUserPolicyFields, fetchSources, searchQuery, getQueryCount };
+isClient.baseUrl = process.env.REACT_APP_IN_SYLVA_SEARCH_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_SEARCH_HOST}:${process.env.REACT_APP_IN_SYLVA_SEARCH_PORT}`
+  : `${window._env_.REACT_APP_IN_SYLVA_SEARCH_HOST}`;
+
+export {
+  fetchPublicFields,
+  fetchUserPolicyFields,
+  fetchSources,
+  searchQuery,
+  getQueryCount,
+};
 
 async function fetchPublicFields() {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    ismClient.token = sessionStorage.getItem("access_token")
-    const result = await ismClient.publicFields()
-    // if (result) {
-    return (result)
-    // } else {
-    // return (null)
-    // }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  ismClient.token = sessionStorage.getItem('access_token');
+  return await ismClient.publicFields();
 }
 
 async function fetchUserPolicyFields(kcId) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    ismClient.token = sessionStorage.getItem("access_token")
-    const result = await ismClient.userPolicyFields(kcId)
-    return (result)
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  ismClient.token = sessionStorage.getItem('access_token');
+  return await ismClient.userPolicyFields(kcId);
 }
 
 async function fetchSources(kcId) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    ismClient.token = sessionStorage.getItem("access_token")
-    const result = await ismClient.sourcesWithIndexes(kcId)
-    return (result)
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  ismClient.token = sessionStorage.getItem('access_token');
+  return await ismClient.sourcesWithIndexes(kcId);
 }
 
 async function searchQuery(query) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    isClient.token = sessionStorage.getItem("access_token")
-
-    const result = await isClient.search(query)
-    return (result)
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  isClient.token = sessionStorage.getItem('access_token');
+  return await isClient.search(query);
 }
 
 async function getQueryCount(queries) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    isClient.token = sessionStorage.getItem("access_token")
-
-    const result = await isClient.count(queries)
-    return (result)
-}
\ No newline at end of file
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  isClient.token = sessionStorage.getItem('access_token');
+  return await isClient.count(queries);
+}
diff --git a/src/actions/user.js b/src/actions/user.js
index 2a1da17560dfeca5bc0c29a1013f00691a5a5374..8aa8453053a2aabefc64a0998023e5b8241478ad 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -1,86 +1,83 @@
 import { InSylvaGatekeeperClient } from '../context/InSylvaGatekeeperClient';
-import { refreshToken } from "../context/UserContext";
-import { tokenTimedOut } from '../Utils'
+import { refreshToken } from '../context/UserContext';
+import { tokenTimedOut } from '../Utils';
 
 const igClient = new InSylvaGatekeeperClient();
-igClient.baseUrl = process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT ? `${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}:${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}`
+igClient.baseUrl = process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}:${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT}`
+  : `${window._env_.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}`;
 
 export const findOneUser = async (id, request = igClient) => {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const user = await request.findOneUser(id);
-        if (user) {
-            return user
-        }
-    } catch (error) {
-        console.log("error find user")
-        console.log(error)
-    }
-}
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const user = await request.findOneUser(id);
+    if (user) {
+      return user;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 export const findOneUserWithGroupAndRole = async (id, request = igClient) => {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const user = await request.findOneUserWithGroupAndRole(id);
-        if (user) {
-            return user
-        }
-    } catch (error) {
-        console.log("error find user with group and role")
-        console.log(error)
-    }
-}
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const user = await request.findOneUserWithGroupAndRole(id);
+    if (user) {
+      return user;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 export async function getGroups() {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const groups = await igClient.getGroups();
-        if (groups) {
-            return groups
-        }
-    } catch (error) {
-        console.log("error get groups")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const groups = await igClient.getGroups();
+    if (groups) {
+      return groups;
+    }
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function getRoles() {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const roles = await igClient.findRole();
-        if (roles) {
-            return roles
-        }
-    } catch (error) {
-        console.log("error get roles")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const roles = await igClient.findRole();
+    if (roles) {
+      return roles;
+    }
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export const sendMail = async (subject, message, request = igClient) => {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        await request.sendMail(subject, message);
-    } catch (error) {
-        console.log("error send mail")
-        console.log(error)
-    }
-}
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    await request.sendMail(subject, message);
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 /* export async function findUserDetails(store, id, request = igClient) {
     try {
@@ -113,89 +110,80 @@ export const sendMail = async (subject, message, request = igClient) => {
 } */
 
 export async function fetchUserRequests(kcId) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const requests = await igClient.getUserRequests(kcId);
-        if (requests) {
-            return requests
-        }
-    } catch (error) {
-        console.log("error fetch user requests")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const requests = await igClient.getUserRequests(kcId);
+    if (requests) {
+      return requests;
+    }
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function createUserRequest(kcId, message) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        await igClient.createUserRequest(kcId, message);
-    } catch (error) {
-        console.log("error create user request")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    await igClient.createUserRequest(kcId, message);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function deleteUserRequest(requestId) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        await igClient.deleteUserRequest(requestId);
-    } catch (error) {
-        console.log("error create user request")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    await igClient.deleteUserRequest(requestId);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function addUserHistory(kcId, query, name, uiStructure, description) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        var jsonUIStructure = JSON.stringify(uiStructure)
-        await igClient.addUserHistory(kcId, query, name, jsonUIStructure, description);
-    } catch (error) {
-        // debugger
-        console.error(error)
-        console.log("error save user search")
-        //console.log(JSON.stringify(error))
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const jsonUIStructure = JSON.stringify(uiStructure);
+    await igClient.addUserHistory(kcId, query, name, jsonUIStructure, description);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function fetchUserHistory(kcId) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        const history = await igClient.userHistory(kcId);
-        if (history) {
-            return history
-        }
-    } catch (error) {
-        console.log("error fetch user history")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    const history = await igClient.userHistory(kcId);
+    if (history) {
+      return history;
+    }
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function deleteUserHistory(id) {
-    if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
-        refreshToken()
-    }
-    igClient.token = sessionStorage.getItem("access_token")
-    try {
-        await igClient.deleteUserHistory(id);
-    } catch (error) {
-        console.log("error delete saved search")
-        console.log(error)
-    }
+  if (tokenTimedOut(process.env.REACT_KEYCLOAK_TOKEN_VALIDITY)) {
+    refreshToken();
+  }
+  igClient.token = sessionStorage.getItem('access_token');
+  try {
+    await igClient.deleteUserHistory(id);
+  } catch (error) {
+    console.error(error);
+  }
 }
-
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 99564ed459316ee40158f92816a10bd1b63200bf..f1e74d049f358e01ef1b3056e39b97508da1a37c 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -1,67 +1,59 @@
 import React from 'react';
-
-import {
-    EuiHeader,
-    EuiHeaderSection,
-    EuiHeaderSectionItem,
-    EuiHeaderLinks,
-    EuiHeaderLink
-} from '@elastic/eui'
-import logoInSylva from '../../favicon.svg'
-
+import { Link } from 'react-router-dom';
 import {
-    Link
-} from "react-router-dom";
-
-import HeaderAppMenu from './header_app_menu';
+  EuiHeader,
+  EuiHeaderSection,
+  EuiHeaderSectionItem,
+  EuiHeaderLinks,
+  EuiHeaderLink,
+} from '@elastic/eui';
 import HeaderUserMenu from './header_user_menu';
-
 import style from './styles';
+import logoInSylva from '../../favicon.svg';
 
 const structure = [
-    {
-        id: 0,
-        label: 'Home',
-        href: '/app/home',
-        icon: ''
-    },
-    {
-        id: 1,
-        label: 'Search',
-        href: '/app/search',
-        icon: ''
-    }
+  {
+    id: 0,
+    label: 'Home',
+    href: '/app/home',
+    icon: '',
+  },
+  {
+    id: 1,
+    label: 'Search',
+    href: '/app/search',
+    icon: '',
+  },
 ];
 
-const Header = (props) => {
-
-    return (
-        <>
-            <EuiHeader>
-                <EuiHeaderSection grow={true}>
-                    <EuiHeaderSectionItem border="right">
-                        <img style={style} src={logoInSylva} width="75" height="45" alt='Logo INRAE' />
-                    </EuiHeaderSectionItem>
-                    <EuiHeaderLinks border="right">
-                        {
-                            structure.map(link => (
-                                <EuiHeaderLink key={link.id} iconType="empty" href="#">
-                                    <Link to={link.href}>{link.label}</Link>
-                                </EuiHeaderLink>
-                            ))
-                        }
-                    </EuiHeaderLinks>
-                </EuiHeaderSection>
-                <EuiHeaderSection side="right">
-                    <EuiHeaderSectionItem>
-                        {HeaderUserMenu()}
-                    </EuiHeaderSectionItem>
-                    {/* <EuiHeaderSectionItem>
-                        <HeaderAppMenu />
-                    </EuiHeaderSectionItem> */}
-                </EuiHeaderSection>
-            </EuiHeader>
-        </>)
-}
+const Header = () => {
+  return (
+    <>
+      <EuiHeader>
+        <EuiHeaderSection grow={true}>
+          <EuiHeaderSectionItem border="right">
+            <img
+              style={style}
+              src={logoInSylva}
+              width="75"
+              height="45"
+              alt="Logo INRAE"
+            />
+          </EuiHeaderSectionItem>
+          <EuiHeaderLinks border="right">
+            {structure.map((link) => (
+              <EuiHeaderLink iconType="empty" key={link.id}>
+                <Link to={link.href}>{link.label}</Link>
+              </EuiHeaderLink>
+            ))}
+          </EuiHeaderLinks>
+        </EuiHeaderSection>
+        <EuiHeaderSection side="right">
+          <EuiHeaderSectionItem>{HeaderUserMenu()}</EuiHeaderSectionItem>
+        </EuiHeaderSection>
+      </EuiHeader>
+    </>
+  );
+};
 
 export default Header;
diff --git a/src/components/Header/header_app_menu.js b/src/components/Header/header_app_menu.js
deleted file mode 100644
index d6ba290ccb0477c14d6109cce0e30ffd21ac73c3..0000000000000000000000000000000000000000
--- a/src/components/Header/header_app_menu.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from 'react'
-
-import {
-    EuiIcon,
-    EuiKeyPadMenu,
-    EuiKeyPadMenuItem,
-    EuiPopover,
-    EuiHeaderSectionItemButton
-} from '@elastic/eui'
-
-export default class extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            isOpen: false,
-        };
-    }
-
-    onMenuButtonClick = () => {
-        this.setState({
-            isOpen: !this.state.isOpen,
-        });
-    };
-
-    closeMenu = () => {
-        this.setState({
-            isOpen: false,
-        });
-    };
-
-    render() {
-        const button = (
-            <EuiHeaderSectionItemButton
-                aria-controls="keyPadMenu"
-                aria-expanded={this.state.isOpen}
-                aria-haspopup="true"
-                aria-label="Apps menu"
-                onClick={this.onMenuButtonClick}>
-                <EuiIcon type="apps" size="m" />
-            </EuiHeaderSectionItemButton>
-        );
-
-        return (
-            <EuiPopover
-                id="headerAppMenu"
-                ownFocus
-                button={button}
-                isOpen={this.state.isOpen}
-                anchorPosition="downRight"
-                closePopover={this.closeMenu}>
-                <EuiKeyPadMenu id="keyPadMenu" style={{ width: 288 }}>
-                    <EuiKeyPadMenuItem label="Discover" href="#">
-                        <EuiIcon type="discoverApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Dashboard" href="#">
-                        <EuiIcon type="dashboardApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Dev Tools" href="#">
-                        <EuiIcon type="devToolsApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Machine Learning" href="#">
-                        <EuiIcon type="machineLearningApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Graph" href="#">
-                        <EuiIcon type="graphApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Visualize" href="#">
-                        <EuiIcon type="visualizeApp" size="l" />
-                    </EuiKeyPadMenuItem>
-
-                    <EuiKeyPadMenuItem label="Timelion" href="#">
-                        <EuiIcon type="timelionApp" size="l" />
-                    </EuiKeyPadMenuItem>
-                </EuiKeyPadMenu>
-            </EuiPopover>
-        );
-    }
-}
diff --git a/src/components/Header/header_user_menu.js b/src/components/Header/header_user_menu.js
index b7803cc4e9d594037eb77083dd6880d59cb923c1..feb51bb45544c887a679289dab19aa1fa8401652 100644
--- a/src/components/Header/header_user_menu.js
+++ b/src/components/Header/header_user_menu.js
@@ -1,104 +1,86 @@
-import React, { Component, useEffect, useState, useCallback } from 'react';
-
+import React, { useEffect, useState } from 'react';
 import {
-    EuiAvatar,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiHeaderSectionItemButton,
-    EuiNotificationBadge,
-    EuiLink,
-    EuiText,
-    EuiSpacer,
-    EuiPopover,
-    EuiButtonIcon
-} from '@elastic/eui'
-
-import { signOut } from "../../context/UserContext";
-import { findOneUser } from "../../actions/user"
-
-export default function HeaderUserMenu(props) {
-    /* constructor(props) {
-        super(props);
-
-        this.state = {
-            isOpen: false,
-        };
-    } */
-    const [isOpen, setIsOpen] = useState(false)
-    const [user, setUser] = useState({})
-
-    const onMenuButtonClick = () => {
-        setIsOpen(!isOpen)
-    };
-
-    const closeMenu = () => {
-        setIsOpen(false)
-    };
-
-
-    const loadUser = () => {
-        if (sessionStorage.getItem('user_id')) {
-            findOneUser(sessionStorage.getItem("user_id")).then(user => {
-                setUser(user)
-            })
-        }
+  EuiAvatar,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiText,
+  EuiSpacer,
+  EuiPopover,
+  EuiButtonIcon,
+} from '@elastic/eui';
+import { signOut } from '../../context/UserContext';
+import { findOneUser } from '../../actions/user';
+
+export default function HeaderUserMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [user, setUser] = useState({});
+
+  const onMenuButtonClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  const loadUser = () => {
+    if (sessionStorage.getItem('user_id')) {
+      findOneUser(sessionStorage.getItem('user_id')).then((user) => {
+        setUser(user);
+      });
     }
-
-    useEffect(() => {
-        loadUser()
-    }, []);
-
-    const button = (
-        <EuiButtonIcon
-            size="s"
-            onClick={onMenuButtonClick}
-            iconType="user"
-            title="User profile"
-        />
-    );
-
-    return (
-        <EuiPopover
-            id="headerUserMenu"
-            ownFocus
-            button={button}
-            isOpen={isOpen}
-            anchorPosition="downRight"
-            closePopover={closeMenu}
-            panelPaddingSize="none">
-            <div style={{ width: 320 }}>
-                <EuiFlexGroup
-                    gutterSize="m"
-                    className="euiHeaderProfile"
-                    responsive={false}>
+  };
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  const HeaderUserButton = (
+    <EuiButtonIcon
+      size="s"
+      onClick={onMenuButtonClick}
+      iconType="user"
+      title="User profile"
+      aria-label="User profile"
+    />
+  );
+
+  return (
+    user.username && (
+      <EuiPopover
+        id="headerUserMenu"
+        ownFocus
+        button={HeaderUserButton}
+        isOpen={isOpen}
+        anchorPosition="downRight"
+        closePopover={closeMenu}
+        panelPaddingSize="none"
+      >
+        <div style={{ width: 320 }}>
+          <EuiFlexGroup gutterSize="m" className="euiHeaderProfile" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiAvatar name={user.username} size="xl" />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText>{user.username}</EuiText>
+              <EuiSpacer size="m" />
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="spaceBetween">
                     <EuiFlexItem grow={false}>
-                        <EuiAvatar name={user.username} size="xl" />
+                      <EuiLink href="#/app/profile">Edit profile</EuiLink>
                     </EuiFlexItem>
-
-                    <EuiFlexItem>
-                        <EuiText>
-                            {user.username}
-                        </EuiText>
-
-                        <EuiSpacer size="m" />
-
-                        <EuiFlexGroup>
-                            <EuiFlexItem>
-                                <EuiFlexGroup justifyContent="spaceBetween">
-                                    <EuiFlexItem grow={false}>
-                                        <EuiLink href="#/app/profile">Edit profile</EuiLink>
-                                    </EuiFlexItem>
-
-                                    <EuiFlexItem grow={false}>
-                                        <EuiLink onClick={() => signOut()}>Log out</EuiLink>
-                                    </EuiFlexItem>
-                                </EuiFlexGroup>
-                            </EuiFlexItem>
-                        </EuiFlexGroup>
+                    <EuiFlexItem grow={false}>
+                      <EuiLink onClick={() => signOut()}>Log out</EuiLink>
                     </EuiFlexItem>
-                </EuiFlexGroup>
-
-            </div>
-        </EuiPopover>
-    );
-}
\ No newline at end of file
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+      </EuiPopover>
+    )
+  );
+}
diff --git a/src/components/Header/package.json b/src/components/Header/package.json
index a0bd7dfbbfecceca2e074cf7ffe51b63c83c6de4..be07feea099746f4ee7c9796a67b2d0876c1d4a7 100644
--- a/src/components/Header/package.json
+++ b/src/components/Header/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Header",
-    "version": "0.0.0",
-    "private": true,
-    "main": "Header.js"
-}
\ No newline at end of file
+  "name": "Header",
+  "version": "0.0.0",
+  "private": true,
+  "main": "Header.js"
+}
diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js
index 074fe13ec8515e7e0953b7af5f70b713fc8cba5d..2515727ce2391dc110ed0e581dfe850c9968dde9 100644
--- a/src/components/Header/styles.js
+++ b/src/components/Header/styles.js
@@ -1,10 +1,8 @@
-
-
 const headerStyle = {
-    paddingTop: "10px",
-    paddingBottom: "-6px",
-    paddingRight: "10px",
-    paddingLeft: "10px"
-}
+  paddingTop: '10px',
+  paddingBottom: '-6px',
+  paddingRight: '10px',
+  paddingLeft: '10px',
+};
 
-export default headerStyle;
\ No newline at end of file
+export default headerStyle;
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 9b071df304260db5f6ee80c085053029a45c9c13..ddfcb8639542d0484050318d8aa67f6103a496a2 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -1,28 +1,21 @@
-import React from 'react'
-import {
-    Route,
-    Switch,
-    withRouter,
-} from "react-router-dom"
+import React from 'react';
+import { Route, Switch, withRouter } from 'react-router-dom';
+import Header from '../../components/Header';
+import Search from '../../pages/search';
+import Home from '../../pages/home';
+import Profile from '../../pages/profile';
 
-import Header from '../../components/Header'
+const Layout = () => {
+  return (
+    <>
+      <Header />
+      <Switch>
+        <Route path="/app/home" component={Home} />
+        <Route path="/app/search" component={Search} />
+        <Route path="/app/profile" component={Profile} />
+      </Switch>
+    </>
+  );
+};
 
-import Search from '../../pages/search'
-import Home from '../../pages/home'
-import Profile from '../../pages/profile'
-
-const Layout = (props) => {
-    return [
-        <>
-            <Header />
-            <Switch>
-                <Route path="/app/home" component={Home} />
-                <Route path="/app/search" component={Search} />
-                <Route path="/app/profile" component={Profile} />
-            </Switch>
-        </>
-    ]
-
-}
-
-export default withRouter(Layout)
\ No newline at end of file
+export default withRouter(Layout);
diff --git a/src/components/Layout/package.json b/src/components/Layout/package.json
index e9155f9f6db722f8c919e9bc7c9d810ff00a9e20..dc67afaaa71c8328a58e70af684ee4a3f2218cbd 100644
--- a/src/components/Layout/package.json
+++ b/src/components/Layout/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Layout",
-    "version": "1.0.0",
-    "private": true,
-    "main": "Layout.js"
-}
\ No newline at end of file
+  "name": "Layout",
+  "version": "1.0.0",
+  "private": true,
+  "main": "Layout.js"
+}
diff --git a/src/context/InSylvaGatekeeperClient.js b/src/context/InSylvaGatekeeperClient.js
index 2c99af3270dc72ada58da8b98d2b0c481335b330..51997da246103711788a69805e258503fa3518d4 100644
--- a/src/context/InSylvaGatekeeperClient.js
+++ b/src/context/InSylvaGatekeeperClient.js
@@ -1,130 +1,111 @@
 class InSylvaGatekeeperClient {
-
-    async post(method, path, requestContent) {
-
-        const headers = {
-            "Content-Type": "application/json",
-            //"Access-Control-Allow-Origin": "*"
-            "Authorization": `Bearer ${this.token}`
-        }
-        const response = await fetch(`${this.baseUrl}${path}`, {
-            method: method,
-            headers,
-            body: JSON.stringify(requestContent),
-            mode: 'cors'
-        });
-        const responseContent = await response.json();
-        return responseContent;
-    }
-
-    async getGroups() {
-        const path = `/user/groups`
-        const groups = await this.post('POST', `${path}`, {})
-        return groups
-    }
-
-    async getUserRequests(kcId) {
-        const path = `/user/list-requests-by-user`;
-        const userRequests = await this.post('POST', `${path}`, {
-            kcId,
-        });
-        return userRequests;
-    }
-
-    async createUserRequest(kcId, message) {
-        const path = `/user/create-request`;
-        const userRequests = await this.post('POST', `${path}`, {
-            kcId,
-            message
-        });
-        return userRequests;
-    }
-
-    async deleteUserRequest(id) {
-        console.log("client")
-        const path = `/user/delete-request`;
-        const userRequests = await this.post('DELETE', `${path}`, {
-            id
-        });
-    }
-
-    async findRole() {
-        const path = `/role/find`;
-        const roles = await this.post('GET', `${path}`);
-        return roles;
-    }
-
-    async kcId({ email }) {
-        const path = `/user/kcid`;
-
-        const kcId = await this.post('POST', `${path}`, {
-            email
-        });
-
-        return kcId;
-    }
-
-    async sendMail(subject, message) {
-        const path = `/user/send-mail`;
-
-        await this.post('POST', `${path}`, {
-            subject,
-            message
-        });
-    }
-
-    async findOneUser(id) {
-        const path = `/user/findOne`;
-        const user = await this.post('POST', `${path}`, {
-            id,
-        });
-        return user;
-    }
-
-    async findOneUserWithGroupAndRole(id) {
-        const path = `/user/one-with-groups-and-roles`;
-        const user = await this.post('POST', `${path}`, {
-            id,
-        });
-        return user;
-    }
-
-    async getUserDetails(kcId) {
-        const path = `/user/detail`;
-        const userDetails = await this.post('GET', `${path}`, {
-            kcId,
-        });
-        return userDetails;
-    }
-
-    async addUserHistory(kcId, query, name, uiStructure, description) {
-        const path = `/user/add-history`;
-        await this.post('POST', `${path}`, {
-            kcId,
-            query,
-            name,
-            uiStructure,
-            description
-        });
-    }
-
-    async userHistory(kcId) {
-        const path = `/user/fetch-history`;
-        const history = await this.post('POST', `${path}`, {
-            kcId
-        });
-        return history
-    }
-
-    async deleteUserHistory(id) {
-        const path = `/user/delete-history`;
-        await this.post('POST', `${path}`, {
-            id
-        });
-    }
-
+  async post(method, path, requestContent) {
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${this.token}`,
+    };
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers,
+      body: JSON.stringify(requestContent),
+      mode: 'cors',
+    });
+    return await response.json();
+  }
+
+  async getGroups() {
+    const path = `/user/groups`;
+    return await this.post('POST', `${path}`, {});
+  }
+
+  async getUserRequests(kcId) {
+    const path = `/user/list-requests-by-user`;
+    return await this.post('POST', `${path}`, {
+      kcId,
+    });
+  }
+
+  async createUserRequest(kcId, message) {
+    const path = `/user/create-request`;
+    return await this.post('POST', `${path}`, {
+      kcId,
+      message,
+    });
+  }
+
+  async deleteUserRequest(id) {
+    const path = `/user/delete-request`;
+    return await this.post('DELETE', `${path}`, { id });
+  }
+
+  async findRole() {
+    const path = `/role/find`;
+    return await this.post('GET', `${path}`);
+  }
+
+  async kcId({ email }) {
+    const path = `/user/kcid`;
+    return await this.post('POST', `${path}`, {
+      email,
+    });
+  }
+
+  async sendMail(subject, message) {
+    const path = `/user/send-mail`;
+
+    await this.post('POST', `${path}`, {
+      subject,
+      message,
+    });
+  }
+
+  async findOneUser(id) {
+    const path = `/user/findOne`;
+    return await this.post('POST', `${path}`, {
+      id,
+    });
+  }
+
+  async findOneUserWithGroupAndRole(id) {
+    const path = `/user/one-with-groups-and-roles`;
+    return await this.post('POST', `${path}`, {
+      id,
+    });
+  }
+
+  async getUserDetails(kcId) {
+    const path = `/user/detail`;
+    return await this.post('GET', `${path}`, {
+      kcId,
+    });
+  }
+
+  async addUserHistory(kcId, query, name, uiStructure, description) {
+    const path = `/user/add-history`;
+    await this.post('POST', `${path}`, {
+      kcId,
+      query,
+      name,
+      uiStructure,
+      description,
+    });
+  }
+
+  async userHistory(kcId) {
+    const path = `/user/fetch-history`;
+    return await this.post('POST', `${path}`, {
+      kcId,
+    });
+  }
+
+  async deleteUserHistory(id) {
+    const path = `/user/delete-history`;
+    await this.post('POST', `${path}`, {
+      id,
+    });
+  }
 }
 
 InSylvaGatekeeperClient.prototype.baseUrl = null;
 InSylvaGatekeeperClient.prototype.token = null;
-export { InSylvaGatekeeperClient }
\ No newline at end of file
+export { InSylvaGatekeeperClient };
diff --git a/src/context/InSylvaKeycloakClient.js b/src/context/InSylvaKeycloakClient.js
index b3f785de91213346a0050c87de455fa7f5897156..c5980429eac474a69ea0cfb484c05fcc6cb3e91c 100644
--- a/src/context/InSylvaKeycloakClient.js
+++ b/src/context/InSylvaKeycloakClient.js
@@ -1,94 +1,77 @@
-const loginUrl = process.env.REACT_APP_IN_SYLVA_LOGIN_PORT ? `${process.env.REACT_APP_IN_SYLVA_LOGIN_HOST}:${process.env.REACT_APP_IN_SYLVA_LOGIN_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_LOGIN_HOST}`
+import { getLoginUrl } from '../Utils';
 
 class InSylvaKeycloakClient {
-
-    async post(path, requestContent) {
-
-        // const access_token = sessionStorage.getItem("access_token");
-
-        const headers = {
-            'Content-Type': 'application/x-www-form-urlencoded',
-            // "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
-            // "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
-        };
-        /*
+  async post(path, requestContent) {
+    // const access_token = sessionStorage.getItem("access_token");
+    const headers = {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      // "Access-Control-Allow-Methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
+      // "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
+    };
+    /*
         if (access_token) {
             headers["Authorization"] = "Bearer " + access_token
         }
         */
-
-        var formBody = [];
-        for (var property in requestContent) {
-            var encodedKey = encodeURIComponent(property);
-            var encodedValue = encodeURIComponent(requestContent[property]);
-            formBody.push(encodedKey + "=" + encodedValue);
-        }
-        formBody = formBody.join("&");
-
-        const response = await fetch(`${this.baseUrl}${path}`, {
-            method: 'POST',
-            headers,
-            body: formBody,
-            mode: 'cors'
-        });
-
-        if (response.ok === true) {
-            // ok
-        } else {
-            this.logout()
-            sessionStorage.removeItem("user_id");
-            sessionStorage.removeItem("access_token");
-            sessionStorage.removeItem("refresh_token");
-            window.location.replace(loginUrl + '?requestType=search')
-        }
-
-
-        if (response.statusText === "No Content") {
-            // ok
-        } else {
-            const responseContent = await response.json();
-
-            return responseContent;
-        }
-    };
-
-    async refreshToken({
-        realm = this.realm,
-        client_id = this.client_id,
-        // client_secret : 'optional depending on the type of client',
-        grant_type = "refresh_token",
-        refresh_token
-    }) {
-        console.log("refreshToken function is invoked.")
-        
-        const path = `/auth/realms/${realm}/protocol/openid-connect/token`;
-        const token = await this.post(`${path}`, {
-            client_id,
-            grant_type,
-            refresh_token
-        });
-
-        return { token }
+    let formBody = [];
+    for (const property in requestContent) {
+      const encodedKey = encodeURIComponent(property);
+      const encodedValue = encodeURIComponent(requestContent[property]);
+      formBody.push(encodedKey + '=' + encodedValue);
     }
+    formBody = formBody.join('&');
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method: 'POST',
+      headers,
+      body: formBody,
+      mode: 'cors',
+    });
+    if (response.ok === true) {
+      // ok
+    } else {
+      await this.logout();
+      sessionStorage.removeItem('user_id');
+      sessionStorage.removeItem('access_token');
+      sessionStorage.removeItem('refresh_token');
+      window.location.replace(getLoginUrl() + '?requestType=search');
+    }
+    if (response.statusText === 'No Content') {
+      // ok
+    } else {
+      return await response.json();
+    }
+  }
 
-    async logout({
-        realm = this.realm,
-        client_id = this.client_id
-    }) {
-        const refresh_token = sessionStorage.getItem("refresh_token");
-        const path = `/auth/realms/${realm}/protocol/openid-connect/logout`;
-        if (refresh_token) {
-            await this.post(`${path}`, {
-                client_id,
-                refresh_token
-            });
-        }
+  async refreshToken({
+    realm = this.realm,
+    client_id = this.client_id,
+    // client_secret : 'optional depending on the type of client',
+    grant_type = 'refresh_token',
+    refresh_token,
+  }) {
+    const path = `/auth/realms/${realm}/protocol/openid-connect/token`;
+    const token = await this.post(`${path}`, {
+      client_id,
+      grant_type,
+      refresh_token,
+    });
+    return { token };
+  }
+
+  async logout({ realm = this.realm, client_id = this.client_id }) {
+    const refresh_token = sessionStorage.getItem('refresh_token');
+    const path = `/auth/realms/${realm}/protocol/openid-connect/logout`;
+    if (refresh_token) {
+      await this.post(`${path}`, {
+        client_id,
+        refresh_token,
+      });
     }
+  }
 }
 
 InSylvaKeycloakClient.prototype.baseUrl = null;
 InSylvaKeycloakClient.prototype.client_id = null;
 InSylvaKeycloakClient.prototype.grant_type = null;
 InSylvaKeycloakClient.prototype.realm = null;
-
-export { InSylvaKeycloakClient }
\ No newline at end of file
+export { InSylvaKeycloakClient };
diff --git a/src/context/InSylvaSearchClient.js b/src/context/InSylvaSearchClient.js
index da7d16e47d20bfb63784fc644a77e0412eed2df0..6d702e250a32dd15308a0ef13ce9182a2957fbb5 100644
--- a/src/context/InSylvaSearchClient.js
+++ b/src/context/InSylvaSearchClient.js
@@ -1,28 +1,22 @@
 class InSylvaSearchClient {
-
-    async post(method, path, requestContent) {
-
-        const headers = {
-            "Content-Type": "application/json",
-            "Access-Control-Allow-Origin": "*",
-            "Authorization": `Bearer ${this.token}`,
-            'Access-Control-Max-Age': 86400
-            // 'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH',
-        }
-
-        const response = await fetch(`${this.baseUrl}${path}`, {
-            method: method,
-            headers,
-            body: JSON.stringify(requestContent),
-            mode: 'cors'
-        });
-
-        const responseContent = await response.json();
-
-        return responseContent;
-    }
-
-    /* async search(query, indices) {
+  async post(method, path, requestContent) {
+    const headers = {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+      Authorization: `Bearer ${this.token}`,
+      'Access-Control-Max-Age': 86400,
+      // 'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH',
+    };
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers,
+      body: JSON.stringify(requestContent),
+      mode: 'cors',
+    });
+    return await response.json();
+  }
+
+  /* async search(query, indices) {
         const indicesId = []
         indices.forEach(index => {
             indicesId.push(index.index_id)
@@ -35,46 +29,40 @@ class InSylvaSearchClient {
         return result;
     } */
 
-    async search(queries) {
-
-        let finalResult = []
-
-        for (let i = 0; i < queries.length; i++) {
-            const indicesId = queries[i].indicesId
-            const query = queries[i].query
-            const path = `/scroll-search`;
-            const result = await this.post('POST', `${path}`, {
-                indicesId,
-                query
-            });
-            if (!result.statusCode) {
-                finalResult.push(...result)
-            }
-        }
-
-        return finalResult;
+  async search(queries) {
+    let finalResult = [];
+
+    for (let i = 0; i < queries.length; i++) {
+      const indicesId = queries[i].indicesId;
+      const query = queries[i].query;
+      const path = `/scroll-search`;
+      const result = await this.post('POST', `${path}`, {
+        indicesId,
+        query,
+      });
+      if (!result.statusCode) {
+        finalResult.push(...result);
+      }
     }
-
-    async count(queries) {
-
-        let finalResult = 0
-
-        for (let i = 0; i < queries.length; i++) {
-            const indicesId = queries[i].indicesId
-            const query = queries[i].query
-            const path = `/count`;
-            const result = await this.post('POST', `${path}`, {
-                indicesId,
-                query
-            });
-            finalResult = finalResult + result.count
-        }
-
-        return finalResult;
+    return finalResult;
+  }
+
+  async count(queries) {
+    let finalResult = 0;
+    for (let i = 0; i < queries.length; i++) {
+      const indicesId = queries[i].indicesId;
+      const query = queries[i].query;
+      const path = `/count`;
+      const result = await this.post('POST', `${path}`, {
+        indicesId,
+        query,
+      });
+      finalResult = finalResult + result.count;
     }
-
+    return finalResult;
+  }
 }
 
-InSylvaSearchClient.prototype.baseUrl = null
-InSylvaSearchClient.prototype.token = null
-export { InSylvaSearchClient }
\ No newline at end of file
+InSylvaSearchClient.prototype.baseUrl = null;
+InSylvaSearchClient.prototype.token = null;
+export { InSylvaSearchClient };
diff --git a/src/context/InSylvaSourceManagerClient.js b/src/context/InSylvaSourceManagerClient.js
index 7b714eb976895db6f024af41ebb0e27b12a1ae28..ceffbd624da8af86e2555a72ab9afdea255a7985 100644
--- a/src/context/InSylvaSourceManagerClient.js
+++ b/src/context/InSylvaSourceManagerClient.js
@@ -1,44 +1,34 @@
 class InSylvaSourceManagerClient {
-
-    async post(method, path, requestContent) {
-
-        const headers = {
-            "Content-Type": "application/json",
-            //"Access-Control-Allow-Origin": "*"
-            "Authorization": `Bearer ${this.token}`
-        }
-        const response = await fetch(`${this.baseUrl}${path}`, {
-            method: method,
-            headers,
-            body: JSON.stringify(requestContent),
-            mode: 'cors'
-        });
-
-        const responseContent = await response.json();
-
-        return responseContent;
-    }
-
-    async publicFields() {
-        const path = `/publicFieldList`
-        const result = this.post('GET', `${path}`);
-        return result;
+  async post(method, path, requestContent) {
+    const headers = {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${this.token}`,
     };
-
-    async userPolicyFields(userId) {
-        const path = `/policy-stdfields`
-        const result = this.post('POST', `${path}`, { userId });
-        return result;
-    };
-
-    async sourcesWithIndexes(kc_id) {
-        const path = `/source_indexes`
-        const result = this.post('POST', `${path}`, { kc_id });
-        return result;
-    };
-
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers,
+      body: JSON.stringify(requestContent),
+      mode: 'cors',
+    });
+    return await response.json();
+  }
+
+  async publicFields() {
+    const path = `/publicFieldList`;
+    return this.post('GET', `${path}`);
+  }
+
+  async userPolicyFields(userId) {
+    const path = `/policy-stdfields`;
+    return this.post('POST', `${path}`, { userId });
+  }
+
+  async sourcesWithIndexes(kc_id) {
+    const path = `/source_indexes`;
+    return this.post('POST', `${path}`, { kc_id });
+  }
 }
 
 InSylvaSourceManagerClient.prototype.baseUrl = null;
 InSylvaSourceManagerClient.prototype.token = null;
-export { InSylvaSourceManagerClient }
+export { InSylvaSourceManagerClient };
diff --git a/src/context/UserContext.js b/src/context/UserContext.js
index 2899346a4cacb859546964398d88d9fd1d63377c..2d7b83dda5f22f5b484641bbebde7a92a2804728 100644
--- a/src/context/UserContext.js
+++ b/src/context/UserContext.js
@@ -1,122 +1,131 @@
-import React from "react";
-import { InSylvaGatekeeperClient } from './InSylvaGatekeeperClient'
-import { InSylvaKeycloakClient } from './InSylvaKeycloakClient'
+import React from 'react';
+import { InSylvaGatekeeperClient } from './InSylvaGatekeeperClient';
+import { InSylvaKeycloakClient } from './InSylvaKeycloakClient';
+import { getLoginUrl } from '../Utils';
 
 const UserStateContext = React.createContext();
 const UserDispatchContext = React.createContext();
 
 const igClient = new InSylvaGatekeeperClient();
-igClient.baseUrl = process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT ? `${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}:${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}`
+igClient.baseUrl = process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}:${process.env.REACT_APP_IN_SYLVA_GATEKEEPER_PORT}`
+  : `${window._env_.REACT_APP_IN_SYLVA_GATEKEEPER_HOST}`;
 
 const ikcClient = new InSylvaKeycloakClient();
-ikcClient.baseUrl = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT ? `${process.env.REACT_APP_IN_SYLVA_KEYCLOAK_HOST}:${process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_KEYCLOAK_HOST}`
-ikcClient.realm = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT ? `${process.env.REACT_APP_IN_SYLVA_REALM}` : `${window._env_.REACT_APP_IN_SYLVA_REALM}`
-ikcClient.client_id = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT ? `${process.env.REACT_APP_IN_SYLVA_CLIENT_ID}` : `${window._env_.REACT_APP_IN_SYLVA_CLIENT_ID}`
-ikcClient.grant_type = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT ? `${process.env.REACT_APP_IN_SYLVA_GRANT_TYPE}` : `${window._env_.REACT_APP_IN_SYLVA_GRANT_TYPE}`
-
-const loginUrl = process.env.REACT_APP_IN_SYLVA_LOGIN_PORT ? `${process.env.REACT_APP_IN_SYLVA_LOGIN_HOST}:${process.env.REACT_APP_IN_SYLVA_LOGIN_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_LOGIN_HOST}`
+ikcClient.baseUrl = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_KEYCLOAK_HOST}:${process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT}`
+  : `${window._env_.REACT_APP_IN_SYLVA_KEYCLOAK_HOST}`;
+ikcClient.realm = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_REALM}`
+  : `${window._env_.REACT_APP_IN_SYLVA_REALM}`;
+ikcClient.client_id = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_CLIENT_ID}`
+  : `${window._env_.REACT_APP_IN_SYLVA_CLIENT_ID}`;
+ikcClient.grant_type = process.env.REACT_APP_IN_SYLVA_KEYCLOAK_PORT
+  ? `${process.env.REACT_APP_IN_SYLVA_GRANT_TYPE}`
+  : `${window._env_.REACT_APP_IN_SYLVA_GRANT_TYPE}`;
 
 function userReducer(state, action) {
-    switch (action.type) {
-        case "USER_LOGGED_IN":
-            return { ...state, isAuthenticated: true };
-        case "SIGN_OUT_SUCCESS":
-            return { ...state, isAuthenticated: false };
-        case "EXPIRED_SESSION":
-            return { ...state, isAuthenticated: false };
-        case "USER_NOT_LOGGED_IN":
-            console.log("USER_NOT_LOGGED_IN")
-            return { ...state, isAuthenticated: false };
-        case "STD_FIELDS_SUCCESS":
-            console.log("STD_FIELDS_SUCCESS")
-            return { ...state, isAuthenticated: true };
-        case "STD_FIELDS_FAILURE":
-            console.log("STD_FIELDS_FAILURE")
-            return { ...state, isAuthenticated: true };
-        default: {
-            throw new Error(`Unhandled action type: ${action.type}`);
-        }
+  switch (action.type) {
+    case 'USER_LOGGED_IN':
+      return { ...state, isAuthenticated: true };
+    case 'SIGN_OUT_SUCCESS':
+      return { ...state, isAuthenticated: false };
+    case 'EXPIRED_SESSION':
+      return { ...state, isAuthenticated: false };
+    case 'USER_NOT_LOGGED_IN':
+      return { ...state, isAuthenticated: false };
+    case 'STD_FIELDS_SUCCESS':
+      return { ...state, isAuthenticated: true };
+    case 'STD_FIELDS_FAILURE':
+      return { ...state, isAuthenticated: true };
+    default: {
+      throw new Error(`Unhandled action type: ${action.type}`);
     }
+  }
 }
 
 function UserProvider({ children }) {
-    const [state, dispatch] = React.useReducer(userReducer, {
-        isAuthenticated: !!sessionStorage.getItem("access_token"),
-    });
+  const [state, dispatch] = React.useReducer(userReducer, {
+    isAuthenticated: !!sessionStorage.getItem('access_token'),
+  });
 
-    return (
-        <UserStateContext.Provider value={state}>
-            <UserDispatchContext.Provider value={dispatch}>
-                {children}
-            </UserDispatchContext.Provider>
-        </UserStateContext.Provider>
-    );
+  return (
+    <UserStateContext.Provider value={state}>
+      <UserDispatchContext.Provider value={dispatch}>
+        {children}
+      </UserDispatchContext.Provider>
+    </UserStateContext.Provider>
+  );
 }
 
 function useUserState() {
-    const context = React.useContext(UserStateContext);
-    if (context === undefined) {
-        throw new Error("useUserState must be used within a UserProvider");
-    }
-    return context;
+  const context = React.useContext(UserStateContext);
+  if (context === undefined) {
+    throw new Error('useUserState must be used within a UserProvider');
+  }
+  return context;
 }
 
 function useUserDispatch() {
-    const context = React.useContext(UserDispatchContext);
-    if (context === undefined) {
-        throw new Error("useUserDispatch must be used within a UserProvider");
-    }
-    return context;
+  const context = React.useContext(UserDispatchContext);
+  if (context === undefined) {
+    throw new Error('useUserDispatch must be used within a UserProvider');
+  }
+  return context;
 }
 
-
 async function checkUserLogin(userId, accessToken, refreshToken) {
-    if (!!userId && !!accessToken && !!refreshToken) {
-        sessionStorage.setItem("user_id", userId)
-        sessionStorage.setItem("access_token", accessToken)
-        sessionStorage.setItem("refresh_token", refreshToken)
-        //To Do:
-        // Load the user histories from UserHistory(userId) endpoint
-        // Load the user result filters from Result_Filter(userId) endpoints
-        // Load the user policies from Policy(userId) endpoint
-        if (!sessionStorage.getItem("token_refresh_time")) {
-            sessionStorage.setItem("token_refresh_time", Date.now())
-        }
-        // dispatch({ type: "USER_LOGGED_IN" });
-    } else {
-        console.log('user not logged in')
-        // dispatch({ type: "USER_NOT_LOGGED_IN" });
+  if (!!userId && !!accessToken && !!refreshToken) {
+    sessionStorage.setItem('user_id', userId);
+    sessionStorage.setItem('access_token', accessToken);
+    sessionStorage.setItem('refresh_token', refreshToken);
+    //To Do:
+    // Load the user histories from UserHistory(userId) endpoint
+    // Load the user result filters from Result_Filter(userId) endpoints
+    // Load the user policies from Policy(userId) endpoint
+    if (!sessionStorage.getItem('token_refresh_time')) {
+      sessionStorage.setItem('token_refresh_time', Date.now());
     }
+    // dispatch({ type: "USER_LOGGED_IN" });
+  } else {
+    // dispatch({ type: "USER_NOT_LOGGED_IN" });
+  }
 }
 
 async function refreshToken() {
-    if (!!sessionStorage.getItem("user_id")) {
-        setTimeout(async () => {
-            const result = await ikcClient.refreshToken({ refresh_token: sessionStorage.getItem("refresh_token") });
-            if (result) {
-                console.log(result)
-                sessionStorage.setItem("access_token", result.token.access_token);
-                sessionStorage.setItem("token_refresh_time", Date.now())
-                // dispatch({ type: "USER_LOGGED_IN" });
-            } else {
-                console.log('refresh token error')
-                // dispatch({ type: "LOGIN_FAILURE" });
-            }
-        }, 3000);
-    } else {
-        console.log('user not logged in')
-        // dispatch({ type: "EXPIRED_SESSION" });
-    }
+  if (!!sessionStorage.getItem('user_id')) {
+    setTimeout(async () => {
+      const result = await ikcClient.refreshToken({
+        refresh_token: sessionStorage.getItem('refresh_token'),
+      });
+      if (result) {
+        sessionStorage.setItem('access_token', result.token.access_token);
+        sessionStorage.setItem('token_refresh_time', Date.now());
+        // dispatch({ type: "USER_LOGGED_IN" });
+      } else {
+        // dispatch({ type: "LOGIN_FAILURE" });
+      }
+    }, 3000);
+  } else {
+    // dispatch({ type: "EXPIRED_SESSION" });
+  }
 }
 
 async function signOut() {
-    console.log('logout');
-    await ikcClient.logout({});
-    sessionStorage.removeItem("user_id");
-    sessionStorage.removeItem("access_token");
-    sessionStorage.removeItem("refresh_token");
-    // dispatch({ type: "SIGN_OUT_SUCCESS" });
-    window.location.replace(loginUrl + '?requestType=search')
+  await ikcClient.logout({});
+  sessionStorage.removeItem('user_id');
+  sessionStorage.removeItem('access_token');
+  sessionStorage.removeItem('refresh_token');
+  // dispatch({ type: "SIGN_OUT_SUCCESS" });
+  window.location.replace(getLoginUrl() + '?requestType=search');
 }
 
-export { UserProvider, useUserState, useUserDispatch, checkUserLogin, refreshToken, signOut };
+export {
+  UserProvider,
+  useUserState,
+  useUserDispatch,
+  checkUserLogin,
+  refreshToken,
+  signOut,
+};
diff --git a/src/index.js b/src/index.js
index bb787cdb49c6ff1cb9423a49a7f6fa90b96c7f4a..ab31dbff2807f9889d87325b74923ae2ce76a431 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,28 +1,25 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import '@elastic/eui/dist/eui_theme_light.css';
-import { UserProvider, checkUserLogin } from "./context/UserContext";
+import { UserProvider, checkUserLogin } from './context/UserContext';
 import App from './App';
-import { getUrlParam, redirect } from './Utils.js';
-
-const loginUrl = process.env.REACT_APP_IN_SYLVA_LOGIN_PORT ? `${process.env.REACT_APP_IN_SYLVA_LOGIN_HOST}:${process.env.REACT_APP_IN_SYLVA_LOGIN_PORT}` : `${window._env_.REACT_APP_IN_SYLVA_LOGIN_HOST}`
+import { getLoginUrl, getUrlParam, redirect } from './Utils.js';
 
-const userId = getUrlParam("kcId", "")
-const accessToken = getUrlParam("accessToken", "")
-let refreshToken = getUrlParam("refreshToken", "")
-if (refreshToken.includes('#/app/search'))
-    refreshToken = refreshToken.substring(0, refreshToken.indexOf('#'))
-checkUserLogin(userId, accessToken, refreshToken)
+const userId = getUrlParam('kcId', '');
+const accessToken = getUrlParam('accessToken', '');
+let refreshToken = getUrlParam('refreshToken', '');
+if (refreshToken.includes('#/app/search')) {
+  refreshToken = refreshToken.substring(0, refreshToken.indexOf('#'));
+}
+checkUserLogin(userId, accessToken, refreshToken);
 
-if (sessionStorage.getItem("access_token")) {
-    ReactDOM.render(
-        <UserProvider>
-            <App userId={userId} accessToken={accessToken} refreshToken={refreshToken} />
-        </UserProvider>,
-        document.getElementById('root')
-    );
+if (sessionStorage.getItem('access_token')) {
+  ReactDOM.render(
+    <UserProvider>
+      <App userId={userId} accessToken={accessToken} refreshToken={refreshToken} />
+    </UserProvider>,
+    document.getElementById('root')
+  );
 } else {
-    redirect(loginUrl + '?requestType=search')
+  redirect(getLoginUrl() + '?requestType=search');
 }
-
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
index 1a2bb221e9f9a0f39b93bca4f491bf0842d41a8c..c54f9082634e36a5f12a16691c28c76b8dd5efc5 100644
--- a/src/pages/home/Home.js
+++ b/src/pages/home/Home.js
@@ -1,40 +1,59 @@
-import React from 'react'
-
+import React from 'react';
 import {
-    EuiPageContent,
-    EuiPageContentHeader,
-    EuiPageContentHeaderSection,
-    EuiPageContentBody,
-    EuiTitle
-} from '@elastic/eui'
-
-const Home = (props) => {
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageContentBody,
+  EuiTitle,
+} from '@elastic/eui';
 
-    return (<>
-        <EuiPageContent>
-            <EuiPageContentHeader>
-                <EuiPageContentHeaderSection>
-                    <EuiTitle>
-                        <h2>Welcome to the IN-SYLVA IS application search module</h2>
-                    </EuiTitle>
-                    <br /><br />
-                    <p>As a reminder, it should be remembered that the metadata stored in IN-SYLVA IS are structured around the IN-SYLVA standard.</p>
-                    <br />
-                    <p>This standard is composed of metadata fields. A metadata record is therefore made up of a series of fields accompanied by their value.</p>
-                    <br /><br />
-                    <p>With this part of the interface you will be able to search for metadata records (previously loaded via the portal), by defining a certain number of criteria.</p>
-                    <br />
-                    <p>By default the "search" interface opens to a "plain text" search, ie the records returned in the result are those which, in one of the field values, contains the supplied character string.</p>
-                    <br />
-                    <p>A click on the Advanced search button gives access to a more complete form via which you can do more precise searches on one or more targeted fields.</p>
-                    <br /><br />
-                    <p>Click on the "Search" tab to access the search interface.</p>
-                </EuiPageContentHeaderSection>
-            </EuiPageContentHeader>
-            <EuiPageContentBody>
-            </EuiPageContentBody>
-        </EuiPageContent>
-    </>)
-}
+const Home = () => {
+  return (
+    <>
+      <EuiPageContent>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h2>Welcome to the IN-SYLVA IS application search module</h2>
+            </EuiTitle>
+            <br />
+            <br />
+            <p>
+              As a reminder, it should be remembered that the metadata stored in IN-SYLVA
+              IS are structured around the IN-SYLVA standard.
+            </p>
+            <br />
+            <p>
+              This standard is composed of metadata fields. A metadata record is therefore
+              made up of a series of fields accompanied by their value.
+            </p>
+            <br />
+            <br />
+            <p>
+              With this part of the interface you will be able to search for metadata
+              records (previously loaded via the portal), by defining a certain number of
+              criteria.
+            </p>
+            <br />
+            <p>
+              By default the "search" interface opens to a "plain text" search, ie the
+              records returned in the result are those which, in one of the field values,
+              contains the supplied character string.
+            </p>
+            <br />
+            <p>
+              A click on the Advanced search button gives access to a more complete form
+              via which you can do more precise searches on one or more targeted fields.
+            </p>
+            <br />
+            <br />
+            <p>Click on the "Search" tab to access the search interface.</p>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody></EuiPageContentBody>
+      </EuiPageContent>
+    </>
+  );
+};
 
-export default Home
\ No newline at end of file
+export default Home;
diff --git a/src/pages/home/package.json b/src/pages/home/package.json
index 21a1e58067a06eed8ca603afb5d697de1af215a9..ba3c514f8b3222be3c05312714553240fe234506 100644
--- a/src/pages/home/package.json
+++ b/src/pages/home/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Home",
-    "version": "1.0.0",
-    "private": true,
-    "main": "Home.js"
-}
\ No newline at end of file
+  "name": "Home",
+  "version": "1.0.0",
+  "private": true,
+  "main": "Home.js"
+}
diff --git a/src/pages/maps/Map.css b/src/pages/maps/Map.css
index a87a3a8e23971f10064c382dae833b2d7a20bc91..e4cc0cba6b13d37f712ed67eb4f73d8eefe4fff4 100644
--- a/src/pages/maps/Map.css
+++ b/src/pages/maps/Map.css
@@ -1,7 +1,7 @@
-
-div.ol-custom-overviewmap, div.ol-custom-overviewmap.ol-uncollapsible {
-    top: auto;
-    left: auto;
-    right: 0;
-    bottom: 0;
-}
\ No newline at end of file
+div.ol-custom-overviewmap,
+div.ol-custom-overviewmap.ol-uncollapsible {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
diff --git a/src/pages/maps/SearchMap.js b/src/pages/maps/SearchMap.js
index f8392c469feb1ba7dd531da52687f1f9a7ea735d..958af49b1d74cea9ea376f9a618d1ccd98ef792f 100644
--- a/src/pages/maps/SearchMap.js
+++ b/src/pages/maps/SearchMap.js
@@ -1,55 +1,50 @@
-import React, { useState, useEffect } from "react";
-import { Map, View } from "ol";
+import React, { useState, useEffect } from 'react';
+import { Map, View } from 'ol';
 // import TileLayer from "ol/layer/Tile";
 import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
-import ImageLayer from "ol/layer/Image";
-import SourceOSM from "ol/source/OSM";
-import BingMaps from "ol/source/BingMaps";
+import ImageLayer from 'ol/layer/Image';
+import SourceOSM from 'ol/source/OSM';
+import BingMaps from 'ol/source/BingMaps';
 import { Vector as VectorSource } from 'ol/source';
 import WMTS from 'ol/source/WMTS';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
 //import {fromLonLat, get as getProjection} from 'ol/proj.js';
-import {getWidth} from 'ol/extent';
-import ImageWMS from "ol/source/ImageWMS";
-import GeoJSON from "ol/format/GeoJSON";
+import { getWidth } from 'ol/extent';
+import ImageWMS from 'ol/source/ImageWMS';
+import GeoJSON from 'ol/format/GeoJSON';
 //import { Circle as CircleStyle, Fill, Stroke, Style, Text, Icon } from 'ol/style';
 import { Fill, Stroke, Style, Text, Icon } from 'ol/style';
 import { Circle, Point, Polygon } from 'ol/geom';
 import Feature from 'ol/Feature';
-import * as proj from "ol/proj";
+import * as proj from 'ol/proj';
 import {
-    ScaleLine,
-    MousePosition,
-    OverviewMap,
-    defaults as defaultControls
-} from 'ol/control'
-import {toStringXY} from 'ol/coordinate';
+  ScaleLine,
+  MousePosition,
+  OverviewMap,
+  defaults as defaultControls,
+} from 'ol/control';
+import { toStringXY } from 'ol/coordinate';
 import 'ol/ol.css';
-
 import { EuiCheckbox } from '@elastic/eui';
 import { htmlIdGenerator } from '@elastic/eui/lib/services';
-
-import { updateArrayElement } from '../../Utils.js'
-
+import { updateArrayElement } from '../../Utils.js';
 
 const SearchMap = (props) => {
-
-    /*var image = new CircleStyle({
+  /*var image = new CircleStyle({
         radius: 5,
         fill: null,
         stroke: new Stroke({ color: 'red', width: 1 }),
     });*/
-
-    const styles = {
-        'Point': new Style({
-            image: new Icon({
-                anchor: [0.5, 46],
-                anchorXUnits: 'fraction',
-                anchorYUnits: 'pixels',
-                src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
-            })
-        }),
-        /* 'Circle': new Style({
+  const styles = {
+    Point: new Style({
+      image: new Icon({
+        anchor: [0.5, 46],
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'pixels',
+        src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png',
+      }),
+    }),
+    /* 'Circle': new Style({
             image: new Circle({
                 radius: 7,
                 fill: new Fill({
@@ -61,17 +56,17 @@ const SearchMap = (props) => {
                 })
             })
         }),*/
-        'Circle': new Style({
-            stroke: new Stroke({
-                color: 'blue',
-                width: 2,
-            }),
-            //radius: 1000,
-            fill: new Fill({
-                color: 'rgba(0,0,255,0.3)',
-            }),
-        }),
-        /* 'LineString': new Style({
+    Circle: new Style({
+      stroke: new Stroke({
+        color: 'blue',
+        width: 2,
+      }),
+      //radius: 1000,
+      fill: new Fill({
+        color: 'rgba(0,0,255,0.3)',
+      }),
+    }),
+    /* 'LineString': new Style({
             stroke: new Stroke({
                 color: 'green',
                 width: 1,
@@ -139,33 +134,29 @@ const SearchMap = (props) => {
             opacity: 0.5,
             zIndex: 9999
         }, */
-        mapContainer: {
-            height: "80vh",
-            width: "60vw"
-        },
-        layerTree: {
-            cursor: "pointer"
-        },
-
-    };
-
-    const source = new SourceOSM();
-    const overviewMapControl = new OverviewMap({
-        layers: [
-            new TileLayer({
-                source: source
-            })
-        ]
-    });
-
-    const [center, setCenter] = useState(proj.fromLonLat([2.5, 46.5]));
-    const [zoom, setZoom] = useState(6);
-
-    var styleFunction = function (feature) {
-        return styles[feature.getGeometry().getType()];
-    };
-
-    /* const newPoint = {
+    mapContainer: {
+      height: '80vh',
+      width: '60vw',
+    },
+    layerTree: {
+      cursor: 'pointer',
+    },
+  };
+  const source = new SourceOSM();
+  const overviewMapControl = new OverviewMap({
+    layers: [
+      new TileLayer({
+        source: source,
+      }),
+    ],
+  });
+  const [center, setCenter] = useState(proj.fromLonLat([2.5, 46.5]));
+  const [zoom, setZoom] = useState(6);
+  const styleFunction = function (feature) {
+    return styles[feature.getGeometry().getType()];
+  };
+
+  /* const newPoint = {
         'type': 'Feature',
         'geometry': {
             'type': 'Point',
@@ -189,130 +180,136 @@ const SearchMap = (props) => {
         ],
     } */
 
-    var vectorSource = new VectorSource({
-         /*features: new GeoJSON().readFeatures(geojsonObject),*/
-    projection: 'EPSG:4326'
-    });
+  const vectorSource = new VectorSource({
+    /*features: new GeoJSON().readFeatures(geojsonObject),*/
+    projection: 'EPSG:4326',
+  });
 
-    // vectorSource.addFeature(new Feature(new Polygon([[proj.fromLonLat([0, 45]), proj.fromLonLat([0, 50]), proj.fromLonLat([5, 50]), proj.fromLonLat([5, 45])]])));
+  // vectorSource.addFeature(new Feature(new Polygon([[proj.fromLonLat([0, 45]), proj.fromLonLat([0, 50]), proj.fromLonLat([5, 50]), proj.fromLonLat([5, 45])]])));
 
-    var vectorLayer = new VectorLayer({
-        name: 'query_results',
-        source: vectorSource,
-        style: styleFunction,
-    });
+  const vectorLayer = new VectorLayer({
+    name: 'query_results',
+    source: vectorSource,
+    style: styleFunction,
+  });
 
-    const resolutions = [];
-    const matrixIds = [];
-    const proj3857 = proj.get('EPSG:3857');
-    const maxResolution = getWidth(proj3857.getExtent()) / 256;
+  const resolutions = [];
+  const matrixIds = [];
+  const proj3857 = proj.get('EPSG:3857');
+  const maxResolution = getWidth(proj3857.getExtent()) / 256;
 
-    for (let i = 0; i < 20; i++) {
+  for (let i = 0; i < 20; i++) {
     matrixIds[i] = i.toString();
     resolutions[i] = maxResolution / Math.pow(2, i);
-    }
+  }
 
-    const tileGrid = new WMTSTileGrid({
+  const tileGrid = new WMTSTileGrid({
     origin: [-20037508, 20037508],
     resolutions: resolutions,
     matrixIds: matrixIds,
-    });
-    
-    const [mapLayers, setMapLayers] = useState([
-        new TileLayer({
-            name: 'osm-layer',
-            source: source
+  });
+
+  const [mapLayers, setMapLayers] = useState([
+    new TileLayer({
+      name: 'osm-layer',
+      source: source,
+    }),
+    /* Bing Aerial */
+    new TileLayer({
+      name: 'Bing Aerial',
+      preload: Infinity,
+      source: new BingMaps({
+        key: 'AtdZQap9X-lowJjvdPhTgr1BctJuGGm-ZoVw9wO6dHt1VDURjRKEkssetwOe31Xt',
+        imagerySet: 'Aerial',
+      }),
+      //visible: false
+    }),
+    new TileLayer({
+      name: 'IGN',
+      source: new WMTS({
+        url: 'https://wxs.ign.fr/choisirgeoportail/geoportail/wmts',
+        layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
+        matrixSet: 'PM',
+        format: 'image/png',
+        projection: 'EPSG:3857',
+        tileGrid: tileGrid,
+        style: 'normal',
+        attributions:
+          '<a href="https://www.ign.fr/" target="_blank">' +
+          '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
+          'information géographique et forestière" alt="IGN"></a>',
+      }),
+    }),
+    vectorLayer,
+
+    // new ImageLayer({
+    //     name: 'donuts-insylva-layer',
+    //     source: new ImageWMS({
+    //         url: 'http: //w3.avignon.inra.fr/geoserver/wms',
+    //         params: { 'LAYERS': 'urfm:donut_view' },
+    //         ratio: 1
+    //     })
+    // })
+  ]);
+
+  const [mapLayersVisibility, setMapLayersVisibility] = useState(
+    new Array(mapLayers.length).fill(true)
+  );
+
+  // const posGreenwich = proj.fromLonLat([0, 51.47]);
+  // set initial map objects
+  const view = new View({
+    center: center,
+    zoom: zoom,
+  });
+
+  const [map] = useState(
+    new Map({
+      target: null,
+      layers: mapLayers,
+      controls: defaultControls().extend([
+        new MousePosition({
+          projection: 'EPSG:4326',
         }),
-        /* Bing Aerial */
-        new TileLayer({
-	        name: 'Bing Aerial',
-	        preload: Infinity,
-	        source: new BingMaps({
-		        key: 'AtdZQap9X-lowJjvdPhTgr1BctJuGGm-ZoVw9wO6dHt1VDURjRKEkssetwOe31Xt',
-		        imagerySet: 'Aerial'
-	            }),
-	        //visible: false
-        }),
-        new TileLayer({
-            name: 'IGN',
-            source: new WMTS({
-                url: 'https://wxs.ign.fr/choisirgeoportail/geoportail/wmts',
-                layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
-                matrixSet: 'PM',
-                format: 'image/png',
-                projection: 'EPSG:3857',
-                tileGrid: tileGrid,
-                style: 'normal',
-                attributions:
-                  '<a href="https://www.ign.fr/" target="_blank">' +
-                  '<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
-                  'information géographique et forestière" alt="IGN"></a>',
-              }),
-          }),
-        vectorLayer
-
-        // new ImageLayer({
-        //     name: 'donuts-insylva-layer',
-        //     source: new ImageWMS({
-        //         url: 'http: //w3.avignon.inra.fr/geoserver/wms',
-        //         params: { 'LAYERS': 'urfm:donut_view' },
-        //         ratio: 1
-        //     })
-        // })
-    ]);
-
-    const [mapLayersVisibility, setMapLayersVisibility
-    ] = useState(new Array(mapLayers.length).fill(true))
-
-    // const posGreenwich = proj.fromLonLat([0, 51.47]);
-    // set initial map objects
-    const view = new View({
-        center: center,
-        zoom: zoom,
-    });
-
-    const [map
-    ] = useState(
-        new Map({
-            target: null,
-            layers: mapLayers,
-            controls: defaultControls().extend([
-                new MousePosition({
-                    projection: 'EPSG:4326'
-                }),
-                new ScaleLine(),
-                overviewMapControl
-            ]),
-            view: view
-        })
-    );
-
-    const processData = (props) => {
-        if (props.searchResults) {
-
-            props.searchResults.forEach(result => {
-                if (result.experimental_site.geo_point && result.experimental_site.geo_point.longitude && result.experimental_site.geo_point.latitude) {
-                    //vectorSource.addFeature(new Feature(new Point(proj.fromLonLat([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude]))))
-                    //vectorSource.addFeature(new Feature(new Circle(toStringXY([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude],1),10)))
-                    const coord = [result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude]
-                    vectorSource.addFeature(new Feature(new Circle(proj.fromLonLat(coord),1000)))
-                    //vectorSource.addFeature(new Feature(new Circle([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude],10)))
-                }
-            })
+        new ScaleLine(),
+        overviewMapControl,
+      ]),
+      view: view,
+    })
+  );
+
+  const processData = (props) => {
+    if (props.searchResults) {
+      props.searchResults.forEach((result) => {
+        if (
+          result.experimental_site.geo_point &&
+          result.experimental_site.geo_point.longitude &&
+          result.experimental_site.geo_point.latitude
+        ) {
+          //vectorSource.addFeature(new Feature(new Point(proj.fromLonLat([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude]))))
+          //vectorSource.addFeature(new Feature(new Circle(toStringXY([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude],1),10)))
+          const coord = [
+            result.experimental_site.geo_point.longitude,
+            result.experimental_site.geo_point.latitude,
+          ];
+          vectorSource.addFeature(new Feature(new Circle(proj.fromLonLat(coord), 1000)));
+          //vectorSource.addFeature(new Feature(new Circle([result.experimental_site.geo_point.longitude, result.experimental_site.geo_point.latitude],10)))
         }
+      });
     }
+  };
+
+  // useEffect Hooks
+  // [] = component did mount
+  // set the initial map targets
+  useEffect(() => {
+    map.setTarget('map');
+    map.on('moveend', () => {
+      setCenter(map.getView().getCenter());
+      setZoom(map.getView().getZoom());
+    });
 
-    // useEffect Hooks
-    // [] = component did mount
-    // set the initial map targets
-    useEffect(() => {
-        map.setTarget("map");
-        map.on("moveend", () => {
-            setCenter(map.getView().getCenter());
-            setZoom(map.getView().getZoom());
-        });
-
-        /* map.getCurrentScale = function () {
+    /* map.getCurrentScale = function () {
             //var map = this.getMap();
             var map = this;
             var view = map.getView();
@@ -322,119 +319,117 @@ const SearchMap = (props) => {
             var mpu = proj.METERS_PER_UNIT[units];
             var scale = resolution * mpu * 39.37 * dpi;
             return scale;
-    
+
         };
         map.getView().on('change:resolution', function(evt){
-    
+
         var divScale = 10;// to adjusting
         var radius =  map.getCurrentScale()/divScale;
         Circle.getStyle().getGeometry().setRadius(radius);
         }); */
 
-        // Basic overlay to show where i want the new center to be
-        /* const overlay = new Overlay({
+    // Basic overlay to show where i want the new center to be
+    /* const overlay = new Overlay({
             position: posGreenwich,
             element: overlayRef.current,
             positioning: "center-center",
             stopEvent: false
         });
         map.addOverlay(overlay); */
-        map.getView().animate(
-            { zoom: zoom },
-            { center: center },
-            { duration: 2000 });
+    map.getView().animate({ zoom: zoom }, { center: center }, { duration: 2000 });
 
-        processData(props)
-        // clean up upon component unmount
-        /* return () => {
-            console.log("will unmount");
+    processData(props);
+    // clean up upon component unmount
+    /* return () => {
             map.setTarget(null);
         }; */
-    }, [props]);
-
-    const getLayerIndex = (name) => {
-        let index = 0
-        mapLayers.forEach(layer => {
-            if (layer.get('name') === name) {
-                index = mapLayers.indexOf(layer)
-            }
-        })
-        return (index)
-    }
-
-    const toggleLayer = (name) => {
-        let updatedLayers = mapLayers
-        console.log(updatedLayers)
-        console.log(`checkbox activée: ${name}`)
-        const layerIndex = getLayerIndex(name)
-        console.log('index ' + layerIndex)
-        // let updatedLayer = updatedLayers[getLayerIndex(name)]
-        setMapLayersVisibility(updateArrayElement(mapLayersVisibility, layerIndex, !mapLayersVisibility[layerIndex]))
-        updatedLayers[layerIndex].setVisible(!updatedLayers[layerIndex].getVisible())
-        setMapLayers(updatedLayers)
-    };
+  }, [props]);
+
+  const getLayerIndex = (name) => {
+    let index = 0;
+    mapLayers.forEach((layer) => {
+      if (layer.get('name') === name) {
+        index = mapLayers.indexOf(layer);
+      }
+    });
+    return index;
+  };
+
+  const toggleLayer = (name) => {
+    let updatedLayers = mapLayers;
+    const layerIndex = getLayerIndex(name);
+    // let updatedLayer = updatedLayers[getLayerIndex(name)]
+    setMapLayersVisibility(
+      updateArrayElement(
+        mapLayersVisibility,
+        layerIndex,
+        !mapLayersVisibility[layerIndex]
+      )
+    );
+    updatedLayers[layerIndex].setVisible(!updatedLayers[layerIndex].getVisible());
+    setMapLayers(updatedLayers);
+  };
 
-    // helpers
-    /* const btnAction = () => {
+  // helpers
+  /* const btnAction = () => {
         // when button is clicked, recentre map
         // this does not work :(
         setCenter(posGreenwich);
         setZoom(6);
     }; */
-    // render
-    return (
-        <div>
-            <div id="map" style={styles.mapContainer}></div>
-            <div id="layertree" >
-                <br />
-                <h5>Cliquez sur les couches pour modifier leur visibilité.</h5>
-                <br />
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Fonds carto ou vecteur</th>
-                            {/*<th align="center">Couches INSYLVA</th>
+  // render
+  return (
+    <div>
+      <div id="map" style={styles.mapContainer}></div>
+      <div id="layertree">
+        <br />
+        <h5>Cliquez sur les couches pour modifier leur visibilité.</h5>
+        <br />
+        <table>
+          <thead>
+            <tr>
+              <th>Fonds carto ou vecteur</th>
+              {/*<th align="center">Couches INSYLVA</th>
     <th>Infos attributs</th>*/}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-
-                            <td>
-                                <ul>
-                                    <li>
-                                        <EuiCheckbox
-                                            id={htmlIdGenerator()()}
-                                            label="Query result"
-                                            checked={mapLayersVisibility[getLayerIndex("query_results")]}
-                                            onChange={e => toggleLayer("query_results")}
-                                        />
-                                    </li>
-                                    <li>
-                                        <EuiCheckbox
-                                            id={htmlIdGenerator()()}
-                                            label="Open Street Map"
-                                            checked={mapLayersVisibility[getLayerIndex("osm-layer")]}
-                                            onChange={e => toggleLayer("osm-layer")}
-                                        />
-                                    </li>
-                                    <li>
-                                        <EuiCheckbox
-                                            id={htmlIdGenerator()()}
-                                            label="Bing Aerial"
-                                            checked={mapLayersVisibility[getLayerIndex("Bing Aerial")]}
-                                            onChange={e => toggleLayer("Bing Aerial")}
-                                        />
-                                    </li>
-                                    <li>
-                                        <EuiCheckbox
-                                            id={htmlIdGenerator()()}
-                                            label="PLAN IGN"
-                                            checked={mapLayersVisibility[getLayerIndex("IGN")]}
-                                            onChange={e => toggleLayer("IGN")}
-                                        />
-                                    </li>
-                                    {/*<li>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <ul>
+                  <li>
+                    <EuiCheckbox
+                      id={htmlIdGenerator()()}
+                      label="Query result"
+                      checked={mapLayersVisibility[getLayerIndex('query_results')]}
+                      onChange={(e) => toggleLayer('query_results')}
+                    />
+                  </li>
+                  <li>
+                    <EuiCheckbox
+                      id={htmlIdGenerator()()}
+                      label="Open Street Map"
+                      checked={mapLayersVisibility[getLayerIndex('osm-layer')]}
+                      onChange={(e) => toggleLayer('osm-layer')}
+                    />
+                  </li>
+                  <li>
+                    <EuiCheckbox
+                      id={htmlIdGenerator()()}
+                      label="Bing Aerial"
+                      checked={mapLayersVisibility[getLayerIndex('Bing Aerial')]}
+                      onChange={(e) => toggleLayer('Bing Aerial')}
+                    />
+                  </li>
+                  <li>
+                    <EuiCheckbox
+                      id={htmlIdGenerator()()}
+                      label="PLAN IGN"
+                      checked={mapLayersVisibility[getLayerIndex('IGN')]}
+                      onChange={(e) => toggleLayer('IGN')}
+                    />
+                  </li>
+                  {/*<li>
                                     <EuiCheckbox
                                         id={htmlIdGenerator()()}
                                         label="Départements"
@@ -450,20 +445,22 @@ const SearchMap = (props) => {
                                         onChange={e => toggleLayer("regs-layer")}
                                     />
                                 </li>*/}
-                                </ul>
-                            </td>
-                            <td><div id="info">&nbsp;</div></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            { /*<div
+                </ul>
+              </td>
+              <td>
+                <div id="info">&nbsp;</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      {/*<div
                 style={styles.bluecircle}
                 ref={overlayRef}
                 id="overlay"
                 title="overlay"
             />*/}
-            { /*<button
+      {/*<button
                 style={{
                     position: "absolute",
                     right: 10,
@@ -476,8 +473,8 @@ const SearchMap = (props) => {
             >
                 CLICK
             </button>*/}
-        </div>
-    );
+    </div>
+  );
 };
 
 export default SearchMap;
diff --git a/src/pages/maps/package.json b/src/pages/maps/package.json
index 46c05d918eacd23e1d8e4b222ca876f741753e4c..98d354e9fe39fecf18ce98e0e54347e695e00060 100644
--- a/src/pages/maps/package.json
+++ b/src/pages/maps/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Maps",
-    "version": "1.0.0",
-    "private": true,
-    "main": "SearchMap.js"
-}
\ No newline at end of file
+  "name": "Maps",
+  "version": "1.0.0",
+  "private": true,
+  "main": "SearchMap.js"
+}
diff --git a/src/pages/profile/Profile.js b/src/pages/profile/Profile.js
index e1bb582b06353dfee316c4ccfe15c20bd82eb950..d6fecd338609b352e8e558aff61e4d54d576bb79 100644
--- a/src/pages/profile/Profile.js
+++ b/src/pages/profile/Profile.js
@@ -1,30 +1,28 @@
-import React, { useState, useEffect } from 'react'
-
+import React, { useState, useEffect } from 'react';
 import {
-    EuiPageContent,
-    EuiPageContentHeader,
-    EuiPageContentHeaderSection,
-    EuiPageContentBody,
-    EuiTitle,
-    EuiSpacer,
-    EuiSelect,
-    EuiButton,
-    EuiFormRow,
-    EuiComboBox,
-    EuiBasicTable,
-    EuiForm
-} from '@elastic/eui'
-
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageContentBody,
+  EuiTitle,
+  EuiSpacer,
+  EuiSelect,
+  EuiButton,
+  EuiFormRow,
+  EuiComboBox,
+  EuiBasicTable,
+  EuiForm,
+} from '@elastic/eui';
 import {
-    createMuiTheme,
-    MuiThemeProvider
-} from "@material-ui/core/styles";
-import MUIDataTable from "mui-datatables";
-
-// import { MailService } from "@in-sylva/common"
-
-import { fetchPublicFields } from "../../actions/source";
-import { findOneUser, findOneUserWithGroupAndRole, getGroups, getRoles, sendMail, fetchUserRequests, createUserRequest, deleteUserRequest } from "../../actions/user";
+  findOneUser,
+  findOneUserWithGroupAndRole,
+  getGroups,
+  getRoles,
+  sendMail,
+  fetchUserRequests,
+  createUserRequest,
+  deleteUserRequest,
+} from '../../actions/user';
 
 /* const fieldsGridOptions = {
     filter: true,
@@ -33,312 +31,237 @@ import { findOneUser, findOneUserWithGroupAndRole, getGroups, getRoles, sendMail
     selectableRows: 'multiple',
     selectableRowsOnClick: true,
     onRowsSelect: (rowsSelected, allRows) => {
-        console.log(rowsSelected);
     },
     onRowClick: (rowData, rowState) => {
-        console.log(rowData, rowState);
     },
 }; */
 
-/* const getMuiTheme = () =>
-    createMuiTheme({
-        overrides: {
-            MUIDataTable: {
-                root: {
-                    backgroundColor: "#FF000"
-                },
-                paper: {
-                    boxShadow: "none"
-                }
-            },
-        }
-    }); */
-
-const Profile = (props) => {
-    const [fieldsCol, setFieldsCol] = useState([])
-    const [fields, setFields] = useState([])
-    const [user, setUser] = useState({})
-    const [userRole, setUserRole] = useState('')
-    const [groups, setGroups] = useState([])
-    const [roles, setRoles] = useState([])
-    const [userGroups, setUserGroups] = useState([])
-    const [userRequests, setUserRequests] = useState([])
-    const [selectedRole, setSelectedRole] = useState()
-    const [valueError, setValueError] = useState(undefined)
+const Profile = () => {
+  const [user, setUser] = useState({});
+  const [userRole, setUserRole] = useState('');
+  const [groups, setGroups] = useState([]);
+  const [roles, setRoles] = useState([]);
+  const [userGroups, setUserGroups] = useState([]);
+  const [userRequests, setUserRequests] = useState([]);
+  const [selectedRole, setSelectedRole] = useState();
+  const [valueError, setValueError] = useState(undefined);
 
-    const groupColumns = [
-        { field: 'label', name: 'Group Name', width: "30%" },
-        { field: 'description', name: 'Group description' }
-    ]
+  useEffect(() => {
+    loadUser();
+    getUserRequests();
+    getUserGroups();
+    getUserRoles();
+  }, []);
 
-    const getUserRoles = () => {
-        getRoles().then(rolesResult => {
-            const rolesArray = []
-            rolesResult.forEach(role => {
-                rolesArray.push({ id: role.id, text: role.name })
-            })
-            setRoles(rolesArray)
-        })
-    }
-
-    const getUserGroups = () => {
-        getGroups().then(groupsResult => {
-            const groupsArray = []
-            groupsResult.forEach(group => {
-                groupsArray.push({ id: group.id, label: group.name, description: group.description })
-            })
-            setGroups(groupsArray)
-        })
-    }
+  const groupColumns = [
+    { field: 'label', name: 'Group Name', width: '30%' },
+    { field: 'description', name: 'Group description' },
+  ];
 
-    const getUserRequests = () => {
-        fetchUserRequests(sessionStorage.getItem("user_id")).then(result => {
-            console.log(result)
+  const getUserRoles = () => {
+    getRoles().then((rolesResult) => {
+      const rolesArray = [];
+      rolesResult.forEach((role) => {
+        rolesArray.push({ id: role.id, text: role.name });
+      });
+      setRoles(rolesArray);
+    });
+  };
 
-            setUserRequests([...result])
-        })
-    }
+  const getUserGroups = () => {
+    getGroups().then((groupsResult) => {
+      const groupsArray = [];
+      groupsResult.forEach((group) => {
+        groupsArray.push({
+          id: group.id,
+          label: group.name,
+          description: group.description,
+        });
+      });
+      setGroups(groupsArray);
+    });
+  };
 
-    const onDeleteRequest = async (request) => {
-        const request_id = request.id
-        await deleteUserRequest(request_id)
-        getUserRequests()
-        getUserGroups()
-        getUserRoles()
-    }
+  const getUserRequests = () => {
+    fetchUserRequests(sessionStorage.getItem('user_id')).then((result) => {
+      setUserRequests([...result]);
+    });
+  };
 
-    const requestActions = [
-        {
-            name: 'Cancel',
-            description: 'Cancel this request',
-            icon: 'trash',
-            type: 'icon',
-            onClick: onDeleteRequest,
-        }
-    ]
+  const onDeleteRequest = async (request) => {
+    const request_id = request.id;
+    await deleteUserRequest(request_id);
+    getUserRequests();
+    getUserGroups();
+    getUserRoles();
+  };
 
-    const requestsColumns = [
-        { field: 'request_message', name: 'Message', width: "90%" },
-        { field: 'is_processed', name: 'Processed' },
-        { name: 'Delete', actions: requestActions }
+  const requestActions = [
+    {
+      name: 'Cancel',
+      description: 'Cancel this request',
+      icon: 'trash',
+      type: 'icon',
+      onClick: onDeleteRequest,
+    },
+  ];
 
-    ]
+  const requestsColumns = [
+    { field: 'request_message', name: 'Message', width: '90%' },
+    { field: 'is_processed', name: 'Processed' },
+    { name: 'Delete', actions: requestActions },
+  ];
 
-    const loadUser = () => {
-        if (sessionStorage.getItem('user_id')) {
-            findOneUser(sessionStorage.getItem("user_id")).then(user => {
-                setUser(user)
-            })
-            findOneUserWithGroupAndRole(sessionStorage.getItem("user_id")).then(result => {
-                const userGroupList = userGroups
-                result.forEach(user => {
-                    if (user.groupname) {
-                        userGroupList.push({ id: user.groupid, label: user.groupname, description: user.groupdescription })
-                    }
-                    setUserRole(user.rolename)
-                })
-                setUserGroups(userGroupList)
-            })
-        }
+  const loadUser = () => {
+    if (sessionStorage.getItem('user_id')) {
+      findOneUser(sessionStorage.getItem('user_id')).then((user) => {
+        setUser(user);
+      });
+      findOneUserWithGroupAndRole(sessionStorage.getItem('user_id')).then((result) => {
+        const userGroupList = userGroups;
+        result.forEach((user) => {
+          if (user.groupname) {
+            userGroupList.push({
+              id: user.groupid,
+              label: user.groupname,
+              description: user.groupdescription,
+            });
+          }
+          setUserRole(user.rolename);
+        });
+        setUserGroups(userGroupList);
+      });
     }
+  };
 
-    const getUserGroupLabels = () => {
-        let labelList = ""
-        if (!!userGroups) {
-            userGroups.forEach(group => {
-                console.log(group)
-                labelList = `${labelList} ${group.label},`
-            })
-            if (labelList.endsWith(",")) {
-                labelList = labelList.substring(0, labelList.length - 1)
-            }
-        }
-        return (labelList)
+  const getUserGroupLabels = () => {
+    let labelList = '';
+    if (!!userGroups) {
+      userGroups.forEach((group) => {
+        labelList = `${labelList} ${group.label},`;
+      });
+      if (labelList.endsWith(',')) {
+        labelList = labelList.substring(0, labelList.length - 1);
+      }
     }
+    return labelList;
+  };
 
-    useEffect(() => {
-        /* fetchPublicFields().then(result => {
-            processData(result)
-        }) */
-        loadUser()
-        getUserRequests()
-        getUserGroups()
-        getUserRoles()
-    }, [])
+  const onValueSearchChange = (value, hasMatchingOptions) => {
+    setValueError(
+      value.length === 0 || hasMatchingOptions
+        ? undefined
+        : `"${value}" is not a valid option`
+    );
+  };
 
-    /* const processData = (result) => {
-        var columns = [
-            {
-                name: 'Category',
-                options: {
-                    display: true
-                }
-            },
-            {
-                name: 'Field_name',
-                options: {
-                    display: true
-                }
-            },
-            {
-                name: 'Definition_and_comment',
-                options: {
-                    display: true
+  return (
+    <>
+      <EuiPageContent>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h2>Profile management</h2>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>
+          <EuiForm component="form">
+            <EuiTitle size="s">
+              <h3>Group list</h3>
+            </EuiTitle>
+            <EuiFormRow fullWidth label="">
+              <EuiBasicTable items={groups} columns={groupColumns} />
+            </EuiFormRow>
+            <EuiSpacer size="l" />
+            <EuiTitle size="s">
+              <h3>Requests list</h3>
+            </EuiTitle>
+            <EuiFormRow fullWidth label="">
+              <EuiBasicTable items={userRequests} columns={requestsColumns} />
+            </EuiFormRow>
+            <EuiSpacer size="l" />
+            <EuiTitle size="s">
+              <h3>Request group assignment modifications</h3>
+            </EuiTitle>
+            {getUserGroupLabels() ? (
+              <p>
+                You currently belong to (or have a pending demand for) these groups :{' '}
+                {getUserGroupLabels()}{' '}
+              </p>
+            ) : (
+              <p>You currently belong to no group</p>
+            )}
+            <EuiFormRow error={valueError} isInvalid={valueError !== undefined}>
+              <EuiComboBox
+                placeholder={'Select groups'}
+                options={groups}
+                selectedOptions={userGroups}
+                onChange={(selectedOptions) => {
+                  setValueError(undefined);
+                  setUserGroups(selectedOptions);
+                }}
+                onSearchChange={onValueSearchChange}
+              />
+            </EuiFormRow>
+            <EuiSpacer size="m" />
+            <EuiButton
+              onClick={() => {
+                if (userGroups) {
+                  const groupList = [];
+                  userGroups.forEach((group) => {
+                    groupList.push(group.label);
+                  });
+                  const message = `The user ${user.username} (${user.email}) has made a request to be part of these groups : ${groupList}.`;
+                  createUserRequest(user.id, message);
+                  sendMail('User group request', message);
+                  alert('Your group request has been sent to the administrators.');
                 }
-            },
-            {
-                name: 'Obligation_or_condition',
-                options: {
-                    display: true
+                getUserRequests();
+              }}
+              fill
+            >
+              Send request
+            </EuiButton>
+            <EuiSpacer size="l" />
+            <EuiTitle size="s">
+              <h3>Request an application role</h3>
+            </EuiTitle>
+            {userRole ? (
+              <p>Your current role is (or have a pending demand for) {userRole}</p>
+            ) : (
+              <></>
+            )}
+            <EuiFormRow>
+              <EuiSelect
+                hasNoInitialSelection
+                options={roles}
+                value={selectedRole}
+                onChange={(e) => {
+                  setSelectedRole(e.target.value);
+                }}
+              />
+            </EuiFormRow>
+            <EuiSpacer size="m" />
+            <EuiButton
+              onClick={() => {
+                if (selectedRole) {
+                  const message = `The user ${user.username} (${user.email}) has made a request to get the role : ${selectedRole}.`;
+                  createUserRequest(user.id, message);
+                  sendMail('User role request', message);
+                  alert('Your role request has been sent to the administrators.');
                 }
-            },
-            {
-                name: 'Field_type',
-                options: {
-                    display: true
-                }
-            },
-            {
-                name: 'Values',
-                options: {
-                    display: true
-                }
-            },
-        ]
-        const rows = []
-        if (result[0]) {
-            result.forEach((item) => {
-                rows.push([item.category, item.field_name, item.definition_and_comment, item.obligation_or_condition, item.field_type, item.values]);
-            });
-
-            setFieldsCol(columns);
-            setFields(rows);
-        }
-    } */
-
-    const onValueSearchChange = (value, hasMatchingOptions) => {
-        setValueError(
-            value.length === 0 || hasMatchingOptions ? undefined : `"${value}" is not a valid option`
-        )
-    }
-
-    return (<>
-        <EuiPageContent>
-            <EuiPageContentHeader>
-                <EuiPageContentHeaderSection>
-                    <EuiTitle>
-                        <h2>Profile management</h2>
-                    </EuiTitle>
-                </EuiPageContentHeaderSection>
-            </EuiPageContentHeader>
-            <EuiPageContentBody>
-                {/*<MuiThemeProvider theme={getMuiTheme()}>
-                    <MUIDataTable
-                        title={"Search profile"}
-                        data={fields}
-                        columns={fieldsCol}
-                        options={fieldsGridOptions} />
-    </MuiThemeProvider>*/}
-                <EuiForm component="form">
-                    <EuiTitle size="s">
-                        <h3>Group list</h3>
-                    </EuiTitle>
-                    <EuiFormRow
-                        fullWidth
-                        label="">
-                        <EuiBasicTable
-                            items={groups}
-                            columns={groupColumns}
-                        />
-                    </EuiFormRow>
-                    <EuiSpacer size="l" />
-                    <EuiTitle size="s">
-                        <h3>Requests list</h3>
-                    </EuiTitle>
-                    <EuiFormRow
-                        fullWidth
-                        label="">
-                        <EuiBasicTable
-                            items={userRequests}
-                            columns={requestsColumns}
-                        />
-                    </EuiFormRow>
-                    <EuiSpacer size="l" />
-                    <EuiTitle size="s">
-                        <h3>Request group assignement modifications</h3>
-                    </EuiTitle>
-                    {
-                        getUserGroupLabels() ?
-                            <p>You currently belong to (or have a pending demand for) these groups : {getUserGroupLabels()} </p> :
-                            <p>You currently belong to no group</p>
-                    }
-                    <EuiFormRow
-                        error={valueError}
-                        isInvalid={valueError !== undefined}>
-                        <EuiComboBox
-                            placeholder={"Select groups"}
-                            options={groups}
-                            selectedOptions={userGroups}
-                            onChange={(selectedOptions) => {
-                                setValueError(undefined)
-                                setUserGroups(selectedOptions)
-                            }}
-                            onSearchChange={onValueSearchChange}
-                        />
-                    </EuiFormRow>
-                    <EuiSpacer size="m" />
-
-                    <EuiButton onClick={() => {
-                        if (userGroups) {
-                            const groupList = []
-                            userGroups.forEach(group => {
-                                groupList.push(group.label)
-                            })
-                            console.log(groupList)
-                            const message = `The user ${user.username} (${user.email}) has made a request to be part of these groups : ${groupList}.`
-                            createUserRequest(user.id, message)
-                            sendMail("User group request", message)
-                            alert("Your group request has been sent to the administrators.")
-                        }
-                        getUserRequests()
-                    }} fill>
-                        Send request
-                    </EuiButton>
-
-                    <EuiSpacer size="l" />
-                    <EuiTitle size="s">
-                        <h3>Request an application role</h3>
-                    </EuiTitle>
-                    {
-                        userRole ?
-                            <p>Your current role is (or have a pending demand for) {userRole}</p> : <></>
-                    }
-                    <EuiFormRow>
-                        <EuiSelect
-                            hasNoInitialSelection
-                            options={roles}
-                            value={selectedRole}
-                            onChange={(e) => {
-                                setSelectedRole(e.target.value)
-                            }}
-                        />
-                    </EuiFormRow>
-                    <EuiSpacer size="m" />
-                    <EuiButton onClick={() => {
-                        if (selectedRole) {
-                            const message = `The user ${user.username} (${user.email}) has made a request to get the role : ${selectedRole}.`
-                            createUserRequest(user.id, message)
-                            sendMail("User role request", message)
-                            alert("Your role request has been sent to the administrators.")
-                        }
-                        getUserRequests()
-                    }} fill>
-                        Send request
-                    </EuiButton>
-                </EuiForm>
-            </EuiPageContentBody>
-        </EuiPageContent>
-    </>)
-}
+                getUserRequests();
+              }}
+              fill
+            >
+              Send request
+            </EuiButton>
+          </EuiForm>
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </>
+  );
+};
 
-export default Profile
\ No newline at end of file
+export default Profile;
diff --git a/src/pages/profile/package.json b/src/pages/profile/package.json
index 73b282179f5b1e978bcad446be78624b4928c3c3..6ebaeb0705b1f9cadd2e0ce582109560d7d1d863 100644
--- a/src/pages/profile/package.json
+++ b/src/pages/profile/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Profile",
-    "version": "1.0.0",
-    "private": true,
-    "main": "Profile.js"
-}
\ No newline at end of file
+  "name": "Profile",
+  "version": "1.0.0",
+  "private": true,
+  "main": "Profile.js"
+}
diff --git a/src/pages/results/Results.js b/src/pages/results/Results.js
index 646744c11a9c06d8b1bc8f77726296b29fbe9f0f..c54481e0a83b3d9be02a63e6c191c8544493ce56 100644
--- a/src/pages/results/Results.js
+++ b/src/pages/results/Results.js
@@ -1,168 +1,164 @@
-import React, { useState, useEffect, Fragment } from "react";
-
-import {
-    EuiTitle,
-    EuiFlyout,
-    EuiFlyoutBody,
-    EuiButton,
-    EuiText,
-    EuiFlexItem,
-    EuiFlexGroup,
-    EuiAccordion,
-    EuiPanel,
-    EuiSpacer,
-    EuiTextColor,
-    EuiIcon,
-    EuiCallOut
-} from '@elastic/eui'
-
+import React, { Fragment, useEffect, useState } from 'react';
 import {
-    createMuiTheme,
-    MuiThemeProvider
-} from "@material-ui/core/styles";
-import MUIDataTable from "mui-datatables";
-
+  EuiButton,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiIcon,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { createTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import MUIDataTable from 'mui-datatables';
 import JsonView from '@in-sylva/json-view';
+import { updateArrayElement } from '../../Utils.js';
 
-import {
-    updateArrayElement
-} from '../../Utils.js'
-
-//import { download } from 'downloadjs'
-
-const download = require('downloadjs')
+const download = require('downloadjs');
 
 const getMuiTheme = () =>
-    createMuiTheme({
-        overrides: {
-            MUIDataTable: {
-                root: {
-                    backgroundColor: "#fafbfc"
-                },
-                paper: {
-                    boxShadow: "none"
-                }
-            },
-        }
-    });
+  createTheme({
+    overrides: {
+      MUIDataTable: {
+        root: {
+          backgroundColor: '#fafbfc',
+        },
+        paper: {
+          boxShadow: 'none',
+        },
+      },
+    },
+  });
 
 const changeFlyoutState = (array, index, value, defaultValue) => {
-    let newArray = new Array(array.length).fill(defaultValue)
-    newArray[index] = value
-    return newArray
-}
+  let newArray = new Array(array.length).fill(defaultValue);
+  newArray[index] = value;
+  return newArray;
+};
 
 const Results = (searchResults, search, basicSearch) => {
+  const [resultsCol, setResultsCol] = useState([]);
+  const [results, setResults] = useState([]);
+  const [isFlyoutOpen, setIsFlyoutOpen] = useState([false]);
+  const [searchQuery, setSearchQuery] = useState('');
 
-    const [resultsCol, setResultsCol] = useState([]);
-    const [results, setResults] = useState([]);
-    const [isFlyoutOpen, setIsFlyoutOpen] = useState([false]);
-    const [searchQuery, setSearchQuery] = useState("");
+  useEffect(() => {
+    processData(searchResults);
+    search.length ? setSearchQuery(search) : setSearchQuery(basicSearch);
+  }, [searchResults, search, basicSearch]);
 
-    useEffect(() => {
-        processData(searchResults)
-        search.length ? setSearchQuery(search) : setSearchQuery(basicSearch)
-    }, [searchResults, search, basicSearch])
+  const updateTableCell = (tableContent, value, colIndex, rowIndex) => {
+    const updatedRow = updateArrayElement(tableContent[rowIndex], colIndex, value);
+    return updateArrayElement(tableContent, rowIndex, updatedRow);
+  };
 
-    const updateTableCell = (tableContent, value, colIndex, rowIndex) => {
-        const updatedRow = updateArrayElement(tableContent[rowIndex], colIndex, value)
-        const updatedResults = updateArrayElement(tableContent, rowIndex, updatedRow)
-        return (updatedResults)
-    }
+  const closeAllFlyouts = (tableContent) => {
+    const updatedResults = [];
+    tableContent.forEach((tableRow, index) => {
+      updatedResults.push(updateArrayElement(tableRow, 0));
+    });
+    return updatedResults;
+  };
 
-    const closeAllFlyouts = (tableContent) => {
-        const updatedResults = []
-        tableContent.forEach((tableRow, index) => {
-            updatedResults.push(updateArrayElement(tableRow, 0))
-        })
-        return (updatedResults)
+  const recordFlyout = (record, recordIndex, isOpen) => {
+    if (isOpen) {
+      return (
+        <>
+          <EuiFlyout
+            onClose={() => {
+              const updatedTable = updateTableCell(
+                closeAllFlyouts(results),
+                recordFlyout(record, recordIndex, false),
+                0,
+                recordIndex
+              );
+              const updatedArray = changeFlyoutState(
+                isFlyoutOpen,
+                recordIndex,
+                false,
+                false
+              );
+              setIsFlyoutOpen(updatedArray);
+              setResults(updatedTable);
+            }}
+            aria-labelledby={recordIndex}
+          >
+            <EuiFlyoutBody>
+              <EuiText size="s">
+                <Fragment>
+                  <JsonView
+                    name="In-Sylva metadata"
+                    collapsed={true}
+                    iconStyle={'triangle'}
+                    src={record}
+                    enableClipboard={false}
+                    displayDataTypes={false}
+                  />
+                </Fragment>
+              </EuiText>
+            </EuiFlyoutBody>
+          </EuiFlyout>
+          <EuiIcon type="eye" color="danger" />
+        </>
+      );
     }
+  };
 
-    const recordFlyout = (record, recordIndex, isOpen) => {
-        if (isOpen) {
-            return (
-                <>
-                    <EuiFlyout
-                        onClose={() => {
-                            console.log('close flyout ' + recordIndex)
-                            const updatedTable = updateTableCell(closeAllFlyouts(results), recordFlyout(record, recordIndex, false), 0, recordIndex)
-                            const updatedArray = changeFlyoutState(isFlyoutOpen, recordIndex, false, false)
-                            setIsFlyoutOpen(updatedArray)
-                            setResults(updatedTable)
-                        }}
-                        aria-labelledby={recordIndex}>
-                        <EuiFlyoutBody>
-                            <EuiText size="s">
-                                <Fragment>
-                                    <JsonView
-                                        name="In-Sylva metadata"
-                                        collapsed={true}
-                                        iconStyle={'triangle'}
-                                        src={record}
-                                        enableClipboard={false}
-                                        displayDataTypes={false}
-                                    />
-                                </Fragment>
-                            </EuiText>
-                        </EuiFlyoutBody>
-                    </EuiFlyout>
-                    <EuiIcon type='eye' color='danger' />
-                </>
-            )
-        }
-    }
+  const resultsGridOptions = {
+    print: false,
+    download: false,
+    filter: true,
+    filterType: 'dropdown',
+    responsive: 'standard',
+    selectableRows: 'none',
+    selectableRowsOnClick: false,
+    onRowSelectionChange: (rowsSelected, allRows) => {},
+    onRowClick: (rowData, rowState) => {},
+    onCellClick: (val, colMeta) => {
+      // if (searchResults.hits.hits && colMeta.colIndex !== 0) {
+      if (searchResults && colMeta.colIndex !== 0) {
+        // const updatedTable = updateTableCell(closeAllFlyouts(results), recordFlyout(searchResults.hits.hits[colMeta.rowIndex]._source, colMeta.rowIndex, !isFlyoutOpen[colMeta.rowIndex]), 0, colMeta.rowIndex)
+        const updatedTable = updateTableCell(
+          closeAllFlyouts(results),
+          recordFlyout(
+            searchResults[colMeta.dataIndex],
+            colMeta.dataIndex,
+            !isFlyoutOpen[colMeta.dataIndex]
+          ),
+          0,
+          colMeta.dataIndex
+        );
+        const updatedArray = changeFlyoutState(
+          isFlyoutOpen,
+          colMeta.dataIndex,
+          !isFlyoutOpen[colMeta.dataIndex],
+          false
+        );
+        setIsFlyoutOpen(updatedArray);
+        setResults(updatedTable);
+      }
+    },
+  };
 
-    const resultsGridOptions = {
-        print: false,
-        download: false,
-        filter: true,
-        filterType: "dropdown",
-        responsive: "standard",
-        selectableRows: 'none',
-        selectableRowsOnClick: false,
-        onRowSelectionChange: (rowsSelected, allRows) => {
-            // console.log(rowsSelected);
-        },
-        onRowClick: (rowData, rowState) => {
-            // console.log(rowData, rowState);
-        },
-        onCellClick: (val, colMeta) => {
-            // if (searchResults.hits.hits && colMeta.colIndex !== 0) {
-            if (searchResults && colMeta.colIndex !== 0) {
-                console.log(colMeta)
-                // const updatedTable = updateTableCell(closeAllFlyouts(results), recordFlyout(searchResults.hits.hits[colMeta.rowIndex]._source, colMeta.rowIndex, !isFlyoutOpen[colMeta.rowIndex]), 0, colMeta.rowIndex)
-                const updatedTable = updateTableCell(closeAllFlyouts(results), recordFlyout(searchResults[colMeta.dataIndex], colMeta.dataIndex, !isFlyoutOpen[colMeta.dataIndex]), 0, colMeta.dataIndex)
-                const updatedArray = changeFlyoutState(isFlyoutOpen, colMeta.dataIndex, !isFlyoutOpen[colMeta.dataIndex], false)
-                setIsFlyoutOpen(updatedArray)
-                setResults(updatedTable)
-            }
-        }
-    }
-
-    /*  const displayRecord = (record) => {
+  /*  const displayRecord = (record) => {
          let recordDisplay = []
-         // console.log(record)
          if (!!record) {
              const fields = Object.keys(record)
- 
              fields.forEach(field => {
                  if (typeof record[field] != 'string') {
                      // const rndId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-                     // console.log('bloc ' + field)
                      if (isNaN(field)) {
- 
                          // const buttonContent = `"${field}"`
                          let isStrArray = false
- 
                          if (Array.isArray(record[field])) {
-                             // console.log(record[field])
                              isStrArray = true
                              record[field].forEach(item => {
                                  if (typeof item != 'string')
                                      isStrArray = false
                              })
                          }
- 
                          if (isStrArray) {
                              recordDisplay.push(
                                  <>
@@ -201,7 +197,6 @@ const Results = (searchResults, search, basicSearch) => {
                              )
                      }
                  } else {
-                     // console.log('champ ' + field + ' ' + record[field])
                      if (isNaN(field)) {
                          recordDisplay.push(
                              <>
@@ -221,29 +216,22 @@ const Results = (searchResults, search, basicSearch) => {
                      }
                  }
              })
- 
              return recordDisplay
          }
      }
- 
+
      const recordFlyout = (record, recordIndex, isFlyoutOpen, setIsFlyoutOpen) => {
- 
          let flyout
- 
-         // console.log('index ' + recordIndex + ' ' + isFlyoutOpen[recordIndex] + ' ' + isFlyoutOpen.length)
- 
          if (isFlyoutOpen[recordIndex]) {
              // const flyOutContent = ReactHtmlParser(displayRecord(record, 1))
              const flyOutStr = displayRecord(record)
              // const flyOutContent = parse(flyOutStr, { htmlparser2: { lowerCaseTags: false } })
-             // console.log(flyOutStr)
              const flyout = (
                  <>
                      <EuiFlyout
                          onClose={() => {
                              // setIsFlyoutOpen(updateArrayElement(isFlyoutOpen, recordIndex, false))
                              // updateResultsCell(false, 0, recordIndex)
-                             console.log('close flyout ' + recordIndex)
                              const updatedArray = changeFlyoutState(isFlyoutOpen, recordIndex, !isFlyoutOpen[recordIndex], false)
                              setIsFlyoutOpen(updatedArray)
                          }}
@@ -263,7 +251,7 @@ const Results = (searchResults, search, basicSearch) => {
          }
      } */
 
-    /* const viewButton = (record, recordIndex, isFlyoutOpenIndex, isFlyoutOpen, setIsFlyoutOpen) => {
+  /* const viewButton = (record, recordIndex, isFlyoutOpenIndex, isFlyoutOpen, setIsFlyoutOpen) => {
         return (
             <>
                 <EuiButtonIcon
@@ -271,13 +259,8 @@ const Results = (searchResults, search, basicSearch) => {
                     color="success"
                     onClick={() => {
                         const flyOutArray = updateArrayElement(isFlyoutOpen, recordIndex, !isFlyoutOpen[recordIndex])
-                        console.log(flyOutArray)
-                        console.log(results)
-    
                         setIsFlyoutOpen(flyOutArray)
                         updateResultsCell(!isFlyoutOpen[recordIndex], isFlyoutOpenIndex, recordIndex)
-                        // console.log(flyOutArray)
-                        // console.log(isFlyoutOpen)
                     }}
                     iconType="eye"
                     title="View record"
@@ -287,105 +270,100 @@ const Results = (searchResults, search, basicSearch) => {
         )
     } */
 
-    const processData = (metadata) => {
-        // if (metadata && metadata.hits) {
-        if (metadata) {
-
-            const columns = [];
-            const rows = [];
-            // const metadataRecords = metadata.hits.hits
-
-            columns.push(
-                {
-                    name: "currently open",
-                    options: {
-                        display: true,
-                        viewColumns: true,
-                        filter: true
-                    }
-                }
-            )
-
-            /* for (let recordIndex = 0; recordIndex < metadataRecords.length; recordIndex++) {
+  const processData = (metadata) => {
+    // if (metadata && metadata.hits) {
+    if (metadata) {
+      const columns = [];
+      const rows = [];
+      // const metadataRecords = metadata.hits.hits
+      columns.push({
+        name: 'currently open',
+        options: {
+          display: true,
+          viewColumns: true,
+          filter: true,
+        },
+      });
+      /* for (let recordIndex = 0; recordIndex < metadataRecords.length; recordIndex++) {
                 const row = []
                 const displayedFields = metadataRecords[recordIndex]._source.resource
                 const flyoutCell = recordFlyout(metadataRecords[recordIndex]._source, recordIndex) */
-
-            for (let recordIndex = 0; recordIndex < metadata.length; recordIndex++) {
-                const row = []
-                const displayedFields = metadata[recordIndex].resource
-                const flyoutCell = recordFlyout(metadata[recordIndex], recordIndex)
-
-                if (recordIndex >= isFlyoutOpen.length)
-                    setIsFlyoutOpen([...isFlyoutOpen, false])
-
-                row.push(flyoutCell)
-
-                for (const fieldName in displayedFields) {
-                    // console.log(displayedFields[fieldName] + ' ' + typeof displayedFields[fieldName])
-                    if (typeof displayedFields[fieldName] === 'string') {
-                        if (recordIndex === 0) {
-                            const column = {
-                                name: fieldName,
-                                options: {
-                                    display: true
-                                }
-                            }
-                            columns.push(column)
-                        }
-                        row.push(displayedFields[fieldName])
-                    }
-                }
-
-                rows.push(row);
+      for (let recordIndex = 0; recordIndex < metadata.length; recordIndex++) {
+        const row = [];
+        const displayedFields = metadata[recordIndex].resource;
+        const flyoutCell = recordFlyout(metadata[recordIndex], recordIndex);
+        if (recordIndex >= isFlyoutOpen.length) {
+          setIsFlyoutOpen([...isFlyoutOpen, false]);
+        }
+        row.push(flyoutCell);
+        for (const fieldName in displayedFields) {
+          if (typeof displayedFields[fieldName] === 'string') {
+            if (recordIndex === 0) {
+              const column = {
+                name: fieldName,
+                options: {
+                  display: true,
+                },
+              };
+              columns.push(column);
             }
-
-            setResultsCol(columns);
-            setResults(rows);
+            row.push(displayedFields[fieldName]);
+          }
         }
+        rows.push(row);
+      }
+      setResultsCol(columns);
+      setResults(rows);
     }
+  };
 
-    return (
-        <>
-            <EuiSpacer size="s" />
-            <EuiFlexGroup justifyContent="spaceAround">
-                <EuiSpacer size="s" />
-                <EuiFlexItem grow={false}>
-                    <EuiTitle size='xs'>
-                        <h2>Your query : {searchQuery}</h2>
-                    </EuiTitle>
-                </EuiFlexItem>
-                <EuiSpacer size="s" />
-            </EuiFlexGroup>
-            <EuiFlexGroup>
-                <EuiFlexItem>
-                    <EuiCallOut
-                        size="s"
-                        title="Click on a line of the table to inspect resource metadata (except for the first column)."
-                        iconType="search"
-                    />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                    <EuiButton
-                        fill
-                        onClick={() => {
-                            if (searchResults) {
-                                download(`{"metadataRecords": ${JSON.stringify(searchResults, null, "\t")}}`, "InSylvaSearchResults.json", "application/json")
-                            }
-                        }}
-                    >Download as JSON</EuiButton>
-                </EuiFlexItem>
-            </EuiFlexGroup>
-            <MuiThemeProvider theme={getMuiTheme()}>
-                <MUIDataTable
-                    title={"Search results"}
-                    data={results}
-                    columns={resultsCol}
-                    options={resultsGridOptions}
-                />
-            </MuiThemeProvider>
-        </>
-    )
-}
+  return (
+    <>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiSpacer size="s" />
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h2>Your query : {searchQuery}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiSpacer size="s" />
+      </EuiFlexGroup>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiCallOut
+            size="s"
+            title="Click on a line of the table to inspect resource metadata (except for the first column)."
+            iconType="search"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            onClick={() => {
+              if (searchResults) {
+                download(
+                  `{"metadataRecords": ${JSON.stringify(searchResults, null, '\t')}}`,
+                  'InSylvaSearchResults.json',
+                  'application/json'
+                );
+              }
+            }}
+          >
+            Download as JSON
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <MuiThemeProvider theme={getMuiTheme()}>
+        <MUIDataTable
+          title={'Search results'}
+          data={results}
+          columns={resultsCol}
+          options={resultsGridOptions}
+        />
+      </MuiThemeProvider>
+    </>
+  );
+};
 
-export default Results;
\ No newline at end of file
+export default Results;
diff --git a/src/pages/results/package.json b/src/pages/results/package.json
index bddb9db41460aa4446c700c340676afdc46406ae..f357edae5100ac733d1658c76675da66632802c0 100644
--- a/src/pages/results/package.json
+++ b/src/pages/results/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Results",
-    "version": "1.0.0",
-    "private": true,
-    "main": "Results.js"
-}
\ No newline at end of file
+  "name": "Results",
+  "version": "1.0.0",
+  "private": true,
+  "main": "Results.js"
+}
diff --git a/src/pages/search/Data.js b/src/pages/search/Data.js
index 9508c13deef8a8891f4f490377ebd79ff3bb75c3..c6577648ea4029f5243b834d71fac2563982fbbb 100644
--- a/src/pages/search/Data.js
+++ b/src/pages/search/Data.js
@@ -1,50 +1,50 @@
 export const Operators = [
-    {
-        id: '0',
-        value: 'And',
-        label: 'Match all criterias'
-    },
-    {
-        id: '1',
-        value: 'Or',
-        label: 'Match at least one criteria'
-    },
+  {
+    id: '0',
+    value: 'And',
+    label: 'Match all criterias',
+  },
+  {
+    id: '1',
+    value: 'Or',
+    label: 'Match at least one criteria',
+  },
 ];
 
 export const DateOptions = [
-    {
-        text: 'Date',
-        value: '=',
-    },
-    {
-        text: 'Before',
-        value: '<=',
-    },
-    {
-        text: 'After',
-        value: '>=',
-    },
-    {
-        text: 'Period',
-        value: 'between',
-    },
+  {
+    text: 'Date',
+    value: '=',
+  },
+  {
+    text: 'Before',
+    value: '<=',
+  },
+  {
+    text: 'After',
+    value: '>=',
+  },
+  {
+    text: 'Period',
+    value: 'between',
+  },
 ];
 
 export const NumericOptions = [
-    {
-        text: 'Equal to',
-        value: '=',
-    },
-    {
-        text: 'Under',
-        value: '<=',
-    },
-    {
-        text: 'Over',
-        value: '>=',
-    },
-    {
-        text: 'Between',
-        value: 'between',
-    },
-];
\ No newline at end of file
+  {
+    text: 'Equal to',
+    value: '=',
+  },
+  {
+    text: 'Under',
+    value: '<=',
+  },
+  {
+    text: 'Over',
+    value: '>=',
+  },
+  {
+    text: 'Between',
+    value: 'between',
+  },
+];
diff --git a/src/pages/search/Search.js b/src/pages/search/Search.js
index 9cc57853f23044d91ed4bc2efcd3ebc20ff1ae1b..4587f18b482ccf511ed4a59d83caf2bcf3a13cb9 100644
--- a/src/pages/search/Search.js
+++ b/src/pages/search/Search.js
@@ -1,266 +1,325 @@
-import React, { useState, useEffect } from "react"
-
+import React, { useState, useEffect } from 'react';
 import {
-    EuiProgress,
-    EuiRadioGroup,
-    EuiFieldText,
-    EuiPanel,
-    EuiPopover,
-    EuiPopoverTitle,
-    EuiPopoverFooter,
-    EuiTabbedContent,
-    EuiFormRow,
-    EuiComboBox,
-    EuiPageContentBody,
-    EuiForm,
-    EuiTextArea,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiFieldSearch,
-    EuiButton,
-    EuiButtonEmpty,
-    EuiSwitch,
-    EuiButtonIcon,
-    EuiIcon,
-    EuiSpacer,
-    EuiPageContent,
-    EuiPageContentHeader,
-    EuiTitle,
-    EuiPageContentHeaderSection,
-    EuiTextColor,
-    EuiOverlayMask,
-    EuiConfirmModal,
-    EuiModal,
-    EuiModalHeader,
-    EuiModalHeaderTitle,
-    EuiModalBody,
-    EuiModalFooter,
-    EuiSelect,
-    EuiCallOut,
-    EuiToast,
-    EuiGlobalToastList,
-    EuiHealth
-} from '@elastic/eui'
-
+  EuiProgress,
+  EuiRadioGroup,
+  EuiFieldText,
+  EuiPanel,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiPopoverFooter,
+  EuiTabbedContent,
+  EuiFormRow,
+  EuiComboBox,
+  EuiPageContentBody,
+  EuiForm,
+  EuiTextArea,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldSearch,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiSwitch,
+  EuiButtonIcon,
+  EuiIcon,
+  EuiSpacer,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiTitle,
+  EuiPageContentHeaderSection,
+  EuiTextColor,
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiSelect,
+  EuiGlobalToastList,
+  EuiHealth,
+} from '@elastic/eui';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
-
-import { Operators, NumericOptions, DateOptions } from './Data'
-
-import Results from '../results/Results'
-import SearchMap from '../maps/SearchMap'
-
+import { Operators, NumericOptions, DateOptions } from './Data';
+import Results from '../results/Results';
+import SearchMap from '../maps/SearchMap';
 import {
-    createBasicQueriesBySource,
-    changeNameToLabel,
-    SearchField,
-    removeNullFields,
-    getSections,
-    getFieldsBySection,
-    updateArrayElement,
-    removeArrayElement,
-    updateSearchFieldValues,
-    createAdvancedQueriesBySource
-} from '../../Utils.js'
-import { fetchPublicFields, fetchUserPolicyFields, fetchSources, searchQuery, getQueryCount } from "../../actions/source"
-import { addUserHistory, fetchUserHistory } from "../../actions/user"
+  createBasicQueriesBySource,
+  changeNameToLabel,
+  SearchField,
+  removeNullFields,
+  getSections,
+  getFieldsBySection,
+  updateArrayElement,
+  removeArrayElement,
+  updateSearchFieldValues,
+  createAdvancedQueriesBySource,
+} from '../../Utils.js';
+import {
+  fetchPublicFields,
+  fetchUserPolicyFields,
+  fetchSources,
+  searchQuery,
+  getQueryCount,
+} from '../../actions/source';
+import { addUserHistory, fetchUserHistory } from '../../actions/user';
 
 const useStyles = makeStyles((theme) => ({
-    container: {
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-    textField: {
-        marginLeft: theme.spacing(1),
-        marginRight: theme.spacing(1),
-        width: 240,
-    },
-}))
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    width: 240,
+  },
+}));
 
 const fieldValuesToString = (field) => {
-    let strValues = ''
-
-    switch (field.type) {
-
-        case 'Numeric':
-            field.values.forEach(element => {
-                switch (element.option) {
-                    case 'between':
-                        strValues = `${strValues} ${element.value1} <= ${field.name} <= ${element.value2} or `
-                        break
-                    default:
-                        strValues = `${strValues} ${field.name} ${element.option} ${element.value1} or `
-                }
-            });
-            if (strValues.endsWith("or "))
-                strValues = strValues.substring(0, strValues.length - 4)
-            break;
-
-        case 'Date':
-            field.values.forEach(element => {
-                switch (element.option) {
-                    case 'between':
-                        strValues = `${strValues} ${element.startDate} <= ${field.name} <= ${element.endDate} or `
-                        break
-                    default:
-                        strValues = `${strValues} ${field.name} ${element.option} ${element.startDate} or `
-                }
-            });
-            if (strValues.endsWith(" or "))
-                strValues = strValues.substring(0, strValues.length - 4)
+  let strValues = '';
+  switch (field.type) {
+    case 'Numeric':
+      field.values.forEach((element) => {
+        switch (element.option) {
+          case 'between':
+            strValues = `${strValues} ${element.value1} <= ${field.name} <= ${element.value2} or `;
             break;
-
-        case 'List':
-            strValues = `${strValues} ${field.name} = `
-            field.values.forEach(element => {
-                strValues = `${strValues} ${element.label}, `
-            });
-            if (strValues.endsWith(", "))
-                strValues = strValues.substring(0, strValues.length - 2)
+          default:
+            strValues = `${strValues} ${field.name} ${element.option} ${element.value1} or `;
+        }
+      });
+      if (strValues.endsWith('or '))
+        strValues = strValues.substring(0, strValues.length - 4);
+      break;
+    case 'Date':
+      field.values.forEach((element) => {
+        switch (element.option) {
+          case 'between':
+            strValues = `${strValues} ${element.startDate} <= ${field.name} <= ${element.endDate} or `;
             break;
-
-        //type : text
-        default:
-            strValues = `${strValues} ${field.name} = ${field.values}`
-    }
-
-    return strValues
-}
-
-const updateSources = (searchFields, sources, setSelectedSources, setAvailableSources) => {
-    // console.log(searchFields)
-    // console.log(sources)
-    let updatedSources = []
-    let availableSources = []
-    let noPrivateField = true
-
-    //search for policy fields to filter sources
-    searchFields.forEach(field => {
-        if (field.isValidated) {
-            //if sources haven't already been filtered
-            if (noPrivateField && !updatedSources.length) {
-                availableSources = sources
-            } else {
-                availableSources = updatedSources
-            }
-            updatedSources = []
-            field.sources.forEach(sourceId => {
-                noPrivateField = false
-                const source = availableSources.find(src => src.id === sourceId)
-                if (source && !updatedSources.includes(source))
-                    updatedSources.push(source)
-            })
+          default:
+            strValues = `${strValues} ${field.name} ${element.option} ${element.startDate} or `;
         }
-    })
-
-    setSelectedSources(updatedSources)
-    if (noPrivateField && !updatedSources.length) {
-        setAvailableSources(sources)
-    } else {
-        setAvailableSources(updatedSources)
+      });
+      if (strValues.endsWith(' or '))
+        strValues = strValues.substring(0, strValues.length - 4);
+      break;
+    case 'List':
+      strValues = `${strValues} ${field.name} = `;
+      field.values.forEach((element) => {
+        strValues = `${strValues} ${element.label}, `;
+      });
+      if (strValues.endsWith(', '))
+        strValues = strValues.substring(0, strValues.length - 2);
+      break;
+
+    //type : text
+    default:
+      strValues = `${strValues} ${field.name} = ${field.values}`;
+  }
+  return strValues;
+};
+
+const updateSources = (
+  searchFields,
+  sources,
+  setSelectedSources,
+  setAvailableSources
+) => {
+  let updatedSources = [];
+  let availableSources = [];
+  let noPrivateField = true;
+  //search for policy fields to filter sources
+  searchFields.forEach((field) => {
+    if (field.isValidated) {
+      //if sources haven't already been filtered
+      if (noPrivateField && !updatedSources.length) {
+        availableSources = sources;
+      } else {
+        availableSources = updatedSources;
+      }
+      updatedSources = [];
+      field.sources.forEach((sourceId) => {
+        noPrivateField = false;
+        const source = availableSources.find((src) => src.id === sourceId);
+        if (source && !updatedSources.includes(source)) updatedSources.push(source);
+      });
     }
-
-    console.log(updatedSources)
-}
+  });
+  setSelectedSources(updatedSources);
+  if (noPrivateField && !updatedSources.length) {
+    setAvailableSources(sources);
+  } else {
+    setAvailableSources(updatedSources);
+  }
+};
 
 const fetchHistory = (setUserHistory) => {
-    fetchUserHistory(sessionStorage.getItem("user_id")).then(result => {
-        if (result[0] && result[0].ui_structure) {
-            result.forEach(item => {
-                item.ui_structure = JSON.parse(item.ui_structure)
-                item.label = `${item.name} - ${new Date(item.createdat).toLocaleString()}`
-            })
-        }
-        setUserHistory(result)
-    })
-}
-
-const addHistory = (kcID, search, searchName, searchFields, searchDescription, setUserHistory) => {
-    addUserHistory(sessionStorage.getItem("user_id"), search, searchName, searchFields, searchDescription).then(() => {
-        fetchHistory(setUserHistory)
-    })
-}
-
-const updateSearch = (setSearch, searchFields, selectedOperatorId, setSearchCount) => {
-    let searchText = ""
-
-    searchFields.forEach(field => {
-        if (field.isValidated) {
-            searchText = searchText + `{${fieldValuesToString(field)} } ${Operators[selectedOperatorId].value.toUpperCase()} `
-        }
-    })
-
-    if (searchText.endsWith(" AND ")) {
-        searchText = searchText.substring(0, searchText.length - 5)
-    } else if (searchText.endsWith(" OR ")) {
-        searchText = searchText.substring(0, searchText.length - 4)
+  fetchUserHistory(sessionStorage.getItem('user_id')).then((result) => {
+    if (result[0] && result[0].ui_structure) {
+      result.forEach((item) => {
+        item.ui_structure = JSON.parse(item.ui_structure);
+        item.label = `${item.name} - ${new Date(item.createdat).toLocaleString()}`;
+      });
     }
-    setSearchCount()
-    setSearch(searchText)
-}
-
-const HistorySelect = (sources, setAvailableSources, setSelectedSources, setSearch, searchFields, selectedOperatorId, userHistory, setUserHistory, setSearchFields, setSearchCount, setFieldCount, selectedSavedSearch, setSelectedSavedSearch, historySelectError, setHistorySelectError) => {
+    setUserHistory(result);
+  });
+};
+
+const addHistory = (
+  kcID,
+  search,
+  searchName,
+  searchFields,
+  searchDescription,
+  setUserHistory
+) => {
+  addUserHistory(
+    sessionStorage.getItem('user_id'),
+    search,
+    searchName,
+    searchFields,
+    searchDescription
+  ).then(() => {
+    fetchHistory(setUserHistory);
+  });
+};
 
-    if (Object.keys(userHistory).length !== 0) {
-
-        const onHistoryChange = (selectedSavedSearch) => {
-            setHistorySelectError(undefined)
-            if (!!selectedSavedSearch[0].query) {
-                setSelectedSavedSearch(selectedSavedSearch)
-                setSearch(selectedSavedSearch[0].query)
-                setSearchCount()
-                setFieldCount([])
-            }
-            if (!!selectedSavedSearch[0].ui_structure) {
-                updateSources(selectedSavedSearch[0].ui_structure, sources, setSelectedSources, setAvailableSources)
-                setSearchFields(selectedSavedSearch[0].ui_structure)
-            }
-        }
-
-        const onHistorySearchChange = (value, hasMatchingOptions) => {
-            setHistorySelectError(
-                value.length === 0 || hasMatchingOptions
-                    ? undefined
-                    : `"${value}" is not a valid option`
-            )
-        }
-
-        return (
-            <>
-                <EuiFormRow
-                    error={historySelectError}
-                    isInvalid={historySelectError !== undefined}>
-                    <EuiComboBox
-                        placeholder="Load a previous search"
-                        singleSelection={{ asPlainText: true }}
-                        options={userHistory}
-                        selectedOptions={selectedSavedSearch}
-                        onChange={onHistoryChange}
-                        onSearchChange={onHistorySearchChange}
-                    />
-                </EuiFormRow>
-            </>
-        )
+const updateSearch = (setSearch, searchFields, selectedOperatorId, setSearchCount) => {
+  let searchText = '';
+  searchFields.forEach((field) => {
+    if (field.isValidated) {
+      searchText =
+        searchText +
+        `{${fieldValuesToString(field)} } ${Operators[selectedOperatorId].value.toUpperCase()} `;
     }
-}
-
-const SearchBar = (isLoading, setIsLoading, search, setSearch, searchResults, setSearchResults, searchFields, setSearchFields, searchName, setSearchName, searchDescription, setSearchDescription, readOnlyQuery, setReadOnlyQuery, selectedSources, setSelectedSources, availableSources, setAvailableSources, standardFields, sources, setSelectedTabNumber, searchCount, setSearchCount, setFieldCount,
-    isReadOnlyModalOpen, setIsReadOnlyModalOpen, isSaveSearchModalOpen, setIsSaveSearchModalOpen, userHistory, setUserHistory, selectedSavedSearch, setSelectedSavedSearch, historySelectError, setHistorySelectError, selectedOperatorId, createEditableQueryToast) => {
+  });
+  if (searchText.endsWith(' AND ')) {
+    searchText = searchText.substring(0, searchText.length - 5);
+  } else if (searchText.endsWith(' OR ')) {
+    searchText = searchText.substring(0, searchText.length - 4);
+  }
+  setSearchCount();
+  setSearch(searchText);
+};
+
+const HistorySelect = (
+  sources,
+  setAvailableSources,
+  setSelectedSources,
+  setSearch,
+  searchFields,
+  selectedOperatorId,
+  userHistory,
+  setUserHistory,
+  setSearchFields,
+  setSearchCount,
+  setFieldCount,
+  selectedSavedSearch,
+  setSelectedSavedSearch,
+  historySelectError,
+  setHistorySelectError
+) => {
+  if (Object.keys(userHistory).length !== 0) {
+    const onHistoryChange = (selectedSavedSearch) => {
+      setHistorySelectError(undefined);
+      if (!!selectedSavedSearch[0].query) {
+        setSelectedSavedSearch(selectedSavedSearch);
+        setSearch(selectedSavedSearch[0].query);
+        setSearchCount();
+        setFieldCount([]);
+      }
+      if (!!selectedSavedSearch[0].ui_structure) {
+        updateSources(
+          selectedSavedSearch[0].ui_structure,
+          sources,
+          setSelectedSources,
+          setAvailableSources
+        );
+        setSearchFields(selectedSavedSearch[0].ui_structure);
+      }
+    };
+
+    const onHistorySearchChange = (value, hasMatchingOptions) => {
+      setHistorySelectError(
+        value.length === 0 || hasMatchingOptions
+          ? undefined
+          : `"${value}" is not a valid option`
+      );
+    };
 
-    // const closeReadOnlyModal = () => setIsReadOnlyModalOpen(false)
-
-    /* const switchReadOnly = (readOnlyQuery, isReadOnlyModalOpen) => {
+    return (
+      <>
+        <EuiFormRow
+          error={historySelectError}
+          isInvalid={historySelectError !== undefined}
+        >
+          <EuiComboBox
+            placeholder="Load a previous search"
+            singleSelection={{ asPlainText: true }}
+            options={userHistory}
+            selectedOptions={selectedSavedSearch}
+            onChange={onHistoryChange}
+            onSearchChange={onHistorySearchChange}
+          />
+        </EuiFormRow>
+      </>
+    );
+  }
+};
+
+const SearchBar = (
+  isLoading,
+  setIsLoading,
+  search,
+  setSearch,
+  searchResults,
+  setSearchResults,
+  searchFields,
+  setSearchFields,
+  searchName,
+  setSearchName,
+  searchDescription,
+  setSearchDescription,
+  readOnlyQuery,
+  setReadOnlyQuery,
+  selectedSources,
+  setSelectedSources,
+  availableSources,
+  setAvailableSources,
+  standardFields,
+  sources,
+  setSelectedTabNumber,
+  searchCount,
+  setSearchCount,
+  setFieldCount,
+  isReadOnlyModalOpen,
+  setIsReadOnlyModalOpen,
+  isSaveSearchModalOpen,
+  setIsSaveSearchModalOpen,
+  userHistory,
+  setUserHistory,
+  selectedSavedSearch,
+  setSelectedSavedSearch,
+  historySelectError,
+  setHistorySelectError,
+  selectedOperatorId,
+  createEditableQueryToast
+) => {
+  // const closeReadOnlyModal = () => setIsReadOnlyModalOpen(false)
+
+  /* const switchReadOnly = (readOnlyQuery, isReadOnlyModalOpen) => {
         if (readOnlyQuery) {
             setIsReadOnlyModalOpen(true)
         } else {
             setReadOnlyQuery(true)
         } */
-    /* if (!localStorage.getItem("InSylvaReadOnlySearch") && readOnlyQuery) {
+  /* if (!localStorage.getItem("InSylvaReadOnlySearch") && readOnlyQuery) {
         setIsReadOnlyModalOpen(!isReadOnlyModalOpen)
     } */
-    // }
+  // }
 
-    /* let readOnlyModal;
+  /* let readOnlyModal;
 
     if (isReadOnlyModalOpen) {
         readOnlyModal = (
@@ -287,63 +346,78 @@ const SearchBar = (isLoading, setIsLoading, search, setSearch, searchResults, se
         )
     }*/
 
-    const closeSaveSearchModal = () => setIsSaveSearchModalOpen(false);
-
-    let saveSearchModal;
-
-    if (isSaveSearchModalOpen) {
-        saveSearchModal = (
-            <EuiOverlayMask>
-                <EuiModal onClose={closeSaveSearchModal} initialFocus="[name=searchName]">
-                    <EuiModalHeader>
-                        <EuiModalHeaderTitle>Save search</EuiModalHeaderTitle>
-                    </EuiModalHeader>
-
-                    <EuiModalBody>
-                        <EuiForm>
-                            <EuiFormRow label="Search name">
-                                <EuiFieldText
-                                    name="searchName"
-                                    value={searchName}
-                                    onChange={e => {
-                                        setSearchName(e.target.value)
-                                    }}
-                                />
-                            </EuiFormRow>
-                            <EuiFormRow label="Description (optional)">
-                                <EuiTextArea
-                                    value={searchDescription}
-                                    onChange={e => setSearchDescription(e.target.value)}
-                                    placeholder="Search description..."
-                                    fullWidth
-                                    compressed />
-                            </EuiFormRow>
-                        </EuiForm>
-                    </EuiModalBody>
-
-                    <EuiModalFooter>
-                        <EuiButtonEmpty onClick={() => { closeSaveSearchModal() }}>
-                            Cancel
-                        </EuiButtonEmpty>
-                        <EuiButton onClick={() => {
-                            if (!!searchName) {
-                                addHistory(sessionStorage.getItem("user_id"), search, searchName, searchFields, searchDescription, setUserHistory)
-                                setSearchName("")
-                                setSearchDescription("")
-                                closeSaveSearchModal()
-                            }
-                        }} fill>
-                            Save
-                        </EuiButton>
-                    </EuiModalFooter>
-                </EuiModal>
-            </EuiOverlayMask >
-        )
-    }
-
-    return (
-        <>
-            {/*!readOnlyQuery ?
+  const closeSaveSearchModal = () => setIsSaveSearchModalOpen(false);
+
+  let saveSearchModal;
+
+  if (isSaveSearchModalOpen) {
+    saveSearchModal = (
+      <EuiOverlayMask>
+        <EuiModal onClose={closeSaveSearchModal} initialFocus="[name=searchName]">
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>Save search</EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <EuiForm>
+              <EuiFormRow label="Search name">
+                <EuiFieldText
+                  name="searchName"
+                  value={searchName}
+                  onChange={(e) => {
+                    setSearchName(e.target.value);
+                  }}
+                />
+              </EuiFormRow>
+              <EuiFormRow label="Description (optional)">
+                <EuiTextArea
+                  value={searchDescription}
+                  onChange={(e) => setSearchDescription(e.target.value)}
+                  placeholder="Search description..."
+                  fullWidth
+                  compressed
+                />
+              </EuiFormRow>
+            </EuiForm>
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty
+              onClick={() => {
+                closeSaveSearchModal();
+              }}
+            >
+              Cancel
+            </EuiButtonEmpty>
+            <EuiButton
+              onClick={() => {
+                if (!!searchName) {
+                  addHistory(
+                    sessionStorage.getItem('user_id'),
+                    search,
+                    searchName,
+                    searchFields,
+                    searchDescription,
+                    setUserHistory
+                  );
+                  setSearchName('');
+                  setSearchDescription('');
+                  closeSaveSearchModal();
+                }
+              }}
+              fill
+            >
+              Save
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      </EuiOverlayMask>
+    );
+  }
+
+  return (
+    <>
+      {/*!readOnlyQuery ?
                 <>
                     <EuiCallOut title="Proceed with caution!" color="warning" iconType="alert">
                         <p>Be aware that manually editing the query can spoil search results. The syntax must be respected :</p>
@@ -356,512 +430,740 @@ const SearchBar = (isLoading, setIsLoading, search, setSearch, searchResults, se
                 </>
                 : <></>
             */}
-            <EuiFlexGroup >
-
-                <EuiFlexItem>
-                    <EuiTextArea readOnly={readOnlyQuery} value={search} onChange={e => setSearch(e.target.value)} placeholder="Add fields..." fullWidth />
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                    <EuiButton size="s" fill onClick={() => {
-                        if (search.trim()) {
-                            setIsLoading(true)
-                            const queriesWithIndices = createAdvancedQueriesBySource(standardFields, search, selectedSources, availableSources)
-                            searchQuery(queriesWithIndices).then(result => {
-                                // sessionStorage.setItem("searchResults", JSON.stringify(result))
-                                setSearchResults(result)
-                                setSelectedTabNumber(1)
-                                setIsLoading(false)
-                            })
-                        }
-                    }}>Search</EuiButton>
-                    <EuiSpacer size="s" />
-                    {isNaN(searchCount) ?
-                        <>
-                        </>
-                        :
-                        <>
-                            <EuiTextColor color="secondary" style={{ display: 'flex', justifyContent: 'center' }}>
-                                {searchCount} {searchCount === 1 ? "result" : "results"}
-                            </EuiTextColor>
-                            <EuiSpacer size="s" />
-                        </>
-                    }
-                    <EuiButton size="s" onClick={() => {
-                        if (!!search) {
-                            const queriesWithIndices = createAdvancedQueriesBySource(standardFields, search, selectedSources, availableSources)
-                            getQueryCount(queriesWithIndices).then(result => {
-                                if (result || result === 0)
-                                    setSearchCount(result)
-                            })
-                        }
-                    }}>
-                        Count results
-                    </EuiButton>
-                    <EuiSpacer size="s" />
-                    <EuiButton size="s" onClick={() => {
-                        setIsSaveSearchModalOpen(true);
-                    }}>
-                        Save search
-                    </EuiButton>
-                    {saveSearchModal}
-                    <EuiSpacer size="s" />
-                    <EuiSwitch
-                        compressed
-                        label={'Editable'}
-                        checked={!readOnlyQuery}
-                        onChange={() => {
-                            // switchReadOnly(readOnlyQuery, isReadOnlyModalOpen)
-                            setReadOnlyQuery(!readOnlyQuery)
-                            if (readOnlyQuery)
-                                createEditableQueryToast()
-                        }}
-                    />
-                    {/* readOnlyModal */}
-                </EuiFlexItem>
-            </EuiFlexGroup>
-            {
-                isLoading &&
-                <EuiFlexGroup>
-                    <EuiFlexItem>
-                        <EuiProgress postion="fixed" size="l" color="accent" />
-                    </EuiFlexItem>
-                </EuiFlexGroup>
-            }
-            <EuiSpacer size="s" />
-            <EuiFlexGroup>
-                <EuiFlexItem >
-                    {HistorySelect(sources, setAvailableSources, setSelectedSources, setSearch, searchFields, selectedOperatorId, userHistory, setUserHistory, setSearchFields, setSearchCount, setFieldCount, selectedSavedSearch, setSelectedSavedSearch, historySelectError, setHistorySelectError)}
-                </EuiFlexItem>
-            </EuiFlexGroup>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTextArea
+            readOnly={readOnlyQuery}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Add fields..."
+            fullWidth
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            size="s"
+            fill
+            onClick={() => {
+              if (search.trim()) {
+                setIsLoading(true);
+                const queriesWithIndices = createAdvancedQueriesBySource(
+                  standardFields,
+                  search,
+                  selectedSources,
+                  availableSources
+                );
+                searchQuery(queriesWithIndices).then((result) => {
+                  // sessionStorage.setItem("searchResults", JSON.stringify(result))
+                  setSearchResults(result);
+                  setSelectedTabNumber(1);
+                  setIsLoading(false);
+                });
+              }
+            }}
+          >
+            Search
+          </EuiButton>
+          <EuiSpacer size="s" />
+          {isNaN(searchCount) ? (
+            <></>
+          ) : (
+            <>
+              <EuiTextColor
+                color="secondary"
+                style={{ display: 'flex', justifyContent: 'center' }}
+              >
+                {searchCount} {searchCount === 1 ? 'result' : 'results'}
+              </EuiTextColor>
+              <EuiSpacer size="s" />
+            </>
+          )}
+          <EuiButton
+            size="s"
+            onClick={() => {
+              if (!!search) {
+                const queriesWithIndices = createAdvancedQueriesBySource(
+                  standardFields,
+                  search,
+                  selectedSources,
+                  availableSources
+                );
+                getQueryCount(queriesWithIndices).then((result) => {
+                  if (result || result === 0) setSearchCount(result);
+                });
+              }
+            }}
+          >
+            Count results
+          </EuiButton>
+          <EuiSpacer size="s" />
+          <EuiButton
+            size="s"
+            onClick={() => {
+              setIsSaveSearchModalOpen(true);
+            }}
+          >
+            Save search
+          </EuiButton>
+          {saveSearchModal}
+          <EuiSpacer size="s" />
+          <EuiSwitch
+            compressed
+            label={'Editable'}
+            checked={!readOnlyQuery}
+            onChange={() => {
+              // switchReadOnly(readOnlyQuery, isReadOnlyModalOpen)
+              setReadOnlyQuery(!readOnlyQuery);
+              if (readOnlyQuery) {
+                createEditableQueryToast();
+              }
+            }}
+          />
+          {/* readOnlyModal */}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {isLoading && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiProgress postion="fixed" size="l" color="accent" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+      <EuiSpacer size="s" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          {HistorySelect(
+            sources,
+            setAvailableSources,
+            setSelectedSources,
+            setSearch,
+            searchFields,
+            selectedOperatorId,
+            userHistory,
+            setUserHistory,
+            setSearchFields,
+            setSearchCount,
+            setFieldCount,
+            selectedSavedSearch,
+            setSelectedSavedSearch,
+            historySelectError,
+            setHistorySelectError
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
+
+const PopoverSelect = (
+  standardFields,
+  setStandardFields,
+  searchFields,
+  setSearchFields,
+  selectedField,
+  setSelectedField,
+  selectedSection,
+  setSelectedSection,
+  isPopoverSelectOpen,
+  setIsPopoverSelectOpen,
+  fieldCount,
+  setFieldCount,
+  selectedSources,
+  setSelectedSources
+) => {
+  const handleAddfield = () => {
+    if (!!selectedField[0]) {
+      const field = standardFields.find(
+        (item) =>
+          item.field_name.replace(/_|\./g, ' ') ===
+          selectedSection[0].label + ' ' + selectedField[0].label
+      );
+      switch (field.field_type) {
+        case 'Text':
+          setSearchFields([
+            ...searchFields,
+            new SearchField(field.field_name, field.field_type, '', false, field.sources),
+          ]);
+          break;
+        case 'List':
+          setSearchFields([
+            ...searchFields,
+            new SearchField(field.field_name, field.field_type, [], false, field.sources),
+          ]);
+          break;
+        default:
+          setSearchFields([
+            ...searchFields,
+            new SearchField(
+              field.field_name,
+              field.field_type,
+              [{}],
+              false,
+              field.sources
+            ),
+          ]);
+      }
+    }
+  };
+
+  const selectField = () => {
+    const renderOption = (option, searchValue, contentClassName) => {
+      const { label, color } = option;
+      return <EuiHealth color={color}>{label}</EuiHealth>;
+    };
+    if (selectedSection.length) {
+      return (
+        <>
+          <EuiComboBox
+            placeholder="Select a field"
+            singleSelection={{ asPlainText: true }}
+            options={getFieldsBySection(standardFields, selectedSection[0])}
+            selectedOptions={selectedField}
+            onChange={(selected) => setSelectedField(selected)}
+            isClearable={true}
+            renderOption={renderOption}
+          />
+          <EuiPopoverFooter>
+            <EuiButton
+              size="s"
+              onClick={() => {
+                handleAddfield();
+                setIsPopoverSelectOpen(false);
+                setSelectedSection([]);
+                setSelectedField([]);
+              }}
+            >
+              Add this field
+            </EuiButton>
+          </EuiPopoverFooter>
         </>
-    )
-}
-
-const PopoverSelect = (standardFields, setStandardFields, searchFields, setSearchFields, selectedField, setSelectedField,
-    selectedSection, setSelectedSection, isPopoverSelectOpen, setIsPopoverSelectOpen, fieldCount, setFieldCount, selectedSources, setSelectedSources) => {
-
-    const handleAddfield = () => {
-        if (!!selectedField[0]) {
-            const field = standardFields.find(item => item.field_name.replace(/_|\./g, ' ') === selectedSection[0].label + " " + selectedField[0].label)
-            switch (field.field_type) {
-                case 'Text':
-                    setSearchFields([...searchFields, new SearchField(field.field_name, field.field_type, '', false, field.sources)])
-                    console.log('ajout ' + field.field_name + ' ' + field.field_type)
-                    break
-                case 'List':
-                    setSearchFields([...searchFields, new SearchField(field.field_name, field.field_type, [], false, field.sources)])
-                    console.log('ajout ' + field.field_name + ' ' + field.field_type)
-                    break
-                default:
-                    setSearchFields([...searchFields, new SearchField(field.field_name, field.field_type, [{}], false, field.sources)])
-                    console.log('ajout ' + field.field_name + ' ' + field.field_type)
-            }
-        }
+      );
     }
-
-    const selectField = () => {
-        const renderOption = (option, searchValue, contentClassName) => {
-            const { label, color } = option;
-            return (
-                <EuiHealth color={color}>
-                    {label}
-                </EuiHealth>
-            );
-        }
-        if (selectedSection.length) {
-            return (
-                <>
-                    <EuiComboBox
-                        placeholder="Select a field"
-                        singleSelection={{ asPlainText: true }}
-                        options={getFieldsBySection(standardFields, selectedSection[0])}
-                        selectedOptions={selectedField}
-                        onChange={(selected) => setSelectedField(selected)}
-                        isClearable={true}
-                        renderOption={renderOption}
-                    />
-                    <EuiPopoverFooter>
-                        <EuiButton size="s" onClick={() => {
-                            handleAddfield()
-                            setIsPopoverSelectOpen(false)
-                            setSelectedSection([])
-                            setSelectedField([])
-                        }}>
-                            Add this field
-                        </EuiButton>
-                    </EuiPopoverFooter>
-                </>
-            )
+  };
+
+  return (
+    <EuiPopover
+      panelPaddingSize="s"
+      button={
+        <EuiButton
+          iconType="listAdd"
+          iconSide="left"
+          onClick={() => setIsPopoverSelectOpen(!isPopoverSelectOpen)}
+        >
+          Add field
+        </EuiButton>
+      }
+      isOpen={isPopoverSelectOpen}
+      closePopover={() => setIsPopoverSelectOpen(false)}
+    >
+      <div style={{ width: 'intrinsic', minWidth: 240 }}>
+        <EuiPopoverTitle>Select a field</EuiPopoverTitle>
+        <EuiComboBox
+          placeholder="Select a section"
+          singleSelection={{ asPlainText: true }}
+          options={getSections(standardFields)}
+          selectedOptions={selectedSection}
+          onChange={(selected) => {
+            setSelectedSection(selected);
+            setSelectedField([]);
+          }}
+          isClearable={false}
+        />
+      </div>
+      {selectField()}
+    </EuiPopover>
+  );
+};
+
+const PopoverValueContent = (
+  index,
+  standardFields,
+  setStandardFields,
+  searchFields,
+  setSearchFields,
+  valueError,
+  setValueError,
+  search,
+  setSearch,
+  setSearchCount,
+  fieldCount,
+  setFieldCount,
+  isPopoverValueOpen,
+  setIsPopoverValueOpen,
+  selectedOperatorId,
+  datePickerStyles,
+  createPolicyToast,
+  selectedSources,
+  setSelectedSources,
+  availableSources,
+  setAvailableSources
+) => {
+  const onValueSearchChange = (value, hasMatchingOptions) => {
+    setValueError(
+      value.length === 0 || hasMatchingOptions
+        ? undefined
+        : `"${value}" is not a valid option`
+    );
+  };
+
+  const validateFieldValues = () => {
+    let fieldValues;
+    if (Array.isArray(searchFields[index].values)) {
+      fieldValues = [];
+      searchFields[index].values.forEach((value) => {
+        if (!!value) {
+          fieldValues.push(value);
         }
+      });
+    } else {
+      fieldValues = searchFields[index].values;
     }
 
-    return (
-        <EuiPopover
-            panelPaddingSize="s"
-            button={<EuiButton
-                iconType="listAdd"
-                iconSide="left"
-                onClick={() => setIsPopoverSelectOpen(!isPopoverSelectOpen)}>
-                Add field
-                </EuiButton>}
-            isOpen={isPopoverSelectOpen}
-            closePopover={() => setIsPopoverSelectOpen(false)}>
-            <div style={{ width: "intrinsic", 'minWidth': 240 }}>
-                <EuiPopoverTitle>Select a field</EuiPopoverTitle>
-                <EuiComboBox
-                    placeholder="Select a section"
-                    singleSelection={{ asPlainText: true }}
-                    options={getSections(standardFields)}
-                    selectedOptions={selectedSection}
-                    onChange={(selected) => {
-                        setSelectedSection(selected)
-                        setSelectedField([])
-                    }}
-                    isClearable={false}
-                />
-
-            </div>
-            {selectField()}
-
-        </EuiPopover >
-    )
-}
-
-const PopoverValueContent = (index, standardFields, setStandardFields, searchFields, setSearchFields, valueError, setValueError, search, setSearch, setSearchCount, fieldCount, setFieldCount,
-    isPopoverValueOpen, setIsPopoverValueOpen, selectedOperatorId, datePickerStyles, createPolicyToast, selectedSources, setSelectedSources, availableSources, setAvailableSources) => {
-
-    const onValueSearchChange = (value, hasMatchingOptions) => {
-        setValueError(
-            value.length === 0 || hasMatchingOptions ? undefined : `"${value}" is not a valid option`
-        )
-    }
-
-    const validateFieldValues = () => {
-        let fieldValues
-        if (Array.isArray(searchFields[index].values)) {
-            fieldValues = []
-            searchFields[index].values.map((value, i) => {
-                if (!!value) {
-                    fieldValues.push(value)
-                }
-            })
+    const updatedSearchFields = updateArrayElement(
+      searchFields,
+      index,
+      new SearchField(
+        searchFields[index].name,
+        searchFields[index].type,
+        fieldValues,
+        true,
+        searchFields[index].sources
+      )
+    );
+    setSearchFields(updatedSearchFields);
+    updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount);
+    setFieldCount(updateArrayElement(fieldCount, index));
+    if (searchFields[index].sources.length) {
+      const filteredSources = [];
+      searchFields[index].sources.forEach((sourceId) => {
+        let source;
+        if (selectedSources.length) {
+          source = selectedSources.find((src) => src.id === sourceId);
         } else {
-            fieldValues = searchFields[index].values
-        }
-
-        const updatedSearchFields = updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, fieldValues, true, searchFields[index].sources))
-        setSearchFields(updatedSearchFields)
-        updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount)
-        setFieldCount(updateArrayElement(fieldCount, index,))
-        console.log(searchFields[index])
-
-        if (searchFields[index].sources.length) {
-            const filteredSources = []
-
-            searchFields[index].sources.forEach(sourceId => {
-                let source
-                if (selectedSources.length) {
-                    source = selectedSources.find(src => src.id === sourceId)
-
-                } else {
-                    source = availableSources.find(src => src.id === sourceId)
-                }
-                if (source)
-                    filteredSources.push(source)
-            })
-            setAvailableSources(filteredSources)
-            setSelectedSources(filteredSources)
-            createPolicyToast()
+          source = availableSources.find((src) => src.id === sourceId);
         }
-    }
-
-    const invalidateFieldValues = () => {
-        const updatedSearchFields = updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, searchFields[index].values, false, searchFields[index].sources))
-        setSearchFields(updatedSearchFields)
-        updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount)
-    }
-
-    const ValuePopoverFooter = (i) => {
-        if (i === searchFields[index].values.length - 1) {
-            return (
-                <EuiPopoverFooter>
-                    <EuiButton size="s" onClick={() => {
-                        setSearchFields(updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, [...searchFields[index].values, {}], false, searchFields[index].sources)))
-                    }}>
-                        Add value
-                    </EuiButton>
-                    <EuiButton size="s" style={{ float: 'right' }} onClick={() => {
-                        validateFieldValues()
-                        setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false))
-                    }}>
-                        Validate
-                    </EuiButton>
-                </EuiPopoverFooter >
-            )
+        if (source) {
+          filteredSources.push(source);
         }
+      });
+      setAvailableSources(filteredSources);
+      setSelectedSources(filteredSources);
+      createPolicyToast();
     }
-
-    const addFieldValue = (i, selectedOption) => {
-        setSearchFields(updateSearchFieldValues(searchFields, index, updateArrayElement(searchFields[index].values, i, { option: selectedOption })))
-    }
-
-    const getListFieldValues = () => {
-        const listFieldValues = []
-        standardFields.find(item => item.field_name === searchFields[index].name).values.split(", ").sort().forEach(element => {
-            listFieldValues.push({ label: element })
-        })
-        return (listFieldValues)
+  };
+
+  const invalidateFieldValues = () => {
+    const updatedSearchFields = updateArrayElement(
+      searchFields,
+      index,
+      new SearchField(
+        searchFields[index].name,
+        searchFields[index].type,
+        searchFields[index].values,
+        false,
+        searchFields[index].sources
+      )
+    );
+    setSearchFields(updatedSearchFields);
+    updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount);
+  };
+
+  const ValuePopoverFooter = (i) => {
+    if (i === searchFields[index].values.length - 1) {
+      return (
+        <EuiPopoverFooter>
+          <EuiButton
+            size="s"
+            onClick={() => {
+              setSearchFields(
+                updateArrayElement(
+                  searchFields,
+                  index,
+                  new SearchField(
+                    searchFields[index].name,
+                    searchFields[index].type,
+                    [...searchFields[index].values, {}],
+                    false,
+                    searchFields[index].sources
+                  )
+                )
+              );
+            }}
+          >
+            Add value
+          </EuiButton>
+          <EuiButton
+            size="s"
+            style={{ float: 'right' }}
+            onClick={() => {
+              validateFieldValues();
+              setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false));
+            }}
+          >
+            Validate
+          </EuiButton>
+        </EuiPopoverFooter>
+      );
     }
-
-    switch (searchFields[index].type) {
-        case 'Text':
-            return (
+  };
+
+  const addFieldValue = (i, selectedOption) => {
+    setSearchFields(
+      updateSearchFieldValues(
+        searchFields,
+        index,
+        updateArrayElement(searchFields[index].values, i, { option: selectedOption })
+      )
+    );
+  };
+
+  const getListFieldValues = () => {
+    const listFieldValues = [];
+    standardFields
+      .find((item) => item.field_name === searchFields[index].name)
+      .values.split(', ')
+      .sort()
+      .forEach((element) => {
+        listFieldValues.push({ label: element });
+      });
+    return listFieldValues;
+  };
+
+  switch (searchFields[index].type) {
+    case 'Text':
+      return (
+        <>
+          <EuiFlexItem>
+            <EuiFieldText
+              placeholder={'Type values'}
+              value={searchFields[index].values}
+              onChange={(e) =>
+                setSearchFields(
+                  updateSearchFieldValues(searchFields, index, e.target.value)
+                )
+              }
+            />
+          </EuiFlexItem>
+          <EuiPopoverFooter>
+            <EuiButton
+              size="s"
+              style={{ float: 'right' }}
+              onClick={() => {
+                validateFieldValues();
+                setIsPopoverValueOpen(
+                  updateArrayElement(isPopoverValueOpen, index, false)
+                );
+              }}
+            >
+              Validate
+            </EuiButton>
+          </EuiPopoverFooter>
+        </>
+      );
+    case 'List':
+      return (
+        <>
+          <EuiFormRow error={valueError} isInvalid={valueError !== undefined}>
+            <EuiComboBox
+              placeholder={'Select values'}
+              options={getListFieldValues()}
+              selectedOptions={searchFields[index].values}
+              onChange={(selectedOptions) => {
+                setValueError(undefined);
+                setSearchFields(
+                  updateSearchFieldValues(searchFields, index, selectedOptions)
+                );
+              }}
+              onSearchChange={onValueSearchChange}
+            />
+          </EuiFormRow>
+          <EuiPopoverFooter>
+            <EuiButton
+              size="s"
+              style={{ float: 'right' }}
+              onClick={() => {
+                validateFieldValues();
+                setIsPopoverValueOpen(
+                  updateArrayElement(isPopoverValueOpen, index, false)
+                );
+              }}
+            >
+              Validate
+            </EuiButton>
+          </EuiPopoverFooter>
+        </>
+      );
+
+    case 'Numeric':
+      const NumericValues = (i) => {
+        if (!!searchFields[index].values[i].option) {
+          switch (searchFields[index].values[i].option) {
+            case 'between':
+              return (
                 <>
-                    <EuiFlexItem>
-                        <EuiFieldText
-                            placeholder={"Type values"}
-                            value={searchFields[index].values}
-                            onChange={e => setSearchFields(updateSearchFieldValues(searchFields, index, e.target.value))}
-                        />
-                    </EuiFlexItem>
-                    <EuiPopoverFooter>
-                        <EuiButton size="s" style={{ float: 'right' }} onClick={() => {
-                            validateFieldValues()
-                            setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false))
-                        }}>
-                            Validate
-                        </EuiButton>
-                    </EuiPopoverFooter>
+                  <EuiFlexItem>
+                    <EuiFieldText
+                      placeholder={'1st value'}
+                      value={searchFields[index].values[i].value1}
+                      onChange={(e) => {
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              value1: e.target.value,
+                              value2: searchFields[index].values[i].value2,
+                            })
+                          )
+                        );
+                      }}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiFieldText
+                      placeholder={'2nd value'}
+                      value={searchFields[index].values[i].value2}
+                      onChange={(e) =>
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              value1: searchFields[index].values[i].value1,
+                              value2: e.target.value,
+                            })
+                          )
+                        )
+                      }
+                    />
+                  </EuiFlexItem>
+                  {ValuePopoverFooter(i)}
                 </>
-            )
+              );
 
-        case 'List':
-            return (
+            default:
+              return (
                 <>
-                    <EuiFormRow
-                        error={valueError}
-                        isInvalid={valueError !== undefined}>
-                        <EuiComboBox
-                            placeholder={"Select values"}
-                            options={getListFieldValues()}
-                            selectedOptions={searchFields[index].values}
-                            onChange={(selectedOptions) => {
-                                setValueError(undefined)
-                                setSearchFields(updateSearchFieldValues(searchFields, index, selectedOptions))
-                            }}
-                            onSearchChange={onValueSearchChange}
-                        />
-                    </EuiFormRow>
-                    <EuiPopoverFooter>
-                        <EuiButton size="s" style={{ float: 'right' }} onClick={() => {
-                            validateFieldValues()
-                            setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false))
-                        }}>
-                            Validate
-                        </EuiButton>
-                    </EuiPopoverFooter>
+                  <EuiFlexItem>
+                    <EuiFieldText
+                      placeholder={'Type value'}
+                      value={searchFields[index].values[i].value1}
+                      onChange={(e) => {
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              value1: e.target.value,
+                              value2: searchFields[index].values[i].value2,
+                            })
+                          )
+                        );
+                      }}
+                    />
+                  </EuiFlexItem>
+                  {ValuePopoverFooter(i)}
                 </>
-            )
-
-        case 'Numeric':
-            const NumericValues = (i) => {
-                if (!!searchFields[index].values[i].option) {
-                    switch (searchFields[index].values[i].option) {
-
-                        case 'between':
-                            return (
-                                <>
-                                    <EuiFlexItem>
-                                        <EuiFieldText
-                                            placeholder={"1st value"}
-                                            value={searchFields[index].values[i].value1}
-                                            onChange={e => {
-                                                setSearchFields(
-                                                    updateSearchFieldValues(
-                                                        searchFields, index, updateArrayElement(searchFields[index].values, i, { option: searchFields[index].values[i].option, value1: e.target.value, value2: searchFields[index].values[i].value2 }
-                                                        )))
-                                            }}
-                                        />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem>
-                                        <EuiFieldText
-                                            placeholder={"2nd value"}
-                                            value={searchFields[index].values[i].value2}
-                                            onChange={e => setSearchFields(
-                                                updateSearchFieldValues(
-                                                    searchFields, index, updateArrayElement(searchFields[index].values, i, { option: searchFields[index].values[i].option, value1: searchFields[index].values[i].value1, value2: e.target.value }
-                                                    )))}
-                                        />
-                                    </EuiFlexItem>
-                                    {ValuePopoverFooter(i)}
-                                </>
-                            )
-
-                        default:
-
-                            return (
-                                <>
-                                    <EuiFlexItem>
-                                        <EuiFieldText
-                                            placeholder={"Type value"}
-                                            value={searchFields[index].values[i].value1}
-                                            onChange={e => {
-                                                setSearchFields(
-                                                    updateSearchFieldValues(
-                                                        searchFields, index, updateArrayElement(searchFields[index].values, i, { option: searchFields[index].values[i].option, value1: e.target.value, value2: searchFields[index].values[i].value2 }
-                                                        )))
-                                            }}
-                                        />
-                                    </EuiFlexItem>
-                                    {ValuePopoverFooter(i)}
-                                </>
-                            )
-                    }
-                }
-            }
+              );
+          }
+        }
+      };
 
-            return (
+      return (
+        <>
+          {searchFields[index].values.map((value, i) => (
+            <div key={i}>
+              <EuiSelect
+                hasNoInitialSelection
+                id="Select an option"
+                options={NumericOptions}
+                value={searchFields[index].values[i].option}
+                onChange={(e) => {
+                  addFieldValue(i, e.target.value);
+                  invalidateFieldValues();
+                }}
+              />
+              {NumericValues(i)}
+            </div>
+          ))}
+        </>
+      );
+
+    case 'Date':
+      const SelectDates = (i) => {
+        if (!!searchFields[index].values[i].option) {
+          switch (searchFields[index].values[i].option) {
+            case 'between':
+              return (
                 <>
-                    {searchFields[index].values.map((value, i) => (
-                        < div key={i} >
-                            <EuiSelect
-                                hasNoInitialSelection
-                                id="Select an option"
-                                options={NumericOptions}
-                                value={searchFields[index].values[i].option}
-                                onChange={(e) => {
-                                    addFieldValue(i, e.target.value)
-                                    invalidateFieldValues()
-                                }}
-                            />
-                            {NumericValues(i)}
-                        </div>
-                    ))
-                    }
+                  <form className={datePickerStyles.container} noValidate>
+                    <TextField
+                      label="between"
+                      type="date"
+                      defaultValue={
+                        !!searchFields[index].values[i].startDate
+                          ? searchFields[index].values[i].startDate
+                          : Date.now()
+                      }
+                      className={datePickerStyles.textField}
+                      InputLabelProps={{
+                        shrink: true,
+                      }}
+                      onChange={(e) =>
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              startDate: e.target.value,
+                              endDate: searchFields[index].values[i].endDate,
+                            })
+                          )
+                        )
+                      }
+                    />
+                  </form>
+                  <form className={datePickerStyles.container} noValidate>
+                    <TextField
+                      label="and"
+                      type="date"
+                      defaultValue={
+                        !!searchFields[index].values[i].endDate
+                          ? searchFields[index].values[i].endDate
+                          : Date.now()
+                      }
+                      className={datePickerStyles.textField}
+                      InputLabelProps={{
+                        shrink: true,
+                      }}
+                      onChange={(e) =>
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              startDate: searchFields[index].values[i].startDate,
+                              endDate: e.target.value,
+                            })
+                          )
+                        )
+                      }
+                    />
+                  </form>
+                  {ValuePopoverFooter(i)}
                 </>
-            )
-
-        case 'Date':
-
-            const SelectDates = (i) => {
-                if (!!searchFields[index].values[i].option) {
-
-                    switch (searchFields[index].values[i].option) {
+              );
 
-                        case 'between':
-                            return (
-                                <>
-                                    <form className={datePickerStyles.container} noValidate>
-                                        <TextField
-                                            label="between"
-                                            type="date"
-                                            defaultValue={
-                                                !!searchFields[index].values[i].startDate ? searchFields[index].values[i].startDate : Date.now()
-                                            }
-                                            className={datePickerStyles.textField}
-                                            InputLabelProps={{
-                                                shrink: true,
-                                            }}
-                                            onChange={(e) =>
-                                                setSearchFields(
-                                                    updateSearchFieldValues(searchFields, index, updateArrayElement(
-                                                        searchFields[index].values, i, { option: searchFields[index].values[i].option, startDate: e.target.value, endDate: searchFields[index].values[i].endDate }
-                                                    )))
-                                            }
-                                        />
-                                    </form>
-                                    <form className={datePickerStyles.container} noValidate>
-                                        <TextField
-                                            label="and"
-                                            type="date"
-                                            defaultValue={
-                                                !!searchFields[index].values[i].endDate ? searchFields[index].values[i].endDate : Date.now()
-                                            }
-                                            className={datePickerStyles.textField}
-                                            InputLabelProps={{
-                                                shrink: true,
-                                            }}
-                                            onChange={(e) =>
-                                                setSearchFields(
-                                                    updateSearchFieldValues(searchFields, index, updateArrayElement(
-                                                        searchFields[index].values, i, { option: searchFields[index].values[i].option, startDate: searchFields[index].values[i].startDate, endDate: e.target.value }
-                                                    )))
-                                            }
-                                        />
-                                    </form>
-                                    {ValuePopoverFooter(i)}
-                                </>
-                            )
-
-                        default:
-
-                            return (
-                                <>
-                                    <form className={datePickerStyles.container} noValidate>
-                                        <TextField
-                                            type="date"
-                                            defaultValue={
-                                                !!searchFields[index].values[i].startDate ? searchFields[index].values[i].startDate : Date.now()
-                                            }
-                                            className={datePickerStyles.textField}
-                                            InputLabelProps={{
-                                                shrink: true,
-                                            }}
-                                            onChange={(e) =>
-                                                setSearchFields(
-                                                    updateSearchFieldValues(searchFields, index, updateArrayElement(
-                                                        searchFields[index].values, i, { option: searchFields[index].values[i].option, startDate: e.target.value, endDate: Date.now() }
-                                                    )))
-                                            }
-                                        />
-                                    </form>
-                                    {ValuePopoverFooter(i)}
-                                </>
-                            )
-                    }
-                }
-            }
-
-            return (
+            default:
+              return (
                 <>
-                    {searchFields[index].values.map((value, i) => (
-                        <div key={i}>
-                            <EuiSelect
-                                hasNoInitialSelection
-                                id="Select an option"
-                                options={DateOptions}
-                                value={searchFields[index].values[i].option}
-                                onChange={(e) => {
-                                    addFieldValue(i, e.target.value)
-                                    invalidateFieldValues()
-                                }}
-                            />
-                            {SelectDates(i)}
-                        </div>
-                    ))}
+                  <form className={datePickerStyles.container} noValidate>
+                    <TextField
+                      type="date"
+                      defaultValue={
+                        !!searchFields[index].values[i].startDate
+                          ? searchFields[index].values[i].startDate
+                          : Date.now()
+                      }
+                      className={datePickerStyles.textField}
+                      InputLabelProps={{
+                        shrink: true,
+                      }}
+                      onChange={(e) =>
+                        setSearchFields(
+                          updateSearchFieldValues(
+                            searchFields,
+                            index,
+                            updateArrayElement(searchFields[index].values, i, {
+                              option: searchFields[index].values[i].option,
+                              startDate: e.target.value,
+                              endDate: Date.now(),
+                            })
+                          )
+                        )
+                      }
+                    />
+                  </form>
+                  {ValuePopoverFooter(i)}
                 </>
-            )
-        default:
-    }
-}
-
-const PopoverValueButton = (index, standardFields, setStandardFields, searchFields, setSearchFields, isPopoverValueOpen, setIsPopoverValueOpen,
-    valueError, setValueError, search, setSearch, setSearchCount, fieldCount, setFieldCount, selectedOperatorId, datePickerStyles, createPolicyToast,
-    selectedSources, setSelectedSources, availableSources, setAvailableSources) => {
+              );
+          }
+        }
+      };
 
-    return (
-        <EuiPopover
-            panelPaddingSize="s"
-            button={<EuiButtonIcon
-                size="s"
-                color="primary"
-                onClick={() => setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, !isPopoverValueOpen[index]))}
-                iconType="documentEdit"
-                title="Give field values"
-            />}
-            isOpen={isPopoverValueOpen[index]}
-            closePopover={() => setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false))}>
-            {/*<div style={{ width: 240 }}>
+      return (
+        <>
+          {searchFields[index].values.map((value, i) => (
+            <div key={i}>
+              <EuiSelect
+                hasNoInitialSelection
+                id="Select an option"
+                options={DateOptions}
+                value={searchFields[index].values[i].option}
+                onChange={(e) => {
+                  addFieldValue(i, e.target.value);
+                  invalidateFieldValues();
+                }}
+              />
+              {SelectDates(i)}
+            </div>
+          ))}
+        </>
+      );
+    default:
+  }
+};
+
+const PopoverValueButton = (
+  index,
+  standardFields,
+  setStandardFields,
+  searchFields,
+  setSearchFields,
+  isPopoverValueOpen,
+  setIsPopoverValueOpen,
+  valueError,
+  setValueError,
+  search,
+  setSearch,
+  setSearchCount,
+  fieldCount,
+  setFieldCount,
+  selectedOperatorId,
+  datePickerStyles,
+  createPolicyToast,
+  selectedSources,
+  setSelectedSources,
+  availableSources,
+  setAvailableSources
+) => {
+  return (
+    <EuiPopover
+      panelPaddingSize="s"
+      button={
+        <EuiButtonIcon
+          size="s"
+          color="primary"
+          onClick={() =>
+            setIsPopoverValueOpen(
+              updateArrayElement(isPopoverValueOpen, index, !isPopoverValueOpen[index])
+            )
+          }
+          iconType="documentEdit"
+          title="Give field values"
+        />
+      }
+      isOpen={isPopoverValueOpen[index]}
+      closePopover={() =>
+        setIsPopoverValueOpen(updateArrayElement(isPopoverValueOpen, index, false))
+      }
+    >
+      {/*<div style={{ width: 240 }}>
                 <EuiButtonIcon
                     size="s"
                     style={{ float: 'right' }}
@@ -871,475 +1173,699 @@ const PopoverValueButton = (index, standardFields, setStandardFields, searchFiel
                     title="Close popover"
                 />
             </div>*/}
-            <div style={{ width: 240 }}>
-                {PopoverValueContent(index, standardFields, setStandardFields, searchFields, setSearchFields, valueError, setValueError, search, setSearch, setSearchCount, fieldCount, setFieldCount,
-                    isPopoverValueOpen, setIsPopoverValueOpen, selectedOperatorId, datePickerStyles, createPolicyToast, selectedSources, setSelectedSources, availableSources, setAvailableSources)}
-            </div>
-        </EuiPopover>
-    )
-}
-
-const FieldsPanel = (standardFields, setStandardFields, searchFields, setSearchFields, selectedField, setSelectedField, selectedSection, setSelectedSection, isPopoverSelectOpen,
-    setIsPopoverSelectOpen, isPopoverValueOpen, setIsPopoverValueOpen, valueError, setValueError, search, setSearch, setSearchCount, selectedOperatorId, setSelectedOperatorId,
-    fieldCount, setFieldCount, availableSources, setAvailableSources, selectedSources, setSelectedSources, sources, datePickerStyles, createPolicyToast) => {
-
-    const countFieldValues = (field, index) => {
-        const fieldStr = `{${fieldValuesToString(field)}}`
-        const queriesWithIndices = createAdvancedQueriesBySource(standardFields, fieldStr, selectedSources, availableSources)
-        getQueryCount(queriesWithIndices).then(result => {
-            if (result || result === 0)
-                setFieldCount(updateArrayElement(fieldCount, index, result))
-        })
-    }
-
-    const handleRemoveField = (index) => {
-        const updatedSearchFields = removeArrayElement(searchFields, index)
-        setSearchFields(updatedSearchFields)
-        updateSources(updatedSearchFields, sources, setSelectedSources, setAvailableSources)
-        updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount)
-    }
-
-    const handleClearValues = (index) => {
-        let updatedSearchFields = []
-        switch (searchFields[index].type) {
-            case 'Text':
-                updatedSearchFields = updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, '', false, searchFields[index].sources))
-                break
-            case 'List':
-                updatedSearchFields = updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, [], false, searchFields[index].sources))
-                break
-            default:
-                updatedSearchFields = updateArrayElement(searchFields, index, new SearchField(searchFields[index].name, searchFields[index].type, [{}], false, searchFields[index].sources))
-        }
-        setSearchFields(updatedSearchFields)
-        updateSources(updatedSearchFields, sources, setSelectedSources, setAvailableSources)
-        setFieldCount(updateArrayElement(fieldCount, index))
-        updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount)
-    }
-
-    if (standardFields === []) {
-        return <h2>Loading user fields...</h2>;
+      <div style={{ width: 240 }}>
+        {PopoverValueContent(
+          index,
+          standardFields,
+          setStandardFields,
+          searchFields,
+          setSearchFields,
+          valueError,
+          setValueError,
+          search,
+          setSearch,
+          setSearchCount,
+          fieldCount,
+          setFieldCount,
+          isPopoverValueOpen,
+          setIsPopoverValueOpen,
+          selectedOperatorId,
+          datePickerStyles,
+          createPolicyToast,
+          selectedSources,
+          setSelectedSources,
+          availableSources,
+          setAvailableSources
+        )}
+      </div>
+    </EuiPopover>
+  );
+};
+
+const FieldsPanel = (
+  standardFields,
+  setStandardFields,
+  searchFields,
+  setSearchFields,
+  selectedField,
+  setSelectedField,
+  selectedSection,
+  setSelectedSection,
+  isPopoverSelectOpen,
+  setIsPopoverSelectOpen,
+  isPopoverValueOpen,
+  setIsPopoverValueOpen,
+  valueError,
+  setValueError,
+  search,
+  setSearch,
+  setSearchCount,
+  selectedOperatorId,
+  setSelectedOperatorId,
+  fieldCount,
+  setFieldCount,
+  availableSources,
+  setAvailableSources,
+  selectedSources,
+  setSelectedSources,
+  sources,
+  datePickerStyles,
+  createPolicyToast
+) => {
+  const countFieldValues = (field, index) => {
+    const fieldStr = `{${fieldValuesToString(field)}}`;
+    const queriesWithIndices = createAdvancedQueriesBySource(
+      standardFields,
+      fieldStr,
+      selectedSources,
+      availableSources
+    );
+    getQueryCount(queriesWithIndices).then((result) => {
+      if (result || result === 0)
+        setFieldCount(updateArrayElement(fieldCount, index, result));
+    });
+  };
+
+  const handleRemoveField = (index) => {
+    const updatedSearchFields = removeArrayElement(searchFields, index);
+    setSearchFields(updatedSearchFields);
+    updateSources(updatedSearchFields, sources, setSelectedSources, setAvailableSources);
+    updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount);
+  };
+
+  const handleClearValues = (index) => {
+    let updatedSearchFields = [];
+    switch (searchFields[index].type) {
+      case 'Text':
+        updatedSearchFields = updateArrayElement(
+          searchFields,
+          index,
+          new SearchField(
+            searchFields[index].name,
+            searchFields[index].type,
+            '',
+            false,
+            searchFields[index].sources
+          )
+        );
+        break;
+      case 'List':
+        updatedSearchFields = updateArrayElement(
+          searchFields,
+          index,
+          new SearchField(
+            searchFields[index].name,
+            searchFields[index].type,
+            [],
+            false,
+            searchFields[index].sources
+          )
+        );
+        break;
+      default:
+        updatedSearchFields = updateArrayElement(
+          searchFields,
+          index,
+          new SearchField(
+            searchFields[index].name,
+            searchFields[index].type,
+            [{}],
+            false,
+            searchFields[index].sources
+          )
+        );
     }
-
-    return (
-        <>
-            <EuiTitle size='xs'>
-                <h2>Field search</h2>
-            </EuiTitle>
-            <EuiPanel paddingSize="m" >
-                <EuiFlexGroup direction="column">
-                    {searchFields.map((field, index) => (
-                        <EuiPanel key={"field" + index} paddingSize="s">
-                            <EuiFlexItem grow={false}>
-                                <EuiFlexGroup direction="row" alignItems="center">
-                                    <EuiFlexItem grow={false}>
-                                        <EuiButtonIcon
-                                            size="s"
-                                            color="danger"
-                                            onClick={() => handleRemoveField(index)}
-                                            iconType="indexClose"
-                                            title="Remove field"
-                                        />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem>
-
-                                        {
-                                            field.isValidated ?
-                                                <>
-                                                    {
-                                                        field.sources.length ?
-                                                            <EuiHealth color="danger">{fieldValuesToString(field).replace(/_|\./g, ' ')}</EuiHealth>
-                                                            :
-                                                            <EuiHealth color="primary">{fieldValuesToString(field).replace(/_|\./g, ' ')}</EuiHealth>
-                                                    }
-
-                                                </>
-                                                :
-                                                <>
-                                                    {
-                                                        field.sources.length ?
-                                                            <EuiHealth color="danger">{field.name.replace(/_|\./g, ' ')}</EuiHealth>
-                                                            :
-                                                            <EuiHealth color="primary">{field.name.replace(/_|\./g, ' ')}</EuiHealth>
-                                                    }
-                                                </>
-                                        }
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={false}>
-                                        {isNaN(fieldCount[index]) ?
-                                            <>
-                                            </>
-                                            :
-                                            <>
-                                                <EuiTextColor color="secondary">
-                                                    {fieldCount[index]} {fieldCount[index] === 1 ? "result" : "results"}
-                                                </EuiTextColor>
-                                            </>
-                                        }
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={false}>
-                                        {
-                                            field.isValidated ?
-                                                <>
-                                                    <EuiButtonIcon
-                                                        size="s"
-                                                        onClick={() => countFieldValues(field, index)}
-                                                        iconType="number"
-                                                        title="Count results"
-                                                    />
-                                                </>
-                                                :
-                                                <></>
-                                        }
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={false}>
-                                        {
-                                            field.isValidated ?
-                                                <>
-                                                    <EuiButtonIcon
-                                                        size="s"
-                                                        color="danger"
-                                                        onClick={() => handleClearValues(index)}
-                                                        iconType="trash"
-                                                        title="Clear values"
-                                                    />
-                                                </>
-                                                :
-                                                <></>
-                                        }
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={false}>
-                                        {PopoverValueButton(index, standardFields, setStandardFields, searchFields, setSearchFields, isPopoverValueOpen, setIsPopoverValueOpen, valueError, setValueError,
-                                            search, setSearch, setSearchCount, fieldCount, setFieldCount, selectedOperatorId, datePickerStyles, createPolicyToast, selectedSources, setSelectedSources, availableSources, setAvailableSources)}
-                                    </EuiFlexItem>
-                                </EuiFlexGroup>
-                            </EuiFlexItem>
-                        </EuiPanel>
-                    ))}
+    setSearchFields(updatedSearchFields);
+    updateSources(updatedSearchFields, sources, setSelectedSources, setAvailableSources);
+    setFieldCount(updateArrayElement(fieldCount, index));
+    updateSearch(setSearch, updatedSearchFields, selectedOperatorId, setSearchCount);
+  };
+
+  if (standardFields === []) {
+    return <h2>Loading user fields...</h2>;
+  }
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h2>Field search</h2>
+      </EuiTitle>
+      <EuiPanel paddingSize="m">
+        <EuiFlexGroup direction="column">
+          {searchFields.map((field, index) => (
+            <EuiPanel key={'field' + index} paddingSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiFlexGroup direction="row" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonIcon
+                      size="s"
+                      color="danger"
+                      onClick={() => handleRemoveField(index)}
+                      iconType="indexClose"
+                      title="Remove field"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    {field.isValidated ? (
+                      <>
+                        {field.sources.length ? (
+                          <EuiHealth color="danger">
+                            {fieldValuesToString(field).replace(/_|\./g, ' ')}
+                          </EuiHealth>
+                        ) : (
+                          <EuiHealth color="primary">
+                            {fieldValuesToString(field).replace(/_|\./g, ' ')}
+                          </EuiHealth>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        {field.sources.length ? (
+                          <EuiHealth color="danger">
+                            {field.name.replace(/_|\./g, ' ')}
+                          </EuiHealth>
+                        ) : (
+                          <EuiHealth color="primary">
+                            {field.name.replace(/_|\./g, ' ')}
+                          </EuiHealth>
+                        )}
+                      </>
+                    )}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    {isNaN(fieldCount[index]) ? (
+                      <></>
+                    ) : (
+                      <>
+                        <EuiTextColor color="secondary">
+                          {fieldCount[index]}{' '}
+                          {fieldCount[index] === 1 ? 'result' : 'results'}
+                        </EuiTextColor>
+                      </>
+                    )}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    {field.isValidated ? (
+                      <>
+                        <EuiButtonIcon
+                          size="s"
+                          onClick={() => countFieldValues(field, index)}
+                          iconType="number"
+                          title="Count results"
+                        />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    {field.isValidated ? (
+                      <>
+                        <EuiButtonIcon
+                          size="s"
+                          color="danger"
+                          onClick={() => handleClearValues(index)}
+                          iconType="trash"
+                          title="Clear values"
+                        />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    {PopoverValueButton(
+                      index,
+                      standardFields,
+                      setStandardFields,
+                      searchFields,
+                      setSearchFields,
+                      isPopoverValueOpen,
+                      setIsPopoverValueOpen,
+                      valueError,
+                      setValueError,
+                      search,
+                      setSearch,
+                      setSearchCount,
+                      fieldCount,
+                      setFieldCount,
+                      selectedOperatorId,
+                      datePickerStyles,
+                      createPolicyToast,
+                      selectedSources,
+                      setSelectedSources,
+                      availableSources,
+                      setAvailableSources
+                    )}
+                  </EuiFlexItem>
                 </EuiFlexGroup>
-                <EuiSpacer size="l" />
-                {PopoverSelect(standardFields, setStandardFields, searchFields, setSearchFields, selectedField, setSelectedField, selectedSection, setSelectedSection,
-                    isPopoverSelectOpen, setIsPopoverSelectOpen, fieldCount, setFieldCount, selectedSources, setSelectedSources)}
+              </EuiFlexItem>
             </EuiPanel>
-            <EuiSpacer size="s" />
-            <EuiRadioGroup
-                options={Operators}
-                idSelected={selectedOperatorId}
-                onChange={(id) => {
-                    setSelectedOperatorId(id)
-                    updateSearch(setSearch, searchFields, id, setSearchCount)
-                }}
-                name="operators group"
-                legend={{
-                    children: <span>Search option</span>,
-                }}
+          ))}
+        </EuiFlexGroup>
+        <EuiSpacer size="l" />
+        {PopoverSelect(
+          standardFields,
+          setStandardFields,
+          searchFields,
+          setSearchFields,
+          selectedField,
+          setSelectedField,
+          selectedSection,
+          setSelectedSection,
+          isPopoverSelectOpen,
+          setIsPopoverSelectOpen,
+          fieldCount,
+          setFieldCount,
+          selectedSources,
+          setSelectedSources
+        )}
+      </EuiPanel>
+      <EuiSpacer size="s" />
+      <EuiRadioGroup
+        options={Operators}
+        idSelected={selectedOperatorId}
+        onChange={(id) => {
+          setSelectedOperatorId(id);
+          updateSearch(setSearch, searchFields, id, setSearchCount);
+        }}
+        name="operators group"
+        legend={{
+          children: <span>Search option</span>,
+        }}
+      />
+    </>
+  );
+};
+
+const SourceSelect = (
+  availableSources,
+  selectedSources,
+  setSelectedSources,
+  sourceSelectError,
+  setSourceSelectError
+) => {
+  if (Object.keys(availableSources).length !== 0) {
+    availableSources.forEach((source) => {
+      if (source.name) {
+        source = changeNameToLabel(source);
+      }
+    });
+
+    const onSourceChange = (selectedOptions) => {
+      setSourceSelectError(undefined);
+      setSelectedSources(selectedOptions);
+    };
+
+    const onSourceSearchChange = (value, hasMatchingOptions) => {
+      setSourceSelectError(
+        value.length === 0 || hasMatchingOptions
+          ? undefined
+          : `"${value}" is not a valid option`
+      );
+    };
+    return (
+      <>
+        <EuiTitle size="xs">
+          <h2>Partner sources</h2>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiFlexItem>
+          <EuiFormRow
+            error={sourceSelectError}
+            isInvalid={sourceSelectError !== undefined}
+          >
+            <EuiComboBox
+              placeholder="By default, all sources are selected"
+              options={availableSources}
+              selectedOptions={selectedSources}
+              onChange={onSourceChange}
+              onSearchChange={onSourceSearchChange}
             />
-        </>
-    )
-}
-
-const SourceSelect = (availableSources, selectedSources, setSelectedSources, sourceSelectError, setSourceSelectError) => {
-
-    if (Object.keys(availableSources).length !== 0) {
-        availableSources.forEach(source => {
-            if (source.name) {
-                source = changeNameToLabel(source)
+          </EuiFormRow>
+        </EuiFlexItem>
+      </>
+    );
+  } else {
+    return (
+      <p>
+        <EuiIcon type="alert" color="danger" /> No source available !
+      </p>
+    );
+  }
+};
+
+const Search = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedTabNumber, setSelectedTabNumber] = useState(0);
+  const [userHistory, setUserHistory] = useState({});
+  const [advancedSearch, setAdvancedSearch] = useState(false);
+  const [readOnlyQuery, setReadOnlyQuery] = useState(true);
+  const [selectedField, setSelectedField] = useState([]);
+  const [selectedSection, setSelectedSection] = useState([]);
+  const [isPopoverSelectOpen, setIsPopoverSelectOpen] = useState(false);
+  const [isPopoverValueOpen, setIsPopoverValueOpen] = useState([false]);
+  const [selectedSources, setSelectedSources] = useState([]);
+  const [availableSources, setAvailableSources] = useState([]);
+  const [sourceSelectError, setSourceSelectError] = useState(undefined);
+  const [valueError, setValueError] = useState(undefined);
+  const [search, setSearch] = useState('');
+  const [searchName, setSearchName] = useState('');
+  const [searchDescription, setSearchDescription] = useState('');
+  const [basicSearch, setBasicSearch] = useState('');
+  const [selectedOperatorId, setSelectedOperatorId] = useState('0');
+  const [searchFields, setSearchFields] = useState([]);
+  const [standardFields, setStandardFields] = useState([]);
+  const [sources, setSources] = useState([]);
+  const [searchResults, setSearchResults] = useState();
+  const [searchCount, setSearchCount] = useState();
+  const [fieldCount, setFieldCount] = useState([]);
+  const [isReadOnlyModalOpen, setIsReadOnlyModalOpen] = useState(false);
+  const [isSaveSearchModalOpen, setIsSaveSearchModalOpen] = useState(false);
+  const [selectedSavedSearch, setSelectedSavedSearch] = useState();
+  const [historySelectError, setHistorySelectError] = useState(undefined);
+  const [notificationToasts, setNotificationToasts] = useState([]);
+  const datePickerStyles = useStyles();
+
+  useEffect(() => {
+    fetchPublicFields().then((resultStdFields) => {
+      resultStdFields.forEach((field) => {
+        field.sources = [];
+      });
+      setStandardFields(resultStdFields);
+      fetchUserPolicyFields(sessionStorage.getItem('user_id')).then(
+        (resultPolicyFields) => {
+          const userFields = resultStdFields;
+          resultPolicyFields.forEach((polField) => {
+            const stdFieldIndex = userFields.findIndex(
+              (stdField) => stdField.id === polField.std_id
+            );
+            if (stdFieldIndex >= 0) {
+              if (!userFields[stdFieldIndex].sources.includes(polField.source_id))
+                userFields[stdFieldIndex].sources.push(polField.source_id);
+            } else {
+              const newField = {
+                id: polField.std_id,
+                sources: [polField.source_id],
+                ...polField,
+              };
+              userFields.push(newField);
             }
-        })
-
-        const onSourceChange = (selectedOptions) => {
-            setSourceSelectError(undefined)
-            setSelectedSources(selectedOptions)
+          });
+          userFields.sort((a, b) => (a.id > b.id ? 1 : b.id > a.id ? -1 : 0));
+          setStandardFields(removeNullFields(userFields));
         }
-
-        const onSourceSearchChange = (value, hasMatchingOptions) => {
-            setSourceSelectError(
-                value.length === 0 || hasMatchingOptions
-                    ? undefined
-                    : `"${value}" is not a valid option`
-            )
-        }
-
-        return (
+      );
+
+      // policyField => {
+      //     policyField.forEach(
+    });
+    fetchSources(sessionStorage.getItem('user_id')).then((result) => {
+      setSources(result);
+      setAvailableSources(result);
+    });
+    fetchHistory(setUserHistory);
+  }, []);
+
+  const createPolicyToast = () => {
+    const toast = {
+      title: 'Policy field selected',
+      color: 'warning',
+      iconType: 'alert',
+      toastLifeTimeMs: 15000,
+      text: (
+        <>
+          <p>You selected a private field.</p>
+          <p>
+            Access to this field was granted for specific sources, which means that your
+            search will be restricted to those.
+          </p>
+          <p>Please check the sources list before searching.</p>
+        </>
+      ),
+    };
+    setNotificationToasts(notificationToasts.concat(toast));
+  };
+
+  const createEditableQueryToast = () => {
+    const toast = {
+      title: 'Proceed with caution',
+      color: 'warning',
+      iconType: 'alert',
+      toastLifeTimeMs: 15000,
+      text: (
+        <>
+          <p>
+            Be aware that manually editing the query can spoil search results. The syntax
+            must be respected :
+          </p>
+          <ul>
+            Fields and their values should be put between brackets : &#123; &#125; - Make
+            sure every opened bracket is properly closed
+          </ul>
+          <ul>
+            "AND" and "OR" should be capitalized between different fields conditions and
+            lowercased within a field expression
+          </ul>
+          <ul>Make sure to check eventual typing mistakes</ul>
+        </>
+      ),
+    };
+    setNotificationToasts(notificationToasts.concat(toast));
+  };
+
+  const removeToast = (removedToast) => {
+    setNotificationToasts(
+      notificationToasts.filter((toast) => toast.id !== removedToast.id)
+    );
+  };
+
+  const tabsContent = [
+    {
+      id: 'tab1',
+      name: 'Compose search',
+      content: (
+        <>
+          {advancedSearch ? (
             <>
-                <EuiTitle size='xs'>
-                    <h2>Partner sources</h2>
-                </EuiTitle>
-                <EuiSpacer size="s" />
-                <EuiFlexItem >
-                    <EuiFormRow
-                        error={sourceSelectError}
-                        isInvalid={sourceSelectError !== undefined}>
-                        <EuiComboBox
-                            placeholder="By default, all sources are selected"
-                            options={availableSources}
-                            selectedOptions={selectedSources}
-                            onChange={onSourceChange}
-                            onSearchChange={onSourceSearchChange}
-                        />
-                    </EuiFormRow>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiSpacer size="s" />
+                  <EuiButtonEmpty
+                    onClick={() => {
+                      setAdvancedSearch(!advancedSearch);
+                    }}
+                  >
+                    Switch to basic search
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiSpacer size="s" />
+                  {SearchBar(
+                    isLoading,
+                    setIsLoading,
+                    search,
+                    setSearch,
+                    searchResults,
+                    setSearchResults,
+                    searchFields,
+                    setSearchFields,
+                    searchName,
+                    setSearchName,
+                    searchDescription,
+                    setSearchDescription,
+                    readOnlyQuery,
+                    setReadOnlyQuery,
+                    selectedSources,
+                    setSelectedSources,
+                    availableSources,
+                    setAvailableSources,
+                    standardFields,
+                    sources,
+                    setSelectedTabNumber,
+                    searchCount,
+                    setSearchCount,
+                    setFieldCount,
+                    isReadOnlyModalOpen,
+                    setIsReadOnlyModalOpen,
+                    isSaveSearchModalOpen,
+                    setIsSaveSearchModalOpen,
+                    userHistory,
+                    setUserHistory,
+                    selectedSavedSearch,
+                    setSelectedSavedSearch,
+                    historySelectError,
+                    setHistorySelectError,
+                    selectedOperatorId,
+                    createEditableQueryToast
+                  )}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiSpacer size="s" />
+                  {FieldsPanel(
+                    standardFields,
+                    setStandardFields,
+                    searchFields,
+                    setSearchFields,
+                    selectedField,
+                    setSelectedField,
+                    selectedSection,
+                    setSelectedSection,
+                    isPopoverSelectOpen,
+                    setIsPopoverSelectOpen,
+                    isPopoverValueOpen,
+                    setIsPopoverValueOpen,
+                    valueError,
+                    setValueError,
+                    search,
+                    setSearch,
+                    setSearchCount,
+                    selectedOperatorId,
+                    setSelectedOperatorId,
+                    fieldCount,
+                    setFieldCount,
+                    availableSources,
+                    setAvailableSources,
+                    selectedSources,
+                    setSelectedSources,
+                    sources,
+                    datePickerStyles,
+                    createPolicyToast
+                  )}
+                  <EuiSpacer size="s" />
+                  {SourceSelect(
+                    availableSources,
+                    selectedSources,
+                    setSelectedSources,
+                    sourceSelectError,
+                    setSourceSelectError
+                  )}
                 </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiGlobalToastList
+                toasts={notificationToasts}
+                dismissToast={removeToast}
+                toastLifeTimeMs={2500}
+              />
             </>
-        )
-    } else {
-        return (
-            <p>
-                <EuiIcon type='alert' color='danger' />    No source available !
-            </p>
-        )
-    }
-}
-
-const Search = (props) => {
-    const [isLoading, setIsLoading] = useState(false)
-    const [selectedTabNumber, setSelectedTabNumber] = useState(0)
-    const [userHistory, setUserHistory] = useState({})
-    const [advancedSearch, setAdvancedSearch] = useState(false)
-    const [readOnlyQuery, setReadOnlyQuery] = useState(true)
-    const [selectedField, setSelectedField] = useState([])
-    const [selectedSection, setSelectedSection] = useState([])
-    const [isPopoverSelectOpen, setIsPopoverSelectOpen] = useState(false)
-    const [isPopoverValueOpen, setIsPopoverValueOpen] = useState([false])
-    const [selectedSources, setSelectedSources] = useState([])
-    const [availableSources, setAvailableSources] = useState([])
-    const [sourceSelectError, setSourceSelectError] = useState(undefined)
-    const [valueError, setValueError] = useState(undefined)
-    const [search, setSearch] = useState("")
-    const [searchName, setSearchName] = useState("")
-    const [searchDescription, setSearchDescription] = useState("")
-    const [basicSearch, setBasicSearch] = useState("")
-    const [selectedOperatorId, setSelectedOperatorId] = useState('0')
-    const [searchFields, setSearchFields] = useState([])
-    const [standardFields, setStandardFields] = useState([])
-    const [sources, setSources] = useState([])
-    const [searchResults, setSearchResults] = useState()
-    const [searchCount, setSearchCount] = useState()
-    const [fieldCount, setFieldCount] = useState([])
-    const [isReadOnlyModalOpen, setIsReadOnlyModalOpen] = useState(false)
-    const [isSaveSearchModalOpen, setIsSaveSearchModalOpen] = useState(false)
-    const [selectedSavedSearch, setSelectedSavedSearch] = useState()
-    const [historySelectError, setHistorySelectError] = useState(undefined)
-    const [notificationToasts, setNotificationToasts] = useState([])
-    const datePickerStyles = useStyles()
-
-
-    useEffect(() => {
-        fetchPublicFields().then(resultStdFields => {
-            resultStdFields.forEach(field => {
-                field.sources = []
-            })
-            setStandardFields(resultStdFields)
-            fetchUserPolicyFields(sessionStorage.getItem("user_id")).then(resultPolicyFields => {
-                const userFields = resultStdFields
-                console.log(resultPolicyFields)
-                resultPolicyFields.forEach(polField => {
-                    const stdFieldIndex = userFields.findIndex(stdField => stdField.id === polField.std_id)
-                    if (stdFieldIndex >= 0) {
-                        if (!userFields[stdFieldIndex].sources.includes(polField.source_id))
-                            userFields[stdFieldIndex].sources.push(polField.source_id)
-                    } else {
-                        const newField = {
-                            id: polField.std_id,
-                            sources: [polField.source_id],
-                            ...polField
-                        }
-                        userFields.push(newField)
-                    }
-                })
-                userFields.sort((a, b) => (a.id > b.id) ? 1 : ((b.id > a.id) ? -1 : 0))
-                setStandardFields(removeNullFields(userFields))
-                console.log(resultStdFields)
-            })
-
-            // policyField => {
-            //     policyField.forEach(
-        })
-        fetchSources(sessionStorage.getItem("user_id")).then(result => {
-            setSources(result)
-            setAvailableSources(result)
-        })
-        fetchHistory(setUserHistory)
-    }, [])
-
-    const createPolicyToast = () => {
-        const toast = {
-            title: 'Policy field selected',
-            color: 'warning',
-            iconType: 'alert',
-            toastLifeTimeMs: 15000,
-            text: (
-                <>
-                    <p>You selected a private field.</p>
-                    <p>Access to this field was granted for specific sources, which means that your search will be restricted to those.</p>
-                    <p>Please check the sources list before searching.</p>
-                </>
-            ),
-        }
-        setNotificationToasts(notificationToasts.concat(toast))
-    }
-
-    const createEditableQueryToast = () => {
-        const toast = {
-            title: 'Proceed with caution',
-            color: 'warning',
-            iconType: 'alert',
-            toastLifeTimeMs: 15000,
-            text: (
-                <>
-                    <p>Be aware that manually editing the query can spoil search results. The syntax must be respected :</p>
-                    <ul>Fields and their values should be put between brackets : &#123; &#125;  -  Make sure every opened bracket is properly closed</ul>
-                    <ul>"AND" and "OR" should be capitalized between different fields conditions and lowercased within a field expression</ul>
-                    <ul>Make sure to check eventual typing mistakes</ul>
-                </>
-            ),
-        }
-        setNotificationToasts(notificationToasts.concat(toast))
-    }
-
-    const removeToast = removedToast => {
-        setNotificationToasts(notificationToasts.filter(toast => toast.id !== removedToast.id));
-    }
-
-    const tabsContent = [
-        {
-            id: 'tab1',
-            name: 'Compose search',
-            content: (
-                <>
-                    {advancedSearch ?
-                        <>
-                            <EuiFlexGroup>
-                                <EuiFlexItem grow={false}>
-                                    <EuiSpacer size="s" />
-                                    <EuiButtonEmpty onClick={() => {
-                                        setAdvancedSearch(!advancedSearch)
-                                    }}>
-                                        Switch to basic search
-                                    </EuiButtonEmpty>
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                            <EuiFlexGroup>
-                                <EuiFlexItem>
-                                    <EuiSpacer size="s" />
-                                    {SearchBar(isLoading, setIsLoading, search, setSearch, searchResults, setSearchResults, searchFields, setSearchFields, searchName, setSearchName, searchDescription, setSearchDescription, readOnlyQuery, setReadOnlyQuery, selectedSources, setSelectedSources, availableSources, setAvailableSources, standardFields, sources, setSelectedTabNumber, searchCount, setSearchCount, setFieldCount,
-                                        isReadOnlyModalOpen, setIsReadOnlyModalOpen, isSaveSearchModalOpen, setIsSaveSearchModalOpen, userHistory, setUserHistory, selectedSavedSearch, setSelectedSavedSearch, historySelectError, setHistorySelectError, selectedOperatorId, createEditableQueryToast)}
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                            <EuiFlexGroup>
-                                <EuiFlexItem>
-                                    <EuiSpacer size="s" />
-                                    {FieldsPanel(standardFields, setStandardFields, searchFields, setSearchFields, selectedField, setSelectedField, selectedSection, setSelectedSection, isPopoverSelectOpen, setIsPopoverSelectOpen, isPopoverValueOpen, setIsPopoverValueOpen, valueError, setValueError,
-                                        search, setSearch, setSearchCount, selectedOperatorId, setSelectedOperatorId, fieldCount, setFieldCount, availableSources, setAvailableSources, selectedSources, setSelectedSources, sources, datePickerStyles, createPolicyToast)}
-                                    <EuiSpacer size="s" />
-                                    {SourceSelect(availableSources, selectedSources, setSelectedSources, sourceSelectError, setSourceSelectError)}
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                            <EuiGlobalToastList
-                                toasts={notificationToasts}
-                                dismissToast={removeToast}
-                            />
-                        </>
-                        :
-                        <>
-                            <EuiFlexGroup>
-                                <EuiFlexItem grow={false}>
-                                    <EuiSpacer size="s" />
-                                    <EuiButtonEmpty onClick={() => {
-                                        setAdvancedSearch(!advancedSearch)
-                                    }}>
-                                        Switch to advanced search
-                                        </EuiButtonEmpty>
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                            <EuiFlexGroup>
-                                <EuiFlexItem>
-                                    <EuiSpacer size="s" />
-                                    <EuiFlexGroup>
-                                        <EuiFlexItem>
-                                            <EuiFieldSearch value={basicSearch} onChange={e => setBasicSearch(e.target.value)} placeholder="Search..." fullWidth />
-                                        </EuiFlexItem>
-                                        <EuiFlexItem grow={false}>
-                                            <EuiButton
-                                                fill
-                                                isDisabled={advancedSearch}
-                                                onClick={() => {
-                                                    setIsLoading(true)
-                                                    const queriesWithIndices = createBasicQueriesBySource(standardFields, basicSearch, selectedSources, availableSources)
-                                                    searchQuery(queriesWithIndices).then(result => {
-                                                        // sessionStorage.setItem("searchResults", JSON.stringify(result))
-                                                        setSearchResults(result)
-                                                        setSelectedTabNumber(1)
-                                                        setIsLoading(false)
-                                                    })
-                                                }}
-                                            >Search</EuiButton>
-                                        </EuiFlexItem>
-                                    </EuiFlexGroup>
-                                    {
-                                        isLoading &&
-                                        <EuiFlexGroup>
-                                            <EuiFlexItem>
-                                                <EuiProgress postion="fixed" size="l" color="accent" />
-                                            </EuiFlexItem>
-                                        </EuiFlexGroup>
-                                    }
-                                </EuiFlexItem>
-                            </EuiFlexGroup>
-                        </>
-                    }
-                </>
-            ),
-        },
-        {
-            id: 'tab3',
-            name: 'Results',
-            content: (
-                <EuiFlexGroup>
+          ) : (
+            <>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiSpacer size="s" />
+                  <EuiButtonEmpty
+                    onClick={() => {
+                      setAdvancedSearch(!advancedSearch);
+                    }}
+                  >
+                    Switch to advanced search
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiSpacer size="s" />
+                  <EuiFlexGroup>
                     <EuiFlexItem>
-                        {Results(searchResults, search, basicSearch)}
+                      <EuiFieldSearch
+                        value={basicSearch}
+                        onChange={(e) => setBasicSearch(e.target.value)}
+                        placeholder="Search..."
+                        fullWidth
+                      />
                     </EuiFlexItem>
-                </EuiFlexGroup>
-            ),
-        },
-        {
-            id: 'tab2',
-            name: 'Map',
-            content: (
-                <EuiFlexGroup>
-                    <EuiFlexItem>
-                        <EuiSpacer size="l" />
-                        {/*<a href="https://agroenvgeo.data.inra.fr/mapfishapp/"><img src={map} width="460" height="400" alt='Map' /></a>*/}
-                        <SearchMap searchResults={searchResults} />
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        fill
+                        isDisabled={advancedSearch}
+                        onClick={() => {
+                          setIsLoading(true);
+                          const queriesWithIndices = createBasicQueriesBySource(
+                            standardFields,
+                            basicSearch,
+                            selectedSources,
+                            availableSources
+                          );
+                          searchQuery(queriesWithIndices).then((result) => {
+                            // sessionStorage.setItem("searchResults", JSON.stringify(result))
+                            setSearchResults(result);
+                            setSelectedTabNumber(1);
+                            setIsLoading(false);
+                          });
+                        }}
+                      >
+                        Search
+                      </EuiButton>
                     </EuiFlexItem>
-                </EuiFlexGroup>
-            ),
-        },
-    ]
-
-    return (
-        <>
-            <EuiPageContent> {/*style={{ backgroundColor: "#fafafa" }}*/}
-                <EuiPageContentHeader>
-                    <EuiPageContentHeaderSection>
-                        <EuiTitle>
-                            <h2>In-Sylva Metadata Search Platform</h2>
-                        </EuiTitle>
-                    </EuiPageContentHeaderSection>
-                </EuiPageContentHeader>
-                <EuiPageContentBody>
-                    <EuiForm>
-                        <EuiTabbedContent
-                            tabs={tabsContent}
-                            selectedTab={tabsContent[selectedTabNumber]}
-                            onTabClick={tab => {
-                                setSelectedTabNumber(tabsContent.indexOf(tab))
-                            }}
-                        />
-                    </EuiForm>
-                </EuiPageContentBody>
-            </EuiPageContent>
+                  </EuiFlexGroup>
+                  {isLoading && (
+                    <EuiFlexGroup>
+                      <EuiFlexItem>
+                        <EuiProgress postion="fixed" size="l" color="accent" />
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  )}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          )}
         </>
-    )
-}
-
-export default Search
\ No newline at end of file
+      ),
+    },
+    {
+      id: 'tab3',
+      name: 'Results',
+      content: (
+        <EuiFlexGroup>
+          <EuiFlexItem>{Results(searchResults, search, basicSearch)}</EuiFlexItem>
+        </EuiFlexGroup>
+      ),
+    },
+    {
+      id: 'tab2',
+      name: 'Map',
+      content: (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiSpacer size="l" />
+            {/*<a href="https://agroenvgeo.data.inra.fr/mapfishapp/"><img src={map} width="460" height="400" alt='Map' /></a>*/}
+            <SearchMap searchResults={searchResults} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <EuiPageContent>
+        {' '}
+        {/*style={{ backgroundColor: "#fafafa" }}*/}
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h2>In-Sylva Metadata Search Platform</h2>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>
+          <EuiForm>
+            <EuiTabbedContent
+              tabs={tabsContent}
+              selectedTab={tabsContent[selectedTabNumber]}
+              onTabClick={(tab) => {
+                setSelectedTabNumber(tabsContent.indexOf(tab));
+              }}
+            />
+          </EuiForm>
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </>
+  );
+};
+
+export default Search;
diff --git a/src/pages/search/package.json b/src/pages/search/package.json
index b960cc5d95cfa1ebefdc36f996fed20ecf55c5f1..04d217f1b6f4d411ac81f082ee6e4fc0edcd76c1 100644
--- a/src/pages/search/package.json
+++ b/src/pages/search/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "Search",
-    "version": "1.0.0",
-    "private": true,
-    "main": "Search.js"
-}
\ No newline at end of file
+  "name": "Search",
+  "version": "1.0.0",
+  "private": true,
+  "main": "Search.js"
+}
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
index 49b6d5d91fe9bb18d7eec02194a49b95e9c80043..ef407307c14e18ded5e35d71856838cce3f71388 100644
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -12,12 +12,12 @@
 
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
-  // [::1] is the IPv6 localhost address.
-  window.location.hostname === '[::1]' ||
-  // 127.0.0.1/8 is considered localhost for IPv4.
-  window.location.hostname.match(
-    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-  )
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
 );
 
 export function register(config) {
@@ -43,7 +43,7 @@ export function register(config) {
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-            'worker. To learn more, visit https://bit.ly/CRA-PWA'
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
           );
         });
       } else {
@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
               );
 
               // Execute callback
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -101,7 +101,7 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
@@ -109,7 +109,7 @@ function checkValidServiceWorker(swUrl, config) {
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -120,15 +120,13 @@ function checkValidServiceWorker(swUrl, config) {
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+      console.log('No internet connection found. App is running in offline mode.');
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/src/store/CustomConnector.js b/src/store/CustomConnector.js
index 02b65c7b6476ede877e404dc45c07cb2b8faa93e..28b24cab07c945dab23cac07aacc0c118f47d250 100644
--- a/src/store/CustomConnector.js
+++ b/src/store/CustomConnector.js
@@ -1,52 +1,53 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 
 export const CustomConnectorContext = React.createContext();
 
 export class CustomConnectorProvider extends Component {
-
-    render() {
-        return <CustomConnectorContext.Provider value={this.props.dataStore}>
-            {this.props.children}
-        </CustomConnectorContext.Provider>
-    }
+  render() {
+    return (
+      <CustomConnectorContext.Provider value={this.props.dataStore}>
+        {this.props.children}
+      </CustomConnectorContext.Provider>
+    );
+  }
 }
 
 export class CustomConnector extends React.Component {
-    static contextType = CustomConnectorContext;
-
-    constructor(props, context) {
-        super(props, context);
-        this.state = this.selectData();
-        this.functionProps = Object.entries(this.props.dispatchers)
-            .map(([k, v]) => [k, (...args) => this.context.dispatch(v(...args))])
-            .reduce((result, [k, v]) => ({ ...result, [k]: v }), {})
-    }
-
-    render() {
-        return React.Children.map(this.props.children, c =>
-            React.cloneElement(c, { ...this.state, ...this.functionProps }))
-    }
-
-    selectData() {
-        let storeState = this.context.getState();
-        return Object.entries(this.props.selectors).map(([k, v]) =>
-            [k, v(storeState)])
-            .reduce((result, [k, v]) => ({ ...result, [k]: v }), {});
-    }
-
-    handleDataStoreChange() {
-        let newData = this.selectData();
-        Object.keys(this.props.selectors)
-            .filter(key => this.state[key] !== newData[key])
-            .forEach(key => this.setState({ [key]: newData[key] }));
-    }
-
-    componentDidMount() {
-        this.unsubscriber =
-            this.context.subscribe(() => this.handleDataStoreChange());
-    }
-
-    componentWillUnmount() {
-        this.unsubscriber();
-    }
+  static contextType = CustomConnectorContext;
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = this.selectData();
+    this.functionProps = Object.entries(this.props.dispatchers)
+      .map(([k, v]) => [k, (...args) => this.context.dispatch(v(...args))])
+      .reduce((result, [k, v]) => ({ ...result, [k]: v }), {});
+  }
+
+  render() {
+    return React.Children.map(this.props.children, (c) =>
+      React.cloneElement(c, { ...this.state, ...this.functionProps })
+    );
+  }
+
+  selectData() {
+    let storeState = this.context.getState();
+    return Object.entries(this.props.selectors)
+      .map(([k, v]) => [k, v(storeState)])
+      .reduce((result, [k, v]) => ({ ...result, [k]: v }), {});
+  }
+
+  handleDataStoreChange() {
+    let newData = this.selectData();
+    Object.keys(this.props.selectors)
+      .filter((key) => this.state[key] !== newData[key])
+      .forEach((key) => this.setState({ [key]: newData[key] }));
+  }
+
+  componentDidMount() {
+    this.unsubscriber = this.context.subscribe(() => this.handleDataStoreChange());
+  }
+
+  componentWillUnmount() {
+    this.unsubscriber();
+  }
 }
diff --git a/src/store/asyncEnhancer.js b/src/store/asyncEnhancer.js
index 79668fd3f7e69f1c0c315eef59e364b4af7f414e..7f9e47e559c489ddd745c44186aed0eb0d2e8ca1 100644
--- a/src/store/asyncEnhancer.js
+++ b/src/store/asyncEnhancer.js
@@ -1,12 +1,16 @@
-export const asyncEnhancer = delay => createStoreFunction => (...args) => {
+export const asyncEnhancer =
+  (delay) =>
+  (createStoreFunction) =>
+  (...args) => {
     const store = createStoreFunction(...args);
     return {
-        ...store,
-        dispatchAsync: (action) => new Promise((resolve, reject) => {
-            setTimeout(() => {
-                store.dispatch(action);
-                resolve();
-            }, delay);
-        })
+      ...store,
+      dispatchAsync: (action) =>
+        new Promise((resolve, reject) => {
+          setTimeout(() => {
+            store.dispatch(action);
+            resolve();
+          }, delay);
+        }),
     };
-}
+  };
diff --git a/src/store/index.js b/src/store/index.js
index c71dd30316f5f39148f9bb25a26c0f259bfa6abf..2861ee8c188d22e1cde685304ef85503d916563a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react';
 import useStore from './useStore';
-import * as actions from "../actions";
+import * as actions from '../actions';
 
 const initialState = {
-    isLoading: false,
-    status: "INITIAL",
-    roles: [],
-    user: {},
-    userDetails: {},
-    error: false,
-    fields: [],
-    resources: []
-}
+  isLoading: false,
+  status: 'INITIAL',
+  roles: [],
+  user: {},
+  userDetails: {},
+  error: false,
+  fields: [],
+  resources: [],
+};
 const store = useStore(React, initialState, actions);
 export default store;
diff --git a/src/store/useStore.js b/src/store/useStore.js
index 84382e956b227f109d2f128e351436a9c06b6b9e..778e2fe8c58fe2da9d61d8a120f286ed35f3357a 100644
--- a/src/store/useStore.js
+++ b/src/store/useStore.js
@@ -1,62 +1,60 @@
-import { useSessionStorage } from '@in-sylva/react-use-storage'
+import { useSessionStorage } from '@in-sylva/react-use-storage';
 
 function setState(store, newState, afterUpdateCallback) {
-    store.state = { ...store.state, ...newState };
-    store.listeners.forEach((listener) => {
-        listener.run(store.state);
-    });
-    afterUpdateCallback && afterUpdateCallback();
+  store.state = { ...store.state, ...newState };
+  store.listeners.forEach((listener) => {
+    listener.run(store.state);
+  });
+  afterUpdateCallback && afterUpdateCallback();
 }
 
 function useCustom(store, React, mapState, mapActions) {
-    const [, originalHook] = useSessionStorage("in-sylva.search",Object.create(null));
-    const state = mapState ? mapState(store.state) : store.state;
-    const actions = React.useMemo(
-        () => (mapActions ? mapActions(store.actions) : store.actions),
-        [mapActions, store.actions]
-    );
+  const [, originalHook] = useSessionStorage('in-sylva.search', Object.create(null));
+  const state = mapState ? mapState(store.state) : store.state;
+  const actions = React.useMemo(
+    () => (mapActions ? mapActions(store.actions) : store.actions),
+    [mapActions, store.actions]
+  );
 
-    React.useEffect(() => {
-        const newListener = { oldState: {} };
-        newListener.run = mapState
-            ? newState => {
-                const mappedState = mapState(newState);
-                if (mappedState !== newListener.oldState) {
-                    newListener.oldState = mappedState;
-                    originalHook(mappedState);
-                }
-            }
-            : originalHook;
-        store.listeners.push(newListener);
-        newListener.run(store.state);
-        return () => {
-            store.listeners = store.listeners.filter(
-                listener => listener !== newListener
-            );
-        };
-    }, []); // eslint-disable-line
-    return [state, actions];
+  React.useEffect(() => {
+    const newListener = { oldState: {} };
+    newListener.run = mapState
+      ? (newState) => {
+          const mappedState = mapState(newState);
+          if (mappedState !== newListener.oldState) {
+            newListener.oldState = mappedState;
+            originalHook(mappedState);
+          }
+        }
+      : originalHook;
+    store.listeners.push(newListener);
+    newListener.run(store.state);
+    return () => {
+      store.listeners = store.listeners.filter((listener) => listener !== newListener);
+    };
+  }, []); // eslint-disable-line
+  return [state, actions];
 }
 
 function associateActions(store, actions) {
-    const associatedActions = {};
-    Object.keys(actions).forEach(key => {
-        if (typeof actions[key] === "function") {
-            associatedActions[key] = actions[key].bind(null, store);
-        }
-        if (typeof actions[key] === "object") {
-            associatedActions[key] = associateActions(store, actions[key]);
-        }
-    });
-    return associatedActions;
+  const associatedActions = {};
+  Object.keys(actions).forEach((key) => {
+    if (typeof actions[key] === 'function') {
+      associatedActions[key] = actions[key].bind(null, store);
+    }
+    if (typeof actions[key] === 'object') {
+      associatedActions[key] = associateActions(store, actions[key]);
+    }
+  });
+  return associatedActions;
 }
 
 const useStore = (React, initialState, actions, initializer) => {
-    const store = { state: initialState, listeners: [] };
-    store.setState = setState.bind(null, store);
-    store.actions = associateActions(store, actions);
-    if (initializer) initializer(store);
-    return useCustom.bind(null, store, React);
+  const store = { state: initialState, listeners: [] };
+  store.setState = setState.bind(null, store);
+  store.actions = associateActions(store, actions);
+  if (initializer) initializer(store);
+  return useCustom.bind(null, store, React);
 };
 
-export default useStore;
\ No newline at end of file
+export default useStore;