diff --git a/.eslintrc.js b/.eslintrc.js
index 3853d47..d5d36c3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,12 +2,9 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    es2022: true, 
+    es2022: true
   },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
+  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
@@ -20,10 +17,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/**/*.spec.{j,t}s?(x)'
-      ],
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/**/*.spec.{j,t}s?(x)'],
       env: {
         mocha: true
       }
diff --git a/.github/workflows/config.grenrc.js b/.github/workflows/config.grenrc.js
index e9b0b1b..6ffbed8 100644
--- a/.github/workflows/config.grenrc.js
+++ b/.github/workflows/config.grenrc.js
@@ -1,17 +1,14 @@
 module.exports = {
   dataSource: 'milestones',
-  ignoreIssuesWith: [
-    'wontfix',
-    'duplicate'
-  ],
+  ignoreIssuesWith: ['wontfix', 'duplicate'],
   milestoneMatch: 'v{{tag_name}}',
   template: {
     issue: '- {{name}} [{{text}}]({{url}})',
-    changelogTitle: "",
-    release: "{{body}}",
+    changelogTitle: '',
+    release: '{{body}}'
   },
   groupBy: {
-    'Enhancements': ["enhancement", "internal"],
-    'Bug fixes': ["bug"]
+    Enhancements: ['enhancement', 'internal'],
+    'Bug fixes': ['bug']
   }
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 99765c6..3a20e2c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -3,43 +3,43 @@ on:
   workflow_dispatch:
   push:
     tags:
-    - '*'
+      - '*'
 
 jobs:
   deploy:
     name: Create release
-    runs-on: ubuntu-latest    
+    runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: 16.x
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
 
-    - name: Update npm
-      run: npm install -g npm@8
+      - name: Update npm
+        run: npm install -g npm@8
 
-    - name: npm install and build
-      run: |
-        npm install
-        npm run build
+      - name: npm install and build
+        run: |
+          npm install
+          npm run build
 
-    - name: Create archives
-      run: |
-        cd dist
-        zip -9 -r ../dist.zip . -x "js/*.map" -x "/*.map"
-        zip -9 -r  ../dist_map.zip .
+      - name: Create archives
+        run: |
+          cd dist
+          zip -9 -r ../dist.zip . -x "js/*.map" -x "/*.map"
+          zip -9 -r  ../dist_map.zip .
 
-    - name: Create Release Notes
-      run: |
-        npm install github-release-notes@0.16.0 -g
-        gren changelog --generate  --config="/.github/workflows/config.grenrc.js"
-      env:
-        GREN_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create Release Notes
+        run: |
+          npm install github-release-notes@0.16.0 -g
+          gren changelog --generate  --config="/.github/workflows/config.grenrc.js"
+        env:
+          GREN_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Create release
-      uses: ncipollo/release-action@v1
-      with:
-        artifacts: "dist.zip,dist_map.zip"
-        token: ${{ secrets.GITHUB_TOKEN }}
-        bodyFile: "CHANGELOG.md"
+      - name: Create release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: 'dist.zip,dist_map.zip'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          bodyFile: 'CHANGELOG.md'
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index db70d6d..fff4da9 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -3,35 +3,35 @@ on:
   workflow_dispatch:
   push:
     branches:
-    - 'master'
+      - 'master'
   pull_request:
     branches:
-    - 'master'
+      - 'master'
 
 jobs:
   test:
     name: Run tests
     runs-on: ubuntu-20.04
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: 16.x
-    - name: Install browsers
-      run: |
-        export DEBIAN_FRONTEND=noninteractive
-        sudo apt-get update
-        sudo apt-get install -y chromium-browser firefox
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - name: Install browsers
+        run: |
+          export DEBIAN_FRONTEND=noninteractive
+          sudo apt-get update
+          sudo apt-get install -y chromium-browser firefox
 
-    - name: Update npm
-      run: npm install -g npm@8
+      - name: Update npm
+        run: npm install -g npm@8
 
-    - name: Install the project
-      run: npm install
+      - name: Install the project
+        run: npm install
 
-    - name: Run lint
-      run: npm run lint -- --no-fix
+      - name: Run lint
+        run: npm run lint -- --no-fix
 
-    - name: Run karma tests
-      run: npm run test
+      - name: Run karma tests
+        run: npm run test
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..a998616
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}
diff --git a/README.md b/README.md
index 59a80a9..8945074 100644
--- a/README.md
+++ b/README.md
@@ -5,9 +5,10 @@
 # sqliteviz
 
 Sqliteviz is a single-page offline-first PWA for fully client-side visualisation
- of SQLite databases, CSV, JSON or NDJSON files.
+of SQLite databases, CSV, JSON or NDJSON files.
 
 With sqliteviz you can:
+
 - run SQL queries against a SQLite database and create [Plotly][11] charts and pivot tables based on the result sets
 - import a CSV/JSON/NDJSON file into a SQLite database and visualize imported data
 - export result set to CSV file
@@ -19,15 +20,19 @@ With sqliteviz you can:
 https://user-images.githubusercontent.com/24638357/128249848-f8fab0f5-9add-46e0-a9c1-dd5085a8623e.mp4
 
 ## Quickstart
+
 The latest release of sqliteviz is deployed on [sqliteviz.com/app][6].
 
 ## Wiki
+
 For user documentation, check out sqliteviz [documentation][7].
 
 ## Motivation
+
 It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
 
 ## Components
+
 It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. CSV parsing is performed with [Papa Parse][9].
 
 [1]: https://github.com/plotly/falcon
diff --git a/babel.config.js b/babel.config.js
index e955840..716b023 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }
diff --git a/index.html b/index.html
index e47af9d..4d2772a 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="favicon.png">
-    <link rel="manifest" href="manifest.webmanifest">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="favicon.png" />
+    <link rel="manifest" href="manifest.webmanifest" />
     <title>sqliteviz</title>
     <style>
       #sqliteviz-loading-wrapper {
@@ -16,7 +16,7 @@
         top: 0;
         background-color: white;
       }
-    
+
       #sqliteviz-loading-text {
         display: block;
         position: absolute;
@@ -27,7 +27,7 @@
         font-family: sans-serif;
         font-size: 20px;
       }
-      
+
       #sqliteviz-loading-wrapper svg {
         display: block;
         position: absolute;
@@ -38,15 +38,18 @@
 
       #sqliteviz-loading-wrapper circle {
         position: absolute;
-        left: 0; right: 0; top: 0; bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
         fill: none;
         stroke-width: 5px;
         stroke-linecap: round;
-        stroke: #119DFF;
+        stroke: #119dff;
       }
 
       #sqliteviz-loading-wrapper circle.bg {
-        stroke: #C8D4E3;
+        stroke: #c8d4e3;
       }
 
       #sqliteviz-loading-wrapper circle.front {
@@ -74,24 +77,17 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>
+        We're sorry but this app doesn't work properly without JavaScript
+        enabled. Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app">
       <div id="sqliteviz-loading-wrapper">
         <div id="sqliteviz-loading-text">LOADING</div>
         <svg height="170" width="170" viewBox="0 0 170 170">
-          <circle
-            class="bg"
-            cx="85"
-            cy="85"
-            r="80"
-          />
-          <circle
-            class="front"
-            cx="85"
-            cy="85"
-            r="80"
-          />
+          <circle class="bg" cx="85" cy="85" r="80" />
+          <circle class="front" cx="85" cy="85" r="80" />
         </svg>
       </div>
     </div>
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..2a1295a
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@*": ["./src/*"]
+    }
+  }
+}
diff --git a/karma.conf.cjs b/karma.conf.cjs
index 3a8b256..46c2676 100644
--- a/karma.conf.cjs
+++ b/karma.conf.cjs
@@ -4,7 +4,7 @@ module.exports = function (config) {
       config: {
         resolve: {
           alias: {
-            'vue': 'vue/dist/vue.esm-bundler.js'
+            vue: 'vue/dist/vue.esm-bundler.js'
           }
         },
         server: {
@@ -32,19 +32,19 @@ module.exports = function (config) {
         pattern: 'test.setup.js',
         type: 'module',
         watched: false,
-        served: false,
+        served: false
       },
       {
         pattern: 'tests/**/*.spec.js',
         type: 'module',
         watched: false,
-        served: false,
+        served: false
       },
       {
         pattern: 'src/assets/styles/*.css',
         type: 'css',
         watched: false,
-        served: false,
+        served: false
       }
     ],
 
diff --git a/lib/sql-js/README.md b/lib/sql-js/README.md
index d8a9893..43b1cbd 100644
--- a/lib/sql-js/README.md
+++ b/lib/sql-js/README.md
@@ -5,7 +5,7 @@ a custom version of [sql.js][1]. It allows sqliteviz to have more recent
 version of SQLite build with a number of useful extensions.
 
 `Makefile` from [sql.js][1] is rewritten as more comprehensible `configure.py`
- and `build.py` Python scripts that run in `emscripten/emsdk` Docker container.
+and `build.py` Python scripts that run in `emscripten/emsdk` Docker container.
 
 ## Extension
 
@@ -84,15 +84,15 @@ described in [this message from SQLite Forum][12]:
 > amalgamation code and the extensions would thereafter be automatically
 > initialized on each connection.
 
-[1]:  https://github.com/sql-js/sql.js
-[2]:  https://sqlite.org/amalgamation.html
-[3]:  https://sqlite.org/src/dir?ci=trunk&name=ext/misc
-[4]:  https://sqlite.org/fts5.html
-[5]:  https://github.com/jakethaw/pivot_vtab
-[6]:  https://sqlite.org/series.html
-[7]:  https://sqlite.org/src/file/ext/misc/series.c
-[8]:  https://sqlite.org/src/file/ext/misc/closure.c
-[9]:  https://sqlite.org/src/file/ext/misc/uuid.c
+[1]: https://github.com/sql-js/sql.js
+[2]: https://sqlite.org/amalgamation.html
+[3]: https://sqlite.org/src/dir?ci=trunk&name=ext/misc
+[4]: https://sqlite.org/fts5.html
+[5]: https://github.com/jakethaw/pivot_vtab
+[6]: https://sqlite.org/series.html
+[7]: https://sqlite.org/src/file/ext/misc/series.c
+[8]: https://sqlite.org/src/file/ext/misc/closure.c
+[9]: https://sqlite.org/src/file/ext/misc/uuid.c
 [10]: https://sqlite.org/src/file/ext/misc/regexp.c
 [11]: https://charlesleifer.com/blog/querying-tree-structures-in-sqlite-using-python-and-the-transitive-closure-extension/
 [12]: https://sqlite.org/forum/forumpost/6ad7d4f4bebe5e06?raw
diff --git a/lib/sql-js/benchmark/karma.conf.js b/lib/sql-js/benchmark/karma.conf.js
index 5ed5074..e7b1e24 100644
--- a/lib/sql-js/benchmark/karma.conf.js
+++ b/lib/sql-js/benchmark/karma.conf.js
@@ -1,12 +1,15 @@
 module.exports = function (config) {
   const timeout = 15 * 60 * 1000
   config.set({
-
     frameworks: ['mocha'],
 
     files: [
       'suite.js',
-      { pattern: 'node_modules/sql.js/dist/sql-wasm.wasm', served: true, included: false },
+      {
+        pattern: 'node_modules/sql.js/dist/sql-wasm.wasm',
+        served: true,
+        included: false
+      },
       { pattern: 'sample.csv', served: true, included: false }
     ],
 
@@ -15,7 +18,10 @@ module.exports = function (config) {
     singleRun: true,
 
     customLaunchers: {
-      ChromiumHeadlessNoSandbox: { base: 'ChromiumHeadless', flags: ['--no-sandbox'] }
+      ChromiumHeadlessNoSandbox: {
+        base: 'ChromiumHeadless',
+        flags: ['--no-sandbox']
+      }
     },
     browsers: ['ChromiumHeadlessNoSandbox', 'FirefoxHeadless'],
     concurrency: 1,
@@ -33,11 +39,11 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     browserConsoleLogOptions: { terminal: true, level: config.LOG_INFO },
 
-    preprocessors: { 'suite.js': [ 'webpack' ] },
+    preprocessors: { 'suite.js': ['webpack'] },
     webpack: {
       mode: 'development',
       module: {
-        noParse: [ __dirname + '/node_modules/benchmark/benchmark.js' ]
+        noParse: [__dirname + '/node_modules/benchmark/benchmark.js']
       },
       node: { fs: 'empty' }
     },
@@ -47,6 +53,5 @@ module.exports = function (config) {
     },
 
     jsonToFileReporter: { outputPath: '.', fileName: 'suite-result.json' }
-
   })
 }
diff --git a/lib/sql-js/benchmark/package.json b/lib/sql-js/benchmark/package.json
index 271c3ed..5263b34 100644
--- a/lib/sql-js/benchmark/package.json
+++ b/lib/sql-js/benchmark/package.json
@@ -2,7 +2,7 @@
   "name": "sqlite-webassembly-microbenchmark",
   "private": true,
   "dependencies": {
-    "@babel/core" : "^7.14.8",
+    "@babel/core": "^7.14.8",
     "babel-loader": "^8.2.2",
     "benchmark": "^2.1.4",
     "lodash": "^4.17.4",
@@ -11,7 +11,7 @@
     "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^2.1.1",
-    "karma-json-to-file-reporter" : "^1.0.1",
+    "karma-json-to-file-reporter": "^1.0.1",
     "karma-mocha": "^2.0.1",
     "karma-webpack": "^4.0.2",
     "webpack": "^4.46.0",
diff --git a/lib/sql-js/benchmark/suite.js b/lib/sql-js/benchmark/suite.js
index cf7e30d..f35c8fc 100644
--- a/lib/sql-js/benchmark/suite.js
+++ b/lib/sql-js/benchmark/suite.js
@@ -4,7 +4,6 @@ import lodash from 'lodash'
 import Papa from 'papaparse'
 import useragent from 'ua-parser-js'
 
-
 describe('SQLite build benchmark', function () {
   let parsedCsv
   let sqlModule
@@ -18,7 +17,7 @@ describe('SQLite build benchmark', function () {
     importToTable(selectDb, parsedCsv)
   })
 
-  function benchmarkImport () {
+  function benchmarkImport() {
     const db = new sqlModule.Database()
     try {
       importToTable(db, parsedCsv)
@@ -27,7 +26,7 @@ describe('SQLite build benchmark', function () {
     }
   }
 
-  function benchmarkSelect () {
+  function benchmarkSelect() {
     const result = selectDb.exec(`
       SELECT county, AVG(avg_depth) avg_depth_c
       FROM (
@@ -50,11 +49,9 @@ describe('SQLite build benchmark', function () {
     suite.add('select', { initCount: 3, minSamples: 50, fn: benchmarkSelect })
     await run(suite)
   })
-
 })
 
-
-function importToTable (db, parsedCsv, chunkSize = 1024) {
+function importToTable(db, parsedCsv, chunkSize = 1024) {
   const columnListString = parsedCsv.meta.fields.join(', ')
   db.exec(`CREATE TABLE csv_import(${columnListString})`)
 
@@ -67,7 +64,6 @@ function importToTable (db, parsedCsv, chunkSize = 1024) {
   })
 }
 
-
 class PromiseWrapper {
   constructor() {
     this.promise = new Promise((resolve, reject) => {
@@ -89,11 +85,11 @@ function parseCsv(url) {
   })
 }
 
-function chunkArray (arr, size) {
+function chunkArray(arr, size) {
   return arr.reduce(function (result, value, index) {
     const chunkIndex = Math.floor(index / size)
 
-    if(!(chunkIndex in result)) {
+    if (!(chunkIndex in result)) {
       result[chunkIndex] = []
     }
     result[chunkIndex].push(value)
@@ -102,8 +98,7 @@ function chunkArray (arr, size) {
   }, [])
 }
 
-
-function createSuite () {
+function createSuite() {
   // Combined workaround from:
   // - https://github.com/bestiejs/benchmark.js/issues/106
   // - https://github.com/bestiejs/benchmark.js/issues/237
@@ -117,24 +112,26 @@ function createSuite () {
   return new bm.Suite()
 }
 
-function run (suite) {
+function run(suite) {
   const suiteResult = new PromiseWrapper()
   suite
     .on('cycle', function (event) {
       console.info(String(event.target))
     })
     .on('complete', function () {
-      console.log(JSON.stringify({
-        browser: useragent(navigator.userAgent).browser,
-        result: this.filter('successful')
-      }))
+      console.log(
+        JSON.stringify({
+          browser: useragent(navigator.userAgent).browser,
+          result: this.filter('successful')
+        })
+      )
       suiteResult.resolve()
     })
     .on('error', function (event) {
       console.error('Benchmark failed', String(event.target))
       suiteResult.reject()
     })
-    .run({async: true})
+    .run({ async: true })
 
   return suiteResult.promise
 }
diff --git a/package-lock.json b/package-lock.json
index 6be68fe..08ceafc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "chai": "^4.1.2",
         "chai-as-promised": "^8.0.1",
         "eslint": "^8.57.1",
+        "eslint-config-prettier": "^10.1.1",
         "eslint-plugin-import": "^2.20.2",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^4.2.1",
@@ -56,6 +57,7 @@
         "karma-spec-reporter": "^0.0.36",
         "karma-vite": "^1.0.5",
         "mocha": "^5.2.0",
+        "prettier": "3.5.3",
         "process": "^0.11.10",
         "url-loader": "^4.1.1",
         "vite": "^5.4.14",
@@ -3421,6 +3423,22 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/@vue/component-compiler-utils/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@vue/component-compiler-utils/node_modules/yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
@@ -7967,6 +7985,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz",
+      "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-custom-alias": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-custom-alias/-/eslint-import-resolver-custom-alias-1.3.2.tgz",
@@ -14788,16 +14818,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
-      "optional": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -20029,6 +20058,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vue-cli-plugin-ui-karma/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/vue-cli-plugin-ui-karma/node_modules/read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
diff --git a/package.json b/package.json
index 74c0983..a4953d4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "build": "vite build",
     "serve": "vite preview",
     "test": "karma start karma.conf.cjs",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "format": "prettier .  --write"
   },
   "dependencies": {
     "buffer": "^6.0.3",
@@ -45,6 +46,7 @@
     "chai": "^4.1.2",
     "chai-as-promised": "^8.0.1",
     "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
@@ -59,6 +61,7 @@
     "karma-spec-reporter": "^0.0.36",
     "karma-vite": "^1.0.5",
     "mocha": "^5.2.0",
+    "prettier": "3.5.3",
     "process": "^0.11.10",
     "url-loader": "^4.1.1",
     "vite": "^5.4.14",
diff --git a/public/inquiries.json b/public/inquiries.json
index 0637a08..fe51488 100644
--- a/public/inquiries.json
+++ b/public/inquiries.json
@@ -1 +1 @@
-[]
\ No newline at end of file
+[]
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index e4d533a..f5cc77b 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -27,4 +27,4 @@
   "name": "sqliteviz",
   "short_name": "sqliteviz",
   "start_url": "index.html"
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 144b2e7..849e338 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <router-view/>
-    <modals-container/>
+    <router-view />
+    <modals-container />
   </div>
 </template>
 
@@ -11,18 +11,18 @@ import { ModalsContainer } from 'vue-final-modal'
 
 export default {
   components: { ModalsContainer },
-  created () {
+  created() {
     this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
   },
   computed: {
-    inquiries () {
+    inquiries() {
       return this.$store.state.inquiries
     }
   },
   watch: {
     inquiries: {
       deep: true,
-      handler () {
+      handler() {
         storedInquiries.updateStorage(this.inquiries)
       }
     }
@@ -32,43 +32,43 @@ export default {
 
 <style>
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-Regular.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-Regular.woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-SemiBold.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-SemiBold.woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-Bold.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-Bold.woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-Italic.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-Italic.woff2');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-SemiBoldItalic.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-SemiBoldItalic.woff2');
   font-weight: 600;
   font-style: italic;
 }
 
 @font-face {
-  font-family: "Open Sans";
-  src: url("@/assets/fonts/OpenSans-BoldItalic.woff2");
+  font-family: 'Open Sans';
+  src: url('@/assets/fonts/OpenSans-BoldItalic.woff2');
   font-weight: 700;
   font-style: italic;
 }
@@ -80,7 +80,7 @@ label,
 button,
 .plotly_editor *,
 .CodeMirror pre.CodeMirror-line {
-  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 0647fa1..bd45855 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -59,5 +59,3 @@ button.secondary:disabled {
   text-shadow: none;
   cursor: default;
 }
-
-
diff --git a/src/assets/styles/messages.css b/src/assets/styles/messages.css
index 1b163c6..39b4f48 100644
--- a/src/assets/styles/messages.css
+++ b/src/assets/styles/messages.css
@@ -3,4 +3,4 @@
   color: var(--color-text-base);
   font-size: 13px;
   padding: 0 24px;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/multiselect.css b/src/assets/styles/multiselect.css
index db7861a..1a5ea82 100644
--- a/src/assets/styles/multiselect.css
+++ b/src/assets/styles/multiselect.css
@@ -123,7 +123,7 @@
   border-radius: var(--border-radius-medium-2);
 }
 
-.sqliteviz-select .multiselect__option  .no-results {
+.sqliteviz-select .multiselect__option .no-results {
   color: var(--color-text-light-2);
 }
 
@@ -133,4 +133,4 @@
 
 .sqliteviz-select.multiselect--disabled .multiselect__select {
   background: unset;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/scrollbars.css b/src/assets/styles/scrollbars.css
index 858d85f..8891e34 100644
--- a/src/assets/styles/scrollbars.css
+++ b/src/assets/styles/scrollbars.css
@@ -3,13 +3,13 @@
   width: 5px;
   height: 5px;
 }
-  
+
 /* Track */
 ::-webkit-scrollbar-track {
-  background: transparent; 
+  background: transparent;
   border-radius: 5px;
 }
-   
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: var(--color-accent);
diff --git a/src/assets/styles/tables.css b/src/assets/styles/tables.css
index aeca52a..af6d744 100644
--- a/src/assets/styles/tables.css
+++ b/src/assets/styles/tables.css
@@ -37,7 +37,7 @@
   height: calc(100% - 27px);
 }
 
-@supports (-moz-appearance:none) {
+@supports (-moz-appearance: none) {
   .header-container {
     top: 0;
     padding-left: 6px;
@@ -59,7 +59,8 @@ table.sqliteviz-table {
   margin-top: -35px;
   border-collapse: collapse;
 }
-.sqliteviz-table thead th, .fixed-header {
+.sqliteviz-table thead th,
+.fixed-header {
   font-size: 14px;
   font-weight: 600;
   box-sizing: border-box;
@@ -71,7 +72,7 @@ table.sqliteviz-table {
 }
 .sqliteviz-table tbody td {
   font-size: 13px;
-  background-color:white;
+  background-color: white;
   color: var(--color-text-base);
   box-sizing: border-box;
   border-bottom: 1px solid var(--color-border-light);
@@ -108,8 +109,8 @@ table.sqliteviz-table {
   color: var(--color-text-base);
 }
 
-.sqliteviz-table tbody td[data-isNull="true"],
-.sqliteviz-table tbody td[data-isBlob="true"] {
+.sqliteviz-table tbody td[data-isNull='true'],
+.sqliteviz-table tbody td[data-isBlob='true'] {
   color: var(--color-text-light-2);
   font-style: italic;
 }
diff --git a/src/assets/styles/tooltips.css b/src/assets/styles/tooltips.css
index 6a068d7..92420ed 100644
--- a/src/assets/styles/tooltips.css
+++ b/src/assets/styles/tooltips.css
@@ -4,10 +4,10 @@
   text-align: center;
   font-size: 12px;
   padding: 0 6px;
-  line-height: 19px;;
+  line-height: 19px;
   position: fixed;
   height: 19px;
   border-radius: var(--border-radius-medium);
   white-space: nowrap;
   z-index: 999;
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
index 91abd09..baf209c 100644
--- a/src/assets/styles/variables.css
+++ b/src/assets/styles/variables.css
@@ -1,21 +1,19 @@
 :root {
   --color-white: #ffffff;
-  --color-gray-light: #F3F6FA;
-  --color-gray-light-2: #DFE8F3;
-  --color-gray-light-3: #C8D4E3;
-  --color-gray-light-4:#EBF0F8;
-  --color-gray-light-5:#f8f8f9;
-  --color-gray-medium: #A2B1C6;
+  --color-gray-light: #f3f6fa;
+  --color-gray-light-2: #dfe8f3;
+  --color-gray-light-3: #c8d4e3;
+  --color-gray-light-4: #ebf0f8;
+  --color-gray-light-5: #f8f8f9;
+  --color-gray-medium: #a2b1c6;
   --color-gray-dark: #506784;
-  --color-blue-medium: #119DFF;
-  --color-blue-dark: #0D76BF;
-  --color-blue-dark-2: #2A3F5F;
-  --color-red: #EF553B;
-  --color-red-2: #DE350B;
-  --color-red-light: #FFBDAD;
-  --color-yellow: #FBEFCB;
-
-
+  --color-blue-medium: #119dff;
+  --color-blue-dark: #0d76bf;
+  --color-blue-dark-2: #2a3f5f;
+  --color-red: #ef553b;
+  --color-red-2: #de350b;
+  --color-red-light: #ffbdad;
+  --color-yellow: #fbefcb;
 
   --color-bg-light: var(--color-gray-light);
   --color-bg-light-2: var(--color-gray-light-2);
@@ -48,6 +46,3 @@
 .plotly-editor--theme-provider {
   --sidebar-width: 112px;
 }
-
-
-
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
index 15fd970..cd0cc4e 100644
--- a/src/components/CheckBox.vue
+++ b/src/components/CheckBox.vue
@@ -1,6 +1,10 @@
 <template>
   <div
-    :class="['checkbox-container', { 'checked': checked }, {'disabled': disabled}]"
+    :class="[
+      'checkbox-container',
+      { checked: checked },
+      { disabled: disabled }
+    ]"
     @click.stop="onClick"
   >
     <div v-show="!checked" class="unchecked" />
@@ -31,7 +35,7 @@ export default {
       type: String,
       required: false,
       default: 'accent',
-      validator: (value) => {
+      validator: value => {
         return ['accent', 'light'].includes(value)
       }
     },
@@ -52,13 +56,13 @@ export default {
     }
   },
   emits: ['click'],
-  data () {
+  data() {
     return {
       checked: this.init
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       if (!this.disabled) {
         this.checked = !this.checked
         this.$emit('click', this.checked)
@@ -86,7 +90,7 @@ export default {
 }
 
 img {
-    display: block;
+  display: block;
 }
 .label {
   margin-left: 6px;
@@ -106,6 +110,6 @@ img {
 
 .disabled .unchecked,
 .disabled .unchecked:hover {
-  background-color:  var(--color-bg-light-2);
+  background-color: var(--color-bg-light-2);
 }
 </style>
diff --git a/src/components/CsvJsonImport/DelimiterSelector/index.vue b/src/components/CsvJsonImport/DelimiterSelector/index.vue
index 41ea611..84db0f6 100644
--- a/src/components/CsvJsonImport/DelimiterSelector/index.vue
+++ b/src/components/CsvJsonImport/DelimiterSelector/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'disabled': disabled }">
+  <div :class="{ disabled: disabled }">
     <div class="text-field-label">Delimiter</div>
     <div
       class="delimiter-selector-container"
@@ -8,7 +8,7 @@
     >
       <div class="value">
         <input
-          :class="{ 'filled': filled }"
+          :class="{ filled: filled }"
           ref="delimiterInput"
           type="text"
           maxlength="1"
@@ -19,7 +19,7 @@
         <div class="name">{{ getSymbolName(modelValue) }}</div>
       </div>
       <div class="controls" @click.stop>
-        <clear-icon @click="clear" :disabled="disabled"/>
+        <clear-icon @click="clear" :disabled="disabled" />
         <drop-down-chevron
           :disabled="disabled"
           @click="!disabled && (showOptions = !showOptions)"
@@ -33,7 +33,8 @@
         @click="chooseOption(option)"
         class="option"
       >
-        <pre>{{option}}</pre><div>{{ getSymbolName(option) }}</div>
+        <pre>{{ option }}</pre>
+        <div>{{ getSymbolName(option) }}</div>
       </div>
     </div>
   </div>
@@ -49,7 +50,7 @@ export default {
   props: ['modelValue', 'width', 'disabled'],
   emits: ['update:modelValue'],
   components: { DropDownChevron, ClearIcon },
-  data () {
+  data() {
     return {
       showOptions: false,
       options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
@@ -58,7 +59,7 @@ export default {
     }
   },
   watch: {
-    inputValue () {
+    inputValue() {
       if (this.inputValue) {
         this.filled = true
         if (this.inputValue !== this.modelValue) {
@@ -69,25 +70,25 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     this.inputValue = this.modelValue
   },
   methods: {
-    getSymbolName (str) {
+    getSymbolName(str) {
       if (!str) {
         return ''
       }
       return ascii[str.charCodeAt(0).toString()].name
     },
-    chooseOption (option) {
+    chooseOption(option) {
       this.inputValue = option
       this.showOptions = false
     },
-    onContainerClick (event) {
+    onContainerClick(event) {
       this.$refs.delimiterInput.focus()
     },
 
-    clear () {
+    clear() {
       if (!this.disabled) {
         this.inputValue = ''
         this.$refs.delimiterInput.focus()
diff --git a/src/components/CsvJsonImport/index.vue b/src/components/CsvJsonImport/index.vue
index 1c70412..d92d464 100644
--- a/src/components/CsvJsonImport/index.vue
+++ b/src/components/CsvJsonImport/index.vue
@@ -8,7 +8,7 @@
   >
     <div class="dialog-header">
       {{ typeName }} import
-      <close-icon @click="cancelImport" :disabled="disableDialog"/>
+      <close-icon @click="cancelImport" :disabled="disableDialog" />
     </div>
     <div class="dialog-body">
       <text-field
@@ -66,10 +66,7 @@
         class="preview-table"
       />
       <div v-else class="no-data">No data</div>
-      <logs
-        class="import-errors"
-        :messages="importMessages"
-      />
+      <logs class="import-errors" :messages="importMessages" />
     </div>
     <div class="dialog-buttons-container">
       <button
@@ -130,7 +127,7 @@ export default {
     dialogName: String
   },
   emits: ['cancel', 'finish'],
-  data () {
+  data() {
     return {
       disableDialog: false,
       disableImport: false,
@@ -147,24 +144,24 @@ export default {
     }
   },
   computed: {
-    isJson () {
+    isJson() {
       return fIo.isJSON(this.file)
     },
-    isNdJson () {
+    isNdJson() {
       return fIo.isNDJSON(this.file)
     },
-    typeName () {
+    typeName() {
       return this.isJson || this.isNdJson ? 'JSON' : 'CSV'
     }
   },
   watch: {
-    isJson () {
+    isJson() {
       if (this.isJson) {
         this.delimiter = '\u001E'
         this.header = false
       }
     },
-    isNdJson () {
+    isNdJson() {
       if (this.isNdJson) {
         this.delimiter = '\u001E'
         this.header = false
@@ -175,18 +172,17 @@ export default {
       if (!this.tableName) {
         return
       }
-      this.db.validateTableName(this.tableName)
-        .catch(err => {
-          this.tableNameError = err.message + '. Try another table name.'
-        })
+      this.db.validateTableName(this.tableName).catch(err => {
+        this.tableNameError = err.message + '. Try another table name.'
+      })
     }, 400)
   },
   methods: {
-    changeHeaderDisplaying (e) {
+    changeHeaderDisplaying(e) {
       this.header = e
       this.preview()
     },
-    cancelImport () {
+    cancelImport() {
       if (!this.disableDialog) {
         if (this.addedTable) {
           this.db.execute(`DROP TABLE "${this.addedTable}"`)
@@ -196,7 +192,7 @@ export default {
         this.$emit('cancel')
       }
     },
-    reset () {
+    reset() {
       this.header = !this.isJson && !this.isNdJson
       this.quoteChar = '"'
       this.escapeChar = '"'
@@ -210,11 +206,11 @@ export default {
       this.addedTable = null
       this.tableNameError = ''
     },
-    open () {
+    open() {
       this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
       this.$modal.show(this.dialogName)
     },
-    async preview () {
+    async preview() {
       this.disableImport = false
       if (!this.file) {
         return
@@ -257,13 +253,15 @@ export default {
         }
       } catch (err) {
         console.error(err)
-        this.importMessages = [{
-          message: err,
-          type: 'error'
-        }]
+        this.importMessages = [
+          {
+            message: err,
+            type: 'error'
+          }
+        ]
       }
     },
-    async getJsonParseResult (file) {
+    async getJsonParseResult(file) {
       const jsonContent = await fIo.getFileContent(file)
       const isEmpty = !jsonContent.trim()
       return {
@@ -273,10 +271,10 @@ export default {
         },
         hasErrors: false,
         messages: [],
-        rowCount: +(!isEmpty)
+        rowCount: +!isEmpty
       }
     },
-    async loadToDb (file) {
+    async loadToDb(file) {
       if (!this.tableName) {
         this.tableNameError = "Table name can't be empty"
         return
@@ -297,7 +295,9 @@ export default {
       })
       // Get *reactive* link to parsing message for later updates
       parsingMsg = this.importMessages[this.importMessages.length - 1]
-      const parsingLoadingIndicator = setTimeout(() => { parsingMsg.type = 'loading' }, 1000)
+      const parsingLoadingIndicator = setTimeout(() => {
+        parsingMsg.type = 'loading'
+      }, 1000)
 
       let importMsg = {}
       let importLoadingIndicator = null
@@ -321,7 +321,9 @@ export default {
           parsingMsg.type = 'success'
 
           if (parseResult.messages.length > 0) {
-            this.importMessages = this.importMessages.concat(parseResult.messages)
+            this.importMessages = this.importMessages.concat(
+              parseResult.messages
+            )
             parsingMsg.message = `${rowCount} rows are parsed in ${period}.`
           } else {
             // Inform about parsing success
@@ -345,14 +347,19 @@ export default {
 
           // Add table
           start = new Date()
-          await this.db.addTableFromCsv(this.tableName, parseResult.data, progressCounterId)
+          await this.db.addTableFromCsv(
+            this.tableName,
+            parseResult.data,
+            progressCounterId
+          )
           end = new Date()
 
           this.addedTable = this.tableName
           // Inform about import success
           period = time.getPeriod(start, end)
-          importMsg.message = `Importing ${this.typeName} ` +
-          `into a SQLite database is completed in ${period}.`
+          importMsg.message =
+            `Importing ${this.typeName} ` +
+            `into a SQLite database is completed in ${period}.`
           importMsg.type = 'success'
 
           // Loading indicator for import is not needed anymore
@@ -385,7 +392,7 @@ export default {
       this.db.deleteProgressCounter(progressCounterId)
       this.disableDialog = false
     },
-    async finish () {
+    async finish() {
       this.$modal.hide(this.dialogName)
       const stmt = this.getQueryExample()
       const tabId = await this.$store.dispatch('addTab', { query: stmt })
@@ -394,20 +401,20 @@ export default {
       this.$emit('finish')
       events.send('inquiry.create', null, { auto: true })
     },
-    getQueryExample () {
+    getQueryExample() {
       return this.isNdJson
         ? this.getNdJsonQueryExample()
         : this.isJson
           ? this.getJsonQueryExample()
           : [
               '/*',
-        ` * Your CSV file has been imported into ${this.addedTable} table.`,
-        ' * You can run this SQL query to make all CSV records available for charting.',
-        ' */',
-        `SELECT * FROM "${this.addedTable}"`
+              ` * Your CSV file has been imported into ${this.addedTable} table.`,
+              ' * You can run this SQL query to make all CSV records available for charting.',
+              ' */',
+              `SELECT * FROM "${this.addedTable}"`
             ].join('\n')
     },
-    getNdJsonQueryExample () {
+    getNdJsonQueryExample() {
       try {
         const firstRowJson = JSON.parse(this.previewData.values.doc[0])
         const firstKey = Object.keys(firstRowJson)[0]
@@ -415,7 +422,7 @@ export default {
           '/*',
           ` * Your NDJSON file has been imported into ${this.addedTable} table.`,
           ` * Run this SQL query to get values of property ${firstKey} ` +
-          'and make them available for charting.',
+            'and make them available for charting.',
           ' */',
           `SELECT doc->>'${firstKey}'`,
           `FROM "${this.addedTable}"`
@@ -431,7 +438,7 @@ export default {
         ].join('\n')
       }
     },
-    getJsonQueryExample () {
+    getJsonQueryExample() {
       try {
         const firstRowJson = JSON.parse(this.previewData.values.doc[0])
         const firstKey = Object.keys(firstRowJson)[0]
@@ -439,7 +446,7 @@ export default {
           '/*',
           ` * Your JSON file has been imported into ${this.addedTable} table.`,
           ` * Run this SQL query to get values of property ${firstKey} ` +
-          'and make them available for charting.',
+            'and make them available for charting.',
           ' */',
           'SELECT *',
           `FROM "${this.addedTable}"`,
@@ -475,7 +482,7 @@ export default {
 }
 
 #csv-json-table-name {
-margin-bottom: 24px;
+  margin-bottom: 24px;
 }
 
 .chars {
@@ -508,5 +515,4 @@ margin-bottom: 24px;
   justify-content: center;
   align-items: center;
 }
-
 </style>
diff --git a/src/components/DbUploader.vue b/src/components/DbUploader.vue
index 5e3b27d..45603b8 100644
--- a/src/components/DbUploader.vue
+++ b/src/components/DbUploader.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="db-uploader-container" :style="{ width }">
-    <change-db-icon v-if="type === 'small'" @click="browse"/>
+    <change-db-icon v-if="type === 'small'" @click="browse" />
     <div v-if="type === 'illustrated'" class="drop-area-container">
       <div
         class="drop-area"
         @dragover.prevent="state = 'dragover'"
-        @dragleave.prevent="state=''"
+        @dragleave.prevent="state = ''"
         @drop.prevent="drop"
         @click="browse"
       >
         <div class="text">
-          Drop the database, CSV, JSON or NDJSON file here
-          or click to choose a file from your computer.
+          Drop the database, CSV, JSON or NDJSON file here or click to choose a
+          file from your computer.
         </div>
       </div>
     </div>
@@ -19,16 +19,16 @@
       <img id="drop-file-top-img" src="~@/assets/images/top.svg" />
       <img
         id="left-arm-img"
-        :class="{'swing': state === 'dragover'}"
+        :class="{ swing: state === 'dragover' }"
         src="~@/assets/images/leftArm.svg"
       />
       <img
         id="file-img"
         ref="fileImg"
         :class="{
-          'swing': state === 'dragover',
-          'fly': state === 'dropping',
-          'hidden': state === 'dropped'
+          swing: state === 'dragover',
+          fly: state === 'dropping',
+          hidden: state === 'dropped'
         }"
         src="~@/assets/images/file.png"
       />
@@ -36,7 +36,7 @@
       <img id="body-img" src="~@/assets/images/body.svg" />
       <img
         id="right-arm-img"
-        :class="{'swing': state === 'dragover'}"
+        :class="{ swing: state === 'dragover' }"
         src="~@/assets/images/rightArm.svg"
       />
     </div>
@@ -68,7 +68,7 @@ export default {
       type: String,
       required: false,
       default: 'small',
-      validator: (value) => {
+      validator: value => {
         return ['illustrated', 'small'].includes(value)
       }
     },
@@ -83,7 +83,7 @@ export default {
     ChangeDbIcon,
     CsvJsonImport
   },
-  data () {
+  data() {
     return {
       state: '',
       animationPromise: Promise.resolve(),
@@ -91,9 +91,9 @@ export default {
       newDb: null
     }
   },
-  mounted () {
+  mounted() {
     if (this.type === 'illustrated') {
-      this.animationPromise = new Promise((resolve) => {
+      this.animationPromise = new Promise(resolve => {
         this.$refs.fileImg.addEventListener('animationend', event => {
           if (event.animationName.startsWith('fly')) {
             this.state = 'dropped'
@@ -104,26 +104,27 @@ export default {
     }
   },
   methods: {
-    cancelImport () {
+    cancelImport() {
       if (this.newDb) {
         this.newDb.shutDown()
         this.newDb = null
       }
     },
 
-    async finish () {
+    async finish() {
       this.$store.commit('setDb', this.newDb)
       if (this.$route.path !== '/workspace') {
         this.$router.push('/workspace')
       }
     },
 
-    loadDb (file) {
-      return Promise.all([this.newDb.loadDb(file), this.animationPromise])
-        .then(this.finish)
+    loadDb(file) {
+      return Promise.all([this.newDb.loadDb(file), this.animationPromise]).then(
+        this.finish
+      )
     },
 
-    async checkFile (file) {
+    async checkFile(file) {
       this.state = 'dropping'
       this.newDb = database.getNewDatabase()
 
@@ -140,16 +141,19 @@ export default {
         await this.$nextTick()
         const csvJsonImportModal = this.$refs.addCsvJson
         csvJsonImportModal.reset()
-        return Promise.all([csvJsonImportModal.preview(), this.animationPromise])
-          .then(csvJsonImportModal.open)
+        return Promise.all([
+          csvJsonImportModal.preview(),
+          this.animationPromise
+        ]).then(csvJsonImportModal.open)
       }
     },
-    browse () {
-      fIo.getFileFromUser('.db,.sqlite,.sqlite3,.csv,.json,.ndjson')
+    browse() {
+      fIo
+        .getFileFromUser('.db,.sqlite,.sqlite3,.csv,.json,.ndjson')
         .then(this.checkFile)
     },
 
-    drop (event) {
+    drop(event) {
       this.checkFile(event.dataTransfer.files[0])
     }
   }
@@ -243,11 +247,15 @@ export default {
   transform-origin: 0 56px;
 }
 #file-img.swing {
-   transform-origin: -74px 139px;
+  transform-origin: -74px 139px;
 }
 @keyframes swing {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(-7deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-7deg);
+  }
 }
 
 #file-img.fly {
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 3e28769..3cbb532 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -10,7 +10,12 @@
     <div v-show="loading" class="icon-in-progress">
       <loading-indicator />
     </div>
-    <span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+    <span
+      v-if="tooltip"
+      class="icon-tooltip"
+      :style="tooltipStyle"
+      ref="tooltip"
+    >
       {{ tooltip }}
     </span>
   </button>
@@ -27,7 +32,7 @@ export default {
   components: { LoadingIndicator },
   mixins: [tooltipMixin],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
@@ -59,8 +64,8 @@ export default {
   fill: var(--color-accent);
 }
 
-.icon-btn:disabled  .icon :deep(path),
-.icon-btn:disabled  .icon :deep(circle) {
+.icon-btn:disabled .icon :deep(path),
+.icon-btn:disabled .icon :deep(circle) {
   fill: var(--color-border);
 }
 
diff --git a/src/components/LoadingDialog.vue b/src/components/LoadingDialog.vue
index 725074c..f594aa4 100644
--- a/src/components/LoadingDialog.vue
+++ b/src/components/LoadingDialog.vue
@@ -3,20 +3,23 @@
     :modal-id="name"
     class="dialog"
     :clickToClose="false"
-    :contentTransition="{name: 'loading-dialog'}"
-    :overlayTransition="{name: 'loading-dialog'}"
+    :contentTransition="{ name: 'loading-dialog' }"
+    :overlayTransition="{ name: 'loading-dialog' }"
   >
     <div class="dialog-header">
       {{ title }}
-      <close-icon @click="$emit('cancel')" :disabled="loading"/>
+      <close-icon @click="$emit('cancel')" :disabled="loading" />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
-        <loading-indicator :size="30" class="state-icon"/>
+        <loading-indicator :size="30" class="state-icon" />
         {{ loadingMsg }}
       </div>
       <div v-else class="loading-dialog-body">
-        <img src="~@/assets/images/success.svg" class="success-icon state-icon" />
+        <img
+          src="~@/assets/images/success.svg"
+          class="success-icon state-icon"
+        />
         {{ successMsg }}
       </div>
     </div>
@@ -57,7 +60,7 @@ export default {
   },
   emits: ['cancel', 'action'],
   watch: {
-    loading () {
+    loading() {
       if (this.loading) {
         this.$modal.show(this.name)
       }
@@ -65,7 +68,7 @@ export default {
   },
   components: { LoadingIndicator, CloseIcon },
   methods: {
-    cancel () {
+    cancel() {
       this.$emit('cancel')
     }
   }
diff --git a/src/components/LoadingIndicator.vue b/src/components/LoadingIndicator.vue
index bdba0b0..2df8dd1 100644
--- a/src/components/LoadingIndicator.vue
+++ b/src/components/LoadingIndicator.vue
@@ -1,5 +1,10 @@
 <template>
-  <svg :class="animationClass" :height="size" :width="size" :viewBox="`0 0 ${size} ${size}`">
+  <svg
+    :class="animationClass"
+    :height="size"
+    :width="size"
+    :viewBox="`0 0 ${size} ${size}`"
+  >
     <circle
       class="loader-svg bg"
       :style="{ strokeWidth }"
@@ -9,7 +14,11 @@
     />
     <circle
       class="loader-svg front"
-      :style="{ strokeDasharray: circleProgress, strokeDashoffset: offset, strokeWidth }"
+      :style="{
+        strokeDasharray: circleProgress,
+        strokeDashoffset: offset,
+        strokeWidth
+      }"
       :cx="size / 2"
       :cy="size / 2"
       :r="radius"
@@ -33,22 +42,24 @@ export default {
   },
   emits: [],
   computed: {
-    circleProgress () {
+    circleProgress() {
       const circle = this.radius * 3.14 * 2
-      const dash = this.progress ? (circle * this.progress) / 100 : circle * 1 / 3
+      const dash = this.progress
+        ? (circle * this.progress) / 100
+        : (circle * 1) / 3
       const space = circle - dash
       return `${dash}px, ${space}px`
     },
-    animationClass () {
+    animationClass() {
       return this.progress === undefined ? 'loading' : 'progress'
     },
-    radius () {
+    radius() {
       return this.size / 2 - this.strokeWidth
     },
-    offset () {
-      return this.radius * 3.14 / 2
+    offset() {
+      return (this.radius * 3.14) / 2
     },
-    strokeWidth () {
+    strokeWidth() {
       return this.size / 10
     }
   }
@@ -58,7 +69,10 @@ export default {
 <style scoped>
 .loader-svg {
   position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   fill: none;
   stroke-linecap: round;
   stroke: var(--color-accent);
@@ -70,7 +84,7 @@ export default {
 
 .loading .loader-svg.front {
   will-change: transform;
-  animation: fill-animation-loading 1s cubic-bezier(1,1,1,1) 0s infinite;
+  animation: fill-animation-loading 1s cubic-bezier(1, 1, 1, 1) 0s infinite;
   transform-origin: center;
 }
 
@@ -97,10 +111,10 @@ export default {
 }
 
 .progress .loader-svg.bg {
-  animation: bg-animation 1.5s cubic-bezier(1,1,1,1) 0s infinite;
+  animation: bg-animation 1.5s cubic-bezier(1, 1, 1, 1) 0s infinite;
 }
 
-@keyframes bg-animation{
+@keyframes bg-animation {
   0% {
     r: 8;
   }
@@ -109,8 +123,7 @@ export default {
     r: 9;
   }
   100% {
-   r: 8;
+    r: 8;
   }
 }
-
 </style>
diff --git a/src/components/Logs.vue b/src/components/Logs.vue
index 83ae5a7..acde1b2 100644
--- a/src/components/Logs.vue
+++ b/src/components/Logs.vue
@@ -1,10 +1,17 @@
 <template>
   <div class="logs-container" ref="logsContainer">
     <div v-for="(msg, index) in messages" :key="index" class="msg">
-      <img v-if="msg.type === 'error'" src="~@/assets/images/error.svg">
-      <img v-if="msg.type === 'info'" src="~@/assets/images/info.svg" width="20px">
-      <img v-if="msg.type === 'success'" src="~@/assets/images/success.svg">
-      <loading-indicator v-if="msg.type === 'loading'" :progress="msg.progress" />
+      <img v-if="msg.type === 'error'" src="~@/assets/images/error.svg" />
+      <img
+        v-if="msg.type === 'info'"
+        src="~@/assets/images/info.svg"
+        width="20px"
+      />
+      <img v-if="msg.type === 'success'" src="~@/assets/images/success.svg" />
+      <loading-indicator
+        v-if="msg.type === 'loading'"
+        :progress="msg.progress"
+      />
       <span class="msg-text">{{ serializeMessage(msg) }}</span>
     </div>
   </div>
@@ -21,11 +28,11 @@ export default {
   watch: {
     'messages.length': 'scrollToBottom'
   },
-  mounted () {
+  mounted() {
     this.scrollToBottom()
   },
   methods: {
-    async scrollToBottom () {
+    async scrollToBottom() {
       const container = this.$refs.logsContainer
       if (container) {
         await this.$nextTick()
@@ -33,7 +40,7 @@ export default {
       }
     },
 
-    serializeMessage (msg) {
+    serializeMessage(msg) {
       let result = ''
       if (msg.row !== null && msg.row !== undefined) {
         if (msg.type === 'error') {
@@ -44,7 +51,7 @@ export default {
       }
 
       result += msg.message
-      if (!(/(\.|!|\?)$/.test(result))) {
+      if (!/(\.|!|\?)$/.test(result)) {
         result += '.'
       }
 
diff --git a/src/components/Splitpanes/index.vue b/src/components/Splitpanes/index.vue
index 0fb5983..856ab8c 100644
--- a/src/components/Splitpanes/index.vue
+++ b/src/components/Splitpanes/index.vue
@@ -7,7 +7,11 @@
       { 'splitpanes-dragging': dragging }
     ]"
   >
-    <div class="movable-splitter" ref="movableSplitter" :style="movableSplitterStyle" />
+    <div
+      class="movable-splitter"
+      ref="movableSplitter"
+      :style="movableSplitterStyle"
+    />
     <div
       class="splitpanes-pane"
       ref="left"
@@ -27,8 +31,11 @@
         :class="[
           'toggle-btns',
           {
-            'both': after.max === 100 && before.max === 100 &&
-              paneAfter.size > 0 && paneBefore.size > 0
+            both:
+              after.max === 100 &&
+              before.max === 100 &&
+              paneAfter.size > 0 &&
+              paneBefore.size > 0
           }
         ]"
       >
@@ -41,7 +48,7 @@
             class="direction-icon"
             src="~@/assets/images/chevron.svg"
             :style="directionBeforeIconStyle"
-          >
+          />
         </div>
         <div
           v-if="before.max === 100 && paneBefore.size > 0"
@@ -52,16 +59,12 @@
             class="direction-icon"
             src="~@/assets/images/chevron.svg"
             :style="directionAfterIconStyle"
-          >
+          />
         </div>
       </div>
     </div>
     <!-- splitter end -->
-    <div
-      class="splitpanes-pane"
-      ref="right"
-      :style="styles.after"
-    >
+    <div class="splitpanes-pane" ref="right" :style="styles.after">
       <slot name="right-pane" />
     </div>
   </div>
@@ -87,17 +90,18 @@ export default {
     }
   },
   emits: [],
-  data () {
+  data() {
     return {
       container: null,
       paneBefore: this.before,
       paneAfter: this.after,
-      beforeMinimising: !this.after.size || !this.before.size
-        ? this.default
-        : {
-            before: this.before.size,
-            after: this.after.size
-          },
+      beforeMinimising:
+        !this.after.size || !this.before.size
+          ? this.default
+          : {
+              before: this.before.size,
+              after: this.after.size
+            },
       dragging: false,
       movableSplitter: {
         top: 0,
@@ -107,19 +111,23 @@ export default {
     }
   },
   computed: {
-    styles () {
+    styles() {
       return {
-        before: { [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%` },
-        after: { [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%` }
+        before: {
+          [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%`
+        },
+        after: {
+          [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%`
+        }
       }
     },
-    movableSplitterStyle () {
+    movableSplitterStyle() {
       const style = { ...this.movableSplitter }
       style.top += '%'
       style.left += '%'
       return style
     },
-    directionBeforeIconStyle () {
+    directionBeforeIconStyle() {
       const expanded = this.paneBefore.size !== 0
       const translation = 'translate(-50%, -50%) '
       let rotation = ''
@@ -134,7 +142,7 @@ export default {
         transform: translation + rotation
       }
     },
-    directionAfterIconStyle () {
+    directionAfterIconStyle() {
       const expanded = this.paneAfter.size !== 0
       const translation = 'translate(-50%, -50%)'
       let rotation = ''
@@ -152,35 +160,43 @@ export default {
   },
 
   methods: {
-    bindEvents () {
+    bindEvents() {
       // Passive: false to prevent scrolling while touch dragging.
-      document.addEventListener('mousemove', this.onMouseMove, { passive: false })
+      document.addEventListener('mousemove', this.onMouseMove, {
+        passive: false
+      })
       document.addEventListener('mouseup', this.onMouseUp)
 
       if ('ontouchstart' in window) {
-        document.addEventListener('touchmove', this.onMouseMove, { passive: false })
+        document.addEventListener('touchmove', this.onMouseMove, {
+          passive: false
+        })
         document.addEventListener('touchend', this.onMouseUp)
       }
     },
 
-    unbindEvents () {
-      document.removeEventListener('mousemove', this.onMouseMove, { passive: false })
+    unbindEvents() {
+      document.removeEventListener('mousemove', this.onMouseMove, {
+        passive: false
+      })
       document.removeEventListener('mouseup', this.onMouseUp)
 
       if ('ontouchstart' in window) {
-        document.removeEventListener('touchmove', this.onMouseMove, { passive: false })
+        document.removeEventListener('touchmove', this.onMouseMove, {
+          passive: false
+        })
         document.removeEventListener('touchend', this.onMouseUp)
       }
     },
 
-    onMouseMove (event) {
+    onMouseMove(event) {
       event.preventDefault()
       this.dragging = true
       this.movableSplitter.visibility = 'visible'
       this.moveSplitter(event)
     },
 
-    onMouseUp () {
+    onMouseUp() {
       if (this.dragging) {
         const dragPercentage = this.horizontal
           ? this.movableSplitter.top
@@ -201,7 +217,7 @@ export default {
       this.unbindEvents()
     },
 
-    moveSplitter (event) {
+    moveSplitter(event) {
       const splitterInfo = {
         container: this.container,
         paneBeforeMax: this.paneBefore.max,
@@ -213,12 +229,13 @@ export default {
       this.movableSplitter[dir] = offset
     },
 
-    togglePane (pane) {
+    togglePane(pane) {
       if (pane.size > 0) {
         this.beforeMinimising.before = this.paneBefore.size
         this.beforeMinimising.after = this.paneAfter.size
         pane.size = 0
-        const otherPane = pane === this.paneBefore ? this.paneAfter : this.paneBefore
+        const otherPane =
+          pane === this.paneBefore ? this.paneAfter : this.paneBefore
         otherPane.size = 100 - pane.size
       } else {
         this.paneBefore.size = this.beforeMinimising.before
@@ -226,7 +243,7 @@ export default {
       }
     }
   },
-  mounted () {
+  mounted() {
     this.container = this.$refs.container
   }
 }
@@ -239,9 +256,15 @@ export default {
   position: relative;
 }
 
-.splitpanes-vertical {flex-direction: row;}
-.splitpanes-horizontal {flex-direction: column;}
-.splitpanes-dragging * {user-select: none;}
+.splitpanes-vertical {
+  flex-direction: row;
+}
+.splitpanes-horizontal {
+  flex-direction: column;
+}
+.splitpanes-dragging * {
+  user-select: none;
+}
 
 .splitpanes-pane {
   width: 100%;
@@ -281,14 +304,14 @@ export default {
 
 .movable-splitter {
   position: absolute;
-  background-color:rgba(162, 177, 198, 0.5);
+  background-color: rgba(162, 177, 198, 0.5);
 }
 
 .splitpanes-vertical > .splitpanes-splitter,
 .splitpanes-vertical > .movable-splitter {
   width: 8px;
   z-index: 5;
-  height: 100%
+  height: 100%;
 }
 
 .splitpanes-horizontal > .splitpanes-splitter,
@@ -339,20 +362,32 @@ export default {
   left: 50%;
 }
 
-.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
+.splitpanes-horizontal
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:first-child {
   border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
 }
 
-.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
+.splitpanes-horizontal
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:last-child {
   border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   margin-left: -1px;
 }
 
-.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
+.splitpanes-vertical
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:first-child {
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
 
-.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
+.splitpanes-vertical
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:last-child {
   border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
   margin-top: -1px;
 }
diff --git a/src/components/Splitpanes/splitter.js b/src/components/Splitpanes/splitter.js
index b93aa05..32c1916 100644
--- a/src/components/Splitpanes/splitter.js
+++ b/src/components/Splitpanes/splitter.js
@@ -1,10 +1,9 @@
 export default {
   // Get the cursor position relative to the splitpane container.
-  getCurrentMouseDrag (event, container) {
+  getCurrentMouseDrag(event, container) {
     const rect = container.getBoundingClientRect()
-    const { clientX, clientY } = ('ontouchstart' in window && event.touches)
-      ? event.touches[0]
-      : event
+    const { clientX, clientY } =
+      'ontouchstart' in window && event.touches ? event.touches[0] : event
     return {
       x: clientX - rect.left,
       y: clientY - rect.top
@@ -12,23 +11,35 @@ export default {
   },
 
   // Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
-  getCurrentDragPercentage (event, container, isHorisontal) {
+  getCurrentDragPercentage(event, container, isHorisontal) {
     let drag = this.getCurrentMouseDrag(event, container)
     drag = drag[isHorisontal ? 'y' : 'x']
-    const containerSize = container[isHorisontal ? 'clientHeight' : 'clientWidth']
-    return drag * 100 / containerSize
+    const containerSize =
+      container[isHorisontal ? 'clientHeight' : 'clientWidth']
+    return (drag * 100) / containerSize
   },
 
   // Returns the new position in percents.
-  calculateOffset (event, { container, isHorisontal, paneBeforeMax, paneAfterMax }) {
-    const dragPercentage = this.getCurrentDragPercentage(event, container, isHorisontal)
+  calculateOffset(
+    event,
+    { container, isHorisontal, paneBeforeMax, paneAfterMax }
+  ) {
+    const dragPercentage = this.getCurrentDragPercentage(
+      event,
+      container,
+      isHorisontal
+    )
 
-    const paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
-    const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)
+    const paneBeforeMaxReached =
+      paneBeforeMax < 100 && dragPercentage >= paneBeforeMax
+    const paneAfterMaxReached =
+      paneAfterMax < 100 && dragPercentage <= 100 - paneAfterMax
 
     // Prevent dragging beyond pane max.
     if (paneBeforeMaxReached || paneAfterMaxReached) {
-      return paneBeforeMaxReached ? paneBeforeMax : Math.max(100 - paneAfterMax, 0)
+      return paneBeforeMaxReached
+        ? paneBeforeMax
+        : Math.max(100 - paneAfterMax, 0)
     } else {
       return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
     }
diff --git a/src/components/SqlTable/Pager.vue b/src/components/SqlTable/Pager.vue
index 90af7c5..64a6e93 100644
--- a/src/components/SqlTable/Pager.vue
+++ b/src/components/SqlTable/Pager.vue
@@ -25,7 +25,7 @@ export default {
   components: { Paginate },
   props: ['pageCount', 'modelValue'],
   emits: ['update:modelValue'],
-  data () {
+  data() {
     return {
       page: this.modelValue,
       chevron: `
@@ -39,10 +39,10 @@ export default {
     }
   },
   watch: {
-    page () {
+    page() {
       this.$emit('update:modelValue', this.page)
     },
-    modelValue () {
+    modelValue() {
       this.page = this.modelValue
     }
   }
@@ -93,7 +93,7 @@ export default {
 
 :deep(.paginator-next:hover path),
 :deep(.paginator-prev:hover path) {
-   fill: var(--color-text-active);
+  fill: var(--color-text-active);
 }
 :deep(.paginator-disabled path),
 :deep(.paginator-disabled:hover path) {
diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue
index b9f71be..557d950 100644
--- a/src/components/SqlTable/index.vue
+++ b/src/components/SqlTable/index.vue
@@ -11,50 +11,50 @@
           >
             {{ th.name }}
           </div>
-      </div>
+        </div>
       </div>
       <div
         class="table-container"
         ref="table-container"
         @scroll="onScrollTable"
       >
-      <table
-        ref="table"
-        class="sqliteviz-table"
-        tabindex="0"
-        @keydown="onTableKeydown"
-      >
-        <thead>
-          <tr>
-            <th v-for="(th, index) in columns" :key="index" ref="th">
-              <div class="cell-data" :style="cellStyle">{{ th }}</div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="rowIndex in currentPageData.count" :key="rowIndex">
-            <td
-              v-for="(col, colIndex) in columns"
-              :data-col="colIndex"
-              :data-row="pageSize * (currentPage - 1) + rowIndex - 1"
-              :data-isNull="isNull(getCellValue(col, rowIndex))"
-              :data-isBlob="isBlob(getCellValue(col, rowIndex))"
-              :key="colIndex"
-              :aria-selected="false"
-              @click="onCellClick"
-            >
-              <div class="cell-data" :style="cellStyle">
-                {{ getCellText(col, rowIndex) }}
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+        <table
+          ref="table"
+          class="sqliteviz-table"
+          tabindex="0"
+          @keydown="onTableKeydown"
+        >
+          <thead>
+            <tr>
+              <th v-for="(th, index) in columns" :key="index" ref="th">
+                <div class="cell-data" :style="cellStyle">{{ th }}</div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="rowIndex in currentPageData.count" :key="rowIndex">
+              <td
+                v-for="(col, colIndex) in columns"
+                :data-col="colIndex"
+                :data-row="pageSize * (currentPage - 1) + rowIndex - 1"
+                :data-isNull="isNull(getCellValue(col, rowIndex))"
+                :data-isBlob="isBlob(getCellValue(col, rowIndex))"
+                :key="colIndex"
+                :aria-selected="false"
+                @click="onCellClick"
+              >
+                <div class="cell-data" :style="cellStyle">
+                  {{ getCellText(col, rowIndex) }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
     <div class="table-footer">
       <div class="table-footer-count">
-        {{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
+        {{ rowCount }} {{ rowCount === 1 ? 'row' : 'rows' }} retrieved
         <span v-if="preview">for preview</span>
         <span v-if="time">in {{ time }}</span>
       </div>
@@ -88,7 +88,7 @@ export default {
     selectedCellCoordinates: Object
   },
   emits: ['updateSelectedCell'],
-  data () {
+  data() {
     return {
       header: null,
       tableWidth: null,
@@ -98,20 +98,20 @@ export default {
     }
   },
   computed: {
-    columns () {
+    columns() {
       return this.dataSet.columns
     },
-    rowCount () {
+    rowCount() {
       return this.dataSet.values[this.columns[0]].length
     },
-    cellStyle () {
+    cellStyle() {
       const eq = this.tableWidth / this.columns.length
       return { maxWidth: `${Math.max(eq, 100)}px` }
     },
-    pageCount () {
+    pageCount() {
       return Math.ceil(this.rowCount / this.pageSize)
     },
-    currentPageData () {
+    currentPageData() {
       const start = (this.currentPage - 1) * this.pageSize
       let end = start + this.pageSize
       if (end > this.rowCount - 1) {
@@ -124,31 +124,32 @@ export default {
       }
     }
   },
-  mounted () {
+  mounted() {
     this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
     this.resizeObserver.observe(this.$refs.table)
     this.calculateHeadersWidth()
 
     if (this.selectedCellCoordinates) {
       const { row, col } = this.selectedCellCoordinates
-      const cell = this.$refs.table
-        .querySelector(`td[data-col="${col}"][data-row="${row}"]`)
+      const cell = this.$refs.table.querySelector(
+        `td[data-col="${col}"][data-row="${row}"]`
+      )
       if (cell) {
         this.selectCell(cell)
       }
     }
   },
   methods: {
-    isBlob (value) {
+    isBlob(value) {
       return value && ArrayBuffer.isView(value)
     },
-    isNull (value) {
+    isNull(value) {
       return value === null
     },
-    getCellValue (col, rowIndex) {
+    getCellValue(col, rowIndex) {
       return this.dataSet.values[col][rowIndex - 1 + this.currentPageData.start]
     },
-    getCellText (col, rowIndex) {
+    getCellText(col, rowIndex) {
       const value = this.getCellValue(col, rowIndex)
       if (this.isNull(value)) {
         return 'NULL'
@@ -158,7 +159,7 @@ export default {
       }
       return value
     },
-    calculateHeadersWidth () {
+    calculateHeadersWidth() {
       this.tableWidth = this.$refs['table-container'].offsetWidth
       this.$nextTick(() => {
         this.header = this.$refs.th.map(th => {
@@ -166,10 +167,11 @@ export default {
         })
       })
     },
-    onScrollTable () {
-      this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
+    onScrollTable() {
+      this.$refs['header-container'].scrollLeft =
+        this.$refs['table-container'].scrollLeft
     },
-    onTableKeydown (e) {
+    onTableKeydown(e) {
       const keyCodeMap = {
         37: 'left',
         39: 'right',
@@ -187,10 +189,10 @@ export default {
 
       this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
     },
-    onCellClick (e) {
+    onCellClick(e) {
       this.selectCell(e.target.closest('td'), false)
     },
-    selectCell (cell, scrollTo = true) {
+    selectCell(cell, scrollTo = true) {
       if (!cell) {
         if (this.selectedCellElement) {
           this.selectedCellElement.ariaSelected = 'false'
@@ -213,7 +215,7 @@ export default {
 
       this.$emit('updateSelectedCell', this.selectedCellElement)
     },
-    moveFocusInTable (initialCell, direction) {
+    moveFocusInTable(initialCell, direction) {
       const currentRowIndex = +initialCell.dataset.row
       const currentColIndex = +initialCell.dataset.col
       let newRowIndex, newColIndex
@@ -242,22 +244,23 @@ export default {
         newColIndex = currentColIndex
       }
 
-      const newCell = this.$refs.table
-        .querySelector(`td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`)
+      const newCell = this.$refs.table.querySelector(
+        `td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`
+      )
       if (newCell) {
         this.selectCell(newCell)
       }
     }
   },
-  beforeUnmount () {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.table)
   },
   watch: {
-    currentPageData () {
+    currentPageData() {
       this.calculateHeadersWidth()
       this.selectCell(null)
     },
-    dataSet () {
+    dataSet() {
       this.currentPage = 1
     }
   }
@@ -271,7 +274,7 @@ table.sqliteviz-table:focus {
 .sqliteviz-table tbody td:hover {
   background-color: var(--color-bg-light-3);
 }
-.sqliteviz-table tbody td[aria-selected="true"] {
-  box-shadow:inset 0 0 0 1px var(--color-accent);
+.sqliteviz-table tbody td[aria-selected='true'] {
+  box-shadow: inset 0 0 0 1px var(--color-accent);
 }
 </style>
diff --git a/src/components/TextField.vue b/src/components/TextField.vue
index abf5077..0bd0e18 100644
--- a/src/components/TextField.vue
+++ b/src/components/TextField.vue
@@ -1,8 +1,16 @@
 <template>
   <div>
-    <div v-if="label" :class="['text-field-label', { error: errorMsg }, {'disabled': disabled}]">
+    <div
+      v-if="label"
+      :class="['text-field-label', { error: errorMsg }, { disabled: disabled }]"
+    >
       {{ label }}
-      <hint-icon class="hint" v-if="hint" :hint="hint" :max-width="maxHintWidth || '149px'"/>
+      <hint-icon
+        class="hint"
+        v-if="hint"
+        :hint="hint"
+        :max-width="maxHintWidth || '149px'"
+      />
     </div>
     <input
       type="text"
@@ -75,7 +83,7 @@ input.error {
   position: relative;
 }
 
-.text-field-label .hint{
+.text-field-label .hint {
   position: absolute;
   top: -2px;
   right: -22px;
diff --git a/src/components/svg/addTable.vue b/src/components/svg/addTable.vue
index 05d9c5d..195450e 100644
--- a/src/components/svg/addTable.vue
+++ b/src/components/svg/addTable.vue
@@ -29,7 +29,7 @@
       </g>
       <defs>
         <clipPath id="clip0">
-          <rect width="18" height="18" fill="white"/>
+          <rect width="18" height="18" fill="white" />
         </clipPath>
       </defs>
     </svg>
@@ -48,7 +48,7 @@ export default {
   props: ['tooltip'],
   emits: ['click'],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/components/svg/arrow.vue b/src/components/svg/arrow.vue
index 166239a..22e94de 100644
--- a/src/components/svg/arrow.vue
+++ b/src/components/svg/arrow.vue
@@ -11,10 +11,9 @@
       13.5L16.35 6.75L17.9475 8.33625Z"
       fill="#506784"
     />
-</svg>
+  </svg>
 </template>
 
 <script>
-export default {
-}
+export default {}
 </script>
diff --git a/src/components/svg/changeDb.vue b/src/components/svg/changeDb.vue
index 78baecb..a8a5d1c 100644
--- a/src/components/svg/changeDb.vue
+++ b/src/components/svg/changeDb.vue
@@ -1,30 +1,30 @@
 <template>
-<div>
-  <svg
-    class="db-edit-icon"
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    @click.stop="onClick"
-    @mouseenter="showTooltip"
-    @mouseleave="hideTooltip"
-  >
-    <path
-      d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3
+  <div>
+    <svg
+      class="db-edit-icon"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      @click.stop="onClick"
+      @mouseenter="showTooltip"
+      @mouseleave="hideTooltip"
+    >
+      <path
+        d="M3 10.5V12.75C3 14.25 5.2875 15.54 8.25 15.75V13.5825L8.3475 13.5C5.34 13.32 3 12.045 3
       10.5ZM9 9.75C5.685 9.75 3 8.4075 3 6.75V9C3 10.6575 5.685 12 9 12C9.2925 12 9.5775 12
       9.87 12L12.75 9.09C11.55 9.54 10.2825 9.75 9 9.75ZM9 2.25C5.685 2.25 3 3.5925 3 5.25C3
       6.9075 5.685 8.25 9 8.25C12.315 8.25 15 6.9075 15 5.25C15 3.5925 12.315 2.25 9 2.25ZM15.75
       8.3475C15.6375 8.3475 15.5325 8.3925 15.4575 8.475L14.7075 9.225L16.245 10.725L16.995
       9.975C17.1525 9.825 17.16 9.57 16.995 9.3975L16.065 8.475C15.99 8.3925 15.885 8.3475 15.78
       8.3475H15.75ZM14.28 9.66L9.75 14.205V15.75H11.295L15.84 11.1975L14.28 9.66Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-  <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-    Load another database, CSV, JSON or NDJSON
-  </span>
-</div>
+        fill="#A2B1C6"
+      />
+    </svg>
+    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+      Load another database, CSV, JSON or NDJSON
+    </span>
+  </div>
 </template>
 
 <script>
@@ -35,7 +35,7 @@ export default {
   mixins: [tooltipMixin],
   emits: ['click'],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/components/svg/chart.vue b/src/components/svg/chart.vue
index 2c643fb..f55ccad 100644
--- a/src/components/svg/chart.vue
+++ b/src/components/svg/chart.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -46,7 +41,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ChartIcon'
 }
diff --git a/src/components/svg/clear.vue b/src/components/svg/clear.vue
index d52363f..cd53f44 100644
--- a/src/components/svg/clear.vue
+++ b/src/components/svg/clear.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    :class="['clear-icon', {'disabled': disabled}]"
+    :class="['clear-icon', { disabled: disabled }]"
     width="20"
     height="20"
     viewBox="0 0 20 20"
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ClearIcon',
   props: ['disabled']
@@ -42,6 +41,6 @@ export default {
 }
 
 .disabled.clear-icon:hover path {
-  fill: #C8D4E3;
+  fill: #c8d4e3;
 }
 </style>
diff --git a/src/components/svg/clipboard.vue b/src/components/svg/clipboard.vue
index 8858823..f0978c5 100644
--- a/src/components/svg/clipboard.vue
+++ b/src/components/svg/clipboard.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       d="M14.1917 1.3851H12.4806V0.703125C12.4806 0.314758 12.1658 0 11.7775 0H6.246C5.85764 0
       5.54288 0.314758 5.54288 0.703125V1.3851H3.83203C2.86276 1.3851 2.07422 2.17365 2.07422
@@ -26,7 +21,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ClipboardIcon'
 }
diff --git a/src/components/svg/close.vue b/src/components/svg/close.vue
index bec1f1b..b5fceb2 100644
--- a/src/components/svg/close.vue
+++ b/src/components/svg/close.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
     @click.stop="$emit('click')"
-    :class="['icon', {'disabled': disabled }]"
+    :class="['icon', { disabled: disabled }]"
     :width="size"
     :height="size"
     viewBox="0 0 14 14"
diff --git a/src/components/svg/dataView.vue b/src/components/svg/dataView.vue
index 701d1d6..85cdf5c 100644
--- a/src/components/svg/dataView.vue
+++ b/src/components/svg/dataView.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -17,7 +12,7 @@
         6.91686 13.5552 6.91522Z"
       fill="#A2B1C6"
     />
-    <circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6"/>
+    <circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -27,11 +22,10 @@
         1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z"
       fill="#A2B1C6"
     />
-</svg>
+  </svg>
 </template>
 
 <script>
-
 export default {
   name: 'DataViewIcon'
 }
diff --git a/src/components/svg/dropDownChevron.vue b/src/components/svg/dropDownChevron.vue
index 4242c0f..41a59e0 100644
--- a/src/components/svg/dropDownChevron.vue
+++ b/src/components/svg/dropDownChevron.vue
@@ -1,6 +1,6 @@
 <template>
   <svg
-    :class="['chevron-icon', {'disabled': disabled}]"
+    :class="['chevron-icon', { disabled: disabled }]"
     width="20"
     height="20"
     viewBox="0 0 20 20"
@@ -15,7 +15,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'DropDownChevron',
   props: ['disabled']
@@ -36,6 +35,6 @@ export default {
 }
 
 .disabled.chevron-icon:hover path {
-  fill: #C8D4E3;
+  fill: #c8d4e3;
 }
 </style>
diff --git a/src/components/svg/edgeArrow.vue b/src/components/svg/edgeArrow.vue
index 7802050..c6162fb 100644
--- a/src/components/svg/edgeArrow.vue
+++ b/src/components/svg/edgeArrow.vue
@@ -21,6 +21,5 @@
 </template>
 
 <script>
-export default {
-}
+export default {}
 </script>
diff --git a/src/components/svg/export.vue b/src/components/svg/export.vue
index 450d5ab..10cd5ec 100644
--- a/src/components/svg/export.vue
+++ b/src/components/svg/export.vue
@@ -32,7 +32,7 @@ export default {
   props: ['tooltip', 'tooltipPosition'],
   emits: ['click'],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/components/svg/exportToCsv.vue b/src/components/svg/exportToCsv.vue
index 3b09cfe..8c8e406 100644
--- a/src/components/svg/exportToCsv.vue
+++ b/src/components/svg/exportToCsv.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="19"
-    height="18"
-    viewBox="0 0 19 18"
-    fill="none"
-  >
+  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
     <path
       d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043
         15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83
@@ -34,7 +29,7 @@
         14.6699C9.53809 14.6699 9.73877 14.6157 9.88525 14.5073C10.0347 14.3959 10.1094 14.2407
         10.1094 14.0414ZM14.9258 14.0019L16.2002 9.34369H17.9229L15.7695 15.7421H14.082L11.9463
         9.34369H13.6558L14.9258 14.0019Z"
-    fill="#A2B1C6"
+      fill="#A2B1C6"
     />
     <path
       d="M3.03345 0.991333H4.89869V2.49133H3.03345V7.93074H1.53345V2.49133C1.53345 1.66633
@@ -55,7 +50,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ExportToCsvIcon'
 }
diff --git a/src/components/svg/exportToSvg.vue b/src/components/svg/exportToSvg.vue
index 52ab6e4..002bd38 100644
--- a/src/components/svg/exportToSvg.vue
+++ b/src/components/svg/exportToSvg.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="19"
-    height="18"
-    viewBox="0 0 19 18"
-    fill="none"
-  >
+  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
     <path
       d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604
         13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798
@@ -54,7 +49,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ExportToSvgIcon'
 }
diff --git a/src/components/svg/hint.vue b/src/components/svg/hint.vue
index 167904e..653b48f 100644
--- a/src/components/svg/hint.vue
+++ b/src/components/svg/hint.vue
@@ -33,7 +33,11 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }" ref="tooltip">
+    <span
+      class="icon-tooltip"
+      :style="{ ...tooltipStyle, maxWidth: maxWidth }"
+      ref="tooltip"
+    >
       {{ hint }}
     </span>
   </div>
@@ -48,7 +52,7 @@ export default {
   emits: ['click'],
   mixins: [tooltipMixin],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/components/svg/html.vue b/src/components/svg/html.vue
index 95967ca..fbe38be 100644
--- a/src/components/svg/html.vue
+++ b/src/components/svg/html.vue
@@ -11,8 +11,8 @@
         7.89917V9.2439L5.1626 10.0745ZM8.99023 13.3H7.93994L10.124 6.35229H11.1787L8.99023
         13.3ZM14.1099 10.0613L11.7192 9.24829V7.90356L15.582 9.4856V10.6545L11.7192
         12.2366V10.8918L14.1099 10.0613Z"
-        fill="#A2B1C6"
-     />
+      fill="#A2B1C6"
+    />
     <path
       d="M2.17041 0.0637207H16.2185V1.56372H2.17041V9.30354H0.67041V1.56372C0.67041 0.73872
       1.34541 0.0637207 2.17041 0.0637207Z"
diff --git a/src/components/svg/pivot.vue b/src/components/svg/pivot.vue
index d507816..252d106 100644
--- a/src/components/svg/pivot.vue
+++ b/src/components/svg/pivot.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -14,14 +9,13 @@
       14.1914C14.8372 13.965 15.0161 13.5645 15.0161 12.8467V9.43008H13.1914L15.7661 5.13901Z"
       fill="#A2B1C6"
     />
-    <path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6"/>
-    <path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6"/>
-    <path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6"/>
+    <path d="M6.41943 0H18.4194V4H6.41943V0Z" fill="#A2B1C6" />
+    <path d="M0.419434 6H4.41943V18H0.419434V6Z" fill="#A2B1C6" />
+    <path d="M0.419434 0H4.41943V4H0.419434V0Z" fill="#A2B1C6" />
   </svg>
 </template>
 
 <script>
-
 export default {
   name: 'PivotIcon'
 }
diff --git a/src/components/svg/png.vue b/src/components/svg/png.vue
index 2f44733..25802f0 100644
--- a/src/components/svg/png.vue
+++ b/src/components/svg/png.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686
         14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231
@@ -30,7 +25,10 @@
         5.5195V15.0117Z"
       fill="#A2B1C6"
     />
-    <path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
+    <path
+      d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z"
+      fill="#A2B1C6"
+    />
   </svg>
 </template>
 
diff --git a/src/components/svg/row.vue b/src/components/svg/row.vue
index 8492a8b..5c9d0bf 100644
--- a/src/components/svg/row.vue
+++ b/src/components/svg/row.vue
@@ -1,15 +1,10 @@
 <template>
-  <svg
-    width="19"
-    height="19"
-    viewBox="0 0 19 19"
-    fill="none"
-  >
+  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
     <g clip-path="url(#clip0_2130_5292)">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M1.85303 11.3794L1.85303 7.80371L5.86304 7.80371L5.86304
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.85303 11.3794L1.85303 7.80371L5.86304 7.80371L5.86304
       11.3794L1.85303 11.3794ZM7.36304 11.3794L7.36304 7.80371L11.3428
       7.80371L11.3428 11.3794L7.36304 11.3794ZM12.8428 11.3794L16.853
       11.3794L16.853 7.80371L12.8428 7.80371L12.8428 11.3794ZM15.353
@@ -29,24 +24,23 @@
       14.3121L6.76685 12.8794L4.67027 12.8794ZM8.26685 12.8794L8.26685
       14.3121L10.387 14.3121L10.387 12.8794L8.26685 12.8794ZM11.887
       12.8794L11.887 14.3121L14.0315 14.3121L14.0315 12.8794L11.887 12.8794Z"
-      fill="#A2B1C6"
-    />
+        fill="#A2B1C6"
+      />
     </g>
     <defs>
       <clipPath id="clip0_2130_5292">
         <rect
-        width="18"
-        height="18"
-        fill="white"
-        transform="translate(0.353027 18.5916) rotate(-90)"
-      />
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0.353027 18.5916) rotate(-90)"
+        />
       </clipPath>
     </defs>
-</svg>
+  </svg>
 </template>
 
 <script>
-
 export default {
   name: 'RowIcon'
 }
diff --git a/src/components/svg/run.vue b/src/components/svg/run.vue
index 23b4db7..368bb83 100644
--- a/src/components/svg/run.vue
+++ b/src/components/svg/run.vue
@@ -1,16 +1,13 @@
 <template>
-  <svg
-    width="12"
-    height="13"
-    viewBox="0 0 12 13"
-    fill="none"
-  >
-    <path d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z" fill="#A2B1C6"/>
+  <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+    <path
+      d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z"
+      fill="#A2B1C6"
+    />
   </svg>
 </template>
 
 <script>
-
 export default {
   name: 'RunIcon'
 }
diff --git a/src/components/svg/sort.vue b/src/components/svg/sort.vue
index 6145a52..e6a648b 100644
--- a/src/components/svg/sort.vue
+++ b/src/components/svg/sort.vue
@@ -24,7 +24,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'SortIcon',
   props: {
diff --git a/src/components/svg/sqlEditor.vue b/src/components/svg/sqlEditor.vue
index 58f0f8c..7bbeec0 100644
--- a/src/components/svg/sqlEditor.vue
+++ b/src/components/svg/sqlEditor.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="19"
-    viewBox="0 0 18 19"
-    fill="none"
-  >
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none">
     <g clip-path="url(#clip0)">
       <path
         d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3
@@ -47,14 +42,18 @@
     </g>
     <defs>
       <clipPath id="clip0">
-        <rect width="18" height="18" fill="white" transform="translate(0 0.0134277)"/>
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.0134277)"
+        />
       </clipPath>
     </defs>
   </svg>
 </template>
 
 <script>
-
 export default {
   name: 'SqlEditorIcon'
 }
diff --git a/src/components/svg/table.vue b/src/components/svg/table.vue
index 19f9a59..bd06f52 100644
--- a/src/components/svg/table.vue
+++ b/src/components/svg/table.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -41,7 +36,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'TableIcon'
 }
diff --git a/src/components/svg/treeChevron.vue b/src/components/svg/treeChevron.vue
index e213c11..c4e87d7 100644
--- a/src/components/svg/treeChevron.vue
+++ b/src/components/svg/treeChevron.vue
@@ -17,7 +17,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'treeChevron',
   props: {
@@ -31,7 +30,7 @@ export default {
 
 <style scoped>
 .chevron-icon {
-  -webkit-transition: transform .15s ease-in-out;
-  transition: transform .15s ease-in-out;
+  -webkit-transition: transform 0.15s ease-in-out;
+  transition: transform 0.15s ease-in-out;
 }
 </style>
diff --git a/src/components/svg/viewCellValue.vue b/src/components/svg/viewCellValue.vue
index 590a51a..453d963 100644
--- a/src/components/svg/viewCellValue.vue
+++ b/src/components/svg/viewCellValue.vue
@@ -1,24 +1,19 @@
 <template>
-  <svg
-    width="19"
-    height="19"
-    viewBox="0 0 19 19"
-    fill="none"
-  >
+  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
     <g clip-path="url(#clip0_2131_6054)">
-    <path
-      d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
+      <path
+        d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
       12.9771 7.47439 13.4751 7.53264V3.14734C13.4751 2.31891 12.8035 1.64734
       11.9751 1.64734L3.53784 1.64734C2.70941 1.64734 2.03784 2.31891 2.03784
       3.14734L2.03784 11.5846C2.03784 12.413 2.70942 13.0846 3.53784
       13.0846H10.0831C9.771 12.6184 9.58279 12.1055 9.51083
       11.5846H3.53784Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.7887 9.9291C15.4307 10.8837 15.1773 12.1779 14.2228
+        fill="#A2B1C6"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.7887 9.9291C15.4307 10.8837 15.1773 12.1779 14.2228
       12.8199C13.2682 13.4618 11.974 13.2084 11.332 12.2539C10.69 11.2993
       10.9434 10.0051 11.898 9.3631C12.8525 8.72113 14.1468 8.97454 14.7887
       9.9291ZM14.4606 14.3901L16.6181 17.5982C16.8492 17.9419 17.3153 18.0331
@@ -26,24 +21,23 @@
       13.5279C16.7949 12.3365 16.9801 10.4996 16.0334 9.092C14.9292 7.45002
       12.7029 7.01412 11.0609 8.1184C9.41891 9.22268 8.98302 11.449 10.0873
       13.0909C11.062 14.5403 12.9109 15.05 14.4606 14.3901Z"
-      fill="#A2B1C6"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_2131_6054">
-    <rect
-      width="18"
-      height="18"
-      fill="white"
-      transform="translate(0.5 18.5916) rotate(-90)"
-    />
-    </clipPath>
-  </defs>
-</svg>
+        fill="#A2B1C6"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2131_6054">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0.5 18.5916) rotate(-90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
 </template>
 
 <script>
-
 export default {
   name: 'ViewCellValueIcon'
 }
diff --git a/src/lib/chartHelper.js b/src/lib/chartHelper.js
index af88589..38aec08 100644
--- a/src/lib/chartHelper.js
+++ b/src/lib/chartHelper.js
@@ -2,7 +2,7 @@ import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import plotly from 'plotly.js'
 import { nanoid } from 'nanoid'
 
-export function getOptionsFromDataSources (dataSources) {
+export function getOptionsFromDataSources(dataSources) {
   if (!dataSources) {
     return []
   }
@@ -13,7 +13,7 @@ export function getOptionsFromDataSources (dataSources) {
   }))
 }
 
-export function getOptionsForSave (state, dataSources) {
+export function getOptionsForSave(state, dataSources) {
   // we don't need to save the data, only settings
   // so we modify state.data using dereference
   const stateCopy = JSON.parse(JSON.stringify(state))
@@ -25,7 +25,7 @@ export function getOptionsForSave (state, dataSources) {
   return stateCopy
 }
 
-export async function getImageDataUrl (element, type) {
+export async function getImageDataUrl(element, type) {
   const chartElement = element.querySelector('.js-plotly-plot')
   return await plotly.toImage(chartElement, {
     format: type,
@@ -34,7 +34,7 @@ export async function getImageDataUrl (element, type) {
   })
 }
 
-export function getChartData (element) {
+export function getChartData(element) {
   const chartElement = element.querySelector('.js-plotly-plot')
   return {
     data: chartElement.data,
@@ -42,7 +42,7 @@ export function getChartData (element) {
   }
 }
 
-export function getHtml (options) {
+export function getHtml(options) {
   const chartId = nanoid()
   return `
       <script src="https://cdn.plot.ly/plotly-latest.js" charset="UTF-8"></script>
diff --git a/src/lib/csv.js b/src/lib/csv.js
index 1ab0871..dfeb7c8 100644
--- a/src/lib/csv.js
+++ b/src/lib/csv.js
@@ -7,7 +7,7 @@ const hintsByCode = {
 }
 
 export default {
-  getResult (source, columns) {
+  getResult(source, columns) {
     const result = {
       columns: columns || []
     }
@@ -52,7 +52,7 @@ export default {
     return result
   },
 
-  prepareForExport (resultSet) {
+  prepareForExport(resultSet) {
     const columns = resultSet.columns
     const rowCount = resultSet.values[columns[0]].length
     const result = {
@@ -61,13 +61,15 @@ export default {
     }
 
     for (let rowNumber = 0; rowNumber < rowCount; rowNumber++) {
-      result.data.push(columns.map(column => resultSet.values[column][rowNumber]))
+      result.data.push(
+        columns.map(column => resultSet.values[column][rowNumber])
+      )
     }
 
     return result
   },
 
-  parse (file, config = {}) {
+  parse(file, config = {}) {
     return new Promise((resolve, reject) => {
       const defaultConfig = {
         delimiter: '', // auto-detect
@@ -122,7 +124,7 @@ export default {
     })
   },
 
-  serialize (resultSet) {
+  serialize(resultSet) {
     return Papa.unparse(this.prepareForExport(resultSet), { delimiter: '\t' })
   }
 }
diff --git a/src/lib/database/_sql.js b/src/lib/database/_sql.js
index 32362c7..35fac1e 100644
--- a/src/lib/database/_sql.js
+++ b/src/lib/database/_sql.js
@@ -5,9 +5,11 @@ import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
 let SQL = null
 const sqlModuleReady = initSqlJs({
   locateFile: () => wasmUrl
- }).then(sqlModule => { SQL = sqlModule })
+}).then(sqlModule => {
+  SQL = sqlModule
+})
 
-function _getDataSourcesFromSqlResult (sqlResult) {
+function _getDataSourcesFromSqlResult(sqlResult) {
   if (!sqlResult) {
     return {}
   }
@@ -19,31 +21,30 @@ function _getDataSourcesFromSqlResult (sqlResult) {
 }
 
 export default class Sql {
-  constructor () {
+  constructor() {
     this.db = null
   }
 
-  static build () {
-    return sqlModuleReady
-      .then(() => {
-        return new Sql()
-      })
+  static build() {
+    return sqlModuleReady.then(() => {
+      return new Sql()
+    })
   }
 
-  createDb (buffer) {
+  createDb(buffer) {
     if (this.db != null) this.db.close()
     this.db = new SQL.Database(buffer)
     return this.db
   }
 
-  open (buffer) {
+  open(buffer) {
     this.createDb(buffer && new Uint8Array(buffer))
     return {
       ready: true
     }
   }
 
-  exec (sql, params) {
+  exec(sql, params) {
     if (this.db === null) {
       this.createDb()
     }
@@ -59,7 +60,7 @@ export default class Sql {
     })
   }
 
-  import (tabName, data, progressCounterId, progressCallback, chunkSize = 1500) {
+  import(tabName, data, progressCounterId, progressCallback, chunkSize = 1500) {
     if (this.db === null) {
       this.createDb()
     }
@@ -80,7 +81,10 @@ export default class Sql {
       }
       this.db.exec('COMMIT')
       count++
-      progressCallback({ progress: 100 * (count / chunksAmount), id: progressCounterId })
+      progressCallback({
+        progress: 100 * (count / chunksAmount),
+        id: progressCounterId
+      })
     }
 
     return {
@@ -88,11 +92,11 @@ export default class Sql {
     }
   }
 
-  export () {
+  export() {
     return this.db.export()
   }
 
-  close () {
+  close() {
     if (this.db) {
       this.db.close()
     }
diff --git a/src/lib/database/_statements.js b/src/lib/database/_statements.js
index 3a89b62..9c4baaa 100644
--- a/src/lib/database/_statements.js
+++ b/src/lib/database/_statements.js
@@ -1,8 +1,10 @@
 export default {
-  * generateChunks (data, size) {
+  *generateChunks(data, size) {
     const matrix = Object.keys(data).map(col => data[col])
     const [row] = matrix
-    const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
+    const transposedMatrix = row.map((value, column) =>
+      matrix.map(row => row[column])
+    )
 
     const count = Math.ceil(transposedMatrix.length / size)
 
@@ -13,13 +15,13 @@ export default {
     }
   },
 
-  getInsertStmt (tabName, columns) {
+  getInsertStmt(tabName, columns) {
     const colList = `"${columns.join('", "')}"`
     const params = columns.map(() => '?').join(', ')
     return `INSERT INTO "${tabName}" (${colList}) VALUES (${params});`
   },
 
-  getCreateStatement (tabName, data) {
+  getCreateStatement(tabName, data) {
     let result = `CREATE table "${tabName}"(`
     for (const col in data) {
       // Get the first row of values to determine types
@@ -38,7 +40,8 @@ export default {
           type = 'TEXT'
           break
         }
-        default: type = 'TEXT'
+        default:
+          type = 'TEXT'
       }
       result += `"${col}" ${type}, `
     }
diff --git a/src/lib/database/_worker.js b/src/lib/database/_worker.js
index fb6ef94..428f48e 100644
--- a/src/lib/database/_worker.js
+++ b/src/lib/database/_worker.js
@@ -3,7 +3,7 @@ import Sql from './_sql'
 
 const sqlReady = Sql.build()
 
-function processMsg (sql) {
+function processMsg(sql) {
   const data = this
   switch (data && data.action) {
     case 'open':
@@ -28,14 +28,12 @@ function processMsg (sql) {
   }
 }
 
-function onError (error) {
+function onError(error) {
   return {
     error: error.message
   }
 }
 
 registerPromiseWorker(data => {
-  return sqlReady
-    .then(processMsg.bind(data))
-    .catch(onError)
+  return sqlReady.then(processMsg.bind(data)).catch(onError)
 })
diff --git a/src/lib/database/index.js b/src/lib/database/index.js
index fd9ffd1..776c52a 100644
--- a/src/lib/database/index.js
+++ b/src/lib/database/index.js
@@ -6,11 +6,10 @@ import PromiseWorker from 'promise-worker'
 
 import events from '@/lib/utils/events'
 
-function getNewDatabase () {
-  const worker = new Worker(
-    new URL('./_worker.js', import.meta.url), 
-    { type: 'module' }
-  )
+function getNewDatabase() {
+  const worker = new Worker(new URL('./_worker.js', import.meta.url), {
+    type: 'module'
+  })
   return new Database(worker)
 }
 
@@ -20,7 +19,7 @@ export default {
 
 let progressCounterIds = 0
 class Database {
-  constructor (worker) {
+  constructor(worker) {
     this.dbName = null
     this.schema = null
     this.worker = worker
@@ -31,29 +30,33 @@ class Database {
       const progress = e.data.progress
       if (progress !== undefined) {
         const id = e.data.id
-        this.importProgresses[id].dispatchEvent(new CustomEvent('progress', {
-          detail: progress
-        }))
+        this.importProgresses[id].dispatchEvent(
+          new CustomEvent('progress', {
+            detail: progress
+          })
+        )
       }
     })
   }
 
-  shutDown () {
+  shutDown() {
     this.worker.terminate()
   }
 
-  createProgressCounter (callback) {
+  createProgressCounter(callback) {
     const id = progressCounterIds++
     this.importProgresses[id] = new EventTarget()
-    this.importProgresses[id].addEventListener('progress', e => { callback(e.detail) })
+    this.importProgresses[id].addEventListener('progress', e => {
+      callback(e.detail)
+    })
     return id
   }
 
-  deleteProgressCounter (id) {
+  deleteProgressCounter(id) {
     delete this.importProgresses[id]
   }
 
-  async addTableFromCsv (tabName, data, progressCounterId) {
+  async addTableFromCsv(tabName, data, progressCounterId) {
     const result = await this.pw.postMessage({
       action: 'import',
       data,
@@ -68,9 +71,12 @@ class Database {
     this.refreshSchema()
   }
 
-  async loadDb (file) {
+  async loadDb(file) {
     const fileContent = file ? await fu.readAsArrayBuffer(file) : null
-    const res = await this.pw.postMessage({ action: 'open', buffer: fileContent })
+    const res = await this.pw.postMessage({
+      action: 'open',
+      buffer: fileContent
+    })
 
     if (res.error) {
       throw new Error(res.error)
@@ -85,7 +91,7 @@ class Database {
     })
   }
 
-  async refreshSchema () {
+  async refreshSchema() {
     const getSchemaSql = `
     WITH columns as (
       SELECT
@@ -103,7 +109,7 @@ class Database {
     this.schema = JSON.parse(result.values.objects[0])
   }
 
-  async execute (commands) {
+  async execute(commands) {
     await this.pw.postMessage({ action: 'reopen' })
     const results = await this.pw.postMessage({ action: 'exec', sql: commands })
 
@@ -114,7 +120,7 @@ class Database {
     return results[results.length - 1]
   }
 
-  async export (fileName) {
+  async export(fileName) {
     const data = await this.pw.postMessage({ action: 'export' })
 
     if (data.error) {
@@ -124,13 +130,15 @@ class Database {
     events.send('database.export', data.byteLength, { to: 'sqlite' })
   }
 
-  async validateTableName (name) {
+  async validateTableName(name) {
     if (name.startsWith('sqlite_')) {
       throw new Error("Table name can't start with sqlite_")
     }
 
     if (/[^\w]/.test(name)) {
-      throw new Error('Table name can contain only letters, digits and underscores')
+      throw new Error(
+        'Table name can contain only letters, digits and underscores'
+      )
     }
 
     if (/^(\d)/.test(name)) {
@@ -140,7 +148,7 @@ class Database {
     await this.execute(`BEGIN; CREATE TABLE "${name}"(id); ROLLBACK;`)
   }
 
-  sanitizeTableName (tabName) {
+  sanitizeTableName(tabName) {
     return tabName
       .replace(/[^\w]/g, '_') // replace everything that is not letter, digit or _  with _
       .replace(/^(\d)/, '_$1') // add _ at beginning if starts with digit
diff --git a/src/lib/storedInquiries/_migrations.js b/src/lib/storedInquiries/_migrations.js
index 7288dda..8121a70 100644
--- a/src/lib/storedInquiries/_migrations.js
+++ b/src/lib/storedInquiries/_migrations.js
@@ -1,5 +1,5 @@
 export default {
-  _migrate (installedVersion, inquiries) {
+  _migrate(installedVersion, inquiries) {
     if (installedVersion === 1) {
       inquiries.forEach(inquire => {
         inquire.viewType = 'chart'
diff --git a/src/lib/storedInquiries/index.js b/src/lib/storedInquiries/index.js
index b96e34d..04f568e 100644
--- a/src/lib/storedInquiries/index.js
+++ b/src/lib/storedInquiries/index.js
@@ -7,7 +7,7 @@ const migrate = migration._migrate
 
 export default {
   version: 2,
-  getStoredInquiries () {
+  getStoredInquiries() {
     let myInquiries = JSON.parse(localStorage.getItem('myInquiries'))
     if (!myInquiries) {
       const oldInquiries = localStorage.getItem('myQueries')
@@ -22,7 +22,7 @@ export default {
     return (myInquiries && myInquiries.inquiries) || []
   },
 
-  duplicateInquiry (baseInquiry) {
+  duplicateInquiry(baseInquiry) {
     const newInquiry = JSON.parse(JSON.stringify(baseInquiry))
     newInquiry.name = newInquiry.name + ' Copy'
     newInquiry.id = nanoid()
@@ -32,21 +32,28 @@ export default {
     return newInquiry
   },
 
-  isTabNeedName (inquiryTab) {
+  isTabNeedName(inquiryTab) {
     return inquiryTab.isPredefined || !inquiryTab.name
   },
 
-  updateStorage (inquiries) {
-    localStorage.setItem('myInquiries', JSON.stringify({ version: this.version, inquiries }))
+  updateStorage(inquiries) {
+    localStorage.setItem(
+      'myInquiries',
+      JSON.stringify({ version: this.version, inquiries })
+    )
   },
 
-  serialiseInquiries (inquiryList) {
+  serialiseInquiries(inquiryList) {
     const preparedData = JSON.parse(JSON.stringify(inquiryList))
     preparedData.forEach(inquiry => delete inquiry.isPredefined)
-    return JSON.stringify({ version: this.version, inquiries: preparedData }, null, 4)
+    return JSON.stringify(
+      { version: this.version, inquiries: preparedData },
+      null,
+      4
+    )
   },
 
-  deserialiseInquiries (str) {
+  deserialiseInquiries(str) {
     const inquiries = JSON.parse(str)
     let inquiryList = []
     if (!inquiries.version) {
@@ -59,7 +66,9 @@ export default {
 
     // Generate new ids if they are the same as existing inquiries
     inquiryList.forEach(inquiry => {
-      const allInquiriesIds = this.getStoredInquiries().map(inquiry => inquiry.id)
+      const allInquiriesIds = this.getStoredInquiries().map(
+        inquiry => inquiry.id
+      )
       if (allInquiriesIds.includes(inquiry.id)) {
         inquiry.id = nanoid()
       }
@@ -68,24 +77,23 @@ export default {
     return inquiryList
   },
 
-  importInquiries () {
-    return fu.importFile()
-      .then(str => {
-        const inquires = this.deserialiseInquiries(str)
+  importInquiries() {
+    return fu.importFile().then(str => {
+      const inquires = this.deserialiseInquiries(str)
 
-        events.send('inquiry.import', inquires.length)
+      events.send('inquiry.import', inquires.length)
 
-        return inquires
-      })
+      return inquires
+    })
   },
-  export (inquiryList, fileName) {
+  export(inquiryList, fileName) {
     const jsonStr = this.serialiseInquiries(inquiryList)
     fu.exportToFile(jsonStr, fileName)
 
     events.send('inquiry.export', inquiryList.length)
   },
 
-  async readPredefinedInquiries () {
+  async readPredefinedInquiries() {
     const res = await fu.readFile('./inquiries.json')
     const data = await res.json()
 
diff --git a/src/lib/tab.js b/src/lib/tab.js
index 154695b..c743765 100644
--- a/src/lib/tab.js
+++ b/src/lib/tab.js
@@ -3,12 +3,14 @@ import time from '@/lib/utils/time'
 import events from '@/lib/utils/events'
 
 export default class Tab {
-  constructor (state, inquiry = {}) {
+  constructor(state, inquiry = {}) {
     this.id = inquiry.id || nanoid()
     this.name = inquiry.id ? inquiry.name : null
-    this.tempName = inquiry.name || (state.untitledLastIndex
-      ? `Untitled ${state.untitledLastIndex}`
-      : 'Untitled')
+    this.tempName =
+      inquiry.name ||
+      (state.untitledLastIndex
+        ? `Untitled ${state.untitledLastIndex}`
+        : 'Untitled')
     this.query = inquiry.query
     this.viewOptions = inquiry.viewOptions || undefined
     this.isPredefined = inquiry.isPredefined
@@ -28,7 +30,7 @@ export default class Tab {
     this.state = state
   }
 
-  async execute () {
+  async execute() {
     this.isGettingResults = true
     this.result = null
     this.error = null
@@ -39,7 +41,8 @@ export default class Tab {
       this.time = time.getPeriod(start, new Date())
 
       if (this.result && this.result.values) {
-        events.send('resultset.create',
+        events.send(
+          'resultset.create',
           this.result.values[this.result.columns[0]].length
         )
       }
diff --git a/src/lib/utils/clipboardIo.js b/src/lib/utils/clipboardIo.js
index 0adc750..05627a8 100644
--- a/src/lib/utils/clipboardIo.js
+++ b/src/lib/utils/clipboardIo.js
@@ -2,14 +2,14 @@ import Lib from 'plotly.js/src/lib'
 import dataUrlToBlob from 'dataurl-to-blob'
 
 export default {
-  async copyText (str, notifyMessage) {
+  async copyText(str, notifyMessage) {
     await navigator.clipboard.writeText(str)
     if (notifyMessage) {
       Lib.notifier(notifyMessage, 'long')
     }
   },
 
-  async copyImage (source) {
+  async copyImage(source) {
     if (source instanceof HTMLCanvasElement) {
       return this._copyCanvas(source)
     } else {
@@ -17,24 +17,29 @@ export default {
     }
   },
 
-  async _copyBlob (blob) {
+  async _copyBlob(blob) {
     await navigator.clipboard.write([
-      new ClipboardItem({ // eslint-disable-line no-undef
+      new ClipboardItem({
+        // eslint-disable-line no-undef
         [blob.type]: blob
       })
     ])
   },
 
-  async _copyFromDataUrl (url) {
+  async _copyFromDataUrl(url) {
     const blob = dataUrlToBlob(url)
     await this._copyBlob(blob)
     Lib.notifier('Image copied to clipboard successfully', 'long')
   },
 
-  async _copyCanvas (canvas) {
-    canvas.toBlob(async (blob) => {
-      await this._copyBlob(blob)
-      Lib.notifier('Image copied to clipboard successfully', 'long')
-    }, 'image/png', 1)
+  async _copyCanvas(canvas) {
+    canvas.toBlob(
+      async blob => {
+        await this._copyBlob(blob)
+        Lib.notifier('Image copied to clipboard successfully', 'long')
+      },
+      'image/png',
+      1
+    )
   }
 }
diff --git a/src/lib/utils/events.js b/src/lib/utils/events.js
index 7519325..8a1f9dd 100644
--- a/src/lib/utils/events.js
+++ b/src/lib/utils/events.js
@@ -1,5 +1,5 @@
 export default {
-  send (name, value, labels) {
+  send(name, value, labels) {
     const event = new CustomEvent('sqliteviz-app-event', {
       detail: {
         name,
diff --git a/src/lib/utils/fileIo.js b/src/lib/utils/fileIo.js
index d537124..0faa8b3 100644
--- a/src/lib/utils/fileIo.js
+++ b/src/lib/utils/fileIo.js
@@ -1,22 +1,22 @@
 export default {
-  isJSON (file) {
+  isJSON(file) {
     return file && file.type === 'application/json'
   },
-  isNDJSON (file) {
+  isNDJSON(file) {
     return file && file.name.endsWith('.ndjson')
   },
-  isDatabase (file) {
+  isDatabase(file) {
     const dbTypes = ['application/vnd.sqlite3', 'application/x-sqlite3']
     return file.type
       ? dbTypes.includes(file.type)
       : /\.(db|sqlite(3)?)+$/.test(file.name)
   },
 
-  getFileName (file) {
+  getFileName(file) {
     return file.name.replace(/\.[^.]+$/, '')
   },
 
-  downloadFromUrl (url, fileName) {
+  downloadFromUrl(url, fileName) {
     // Create downloader
     const downloader = document.createElement('a')
     downloader.href = url
@@ -29,7 +29,7 @@ export default {
     URL.revokeObjectURL(url)
   },
 
-  async exportToFile (str, fileName, type = 'octet/stream') {
+  async exportToFile(str, fileName, type = 'octet/stream') {
     const blob = new Blob([str], { type })
     const url = URL.createObjectURL(blob)
     this.downloadFromUrl(url, fileName)
@@ -40,7 +40,7 @@ export default {
    * it will be an unsettled promise. But it's grabbed by
    * the garbage collector (tested with FinalizationRegistry).
    */
-  getFileFromUser (type) {
+  getFileFromUser(type) {
     return new Promise(resolve => {
       const uploader = document.createElement('input')
 
@@ -56,14 +56,13 @@ export default {
     })
   },
 
-  importFile () {
-    return this.getFileFromUser('.json')
-      .then(file => {
-        return this.getFileContent(file)
-      })
+  importFile() {
+    return this.getFileFromUser('.json').then(file => {
+      return this.getFileContent(file)
+    })
   },
 
-  getFileContent (file) {
+  getFileContent(file) {
     const reader = new FileReader()
     return new Promise(resolve => {
       reader.onload = e => resolve(e.target.result)
@@ -71,11 +70,11 @@ export default {
     })
   },
 
-  readFile (path) {
+  readFile(path) {
     return fetch(path)
   },
 
-  readAsArrayBuffer (file) {
+  readAsArrayBuffer(file) {
     const fileReader = new FileReader()
 
     return new Promise((resolve, reject) => {
diff --git a/src/lib/utils/time.js b/src/lib/utils/time.js
index 39476a3..9a3440e 100644
--- a/src/lib/utils/time.js
+++ b/src/lib/utils/time.js
@@ -1,11 +1,11 @@
 export default {
-  getPeriod (start, end) {
+  getPeriod(start, end) {
     const diff = end.getTime() - start.getTime()
     const seconds = diff / 1000
     return seconds.toFixed(3) + 's'
   },
 
-  debounce (func, ms) {
+  debounce(func, ms) {
     let timeout
     return function () {
       clearTimeout(timeout)
@@ -13,9 +13,11 @@ export default {
     }
   },
 
-  sleep (ms) {
+  sleep(ms) {
     return new Promise(resolve => {
-      setTimeout(() => { resolve() }, ms)
+      setTimeout(() => {
+        resolve()
+      }, ms)
     })
   }
 }
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index faf3a60..b91128b 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,7 +1,7 @@
 import events from '@/lib/utils/events'
 let refresh = false
 
-function invokeServiceWorkerUpdateFlow (registration) {
+function invokeServiceWorkerUpdateFlow(registration) {
   const agree = confirm('New version of the app is available. Refresh now?')
   if (agree) {
     if (registration.waiting) {
@@ -14,7 +14,8 @@ function invokeServiceWorkerUpdateFlow (registration) {
 
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', async () => {
-    const registration = await navigator.serviceWorker.register('service-worker.js')
+    const registration =
+      await navigator.serviceWorker.register('service-worker.js')
     // ensure the case when the updatefound event was missed is also handled
     // by re-invoking the prompt when there's a waiting Service Worker
     if (registration.waiting) {
diff --git a/src/store/actions.js b/src/store/actions.js
index c377c86..40277bd 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -2,7 +2,7 @@ import Tab from '@/lib/tab'
 import { nanoid } from 'nanoid'
 
 export default {
-  async addTab ({ state }, inquiry = {}) {
+  async addTab({ state }, inquiry = {}) {
     // add new tab only if it was not already opened
     if (!state.tabs.some(openedTab => openedTab.id === inquiry.id)) {
       const tab = new Tab(state, JSON.parse(JSON.stringify(inquiry)))
@@ -15,7 +15,7 @@ export default {
 
     return inquiry.id
   },
-  async saveInquiry ({ state }, { inquiryTab, newName }) {
+  async saveInquiry({ state }, { inquiryTab, newName }) {
     const value = {
       id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
       query: inquiryTab.query,
@@ -31,7 +31,9 @@ export default {
     if (newName) {
       value.createdAt = new Date()
     } else {
-      var inquiryIndex = myInquiries.findIndex(oldInquiry => oldInquiry.id === inquiryTab.id)
+      var inquiryIndex = myInquiries.findIndex(
+        oldInquiry => oldInquiry.id === inquiryTab.id
+      )
       value.createdAt = myInquiries[inquiryIndex].createdAt
     }
 
@@ -44,10 +46,10 @@ export default {
 
     return value
   },
-  addInquiry ({ state }, newInquiry) {
+  addInquiry({ state }, newInquiry) {
     state.inquiries.push(newInquiry)
   },
-  deleteInquiries ({ state, commit }, inquiryIdSet) {
+  deleteInquiries({ state, commit }, inquiryIdSet) {
     state.inquiries = state.inquiries.filter(
       inquiry => !inquiryIdSet.has(inquiry.id)
     )
@@ -62,9 +64,10 @@ export default {
       i--
     }
   },
-  renameInquiry ({ state, commit }, { inquiryId, newName }) {
-    const renamingInquiry = state.inquiries
-      .find(inquiry => inquiry.id === inquiryId)
+  renameInquiry({ state, commit }, { inquiryId, newName }) {
+    const renamingInquiry = state.inquiries.find(
+      inquiry => inquiry.id === inquiryId
+    )
 
     renamingInquiry.name = newName
 
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 3948fa2..693b5a5 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -1,12 +1,12 @@
 export default {
-  setDb (state, db) {
+  setDb(state, db) {
     if (state.db) {
       state.db.shutDown()
     }
     state.db = db
   },
 
-  updateTab (state, { tab, newValues }) {
+  updateTab(state, { tab, newValues }) {
     const { name, id, query, viewType, viewOptions, isSaved } = newValues
     const oldId = tab.id
 
@@ -14,19 +14,31 @@ export default {
       state.currentTabId = id
     }
 
-    if (id) { tab.id = id }
-    if (name) { tab.name = name }
-    if (query) { tab.query = query }
-    if (viewType) { tab.viewType = viewType }
-    if (viewOptions) { tab.viewOptions = viewOptions }
-    if (isSaved !== undefined) { tab.isSaved = isSaved }
+    if (id) {
+      tab.id = id
+    }
+    if (name) {
+      tab.name = name
+    }
+    if (query) {
+      tab.query = query
+    }
+    if (viewType) {
+      tab.viewType = viewType
+    }
+    if (viewOptions) {
+      tab.viewOptions = viewOptions
+    }
+    if (isSaved !== undefined) {
+      tab.isSaved = isSaved
+    }
     if (isSaved) {
       // Saved inquiry is not predefined
       delete tab.isPredefined
     }
   },
 
-  deleteTab (state, tab) {
+  deleteTab(state, tab) {
     const index = state.tabs.indexOf(tab)
     // If closing tab is the current opened
     if (tab.id === state.currentTabId) {
@@ -44,27 +56,29 @@ export default {
     }
     state.tabs.splice(index, 1)
   },
-  setCurrentTabId (state, id) {
+  setCurrentTabId(state, id) {
     try {
       state.currentTabId = id
       state.currentTab = state.tabs.find(tab => tab.id === id)
     } catch (e) {
-      console.error('Can\'t open a tab id:' + id)
+      console.error("Can't open a tab id:" + id)
     }
   },
-  updatePredefinedInquiries (state, inquiries) {
-    state.predefinedInquiries = Array.isArray(inquiries) ? inquiries : [inquiries]
+  updatePredefinedInquiries(state, inquiries) {
+    state.predefinedInquiries = Array.isArray(inquiries)
+      ? inquiries
+      : [inquiries]
   },
-  setLoadingPredefinedInquiries (state, value) {
+  setLoadingPredefinedInquiries(state, value) {
     state.loadingPredefinedInquiries = value
   },
-  setPredefinedInquiriesLoaded (state, value) {
+  setPredefinedInquiriesLoaded(state, value) {
     state.predefinedInquiriesLoaded = value
   },
-  setInquiries (state, value) {
+  setInquiries(state, value) {
     state.inquiries = value
   },
-  setIsWorkspaceVisible (state, value) {
+  setIsWorkspaceVisible(state, value) {
     state.isWorkspaceVisible = value
   }
 }
diff --git a/src/tooltipMixin.js b/src/tooltipMixin.js
index c641e3b..d0e101c 100644
--- a/src/tooltipMixin.js
+++ b/src/tooltipMixin.js
@@ -1,5 +1,5 @@
 export default {
-  data () {
+  data() {
     return {
       tooltipStyle: {
         visibility: 'hidden'
@@ -7,13 +7,15 @@ export default {
     }
   },
   computed: {
-    tooltipElement () {
+    tooltipElement() {
       return this.$refs.tooltip
     }
   },
   methods: {
-    showTooltip (e, tooltipPosition) {
-      const position = tooltipPosition ? tooltipPosition.split('-') : ['top', 'right']
+    showTooltip(e, tooltipPosition) {
+      const position = tooltipPosition
+        ? tooltipPosition.split('-')
+        : ['top', 'right']
       const offset = 12
 
       if (position[0] === 'top') {
@@ -25,12 +27,13 @@ export default {
       if (position[1] === 'right') {
         this.tooltipStyle.left = e.clientX + offset + 'px'
       } else {
-        this.tooltipStyle.left = e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
+        this.tooltipStyle.left =
+          e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
       }
 
       this.tooltipStyle.visibility = 'visible'
     },
-    hideTooltip () {
+    hideTooltip() {
       this.tooltipStyle.visibility = 'hidden'
     }
   }
diff --git a/src/views/LoadView.vue b/src/views/LoadView.vue
index 303ebdf..c3c2874 100644
--- a/src/views/LoadView.vue
+++ b/src/views/LoadView.vue
@@ -1,17 +1,15 @@
 <template>
-    <div>
-      <logs
-        id="logs"
-        :messages="messages"
-      />
-      <button
-        v-if="hasErrors"
-        id="open-workspace-btn"
-        class="secondary"
-        @click="$router.push('/workspace?hide_schema=1')">
-        Open workspace
-      </button>
-    </div>
+  <div>
+    <logs id="logs" :messages="messages" />
+    <button
+      v-if="hasErrors"
+      id="open-workspace-btn"
+      class="secondary"
+      @click="$router.push('/workspace?hide_schema=1')"
+    >
+      Open workspace
+    </button>
+  </div>
 </template>
 
 <script>
@@ -25,7 +23,7 @@ export default {
   components: {
     Logs
   },
-  data () {
+  data() {
     return {
       newDb: null,
       messages: [],
@@ -34,11 +32,11 @@ export default {
     }
   },
   computed: {
-    hasErrors () {
+    hasErrors() {
       return this.dataMsg.type === 'error' || this.inquiryMsg.type === 'error'
     }
   },
-  async created () {
+  async created() {
     const {
       data_url: dataUrl,
       data_format: dataFormat,
@@ -65,7 +63,7 @@ export default {
     }
   },
   methods: {
-    async loadData (dataUrl, dataFormat) {
+    async loadData(dataUrl, dataFormat) {
       this.newDb = database.getNewDatabase()
       if (dataUrl) {
         this.dataMsg = {
@@ -95,7 +93,7 @@ export default {
       }
       this.$store.commit('setDb', this.newDb)
     },
-    async getSqliteDb (dataUrl) {
+    async getSqliteDb(dataUrl) {
       try {
         const filename = new URL(dataUrl).pathname.split('/').pop()
         const res = await fu.readFile(dataUrl)
@@ -114,7 +112,7 @@ export default {
         this.dataMsg.type = 'error'
       }
     },
-    async loadInquiries (inquiryUrl, inquiryIds = []) {
+    async loadInquiries(inquiryUrl, inquiryIds = []) {
       if (!inquiryUrl) {
         return []
       }
@@ -148,7 +146,7 @@ export default {
       // Loading indicator is not needed anymore
       clearTimeout(loadingInquiriesIndicator)
     },
-    async openInquiries (inquiries, maximize) {
+    async openInquiries(inquiries, maximize) {
       let tabToOpen = null
       const layout = maximize ? this.getLayout(maximize) : undefined
       for (const inquiry of inquiries) {
@@ -167,7 +165,7 @@ export default {
       this.$store.state.currentTab.execute()
     },
 
-    getLayout (panelToMaximize) {
+    getLayout(panelToMaximize) {
       if (panelToMaximize === 'dataView') {
         return {
           sqlEditor: 'hidden',
@@ -190,7 +188,6 @@ export default {
 #logs {
   margin: 8px auto;
   max-width: 800px;
-
 }
 
 #open-workspace-btn {
diff --git a/src/views/Main/AppDiagnosticInfo.vue b/src/views/Main/AppDiagnosticInfo.vue
index 2cebf83..e5452a0 100644
--- a/src/views/Main/AppDiagnosticInfo.vue
+++ b/src/views/Main/AppDiagnosticInfo.vue
@@ -5,22 +5,18 @@
       src="~@/assets/images/info.svg"
       @click="$modal.show('app-info')"
     />
-    <modal
-      modal-id="app-info"
-      class="dialog"
-      content-class="app-info-modal"
-    >
+    <modal modal-id="app-info" class="dialog" content-class="app-info-modal">
       <div class="dialog-header">
         App info
-        <close-icon @click="$modal.hide('app-info')"/>
+        <close-icon @click="$modal.hide('app-info')" />
       </div>
       <div class="dialog-body">
         <div v-for="(item, index) in info" :key="index" class="info-item">
-          {{item.name}}
-          <div class="divider"/>
+          {{ item.name }}
+          <div class="divider" />
           <div class="options">
             <div v-for="(opt, index) in item.info" :key="index">
-              {{opt}}
+              {{ opt }}
             </div>
           </div>
         </div>
@@ -36,7 +32,7 @@ import { version } from '../../../package.json'
 export default {
   name: 'AppDiagnosticInfo',
   components: { CloseIcon },
-  data () {
+  data() {
     return {
       info: [
         {
@@ -47,7 +43,7 @@ export default {
     }
   },
 
-  async created () {
+  async created() {
     const state = this.$store.state
     let result = (await state.db.execute('select sqlite_version()')).values
     this.info.push({
@@ -94,7 +90,7 @@ export default {
 }
 .info-item {
   margin-bottom: 32px;
-   font-size: 14px;
+  font-size: 14px;
 }
 .info-item:last-child {
   margin-bottom: 0;
diff --git a/src/views/Main/Inquiries/index.vue b/src/views/Main/Inquiries/index.vue
index f43d1cc..2e7e2a4 100644
--- a/src/views/Main/Inquiries/index.vue
+++ b/src/views/Main/Inquiries/index.vue
@@ -10,13 +10,21 @@
       id="loading-predefined-status"
       v-if="$store.state.loadingPredefinedInquiries"
     >
-      <loading-indicator/>
+      <loading-indicator />
       Loading predefined inquiries...
     </div>
-    <div id="my-inquiries-content" ref="my-inquiries-content" v-show="allInquiries.length > 0">
+    <div
+      id="my-inquiries-content"
+      ref="my-inquiries-content"
+      v-show="allInquiries.length > 0"
+    >
       <div id="my-inquiries-toolbar">
         <div id="toolbar-buttons">
-          <button id="toolbar-btns-import" class="toolbar" @click="importInquiries">
+          <button
+            id="toolbar-btns-import"
+            class="toolbar"
+            @click="importInquiries"
+          >
             Import
           </button>
           <button
@@ -37,7 +45,11 @@
           </button>
         </div>
         <div id="toolbar-search">
-          <text-field placeholder="Search inquiry by name" width="300px" v-model="filter"/>
+          <text-field
+            placeholder="Search inquiry by name"
+            width="300px"
+            v-model="filter"
+          />
         </div>
       </div>
 
@@ -46,27 +58,32 @@
       </div>
 
       <div v-show="showedInquiries.length > 0" class="rounded-bg">
-      <div class="header-container">
-        <div>
-          <div class="fixed-header" ref="name-th">
-            <check-box ref="mainCheckBox" theme="light" @click="toggleSelectAll"/>
-            <div class="name-th">Name</div>
-          </div>
-          <div class="fixed-header">
-            Created at
+        <div class="header-container">
+          <div>
+            <div class="fixed-header" ref="name-th">
+              <check-box
+                ref="mainCheckBox"
+                theme="light"
+                @click="toggleSelectAll"
+              />
+              <div class="name-th">Name</div>
+            </div>
+            <div class="fixed-header">Created at</div>
           </div>
         </div>
-      </div>
-      <div class="table-container" :style="{ 'max-height': `${maxTableHeight}px` }">
-        <table ref="table" class="sqliteviz-table">
-          <tbody>
-            <tr
-              v-for="(inquiry, index) in showedInquiries"
-              :key="inquiry.id"
-              @click="openInquiry(index)"
-            >
-              <td ref="name-td">
-                 <div class="cell-data">
+        <div
+          class="table-container"
+          :style="{ 'max-height': `${maxTableHeight}px` }"
+        >
+          <table ref="table" class="sqliteviz-table">
+            <tbody>
+              <tr
+                v-for="(inquiry, index) in showedInquiries"
+                :key="inquiry.id"
+                @click="openInquiry(index)"
+              >
+                <td ref="name-td">
+                  <div class="cell-data">
                     <check-box
                       ref="rowCheckBox"
                       :init="selectAll || selectedInquiriesIds.has(inquiry.id)"
@@ -81,82 +98,89 @@
                       @mouseleave="hideTooltip"
                     >
                       Predefined
-                      <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-                        Predefined inquiries come from the server.
-                        These inquiries can’t be deleted or renamed.
+                      <span
+                        class="icon-tooltip"
+                        :style="tooltipStyle"
+                        ref="tooltip"
+                      >
+                        Predefined inquiries come from the server. These
+                        inquiries can’t be deleted or renamed.
                       </span>
                     </div>
-                 </div>
-              </td>
-              <td>
-                <div class="second-column">
-                  <div class="date-container">
-                    {{ createdAtFormatted(inquiry.createdAt) }}
                   </div>
-                  <div class="icons-container">
-                    <rename-icon
-                      v-if="!inquiry.isPredefined"
-                      @click="showRenameDialog(inquiry.id)"
-                    />
-                    <copy-icon @click="duplicateInquiry(index)"/>
-                    <export-icon
-                      @click="exportToFile([inquiry], `${inquiry.name}.json`)"
-                      tooltip="Export inquiry to file"
-                      tooltip-position="top-left"
-                    />
-                    <delete-icon
-                      v-if="!inquiry.isPredefined"
-                      @click="showDeleteDialog((new Set()).add(inquiry.id))"
-                    />
+                </td>
+                <td>
+                  <div class="second-column">
+                    <div class="date-container">
+                      {{ createdAtFormatted(inquiry.createdAt) }}
+                    </div>
+                    <div class="icons-container">
+                      <rename-icon
+                        v-if="!inquiry.isPredefined"
+                        @click="showRenameDialog(inquiry.id)"
+                      />
+                      <copy-icon @click="duplicateInquiry(index)" />
+                      <export-icon
+                        @click="exportToFile([inquiry], `${inquiry.name}.json`)"
+                        tooltip="Export inquiry to file"
+                        tooltip-position="top-left"
+                      />
+                      <delete-icon
+                        v-if="!inquiry.isPredefined"
+                        @click="showDeleteDialog(new Set().add(inquiry.id))"
+                      />
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
+
+    <!--Rename Inquiry dialog  -->
+    <modal modal-id="rename" class="dialog" content-style="width: 560px;">
+      <div class="dialog-header">
+        Rename inquiry
+        <close-icon @click="$modal.hide('rename')" />
+      </div>
+      <div class="dialog-body">
+        <text-field
+          label="New inquiry name"
+          :error-msg="errorMsg"
+          v-model="newName"
+          width="100%"
+        />
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="$modal.hide('rename')">Cancel</button>
+        <button class="primary" @click="renameInquiry">Rename</button>
+      </div>
+    </modal>
+
+    <!--Delete Inquiry dialog  -->
+    <modal modal-id="delete" class="dialog" content-style="width: 480px;">
+      <div class="dialog-header">
+        Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
+        <close-icon @click="$modal.hide('delete')" />
+      </div>
+      <div class="dialog-body">
+        {{ deleteDialogMsg }}
+        <div
+          v-show="selectedInquiriesCount > selectedNotPredefinedCount"
+          id="note"
+        >
+          <img src="~@/assets/images/info.svg" />
+          Note: Predefined inquiries you've selected won't be deleted
+        </div>
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="$modal.hide('delete')">Cancel</button>
+        <button class="primary" @click="deleteInquiry">Delete</button>
+      </div>
+    </modal>
   </div>
-
-  <!--Rename Inquiry dialog  -->
-  <modal modal-id="rename" class="dialog" content-style="width: 560px;">
-    <div class="dialog-header">
-      Rename inquiry
-      <close-icon @click="$modal.hide('rename')"/>
-    </div>
-    <div class="dialog-body">
-      <text-field
-        label="New inquiry name"
-        :error-msg="errorMsg"
-        v-model="newName"
-        width="100%"
-      />
-    </div>
-    <div class="dialog-buttons-container">
-      <button class="secondary" @click="$modal.hide('rename')">Cancel</button>
-      <button class="primary" @click="renameInquiry">Rename</button>
-    </div>
-  </modal>
-
-  <!--Delete Inquiry dialog  -->
-  <modal modal-id="delete" class="dialog" content-style="width: 480px;">
-    <div class="dialog-header">
-      Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
-      <close-icon @click="$modal.hide('delete')"/>
-    </div>
-    <div class="dialog-body">
-      {{ deleteDialogMsg }}
-      <div v-show="selectedInquiriesCount > selectedNotPredefinedCount" id="note">
-        <img src="~@/assets/images/info.svg">
-        Note: Predefined inquiries you've selected won't be deleted
-      </div>
-    </div>
-    <div class="dialog-buttons-container">
-      <button class="secondary" @click="$modal.hide('delete')">Cancel</button>
-      <button class="primary" @click="deleteInquiry">Delete</button>
-    </div>
-  </modal>
-</div>
 </template>
 
 <script>
@@ -185,7 +209,7 @@ export default {
     LoadingIndicator
   },
   mixins: [tooltipMixin],
-  data () {
+  data() {
     return {
       filter: null,
       newName: null,
@@ -201,47 +225,51 @@ export default {
     }
   },
   computed: {
-    inquiries () {
+    inquiries() {
       return this.$store.state.inquiries
     },
-    predefinedInquiries () {
+    predefinedInquiries() {
       return this.$store.state.predefinedInquiries.map(inquiry => {
         inquiry.isPredefined = true
         return inquiry
       })
     },
-    predefinedInquiriesIds () {
+    predefinedInquiriesIds() {
       return new Set(this.predefinedInquiries.map(inquiry => inquiry.id))
     },
-    showedInquiries () {
+    showedInquiries() {
       let showedInquiries = this.allInquiries
       if (this.filter) {
         showedInquiries = showedInquiries.filter(
-          inquiry => inquiry.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0
+          inquiry =>
+            inquiry.name.toUpperCase().indexOf(this.filter.toUpperCase()) >= 0
         )
       }
       return showedInquiries
     },
 
-    allInquiries () {
+    allInquiries() {
       return this.predefinedInquiries.concat(this.inquiries)
     },
-    processedInquiryIndex () {
-      return this.inquiries.findIndex(inquiry => inquiry.id === this.processedInquiryId)
+    processedInquiryIndex() {
+      return this.inquiries.findIndex(
+        inquiry => inquiry.id === this.processedInquiryId
+      )
     },
-    deleteDialogMsg () {
-      if (!this.deleteGroup && (
-        this.processedInquiryIndex === null ||
+    deleteDialogMsg() {
+      if (
+        !this.deleteGroup &&
+        (this.processedInquiryIndex === null ||
           this.processedInquiryIndex < 0 ||
-          this.processedInquiryIndex > this.inquiries.length
-      )) {
+          this.processedInquiryIndex > this.inquiries.length)
+      ) {
         return ''
       }
 
       const deleteItem = this.deleteGroup
-        ? `${this.selectedNotPredefinedCount} ${this.selectedNotPredefinedCount > 1
-          ? 'inquiries'
-          : 'inquiry'}`
+        ? `${this.selectedNotPredefinedCount} ${
+            this.selectedNotPredefinedCount > 1 ? 'inquiries' : 'inquiry'
+          }`
         : `"${this.inquiries[this.processedInquiryIndex].name}"`
 
       return `Are you sure you want to delete ${deleteItem}?`
@@ -249,14 +277,16 @@ export default {
   },
   watch: {
     showedInquiries: {
-      handler () {
-        this.selectedInquiriesIds = new Set(this.showedInquiries
-          .filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
-          .map(inquiry => inquiry.id)
+      handler() {
+        this.selectedInquiriesIds = new Set(
+          this.showedInquiries
+            .filter(inquiry => this.selectedInquiriesIds.has(inquiry.id))
+            .map(inquiry => inquiry.id)
         )
         this.selectedInquiriesCount = this.selectedInquiriesIds.size
-        this.selectedNotPredefinedCount = ([...this.selectedInquiriesIds]
-          .filter(id => !this.predefinedInquiriesIds.has(id))).length
+        this.selectedNotPredefinedCount = [...this.selectedInquiriesIds].filter(
+          id => !this.predefinedInquiriesIds.has(id)
+        ).length
 
         if (this.selectedInquiriesIds.size < this.showedInquiries.length) {
           if (this.$refs.mainCheckBox) {
@@ -268,9 +298,11 @@ export default {
       deep: true
     }
   },
-  async created () {
-    const loadingPredefinedInquiries = this.$store.state.loadingPredefinedInquiries
-    const predefinedInquiriesLoaded = this.$store.state.predefinedInquiriesLoaded
+  async created() {
+    const loadingPredefinedInquiries =
+      this.$store.state.loadingPredefinedInquiries
+    const predefinedInquiriesLoaded =
+      this.$store.state.predefinedInquiriesLoaded
     if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
       try {
         this.$store.commit('setLoadingPredefinedInquiries', true)
@@ -283,7 +315,7 @@ export default {
       this.$store.commit('setLoadingPredefinedInquiries', false)
     }
   },
-  mounted () {
+  mounted() {
     this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
     this.resizeObserver.observe(this.$refs['my-inquiries-content'])
 
@@ -292,15 +324,15 @@ export default {
     this.calcNameWidth()
     this.calcMaxTableHeight()
   },
-  beforeUnmount () {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs['my-inquiries-content'])
     this.tableResizeObserver.unobserve(this.$refs.table)
   },
   methods: {
-    emitCreateTabEvent () {
+    emitCreateTabEvent() {
       eventBus.$emit('createNewInquiry')
     },
-    createdAtFormatted (value) {
+    createdAtFormatted(value) {
       if (!value) {
         return ''
       }
@@ -310,20 +342,24 @@ export default {
         hour: '2-digit',
         minute: '2-digit'
       }
-      return new Date(value).toLocaleDateString('en-GB', dateOptions) + ' ' +
-             new Date(value).toLocaleTimeString('en-GB', timeOptions)
+      return (
+        new Date(value).toLocaleDateString('en-GB', dateOptions) +
+        ' ' +
+        new Date(value).toLocaleTimeString('en-GB', timeOptions)
+      )
     },
-    calcNameWidth () {
-      const nameWidth = this.$refs['name-td'] && this.$refs['name-td'][0]
-        ? this.$refs['name-td'][0].getBoundingClientRect().width
-        : 0
+    calcNameWidth() {
+      const nameWidth =
+        this.$refs['name-td'] && this.$refs['name-td'][0]
+          ? this.$refs['name-td'][0].getBoundingClientRect().width
+          : 0
       this.$refs['name-th'].style = `width: ${nameWidth}px`
     },
-    calcMaxTableHeight () {
+    calcMaxTableHeight() {
       const freeSpace = this.$refs['my-inquiries-content'].offsetHeight - 200
       this.maxTableHeight = freeSpace - (freeSpace % 40) + 1
     },
-    openInquiry (index) {
+    openInquiry(index) {
       const tab = this.showedInquiries[index]
       setTimeout(() => {
         this.$store.dispatch('addTab', tab).then(id => {
@@ -332,13 +368,13 @@ export default {
         })
       })
     },
-    showRenameDialog (id) {
+    showRenameDialog(id) {
       this.errorMsg = null
       this.processedInquiryId = id
       this.newName = this.inquiries[this.processedInquiryIndex].name
       this.$modal.show('rename')
     },
-    renameInquiry () {
+    renameInquiry() {
       if (!this.newName) {
         this.errorMsg = "Inquiry name can't be empty"
         return
@@ -351,21 +387,26 @@ export default {
       // hide dialog
       this.$modal.hide('rename')
     },
-    duplicateInquiry (index) {
-      const newInquiry = storedInquiries.duplicateInquiry(this.showedInquiries[index])
+    duplicateInquiry(index) {
+      const newInquiry = storedInquiries.duplicateInquiry(
+        this.showedInquiries[index]
+      )
       this.$store.dispatch('addInquiry', newInquiry)
     },
-    showDeleteDialog (idsSet) {
+    showDeleteDialog(idsSet) {
       this.deleteGroup = idsSet.size > 1
       if (!this.deleteGroup) {
         this.processedInquiryId = idsSet.values().next().value
       }
       this.$modal.show('delete')
     },
-    deleteInquiry () {
+    deleteInquiry() {
       this.$modal.hide('delete')
       if (!this.deleteGroup) {
-        this.$store.dispatch('deleteInquiries', new Set().add(this.processedInquiryId))
+        this.$store.dispatch(
+          'deleteInquiries',
+          new Set().add(this.processedInquiryId)
+        )
 
         // Clear checkbox
         if (this.selectedInquiriesIds.has(this.processedInquiryId)) {
@@ -379,27 +420,31 @@ export default {
       }
       this.selectedInquiriesCount = this.selectedInquiriesIds.size
     },
-    exportToFile (inquiryList, fileName) {
+    exportToFile(inquiryList, fileName) {
       storedInquiries.export(inquiryList, fileName)
     },
-    exportSelectedInquiries () {
-      const inquiryList = this.allInquiries.filter(
-        inquiry => this.selectedInquiriesIds.has(inquiry.id)
+    exportSelectedInquiries() {
+      const inquiryList = this.allInquiries.filter(inquiry =>
+        this.selectedInquiriesIds.has(inquiry.id)
       )
 
       this.exportToFile(inquiryList, 'My sqliteviz inquiries.json')
     },
 
-    importInquiries () {
-      storedInquiries.importInquiries()
-        .then(importedInquiries => {
-          this.$store.commit('setInquiries', this.inquiries.concat(importedInquiries))
-        })
+    importInquiries() {
+      storedInquiries.importInquiries().then(importedInquiries => {
+        this.$store.commit(
+          'setInquiries',
+          this.inquiries.concat(importedInquiries)
+        )
+      })
     },
 
-    toggleSelectAll (checked) {
+    toggleSelectAll(checked) {
       this.selectAll = checked
-      this.$refs.rowCheckBox.forEach(item => { item.checked = checked })
+      this.$refs.rowCheckBox.forEach(item => {
+        item.checked = checked
+      })
 
       this.selectedInquiriesIds = checked
         ? new Set(this.showedInquiries.map(inquiry => inquiry.id))
@@ -407,12 +452,13 @@ export default {
 
       this.selectedInquiriesCount = this.selectedInquiriesIds.size
       this.selectedNotPredefinedCount = checked
-        ? ([...this.selectedInquiriesIds].filter(id => !this.predefinedInquiriesIds.has(id)))
-            .length
+        ? [...this.selectedInquiriesIds].filter(
+            id => !this.predefinedInquiriesIds.has(id)
+          ).length
         : 0
     },
 
-    toggleRow (checked, id) {
+    toggleRow(checked, id) {
       const isPredefined = this.predefinedInquiriesIds.has(id)
       if (checked) {
         this.selectedInquiriesIds.add(id)
diff --git a/src/views/Main/Inquiries/svg/copy.vue b/src/views/Main/Inquiries/svg/copy.vue
index 9df258c..3e4720e 100644
--- a/src/views/Main/Inquiries/svg/copy.vue
+++ b/src/views/Main/Inquiries/svg/copy.vue
@@ -34,7 +34,7 @@ export default {
   emits: ['click'],
   mixins: [tooltipMixin],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/views/Main/Inquiries/svg/delete.vue b/src/views/Main/Inquiries/svg/delete.vue
index 133d40e..edd6e22 100644
--- a/src/views/Main/Inquiries/svg/delete.vue
+++ b/src/views/Main/Inquiries/svg/delete.vue
@@ -32,7 +32,7 @@ export default {
   emits: ['click'],
   mixins: [tooltipMixin],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/views/Main/Inquiries/svg/rename.vue b/src/views/Main/Inquiries/svg/rename.vue
index 7c580a4..650d118 100644
--- a/src/views/Main/Inquiries/svg/rename.vue
+++ b/src/views/Main/Inquiries/svg/rename.vue
@@ -32,7 +32,7 @@ export default {
   emits: ['click'],
   mixins: [tooltipMixin],
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
diff --git a/src/views/Main/MainMenu.vue b/src/views/Main/MainMenu.vue
index 3d0d03c..6c2aed0 100644
--- a/src/views/Main/MainMenu.vue
+++ b/src/views/Main/MainMenu.vue
@@ -2,7 +2,7 @@
   <nav>
     <div id="nav-links">
       <a href="https://sqliteviz.com">
-        <img src="~@/assets/images/logo_simple.svg">
+        <img src="~@/assets/images/logo_simple.svg" />
       </a>
       <router-link to="/workspace">Workspace</router-link>
       <router-link to="/inquiries">Inquiries</router-link>
@@ -18,11 +18,7 @@
       >
         Save
       </button>
-      <button
-        id="create-btn"
-        class="primary"
-        @click="createNewInquiry"
-      >
+      <button id="create-btn" class="primary" @click="createNewInquiry">
         Create
       </button>
       <app-diagnostic-info />
@@ -32,13 +28,13 @@
     <modal modal-id="save" class="dialog" content-style="width: 560px;">
       <div class="dialog-header">
         Save inquiry
-        <close-icon @click="cancelSave"/>
+        <close-icon @click="cancelSave" />
       </div>
       <div class="dialog-body">
         <div v-show="isPredefined" id="save-note">
-          <img src="~@/assets/images/info.svg">
-          Note: Predefined inquiries can't be edited.
-          That's why your modifications will be saved as a new inquiry. Enter the name for it.
+          <img src="~@/assets/images/info.svg" />
+          Note: Predefined inquiries can't be edited. That's why your
+          modifications will be saved as a new inquiry. Enter the name for it.
         </div>
         <text-field
           label="Inquiry name"
@@ -70,36 +66,39 @@ export default {
     CloseIcon,
     AppDiagnosticInfo
   },
-  data () {
+  data() {
     return {
       name: '',
       errorMsg: null
     }
   },
   computed: {
-    currentInquiry () {
+    currentInquiry() {
       return this.$store.state.currentTab
     },
-    isSaved () {
+    isSaved() {
       return this.currentInquiry && this.currentInquiry.isSaved
     },
-    isPredefined () {
+    isPredefined() {
       return this.currentInquiry && this.currentInquiry.isPredefined
     },
-    runDisabled () {
-      return this.currentInquiry && (!this.$store.state.db || !this.currentInquiry.query)
+    runDisabled() {
+      return (
+        this.currentInquiry &&
+        (!this.$store.state.db || !this.currentInquiry.query)
+      )
     }
   },
-  created () {
+  created() {
     eventBus.$on('createNewInquiry', this.createNewInquiry)
     eventBus.$on('saveInquiry', this.checkInquiryBeforeSave)
     document.addEventListener('keydown', this._keyListener)
   },
-  beforeUnmount () {
+  beforeUnmount() {
     document.removeEventListener('keydown', this._keyListener)
   },
   methods: {
-    createNewInquiry () {
+    createNewInquiry() {
       this.$store.dispatch('addTab').then(id => {
         this.$store.commit('setCurrentTabId', id)
         if (this.$route.path !== '/workspace') {
@@ -109,11 +108,11 @@ export default {
 
       events.send('inquiry.create', null, { auto: false })
     },
-    cancelSave () {
+    cancelSave() {
       this.$modal.hide('save')
       eventBus.$off('inquirySaved')
     },
-    checkInquiryBeforeSave () {
+    checkInquiryBeforeSave() {
       this.errorMsg = null
       this.name = ''
 
@@ -123,10 +122,10 @@ export default {
         this.saveInquiry()
       }
     },
-    async saveInquiry () {
+    async saveInquiry() {
       const isNeedName = storedInquiries.isTabNeedName(this.currentInquiry)
       if (isNeedName && !this.name) {
-        this.errorMsg = 'Inquiry name can\'t be empty'
+        this.errorMsg = "Inquiry name can't be empty"
         return
       }
       const dataSet = this.currentInquiry.result
@@ -168,7 +167,7 @@ export default {
       eventBus.$emit('inquirySaved')
       events.send('inquiry.save')
     },
-    _keyListener (e) {
+    _keyListener(e) {
       if (this.$route.path === '/workspace') {
         // Run query Ctrl+R or Ctrl+Enter
         if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
diff --git a/src/views/Main/Workspace/Schema/TableDescription.vue b/src/views/Main/Workspace/Schema/TableDescription.vue
index 4d3f134..10d8ea9 100644
--- a/src/views/Main/Workspace/Schema/TableDescription.vue
+++ b/src/views/Main/Workspace/Schema/TableDescription.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div @click="colVisible = !colVisible" class="table-name">
-      <tree-chevron :expanded="colVisible"/>
+      <tree-chevron :expanded="colVisible" />
       {{ name }}
     </div>
     <div v-show="colVisible" class="columns">
@@ -20,7 +20,7 @@ export default {
   name: 'TableDescription',
   components: { TreeChevron },
   props: ['name', 'columns'],
-  data () {
+  data() {
     return {
       colVisible: false
     }
@@ -29,7 +29,8 @@ export default {
 </script>
 
 <style scoped>
-.table-name, .column {
+.table-name,
+.column {
   margin-top: 11px;
 }
 
diff --git a/src/views/Main/Workspace/Schema/index.vue b/src/views/Main/Workspace/Schema/index.vue
index 3d1ad8e..f9b0615 100644
--- a/src/views/Main/Workspace/Schema/index.vue
+++ b/src/views/Main/Workspace/Schema/index.vue
@@ -1,16 +1,16 @@
 <template>
   <div id="schema-container">
     <div id="schema-filter">
-      <text-field placeholder="Search table" width="100%" v-model="filter"/>
+      <text-field placeholder="Search table" width="100%" v-model="filter" />
     </div>
     <div id="db">
       <div @click="schemaVisible = !schemaVisible" class="db-name">
-        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible"/>
+        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
         {{ dbName }}
       </div>
       <db-uploader id="db-edit" type="small" />
-      <export-icon tooltip="Export database" @click="exportToFile"/>
-      <add-table-icon @click="addCsvJson"/>
+      <export-icon tooltip="Export database" @click="exportToFile" />
+      <add-table-icon @click="addCsvJson" />
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -53,7 +53,7 @@ export default {
     AddTableIcon,
     CsvJsonImport
   },
-  data () {
+  data() {
     return {
       schemaVisible: true,
       filter: null,
@@ -61,7 +61,7 @@ export default {
     }
   },
   computed: {
-    schema () {
+    schema() {
       if (!this.$store.state.db.schema) {
         return []
       }
@@ -69,18 +69,19 @@ export default {
       return !this.filter
         ? this.$store.state.db.schema
         : this.$store.state.db.schema.filter(
-          table => table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
-        )
+            table =>
+              table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
+          )
     },
-    dbName () {
+    dbName() {
       return this.$store.state.db.dbName
     }
   },
   methods: {
-    exportToFile () {
+    exportToFile() {
       this.$store.state.db.export(`${this.dbName}.sqlite`)
     },
-    async addCsvJson () {
+    async addCsvJson() {
       this.file = await fIo.getFileFromUser('.csv,.json,.ndjson')
       await this.$nextTick()
       const csvJsonImportModal = this.$refs.addCsvJson
@@ -119,7 +120,8 @@ export default {
   background-image: linear-gradient(white 73%, rgba(255, 255, 255, 0));
   z-index: 2;
 }
-.schema, .db-name {
+.schema,
+.db-name {
   color: var(--color-text-base);
   font-size: 13px;
   white-space: nowrap;
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
index 26d2529..ab677b0 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -1,15 +1,23 @@
 <template>
   <div v-show="visible" class="chart-container" ref="chartContainer">
     <div class="warning chart-warning" v-show="!dataSources && visible">
-      There is no data to build a chart. Run your SQL query and make sure the result is not empty.
+      There is no data to build a chart. Run your SQL query and make sure the
+      result is not empty.
     </div>
-    <div class="chart" :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }">
+    <div
+      class="chart"
+      :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
+    >
       <PlotlyEditor
-         v-show="visible"
+        v-show="visible"
         :data="state.data"
         :layout="state.layout"
         :frames="state.frames"
-        :config="{ editable: true, displaylogo: false, modeBarButtonsToRemove: ['toImage'] }"
+        :config="{
+          editable: true,
+          displaylogo: false,
+          modeBarButtonsToRemove: ['toImage']
+        }"
         :dataSources="dataSources"
         :dataSourceOptions="dataSourceOptions"
         :plotly="plotly"
@@ -21,7 +29,7 @@
         @render="onRender"
       />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -38,15 +46,17 @@ import events from '@/lib/utils/events'
 export default {
   name: 'Chart',
   props: [
-    'dataSources', 'initOptions',
-    'importToPngEnabled', 'importToSvgEnabled',
+    'dataSources',
+    'initOptions',
+    'importToPngEnabled',
+    'importToSvgEnabled',
     'forPivot'
   ],
   emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
   components: {
     PlotlyEditor: applyPureReactInVue(ReactPlotlyEditor)
   },
-  data () {
+  data() {
     return {
       plotly,
       state: this.initOptions || {
@@ -60,20 +70,23 @@ export default {
     }
   },
   computed: {
-    dataSourceOptions () {
+    dataSourceOptions() {
       return chartHelper.getOptionsFromDataSources(this.dataSources)
     }
   },
-  created () {
+  created() {
     // https://github.com/plotly/plotly.js/issues/4555
     plotly.setPlotConfig({
       notifyOnLogging: 1
     })
     this.$watch(
-      () => this.state && this.state.data && this.state.data
-        .map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
-        .join(','),
-      (value) => {
+      () =>
+        this.state &&
+        this.state.data &&
+        this.state.data
+          .map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
+          .join(','),
+      value => {
         events.send('viz_plotly.render', null, {
           type: value,
           pivot: !!this.forPivot
@@ -83,21 +96,21 @@ export default {
     )
     this.$emit('update:importToSvgEnabled', true)
   },
-  mounted () {
+  mounted() {
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.chartContainer)
   },
-  activated () {
+  activated() {
     this.useResizeHandler = true
   },
-  deactivated () {
+  deactivated() {
     this.useResizeHandler = false
   },
-  beforeUnmount () {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.chartContainer)
   },
   watch: {
-    dataSources () {
+    dataSources() {
       // we need to update state.data in order to update the graph
       // https://github.com/plotly/react-chart-editor/issues/948
       if (this.dataSources) {
@@ -106,41 +119,44 @@ export default {
     }
   },
   methods: {
-    async handleResize () {
+    async handleResize() {
       this.visible = false
       await this.$nextTick()
       this.visible = true
     },
-    onRender (data, layout, frames) {
+    onRender(data, layout, frames) {
       // TODO: check changes and enable Save button if needed
     },
-    update (data, layout, frames) {
+    update(data, layout, frames) {
       this.state = { data, layout, frames }
       this.$emit('update')
     },
-    getOptionsForSave () {
+    getOptionsForSave() {
       return chartHelper.getOptionsForSave(this.state, this.dataSources)
     },
-    async saveAsPng () {
+    async saveAsPng() {
       const url = await this.prepareCopy()
       this.$emit('loadingImageCompleted')
       fIo.downloadFromUrl(url, 'chart')
     },
 
-    async saveAsSvg () {
+    async saveAsSvg() {
       const url = await this.prepareCopy('svg')
       fIo.downloadFromUrl(url, 'chart')
     },
 
-    saveAsHtml () {
+    saveAsHtml() {
       fIo.exportToFile(
         chartHelper.getHtml(this.state),
         'chart.html',
         'text/html'
       )
     },
-    async prepareCopy (type = 'png') {
-      return await chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
+    async prepareCopy(type = 'png') {
+      return await chartHelper.getImageDataUrl(
+        this.$refs.plotlyEditor.$el,
+        type
+      )
     }
   }
 }
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue
index 2f359b8..18166f2 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue
@@ -1,11 +1,11 @@
 <template>
-  <div :class="['pivot-sort-btn', direction] " @click="changeSorting">
-  {{ modelValue.includes('key') ? 'key' : 'value' }}
-  <sort-icon
-    class="sort-icon"
-    :horizontal="direction === 'col'"
-    :asc="modelValue.includes('a_to_z')"
-  />
+  <div :class="['pivot-sort-btn', direction]" @click="changeSorting">
+    {{ modelValue.includes('key') ? 'key' : 'value' }}
+    <sort-icon
+      class="sort-icon"
+      :horizontal="direction === 'col'"
+      :asc="modelValue.includes('a_to_z')"
+    />
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default {
     SortIcon
   },
   methods: {
-    changeSorting () {
+    changeSorting() {
       if (this.modelValue === 'key_a_to_z') {
         this.$emit('update:modelValue', 'value_a_to_z')
       } else if (this.modelValue === 'value_a_to_z') {
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
index cc68a7d..f00e1bd 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pivot-ui">
-    <div :class="{collapsed}">
+    <div :class="{ collapsed }">
       <div class="row">
         <label>Columns</label>
         <multiselect
@@ -139,7 +139,12 @@
 import $ from 'jquery'
 import Multiselect from 'vue-multiselect'
 import PivotSortBtn from './PivotSortBtn'
-import { renderers, aggregators, zeroValAggregators, twoValAggregators } from '../pivotHelper'
+import {
+  renderers,
+  aggregators,
+  zeroValAggregators,
+  twoValAggregators
+} from '../pivotHelper'
 
 export default {
   name: 'pivotUi',
@@ -149,23 +154,35 @@ export default {
     Multiselect,
     PivotSortBtn
   },
-  data () {
-    const aggregatorName = (this.modelValue && this.modelValue.aggregatorName) || 'Count'
-    const rendererName = (this.modelValue && this.modelValue.rendererName) || 'Table'
+  data() {
+    const aggregatorName =
+      (this.modelValue && this.modelValue.aggregatorName) || 'Count'
+    const rendererName =
+      (this.modelValue && this.modelValue.rendererName) || 'Table'
     return {
       collapsed: false,
-      renderer: { name: rendererName, fun: $.pivotUtilities.renderers[rendererName] },
-      aggregator: { name: aggregatorName, fun: $.pivotUtilities.aggregators[aggregatorName] },
+      renderer: {
+        name: rendererName,
+        fun: $.pivotUtilities.renderers[rendererName]
+      },
+      aggregator: {
+        name: aggregatorName,
+        fun: $.pivotUtilities.aggregators[aggregatorName]
+      },
       rows: (this.modelValue && this.modelValue.rows) || [],
       cols: (this.modelValue && this.modelValue.cols) || [],
-      val1: (this.modelValue && this.modelValue.vals && this.modelValue.vals[0]) || '',
-      val2: (this.modelValue && this.modelValue.vals && this.modelValue.vals[1]) || '',
+      val1:
+        (this.modelValue && this.modelValue.vals && this.modelValue.vals[0]) ||
+        '',
+      val2:
+        (this.modelValue && this.modelValue.vals && this.modelValue.vals[1]) ||
+        '',
       colOrder: (this.modelValue && this.modelValue.colOrder) || 'key_a_to_z',
       rowOrder: (this.modelValue && this.modelValue.rowOrder) || 'key_a_to_z'
     }
   },
   computed: {
-    valCount () {
+    valCount() {
       if (zeroValAggregators.includes(this.aggregator.name)) {
         return 0
       }
@@ -176,47 +193,47 @@ export default {
 
       return 1
     },
-    renderers () {
+    renderers() {
       return renderers
     },
-    aggregators () {
+    aggregators() {
       return aggregators
     },
-    rowsToSelect () {
+    rowsToSelect() {
       return this.keyNames.filter(key => !this.cols.includes(key))
     },
-    colsToSelect () {
+    colsToSelect() {
       return this.keyNames.filter(key => !this.rows.includes(key))
     }
   },
   watch: {
-    renderer () {
+    renderer() {
       this.returnValue()
     },
-    aggregator () {
+    aggregator() {
       this.returnValue()
     },
-    rows () {
+    rows() {
       this.returnValue()
     },
-    cols () {
+    cols() {
       this.returnValue()
     },
-    val1 () {
+    val1() {
       this.returnValue()
     },
-    val2 () {
+    val2() {
       this.returnValue()
     },
-    colOrder () {
+    colOrder() {
       this.returnValue()
     },
-    rowOrder () {
+    rowOrder() {
       this.returnValue()
     }
   },
   methods: {
-    returnValue () {
+    returnValue() {
       const vals = []
       for (let i = 1; i <= this.valCount; i++) {
         vals.push(this[`val${i}`])
@@ -281,7 +298,6 @@ export default {
   white-space: nowrap;
   margin: auto;
   cursor: pointer;
-
 }
 
 .switcher:hover {
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
index 9de33f5..dad90d7 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue
@@ -1,27 +1,28 @@
 <template>
-<div class="pivot-container">
-  <div class="warning pivot-warning" v-show="!dataSources">
-    There is no data to build a pivot. Run your SQL query and make sure the result is not empty.
-  </div>
-  <pivot-ui
-    :key-names="columns"
-    v-model="pivotOptions"
-    @update="$emit('update')"
-  />
-  <div ref="pivotOutput" class="pivot-output"/>
-  <div
-    ref="customChartOutput"
-    v-show="viewCustomChart"
-    class="custom-chart-output"
-  >
-    <chart
-      ref="customChart"
-      v-bind="customChartComponentProps"
+  <div class="pivot-container">
+    <div class="warning pivot-warning" v-show="!dataSources">
+      There is no data to build a pivot. Run your SQL query and make sure the
+      result is not empty.
+    </div>
+    <pivot-ui
+      :key-names="columns"
+      v-model="pivotOptions"
       @update="$emit('update')"
-      @loadingImageCompleted="$emit('loadingImageCompleted')"
     />
+    <div ref="pivotOutput" class="pivot-output" />
+    <div
+      ref="customChartOutput"
+      v-show="viewCustomChart"
+      class="custom-chart-output"
+    >
+      <chart
+        ref="customChart"
+        v-bind="customChartComponentProps"
+        @update="$emit('update')"
+        @loadingImageCompleted="$emit('loadingImageCompleted')"
+      />
+    </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -37,7 +38,12 @@ import events from '@/lib/utils/events'
 
 export default {
   name: 'pivot',
-  props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'],
+  props: [
+    'dataSources',
+    'initOptions',
+    'importToPngEnabled',
+    'importToSvgEnabled'
+  ],
   emits: [
     'loadingImageCompleted',
     'update',
@@ -48,7 +54,7 @@ export default {
     PivotUi,
     Chart
   },
-  data () {
+  data() {
     return {
       resizeObserver: null,
       pivotOptions: !this.initOptions
@@ -83,25 +89,25 @@ export default {
     }
   },
   computed: {
-    columns () {
+    columns() {
       return Object.keys(this.dataSources || {})
     },
 
-    viewStandartChart () {
+    viewStandartChart() {
       return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers
     },
 
-    viewCustomChart () {
+    viewCustomChart() {
       return this.pivotOptions.rendererName === 'Custom chart'
     }
   },
   watch: {
-    dataSources () {
+    dataSources() {
       this.show()
     },
     'pivotOptions.rendererName': {
       immediate: true,
-      handler () {
+      handler() {
         this.$emit(
           'update:importToPngEnabled',
           this.pivotOptions.rendererName !== 'TSV Export'
@@ -115,22 +121,22 @@ export default {
         })
       }
     },
-    pivotOptions () {
+    pivotOptions() {
       this.show()
     }
   },
-  mounted () {
+  mounted() {
     this.show()
     // We need to detect resizing because plotly doesn't resize when resize its container
     // but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.customChartOutput)
   },
-  beforeUnmount () {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.customChartOutput)
   },
   methods: {
-    handleResize () {
+    handleResize() {
       // hack: plotly changes size only on window.resize event,
       // so, we trigger it when container resizes (e.g. when move splitter)
       if (this.viewStandartChart) {
@@ -138,7 +144,7 @@ export default {
       }
     },
 
-    show () {
+    show() {
       const options = { ...this.pivotOptions }
       if (this.viewStandartChart) {
         options.rendererOptions = {
@@ -163,7 +169,9 @@ export default {
 
       $(this.$refs.pivotOutput).pivot(
         function (callback) {
-          const rowCount = !this.dataSources ? 0 : this.dataSources[this.columns[0]].length
+          const rowCount = !this.dataSources
+            ? 0
+            : this.dataSources[this.columns[0]].length
           for (let i = 1; i <= rowCount; i++) {
             const row = {}
             this.columns.forEach(col => {
@@ -181,7 +189,7 @@ export default {
       }
     },
 
-    getOptionsForSave () {
+    getOptionsForSave() {
       const options = { ...this.pivotOptions }
       if (this.viewCustomChart) {
         const chartComponent = this.$refs.customChart
@@ -192,20 +200,22 @@ export default {
       return options
     },
 
-    async saveAsPng () {
+    async saveAsPng() {
       if (this.viewCustomChart) {
         this.$refs.customChart.saveAsPng()
       } else {
         const source = this.viewStandartChart
           ? await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
-          : (await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)).toDataURL('image/png')
+          : (
+              await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
+            ).toDataURL('image/png')
 
         this.$emit('loadingImageCompleted')
         fIo.downloadFromUrl(source, 'pivot')
       }
     },
 
-    async prepareCopy () {
+    async prepareCopy() {
       if (this.viewCustomChart) {
         return await this.$refs.customChart.prepareCopy()
       }
@@ -215,16 +225,19 @@ export default {
       return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
     },
 
-    async saveAsSvg () {
+    async saveAsSvg() {
       if (this.viewCustomChart) {
         this.$refs.customChart.saveAsSvg()
       } else if (this.viewStandartChart) {
-        const url = await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'svg')
+        const url = await chartHelper.getImageDataUrl(
+          this.$refs.pivotOutput,
+          'svg'
+        )
         fIo.downloadFromUrl(url, 'pivot')
       }
     },
 
-    saveAsHtml () {
+    saveAsHtml() {
       if (this.viewCustomChart) {
         this.$refs.customChart.saveAsHtml()
         return
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js
index af8cd35..70f60d0 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js
@@ -17,7 +17,7 @@ export const twoValAggregators = [
   '80% Lower Bound'
 ]
 
-export function _getDataSources (pivotData) {
+export function _getDataSources(pivotData) {
   const rowKeys = pivotData.getRowKeys()
   const colKeys = pivotData.getColKeys()
 
@@ -49,7 +49,7 @@ export function _getDataSources (pivotData) {
   return Object.assign(dataSources, dataSourcesByCols, dataSourcesByRows)
 }
 
-function customChartRenderer (data, options) {
+function customChartRenderer(data, options) {
   const propsRef = options.getCustomComponentsProps()
   propsRef.dataSources = _getDataSources(data)
   return null
@@ -69,19 +69,21 @@ export const renderers = Object.keys($.pivotUtilities.renderers).map(key => {
   }
 })
 
-export const aggregators = Object.keys($.pivotUtilities.aggregators).map(key => {
-  return {
-    name: key,
-    fun: $.pivotUtilities.aggregators[key]
+export const aggregators = Object.keys($.pivotUtilities.aggregators).map(
+  key => {
+    return {
+      name: key,
+      fun: $.pivotUtilities.aggregators[key]
+    }
   }
-})
+)
 
-export async function getPivotCanvas (pivotOutput) {
+export async function getPivotCanvas(pivotOutput) {
   const tableElement = pivotOutput.querySelector('.pvtTable')
   return await html2canvas(tableElement, { logging: false })
 }
 
-export function getPivotHtml (pivotOutput) {
+export function getPivotHtml(pivotOutput) {
   return `
       <style>
         table.pvtTable {
diff --git a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
index 51b7e69..8661b92 100644
--- a/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/DataView/index.vue
@@ -31,7 +31,7 @@
         <pivot-icon />
       </icon-button>
 
-      <div class="side-tool-bar-divider"/>
+      <div class="side-tool-bar-divider" />
 
       <icon-button
         :disabled="!importToPngEnabled || loadingImage"
@@ -67,20 +67,20 @@
         tooltip-position="top-left"
         @click="prepareCopy"
       >
-        <clipboard-icon/>
+        <clipboard-icon />
       </icon-button>
     </side-tool-bar>
 
-  <loading-dialog
-    loadingMsg="Rendering the visualisation..."
-    successMsg="Image is ready"
-    actionBtnName="Copy"
-    name="prepareCopy"
-    title="Copy to clipboard"
-    :loading="preparingCopy"
-    @action="copyToClipboard"
-    @cancel="cancelCopy"
-  />
+    <loading-dialog
+      loadingMsg="Rendering the visualisation..."
+      successMsg="Image is ready"
+      actionBtnName="Copy"
+      name="prepareCopy"
+      title="Copy to clipboard"
+      :loading="preparingCopy"
+      @action="copyToClipboard"
+      @cancel="cancelCopy"
+    />
   </div>
 </template>
 
@@ -117,7 +117,7 @@ export default {
     ClipboardIcon,
     loadingDialog
   },
-  data () {
+  data() {
     return {
       mode: this.initMode || 'chart',
       importToPngEnabled: true,
@@ -129,18 +129,18 @@ export default {
     }
   },
   computed: {
-    plotlyInPivot () {
+    plotlyInPivot() {
       return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
     }
   },
   watch: {
-    mode () {
+    mode() {
       this.$emit('update')
       this.importToPngEnabled = true
     }
   },
   methods: {
-    async saveAsPng () {
+    async saveAsPng() {
       this.loadingImage = true
       /*
       setTimeout does its thing by putting its callback on the callback queue.
@@ -160,10 +160,10 @@ export default {
       this.$refs.viewComponent.saveAsPng()
       this.exportSignal('png')
     },
-    getOptionsForSave () {
+    getOptionsForSave() {
       return this.$refs.viewComponent.getOptionsForSave()
     },
-    async prepareCopy () {
+    async prepareCopy() {
       if ('ClipboardItem' in window) {
         this.preparingCopy = true
         this.$modal.show('prepareCopy')
@@ -172,7 +172,7 @@ export default {
         await time.sleep(0)
         this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
         const t1 = performance.now()
-        if ((t1 - t0) < 950) {
+        if (t1 - t0 < 950) {
           this.$modal.hide('prepareCopy')
           this.copyToClipboard()
         } else {
@@ -181,30 +181,30 @@ export default {
       } else {
         alert(
           "Your browser doesn't support copying images into the clipboard. " +
-          'If you use Firefox you can enable it ' +
-          'by setting dom.events.asyncClipboard.clipboardItem to true.'
+            'If you use Firefox you can enable it ' +
+            'by setting dom.events.asyncClipboard.clipboardItem to true.'
         )
       }
     },
-    async copyToClipboard () {
+    async copyToClipboard() {
       cIo.copyImage(this.dataToCopy)
       this.$modal.hide('prepareCopy')
       this.exportSignal('clipboard')
     },
-    cancelCopy () {
+    cancelCopy() {
       this.dataToCopy = null
       this.$modal.hide('prepareCopy')
     },
 
-    saveAsSvg () {
+    saveAsSvg() {
       this.$refs.viewComponent.saveAsSvg()
       this.exportSignal('svg')
     },
-    saveAsHtml () {
+    saveAsHtml() {
       this.$refs.viewComponent.saveAsHtml()
       this.exportSignal('html')
     },
-    exportSignal (to) {
+    exportSignal(to) {
       const eventLabels = { type: to }
 
       if (this.mode === 'chart' || this.plotlyInPivot) {
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
index 2e058a2..596d365 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
@@ -1,42 +1,42 @@
 <template>
-    <div class="record-navigator">
-        <icon-button
-            :disabled="modelValue === 0"
-            tooltip="First row"
-            tooltip-position="top-left"
-            class="first"
-            @click="$emit('update:modelValue', 0)"
-        >
-            <edge-arrow-icon :disabled="false" />
-        </icon-button>
-        <icon-button
-            :disabled="modelValue === 0"
-            tooltip="Previous row"
-            tooltip-position="top-left"
-            class="prev"
-            @click="$emit('update:modelValue', modelValue - 1)"
-        >
-            <arrow-icon :disabled="false" />
-        </icon-button>
-        <icon-button
-            :disabled="modelValue === total - 1"
-            tooltip="Next row"
-            tooltip-position="top-left"
-            class="next"
-            @click="$emit('update:modelValue', modelValue + 1)"
-        >
-            <arrow-icon :disabled="false" />
-        </icon-button>
-        <icon-button
-            :disabled="modelValue === total - 1"
-            tooltip="Last row"
-            tooltip-position="top-left"
-            class="last"
-            @click="$emit('update:modelValue', total - 1)"
-        >
-            <edge-arrow-icon :disabled="false" />
-        </icon-button>
-    </div>
+  <div class="record-navigator">
+    <icon-button
+      :disabled="modelValue === 0"
+      tooltip="First row"
+      tooltip-position="top-left"
+      class="first"
+      @click="$emit('update:modelValue', 0)"
+    >
+      <edge-arrow-icon :disabled="false" />
+    </icon-button>
+    <icon-button
+      :disabled="modelValue === 0"
+      tooltip="Previous row"
+      tooltip-position="top-left"
+      class="prev"
+      @click="$emit('update:modelValue', modelValue - 1)"
+    >
+      <arrow-icon :disabled="false" />
+    </icon-button>
+    <icon-button
+      :disabled="modelValue === total - 1"
+      tooltip="Next row"
+      tooltip-position="top-left"
+      class="next"
+      @click="$emit('update:modelValue', modelValue + 1)"
+    >
+      <arrow-icon :disabled="false" />
+    </icon-button>
+    <icon-button
+      :disabled="modelValue === total - 1"
+      tooltip="Last row"
+      tooltip-position="top-left"
+      class="last"
+      @click="$emit('update:modelValue', total - 1)"
+    >
+      <edge-arrow-icon :disabled="false" />
+    </icon-button>
+  </div>
 </template>
 
 <script>
@@ -59,7 +59,7 @@ export default {
 
 <style scoped>
 .record-navigator {
-    display: flex;
+  display: flex;
 }
 
 .record-navigator .next,
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
index f5f7d98..6b71f55 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue
@@ -9,11 +9,9 @@
       >
         <thead>
           <tr>
-            <th/>
+            <th />
             <th>
-              <div class="cell-data">
-                Row #{{ currentRowIndex + 1 }}
-              </div>
+              <div class="cell-data">Row #{{ currentRowIndex + 1 }}</div>
             </th>
           </tr>
         </thead>
@@ -39,11 +37,11 @@
     </div>
     <div class="table-footer">
       <div class="table-footer-count">
-        {{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
+        {{ rowCount }} {{ rowCount === 1 ? 'row' : 'rows' }} retrieved
         <span v-if="time">in {{ time }}</span>
       </div>
 
-     <row-navigator v-model="currentRowIndex" :total="rowCount"/>
+      <row-navigator v-model="currentRowIndex" :total="rowCount" />
     </div>
   </div>
 </template>
@@ -61,31 +59,32 @@ export default {
     selectedColumnIndex: Number
   },
   emits: ['updateSelectedCell'],
-  data () {
+  data() {
     return {
       selectedCellElement: null,
       currentRowIndex: this.rowIndex
     }
   },
   computed: {
-    columns () {
+    columns() {
       return this.dataSet.columns
     },
-    rowCount () {
+    rowCount() {
       return this.dataSet.values[this.columns[0]].length
     }
   },
-  mounted () {
+  mounted() {
     const col = this.selectedColumnIndex
     const row = this.currentRowIndex
-    const cell = this.$refs.table
-      .querySelector(`td[data-col="${col}"][data-row="${row}"]`)
+    const cell = this.$refs.table.querySelector(
+      `td[data-col="${col}"][data-row="${row}"]`
+    )
     if (cell) {
       this.selectCell(cell)
     }
   },
   watch: {
-    async currentRowIndex () {
+    async currentRowIndex() {
       await nextTick()
       if (this.selectedCellElement) {
         const previouslySelected = this.selectedCellElement
@@ -95,16 +94,16 @@ export default {
     }
   },
   methods: {
-    isBlob (value) {
+    isBlob(value) {
       return value && ArrayBuffer.isView(value)
     },
-    isNull (value) {
+    isNull(value) {
       return value === null
     },
-    getCellValue (col) {
+    getCellValue(col) {
       return this.dataSet.values[col][this.currentRowIndex]
     },
-    getCellText (col) {
+    getCellText(col) {
       const value = this.getCellValue(col)
       if (this.isNull(value)) {
         return 'NULL'
@@ -114,7 +113,7 @@ export default {
       }
       return value
     },
-    onTableKeydown (e) {
+    onTableKeydown(e) {
       const keyCodeMap = {
         38: 'up',
         40: 'down'
@@ -130,10 +129,10 @@ export default {
 
       this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
     },
-    onCellClick (e) {
+    onCellClick(e) {
       this.selectCell(e.target.closest('td'), false)
     },
-    selectCell (cell, scrollTo = true) {
+    selectCell(cell, scrollTo = true) {
       if (!cell) {
         if (this.selectedCellElement) {
           this.selectedCellElement.ariaSelected = 'false'
@@ -152,19 +151,21 @@ export default {
 
       if (this.selectedCellElement && scrollTo) {
         this.selectedCellElement.scrollIntoView()
-        this.selectedCellElement.closest('.table-container').scrollTo({ left: 0 })
+        this.selectedCellElement
+          .closest('.table-container')
+          .scrollTo({ left: 0 })
       }
 
       this.$emit('updateSelectedCell', this.selectedCellElement)
     },
-    moveFocusInTable (initialCell, direction) {
+    moveFocusInTable(initialCell, direction) {
       const currentColIndex = +initialCell.dataset.col
-      const newColIndex = direction === 'up'
-        ? currentColIndex - 1
-        : currentColIndex + 1
+      const newColIndex =
+        direction === 'up' ? currentColIndex - 1 : currentColIndex + 1
 
-      const newCell = this.$refs.table
-        .querySelector(`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`)
+      const newCell = this.$refs.table.querySelector(
+        `td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`
+      )
       if (newCell) {
         this.selectCell(newCell)
       }
@@ -180,7 +181,7 @@ table.sqliteviz-table:focus {
 .sqliteviz-table tbody td:hover {
   background-color: var(--color-bg-light-3);
 }
-.sqliteviz-table tbody td[aria-selected="true"] {
+.sqliteviz-table tbody td[aria-selected='true'] {
   box-shadow: inset 0 0 0 1px var(--color-accent);
 }
 
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
index 127757d..bc6602a 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
@@ -12,13 +12,7 @@
         {{ format.text }}
       </button>
 
-      <button
-        type="button"
-        class="copy"
-        @click="copyToClipboard"
-      >
-        Copy
-      </button>
+      <button type="button" class="copy" @click="copyToClipboard">Copy</button>
     </div>
     <div class="value-body">
       <codemirror
@@ -30,7 +24,8 @@
       <pre
         v-if="currentFormat === 'text'"
         :class="['text-value', { 'meta-value': isNull || isBlob }]"
-      >{{ cellText }}</pre>
+        >{{ cellText }}</pre
+      >
       <logs
         v-if="messages && messages.length > 0"
         :messages="messages"
@@ -60,7 +55,7 @@ export default {
   props: {
     cellValue: [String, Number, Uint8Array]
   },
-  data () {
+  data() {
     return {
       formats: [
         { text: 'Text', value: 'text' },
@@ -82,13 +77,13 @@ export default {
     }
   },
   computed: {
-    isBlob () {
+    isBlob() {
       return this.cellValue && ArrayBuffer.isView(this.cellValue)
     },
-    isNull () {
+    isNull() {
       return this.cellValue === null
     },
-    cellText () {
+    cellText() {
       const value = this.cellValue
       if (this.isNull) {
         return 'NULL'
@@ -100,14 +95,14 @@ export default {
     }
   },
   watch: {
-    currentFormat () {
+    currentFormat() {
       this.messages = []
       this.formattedJson = ''
       if (this.currentFormat === 'json') {
         this.formatJson(this.cellValue)
       }
     },
-    cellValue () {
+    cellValue() {
       this.messages = []
       if (this.currentFormat === 'json') {
         this.formatJson(this.cellValue)
@@ -115,25 +110,24 @@ export default {
     }
   },
   methods: {
-    formatJson (jsonStr) {
+    formatJson(jsonStr) {
       try {
-        this.formattedJson = JSON.stringify(
-          JSON.parse(jsonStr), null, 4
-        )
+        this.formattedJson = JSON.stringify(JSON.parse(jsonStr), null, 4)
       } catch (e) {
         console.error(e)
         this.formattedJson = ''
-        this.messages = [{
-          type: 'error',
-          message: 'Can\'t parse JSON.'
-        }]
+        this.messages = [
+          {
+            type: 'error',
+            message: "Can't parse JSON."
+          }
+        ]
       }
     },
-    copyToClipboard () {
-      cIo.copyText(this.currentFormat === 'json'
-        ? this.formattedJson
-        : this.cellValue,
-      'The value is copied to clipboard.'
+    copyToClipboard() {
+      cIo.copyText(
+        this.currentFormat === 'json' ? this.formattedJson : this.cellValue,
+        'The value is copied to clipboard.'
       )
     }
   }
@@ -188,7 +182,7 @@ export default {
   background-color: var(--color-bg-light);
 }
 
-.value-viewer-toolbar button[aria-selected="true"] {
+.value-viewer-toolbar button[aria-selected='true'] {
   color: var(--color-accent);
 }
 
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
index cfaba99..768bd46 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
@@ -1,23 +1,33 @@
 <template>
   <div class="run-result-panel" ref="runResultPanel">
-   <component
-      :is="viewValuePanelVisible ? 'splitpanes':'div'"
+    <component
+      :is="viewValuePanelVisible ? 'splitpanes' : 'div'"
       :before="{ size: 50, max: 100 }"
       :after="{ size: 50, max: 100 }"
       :default="{ before: 50, after: 50 }"
       class="run-result-panel-content"
     >
-      <template  #left-pane>
-        <div :id="'run-result-left-pane-'+tab.id" class="result-set-container"/>
+      <template #left-pane>
+        <div
+          :id="'run-result-left-pane-' + tab.id"
+          class="result-set-container"
+        />
       </template>
-      <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
+      <div
+        :id="'run-result-result-set-' + tab.id"
+        class="result-set-container"
+      />
       <template #right-pane v-if="viewValuePanelVisible">
         <div class="value-viewer-container">
           <value-viewer
             v-show="selectedCell"
-            :cellValue="selectedCell
-              ? result.values[result.columns[selectedCell.dataset.col]][selectedCell.dataset.row]
-              : ''"
+            :cellValue="
+              selectedCell
+                ? result.values[result.columns[selectedCell.dataset.col]][
+                    selectedCell.dataset.row
+                  ]
+                : ''
+            "
           />
           <div v-show="!selectedCell" class="table-preview">
             No cell selected to view
@@ -33,7 +43,7 @@
         tooltip-position="top-left"
         @click="exportToCsv"
       >
-        <export-to-csv-icon/>
+        <export-to-csv-icon />
       </icon-button>
 
       <icon-button
@@ -43,7 +53,7 @@
         tooltip-position="top-left"
         @click="prepareCopy"
       >
-        <clipboard-icon/>
+        <clipboard-icon />
       </icon-button>
 
       <icon-button
@@ -54,7 +64,7 @@
         :active="viewRecord"
         @click="toggleViewRecord"
       >
-        <row-icon/>
+        <row-icon />
       </icon-button>
 
       <icon-button
@@ -65,7 +75,7 @@
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
       >
-        <view-cell-value-icon/>
+        <view-cell-value-icon />
       </icon-button>
     </side-tool-bar>
 
@@ -80,50 +90,46 @@
       @cancel="cancelCopy"
     />
 
-    <teleport
-      defer
-      :to="resultSetTeleportTarget"
-      :disabled="!enableTeleport"
-    >
+    <teleport defer :to="resultSetTeleportTarget" :disabled="!enableTeleport">
       <div>
-            <div
-              v-show="result === null && !isGettingResults && !error"
-              class="table-preview result-before"
-            >
-              Run your query and get results here
-            </div>
-            <div v-if="isGettingResults" class="table-preview result-in-progress">
-              <loading-indicator :size="30"/>
-              Fetching results...
-            </div>
-            <div
-              v-show="result === undefined && !isGettingResults && !error"
-              class="table-preview result-empty"
-            >
-              No rows retrieved according to your query
-            </div>
-            <logs v-if="error" :messages="[error]"/>
-            <sql-table
-              v-if="result && !viewRecord"
-              :data-set="result"
-              :time="time"
-              :pageSize="pageSize"
-              :page="defaultPage"
-              :selected-cell-coordinates="defaultSelectedCell"
-              class="straight"
-              @updateSelectedCell="onUpdateSelectedCell"
-            />
+        <div
+          v-show="result === null && !isGettingResults && !error"
+          class="table-preview result-before"
+        >
+          Run your query and get results here
+        </div>
+        <div v-if="isGettingResults" class="table-preview result-in-progress">
+          <loading-indicator :size="30" />
+          Fetching results...
+        </div>
+        <div
+          v-show="result === undefined && !isGettingResults && !error"
+          class="table-preview result-empty"
+        >
+          No rows retrieved according to your query
+        </div>
+        <logs v-if="error" :messages="[error]" />
+        <sql-table
+          v-if="result && !viewRecord"
+          :data-set="result"
+          :time="time"
+          :pageSize="pageSize"
+          :page="defaultPage"
+          :selected-cell-coordinates="defaultSelectedCell"
+          class="straight"
+          @updateSelectedCell="onUpdateSelectedCell"
+        />
 
-            <record
-              ref="recordView"
-              v-if="result && viewRecord"
-              :data-set="result"
-              :time="time"
-              :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-              :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
-              @updateSelectedCell="onUpdateSelectedCell"
-            />
-          </div>
+        <record
+          ref="recordView"
+          v-if="result && viewRecord"
+          :data-set="result"
+          :time="time"
+          :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
+          :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
+          @updateSelectedCell="onUpdateSelectedCell"
+        />
+      </div>
     </teleport>
   </div>
 </template>
@@ -158,7 +164,7 @@ export default {
     time: [String, Number]
   },
   emits: ['switchTo'],
-  data () {
+  data() {
     return {
       resizeObserver: null,
       pageSize: 20,
@@ -188,44 +194,45 @@ export default {
     Splitpanes
   },
   computed: {
-    resultSetTeleportTarget () {
+    resultSetTeleportTarget() {
       if (!this.enableTeleport) {
         return undefined
       }
-      const base = `#${this.viewValuePanelVisible
-        ? 'run-result-left-pane'
-        : 'run-result-result-set'
+      const base = `#${
+        this.viewValuePanelVisible
+          ? 'run-result-left-pane'
+          : 'run-result-result-set'
       }`
       const tabIdPostfix = `-${this.tab.id}`
       return base + tabIdPostfix
     }
   },
-  activated () {
+  activated() {
     this.enableTeleport = true
   },
-  deactivated () {
+  deactivated() {
     this.enableTeleport = false
   },
-  mounted () {
+  mounted() {
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.runResultPanel)
     this.calculatePageSize()
   },
-  beforeUnmount () {
+  beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.runResultPanel)
   },
   watch: {
-    result () {
+    result() {
       this.defaultSelectedCell = null
       this.selectedCell = null
     }
   },
   methods: {
-    handleResize () {
+    handleResize() {
       this.calculatePageSize()
     },
 
-    calculatePageSize () {
+    calculatePageSize() {
       const runResultPanel = this.$refs.runResultPanel
       // 27 - table footer hight
       // 5 - padding-bottom of rounded table container
@@ -234,9 +241,10 @@ export default {
       this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
     },
 
-    exportToCsv () {
+    exportToCsv() {
       if (this.result && this.result.values) {
-        events.send('resultset.export',
+        events.send(
+          'resultset.export',
           this.result.values[this.result.columns[0]].length,
           { to: 'csv' }
         )
@@ -245,9 +253,10 @@ export default {
       fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
     },
 
-    async prepareCopy () {
+    async prepareCopy() {
       if (this.result && this.result.values) {
-        events.send('resultset.export',
+        events.send(
+          'resultset.export',
           this.result.values[this.result.columns[0]].length,
           { to: 'clipboard' }
         )
@@ -261,7 +270,7 @@ export default {
         await time.sleep(0)
         this.dataToCopy = csv.serialize(this.result)
         const t1 = performance.now()
-        if ((t1 - t0) < 950) {
+        if (t1 - t0 < 950) {
           this.$modal.hide('prepareCSVCopy')
           this.copyToClipboard()
         } else {
@@ -270,27 +279,27 @@ export default {
       } else {
         alert(
           "Your browser doesn't support copying into the clipboard. " +
-          'If you use Firefox you can enable it ' +
-          'by setting dom.events.asyncClipboard.clipboardItem to true.'
+            'If you use Firefox you can enable it ' +
+            'by setting dom.events.asyncClipboard.clipboardItem to true.'
         )
       }
     },
 
-    copyToClipboard () {
+    copyToClipboard() {
       cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
       this.$modal.hide('prepareCSVCopy')
     },
 
-    cancelCopy () {
+    cancelCopy() {
       this.dataToCopy = null
       this.$modal.hide('prepareCSVCopy')
     },
 
-    toggleViewValuePanel () {
+    toggleViewValuePanel() {
       this.viewValuePanelVisible = !this.viewValuePanelVisible
     },
 
-    toggleViewRecord () {
+    toggleViewRecord() {
       if (this.viewRecord) {
         this.defaultSelectedCell = {
           row: this.$refs.recordView.currentRowIndex,
@@ -304,7 +313,7 @@ export default {
       this.viewRecord = !this.viewRecord
     },
 
-    onUpdateSelectedCell (e) {
+    onUpdateSelectedCell(e) {
       this.selectedCell = e
     }
   }
diff --git a/src/views/Main/Workspace/Tabs/Tab/SideToolBar.vue b/src/views/Main/Workspace/Tabs/Tab/SideToolBar.vue
index bc7d295..2ed757b 100644
--- a/src/views/Main/Workspace/Tabs/Tab/SideToolBar.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/SideToolBar.vue
@@ -17,7 +17,7 @@
       tooltip-position="top-left"
       @click="$emit('switchTo', 'table')"
     >
-      <table-icon/>
+      <table-icon />
     </icon-button>
 
     <icon-button
@@ -30,9 +30,9 @@
       <data-view-icon />
     </icon-button>
 
-    <div class="side-tool-bar-divider" v-if="$slots.default"/>
+    <div class="side-tool-bar-divider" v-if="$slots.default" />
 
-    <slot/>
+    <slot />
   </div>
 </template>
 
diff --git a/src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js b/src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js
index 55221b1..c50c0a2 100644
--- a/src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js
+++ b/src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js
@@ -3,17 +3,19 @@ import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/sql-hint.js'
 import store from '@/store'
 
-function _getHintText (hint) {
+function _getHintText(hint) {
   return typeof hint === 'string' ? hint : hint.text
 }
-export function getHints (cm, options) {
+export function getHints(cm, options) {
   const result = CM.hint.sql(cm, options)
 
   // Don't show the hint if there is only one option
   // and the replacingText is already equals to this option
   const replacedText = cm.getRange(result.from, result.to).toUpperCase()
-  if (result.list.length === 1 &&
-    _getHintText(result.list[0]).toUpperCase() === replacedText) {
+  if (
+    result.list.length === 1 &&
+    _getHintText(result.list[0]).toUpperCase() === replacedText
+  ) {
     result.list = []
   }
 
@@ -21,7 +23,7 @@ export function getHints (cm, options) {
 }
 
 const hintOptions = {
-  get tables () {
+  get tables() {
     const tables = {}
     if (store.state.db.schema) {
       store.state.db.schema.forEach(table => {
@@ -30,7 +32,7 @@ const hintOptions = {
     }
     return tables
   },
-  get defaultTable () {
+  get defaultTable() {
     const schema = store.state.db.schema
     return schema && schema.length === 1 ? schema[0].name : null
   },
@@ -39,11 +41,11 @@ const hintOptions = {
   alignWithWord: false
 }
 
-export function showHintOnDemand (editor) {
+export function showHintOnDemand(editor) {
   CM.showHint(editor, getHints, hintOptions)
 }
 
-export default function showHint (editor) {
+export default function showHint(editor) {
   // Don't show autocomplete after a space or semicolon or in string literals
   const token = editor.getTokenAt(editor.getCursor())
   const ch = token.string.slice(-1)
diff --git a/src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue b/src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue
index c069aea..0e48881 100644
--- a/src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/SqlEditor/index.vue
@@ -18,7 +18,7 @@
         tooltip-position="top-left"
         @click="$emit('run')"
       >
-        <run-icon :disabled="runDisabled"/>
+        <run-icon :disabled="runDisabled" />
       </icon-button>
     </side-tool-bar>
   </div>
@@ -47,7 +47,7 @@ export default {
     IconButton,
     RunIcon
   },
-  data () {
+  data() {
     return {
       query: this.modelValue,
       cmOptions: {
@@ -63,18 +63,18 @@ export default {
     }
   },
   computed: {
-    runDisabled () {
-      return (!this.$store.state.db || !this.query || this.isGettingResults)
+    runDisabled() {
+      return !this.$store.state.db || !this.query || this.isGettingResults
     }
   },
   watch: {
-    query () {
+    query() {
       this.$emit('update:modelValue', this.query)
     }
   },
   methods: {
     onChange: time.debounce((value, editor) => showHint(editor), 400),
-    focus () {
+    focus() {
       this.$refs.cm.cminstance?.focus()
     }
   }
diff --git a/src/views/Main/Workspace/Tabs/Tab/index.vue b/src/views/Main/Workspace/Tabs/Tab/index.vue
index 3e54345..eef6c1e 100644
--- a/src/views/Main/Workspace/Tabs/Tab/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/index.vue
@@ -11,15 +11,15 @@
         <div :id="'above-' + tab.id" class="above" />
       </template>
       <template #right-pane>
-        <div :id="'bottom-'+ tab.id" ref="bottomPane" class="bottomPane" />
+        <div :id="'bottom-' + tab.id" ref="bottomPane" class="bottomPane" />
       </template>
     </splitpanes>
 
-    <div :id="'hidden-'+ tab.id" class="hidden-part" />
+    <div :id="'hidden-' + tab.id" class="hidden-part" />
 
     <teleport
       defer
-      :to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}`: undefined"
+      :to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}` : undefined"
       :disabled="!enableTeleport"
     >
       <sql-editor
@@ -33,7 +33,7 @@
 
     <teleport
       defer
-      :to="enableTeleport ? `#${tab.layout.table}-${tab.id}`: undefined"
+      :to="enableTeleport ? `#${tab.layout.table}-${tab.id}` : undefined"
       :disabled="!enableTeleport"
     >
       <run-result
@@ -84,51 +84,53 @@ export default {
     RunResult,
     Splitpanes
   },
-  data () {
+  data() {
     return {
       topPaneSize: this.tab.maximize
-        ? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
+        ? this.tab.layout[this.tab.maximize] === 'above'
+          ? 100
+          : 0
         : 50,
       enableTeleport: this.$store.state.isWorkspaceVisible
     }
   },
   computed: {
-    isActive () {
+    isActive() {
       return this.tab.id === this.$store.state.currentTabId
     }
   },
   watch: {
     isActive: {
       immediate: true,
-      async handler () {
+      async handler() {
         if (this.isActive) {
           await nextTick()
           this.$refs.sqlEditor?.focus()
         }
       }
     },
-    'tab.query' () {
+    'tab.query'() {
       this.$store.commit('updateTab', {
         tab: this.tab,
         newValues: { isSaved: false }
       })
     }
   },
-  async activated () {
+  async activated() {
     this.enableTeleport = true
     if (this.isActive) {
       await nextTick()
       this.$refs.sqlEditor.focus()
     }
   },
-  deactivated () {
+  deactivated() {
     this.enableTeleport = false
   },
-  async mounted () {
+  async mounted() {
     this.tab.dataView = this.$refs.dataView
   },
   methods: {
-    onSwitchView (from, to) {
+    onSwitchView(from, to) {
       const fromPosition = this.tab.layout[from]
       this.tab.layout[from] = this.tab.layout[to]
       this.tab.layout[to] = fromPosition
@@ -136,7 +138,7 @@ export default {
 
       events.send('inquiry.panel', null, { panel: to })
     },
-    onDataViewUpdate () {
+    onDataViewUpdate() {
       this.$store.commit('updateTab', {
         tab: this.tab,
         newValues: { isSaved: false }
diff --git a/src/views/Main/Workspace/Tabs/index.vue b/src/views/Main/Workspace/Tabs/index.vue
index 47e06b0..8c6ad6b 100644
--- a/src/views/Main/Workspace/Tabs/index.vue
+++ b/src/views/Main/Workspace/Tabs/index.vue
@@ -1,11 +1,11 @@
 <template>
-   <div id="tabs">
+  <div id="tabs">
     <div id="tabs-header" v-if="tabs.length > 0">
       <div
         v-for="(tab, index) in tabs"
         :key="index"
         @click="selectTab(tab.id)"
-        :class="[{'tab-selected': (tab.id === selectedTabId)}, 'tab']"
+        :class="[{ 'tab-selected': tab.id === selectedTabId }, 'tab']"
       >
         <div class="tab-name">
           <span v-show="!tab.isSaved" class="star">*</span>
@@ -13,15 +13,15 @@
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
         <div>
-          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(tab)"/>
+          <close-icon
+            class="close-icon"
+            :size="10"
+            @click="beforeCloseTab(tab)"
+          />
         </div>
       </div>
     </div>
-    <tab
-      v-for="tab in tabs"
-      :key="tab.id"
-      :tab="tab"
-    />
+    <tab v-for="tab in tabs" :key="tab.id" :tab="tab" />
     <div v-show="tabs.length === 0" id="start-guide">
       <span class="link" @click="emitCreateTabEvent">Create</span>
       new inquiry from scratch or open one from
@@ -31,26 +31,33 @@
     <!--Close tab warning dialog  -->
     <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
       <div class="dialog-header">
-        Close tab {{
+        Close tab
+        {{
           closingTab !== null
-          ? (closingTab.name || `[${closingTab.tempName}]`)
-          : ''
+            ? closingTab.name || `[${closingTab.tempName}]`
+            : ''
         }}
-        <close-icon @click="$modal.hide('close-warn')"/>
+        <close-icon @click="$modal.hide('close-warn')" />
       </div>
       <div class="dialog-body">
-        You have unsaved changes. Save changes in {{
+        You have unsaved changes. Save changes in
+        {{
           closingTab !== null
-          ? (closingTab.name || `[${closingTab.tempName}]`)
-          : ''
-        }} before closing?
+            ? closingTab.name || `[${closingTab.tempName}]`
+            : ''
+        }}
+        before closing?
       </div>
       <div class="dialog-buttons-container">
         <button class="secondary" @click="closeTab(closingTab)">
           Close without saving
         </button>
-        <button class="secondary" @click="$modal.hide('close-warn')">Don't close</button>
-        <button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
+        <button class="secondary" @click="$modal.hide('close-warn')">
+          Don't close
+        </button>
+        <button class="primary" @click="saveAndClose(closingTab)">
+          Save and close
+        </button>
       </div>
     </modal>
   </div>
@@ -67,36 +74,36 @@ export default {
     Tab,
     CloseIcon
   },
-  data () {
+  data() {
     return {
       closingTab: null
     }
   },
   computed: {
-    tabs () {
+    tabs() {
       return this.$store.state.tabs
     },
-    selectedTabId () {
+    selectedTabId() {
       return this.$store.state.currentTabId
     }
   },
-  created () {
+  created() {
     window.addEventListener('beforeunload', this.leavingSqliteviz)
   },
   methods: {
-    emitCreateTabEvent () {
+    emitCreateTabEvent() {
       eventBus.$emit('createNewInquiry')
     },
-    leavingSqliteviz (event) {
+    leavingSqliteviz(event) {
       if (this.tabs.some(tab => !tab.isSaved)) {
         event.preventDefault()
         event.returnValue = ''
       }
     },
-    selectTab (id) {
+    selectTab(id) {
       this.$store.commit('setCurrentTabId', id)
     },
-    beforeCloseTab (tab) {
+    beforeCloseTab(tab) {
       this.closingTab = tab
       if (!tab.isSaved) {
         this.$modal.show('close-warn')
@@ -104,11 +111,11 @@ export default {
         this.closeTab(tab)
       }
     },
-    closeTab (tab) {
+    closeTab(tab) {
       this.$modal.hide('close-warn')
       this.$store.commit('deleteTab', tab)
     },
-    saveAndClose (tab) {
+    saveAndClose(tab) {
       eventBus.$on('inquirySaved', () => {
         this.closeTab(tab)
         eventBus.$off('inquirySaved')
diff --git a/src/views/Main/Workspace/index.vue b/src/views/Main/Workspace/index.vue
index 9983039..0c284e5 100644
--- a/src/views/Main/Workspace/index.vue
+++ b/src/views/Main/Workspace/index.vue
@@ -7,7 +7,7 @@
       :default="{ before: 20, after: 80 }"
     >
       <template #left-pane>
-        <schema/>
+        <schema />
       </template>
       <template #right-pane>
         <tabs />
@@ -29,14 +29,17 @@ export default {
     Splitpanes,
     Tabs
   },
-  data () {
+  data() {
     return {
       schemaWidth: this.$route.query.hide_schema === '1' ? 0 : 20
     }
   },
-  async beforeCreate () {
+  async beforeCreate() {
     const schema = this.$store.state.db.schema
-    if ((!schema || schema.length === 0) && this.$store.state.tabs.length === 0) {
+    if (
+      (!schema || schema.length === 0) &&
+      this.$store.state.tabs.length === 0
+    ) {
       const stmt = [
         '/*',
         ' * Your database is empty. In order to start building charts',
@@ -60,10 +63,10 @@ export default {
       events.send('inquiry.create', null, { auto: true })
     }
   },
-  activated () {
+  activated() {
     this.$store.commit('setIsWorkspaceVisible', true)
   },
-  deactivated () {
+  deactivated() {
     this.$store.commit('setIsWorkspaceVisible', false)
   }
 }
diff --git a/src/views/Main/index.vue b/src/views/Main/index.vue
index b48e1ad..35c4a87 100644
--- a/src/views/Main/index.vue
+++ b/src/views/Main/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <main-menu />
-      <router-view id="main-view" v-slot="{ Component }">
-        <keep-alive include="Workspace,Inquiries">
-          <component :is="Component"/>
-        </keep-alive>
-      </router-view>
+    <router-view id="main-view" v-slot="{ Component }">
+      <keep-alive include="Workspace,Inquiries">
+        <component :is="Component" />
+      </keep-alive>
+    </router-view>
   </div>
 </template>
 
diff --git a/test.setup.js b/test.setup.js
index 4e60a4a..aa2ba10 100644
--- a/test.setup.js
+++ b/test.setup.js
@@ -3,12 +3,12 @@ import { createVfm, VueFinalModal, useVfm } from 'vue-final-modal'
 
 config.global.plugins = [createVfm()]
 config.global.components = {
-  'modal': VueFinalModal
+  modal: VueFinalModal
 }
 const vfm = useVfm()
 config.global.mocks = {
-    $modal: {
-      show: modalId => vfm.open(modalId),
-      hide: modalId => vfm.close(modalId)
-    }
-  }
\ No newline at end of file
+  $modal: {
+    show: modalId => vfm.open(modalId),
+    hide: modalId => vfm.close(modalId)
+  }
+}
diff --git a/tests/App.spec.js b/tests/App.spec.js
index ae66066..c16dcea 100644
--- a/tests/App.spec.js
+++ b/tests/App.spec.js
@@ -13,16 +13,16 @@ describe('App.vue', () => {
   })
 
   it('Gets inquiries', () => {
-    sinon.stub(storedInquiries, 'getStoredInquiries').returns([
-      { id: 1 }, { id: 2 }, { id: 3 }
-    ])
+    sinon
+      .stub(storedInquiries, 'getStoredInquiries')
+      .returns([{ id: 1 }, { id: 2 }, { id: 3 }])
     const state = {
       predefinedInquiries: [],
       inquiries: []
     }
     const store = createStore({ state, mutations })
     shallowMount(App, {
-      global: { 
+      global: {
         stubs: ['router-view'],
         plugins: [store]
       }
@@ -33,7 +33,9 @@ describe('App.vue', () => {
 
   it('Updates inquiries when they change in store', async () => {
     sinon.stub(storedInquiries, 'getStoredInquiries').returns([
-      { id: 1, name: 'foo' }, { id: 2, name: 'baz' }, { id: 3, name: 'bar' }
+      { id: 1, name: 'foo' },
+      { id: 2, name: 'baz' },
+      { id: 3, name: 'bar' }
     ])
     sinon.spy(storedInquiries, 'updateStorage')
 
@@ -43,8 +45,7 @@ describe('App.vue', () => {
     }
     const store = createStore({ state, mutations })
     shallowMount(App, {
-      global: { stubs: ['router-view'],
-      plugins: [store] }
+      global: { stubs: ['router-view'], plugins: [store] }
     })
 
     store.state.inquiries.splice(0, 1, { id: 1, name: 'new foo name' })
diff --git a/tests/components/CheckBox.spec.js b/tests/components/CheckBox.spec.js
index b76661a..80cab49 100644
--- a/tests/components/CheckBox.spec.js
+++ b/tests/components/CheckBox.spec.js
@@ -19,7 +19,7 @@ describe('CheckBox', () => {
     })
     expect(wrapperChecked.find('img.checked').isVisible()).to.equal(true)
     wrapperChecked.unmount()
-    
+
     const wrapperUnchecked = shallowMount(CheckBox, {
       props: { init: false },
       attachTo: document.body
@@ -50,9 +50,13 @@ describe('CheckBox', () => {
       props: { disabled: true }
     })
     expect(wrapper.find('.checkbox-container').classes()).to.include('disabled')
-    expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')
+    expect(wrapper.find('.checkbox-container').classes()).to.not.include(
+      'checked'
+    )
     await wrapper.trigger('click')
     expect(wrapper.emitted().click).to.equal(undefined)
-    expect(wrapper.find('.checkbox-container').classes()).to.not.include('checked')
+    expect(wrapper.find('.checkbox-container').classes()).to.not.include(
+      'checked'
+    )
   })
 })
diff --git a/tests/components/CsvImport/CsvImport.spec.js b/tests/components/CsvImport/CsvImport.spec.js
index 051d212..b1fabd6 100644
--- a/tests/components/CsvImport/CsvImport.spec.js
+++ b/tests/components/CsvImport/CsvImport.spec.js
@@ -6,7 +6,6 @@ import CsvJsonImport from '@/components/CsvJsonImport'
 import csv from '@/lib/csv'
 import { nextTick } from 'vue'
 
-
 describe('CsvJsonImport.vue', () => {
   let state = {}
   let actions = {}
@@ -74,13 +73,15 @@ describe('CsvJsonImport.vue', () => {
         }
       },
       rowCount: 2,
-      messages: [{
-        code: 'UndetectableDelimiter',
-        message: 'Comma was used as a standart delimiter',
-        row: 0,
-        type: 'info',
-        hint: undefined
-      }]
+      messages: [
+        {
+          code: 'UndetectableDelimiter',
+          message: 'Comma was used as a standart delimiter',
+          row: 0,
+          type: 'info',
+          hint: undefined
+        }
+      ]
     })
 
     wrapper.vm.preview()
@@ -89,24 +90,34 @@ describe('CsvJsonImport.vue', () => {
     await nextTick()
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('CSV import')
-    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).props('modelValue')).to.equal('|')
+    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal(
+      'my_data'
+    )
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).props('modelValue')
+    ).to.equal('|')
     expect(wrapper.find('#quote-char input').element.value).to.equal('"')
     expect(wrapper.find('#escape-char input').element.value).to.equal('"')
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(true)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.checked).to.equal(
+      true
+    )
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
     expect(rows[0].findAll('td')[0].text()).to.equal('foo')
     expect(rows[0].findAll('td')[1].text()).to.equal('1')
     expect(rows[1].findAll('td')[0].text()).to.equal('bar')
     expect(rows[1].findAll('td')[1].text()).to.equal('2')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Information about row 0. Comma was used as a standart delimiter.')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Preview parsing is completed in')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Information about row 0. Comma was used as a standart delimiter.'
+    )
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Preview parsing is completed in'
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
-    expect(wrapper.find('#import-start').attributes().disabled).to.equal(undefined)
+    expect(wrapper.find('#import-start').attributes().disabled).to.equal(
+      undefined
+    )
   })
 
   it('disables import if no rows found', async () => {
@@ -129,8 +140,9 @@ describe('CsvJsonImport.vue', () => {
     await nextTick()
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(0)
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('No rows to import.')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'No rows to import.'
+    )
     expect(wrapper.find('.no-data').isVisible()).to.equal(true)
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
@@ -177,8 +189,9 @@ describe('CsvJsonImport.vue', () => {
     expect(rows).to.have.lengthOf(1)
     expect(rows[0].findAll('td')[0].text()).to.equal('bar')
     expect(rows[0].findAll('td')[1].text()).to.equal('2')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Preview parsing is completed in')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Preview parsing is completed in'
+    )
 
     parse.onCall(2).resolves({
       delimiter: ',',
@@ -191,13 +204,15 @@ describe('CsvJsonImport.vue', () => {
       },
       rowCount: 1,
       hasErrors: true,
-      messages: [{
-        code: 'MissingQuotes',
-        message: 'Quote is missed',
-        row: 0,
-        type: 'error',
-        hint: 'Edit your CSV so that the field has a closing quote char.'
-      }]
+      messages: [
+        {
+          code: 'MissingQuotes',
+          message: 'Quote is missed',
+          row: 0,
+          type: 'error',
+          hint: 'Edit your CSV so that the field has a closing quote char.'
+        }
+      ]
     })
 
     await wrapper.find('#quote-char input').setValue("'")
@@ -207,13 +222,13 @@ describe('CsvJsonImport.vue', () => {
     expect(rows).to.have.lengthOf(1)
     expect(rows[0].findAll('td')[0].text()).to.equal('baz')
     expect(rows[0].findAll('td')[1].text()).to.equal('3')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.contain(
-        'Error in row 0. Quote is missed. ' +
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.contain(
+      'Error in row 0. Quote is missed. ' +
         'Edit your CSV so that the field has a closing quote char.'
-      )
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.not.contain('Preview parsing is completed in')
+    )
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.not.contain(
+      'Preview parsing is completed in'
+    )
 
     parse.onCall(3).resolves({
       delimiter: ',',
@@ -234,8 +249,9 @@ describe('CsvJsonImport.vue', () => {
     expect(rows).to.have.lengthOf(1)
     expect(rows[0].findAll('td')[0].text()).to.equal('qux')
     expect(rows[0].findAll('td')[1].text()).to.equal('4')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.contain('Preview parsing is completed in')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.contain(
+      'Preview parsing is completed in'
+    )
 
     parse.onCall(4).resolves({
       delimiter: ',',
@@ -257,8 +273,9 @@ describe('CsvJsonImport.vue', () => {
     expect(rows[0].findAll('td')[0].text()).to.equal('corge')
     expect(rows[0].findAll('td')[1].text()).to.equal('5')
 
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Preview parsing is completed in')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Preview parsing is completed in'
+    )
   })
 
   it('has proper state before parsing is complete', async () => {
@@ -282,42 +299,55 @@ describe('CsvJsonImport.vue', () => {
     await nextTick()
 
     let resolveParsing
-    parse.onCall(1).returns(new Promise(resolve => {
-      resolveParsing = () => resolve({
-        delimiter: '|',
-        data: {
-          columns: ['col1', 'col2'],
-          values: {
-            col1: [1],
-            col2: ['foo']
-          }
-        },
-        rowCount: 1,
-        messages: []
+    parse.onCall(1).returns(
+      new Promise(resolve => {
+        resolveParsing = () =>
+          resolve({
+            delimiter: '|',
+            data: {
+              columns: ['col1', 'col2'],
+              values: {
+                col1: [1],
+                col2: ['foo']
+              }
+            },
+            rowCount: 1,
+            messages: []
+          })
       })
-    }))
+    )
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
 
     // "Parsing CSV..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
-      .to.equal('Parsing CSV...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text()
+    ).to.equal('Parsing CSV...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(true)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(true)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -325,7 +355,10 @@ describe('CsvJsonImport.vue', () => {
 
     // Loading indicator is not shown when parsing is compete
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -365,26 +398,35 @@ describe('CsvJsonImport.vue', () => {
     await nextTick()
 
     let resolveImport
-    wrapper.vm.db.addTableFromCsv.onCall(0).returns(new Promise(resolve => {
-      resolveImport = resolve
-    }))
+    wrapper.vm.db.addTableFromCsv.onCall(0).returns(
+      new Promise(resolve => {
+        resolveImport = resolve
+      })
+    )
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await csv.parse.returnValues[1]
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
-      .to.include('2 rows are parsed successfully in')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text()
+    ).to.include('2 rows are parsed successfully in')
 
     // All the dialog controls are disabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(true)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(true)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveImport()
@@ -417,18 +459,22 @@ describe('CsvJsonImport.vue', () => {
       },
       rowCount: 2,
       hasErrors: false,
-      messages: [{
-        code: 'UndetectableDelimiter',
-        message: 'Comma was used as a standart delimiter',
-        type: 'info',
-        hint: undefined
-      }]
+      messages: [
+        {
+          code: 'UndetectableDelimiter',
+          message: 'Comma was used as a standart delimiter',
+          type: 'info',
+          hint: undefined
+        }
+      ]
     })
 
     let resolveImport
-    wrapper.vm.db.addTableFromCsv.onCall(0).returns(new Promise(resolve => {
-      resolveImport = resolve
-    }))
+    wrapper.vm.db.addTableFromCsv.onCall(0).returns(
+      new Promise(resolve => {
+        resolveImport = resolve
+      })
+    )
 
     wrapper.vm.preview()
     wrapper.vm.open()
@@ -446,13 +492,19 @@ describe('CsvJsonImport.vue', () => {
     expect(logs[2].text()).to.equals('Comma was used as a standart delimiter.')
 
     // All the dialog controls are disabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(true)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(true)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveImport()
@@ -485,12 +537,14 @@ describe('CsvJsonImport.vue', () => {
       },
       rowCount: 2,
       hasErrors: true,
-      messages: [{
-        code: 'Error',
-        message: 'Something is wrong',
-        type: 'error',
-        hint: undefined
-      }]
+      messages: [
+        {
+          code: 'Error',
+          message: 'Something is wrong',
+          type: 'error',
+          hint: undefined
+        }
+      ]
     })
 
     wrapper.vm.preview()
@@ -509,13 +563,19 @@ describe('CsvJsonImport.vue', () => {
     expect(logs[2].text()).to.equals('Something is wrong.')
 
     // All the dialog controls are enabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(false)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(false)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
   })
@@ -551,8 +611,11 @@ describe('CsvJsonImport.vue', () => {
     })
 
     let resolveImport = sinon.stub()
-    wrapper.vm.db.addTableFromCsv = sinon.stub()
-      .resolves(new Promise(resolve => { resolveImport = resolve }))
+    wrapper.vm.db.addTableFromCsv = sinon.stub().resolves(
+      new Promise(resolve => {
+        resolveImport = resolve
+      })
+    )
 
     wrapper.vm.preview()
     wrapper.vm.open()
@@ -564,23 +627,33 @@ describe('CsvJsonImport.vue', () => {
     await csv.parse.returnValues[1]
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
-      .to.equal('Importing CSV into a SQLite database...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text()
+    ).to.equal('Importing CSV into a SQLite database...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(true)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(true)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(true)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -589,7 +662,10 @@ describe('CsvJsonImport.vue', () => {
     await resolveImport()
     await wrapper.vm.db.addTableFromCsv.returnValues[0]
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -635,16 +711,24 @@ describe('CsvJsonImport.vue', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs[2].text()).to.contain('Importing CSV into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain(
+      'Importing CSV into a SQLite database is completed in'
+    )
 
     // All the dialog controls are enabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(false)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(false)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 
@@ -696,13 +780,19 @@ describe('CsvJsonImport.vue', () => {
     expect(logs[3].text()).to.equal('Error: fail.')
 
     // All the dialog controls are enabled
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled).to.equal(false)
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).vm.disabled
+    ).to.equal(false)
     expect(wrapper.find('#quote-char input').element.disabled).to.equal(false)
     expect(wrapper.find('#escape-char input').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'check-box' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
   })
 
@@ -733,7 +823,9 @@ describe('CsvJsonImport.vue', () => {
     await clock.tick(100)
     expect(actions.addTab.calledOnce).to.equal(true)
     await actions.addTab.returnValues[0]
-    expect(mutations.setCurrentTabId.calledOnceWith(state, newTabId)).to.equal(true)
+    expect(mutations.setCurrentTabId.calledOnceWith(state, newTabId)).to.equal(
+      true
+    )
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
     expect(wrapper.emitted('finish')).to.have.lengthOf(1)
   })
@@ -764,7 +856,9 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.find('#import-cancel').trigger('click')
     await clock.tick(100)
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
-    expect(wrapper.vm.db.execute.calledOnceWith('DROP TABLE "my_data"')).to.equal(true)
+    expect(
+      wrapper.vm.db.execute.calledOnceWith('DROP TABLE "my_data"')
+    ).to.equal(true)
     expect(wrapper.vm.db.refreshSchema.calledOnce).to.equal(true)
     expect(wrapper.emitted('cancel')).to.have.lengthOf(1)
   })
@@ -783,23 +877,31 @@ describe('CsvJsonImport.vue', () => {
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await clock.tick(400)
     await nextTick()
-    expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
+    expect(
+      wrapper.find('#csv-json-table-name .text-field-error').text()
+    ).to.equal('')
 
-    wrapper.vm.db.validateTableName = sinon.stub().rejects(new Error('this is a bad table name'))
+    wrapper.vm.db.validateTableName = sinon
+      .stub()
+      .rejects(new Error('this is a bad table name'))
     await wrapper.find('#csv-json-table-name input').setValue('bar')
     await clock.tick(400)
     await nextTick()
-    expect(wrapper.find('#csv-json-table-name .text-field-error').text())
-      .to.equal('this is a bad table name. Try another table name.')
+    expect(
+      wrapper.find('#csv-json-table-name .text-field-error').text()
+    ).to.equal('this is a bad table name. Try another table name.')
 
     await wrapper.find('#csv-json-table-name input').setValue('')
     await clock.tick(400)
     await nextTick()
-    expect(wrapper.find('#csv-json-table-name .text-field-error').text()).to.equal('')
+    expect(
+      wrapper.find('#csv-json-table-name .text-field-error').text()
+    ).to.equal('')
 
     await wrapper.find('#import-start').trigger('click')
-    expect(wrapper.find('#csv-json-table-name .text-field-error').text())
-      .to.equal("Table name can't be empty")
+    expect(
+      wrapper.find('#csv-json-table-name .text-field-error').text()
+    ).to.equal("Table name can't be empty")
     expect(wrapper.vm.db.addTableFromCsv.called).to.equal(false)
   })
 })
@@ -812,12 +914,14 @@ describe('CsvJsonImport.vue - json', () => {
   let wrapper
   const newTabId = 1
   const file = new File(
-    [new Blob(
-      [JSON.stringify({ foo: [1, 2, 3] }, null, 2)],
-      { type: 'application/json' }
-    )],
+    [
+      new Blob([JSON.stringify({ foo: [1, 2, 3] }, null, 2)], {
+        type: 'application/json'
+      })
+    ],
     'my data.json',
-    { type: 'application/json' })
+    { type: 'application/json' }
+  )
 
   beforeEach(() => {
     clock = sinon.useFakeTimers()
@@ -845,7 +949,7 @@ describe('CsvJsonImport.vue - json', () => {
 
     // mount the component
     wrapper = mount(CsvJsonImport, {
-      global: { 
+      global: {
         plugins: [store],
         stubs: {
           teleport: true,
@@ -873,25 +977,25 @@ describe('CsvJsonImport.vue - json', () => {
     await nextTick()
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
-    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
+    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal(
+      'my_data'
+    )
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).exists()
+    ).to.equal(false)
     expect(wrapper.find('#quote-char input').exists()).to.equal(false)
     expect(wrapper.find('#escape-char input').exists()).to.equal(false)
-    expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
+    expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(
+      false
+    )
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
-    expect(rows[0].findAll('td')[0].text()).to.equal([
-      '{',
-      '  "foo": [',
-      '    1,',
-      '    2,',
-      '    3',
-      '  ]',
-      '}'
-    ].join('\n')
+    expect(rows[0].findAll('td')[0].text()).to.equal(
+      ['{', '  "foo": [', '    1,', '    2,', '    3', '  ]', '}'].join('\n')
+    )
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Preview parsing is completed in'
     )
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Preview parsing is completed in')
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
   })
@@ -912,20 +1016,23 @@ describe('CsvJsonImport.vue - json', () => {
     })
 
     let resolveParsing
-    getJsonParseResult.onCall(1).returns(new Promise(resolve => {
-      resolveParsing = () => resolve({
-        delimiter: '|',
-        data: {
-          columns: ['doc'],
-          values: {
-            doc: ['{ "foo": [ 1, 2, 3 ] }']
-          }
-        },
-        rowCount: 1,
-        hasErrors: false,
-        messages: []
+    getJsonParseResult.onCall(1).returns(
+      new Promise(resolve => {
+        resolveParsing = () =>
+          resolve({
+            delimiter: '|',
+            data: {
+              columns: ['doc'],
+              values: {
+                doc: ['{ "foo": [ 1, 2, 3 ] }']
+              }
+            },
+            rowCount: 1,
+            hasErrors: false,
+            messages: []
+          })
       })
-    }))
+    )
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
@@ -937,19 +1044,25 @@ describe('CsvJsonImport.vue - json', () => {
     await nextTick()
 
     // "Parsing JSON..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
-      .to.equal('Parsing JSON...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text()
+    ).to.equal('Parsing JSON...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -957,7 +1070,10 @@ describe('CsvJsonImport.vue - json', () => {
 
     // Loading indicator is not shown when parsing is compete
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -965,8 +1081,11 @@ describe('CsvJsonImport.vue - json', () => {
     const getJsonParseResult = sinon.spy(wrapper.vm, 'getJsonParseResult')
 
     let resolveImport = sinon.stub()
-    wrapper.vm.db.addTableFromCsv = sinon.stub()
-      .resolves(new Promise(resolve => { resolveImport = resolve }))
+    wrapper.vm.db.addTableFromCsv = sinon.stub().resolves(
+      new Promise(resolve => {
+        resolveImport = resolve
+      })
+    )
 
     await wrapper.vm.preview()
     await wrapper.vm.open()
@@ -979,19 +1098,25 @@ describe('CsvJsonImport.vue - json', () => {
     await nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
-      .to.equal('Importing JSON into a SQLite database...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text()
+    ).to.equal('Importing JSON into a SQLite database...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -1000,7 +1125,10 @@ describe('CsvJsonImport.vue - json', () => {
     await resolveImport()
     await wrapper.vm.db.addTableFromCsv.returnValues[0]
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -1021,12 +1149,16 @@ describe('CsvJsonImport.vue - json', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain(
+      'Importing JSON into a SQLite database is completed in'
+    )
 
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 })
@@ -1106,16 +1238,23 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await nextTick()
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
     expect(wrapper.find('.dialog-header').text()).to.equal('JSON import')
-    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal('my_data')
-    expect(wrapper.findComponent({ name: 'delimiter-selector' }).exists()).to.equal(false)
+    expect(wrapper.find('#csv-json-table-name input').element.value).to.equal(
+      'my_data'
+    )
+    expect(
+      wrapper.findComponent({ name: 'delimiter-selector' }).exists()
+    ).to.equal(false)
     expect(wrapper.find('#quote-char input').exists()).to.equal(false)
     expect(wrapper.find('#escape-char input').exists()).to.equal(false)
-    expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(false)
+    expect(wrapper.findComponent({ name: 'check-box' }).exists()).to.equal(
+      false
+    )
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(1)
     expect(rows[0].findAll('td')[0].text()).to.equal('{ "foo": [ 1, 2, 3 ] }')
-    expect(wrapper.findComponent({ name: 'logs' }).text())
-      .to.include('Preview parsing is completed in')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'Preview parsing is completed in'
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
   })
@@ -1139,38 +1278,47 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await nextTick()
 
     let resolveParsing
-    parse.onCall(1).returns(new Promise(resolve => {
-      resolveParsing = () => resolve({
-        delimiter: '|',
-        data: {
-          columns: ['doc'],
-          values: {
-            doc: ['{ "foo": [ 1, 2, 3 ] }']
-          }
-        },
-        rowCount: 1,
-        messages: []
+    parse.onCall(1).returns(
+      new Promise(resolve => {
+        resolveParsing = () =>
+          resolve({
+            delimiter: '|',
+            data: {
+              columns: ['doc'],
+              values: {
+                doc: ['{ "foo": [ 1, 2, 3 ] }']
+              }
+            },
+            rowCount: 1,
+            messages: []
+          })
       })
-    }))
+    )
 
     await wrapper.find('#csv-json-table-name input').setValue('foo')
     await wrapper.find('#import-start').trigger('click')
     await nextTick()
 
     // "Parsing JSON..." in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text())
-      .to.equal('Parsing JSON...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[1].text()
+    ).to.equal('Parsing JSON...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     await resolveParsing()
@@ -1178,7 +1326,10 @@ describe('CsvJsonImport.vue - ndjson', () => {
 
     // Loading indicator is not shown when parsing is compete
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -1211,8 +1362,11 @@ describe('CsvJsonImport.vue - ndjson', () => {
     })
 
     let resolveImport = sinon.stub()
-    wrapper.vm.db.addTableFromCsv = sinon.stub()
-      .resolves(new Promise(resolve => { resolveImport = resolve }))
+    wrapper.vm.db.addTableFromCsv = sinon.stub().resolves(
+      new Promise(resolve => {
+        resolveImport = resolve
+      })
+    )
 
     wrapper.vm.preview()
     wrapper.vm.open()
@@ -1225,19 +1379,25 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await nextTick()
 
     // Parsing success in the logs
-    expect(wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text())
-      .to.equal('Importing JSON into a SQLite database...')
+    expect(
+      wrapper.findComponent({ name: 'logs' }).findAll('.msg')[2].text()
+    ).to.equal('Importing JSON into a SQLite database...')
 
     // After 1 second - loading indicator is shown
     await clock.tick(1000)
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(true)
 
     // All the dialog controls are disabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(true)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(true)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(true)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      true
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(false)
     expect(wrapper.find('#import-start').isVisible()).to.equal(true)
     expect(wrapper.vm.db.addTableFromCsv.getCall(0).args[0]).to.equal('foo') // table name
@@ -1246,7 +1406,10 @@ describe('CsvJsonImport.vue - ndjson', () => {
     await resolveImport()
     await wrapper.vm.db.addTableFromCsv.returnValues[0]
     expect(
-      wrapper.findComponent({ name: 'logs' }).findComponent({ name: 'LoadingIndicator' }).exists()
+      wrapper
+        .findComponent({ name: 'logs' })
+        .findComponent({ name: 'LoadingIndicator' })
+        .exists()
     ).to.equal(false)
   })
 
@@ -1291,12 +1454,16 @@ describe('CsvJsonImport.vue - ndjson', () => {
     // Import success in the logs
     const logs = wrapper.findComponent({ name: 'logs' }).findAll('.msg')
     expect(logs).to.have.lengthOf(3)
-    expect(logs[2].text()).to.contain('Importing JSON into a SQLite database is completed in')
+    expect(logs[2].text()).to.contain(
+      'Importing JSON into a SQLite database is completed in'
+    )
 
     // All the dialog controls are enabled
     expect(wrapper.find('#import-cancel').element.disabled).to.equal(false)
     expect(wrapper.find('#import-finish').element.disabled).to.equal(false)
-    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(false)
+    expect(wrapper.findComponent({ name: 'close-icon' }).vm.disabled).to.equal(
+      false
+    )
     expect(wrapper.find('#import-finish').isVisible()).to.equal(true)
   })
 })
diff --git a/tests/components/CsvImport/DelimiterSelector.spec.js b/tests/components/CsvImport/DelimiterSelector.spec.js
index 365176c..e2dc49e 100644
--- a/tests/components/CsvImport/DelimiterSelector.spec.js
+++ b/tests/components/CsvImport/DelimiterSelector.spec.js
@@ -37,9 +37,9 @@ describe('DelimiterSelector', async () => {
 
   it('changes value by typing', async () => {
     const wrapper = shallowMount(DelimiterSelector, {
-      props: { 
+      props: {
         modelValue: ',',
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       }
     })
 
@@ -51,7 +51,7 @@ describe('DelimiterSelector', async () => {
     const wrapper = mount(DelimiterSelector, {
       props: {
         modelValue: '|',
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       },
       attachTo: document.body
     })
@@ -66,9 +66,9 @@ describe('DelimiterSelector', async () => {
 
   it("doesn't change value when becomes empty", async () => {
     const wrapper = mount(DelimiterSelector, {
-      props: { 
+      props: {
         modelValue: '|',
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       }
     })
 
@@ -96,7 +96,7 @@ describe('DelimiterSelector', async () => {
       props: {
         modelValue: '|',
         disabled: true,
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       },
       attachTo: document.body
     })
diff --git a/tests/components/DbUploader.spec.js b/tests/components/DbUploader.spec.js
index a7847ab..4fd05d6 100644
--- a/tests/components/DbUploader.spec.js
+++ b/tests/components/DbUploader.spec.js
@@ -7,7 +7,6 @@ import fu from '@/lib/utils/fileIo'
 import database from '@/lib/database'
 import { nextTick } from 'vue'
 
-
 describe('DbUploader.vue', () => {
   let state = {}
   let mutations = {}
diff --git a/tests/components/LoadingIndicator.spec.js b/tests/components/LoadingIndicator.spec.js
index 54fd31b..86cc59e 100644
--- a/tests/components/LoadingIndicator.spec.js
+++ b/tests/components/LoadingIndicator.spec.js
@@ -19,7 +19,8 @@ describe('LoadingIndicator.vue', () => {
     })
     // The lendth of circle in the component is 50.24. If progress is 50% then resulting arc
     // should be 25.12
-    expect(wrapper.find('.loader-svg.front').element.style.strokeDasharray)
-      .to.equal('25.12px, 25.12px')
+    expect(
+      wrapper.find('.loader-svg.front').element.style.strokeDasharray
+    ).to.equal('25.12px, 25.12px')
   })
 })
diff --git a/tests/components/Logs.spec.js b/tests/components/Logs.spec.js
index c34d9b3..4343244 100644
--- a/tests/components/Logs.spec.js
+++ b/tests/components/Logs.spec.js
@@ -31,8 +31,9 @@ describe('Logs.vue', () => {
     })
     await nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
-    expect(wrapper.find('.logs-container').element.scrollTop)
-      .to.equal(height - viewHeight)
+    expect(wrapper.find('.logs-container').element.scrollTop).to.equal(
+      height - viewHeight
+    )
     wrapper.unmount()
   })
 
@@ -58,8 +59,9 @@ describe('Logs.vue', () => {
     await nextTick()
     await nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
-    expect(wrapper.find('.logs-container').element.scrollTop)
-      .to.equal(height - viewHeight)
+    expect(wrapper.find('.logs-container').element.scrollTop).to.equal(
+      height - viewHeight
+    )
     wrapper.unmount()
   })
 
diff --git a/tests/components/Splitpanes/Splitpanes.spec.js b/tests/components/Splitpanes/Splitpanes.spec.js
index 5d11ab0..fbd9dc7 100644
--- a/tests/components/Splitpanes/Splitpanes.spec.js
+++ b/tests/components/Splitpanes/Splitpanes.spec.js
@@ -18,8 +18,12 @@ describe('Splitpanes.vue', () => {
     })
 
     expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '60%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '40%'
+    )
   })
 
   it('renders correctly - horizontal', () => {
@@ -37,8 +41,12 @@ describe('Splitpanes.vue', () => {
     })
 
     expect(wrapper.findAll('.splitpanes-pane')).to.have.lengthOf(2)
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.height).to.equal('40%')
+    expect(
+      wrapper.findAll('.splitpanes-pane')[0].element.style.height
+    ).to.equal('60%')
+    expect(
+      wrapper.findAll('.splitpanes-pane')[1].element.style.height
+    ).to.equal('40%')
   })
 
   it('toggles correctly - no maximized initially', async () => {
@@ -55,20 +63,36 @@ describe('Splitpanes.vue', () => {
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '0%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '100%'
+    )
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '60%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '40%'
+    )
 
     await wrapper.findAll('.toggle-btn')[1].trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '100%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '0%'
+    )
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('60%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('40%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '60%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '40%'
+    )
   })
 
   it('toggles correctly - with maximized initially', async () => {
@@ -86,20 +110,36 @@ describe('Splitpanes.vue', () => {
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '20%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '80%'
+    )
 
     await wrapper.findAll('.toggle-btn')[0].trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '0%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '100%'
+    )
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('20%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('80%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '20%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '80%'
+    )
 
     await wrapper.findAll('.toggle-btn')[1].trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '100%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '0%'
+    )
 
     wrapper = shallowMount(Splitpanes, {
       slots: {
@@ -113,20 +153,36 @@ describe('Splitpanes.vue', () => {
     })
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '50%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '50%'
+    )
 
     await wrapper.findAll('.toggle-btn')[0].trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('0%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '0%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '100%'
+    )
 
     await wrapper.find('.toggle-btn').trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '50%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '50%'
+    )
 
     await wrapper.findAll('.toggle-btn')[1].trigger('click')
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('100%')
-    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '100%'
+    )
+    expect(wrapper.findAll('.splitpanes-pane')[1].element.style.width).to.equal(
+      '0%'
+    )
   })
 
   it('drag - vertical', async () => {
@@ -151,13 +207,17 @@ describe('Splitpanes.vue', () => {
     parent.style.height = '500px'
 
     await wrapper.find('.splitpanes-splitter').trigger('mousedown')
-    document.dispatchEvent(new MouseEvent('mousemove', {
-      clientX: 300,
-      clientY: 80
-    }))
+    document.dispatchEvent(
+      new MouseEvent('mousemove', {
+        clientX: 300,
+        clientY: 80
+      })
+    )
     document.dispatchEvent(new MouseEvent('mouseup'))
     await nextTick()
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '50%'
+    )
     wrapper.unmount()
     root.remove()
   })
@@ -186,14 +246,18 @@ describe('Splitpanes.vue', () => {
     parent.style.height = '500px'
 
     await wrapper.find('.splitpanes-splitter').trigger('mousedown')
-    document.dispatchEvent(new MouseEvent('mousemove', {
-      clientX: 10,
-      clientY: 250
-    }))
+    document.dispatchEvent(
+      new MouseEvent('mousemove', {
+        clientX: 10,
+        clientY: 250
+      })
+    )
     document.dispatchEvent(new MouseEvent('mouseup'))
     await nextTick()
     await nextTick()
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
+    expect(
+      wrapper.findAll('.splitpanes-pane')[0].element.style.height
+    ).to.equal('50%')
     wrapper.unmount()
     root.remove()
   })
@@ -225,16 +289,20 @@ describe('Splitpanes.vue', () => {
     await wrapper.find('.splitpanes-splitter').trigger('touchstart')
     const event = new TouchEvent('touchmove')
     Object.defineProperty(event, 'touches', {
-      value: [{
-        clientX: 10,
-        clientY: 250
-      }],
+      value: [
+        {
+          clientX: 10,
+          clientY: 250
+        }
+      ],
       writable: true
     })
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
     await nextTick()
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.height).to.equal('50%')
+    expect(
+      wrapper.findAll('.splitpanes-pane')[0].element.style.height
+    ).to.equal('50%')
     wrapper.unmount()
     root.remove()
     delete window.ontouchstart
@@ -265,16 +333,20 @@ describe('Splitpanes.vue', () => {
     await wrapper.find('.splitpanes-splitter').trigger('touchstart')
     const event = new TouchEvent('touchmove')
     Object.defineProperty(event, 'touches', {
-      value: [{
-        clientX: 300,
-        clientY: 80
-      }],
+      value: [
+        {
+          clientX: 300,
+          clientY: 80
+        }
+      ],
       writable: true
     })
     document.dispatchEvent(event)
     document.dispatchEvent(new MouseEvent('touchend'))
     await nextTick()
-    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane')[0].element.style.width).to.equal(
+      '50%'
+    )
     wrapper.unmount()
     root.remove()
     delete window.ontouchstart
diff --git a/tests/components/Splitpanes/splitter.spec.js b/tests/components/Splitpanes/splitter.spec.js
index 5290652..a7ca9aa 100644
--- a/tests/components/Splitpanes/splitter.spec.js
+++ b/tests/components/Splitpanes/splitter.spec.js
@@ -38,7 +38,11 @@ describe('splitter.js', () => {
 
     document.body.appendChild(container)
 
-    const dragPercentage = splitter.getCurrentDragPercentage(event, container, isHorisontal)
+    const dragPercentage = splitter.getCurrentDragPercentage(
+      event,
+      container,
+      isHorisontal
+    )
     expect(dragPercentage).to.equal(50)
   })
 
@@ -53,7 +57,11 @@ describe('splitter.js', () => {
 
     document.body.appendChild(container)
 
-    const dragPercentage = splitter.getCurrentDragPercentage(event, container, isHorisontal)
+    const dragPercentage = splitter.getCurrentDragPercentage(
+      event,
+      container,
+      isHorisontal
+    )
     expect(dragPercentage).to.equal(25)
   })
 
diff --git a/tests/components/SqlTable/Pager.spec.js b/tests/components/SqlTable/Pager.spec.js
index 4242c75..a1e4d79 100644
--- a/tests/components/SqlTable/Pager.spec.js
+++ b/tests/components/SqlTable/Pager.spec.js
@@ -12,7 +12,7 @@ describe('Pager.vue', () => {
     const wrapper = mount(Pager, {
       props: {
         pageCount: 5,
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       }
     })
 
diff --git a/tests/lib/chartHelper.spec.js b/tests/lib/chartHelper.spec.js
index 09d0bcc..ff83599 100644
--- a/tests/lib/chartHelper.spec.js
+++ b/tests/lib/chartHelper.spec.js
@@ -97,7 +97,8 @@ describe('chartHelper.js', () => {
     expect(doc.children[0].src).to.includes('plotly-latest.js')
     expect(doc.children[1].id).to.have.lengthOf(21)
     expect(doc.children[2].innerHTML).to.includes(doc.children[1].id)
-    expect(doc.children[2].innerHTML)
-      .to.includes('Plotly.newPlot(el, "plotly data", "plotly layout"')
+    expect(doc.children[2].innerHTML).to.includes(
+      'Plotly.newPlot(el, "plotly data", "plotly layout"'
+    )
   })
 })
diff --git a/tests/lib/database/_sql.spec.js b/tests/lib/database/_sql.spec.js
index f651f40..5b591cc 100644
--- a/tests/lib/database/_sql.spec.js
+++ b/tests/lib/database/_sql.spec.js
@@ -62,7 +62,9 @@ describe('_sql.js', () => {
     const data = tempDb.export()
     const sql = await Sql.build()
     sql.open(data)
-    expect(() => { sql.exec() }).to.throw('exec: Missing query string')
+    expect(() => {
+      sql.exec()
+    }).to.throw('exec: Missing query string')
   })
 
   it('imports', async () => {
diff --git a/tests/lib/database/_statements.spec.js b/tests/lib/database/_statements.spec.js
index d0c1a55..16308a0 100644
--- a/tests/lib/database/_statements.spec.js
+++ b/tests/lib/database/_statements.spec.js
@@ -19,8 +19,9 @@ describe('_statements.js', () => {
 
   it('getInsertStmt', () => {
     const columns = ['id', 'name']
-    expect(stmts.getInsertStmt('foo', columns))
-      .to.equal('INSERT INTO "foo" ("id", "name") VALUES (?, ?);')
+    expect(stmts.getInsertStmt('foo', columns)).to.equal(
+      'INSERT INTO "foo" ("id", "name") VALUES (?, ?);'
+    )
   })
 
   it('getCreateStatement', () => {
diff --git a/tests/lib/database/database.spec.js b/tests/lib/database/database.spec.js
index 3c8ad19..b29c225 100644
--- a/tests/lib/database/database.spec.js
+++ b/tests/lib/database/database.spec.js
@@ -71,10 +71,12 @@ describe('database.js', () => {
       type: 'INTEGER'
     })
 
-    expect(schema[1].columns).to.eql([{
-      name: 'amount',
-      type: 'INTEGER'
-    }])
+    expect(schema[1].columns).to.eql([
+      {
+        name: 'amount',
+        type: 'INTEGER'
+      }
+    ])
   })
 
   it('creates empty db with name database', async () => {
@@ -114,7 +116,9 @@ describe('database.js', () => {
     buffer.name = 'foo.sqlite'
 
     await db.loadDb(buffer)
-    const result = await db.execute('SELECT * from test limit 1; SELECT * from test;')
+    const result = await db.execute(
+      'SELECT * from test limit 1; SELECT * from test;'
+    )
     expect(result.values).to.eql({
       id: [1, 2],
       name: ['Harry Potter', 'Draco Malfoy'],
@@ -141,7 +145,9 @@ describe('database.js', () => {
     const buffer = new Blob([data])
     buffer.name = 'foo.sqlite'
     await db.loadDb(buffer)
-    await expect(db.execute('SELECT * from foo')).to.be.rejectedWith(/^no such table: foo$/)
+    await expect(db.execute('SELECT * from foo')).to.be.rejectedWith(
+      /^no such table: foo$/
+    )
   })
 
   it('adds table from csv', async () => {
@@ -186,37 +192,44 @@ describe('database.js', () => {
     }
     const progressHandler = sinon.stub()
     const progressCounterId = db.createProgressCounter(progressHandler)
-    await expect(db.addTableFromCsv('foo', data, progressCounterId)).to.be.rejected
+    await expect(db.addTableFromCsv('foo', data, progressCounterId)).to.be
+      .rejected
   })
 
   it('progressCounters', () => {
     const firstHandler = sinon.stub()
     const firstId = db.createProgressCounter(firstHandler)
-    db.worker.dispatchEvent(new MessageEvent('message', {
-      data: {
-        progress: 50,
-        id: firstId
-      }
-    }))
+    db.worker.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          progress: 50,
+          id: firstId
+        }
+      })
+    )
     expect(firstHandler.calledOnceWith(50)).to.equal(true)
 
     const secondHandler = sinon.stub()
     const secondId = db.createProgressCounter(secondHandler)
-    db.worker.dispatchEvent(new MessageEvent('message', {
-      data: {
-        progress: 70,
-        id: secondId
-      }
-    }))
+    db.worker.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          progress: 70,
+          id: secondId
+        }
+      })
+    )
     expect(firstId).to.not.equals(secondId)
     expect(secondHandler.calledOnceWith(70)).to.equal(true)
 
-    db.worker.dispatchEvent(new MessageEvent('message', {
-      data: {
-        progress: 80,
-        id: firstId
-      }
-    }))
+    db.worker.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          progress: 80,
+          id: firstId
+        }
+      })
+    )
     expect(firstHandler.calledTwice).to.equal(true)
     expect(firstHandler.secondCall.calledWith(80)).to.equal(true)
 
@@ -268,12 +281,17 @@ describe('database.js', () => {
 
   it('validateTableName', async () => {
     await db.execute('CREATE TABLE foo(id)')
-    await expect(db.validateTableName('foo')).to.be.rejectedWith('table "foo" already exists')
-    await expect(db.validateTableName('1foo'))
-      .to.be.rejectedWith("Table name can't start with a digit")
-    await expect(db.validateTableName('foo(05.08.2020)'))
-      .to.be.rejectedWith('Table name can contain only letters, digits and underscores')
-    await expect(db.validateTableName('sqlite_foo'))
-      .to.be.rejectedWith("Table name can't start with sqlite_")
+    await expect(db.validateTableName('foo')).to.be.rejectedWith(
+      'table "foo" already exists'
+    )
+    await expect(db.validateTableName('1foo')).to.be.rejectedWith(
+      "Table name can't start with a digit"
+    )
+    await expect(db.validateTableName('foo(05.08.2020)')).to.be.rejectedWith(
+      'Table name can contain only letters, digits and underscores'
+    )
+    await expect(db.validateTableName('sqlite_foo')).to.be.rejectedWith(
+      "Table name can't start with sqlite_"
+    )
   })
 })
diff --git a/tests/lib/database/sqliteExtensions.spec.js b/tests/lib/database/sqliteExtensions.spec.js
index c988369..66a757a 100644
--- a/tests/lib/database/sqliteExtensions.spec.js
+++ b/tests/lib/database/sqliteExtensions.spec.js
@@ -80,7 +80,6 @@ describe('SQLite extensions', function () {
       'sqrt(square(16))': [16],
       'ceil(-1.95) + ceil(1.95)': [1],
       'floor(-1.95) + floor(1.95)': [-1]
-
     })
   })
 
@@ -452,7 +451,15 @@ describe('SQLite extensions', function () {
       FROM dataset;
     `)
     expect(actual.values).to.eql({
-      xx: [1], xy: [0], xz: [1], yx: [0], yy: [1], yz: [1], zx: [1], zy: [1], zz: [1]
+      xx: [1],
+      xy: [0],
+      xz: [1],
+      yx: [0],
+      yy: [1],
+      yz: [1],
+      zx: [1],
+      zy: [1],
+      zz: [1]
     })
   })
 
@@ -475,7 +482,10 @@ describe('SQLite extensions', function () {
 
       SELECT lua_inline(1), lua_full(1) - 1 < 0.000001;
     `)
-    expect(actual.values).to.eql({ 'lua_inline(1)': [2], 'lua_full(1) - 1 < 0.000001': [1] })
+    expect(actual.values).to.eql({
+      'lua_inline(1)': [2],
+      'lua_full(1) - 1 < 0.000001': [1]
+    })
   })
 
   it('supports aggregate Lua functions', async function () {
@@ -534,6 +544,9 @@ describe('SQLite extensions', function () {
 
       SELECT * FROM lua_match('%w+', 'hello world from Lua');
     `)
-    expect(actual.values).to.eql({ idx: [1, 2, 3, 4], elm: ['hello', 'world', 'from', 'Lua'] })
+    expect(actual.values).to.eql({
+      idx: [1, 2, 3, 4],
+      elm: ['hello', 'world', 'from', 'Lua']
+    })
   })
 })
diff --git a/tests/lib/storedInquiries/storedInquiries.spec.js b/tests/lib/storedInquiries/storedInquiries.spec.js
index 123ecc6..6486e60 100644
--- a/tests/lib/storedInquiries/storedInquiries.spec.js
+++ b/tests/lib/storedInquiries/storedInquiries.spec.js
@@ -19,20 +19,23 @@ describe('storedInquiries.js', () => {
   })
 
   it('getStoredInquiries migrate and returns inquiries of v1', () => {
-    localStorage.setItem('myQueries', JSON.stringify([
-      {
-        id: '123',
-        name: 'foo',
-        query: 'SELECT * FROM foo',
-        chart: { here_are: 'foo chart settings' }
-      },
-      {
-        id: '456',
-        name: 'bar',
-        query: 'SELECT * FROM bar',
-        chart: { here_are: 'bar chart settings' }
-      }
-    ]))
+    localStorage.setItem(
+      'myQueries',
+      JSON.stringify([
+        {
+          id: '123',
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          chart: { here_are: 'foo chart settings' }
+        },
+        {
+          id: '456',
+          name: 'bar',
+          query: 'SELECT * FROM bar',
+          chart: { here_are: 'bar chart settings' }
+        }
+      ])
+    )
     const inquiries = storedInquiries.getStoredInquiries()
     expect(inquiries).to.eql([
       {
@@ -53,10 +56,7 @@ describe('storedInquiries.js', () => {
   })
 
   it('updateStorage and getStoredInquiries', () => {
-    const data = [
-      { id: 1 },
-      { id: 2 }
-    ]
+    const data = [{ id: 1 }, { id: 2 }]
     storedInquiries.updateStorage(data)
     const inquiries = storedInquiries.getStoredInquiries()
     expect(inquiries).to.eql(data)
@@ -77,7 +77,9 @@ describe('storedInquiries.js', () => {
 
     const copy = storedInquiries.duplicateInquiry(base)
     expect(copy).to.have.property('id').which.not.equal(base.id)
-    expect(copy).to.have.property('name').which.equal(base.name + ' Copy')
+    expect(copy)
+      .to.have.property('name')
+      .which.equal(base.name + ' Copy')
     expect(copy).to.have.property('query').which.equal(base.query)
     expect(copy).to.have.property('viewType').which.equal(base.viewType)
     expect(copy).to.have.property('viewOptions').which.eql(base.viewOptions)
@@ -197,14 +199,16 @@ describe('storedInquiries.js', () => {
     `
 
     const inquiry = storedInquiries.deserialiseInquiries(str)
-    expect(inquiry).to.eql([{
-      id: 1,
-      name: 'foo',
-      query: 'select * from foo',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-11-03T14:17:49.524Z'
-    }])
+    expect(inquiry).to.eql([
+      {
+        id: 1,
+        name: 'foo',
+        query: 'select * from foo',
+        viewType: 'chart',
+        viewOptions: [],
+        createdAt: '2020-11-03T14:17:49.524Z'
+      }
+    ])
   })
 
   it('deserialiseInquiries generates new id to avoid duplication', () => {
@@ -256,14 +260,16 @@ describe('storedInquiries.js', () => {
     sinon.stub(fu, 'importFile').returns(Promise.resolve(str))
     const inquiries = await storedInquiries.importInquiries()
 
-    expect(inquiries).to.eql([{
-      id: 1,
-      name: 'foo',
-      query: 'select * from foo',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-11-03T14:17:49.524Z'
-    }])
+    expect(inquiries).to.eql([
+      {
+        id: 1,
+        name: 'foo',
+        query: 'select * from foo',
+        viewType: 'chart',
+        viewOptions: [],
+        createdAt: '2020-11-03T14:17:49.524Z'
+      }
+    ])
   })
 
   it('importInquiries', async () => {
@@ -281,14 +287,16 @@ describe('storedInquiries.js', () => {
     sinon.stub(fu, 'importFile').returns(Promise.resolve(str))
     const inquiries = await storedInquiries.importInquiries()
 
-    expect(inquiries).to.eql([{
-      id: 1,
-      name: 'foo',
-      query: 'select * from foo',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-11-03T14:17:49.524Z'
-    }])
+    expect(inquiries).to.eql([
+      {
+        id: 1,
+        name: 'foo',
+        query: 'select * from foo',
+        viewType: 'chart',
+        viewOptions: [],
+        createdAt: '2020-11-03T14:17:49.524Z'
+      }
+    ])
   })
 
   it('readPredefinedInquiries old', async () => {
@@ -312,7 +320,8 @@ describe('storedInquiries.js', () => {
         viewType: 'chart',
         viewOptions: [],
         createdAt: '2020-11-03T14:17:49.524Z'
-      }])
+      }
+    ])
   })
 
   it('readPredefinedInquiries', async () => {
@@ -340,6 +349,7 @@ describe('storedInquiries.js', () => {
         viewType: 'chart',
         viewOptions: [],
         createdAt: '2020-11-03T14:17:49.524Z'
-      }])
+      }
+    ])
   })
 })
diff --git a/tests/lib/tab.spec.js b/tests/lib/tab.spec.js
index 5edceb1..0caed9f 100644
--- a/tests/lib/tab.spec.js
+++ b/tests/lib/tab.spec.js
@@ -75,9 +75,11 @@ describe('tab.js', () => {
       currentTabId: 1,
       dbName: 'fooDb',
       db: {
-        execute: sinon.stub().returns(new Promise(resolve => {
-          resolveQuering = resolve
-        })),
+        execute: sinon.stub().returns(
+          new Promise(resolve => {
+            resolveQuering = resolve
+          })
+        ),
         refreshSchema: sinon.stub().resolves()
       }
     }
diff --git a/tests/lib/utils/fileIo.spec.js b/tests/lib/utils/fileIo.spec.js
index ef15650..4458b70 100644
--- a/tests/lib/utils/fileIo.spec.js
+++ b/tests/lib/utils/fileIo.spec.js
@@ -24,7 +24,9 @@ describe('fileIo.js', () => {
 
     expect(document.createElement.calledOnceWith('a')).to.equal(true)
 
-    expect(window.Blob.calledOnceWith(['foo'], { type: 'octet/stream' })).to.equal(true)
+    expect(
+      window.Blob.calledOnceWith(['foo'], { type: 'octet/stream' })
+    ).to.equal(true)
     const blob = window.Blob.returnValues[0]
     expect(URL.createObjectURL.calledOnceWith(blob)).to.equal(true)
 
@@ -49,7 +51,9 @@ describe('fileIo.js', () => {
 
     expect(document.createElement.calledOnceWith('a')).to.equal(true)
 
-    expect(window.Blob.calledOnceWith(['foo'], { type: 'text/html' })).to.equal(true)
+    expect(window.Blob.calledOnceWith(['foo'], { type: 'text/html' })).to.equal(
+      true
+    )
     const blob = window.Blob.returnValues[0]
     expect(URL.createObjectURL.calledOnceWith(blob)).to.equal(true)
 
@@ -74,7 +78,9 @@ describe('fileIo.js', () => {
 
     sinon.stub(document, 'createElement').returns(spyInput)
 
-    setTimeout(() => { spyInput.dispatchEvent(new Event('change')) })
+    setTimeout(() => {
+      spyInput.dispatchEvent(new Event('change'))
+    })
 
     const data = await fIo.importFile()
     expect(data).to.equal('foo')
@@ -108,7 +114,9 @@ describe('fileIo.js', () => {
     sinon.stub(window, 'FileReader').returns(r)
 
     const blob = new Blob(['foo'])
-    await expect(fIo.readAsArrayBuffer(blob)).to.be.rejectedWith('Problem parsing input file.')
+    await expect(fIo.readAsArrayBuffer(blob)).to.be.rejectedWith(
+      'Problem parsing input file.'
+    )
   })
 
   it('isJSON', () => {
diff --git a/tests/store/actions.spec.js b/tests/store/actions.spec.js
index 23a4b01..3801ddf 100644
--- a/tests/store/actions.spec.js
+++ b/tests/store/actions.spec.js
@@ -2,13 +2,8 @@ import { expect } from 'chai'
 import actions from '@/store/actions'
 import sinon from 'sinon'
 
-const {
-  addTab,
-  addInquiry,
-  deleteInquiries,
-  renameInquiry,
-  saveInquiry
-} = actions
+const { addTab, addInquiry, deleteInquiries, renameInquiry, saveInquiry } =
+  actions
 
 describe('actions', () => {
   it('addTab adds new blank tab', async () => {
@@ -117,22 +112,30 @@ describe('actions', () => {
         { id: 2, name: 'bar' },
         { id: 3, name: 'baz' }
       ],
-      tabs: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+      tabs: [
+        { id: 1, name: 'foo' },
+        { id: 2, name: 'bar' }
+      ]
     }
     const commit = sinon.spy()
 
-    await renameInquiry({ state, commit }, { inquiryId: 2, newName: 'new name' })
+    await renameInquiry(
+      { state, commit },
+      { inquiryId: 2, newName: 'new name' }
+    )
     expect(state.inquiries).to.eql([
       { id: 1, name: 'foo' },
       { id: 2, name: 'new name' },
       { id: 3, name: 'baz' }
     ])
-    expect(commit.calledWith('updateTab', {
-      tab: { id: 2, name: 'bar' },
-      newValues: {
-        name: 'new name'
-      }
-    })).to.equal(true)
+    expect(
+      commit.calledWith('updateTab', {
+        tab: { id: 2, name: 'bar' },
+        newValues: {
+          name: 'new name'
+        }
+      })
+    ).to.equal(true)
   })
 
   it('saveInquiry adds new inquiry in the storage', async () => {
@@ -146,7 +149,7 @@ describe('actions', () => {
       viewOptions: [],
       name: null,
       dataView: {
-        getOptionsForSave () {
+        getOptionsForSave() {
           return ['chart']
         }
       }
@@ -156,10 +159,13 @@ describe('actions', () => {
       tabs: [tab]
     }
 
-    const value = await saveInquiry({ state }, {
-      inquiryTab: tab,
-      newName: 'foo'
-    })
+    const value = await saveInquiry(
+      { state },
+      {
+        inquiryTab: tab,
+        newName: 'foo'
+      }
+    )
     expect(value.id).to.equal(tab.id)
     expect(value.name).to.equal('foo')
     expect(value.query).to.equal(tab.query)
@@ -176,7 +182,7 @@ describe('actions', () => {
       viewOptions: [],
       name: null,
       dataView: {
-        getOptionsForSave () {
+        getOptionsForSave() {
           return ['chart']
         }
       }
@@ -187,10 +193,13 @@ describe('actions', () => {
       tabs: [tab]
     }
 
-    const first = await saveInquiry({ state }, {
-      inquiryTab: tab,
-      newName: 'foo'
-    })
+    const first = await saveInquiry(
+      { state },
+      {
+        inquiryTab: tab,
+        newName: 'foo'
+      }
+    )
 
     tab.name = 'foo'
     tab.query = 'select * from foo'
@@ -202,7 +211,9 @@ describe('actions', () => {
     expect(second.name).to.equal(first.name)
     expect(second.query).to.equal(tab.query)
     expect(second.viewOptions).to.eql(['chart'])
-    expect(new Date(second.createdAt).getTime()).to.equal(first.createdAt.getTime())
+    expect(new Date(second.createdAt).getTime()).to.equal(
+      first.createdAt.getTime()
+    )
   })
 
   it("save adds a new inquiry with new id if it's based on predefined inquiry", async () => {
@@ -215,7 +226,7 @@ describe('actions', () => {
       viewOptions: [],
       name: 'foo predefined',
       dataView: {
-        getOptionsForSave () {
+        getOptionsForSave() {
           return ['chart']
         }
       },
@@ -227,10 +238,13 @@ describe('actions', () => {
       tabs: [tab]
     }
 
-    await saveInquiry({ state }, {
-      inquiryTab: tab,
-      newName: 'foo'
-    })
+    await saveInquiry(
+      { state },
+      {
+        inquiryTab: tab,
+        newName: 'foo'
+      }
+    )
 
     const inquiries = state.inquiries
     expect(inquiries).has.lengthOf(1)
diff --git a/tests/store/mutations.spec.js b/tests/store/mutations.spec.js
index 904af24..d0e7313 100644
--- a/tests/store/mutations.spec.js
+++ b/tests/store/mutations.spec.js
@@ -319,22 +319,24 @@ describe('mutations', () => {
   })
 
   it('updatePredefinedInquiries - array', () => {
-    const inquiries = [{
-      id: 1,
-      name: 'foo',
-      query: 'SELECT * FROM foo',
-      viewType: 'chart',
-      viewOptions: {},
-      createdAt: '2020-11-07T20:57:04.492Z'
-    },
-    {
-      id: 2,
-      name: 'bar',
-      query: 'SELECT * FROM bar',
-      viewType: 'chart',
-      viewOptions: {},
-      createdAt: '2020-11-07T20:57:04.492Z'
-    }]
+    const inquiries = [
+      {
+        id: 1,
+        name: 'foo',
+        query: 'SELECT * FROM foo',
+        viewType: 'chart',
+        viewOptions: {},
+        createdAt: '2020-11-07T20:57:04.492Z'
+      },
+      {
+        id: 2,
+        name: 'bar',
+        query: 'SELECT * FROM bar',
+        viewType: 'chart',
+        viewOptions: {},
+        createdAt: '2020-11-07T20:57:04.492Z'
+      }
+    ]
 
     const state = {
       predefinedInquiries: []
diff --git a/tests/tooltipMixin.spec.js b/tests/tooltipMixin.spec.js
index 78c5288..289e214 100644
--- a/tests/tooltipMixin.spec.js
+++ b/tests/tooltipMixin.spec.js
@@ -24,17 +24,20 @@ describe('tooltipMixin.js', () => {
 
   it('tooltipStyle is correct when showTooltip: top-right', async () => {
     const component = {
-      template: '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
+      template:
+        '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
       mixins: [tooltipMixin]
     }
 
     const wrapper = mount(component, { attachTo: container })
 
     // by default top-right
-    await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
-      clientX: 10,
-      clientY: 20
-    }))
+    await wrapper.vm.showTooltip(
+      new MouseEvent('mouseenter', {
+        clientX: 10,
+        clientY: 20
+      })
+    )
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '8px',
@@ -45,15 +48,19 @@ describe('tooltipMixin.js', () => {
 
   it('tooltipStyle is correct when showTooltip: top-left', async () => {
     const component = {
-      template: '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
+      template:
+        '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
       mixins: [tooltipMixin]
     }
     const wrapper = mount(component, { attachTo: container })
 
-    await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
-      clientX: 212,
-      clientY: 20
-    }), 'top-left')
+    await wrapper.vm.showTooltip(
+      new MouseEvent('mouseenter', {
+        clientX: 212,
+        clientY: 20
+      }),
+      'top-left'
+    )
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -66,15 +73,19 @@ describe('tooltipMixin.js', () => {
 
   it('tooltipStyle is correct when showTooltip: bottom-right', async () => {
     const component = {
-      template: '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
+      template:
+        '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
       mixins: [tooltipMixin]
     }
     const wrapper = mount(component, { attachTo: container })
 
-    await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
-      clientX: 10,
-      clientY: 20
-    }), 'bottom-right')
+    await wrapper.vm.showTooltip(
+      new MouseEvent('mouseenter', {
+        clientX: 10,
+        clientY: 20
+      }),
+      'bottom-right'
+    )
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '32px',
@@ -85,15 +96,19 @@ describe('tooltipMixin.js', () => {
 
   it('tooltipStyle is correct when showTooltip: bottom-left', async () => {
     const component = {
-      template: '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
+      template:
+        '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
       mixins: [tooltipMixin]
     }
     const wrapper = mount(component, { attachTo: container })
 
-    await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
-      clientX: 212,
-      clientY: 20
-    }), 'bottom-left')
+    await wrapper.vm.showTooltip(
+      new MouseEvent('mouseenter', {
+        clientX: 212,
+        clientY: 20
+      }),
+      'bottom-left'
+    )
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -109,10 +124,12 @@ describe('tooltipMixin.js', () => {
       mixins: [tooltipMixin]
     }
     const wrapper = mount(component, { attachTo: container })
-    await wrapper.vm.showTooltip(new MouseEvent('mouseenter', {
-      clientX: 10,
-      clientY: 20
-    }))
+    await wrapper.vm.showTooltip(
+      new MouseEvent('mouseenter', {
+        clientX: 10,
+        clientY: 20
+      })
+    )
     await wrapper.vm.hideTooltip()
     expect(wrapper.find('div').isVisible()).to.equal(false)
   })
diff --git a/tests/views/LoadView.spec.js b/tests/views/LoadView.spec.js
index 9408c27..3ab6473 100644
--- a/tests/views/LoadView.spec.js
+++ b/tests/views/LoadView.spec.js
@@ -48,7 +48,10 @@ describe('LoadView.vue', () => {
     const inquiriesRes = new Response()
     inquiriesRes.json = sinon.stub().resolves({
       version: 2,
-      inquiries: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+      inquiries: [
+        { id: 1, name: 'foo' },
+        { id: 2, name: 'bar' }
+      ]
     })
     readFile.onCall(1).returns(Promise.resolve(inquiriesRes))
     const db = {
@@ -71,11 +74,14 @@ describe('LoadView.vue', () => {
     expect(fu.readFile.firstCall.args[0]).to.equal('https://my-url/test.db')
 
     // Db is loaded
-    expect(db.loadDb.firstCall.args[0]).to.equal(await dataRes.blob.returnValues[0])
+    expect(db.loadDb.firstCall.args[0]).to.equal(
+      await dataRes.blob.returnValues[0]
+    )
 
     // Inquiries file is read
-    expect(fu.readFile.secondCall.args[0])
-      .to.equal('https://my-url/test_inquiries.json')
+    expect(fu.readFile.secondCall.args[0]).to.equal(
+      'https://my-url/test_inquiries.json'
+    )
 
     // Tab for inquiry is created
     expect(actions.addTab.calledOnce).to.equal(true)
@@ -95,7 +101,7 @@ describe('LoadView.vue', () => {
     expect($router.push.called).to.equal(true)
   })
 
-  it('Doesn\'t redirect and show the button if there is an error', async () => {
+  it("Doesn't redirect and show the button if there is an error", async () => {
     const state = {
       tabs: []
     }
diff --git a/tests/views/Main/Inquiries/Inquiries.spec.js b/tests/views/Main/Inquiries/Inquiries.spec.js
index e8d5ea7..30e3999 100644
--- a/tests/views/Main/Inquiries/Inquiries.spec.js
+++ b/tests/views/Main/Inquiries/Inquiries.spec.js
@@ -9,7 +9,6 @@ import actions from '@/store/actions'
 import fu from '@/lib/utils/fileIo'
 import { nextTick } from 'vue'
 
-
 describe('Inquiries.vue', () => {
   let clock
 
@@ -80,7 +79,7 @@ describe('Inquiries.vue', () => {
     const store = createStore({ state, mutations, actions })
     const wrapper = shallowMount(Inquiries, {
       attachTo: document.body,
-      global: { plugins: [store] } 
+      global: { plugins: [store] }
     })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
@@ -187,13 +186,15 @@ describe('Inquiries.vue', () => {
 
     const store = createStore({ state, mutations, actions })
     const wrapper = mount(Inquiries, {
-      attachTo: document.body, 
-      global: { plugins: [store] } 
+      attachTo: document.body,
+      global: { plugins: [store] }
     })
     await wrapper.find('#toolbar-search input').setValue('baz')
     await nextTick()
 
-    expect(wrapper.find('#inquiries-not-found').text()).to.equal('No inquiries found')
+    expect(wrapper.find('#inquiries-not-found').text()).to.equal(
+      'No inquiries found'
+    )
     expect(wrapper.find('#start-guide').exists()).to.equal(false)
     expect(wrapper.find('tbody').isVisible()).to.equal(false)
     wrapper.unmount()
@@ -242,7 +243,9 @@ describe('Inquiries.vue', () => {
 
   it('Exports one inquiry', async () => {
     sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
-    sinon.stub(storedInquiries, 'serialiseInquiries').returns('I am a serialized inquiry')
+    sinon
+      .stub(storedInquiries, 'serialiseInquiries')
+      .returns('I am a serialized inquiry')
     sinon.stub(fu, 'exportToFile')
     const state = {
       predefinedInquiries: [],
@@ -262,8 +265,13 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    await wrapper.findComponent({ name: 'ExportIcon' }).find('svg').trigger('click')
-    expect(fu.exportToFile.calledOnceWith('I am a serialized inquiry', 'foo.json')).to.equals(true)
+    await wrapper
+      .findComponent({ name: 'ExportIcon' })
+      .find('svg')
+      .trigger('click')
+    expect(
+      fu.exportToFile.calledOnceWith('I am a serialized inquiry', 'foo.json')
+    ).to.equals(true)
     wrapper.unmount()
   })
 
@@ -296,9 +304,14 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'CopyIcon' })
+      .find('svg')
+      .trigger('click')
 
-    expect(storedInquiries.duplicateInquiry.calledOnceWith(inquiryInStorage)).to.equals(true)
+    expect(
+      storedInquiries.duplicateInquiry.calledOnceWith(inquiryInStorage)
+    ).to.equals(true)
 
     const rows = wrapper.findAll('tbody tr')
     expect(rows).to.have.lengthOf(2)
@@ -308,44 +321,48 @@ describe('Inquiries.vue', () => {
     wrapper.unmount()
   })
 
-  it('The copy of the inquiry is not selected if all inquiries were selected before duplication',
-    async () => {
-      sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
-      const inquiryInStorage = {
-        id: 1,
-        name: 'foo',
-        query: '',
-        viewType: 'chart',
-        viewOptions: [],
-        createdAt: '2020-11-03T19:57:56.299Z'
-      }
-      const newInquiry = {
-        id: 2,
-        name: 'foo copy',
-        query: '',
-        viewType: 'chart',
-        viewOptions: [],
-        createdAt: '2020-12-03T19:57:56.299Z'
-      }
-      sinon.stub(storedInquiries, 'duplicateInquiry').returns(newInquiry)
-      const state = {
-        predefinedInquiries: [],
-        inquiries: [inquiryInStorage]
-      }
-      const store = createStore({ state, mutations, actions })
+  it('The copy of the inquiry is not selected if all inquiries were selected before duplication', async () => {
+    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
+    const inquiryInStorage = {
+      id: 1,
+      name: 'foo',
+      query: '',
+      viewType: 'chart',
+      viewOptions: [],
+      createdAt: '2020-11-03T19:57:56.299Z'
+    }
+    const newInquiry = {
+      id: 2,
+      name: 'foo copy',
+      query: '',
+      viewType: 'chart',
+      viewOptions: [],
+      createdAt: '2020-12-03T19:57:56.299Z'
+    }
+    sinon.stub(storedInquiries, 'duplicateInquiry').returns(newInquiry)
+    const state = {
+      predefinedInquiries: [],
+      inquiries: [inquiryInStorage]
+    }
+    const store = createStore({ state, mutations, actions })
 
-      const wrapper = mount(Inquiries, { global: { plugins: [store] } })
-      await storedInquiries.readPredefinedInquiries.returnValues[0]
-      await nextTick()
-      await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
-        .trigger('click')
-      await wrapper.findComponent({ name: 'CopyIcon' }).find('svg').trigger('click')
+    const wrapper = mount(Inquiries, { global: { plugins: [store] } })
+    await storedInquiries.readPredefinedInquiries.returnValues[0]
+    await nextTick()
+    await wrapper
+      .findComponent({ ref: 'mainCheckBox' })
+      .find('.checkbox-container')
+      .trigger('click')
+    await wrapper
+      .findComponent({ name: 'CopyIcon' })
+      .find('svg')
+      .trigger('click')
 
-      const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
-      expect(checkboxes[0].vm.checked).to.equals(true)
-      expect(checkboxes[1].vm.checked).to.equals(false)
-      wrapper.unmount()
-    })
+    const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
+    expect(checkboxes[0].vm.checked).to.equals(true)
+    expect(checkboxes[1].vm.checked).to.equals(false)
+    wrapper.unmount()
+  })
 
   it('Opens an inquiry', async () => {
     sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([])
@@ -408,7 +425,9 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    expect(wrapper.findComponent({ name: 'RenameIcon' }).exists()).to.equals(false)
+    expect(wrapper.findComponent({ name: 'RenameIcon' }).exists()).to.equals(
+      false
+    )
     wrapper.unmount()
   })
 
@@ -432,7 +451,7 @@ describe('Inquiries.vue', () => {
     const store = createStore({ state, mutations, actions })
     const wrapper = mount(Inquiries, {
       attachTo: document.body,
-      global: { 
+      global: {
         plugins: [store],
         stubs: { teleport: true, transition: false }
       }
@@ -441,12 +460,16 @@ describe('Inquiries.vue', () => {
     await nextTick()
 
     // click Rename icon in the grid
-    await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'RenameIcon' })
+      .find('svg')
+      .trigger('click')
 
     // check that rename dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Rename inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Rename inquiry'
+    )
 
     // check that input is filled by the current inquiry name
     expect(wrapper.find('.dialog-body input').element.value).to.equals('foo')
@@ -465,14 +488,16 @@ describe('Inquiries.vue', () => {
     expect(wrapper.find('tbody tr td').text()).to.equals('bar')
 
     // check that storage is updated
-    expect(state.inquiries).to.eql([{
-      id: 1,
-      name: 'bar',
-      query: '',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-11-03T19:57:56.299Z'
-    }])
+    expect(state.inquiries).to.eql([
+      {
+        id: 1,
+        name: 'bar',
+        query: '',
+        viewType: 'chart',
+        viewOptions: [],
+        createdAt: '2020-11-03T19:57:56.299Z'
+      }
+    ])
 
     // check that coresponding tab also changed the name
     expect(state.tabs[0].name).to.equals('bar')
@@ -513,7 +538,10 @@ describe('Inquiries.vue', () => {
     await nextTick()
 
     // click Rename icon in the grid
-    await wrapper.findComponent({ name: 'RenameIcon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'RenameIcon' })
+      .find('svg')
+      .trigger('click')
 
     // change the name
     await wrapper.find('.dialog-body input').setValue('')
@@ -524,8 +552,9 @@ describe('Inquiries.vue', () => {
       .find(button => button.text() === 'Rename')
       .trigger('click')
 
-    expect(wrapper.find('.dialog-body .text-field-error').text())
-      .to.equals("Inquiry name can't be empty")
+    expect(wrapper.find('.dialog-body .text-field-error').text()).to.equals(
+      "Inquiry name can't be empty"
+    )
     // check that rename dialog is still open
     await clock.tick(100)
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
@@ -604,19 +633,23 @@ describe('Inquiries.vue', () => {
     await nextTick()
 
     // click on master checkbox
-    await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
+    await wrapper
+      .findComponent({ ref: 'mainCheckBox' })
+      .find('.checkbox-container')
       .trigger('click')
 
     // click Import
     await wrapper.find('#toolbar-btns-import').trigger('click')
 
     const checkboxes = wrapper.findAllComponents('[data-test="rowCheckBox"]')
-    expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(false)
+    expect(wrapper.findComponent({ ref: 'mainCheckBox' }).vm.checked).to.equals(
+      false
+    )
     expect(checkboxes[0].vm.checked).to.equals(true)
     expect(checkboxes[1].vm.checked).to.equals(false)
     wrapper.unmount()
   })
-  
+
   it('Deletion is not available for predefined inquiries', async () => {
     sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([
       {
@@ -638,7 +671,9 @@ describe('Inquiries.vue', () => {
     const wrapper = mount(Inquiries, { global: { plugins: [store] } })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
-    expect(wrapper.findComponent({ name: 'DeleteIcon' }).exists()).to.equals(false)
+    expect(wrapper.findComponent({ name: 'DeleteIcon' }).exists()).to.equals(
+      false
+    )
     wrapper.unmount()
   })
 
@@ -671,20 +706,24 @@ describe('Inquiries.vue', () => {
 
     const wrapper = mount(Inquiries, {
       attachTo: document.body,
-      global: { 
+      global: {
         plugins: [store],
         stubs: { teleport: true, transition: false }
       }
-     })
+    })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
     // click Delete icon in the first row of the grid
-    await wrapper.findComponent({ name: 'DeleteIcon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'DeleteIcon' })
+      .find('svg')
+      .trigger('click')
 
     // check that delete dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-    .to.contain('Delete inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Delete inquiry'
+    )
 
     // check the message in the dialog
     expect(wrapper.find('.dialog-body').text()).to.contains('"foo"?')
@@ -777,7 +816,9 @@ describe('Inquiries.vue', () => {
       viewOptions: [],
       createdAt: '2020-03-08T19:57:56.299Z'
     }
-    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([predefinedInquiry])
+    sinon
+      .stub(storedInquiries, 'readPredefinedInquiries')
+      .resolves([predefinedInquiry])
     const inquiryInStore = {
       id: 1,
       name: 'foo',
@@ -787,19 +828,24 @@ describe('Inquiries.vue', () => {
       createdAt: '2020-03-08T19:57:56.299Z'
     }
 
-    sinon.stub(storedInquiries, 'serialiseInquiries').returns('I am a serialized inquiries')
+    sinon
+      .stub(storedInquiries, 'serialiseInquiries')
+      .returns('I am a serialized inquiries')
     sinon.stub(fu, 'exportToFile')
 
     const state = {
       predefinedInquiries: [],
-      inquiries: [inquiryInStore, {
-        id: 2,
-        name: 'bar',
-        query: '',
-        viewType: 'chart',
-        viewOptions: [],
-        createdAt: '2020-03-08T19:57:56.299Z'
-      }]
+      inquiries: [
+        inquiryInStore,
+        {
+          id: 2,
+          name: 'bar',
+          query: '',
+          viewType: 'chart',
+          viewOptions: [],
+          createdAt: '2020-03-08T19:57:56.299Z'
+        }
+      ]
     }
     const store = createStore({ state, mutations, actions })
 
@@ -815,12 +861,17 @@ describe('Inquiries.vue', () => {
 
     await wrapper.find('#toolbar-btns-export').trigger('click')
 
-    expect(storedInquiries.serialiseInquiries.calledOnceWith(
-      sinon.match([predefinedInquiry, inquiryInStore])
-    )).to.equals(true)
+    expect(
+      storedInquiries.serialiseInquiries.calledOnceWith(
+        sinon.match([predefinedInquiry, inquiryInStore])
+      )
+    ).to.equals(true)
 
     expect(
-      fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
+      fu.exportToFile.calledOnceWith(
+        'I am a serialized inquiries',
+        'My sqliteviz inquiries.json'
+      )
     ).to.equals(true)
     wrapper.unmount()
   })
@@ -834,7 +885,9 @@ describe('Inquiries.vue', () => {
       viewOptions: [],
       createdAt: '2020-03-08T19:57:56.299Z'
     }
-    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([predefinedInquiry])
+    sinon
+      .stub(storedInquiries, 'readPredefinedInquiries')
+      .resolves([predefinedInquiry])
     const inquiryInStore = {
       id: 1,
       name: 'foo',
@@ -844,7 +897,9 @@ describe('Inquiries.vue', () => {
       createdAt: '2020-03-08T19:57:56.299Z'
     }
 
-    sinon.stub(storedInquiries, 'serialiseInquiries').returns('I am a serialized inquiries')
+    sinon
+      .stub(storedInquiries, 'serialiseInquiries')
+      .returns('I am a serialized inquiries')
     sinon.stub(fu, 'exportToFile')
 
     const state = {
@@ -857,17 +912,24 @@ describe('Inquiries.vue', () => {
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
 
-    await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
+    await wrapper
+      .findComponent({ ref: 'mainCheckBox' })
+      .find('.checkbox-container')
       .trigger('click')
 
     await wrapper.find('#toolbar-btns-export').trigger('click')
 
-    expect(storedInquiries.serialiseInquiries.calledOnceWith(
-      sinon.match([predefinedInquiry, inquiryInStore])
-    )).to.equals(true)
+    expect(
+      storedInquiries.serialiseInquiries.calledOnceWith(
+        sinon.match([predefinedInquiry, inquiryInStore])
+      )
+    ).to.equals(true)
 
     expect(
-      fu.exportToFile.calledOnceWith('I am a serialized inquiries', 'My sqliteviz inquiries.json')
+      fu.exportToFile.calledOnceWith(
+        'I am a serialized inquiries',
+        'My sqliteviz inquiries.json'
+      )
     ).to.equals(true)
     wrapper.unmount()
   })
@@ -881,7 +943,9 @@ describe('Inquiries.vue', () => {
       viewOptions: [],
       createdAt: '2020-03-08T19:57:56.299Z'
     }
-    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([predefinedInquiry])
+    sinon
+      .stub(storedInquiries, 'readPredefinedInquiries')
+      .resolves([predefinedInquiry])
     const foo = {
       id: 1,
       name: 'foo',
@@ -918,10 +982,10 @@ describe('Inquiries.vue', () => {
 
     const wrapper = mount(Inquiries, {
       attachTo: document.body,
-      global: { 
+      global: {
         plugins: [store],
         stubs: { teleport: true, transition: false }
-       }
+      }
     })
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
@@ -938,8 +1002,9 @@ describe('Inquiries.vue', () => {
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // check the message in the dialog
-    expect(wrapper.find('.dialog-body').text())
-      .to.contains('Are you sure you want to delete 2 inquiries?')
+    expect(wrapper.find('.dialog-body').text()).to.contains(
+      'Are you sure you want to delete 2 inquiries?'
+    )
 
     // find Delete in the dialog and click
     await wrapper
@@ -949,7 +1014,9 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
-    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains(
+      'hello_world'
+    )
     expect(wrapper.findAll('tbody tr')[1].find('td').text()).to.equals('baz')
 
     // check that deleted inquiry was also deleted from tabs
@@ -975,89 +1042,9 @@ describe('Inquiries.vue', () => {
       viewOptions: [],
       createdAt: '2020-03-08T19:57:56.299Z'
     }
-    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([predefinedInquiry])
-    const foo = {
-      id: 1,
-      name: 'foo',
-      query: '',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-03-08T19:57:56.299Z'
-    }
-    const bar = {
-      id: 2,
-      name: 'bar',
-      query: '',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-03-08T19:57:56.299Z'
-    }
-    sinon.stub(storedInquiries, 'updateStorage')
-
-    const state = {
-      tabs: [],
-      predefinedInquiries: [],
-      inquiries: [foo, bar]
-    }
-    const store = createStore({ state, mutations, actions })
-
-    const wrapper = mount(Inquiries, {
-      attachTo: document.body,
-      global: {
-        plugins: [store],
-        stubs: { teleport: true, transition: false } 
-      }
-    })
-    await storedInquiries.readPredefinedInquiries.returnValues[0]
-    await nextTick()
-
-    const rows = wrapper.findAll('tbody tr')
-
-    // Select inquiries (select also predefined inquiries)
-    await rows[0].find('.checkbox-container').trigger('click')
-    await rows[1].find('.checkbox-container').trigger('click')
-
-    await wrapper.find('#toolbar-btns-delete').trigger('click')
-
-    // check that delete dialog is open
-    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-
-    // check the message in the dialog
-    expect(wrapper.find('.dialog-body').text())
-      .to.contains('Are you sure you want to delete 1 inquiry?')
-
-    expect(wrapper.find('.dialog-body #note').isVisible()).to.equals(true)
-
-    // find Delete in the dialog and click
-    await wrapper
-      .findAll('.dialog-buttons-container button')
-      .find(button => button.text() === 'Delete')
-      .trigger('click')
-
-    // check the rows in the grid
-    expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
-    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
-    expect(wrapper.findAll('tbody tr')[1].find('td').text()).to.equals('bar')
-
-    // check that storage is updated
-    expect(state.inquiries).to.eql([bar])
-
-    // check that delete dialog is closed
-    await clock.tick(100)
-    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
-    wrapper.unmount()
-  })
-
-  it('Deletes all inquiries ignoring predefined ones', async () => {
-    const predefinedInquiry = {
-      id: 0,
-      name: 'hello_world',
-      query: '',
-      viewType: 'chart',
-      viewOptions: [],
-      createdAt: '2020-03-08T19:57:56.299Z'
-    }
-    sinon.stub(storedInquiries, 'readPredefinedInquiries').resolves([predefinedInquiry])
+    sinon
+      .stub(storedInquiries, 'readPredefinedInquiries')
+      .resolves([predefinedInquiry])
     const foo = {
       id: 1,
       name: 'foo',
@@ -1093,7 +1080,96 @@ describe('Inquiries.vue', () => {
     await storedInquiries.readPredefinedInquiries.returnValues[0]
     await nextTick()
 
-    await wrapper.findComponent({ ref: 'mainCheckBox' }).find('.checkbox-container')
+    const rows = wrapper.findAll('tbody tr')
+
+    // Select inquiries (select also predefined inquiries)
+    await rows[0].find('.checkbox-container').trigger('click')
+    await rows[1].find('.checkbox-container').trigger('click')
+
+    await wrapper.find('#toolbar-btns-delete').trigger('click')
+
+    // check that delete dialog is open
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
+
+    // check the message in the dialog
+    expect(wrapper.find('.dialog-body').text()).to.contains(
+      'Are you sure you want to delete 1 inquiry?'
+    )
+
+    expect(wrapper.find('.dialog-body #note').isVisible()).to.equals(true)
+
+    // find Delete in the dialog and click
+    await wrapper
+      .findAll('.dialog-buttons-container button')
+      .find(button => button.text() === 'Delete')
+      .trigger('click')
+
+    // check the rows in the grid
+    expect(wrapper.findAll('tbody tr')).to.have.lengthOf(2)
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains(
+      'hello_world'
+    )
+    expect(wrapper.findAll('tbody tr')[1].find('td').text()).to.equals('bar')
+
+    // check that storage is updated
+    expect(state.inquiries).to.eql([bar])
+
+    // check that delete dialog is closed
+    await clock.tick(100)
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+    wrapper.unmount()
+  })
+
+  it('Deletes all inquiries ignoring predefined ones', async () => {
+    const predefinedInquiry = {
+      id: 0,
+      name: 'hello_world',
+      query: '',
+      viewType: 'chart',
+      viewOptions: [],
+      createdAt: '2020-03-08T19:57:56.299Z'
+    }
+    sinon
+      .stub(storedInquiries, 'readPredefinedInquiries')
+      .resolves([predefinedInquiry])
+    const foo = {
+      id: 1,
+      name: 'foo',
+      query: '',
+      viewType: 'chart',
+      viewOptions: [],
+      createdAt: '2020-03-08T19:57:56.299Z'
+    }
+    const bar = {
+      id: 2,
+      name: 'bar',
+      query: '',
+      viewType: 'chart',
+      viewOptions: [],
+      createdAt: '2020-03-08T19:57:56.299Z'
+    }
+    sinon.stub(storedInquiries, 'updateStorage')
+
+    const state = {
+      tabs: [],
+      predefinedInquiries: [],
+      inquiries: [foo, bar]
+    }
+    const store = createStore({ state, mutations, actions })
+
+    const wrapper = mount(Inquiries, {
+      attachTo: document.body,
+      global: {
+        plugins: [store],
+        stubs: { teleport: true, transition: false }
+      }
+    })
+    await storedInquiries.readPredefinedInquiries.returnValues[0]
+    await nextTick()
+
+    await wrapper
+      .findComponent({ ref: 'mainCheckBox' })
+      .find('.checkbox-container')
       .trigger('click')
 
     await wrapper.find('#toolbar-btns-delete').trigger('click')
@@ -1102,8 +1178,9 @@ describe('Inquiries.vue', () => {
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
 
     // check the message in the dialog
-    expect(wrapper.find('.dialog-body').text())
-      .to.contains('Are you sure you want to delete 2 inquiries?')
+    expect(wrapper.find('.dialog-body').text()).to.contains(
+      'Are you sure you want to delete 2 inquiries?'
+    )
 
     expect(wrapper.find('.dialog-body #note').isVisible()).to.equals(true)
 
@@ -1115,7 +1192,9 @@ describe('Inquiries.vue', () => {
 
     // check the rows in the grid
     expect(wrapper.findAll('tbody tr')).to.have.lengthOf(1)
-    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains('hello_world')
+    expect(wrapper.findAll('tbody tr')[0].find('td').text()).to.contains(
+      'hello_world'
+    )
 
     // check that storage is updated
     expect(state.inquiries).to.eql([])
diff --git a/tests/views/Main/MainMenu.spec.js b/tests/views/Main/MainMenu.spec.js
index ef4243f..40c0562 100644
--- a/tests/views/Main/MainMenu.spec.js
+++ b/tests/views/Main/MainMenu.spec.js
@@ -150,7 +150,9 @@ describe('MainMenu.vue', () => {
     await wrapper.find('#create-btn').trigger('click')
     expect(actions.addTab.calledOnce).to.equal(true)
     await actions.addTab.returnValues[0]
-    expect(mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)).to.equal(true)
+    expect(
+      mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)
+    ).to.equal(true)
     expect($router.push.calledOnce).to.equal(false)
   })
 
@@ -187,106 +189,112 @@ describe('MainMenu.vue', () => {
     await wrapper.find('#create-btn').trigger('click')
     expect(actions.addTab.calledOnce).to.equal(true)
     await actions.addTab.returnValues[0]
-    expect(mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)).to.equal(true)
+    expect(
+      mutations.setCurrentTabId.calledOnceWith(state, newInquiryId)
+    ).to.equal(true)
     expect($router.push.calledOnce).to.equal(true)
   })
 
-  it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/workspace"',
-    async () => {
-      const tab = {
-        query: 'SELECT * FROM foo',
-        execute: sinon.stub(),
-        isSaved: false
+  it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/workspace"', async () => {
+    const tab = {
+      query: 'SELECT * FROM foo',
+      execute: sinon.stub(),
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
+      db: {}
+    }
+    const store = createStore({ state })
+    const $route = { path: '/workspace' }
+    const $router = { push: sinon.stub() }
+
+    wrapper = shallowMount(MainMenu, {
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link'],
+        plugins: [store]
       }
-      const state = {
-        currentTab: tab,
-        tabs: [tab],
-        db: {}
-      }
-      const store = createStore({ state })
-      const $route = { path: '/workspace' }
-      const $router = { push: sinon.stub() }
-
-      wrapper = shallowMount(MainMenu, {
-        global: {
-          mocks: { $route, $router },
-          stubs: ['router-link'],
-          plugins: [store]
-        }
-      })
-
-      const ctrlR = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true })
-      const metaR = new KeyboardEvent('keydown', { key: 'r', metaKey: true })
-      // Running is enabled and route path is workspace
-      document.dispatchEvent(ctrlR)
-      expect(state.currentTab.execute.calledOnce).to.equal(true)
-      document.dispatchEvent(metaR)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-
-      // Running is disabled and route path is workspace
-      store.state.db = null
-      document.dispatchEvent(ctrlR)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-      document.dispatchEvent(metaR)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-
-      // Running is enabled and route path is not workspace
-      state.db = {}
-      wrapper.vm.$route.path = '/inquiries'
-      document.dispatchEvent(ctrlR)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-      document.dispatchEvent(metaR)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
     })
 
-  it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/workspace"',
-    async () => {
-      const tab = {
-        query: 'SELECT * FROM foo',
-        execute: sinon.stub(),
-        isSaved: false
+    const ctrlR = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true })
+    const metaR = new KeyboardEvent('keydown', { key: 'r', metaKey: true })
+    // Running is enabled and route path is workspace
+    document.dispatchEvent(ctrlR)
+    expect(state.currentTab.execute.calledOnce).to.equal(true)
+    document.dispatchEvent(metaR)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+
+    // Running is disabled and route path is workspace
+    store.state.db = null
+    document.dispatchEvent(ctrlR)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+    document.dispatchEvent(metaR)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+
+    // Running is enabled and route path is not workspace
+    state.db = {}
+    wrapper.vm.$route.path = '/inquiries'
+    document.dispatchEvent(ctrlR)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+    document.dispatchEvent(metaR)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+  })
+
+  it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/workspace"', async () => {
+    const tab = {
+      query: 'SELECT * FROM foo',
+      execute: sinon.stub(),
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
+      db: {}
+    }
+    const store = createStore({ state })
+    const $route = { path: '/workspace' }
+    const $router = { push: sinon.stub() }
+
+    wrapper = shallowMount(MainMenu, {
+      global: {
+        mocks: { $route, $router },
+        stubs: ['router-link'],
+        plugins: [store]
       }
-      const state = {
-        currentTab: tab,
-        tabs: [tab],
-        db: {}
-      }
-      const store = createStore({ state })
-      const $route = { path: '/workspace' }
-      const $router = { push: sinon.stub() }
-
-      wrapper = shallowMount(MainMenu, {
-        global: {
-          mocks: { $route, $router },
-          stubs: ['router-link'],
-          plugins: [store]
-        }
-      })
-
-      const ctrlEnter = new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true })
-      const metaEnter = new KeyboardEvent('keydown', { key: 'Enter', metaKey: true })
-      // Running is enabled and route path is workspace
-      document.dispatchEvent(ctrlEnter)
-      expect(state.currentTab.execute.calledOnce).to.equal(true)
-      document.dispatchEvent(metaEnter)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-
-      // Running is disabled and route path is workspace
-      store.state.db = null
-      document.dispatchEvent(ctrlEnter)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-      document.dispatchEvent(metaEnter)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-
-      // Running is enabled and route path is not workspace
-      store.state.db = {}
-      wrapper.vm.$route.path = '/inquiries'
-      document.dispatchEvent(ctrlEnter)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
-      document.dispatchEvent(metaEnter)
-      expect(state.currentTab.execute.calledTwice).to.equal(true)
     })
 
+    const ctrlEnter = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      ctrlKey: true
+    })
+    const metaEnter = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      metaKey: true
+    })
+    // Running is enabled and route path is workspace
+    document.dispatchEvent(ctrlEnter)
+    expect(state.currentTab.execute.calledOnce).to.equal(true)
+    document.dispatchEvent(metaEnter)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+
+    // Running is disabled and route path is workspace
+    store.state.db = null
+    document.dispatchEvent(ctrlEnter)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+    document.dispatchEvent(metaEnter)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+
+    // Running is enabled and route path is not workspace
+    store.state.db = {}
+    wrapper.vm.$route.path = '/inquiries'
+    document.dispatchEvent(ctrlEnter)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+    document.dispatchEvent(metaEnter)
+    expect(state.currentTab.execute.calledTwice).to.equal(true)
+  })
+
   it('Ctrl B calls createNewInquiry', async () => {
     const tab = {
       query: 'SELECT * FROM foo',
@@ -324,124 +332,130 @@ describe('MainMenu.vue', () => {
     expect(wrapper.vm.createNewInquiry.callCount).to.equal(4)
   })
 
-  it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace',
-    async () => {
-      const tab = {
-        query: 'SELECT * FROM foo',
-        execute: sinon.stub(),
-        isSaved: false
+  it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace', async () => {
+    const tab = {
+      query: 'SELECT * FROM foo',
+      execute: sinon.stub(),
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
+      db: {}
+    }
+    const store = createStore({ state })
+    const $route = { path: '/workspace' }
+
+    wrapper = shallowMount(MainMenu, {
+      global: {
+        mocks: { $route },
+        stubs: ['router-link'],
+        plugins: [store]
       }
-      const state = {
-        currentTab: tab,
-        tabs: [tab],
-        db: {}
-      }
-      const store = createStore({ state })
-      const $route = { path: '/workspace' }
-
-      wrapper = shallowMount(MainMenu, {
-        global: {
-          mocks: { $route },
-          stubs: ['router-link'],
-          plugins: [store]
-        }
-      })
-      sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
-
-      const ctrlS = new KeyboardEvent('keydown', { key: 's', ctrlKey: true })
-      const metaS = new KeyboardEvent('keydown', { key: 's', metaKey: true })
-      // tab is unsaved and route is /workspace
-      document.dispatchEvent(ctrlS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledOnce).to.equal(true)
-      document.dispatchEvent(metaS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
-
-      // tab is saved and route is /workspace
-      store.state.tabs[0].isSaved = true
-      document.dispatchEvent(ctrlS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
-      document.dispatchEvent(metaS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
-
-      // tab is unsaved and route is not /workspace
-      wrapper.vm.$route.path = '/inquiries'
-      store.state.tabs[0].isSaved = false
-      document.dispatchEvent(ctrlS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
-      document.dispatchEvent(metaS)
-      expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
     })
+    sinon.stub(wrapper.vm, 'checkInquiryBeforeSave')
 
-  it('Saves the inquiry when no need the new name',
-    async () => {
-      const tab = {
-        id: 1,
+    const ctrlS = new KeyboardEvent('keydown', { key: 's', ctrlKey: true })
+    const metaS = new KeyboardEvent('keydown', { key: 's', metaKey: true })
+    // tab is unsaved and route is /workspace
+    document.dispatchEvent(ctrlS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledOnce).to.equal(true)
+    document.dispatchEvent(metaS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
+
+    // tab is saved and route is /workspace
+    store.state.tabs[0].isSaved = true
+    document.dispatchEvent(ctrlS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
+    document.dispatchEvent(metaS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
+
+    // tab is unsaved and route is not /workspace
+    wrapper.vm.$route.path = '/inquiries'
+    store.state.tabs[0].isSaved = false
+    document.dispatchEvent(ctrlS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
+    document.dispatchEvent(metaS)
+    expect(wrapper.vm.checkInquiryBeforeSave.calledTwice).to.equal(true)
+  })
+
+  it('Saves the inquiry when no need the new name', async () => {
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      execute: sinon.stub(),
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
+      db: {}
+    }
+    const mutations = {
+      updateTab: sinon.stub()
+    }
+    const actions = {
+      saveInquiry: sinon.stub().returns({
         name: 'foo',
+        id: 1,
         query: 'SELECT * FROM foo',
-        execute: sinon.stub(),
-        isSaved: false
-      }
-      const state = {
-        currentTab: tab,
-        tabs: [tab],
-        db: {}
-      }
-      const mutations = {
-        updateTab: sinon.stub()
-      }
-      const actions = {
-        saveInquiry: sinon.stub().returns({
-          name: 'foo',
-          id: 1,
-          query: 'SELECT * FROM foo',
-          viewType: 'chart',
-          viewOptions: []
-        })
-      }
-      const store = createStore({ state, mutations, actions })
-      const $route = { path: '/workspace' }
-      sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
-
-      wrapper = mount(MainMenu, {
-        attachTo: document.body,
-        global: {
-          mocks: { $route },
-          stubs: {
-            'router-link': true, 'app-diagnostic-info': true,
-            teleport: true, transition: false
-          },
-          plugins: [store]
-        }
+        viewType: 'chart',
+        viewOptions: []
       })
+    }
+    const store = createStore({ state, mutations, actions })
+    const $route = { path: '/workspace' }
+    sinon.stub(storedInquiries, 'isTabNeedName').returns(false)
 
-      await wrapper.find('#save-btn').trigger('click')
-
-      // check that the dialog is closed
-      expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
-
-      // check that the inquiry was saved via saveInquiry (newName='')
-      expect(actions.saveInquiry.calledOnce).to.equal(true)
-      expect(actions.saveInquiry.args[0][1]).to.eql({
-        inquiryTab: state.currentTab, newName: ''
-      })
-
-      // check that the tab was updated
-      expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-        tab,
-        newValues: {
-          name: 'foo',
-          id: 1,
-          query: 'SELECT * FROM foo',
-          viewType: 'chart',
-          viewOptions: [],
-          isSaved: true
-        }
-      }))).to.equal(true)
-
-      // check that 'inquirySaved' event was triggered on eventBus
-      expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
+    wrapper = mount(MainMenu, {
+      attachTo: document.body,
+      global: {
+        mocks: { $route },
+        stubs: {
+          'router-link': true,
+          'app-diagnostic-info': true,
+          teleport: true,
+          transition: false
+        },
+        plugins: [store]
+      }
     })
 
+    await wrapper.find('#save-btn').trigger('click')
+
+    // check that the dialog is closed
+    expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
+
+    // check that the inquiry was saved via saveInquiry (newName='')
+    expect(actions.saveInquiry.calledOnce).to.equal(true)
+    expect(actions.saveInquiry.args[0][1]).to.eql({
+      inquiryTab: state.currentTab,
+      newName: ''
+    })
+
+    // check that the tab was updated
+    expect(
+      mutations.updateTab.calledOnceWith(
+        state,
+        sinon.match({
+          tab,
+          newValues: {
+            name: 'foo',
+            id: 1,
+            query: 'SELECT * FROM foo',
+            viewType: 'chart',
+            viewOptions: [],
+            isSaved: true
+          }
+        })
+      )
+    ).to.equal(true)
+
+    // check that 'inquirySaved' event was triggered on eventBus
+    expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
+  })
+
   it('Shows en error when the new name is needed but not specifyied', async () => {
     const tab = {
       id: 1,
@@ -477,8 +491,10 @@ describe('MainMenu.vue', () => {
       global: {
         mocks: { $route },
         stubs: {
-          'router-link': true, 'app-diagnostic-info': true,
-          teleport: true, transition: false
+          'router-link': true,
+          'app-diagnostic-info': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -488,8 +504,9 @@ describe('MainMenu.vue', () => {
 
     // check that the dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Save inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Save inquiry'
+    )
 
     // find Save in the dialog and click
     await wrapper
@@ -498,7 +515,9 @@ describe('MainMenu.vue', () => {
       .trigger('click')
 
     // check that we have an error message and dialog is still open
-    expect(wrapper.find('.text-field-error').text()).to.equal('Inquiry name can\'t be empty')
+    expect(wrapper.find('.text-field-error').text()).to.equal(
+      "Inquiry name can't be empty"
+    )
     await clock.tick(100)
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
   })
@@ -538,8 +557,10 @@ describe('MainMenu.vue', () => {
       global: {
         mocks: { $route },
         stubs: {
-          'router-link': true, 'app-diagnostic-info': true,
-          teleport: true, transition: false
+          'router-link': true,
+          'app-diagnostic-info': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -549,8 +570,9 @@ describe('MainMenu.vue', () => {
 
     // check that the dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Save inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Save inquiry'
+    )
 
     // enter the new name
     await wrapper.find('.dialog-body input').setValue('foo')
@@ -575,17 +597,22 @@ describe('MainMenu.vue', () => {
     })
 
     // check that the tab was updated
-    expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-      tab,
-      newValues: {
-        name: 'foo',
-        id: 1,
-        query: 'SELECT * FROM foo',
-        viewType: 'chart',
-        viewOptions: [],
-        isSaved: true
-      }
-    }))).to.equal(true)
+    expect(
+      mutations.updateTab.calledOnceWith(
+        state,
+        sinon.match({
+          tab,
+          newValues: {
+            name: 'foo',
+            id: 1,
+            query: 'SELECT * FROM foo',
+            viewType: 'chart',
+            viewOptions: [],
+            isSaved: true
+          }
+        })
+      )
+    ).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on eventBus
     expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
@@ -635,8 +662,10 @@ describe('MainMenu.vue', () => {
       global: {
         mocks: { $route },
         stubs: {
-          'router-link': true, 'app-diagnostic-info': true,
-          teleport: true, transition: false
+          'router-link': true,
+          'app-diagnostic-info': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -646,8 +675,9 @@ describe('MainMenu.vue', () => {
 
     // check that the dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Save inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Save inquiry'
+    )
 
     // check that save-note is visible (save-note is an explanation why do we need a new name)
     expect(wrapper.find('#save-note').isVisible()).to.equal(true)
@@ -675,17 +705,22 @@ describe('MainMenu.vue', () => {
     })
 
     // check that the tab was updated
-    expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-      tab,
-      newValues: {
-        name: 'bar',
-        id: 2,
-        query: 'SELECT * FROM foo',
-        viewType: 'chart',
-        viewOptions: [],
-        isSaved: true
-      }
-    }))).to.equal(true)
+    expect(
+      mutations.updateTab.calledOnceWith(
+        state,
+        sinon.match({
+          tab,
+          newValues: {
+            name: 'bar',
+            id: 2,
+            query: 'SELECT * FROM foo',
+            viewType: 'chart',
+            viewOptions: [],
+            isSaved: true
+          }
+        })
+      )
+    ).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on eventBus
     expect(eventBus.$emit.calledOnceWith('inquirySaved')).to.equal(true)
@@ -738,8 +773,10 @@ describe('MainMenu.vue', () => {
       global: {
         mocks: { $route },
         stubs: {
-          'router-link': true, 'app-diagnostic-info': true,
-          teleport: true, transition: false
+          'router-link': true,
+          'app-diagnostic-info': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -749,8 +786,9 @@ describe('MainMenu.vue', () => {
 
     // check that the dialog is open
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Save inquiry')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Save inquiry'
+    )
 
     // find Cancel in the dialog and click
     await wrapper
diff --git a/tests/views/Main/Workspace/Schema/Schema.spec.js b/tests/views/Main/Workspace/Schema/Schema.spec.js
index a5c9a1f..102549f 100644
--- a/tests/views/Main/Workspace/Schema/Schema.spec.js
+++ b/tests/views/Main/Workspace/Schema/Schema.spec.js
@@ -11,7 +11,6 @@ import fIo from '@/lib/utils/fileIo'
 import csv from '@/lib/csv'
 import { nextTick } from 'vue'
 
-
 describe('Schema.vue', () => {
   let clock
 
@@ -145,7 +144,10 @@ describe('Schema.vue', () => {
       }
     })
 
-    await wrapper.findComponent({ name: 'export-icon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'export-icon' })
+      .find('svg')
+      .trigger('click')
     expect(state.db.export.calledOnceWith('fooDB'))
     wrapper.unmount()
   })
@@ -188,14 +190,18 @@ describe('Schema.vue', () => {
     sinon.spy(wrapper.vm, 'addCsvJson')
     sinon.spy(wrapper.vm.$refs.addCsvJson, 'loadToDb')
 
-    await wrapper.findComponent({ name: 'add-table-icon' }).find('svg').trigger('click')
+    await wrapper
+      .findComponent({ name: 'add-table-icon' })
+      .find('svg')
+      .trigger('click')
     await wrapper.vm.$refs.addCsvJson.preview.returnValues[0]
     await wrapper.vm.addCsvJson.returnValues[0]
     await nextTick()
     await nextTick()
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('CSV import')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'CSV import'
+    )
     await wrapper.find('#import-start').trigger('click')
     await wrapper.vm.$refs.addCsvJson.loadToDb.returnValues[0]
     await wrapper.find('#import-finish').trigger('click')
@@ -205,7 +211,13 @@ describe('Schema.vue', () => {
 
     expect(wrapper.vm.$store.state.db.schema).to.eql([
       { name: 'foo', columns: [{ name: 'id', type: 'N/A' }] },
-      { name: 'test', columns: [{ name: 'col1', type: 'REAL' }, { name: 'col2', type: 'TEXT' }] }
+      {
+        name: 'test',
+        columns: [
+          { name: 'col1', type: 'REAL' },
+          { name: 'col2', type: 'TEXT' }
+        ]
+      }
     ])
 
     const res = await wrapper.vm.$store.state.db.execute('select * from test')
diff --git a/tests/views/Main/Workspace/Schema/TableDescription.spec.js b/tests/views/Main/Workspace/Schema/TableDescription.spec.js
index 02038d0..1d29d18 100644
--- a/tests/views/Main/Workspace/Schema/TableDescription.spec.js
+++ b/tests/views/Main/Workspace/Schema/TableDescription.spec.js
@@ -36,7 +36,11 @@ describe('TableDescription.vue', () => {
 
     expect(wrapper.find('.columns').isVisible()).to.equal(true)
     expect(wrapper.findAll('.column').length).to.equal(2)
-    expect(wrapper.findAll('.column')[0].text()).to.include('id').and.include('number')
-    expect(wrapper.findAll('.column')[1].text()).to.include('title').and.include('nvarchar(24)')
+    expect(wrapper.findAll('.column')[0].text())
+      .to.include('id')
+      .and.include('number')
+    expect(wrapper.findAll('.column')[1].text())
+      .to.include('title')
+      .and.include('nvarchar(24)')
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
index 10c1bcf..caf06b9 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js
@@ -12,9 +12,9 @@ describe('DataView.vue', () => {
   })
 
   it('emits update on mode changing', async () => {
-    const wrapper = mount(DataView, { 
+    const wrapper = mount(DataView, {
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -26,24 +26,32 @@ describe('DataView.vue', () => {
   })
 
   it('method getOptionsForSave calls the same method of the current view component', async () => {
-    const wrapper = mount(DataView,  {
+    const wrapper = mount(DataView, {
       global: {
         mocks: { $store }
       }
     })
 
     const chart = wrapper.findComponent({ name: 'Chart' }).vm
-    sinon.stub(chart, 'getOptionsForSave').returns({ here_are: 'chart_settings' })
+    sinon
+      .stub(chart, 'getOptionsForSave')
+      .returns({ here_are: 'chart_settings' })
 
-    expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'chart_settings' })
+    expect(wrapper.vm.getOptionsForSave()).to.eql({
+      here_are: 'chart_settings'
+    })
 
     const pivotBtn = wrapper.findComponent({ ref: 'pivotBtn' })
     await pivotBtn.trigger('click')
 
     const pivot = wrapper.findComponent({ name: 'pivot' }).vm
-    sinon.stub(pivot, 'getOptionsForSave').returns({ here_are: 'pivot_settings' })
+    sinon
+      .stub(pivot, 'getOptionsForSave')
+      .returns({ here_are: 'pivot_settings' })
 
-    expect(wrapper.vm.getOptionsForSave()).to.eql({ here_are: 'pivot_settings' })
+    expect(wrapper.vm.getOptionsForSave()).to.eql({
+      here_are: 'pivot_settings'
+    })
     wrapper.unmount()
   })
 
@@ -117,7 +125,7 @@ describe('DataView.vue', () => {
     sinon.spy(window, 'alert')
     const wrapper = mount(DataView, {
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -127,8 +135,8 @@ describe('DataView.vue', () => {
     expect(
       window.alert.calledOnceWith(
         "Your browser doesn't support copying images into the clipboard. " +
-        'If you use Firefox you can enable it ' +
-        'by setting dom.events.asyncClipboard.clipboardItem to true.'
+          'If you use Firefox you can enable it ' +
+          'by setting dom.events.asyncClipboard.clipboardItem to true.'
       )
     ).to.equal(true)
 
@@ -146,9 +154,11 @@ describe('DataView.vue', () => {
         mocks: { $store }
       }
     })
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
-      await clock.tick(5000)
-    })
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+      })
 
     // Click copy to clipboard
     const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
@@ -156,11 +166,14 @@ describe('DataView.vue', () => {
 
     // The dialog is shown...
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Copy to clipboard')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
 
     // ... with Rendering message...
-    expect(wrapper.find('.dialog-body').text()).to.equal('Rendering the visualisation...')
+    expect(wrapper.find('.dialog-body').text()).to.equal(
+      'Rendering the visualisation...'
+    )
 
     // Switch to microtasks (let prepareCopy run)
     await clock.tick(0)
@@ -177,7 +190,9 @@ describe('DataView.vue', () => {
     expect(wrapper.find('.dialog-body').text()).to.equal('Image is ready')
 
     // Click copy
-    await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
 
     // The dialog is not shown...
     await clock.tick(100)
@@ -196,9 +211,11 @@ describe('DataView.vue', () => {
       }
     })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
-      await clock.tick(500)
-    })
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(500)
+      })
 
     // Click copy to clipboard
     const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
@@ -229,9 +246,11 @@ describe('DataView.vue', () => {
       }
     })
     sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(wrapper.vm.$refs.viewComponent, 'prepareCopy').callsFake(async () => {
-      await clock.tick(5000)
-    })
+    sinon
+      .stub(wrapper.vm.$refs.viewComponent, 'prepareCopy')
+      .callsFake(async () => {
+        await clock.tick(5000)
+      })
 
     // Click copy to clipboard
     const copyBtn = wrapper.findComponent({ ref: 'copyToClipboardBtn' })
@@ -245,7 +264,9 @@ describe('DataView.vue', () => {
     await nextTick()
 
     // Click cancel
-    await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
+    await wrapper
+      .find('.dialog-buttons-container button.secondary')
+      .trigger('click')
 
     // The dialog is not shown...
     await clock.tick(100)
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
index 2e238d6..6cab83c 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js
@@ -39,7 +39,7 @@ describe('Pivot.vue', () => {
         }
       },
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
     const colLabels = wrapper.findAll('.pivot-output thead th.pvtColLabel')
@@ -77,7 +77,7 @@ describe('Pivot.vue', () => {
         }
       },
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -144,7 +144,11 @@ describe('Pivot.vue', () => {
       rendererName: 'Table',
       vals: []
     })
-    sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'getOptionsForSave')
+    sinon
+      .stub(
+        wrapper.findComponent({ ref: 'customChart' }).vm,
+        'getOptionsForSave'
+      )
       .returns({ here_are: 'custom chart settings' })
 
     let optionsForSave = wrapper.vm.getOptionsForSave()
@@ -208,7 +212,8 @@ describe('Pivot.vue', () => {
 
     expect(await wrapper.vm.prepareCopy()).to.be.instanceof(HTMLCanvasElement)
 
-    sinon.stub(wrapper.findComponent({ref: "customChart"}).vm, 'prepareCopy')
+    sinon
+      .stub(wrapper.findComponent({ ref: 'customChart' }).vm, 'prepareCopy')
       .returns(URL.createObjectURL(new Blob()))
 
     await wrapper.findComponent({ name: 'pivotUi' }).setValue({
@@ -271,7 +276,7 @@ describe('Pivot.vue', () => {
       }
     })
 
-    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
     sinon.stub(chartComponent, 'saveAsSvg')
 
     await wrapper.vm.saveAsSvg()
@@ -309,7 +314,7 @@ describe('Pivot.vue', () => {
       }
     })
 
-    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
     sinon.stub(chartComponent, 'saveAsHtml')
 
     await wrapper.vm.saveAsHtml()
@@ -347,7 +352,7 @@ describe('Pivot.vue', () => {
       }
     })
 
-    const chartComponent = wrapper.findComponent({ref: "customChart"}).vm
+    const chartComponent = wrapper.findComponent({ ref: 'customChart' }).vm
     sinon.stub(chartComponent, 'saveAsPng')
 
     await wrapper.vm.saveAsPng()
@@ -376,7 +381,7 @@ describe('Pivot.vue', () => {
       },
       attachTo: container,
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -407,7 +412,7 @@ describe('Pivot.vue', () => {
       },
       attachTo: container,
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -440,14 +445,16 @@ describe('Pivot.vue', () => {
       },
       attachTo: container,
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
     await wrapper.vm.saveAsHtml()
     expect(pivotHelper.getPivotHtml.calledOnce).to.equal(true)
     const html = pivotHelper.getPivotHtml.returnValues[0]
-    expect(fIo.exportToFile.calledOnceWith(html, 'pivot.html', 'text/html')).to.equal(true)
+    expect(
+      fIo.exportToFile.calledOnceWith(html, 'pivot.html', 'text/html')
+    ).to.equal(true)
   })
 
   it('saveAsPng - standart chart', async () => {
@@ -473,7 +480,7 @@ describe('Pivot.vue', () => {
       },
       attachTo: container,
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -481,12 +488,18 @@ describe('Pivot.vue', () => {
     expect(chartHelper.getImageDataUrl.calledOnce).to.equal(true)
     await chartHelper.getImageDataUrl.returnValues[0]
     expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
-    expect(fIo.downloadFromUrl.calledOnceWith('standat chart data url', 'pivot')).to.equal(true)
+    expect(
+      fIo.downloadFromUrl.calledOnceWith('standat chart data url', 'pivot')
+    ).to.equal(true)
   })
 
   it('saveAsPng - table', async () => {
-    sinon.stub(pivotHelper, 'getPivotCanvas').returns(document.createElement('canvas'))
-    sinon.stub(HTMLCanvasElement.prototype, 'toDataURL').returns('canvas data url')
+    sinon
+      .stub(pivotHelper, 'getPivotCanvas')
+      .returns(document.createElement('canvas'))
+    sinon
+      .stub(HTMLCanvasElement.prototype, 'toDataURL')
+      .returns('canvas data url')
     sinon.stub(fIo, 'downloadFromUrl')
 
     const wrapper = mount(Pivot, {
@@ -508,7 +521,7 @@ describe('Pivot.vue', () => {
       },
       attachTo: container,
       global: {
-        stubs: { 'chart': true }
+        stubs: { chart: true }
       }
     })
 
@@ -516,6 +529,8 @@ describe('Pivot.vue', () => {
     expect(HTMLCanvasElement.prototype.toDataURL.calledOnce).to.equal(true)
     await HTMLCanvasElement.prototype.toDataURL.returnValues[0]
     expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
-    expect(fIo.downloadFromUrl.calledOnceWith('canvas data url', 'pivot')).to.equal(true)
+    expect(
+      fIo.downloadFromUrl.calledOnceWith('canvas data url', 'pivot')
+    ).to.equal(true)
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
index 7b59d82..f65a593 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.spec.js
@@ -4,10 +4,10 @@ import PivotSortBtn from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi
 
 describe('PivotSortBtn.vue', () => {
   it('switches order', async () => {
-    const wrapper = shallowMount(PivotSortBtn, { 
+    const wrapper = shallowMount(PivotSortBtn, {
       props: {
         modelValue: 'key_a_to_z',
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       }
     })
 
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
index efdcbe0..5d9e823 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotUi.spec.js
@@ -7,16 +7,17 @@ describe('PivotUi.vue', () => {
     const wrapper = mount(PivotUi, {
       props: {
         keyNames: ['foo', 'bar'],
-        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e })
+        'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e })
       }
     })
 
     // choose columns
-    await wrapper.findAll('.sqliteviz-select.cols .multiselect__element > span')[0]
+    await wrapper
+      .findAll('.sqliteviz-select.cols .multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(1)
-   
+
     let value = wrapper.props('modelValue')
     expect(value.rows).to.eql([])
     expect(value.cols).to.eql(['foo'])
@@ -28,7 +29,8 @@ describe('PivotUi.vue', () => {
     expect(value.vals).to.eql([])
 
     // choose rows
-    await wrapper.findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
+    await wrapper
+      .findAll('.sqliteviz-select.rows .multiselect__element > span')[0]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(2)
@@ -71,7 +73,8 @@ describe('PivotUi.vue', () => {
     expect(value.vals).to.eql([])
 
     // change aggregator
-    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
+    await wrapper
+      .findAll('.sqliteviz-select.aggregator .multiselect__element > span')[12]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(5)
@@ -120,7 +123,8 @@ describe('PivotUi.vue', () => {
     expect(value.vals).to.eql(['foo', 'bar'])
 
     // change renderer
-    await wrapper.findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
+    await wrapper
+      .findAll('.sqliteviz-select.renderer .multiselect__element > span')[13]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(8)
@@ -134,7 +138,8 @@ describe('PivotUi.vue', () => {
     expect(value.vals).to.eql(['foo', 'bar'])
 
     // change aggregator again
-    await wrapper.findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
+    await wrapper
+      .findAll('.sqliteviz-select.aggregator .multiselect__element > span')[3]
       .trigger('click')
 
     expect(wrapper.emitted().update.length).to.equal(9)
diff --git a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js
index b6d174b..c12e92a 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js
@@ -1,6 +1,9 @@
 import { expect } from 'chai'
-import { _getDataSources, getPivotCanvas, getPivotHtml }
-  from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper'
+import {
+  _getDataSources,
+  getPivotCanvas,
+  getPivotHtml
+} from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper'
 
 describe('pivotHelper.js', () => {
   it('_getDataSources returns data sources', () => {
@@ -22,10 +25,10 @@ describe('pivotHelper.js', () => {
     const pivotData = {
       rowAttrs: ['y'],
       colAttrs: ['x', 'z'],
-      getRowKeys () {
+      getRowKeys() {
         return [[3], [6], [9]]
       },
-      getColKeys () {
+      getColKeys() {
         return [
           [5, 2],
           [5, 3],
@@ -33,9 +36,9 @@ describe('pivotHelper.js', () => {
           [10, 6]
         ]
       },
-      getAggregator (row, col) {
+      getAggregator(row, col) {
         return {
-          value () {
+          value() {
             return +row + +col[1]
           }
         }
@@ -61,7 +64,9 @@ describe('pivotHelper.js', () => {
     child.classList.add('pvtTable')
     pivotOutput.append(child)
 
-    expect(await getPivotCanvas(pivotOutput)).to.be.instanceof(HTMLCanvasElement)
+    expect(await getPivotCanvas(pivotOutput)).to.be.instanceof(
+      HTMLCanvasElement
+    )
   })
 
   it('getPivotHtml returns html with styles', async () => {
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
index 1766d51..2f20cca 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js
@@ -25,8 +25,9 @@ describe('Record.vue', () => {
     expect(rows[1].findAll('th')[0].text()).to.equals('name')
     expect(rows[1].findAll('td')[0].text()).to.equals('bar')
 
-    const selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    const selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('bar')
   })
 
@@ -49,8 +50,9 @@ describe('Record.vue', () => {
     expect(rows).to.have.lengthOf(2)
     expect(rows[0].findAll('td')[0].text()).to.equals('1')
     expect(rows[1].findAll('td')[0].text()).to.equals('foo')
-    let selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    let selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('1')
 
     await wrapper.find('.next').trigger('click')
@@ -58,8 +60,9 @@ describe('Record.vue', () => {
     rows = wrapper.findAll('tbody tr')
     expect(rows[0].findAll('td')[0].text()).to.equals('2')
     expect(rows[1].findAll('td')[0].text()).to.equals('bar')
-    selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('2')
 
     await wrapper.find('.prev').trigger('click')
@@ -67,8 +70,9 @@ describe('Record.vue', () => {
     rows = wrapper.findAll('tbody tr')
     expect(rows[0].findAll('td')[0].text()).to.equals('1')
     expect(rows[1].findAll('td')[0].text()).to.equals('foo')
-    selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('1')
 
     await wrapper.find('.last').trigger('click')
@@ -76,8 +80,9 @@ describe('Record.vue', () => {
     rows = wrapper.findAll('tbody tr')
     expect(rows[0].findAll('td')[0].text()).to.equals('3')
     expect(rows[1].findAll('td')[0].text()).to.equals('baz')
-    selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('3')
 
     await wrapper.find('.first').trigger('click')
@@ -85,8 +90,9 @@ describe('Record.vue', () => {
     rows = wrapper.findAll('tbody tr')
     expect(rows[0].findAll('td')[0].text()).to.equals('1')
     expect(rows[1].findAll('td')[0].text()).to.equals('foo')
-    selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('1')
   })
 
@@ -105,12 +111,14 @@ describe('Record.vue', () => {
       }
     })
 
-    const selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    const selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     await selectedCell.trigger('click')
 
-    const selectedCellAfterClick = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    const selectedCellAfterClick = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCellAfterClick.exists()).to.equals(false)
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
index fd58469..6e9047c 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js
@@ -39,8 +39,8 @@ describe('RunResult.vue', () => {
     expect(
       window.alert.calledOnceWith(
         "Your browser doesn't support copying into the clipboard. " +
-        'If you use Firefox you can enable it ' +
-        'by setting dom.events.asyncClipboard.clipboardItem to true.'
+          'If you use Firefox you can enable it ' +
+          'by setting dom.events.asyncClipboard.clipboardItem to true.'
       )
     ).to.equal(true)
 
@@ -79,8 +79,9 @@ describe('RunResult.vue', () => {
 
     // The dialog is shown...
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(true)
-    expect(wrapper.find('.dialog.vfm .dialog-header').text())
-      .to.contain('Copy to clipboard')
+    expect(wrapper.find('.dialog.vfm .dialog-header').text()).to.contain(
+      'Copy to clipboard'
+    )
 
     // ... with Building message...
     expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
@@ -96,7 +97,9 @@ describe('RunResult.vue', () => {
     expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
 
     // Click copy
-    await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
+    await wrapper
+      .find('.dialog-buttons-container button.primary')
+      .trigger('click')
     await window.navigator.clipboard.writeText.returnValues[0]
 
     // The dialog is not shown...
@@ -180,7 +183,9 @@ describe('RunResult.vue', () => {
     await nextTick()
 
     // Click cancel
-    await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
+    await wrapper
+      .find('.dialog-buttons-container button.secondary')
+      .trigger('click')
     // The dialog is not shown...
     await clock.tick(100)
     expect(wrapper.find('.dialog.vfm').exists()).to.equal(false)
@@ -246,8 +251,9 @@ describe('RunResult.vue', () => {
 
     // Click on 'bar' cell again
     await rows[1].findAll('td')[1].trigger('click')
-    expect(wrapper.find('.value-viewer-container .table-preview').text())
-      .to.equals('No cell selected to view')
+    expect(
+      wrapper.find('.value-viewer-container .table-preview').text()
+    ).to.equals('No cell selected to view')
     wrapper.unmount()
   })
 
@@ -318,8 +324,9 @@ describe('RunResult.vue', () => {
 
     // Click on 'foo' cell again
     await rows[1].find('td').trigger('click')
-    expect(wrapper.find('.value-viewer-container .table-preview').text())
-      .to.equals('No cell selected to view')
+    expect(
+      wrapper.find('.value-viewer-container .table-preview').text()
+    ).to.equals('No cell selected to view')
     wrapper.unmount()
   })
 
@@ -357,8 +364,9 @@ describe('RunResult.vue', () => {
 
     // 'name-1' is selected
     expect(wrapper.find('.value-body').text()).to.equals('name-1')
-    let selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    let selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('name-1')
 
     // Go to last record
@@ -375,8 +383,9 @@ describe('RunResult.vue', () => {
 
     // '29' is selected
     expect(wrapper.find('.value-body').text()).to.equals('29')
-    selectedCell = wrapper
-      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    selectedCell = wrapper.find(
+      '.sqliteviz-table tbody td[aria-selected="true"]'
+    )
     expect(selectedCell.text()).to.equals('29')
     wrapper.unmount()
   })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js b/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
index 6015880..4b89916 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js
@@ -25,7 +25,7 @@ describe('ValueViewer.vue', () => {
       }
     })
     await wrapper.find('button.json').trigger('click')
-    expect(wrapper.find('.value-body').text()).to.equals('Can\'t parse JSON.')
+    expect(wrapper.find('.value-body').text()).to.equals("Can't parse JSON.")
   })
 
   it('copy to clipboard', async () => {
@@ -38,7 +38,8 @@ describe('ValueViewer.vue', () => {
 
     await wrapper.find('button.copy').trigger('click')
 
-    expect(window.navigator.clipboard.writeText.calledOnceWith('foo'))
-      .to.equal(true)
+    expect(window.navigator.clipboard.writeText.calledOnceWith('foo')).to.equal(
+      true
+    )
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
index 5485344..bbedf8d 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/SqlEditor.spec.js
@@ -18,8 +18,12 @@ describe('SqlEditor.vue', () => {
         plugins: [store]
       }
     })
-    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
-    expect(wrapper.emitted()['update:modelValue'][0]).to.eql(['SELECT * FROM foo'])
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
+    expect(wrapper.emitted()['update:modelValue'][0]).to.eql([
+      'SELECT * FROM foo'
+    ])
   })
 
   it('Run is disabled if there is no db or no query or is getting result set', async () => {
@@ -28,11 +32,13 @@ describe('SqlEditor.vue', () => {
     }
     const store = createStore({ state })
 
-    const wrapper = mount(SqlEditor, { 
+    const wrapper = mount(SqlEditor, {
       global: { plugins: [store] },
       props: { isGettingResults: false }
     })
-    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
     const runButton = wrapper.findComponent({ ref: 'runBtn' })
 
     expect(runButton.props('disabled')).to.equal(true)
@@ -44,7 +50,9 @@ describe('SqlEditor.vue', () => {
     await wrapper.findComponent({ ref: 'cm' }).setValue('', 'value')
     expect(runButton.props('disabled')).to.equal(true)
 
-    await wrapper.findComponent({ ref: 'cm' }).setValue('SELECT * FROM foo', 'value')
+    await wrapper
+      .findComponent({ ref: 'cm' })
+      .setValue('SELECT * FROM foo', 'value')
     expect(runButton.props('disabled')).to.equal(false)
 
     await wrapper.setProps({ isGettingResults: true })
diff --git a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js
index 4a9355d..64bf2b8 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js
@@ -1,7 +1,9 @@
 import { expect } from 'chai'
 import sinon from 'sinon'
 import state from '@/store/state'
-import showHint, { getHints } from '@/views/Main/Workspace/Tabs/Tab/SqlEditor/hint'
+import showHint, {
+  getHints
+} from '@/views/Main/Workspace/Tabs/Tab/SqlEditor/hint'
 import CM from 'codemirror'
 
 describe('hint.js', () => {
@@ -22,9 +24,7 @@ describe('hint.js', () => {
         },
         {
           name: 'bar',
-          columns: [
-            { name: 'barId', type: 'INTEGER' }
-          ]
+          columns: [{ name: 'barId', type: 'INTEGER' }]
         }
       ]
     }
@@ -33,7 +33,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: 'SELECT',
           type: 'keyword'
@@ -70,7 +70,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: 'SELECT',
           type: 'keyword'
@@ -87,7 +87,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: 'foo',
           type: 'string'
@@ -104,7 +104,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: ' ',
           type: null
@@ -121,7 +121,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: ';',
           type: 'punctuation'
@@ -134,30 +134,27 @@ describe('hint.js', () => {
     expect(CM.showHint.called).to.equal(false)
   })
 
-  it(
-    'getHints returns [ ] if there is only one option and token is completed with this option',
-    () => {
-      // mock CM.hint.sql and editor
-      sinon.stub(CM.hint, 'sql').returns({
-        list: [{ text: 'SELECT' }],
-        from: null, // from/to doesn't metter because getRange is mocked
-        to: null
-      })
+  it('getHints returns [ ] if there is only one option and token is completed with this option', () => {
+    // mock CM.hint.sql and editor
+    sinon.stub(CM.hint, 'sql').returns({
+      list: [{ text: 'SELECT' }],
+      from: null, // from/to doesn't metter because getRange is mocked
+      to: null
+    })
 
-      const editor = {
-        getRange () {
-          return 'select'
-        }
+    const editor = {
+      getRange() {
+        return 'select'
       }
-
-      const hints = getHints(editor, {})
-      expect(hints.list).to.eql([])
     }
-  )
+
+    const hints = getHints(editor, {})
+    expect(hints.list).to.eql([])
+  })
 
   it(
     'getHints returns [ ] if there is only one string option and token ' +
-    'is completed with this option',
+      'is completed with this option',
     () => {
       // mock CM.hint.sql and editor
       sinon.stub(CM.hint, 'sql').returns({
@@ -166,7 +163,7 @@ describe('hint.js', () => {
         to: null
       })
       const editor = {
-        getRange () {
+        getRange() {
           return 'house.name'
         }
       }
@@ -178,13 +175,10 @@ describe('hint.js', () => {
 
   it('getHints returns hints as is when there are more than one option', () => {
     // mock CM.hint.sql and editor
-    const list = [
-      { text: 'SELECT' },
-      { text: 'ST' }
-    ]
+    const list = [{ text: 'SELECT' }, { text: 'ST' }]
     sinon.stub(CM.hint, 'sql').returns({ list, from: null, to: null })
     const editor = {
-      getRange () {
+      getRange() {
         return 'se'
       }
     }
@@ -195,22 +189,19 @@ describe('hint.js', () => {
     sinon.restore()
   })
 
-  it(
-    'getHints returns hints as is when there only one option but the token is not completed',
-    () => {
-      // mock CM.hint.sql and editor
-      const list = [{ text: 'SELECT' }]
-      sinon.stub(CM.hint, 'sql').returns({ list, from: null, to: null })
-      const editor = {
-        getRange () {
-          return 'sele'
-        }
+  it('getHints returns hints as is when there only one option but the token is not completed', () => {
+    // mock CM.hint.sql and editor
+    const list = [{ text: 'SELECT' }]
+    sinon.stub(CM.hint, 'sql').returns({ list, from: null, to: null })
+    const editor = {
+      getRange() {
+        return 'sele'
       }
-
-      const hints = getHints(editor, {})
-      expect(hints.list).to.eql(list)
     }
-  )
+
+    const hints = getHints(editor, {})
+    expect(hints.list).to.eql(list)
+  })
 
   it('tables is empty object when schema is null', () => {
     // mock store state
@@ -219,7 +210,7 @@ describe('hint.js', () => {
     // mock showHint and editor
     sinon.stub(CM, 'showHint')
     const editor = {
-      getTokenAt () {
+      getTokenAt() {
         return {
           string: 'SELECT',
           type: 'keyword'
diff --git a/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js b/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
index 38a11ef..85ba9fe 100644
--- a/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js
@@ -31,7 +31,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true, 'icon-button': true },
+        stubs: { chart: true, 'icon-button': true },
         plugins: [store]
       },
       props: {
@@ -56,10 +56,15 @@ describe('Tab.vue', () => {
     })
     await nextTick()
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(true)
-    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
-    expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(true)
-    expect(wrapper.find('.above .sql-editor-panel .codemirror-container').text())
-      .to.contain('SELECT * FROM foo')
+    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(
+      true
+    )
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(true)
+    expect(
+      wrapper.find('.above .sql-editor-panel .codemirror-container').text()
+    ).to.contain('SELECT * FROM foo')
   })
 
   it("Doesn't render tab when it's not active", async () => {
@@ -74,7 +79,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -114,7 +119,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -174,7 +179,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -219,7 +224,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -263,7 +268,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true, 'icon-button': true },
+        stubs: { chart: true, 'icon-button': true },
         plugins: [store]
       },
       props: {
@@ -274,7 +279,9 @@ describe('Tab.vue', () => {
 
     store.state.tabs[0].isGettingResults = true
     await nextTick()
-    expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(true)
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(true)
   })
 
   it('Shows error when executing query ends with error', async () => {
@@ -310,7 +317,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true, 'icon-button': true, },
+        stubs: { chart: true, 'icon-button': true },
         plugins: [store]
       },
       props: {
@@ -323,10 +330,16 @@ describe('Tab.vue', () => {
       message: 'There is no table foo'
     }
     await nextTick()
-    expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
-    expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).isVisible()).to.equal(true)
-    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include('There is no table foo')
+    expect(wrapper.findComponent({ name: 'logs' }).text()).to.include(
+      'There is no table foo'
+    )
   })
 
   it('Passes result to sql-table component', async () => {
@@ -368,7 +381,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -378,10 +391,16 @@ describe('Tab.vue', () => {
     await nextTick()
     store.state.tabs[0].result = result
     await nextTick()
-    expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
-    expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-before').isVisible()
+    ).to.equal(false)
+    expect(
+      wrapper.find('.run-result-panel .result-in-progress').exists()
+    ).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).exists()).to.equal(false)
-    expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(result)
+    expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(
+      result
+    )
   })
 
   it('Switches views', async () => {
@@ -414,7 +433,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -422,33 +441,43 @@ describe('Tab.vue', () => {
       }
     })
 
-    let tableBtn = wrapper.find('.above .side-tool-bar')
+    let tableBtn = wrapper
+      .find('.above .side-tool-bar')
       .findComponent({ ref: 'tableBtn' })
     await tableBtn.vm.$emit('click')
 
-    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(
+      true
+    )
     expect(wrapper.find('.above .run-result-panel').exists()).to.equal(true)
 
-    const dataViewBtn = wrapper.find('.above .side-tool-bar')
+    const dataViewBtn = wrapper
+      .find('.above .side-tool-bar')
       .findComponent({ ref: 'dataViewBtn' })
     await dataViewBtn.vm.$emit('click')
 
-    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .sql-editor-panel').exists()).to.equal(
+      true
+    )
     expect(wrapper.find('.above .data-view-panel').exists()).to.equal(true)
 
-    const sqlEditorBtn = wrapper.find('.above .side-tool-bar')
+    const sqlEditorBtn = wrapper
+      .find('.above .side-tool-bar')
       .findComponent({ ref: 'sqlEditorBtn' })
     await sqlEditorBtn.vm.$emit('click')
 
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.bottomPane .data-view-panel').exists()).to.equal(true)
 
-    tableBtn = wrapper.find('.bottomPane .side-tool-bar')
+    tableBtn = wrapper
+      .find('.bottomPane .side-tool-bar')
       .findComponent({ ref: 'tableBtn' })
     await tableBtn.vm.$emit('click')
 
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
-    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
+    expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(
+      true
+    )
   })
 
   it('Maximize top panel if maximized panel is above', async () => {
@@ -480,7 +509,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -489,8 +518,9 @@ describe('Tab.vue', () => {
     })
     await nextTick()
 
-    expect(wrapper.find('.above').element.parentElement.style.height)
-      .to.equal('100%')
+    expect(wrapper.find('.above').element.parentElement.style.height).to.equal(
+      '100%'
+    )
   })
 
   it('Maximize bottom panel if maximized panel is below', async () => {
@@ -522,7 +552,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -530,8 +560,9 @@ describe('Tab.vue', () => {
       }
     })
     await nextTick()
-    expect(wrapper.find('.bottomPane').element.parentElement.style.height)
-      .to.equal('100%')
+    expect(
+      wrapper.find('.bottomPane').element.parentElement.style.height
+    ).to.equal('100%')
   })
 
   it('Panel size is 50 if nothing to maximize', async () => {
@@ -562,7 +593,7 @@ describe('Tab.vue', () => {
     const wrapper = mount(Tab, {
       attachTo: place,
       global: {
-        stubs: { 'chart': true },
+        stubs: { chart: true },
         plugins: [store]
       },
       props: {
@@ -571,9 +602,11 @@ describe('Tab.vue', () => {
     })
 
     await nextTick()
-    expect(wrapper.find('.above').element.parentElement.style.height)
-      .to.equal('50%')
-    expect(wrapper.find('.bottomPane').element.parentElement.style.height)
-      .to.equal('50%')
+    expect(wrapper.find('.above').element.parentElement.style.height).to.equal(
+      '50%'
+    )
+    expect(
+      wrapper.find('.bottomPane').element.parentElement.style.height
+    ).to.equal('50%')
   })
 })
diff --git a/tests/views/Main/Workspace/Tabs/Tabs.spec.js b/tests/views/Main/Workspace/Tabs/Tabs.spec.js
index 4580ca5..6ff8887 100644
--- a/tests/views/Main/Workspace/Tabs/Tabs.spec.js
+++ b/tests/views/Main/Workspace/Tabs/Tabs.spec.js
@@ -6,10 +6,9 @@ import { createStore } from 'vuex'
 import Tabs from '@/views/Main/Workspace/Tabs'
 import eventBus from '@/lib/eventBus'
 
-
 describe('Tabs.vue', () => {
   let clock
-  
+
   beforeEach(() => {
     clock = sinon.useFakeTimers()
     sinon.spy(eventBus, '$emit')
@@ -43,8 +42,21 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          chart: [],
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -81,8 +93,21 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          chart: [],
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -210,7 +235,9 @@ describe('Tabs.vue', () => {
       attachTo: document.body,
       global: {
         stubs: {
-          'router-link': true, teleport: true, transition: false
+          'router-link': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -284,7 +311,9 @@ describe('Tabs.vue', () => {
       attachTo: document.body,
       global: {
         stubs: {
-          'router-link': true, teleport: true, transition: false
+          'router-link': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -360,7 +389,9 @@ describe('Tabs.vue', () => {
       attachTo: document.body,
       global: {
         stubs: {
-          'router-link': true, teleport: true, transition: false
+          'router-link': true,
+          teleport: true,
+          transition: false
         },
         plugins: [store]
       }
@@ -401,8 +432,21 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          chart: [],
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          chart: [],
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -429,7 +473,13 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          chart: [],
+          isSaved: true
+        }
       ],
       currentTabId: 1
     }
diff --git a/vite.config.js b/vite.config.js
index 6d48ae8..c962745 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,23 +11,23 @@ export default defineConfig({
   plugins: [
     vue(),
     nodePolyfills({
-        include: ['process', 'util', 'stream', 'buffer'],
-        globals: { global: true, process: true },
-      }),
+      include: ['process', 'util', 'stream', 'buffer'],
+      globals: { global: true, process: true }
+    }),
     viteStaticCopy({
-        targets: [
-          {
-            src: 'LICENSE',
-            dest: './'
-          }
-        ]
-      }),
+      targets: [
+        {
+          src: 'LICENSE',
+          dest: './'
+        }
+      ]
+    }),
     VitePWA({
       filename: 'service-worker.js',
       manifest: false,
       injectRegister: false,
       workbox: {
-        globPatterns: ["**\/*.{js,wasm,css,html,woff2,png}"],
+        globPatterns: ['**\/*.{js,wasm,css,html,woff2,png}'],
         globIgnores: ['*.map', 'LICENSE', 'inquiries.json'],
         clientsClaim: true,
         skipWaiting: false,
@@ -39,10 +39,10 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
   },
   optimizeDeps: {
-    include:['sql.js'],
+    include: ['sql.js'],
     esbuildOptions: {
       define: {
         global: 'globalThis'
@@ -56,4 +56,3 @@ export default defineConfig({
     }
   }
 })
-