0.31.0

* Build SQLite 3.50.3

* Update pivot_vtab, base in Dockerfile.test, fix test after SQLite 3.47

* Update CI image for tests

.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es2022: true
+  },
+  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',
+    'no-case-declarations': 'off',
+    'max-len': [2, 100, 4, { ignoreUrls: true }],
+    'vue/multi-word-component-names': 'off',
+    'vue/no-mutating-props': 'warn',
+    'vue/no-reserved-component-names': 'warn',
+    'vue/no-v-model-argument': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': ['error', 'never']
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/**/*.spec.{j,t}s?(x)'],
+      env: {
+        mocha: true
+      }
+    }
+  ]
+}

.eslintrc.js

@@ -1,30 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-case-declarations': 'off',
-    'max-len': [2, 100, 4, { ignoreUrls: true }]
-  },
-  overrides: [
-    {
-      files: [
-        '**/__tests__/*.{j,t}s?(x)',
-        '**/tests/**/*.spec.{j,t}s?(x)'
-      ],
-      env: {
-        mocha: true
-      }
-    }
-  ]
-}

.github/workflows/config.grenrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  dataSource: 'milestones',
+  ignoreIssuesWith: ['wontfix', 'duplicate'],
+  milestoneMatch: 'v{{tag_name}}',
+  template: {
+    issue: '- {{name}} [{{text}}]({{url}})',
+    changelogTitle: '',
+    release: '{{body}}'
+  },
+  groupBy: {
+    Enhancements: ['enhancement', 'internal'],
+    'Bug fixes': ['bug']
+  }
+}

.github/workflows/config.grenrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  dataSource: 'milestones',
-  ignoreIssuesWith: [
-    'wontfix',
-    'duplicate'
-  ],
-  milestoneMatch: 'v{{tag_name}}',
-  template: {
-    issue: '- {{name}} [{{text}}]({{url}})',
-    changelogTitle: "",
-    release: "{{body}}",
-  },
-  groupBy: {
-    'Enhancements': ["enhancement", "internal"],
-    'Bug fixes': ["bug"]
-  }
-}

.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: 10.x
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18.x
 
-    - name: Update npm
-      run: npm install -g npm@7
+      - name: Update npm
+        run: npm install -g npm@10
 
-    - 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 "*.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.cjs"
+        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'

.github/workflows/test.yml

@@ -3,35 +3,39 @@ on:
   workflow_dispatch:
   push:
     branches:
-    - 'master'
+      - 'master'
   pull_request:
     branches:
-    - 'master'
+      - 'master'
 
 jobs:
   test:
     name: Run tests
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: 10.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: 18.x
+      - name: Install browsers
+        run: |
+          export DEBIAN_FRONTEND=noninteractive
+          sudo add-apt-repository -y ppa:mozillateam/ppa
+          sudo apt-get update
+          sudo apt-get install -y \
+            chromium-browser \
+            firefox-esr \
+            xvfb
 
-    - name: Update npm
-      run: npm install -g npm@7
+      - name: Update npm
+        run: npm install -g npm@10
 
-    - 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: xvfb-run -a npm test

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

Dockerfile.test

@@ -3,12 +3,12 @@
 #     docker build -t sqliteviz/test -f Dockerfile.test .
 #
 
-FROM node:12.22-buster
+FROM node:18.20.8-bookworm
 
 RUN set -ex; \
     apt update; \
     apt install -y chromium firefox-esr; \
-    npm install -g npm@7
+    npm install -g npm@10
 
 WORKDIR /tmp/build
 
@@ -19,6 +19,6 @@ RUN npm install
 COPY . .
 
 RUN set -ex; \
-    sed -i 's/browsers: \[.*\],/browsers: ['"'FirefoxHeadlessTouch'"'],/' karma.conf.js
+    sed -i 's/browsers: \[.*\],/browsers: ['"'FirefoxHeadlessTouch'"'],/' karma.conf.cjs
 
 RUN npm run lint -- --no-fix && npm run test

README.md

@@ -5,10 +5,11 @@
 # 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
+
+- run SQL queries against a SQLite database and create [Plotly][11] charts, graphs 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
 - manage inquiries and run them against different databases
@@ -19,16 +20,22 @@ 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].
+
+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].
+Graphs are visualized with [Sigma.js][13] and [Graphology][14].
 
 [1]: https://github.com/plotly/falcon
 [2]: https://github.com/getredash/redash
@@ -42,3 +49,5 @@ It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4]
 [10]: https://github.com/lana-k/sqliteviz/wiki/Predefined-queries
 [11]: https://github.com/plotly/plotly.js
 [12]: https://github.com/nicolaskruchten/pivottable
+[13]: https://www.sigmajs.org/
+[14]: https://graphology.github.io/

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

index.html

@@ -1,12 +1,12 @@
-<!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="<%= BASE_URL %>favicon.png">
-    <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <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 {
         position: fixed;
@@ -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,29 +77,22 @@
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
     <!-- extention slot start -->
     <!-- extention slot end -->
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "include": ["src/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@\/*": ["./src/*"]
+    }
+  }
+}

karma.conf.cjs

@@ -0,0 +1,134 @@
+module.exports = function (config) {
+  config.set({
+    vite: {
+      config: {
+        resolve: {
+          alias: {
+            vue: 'vue/dist/vue.esm-bundler.js'
+          }
+        },
+        server: {
+          preTransformRequests: false
+        }
+      },
+      coverage: {
+        enable: true,
+        include: 'src/*',
+        exclude: ['node_modules'],
+        extension: ['.js', '.vue'],
+        requireEnv: false
+      }
+    },
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'sinon-chai', 'vite'],
+
+    // list of files / patterns to load in the browser
+    files: [
+      {
+        pattern: 'test.setup.js',
+        type: 'module',
+        watched: false,
+        served: false
+      },
+      {
+        pattern: 'tests/**/*.spec.js',
+        type: 'module',
+        watched: false,
+        served: false
+      },
+      {
+        pattern: 'src/assets/styles/*.css',
+        type: 'css',
+        watched: false,
+        served: false
+      }
+    ],
+
+    plugins: [
+      'karma-vite',
+      'karma-mocha',
+      'karma-sinon-chai',
+      'karma-firefox-launcher',
+      'karma-chrome-launcher',
+      'karma-spec-reporter',
+      'karma-coverage'
+    ],
+
+    // list of files / patterns to exclude
+    exclude: [],
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec', 'coverage'],
+
+    coverageReporter: {
+      dir: 'coverage',
+      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
+    },
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||
+    // config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    customLaunchers: {
+      FirefoxHeadlessTouch: {
+        base: 'FirefoxHeadless',
+        prefs: {
+          'dom.w3c_touch_events.enabled': 1,
+          'dom.events.asyncClipboard.clipboardItem': true
+        }
+      },
+      ChromiumHeadlessWebGL: {
+        base: 'ChromiumHeadless',
+        flags: [
+          '--headless=new',
+          '--use-angle=swiftshader',
+          '--use-gl=angle',
+          '--enable-webgl',
+          '--ignore-gpu-blocklist',
+          '--disable-gpu-sandbox',
+          '--no-sandbox'
+        ]
+      }
+    },
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['ChromiumHeadlessWebGL' /*, 'FirefoxHeadlessTouch'*/],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: 2,
+
+    client: {
+      captureConsole: true,
+      mocha: {
+        timeout: 7000
+      }
+    },
+    browserConsoleLogOptions: {
+      terminal: true,
+      level: ''
+    }
+  })
+  // Fix the timezone
+  process.env.TZ = 'Europe/Amsterdam'
+}

karma.conf.js

@@ -1,203 +0,0 @@
-// Karma configuration
-'use strict'
-const path = require('path')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-
-function resolve (dir) {
-  return path.join(__dirname, dir)
-}
-
-module.exports = function (config) {
-  config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'sinon-chai'],
-
-    // list of files / patterns to load in the browser
-    files: [
-      './karma.files.js',
-      {
-        pattern: 'node_modules/sql.js/dist/sql-wasm.wasm',
-        watched: false,
-        included: false,
-        served: true,
-        nocache: false
-      }
-    ],
-
-    // list of files / patterns to exclude
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      './karma.files.js': ['webpack']
-    },
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['spec', 'coverage'],
-
-    coverageReporter: {
-      dir: 'coverage',
-      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }]
-    },
-
-    // !!DONOT delete this reporter, or vue-cli-addon-ui-karma doesnot work
-    jsonResultReporter: {
-      outputFile: 'report/karma-result.json',
-      isSynchronous: true
-    },
-
-    junitReporter: {
-      outputDir: 'report', // results will be saved as $outputDir/$browserName.xml
-      // if included, results will be saved as $outputDir/$browserName/$outputFile
-      outputFile: undefined,
-      suite: '', // suite will become the package name attribute in xml testsuite element
-      useBrowserName: true, // add browser name to report and classes names
-      // function (browser, result) to customize the name attribute in xml testcase element
-      nameFormatter: undefined,
-      // function (browser, result) to customize the classname attribute in xml testcase element
-      classNameFormatter: undefined,
-      properties: {} // key value pairs add to the <properties> section of the report
-    },
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||
-    // config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // enable / disable watching file and executing tests whenever any file changes
-    autoWatch: false,
-
-    customLaunchers: {
-      FirefoxHeadlessTouch: {
-        base: 'FirefoxHeadless',
-        prefs: {
-          'dom.w3c_touch_events.enabled': 1,
-          'dom.events.asyncClipboard.clipboardItem': true
-        }
-      }
-    },
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromiumHeadless', 'FirefoxHeadlessTouch'],
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
-    singleRun: true,
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: 2,
-
-    client: {
-      captureConsole: true,
-      mocha: {
-        timeout: 7000
-      }
-    },
-    browserConsoleLogOptions: {
-      terminal: true,
-      level: ''
-    },
-    webpack: {
-      mode: 'development',
-      entry: './src/main.js',
-      resolve: {
-        extensions: ['.js', '.vue', '.json'],
-        alias: {
-          vue$: 'vue/dist/vue.esm.js',
-          '@': resolve('src')
-        }
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js$/,
-            exclude: /(node_modules|bower_components)/,
-            use: [
-              {
-                loader: 'babel-loader'
-              }
-            ]
-          },
-          {
-            test: /\.js$/,
-            include: /src/,
-            exclude: /(node_modules|bower_components|\.spec\.js$)/,
-            use: [
-              {
-                loader: 'istanbul-instrumenter-loader',
-                options: {
-                  esModules: true
-                }
-              }
-            ]
-          },
-          {
-            test: /worker\.js$/,
-            loader: 'worker-loader'
-          },
-          {
-            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-            loader: 'url-loader'
-          },
-          {
-            test: /\.vue$/,
-            loader: 'vue-loader',
-            options: {
-              loaders: {
-                js: 'babel-loader'
-              },
-              postLoaders: {
-                js: 'istanbul-instrumenter-loader?esModules=true'
-              }
-            }
-          },
-          {
-            test: /\.css$/,
-            use: ['vue-style-loader', 'css-loader']
-          },
-          {
-            test: /\.scss$/,
-            use: ['vue-style-loader', 'css-loader', 'sass-loader']
-          },
-          {
-            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-            loader: 'url-loader',
-            options: {
-              limit: 10000,
-              name: resolve('fonts/[name].[hash:7].[ext]')
-            }
-          }
-        ]
-      },
-      plugins: [new VueLoaderPlugin()],
-      node: {
-        fs: 'empty'
-      }
-    },
-    webpackMiddleware: {
-      watchOptions: {
-        ignored: /node_modules/
-      }
-    },
-    proxies: {
-      '/_karma_webpack_/sql-wasm.wasm': '/base/node_modules/sql.js/dist/sql-wasm.wasm',
-      '/base/sql-wasm.wasm': '/base/node_modules/sql.js/dist/sql-wasm.wasm'
-    }
-  })
-  // Fix the timezone
-  process.env.TZ = 'Europe/Amsterdam'
-}

karma.files.js

@@ -1,21 +0,0 @@
-import Vue from 'vue'
-import { VuePlugin } from 'vuera'
-import VModal from 'vue-js-modal'
-
-Vue.use(VuePlugin)
-Vue.use(VModal)
-Vue.config.productionTip = false
-
-// require all test files (files that ends with .spec.js)
-const testsContext = require.context('./tests', true, /\.spec.js$/)
-
-// Read more about why we need to call testContext:
-// https://www.npmjs.com/package/require-context#context-api
-testsContext.keys().forEach(testsContext)
-
-// require all src files except main.js and router/index.js for coverage.
-// you can also change this to match only the subset of files that
-// you want coverage for.
-// We don't include router/index.js to avoid installing VueRouter globally in tests
-const srcContext = require.context('./src', true, /^\.\/(?!(main|(router(\/)?(index)?))(\.js)?$)/)
-srcContext.keys().forEach(srcContext)

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

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' }
-
   })
 }

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",

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
 }

lib/sql-js/configure.py

@@ -10,7 +10,7 @@ from pathlib import Path
 from urllib import request
 
 
-amalgamation_url = 'https://sqlite.org/2023/sqlite-amalgamation-3410000.zip'
+amalgamation_url = 'https://sqlite.org/2025/sqlite-amalgamation-3500300.zip'
 
 # Extension-functions
 # ===================
@@ -22,15 +22,15 @@ contrib_functions_url = 'https://sqlite.org/contrib/download/extension-functions
 extension_urls = (
     # Miscellaneous extensions
     # ========================
-    ('https://sqlite.org/src/raw/8d79354f?at=series.c', 'sqlite3_series_init'),
-    ('https://sqlite.org/src/raw/dbfd8543?at=closure.c', 'sqlite3_closure_init'),
+    ('https://sqlite.org/src/raw/e212edb2?at=series.c', 'sqlite3_series_init'),
+    ('https://sqlite.org/src/raw/5559daf1?at=closure.c', 'sqlite3_closure_init'),
     ('https://sqlite.org/src/raw/5bb2264c?at=uuid.c', 'sqlite3_uuid_init'),
-    ('https://sqlite.org/src/raw/5853b0e5?at=regexp.c', 'sqlite3_regexp_init'),
-    ('https://sqlite.org/src/raw/b9086e22?at=percentile.c', 'sqlite3_percentile_init'),
-    ('https://sqlite.org/src/raw/09f967dc?at=decimal.c', 'sqlite3_decimal_init'),
+    ('https://sqlite.org/src/raw/388e7f23?at=regexp.c', 'sqlite3_regexp_init'),
+    ('https://sqlite.org/src/raw/72e05a21?at=percentile.c', 'sqlite3_percentile_init'),
+    ('https://sqlite.org/src/raw/228d47e9?at=decimal.c', 'sqlite3_decimal_init'),
     # Third-party extension
     # =====================
-    ('https://github.com/jakethaw/pivot_vtab/raw/9323ef93/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
+    ('https://github.com/jakethaw/pivot_vtab/raw/e7705f34/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
     ('https://github.com/nalgeon/sqlean/raw/95e8d21a/src/pearson.c', 'sqlite3_pearson_init'),
     # Third-party extension with own dependencies
     # ===========================================

package.json

@@ -1,63 +1,89 @@
 {
   "name": "sqliteviz",
-  "version": "0.25.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build",
-    "test": "vue-cli-service karma",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test": "karma start karma.conf.cjs",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "format": "prettier .  --write",
+    "postinstall": "patch-package"
   },
   "dependencies": {
-    "codemirror": "^5.57.0",
+    "@sigma/export-image": "^3.0.0",
+    "buffer": "^6.0.3",
+    "codemirror": "^5.65.18",
+    "codemirror-editor-vue3": "^2.8.0",
     "core-js": "^3.6.5",
     "dataurl-to-blob": "^0.0.1",
+    "graphology": "^0.26.0",
+    "graphology-layout": "^0.6.1",
+    "graphology-layout-forceatlas2": "^0.10.1",
     "html2canvas": "^1.1.4",
     "jquery": "^3.6.0",
     "nanoid": "^3.1.12",
     "papaparse": "^5.4.1",
     "pivottable": "^2.23.0",
-    "plotly.js": "^1.58.4",
+    "plotly.js": "^2.35.3",
     "promise-worker": "^2.0.1",
-    "react": "^16.13.1",
-    "react-chart-editor": "^0.45.0",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-chart-editor": "^0.46.1",
+    "react-dom": "^16.14.0",
+    "seedrandom": "^3.0.5",
+    "sigma": "3.0.2",
     "sql.js": "file:./lib/sql-js",
-    "vue": "^2.6.11",
-    "vue-codemirror": "^4.0.6",
-    "vue-js-modal": "^2.0.0-rc.6",
-    "vue-multiselect": "^2.1.6",
-    "vue-router": "^3.2.0",
-    "vue2-teleport": "^1.0.1",
-    "vuejs-paginate": "^2.1.0",
-    "vuera": "^0.2.7",
-    "vuex": "^3.4.0"
+    "tiny-emitter": "^2.1.0",
+    "tinycolor2": "^1.4.2",
+    "veaury": "^2.5.1",
+    "vue": "^3.5.11",
+    "vue-final-modal": "^4.5.5",
+    "vue-multiselect": "^3.0.0-beta.3",
+    "vue-router": "^4.4.5",
+    "vuejs-paginate-next": "^1.0.2",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.4.0",
-    "@vue/cli-plugin-eslint": "^4.4.0",
-    "@vue/cli-plugin-router": "^4.4.0",
-    "@vue/cli-plugin-vuex": "^4.4.0",
-    "@vue/cli-service": "^4.4.0",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/test-utils": "^1.1.2",
-    "babel-eslint": "^10.1.0",
+    "@babel/core": "^7.25.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^2.4.6",
     "chai": "^4.1.2",
-    "chai-as-promised": "^7.1.1",
-    "eslint": "^6.7.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",
     "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^9.28.0",
     "flush-promises": "^1.0.2",
-    "karma": "^3.1.4",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-webpack": "^4.0.2",
-    "vue-cli-plugin-ui-karma": "^0.2.5",
-    "vue-template-compiler": "^2.6.11",
-    "workbox-webpack-plugin": "^6.1.5",
-    "worker-loader": "^3.0.8"
+    "karma": "^6.4.4",
+    "karma-coverage": "^2.2.1",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-firefox-launcher": "^2.1.3",
+    "karma-mocha": "^1.3.0",
+    "karma-spec-reporter": "^0.0.36",
+    "karma-vite": "^1.0.5",
+    "mocha": "^5.2.0",
+    "patch-package": "^8.0.1",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "3.5.3",
+    "process": "^0.11.10",
+    "url-loader": "^4.1.1",
+    "vite": "^5.4.14",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vue-cli-plugin-ui-karma": "^0.2.5"
+  },
+  "overrides": {
+    "karma-vite": {
+      "vite-plugin-istanbul": "$vite-plugin-istanbul"
+    }
   }
 }

patches/plotly.js+2.35.3.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/plotly.js/dist/plotly.js b/node_modules/plotly.js/dist/plotly.js
+index 28f5612..5b9956d 100644
+--- a/node_modules/plotly.js/dist/plotly.js
++++ b/node_modules/plotly.js/dist/plotly.js
+@@ -34384,6 +34384,9 @@ var layoutUIControlPatterns = [{
+   pattern: /^(shapes|annotations)/,
+   attr: 'editrevision'
+ }, {
++  pattern: /^selections/, 
++  attr: 'selectionrevision'
++},{
+   pattern: /^title\.text$/,
+   attr: 'editrevision'
+ }];
+diff --git a/node_modules/plotly.js/src/plot_api/plot_api.js b/node_modules/plotly.js/src/plot_api/plot_api.js
+index 75e98f5..5c38053 100644
+--- a/node_modules/plotly.js/src/plot_api/plot_api.js
++++ b/node_modules/plotly.js/src/plot_api/plot_api.js
+@@ -2394,6 +2394,7 @@ var layoutUIControlPatterns = [
+ 
+     {pattern: /^legend\.(x|y)$/, attr: 'editrevision'},
+     {pattern: /^(shapes|annotations)/, attr: 'editrevision'},
++    {pattern: /^selections/, attr: 'selectionrevision'},
+     {pattern: /^title\.text$/, attr: 'editrevision'}
+ ];
+ 

patches/sigma+3.0.2.patch

@@ -0,0 +1,24 @@
+diff --git a/node_modules/sigma/dist/colors-beb06eb2.esm.js b/node_modules/sigma/dist/colors-beb06eb2.esm.js
+index b7130d1..bf101b6 100644
+--- a/node_modules/sigma/dist/colors-beb06eb2.esm.js
++++ b/node_modules/sigma/dist/colors-beb06eb2.esm.js
+@@ -51,7 +51,6 @@ function _nonIterableRest() {
+ function _slicedToArray(r, e) {
+   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+ }
+-
+ var HTML_COLORS = {
+   black: "#000000",
+   silver: "#C0C0C0",
+@@ -267,7 +266,10 @@ for (var htmlColor in HTML_COLORS) {
+   FLOAT_COLOR_CACHE[HTML_COLORS[htmlColor]] = FLOAT_COLOR_CACHE[htmlColor];
+ }
+ function rgbaToFloat(r, g, b, a, masking) {
+-  INT32[0] = a << 24 | b << 16 | g << 8 | r;
++  const r_= Math.floor(r * a / 255)
++  const g_= Math.floor(g * a / 255)
++  const b_= Math.floor(b * a / 255)
++  INT32[0] = a << 24 | b_ << 16 | g_ << 8 | r_;
+   if (masking) INT32[0] = INT32[0] & 0xfeffffff;
+   return FLOAT32[0];
+ }

public/inquiries.json

@@ -1 +1 @@
-[]
+[]

public/manifest.webmanifest

@@ -27,4 +27,4 @@
   "name": "sqliteviz",
   "short_name": "sqliteviz",
   "start_url": "index.html"
-}
+}

src/App.vue

@@ -1,58 +1,45 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
+<script>
+import storedInquiries from '@/lib/storedInquiries'
+
+export default {
+  computed: {
+    inquiries() {
+      return this.$store.state.inquiries
+    }
+  },
+  watch: {
+    inquiries: {
+      deep: true,
+      handler() {
+        storedInquiries.updateStorage(this.inquiries)
+      }
+    }
+  },
+  created() {
+    this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
+    addEventListener('storage', event => {
+      if (event.key === storedInquiries.myInquiriesKey) {
+        this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
+      }
+    })
+  }
+}
+</script>
+
 <style>
-@font-face {
-  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-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  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-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  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-weight: 700;
-  font-style: italic;
-}
-
 #app,
+.dialog,
 input,
 label,
 button,
 .plotly_editor * {
-  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;
 }

src/assets/styles/buttons.css

@@ -59,5 +59,3 @@ button.secondary:disabled {
   text-shadow: none;
   cursor: default;
 }
-
-

src/assets/styles/dialogs.css

@@ -1,6 +1,13 @@
 .dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialog .vfm__content {
   border-radius: var(--border-radius-big);
   box-shadow: 0px 2px 9px rgba(80, 103, 132, 0.8);
+  background-color: white;
+  overflow: hidden;
 }
 
 .dialog-header {
@@ -16,7 +23,7 @@
 }
 
 .dialog-body {
-  min-height: 60px;
+  min-height: 56px;
   background-color: var(--color-bg-light);
   padding: 24px;
   border-top: 1px solid var(--color-border-light);
@@ -35,6 +42,6 @@
   margin-left: 16px;
 }
 
-.vm--overlay {
+.vfm__overlay.vfm--overlay {
   background-color: rgba(162, 177, 198, 0.5);
 }

src/assets/styles/messages.css

@@ -3,4 +3,11 @@
   color: var(--color-text-base);
   font-size: 13px;
   padding: 0 24px;
-}
+}
+
+.data-view-warning {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 1px solid var(--color-border);
+  box-sizing: border-box;
+}

src/assets/styles/multiselect.css

@@ -62,14 +62,14 @@
   margin: 2px;
 }
 .sqliteviz-select .multiselect__tag-icon:after {
-  content: url('~@/assets/images/delete-tag.svg');
+  content: url('@/assets/images/delete-tag.svg');
   height: 14px;
   width: 14px;
 }
 
 .sqliteviz-select .multiselect__tag-icon:focus:after,
 .sqliteviz-select .multiselect__tag-icon:hover:after {
-  content: url('~@/assets/images/delete-tag-hover.svg');
+  content: url('@/assets/images/delete-tag-hover.svg');
 }
 
 .sqliteviz-select .multiselect__tag-icon:focus,
@@ -102,7 +102,7 @@
 }
 
 .sqliteviz-select .multiselect__select:before {
-  content: url('~@/assets/images/arrow.svg');
+  content: url('@/assets/images/arrow.svg');
   border: none;
   top: 0;
 }
@@ -116,14 +116,14 @@
 }
 
 .sqliteviz-select .multiselect__select:hover:before {
-  content: url('~@/assets/images/arrow-hover.svg');
+  content: url('@/assets/images/arrow-hover.svg');
 }
 
 .sqliteviz-select.multiselect--active .multiselect__tags {
   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;
-}
+}

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);

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;
 }

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;
-}
+}

src/assets/styles/typography.css

@@ -0,0 +1,45 @@
+@font-face {
+  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-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  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-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  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-weight: 700;
+  font-style: italic;
+}
+
+a {
+  color: var(--color-accent-shade);
+}

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;
 }
-
-
-

src/components/AppDiagnosticInfo.vue

@@ -2,21 +2,26 @@
   <div id="app-info-container">
     <img
       id="app-info-icon"
-      :src="require('@/assets/images/info.svg')"
+      src="~@/assets/images/info.svg"
       @click="$modal.show('app-info')"
     />
-    <modal name="app-info" classes="dialog" height="auto" width="400px">
+    <modal modalId="app-info" class="dialog" contentClass="app-info-modal">
       <div class="dialog-header">
         App info
-        <close-icon @click="$modal.hide('app-info')"/>
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @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}}
+            <div v-for="(opt, optIndex) in item.info" :key="optIndex">
+              {{ opt }}
             </div>
           </div>
         </div>
@@ -26,23 +31,24 @@
 </template>
 
 <script>
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
+import { version } from '../../package.json'
 
 export default {
   name: 'AppDiagnosticInfo',
-  components: { CloseIcon },
-  data () {
+  components: { IconButton },
+  data() {
     return {
       info: [
         {
           name: 'sqliteviz version',
-          info: [require('../../../package.json').version]
+          info: [version]
         }
       ]
     }
   },
 
-  async created () {
+  async created() {
     const state = this.$store.state
     let result = (await state.db.execute('select sqlite_version()')).values
     this.info.push({
@@ -59,6 +65,12 @@ export default {
 }
 </script>
 
+<style>
+.app-info-modal {
+  width: 400px;
+}
+</style>
+
 <style scoped>
 #app-info-icon {
   cursor: pointer;
@@ -83,7 +95,7 @@ export default {
 }
 .info-item {
   margin-bottom: 32px;
-   font-size: 14px;
+  font-size: 14px;
 }
 .info-item:last-child {
   margin-bottom: 0;

src/components/Chart.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="chart-container">
+    <div v-show="!dataSources" class="warning data-view-warning">
+      There is no data to build a chart. Run your SQL query and make sure the
+      result is not empty.
+    </div>
+    <splitpanes
+      :before="{ size: 70, max: 100 }"
+      :after="{ size: 30, max: 50, hidden: !showValueViewer }"
+      :default="{ before: 70, after: 30 }"
+      class="chart"
+      :style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
+    >
+      <template #left-pane>
+        <div ref="chartContainer" :style="{ height: '100%' }">
+          <PlotlyEditor
+            ref="plotlyEditor"
+            :data="state.data"
+            :layout="state.layout"
+            :frames="state.frames"
+            :config="config"
+            :dataSources="dataSources"
+            :dataSourceOptions="dataSourceOptions"
+            :plotly="plotly"
+            :useResizeHandler="useResizeHandler"
+            :debug="true"
+            :advancedTraceTypeSelector="true"
+            :hideControls="!showViewSettings"
+            @update="update"
+            @render="onRender"
+          />
+        </div>
+      </template>
+      <template v-if="showValueViewer" #right-pane>
+        <value-viewer
+          :empty="!selectedItems || selectedItems.length === 0"
+          emptyMessage="No points selected to view"
+          :value="JSON.stringify(selectedItems)"
+          defaultFormat="json"
+        />
+      </template>
+    </splitpanes>
+  </div>
+</template>
+
+<script>
+import { applyPureReactInVue } from 'veaury'
+import plotly from 'plotly.js'
+import 'react-chart-editor/lib/react-chart-editor.css'
+import ReactPlotlyEditorWithPlotRef from '@/lib/ReactPlotlyEditorWithPlotRef.jsx'
+import chartHelper from '@/lib/chartHelper'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
+import fIo from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
+import Splitpanes from '@/components/Common/Splitpanes'
+import ValueViewer from '@/components/ValueViewer.vue'
+import { nextTick } from 'vue'
+
+export default {
+  name: 'Chart',
+  components: {
+    PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef),
+    Splitpanes,
+    ValueViewer
+  },
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    exportToPngEnabled: Boolean,
+    exportToSvgEnabled: Boolean,
+    forPivot: Boolean,
+    showViewSettings: Boolean,
+    showValueViewer: Boolean
+  },
+  emits: [
+    'update:exportToSvgEnabled',
+    'update:exportToHtmlEnabled',
+    'update',
+    'loadingImageCompleted'
+  ],
+  data() {
+    return {
+      plotly,
+      state: this.initOptions
+        ? JSON.parse(JSON.stringify(this.initOptions))
+        : {
+            data: [],
+            layout: { autosize: true },
+            frames: []
+          },
+      config: {
+        editable: true,
+        displaylogo: false,
+        modeBarButtonsToRemove: ['toImage']
+      },
+      resizeObserver: null,
+      useResizeHandler: this.$store.state.isWorkspaceVisible,
+      selectedItems: null
+    }
+  },
+  computed: {
+    dataSourceOptions() {
+      return chartHelper.getOptionsFromDataSources(this.dataSources)
+    }
+  },
+  watch: {
+    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) {
+        chartHelper.clearSelection(this.state.data, this.state.layout)
+        dereference.default(this.state.data, this.dataSources)
+        this.updatePlotly()
+      }
+    },
+    showViewSettings() {
+      this.handleResize()
+    }
+  },
+  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 => {
+        events.send('viz_plotly.render', null, {
+          type: value,
+          pivot: !!this.forPivot
+        })
+      },
+      { deep: true }
+    )
+    this.$emit('update:exportToSvgEnabled', true)
+    this.$emit('update:exportToHtmlEnabled', true)
+  },
+  async mounted() {
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.chartContainer)
+    if (this.dataSources) {
+      dereference.default(this.state.data, this.dataSources)
+    }
+    this.handleResize()
+    await nextTick()
+    const plotlyDiv =
+      this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot')
+    plotlyDiv?.on('plotly_selected', selectionEvent => {
+      if (selectionEvent) {
+        this.selectedItems = this.getSelectedData()
+      }
+    })
+    plotlyDiv?.on('plotly_deselect', () => {
+      this.selectedItems = this.getSelectedData()
+    })
+  },
+  activated() {
+    this.useResizeHandler = true
+  },
+  deactivated() {
+    this.useResizeHandler = false
+  },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.chartContainer)
+  },
+  methods: {
+    async handleResize() {
+      // Call updatePlotly twice because there is a small gap (for scrolling?)
+      //  on right and bottom of the plot.
+      // After the second call it's good.
+      this.updatePlotly()
+      this.updatePlotly()
+    },
+    onRender() {
+      // TODO: check changes and enable Save button if needed
+    },
+    update(data, layout, frames) {
+      chartHelper.clearSelection(data, layout)
+
+      this.state = { data, layout, frames }
+      this.$emit('update')
+    },
+    updatePlotly() {
+      const plotComponent = this.$refs.plotlyEditor.plotComponentRef.current
+      plotComponent.updatePlotly(
+        true, // shouldInvokeResizeHandler
+        plotComponent.props.onUpdate, // figureCallbackFunction
+        false // shouldAttachUpdateEvents
+      )
+    },
+    getOptionsForSave() {
+      return chartHelper.getOptionsForSave(this.state, this.dataSources)
+    },
+    async saveAsPng() {
+      const url = await this.prepareCopy()
+      this.$emit('loadingImageCompleted')
+      fIo.downloadFromUrl(url, 'chart')
+    },
+
+    async saveAsSvg() {
+      const url = await this.prepareCopy('svg')
+      fIo.downloadFromUrl(url, 'chart')
+    },
+
+    saveAsHtml() {
+      fIo.exportToFile(
+        chartHelper.getHtml(this.state),
+        'chart.html',
+        'text/html'
+      )
+    },
+    prepareCopy(type = 'png') {
+      return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
+    },
+    getSelectedData() {
+      return chartHelper.getRowsByIndexFromDataSources(
+        this.dataSources,
+        chartHelper.getSelectedPointsIndexes(this.state.data)
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  height: 100%;
+}
+
+.chart {
+  min-height: 242px;
+}
+
+:deep(.editor_controls .sidebar__item:before) {
+  width: 0;
+}
+</style>

src/components/Common/CheckBox.vue

@@ -1,18 +1,27 @@
 <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" />
     <img
-      v-show="checked && !disabled"
-      :src="theme === 'light'
-        ? require('@/assets/images/checkbox_checked_light.svg')
-        : require('@/assets/images/checkbox_checked.svg')"
+      v-show="checked && !disabled && theme === 'light'"
+      class="checked-light"
+      src="~@/assets/images/checkbox_checked_light.svg"
+    />
+    <img
+      v-show="checked && !disabled && theme !== 'light'"
+      class="checked"
+      src="~@/assets/images/checkbox_checked.svg"
     />
     <img
       v-show="checked && disabled"
-      :src="require('@/assets/images/checkbox_checked_disabled.svg')"
+      class="checked-disabled"
+      src="~@/assets/images/checkbox_checked_disabled.svg"
     />
     <span v-if="label" class="label">{{ label }}</span>
   </div>
@@ -26,7 +35,7 @@ export default {
       type: String,
       required: false,
       default: 'accent',
-      validator: (value) => {
+      validator: value => {
         return ['accent', 'light'].includes(value)
       }
     },
@@ -46,13 +55,14 @@ export default {
       default: false
     }
   },
-  data () {
+  emits: ['click'],
+  data() {
     return {
       checked: this.init
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       if (!this.disabled) {
         this.checked = !this.checked
         this.$emit('click', this.checked)
@@ -80,7 +90,7 @@ export default {
 }
 
 img {
-    display: block;
+  display: block;
 }
 .label {
   margin-left: 6px;
@@ -100,6 +110,6 @@ img {
 
 .disabled .unchecked,
 .disabled .unchecked:hover {
-  background-color:  var(--color-bg-light-2);
+  background-color: var(--color-bg-light-2);
 }
 </style>

src/components/Common/IconButton.vue

@@ -1,16 +1,31 @@
 <template>
   <button
-    :class="['icon-btn', { active }]"
+    :class="['icon-btn', { active }, 'icon-btn-' + variant]"
     :disabled="disabled"
-    @click="onClick"
+    :style="{
+      color: iconColor,
+      fontSize: iconSize + 'px',
+      width: width + 'px',
+      height: width + 'px'
+    }"
+    @click.stop="onClick"
     @mouseenter="showTooltip($event, tooltipPosition)"
     @mouseleave="hideTooltip"
   >
-    <div class="icon"><slot /></div>
+    <div class="icon">
+      <slot>
+        <i :class="icon" />
+      </slot>
+    </div>
     <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"
+      ref="tooltip"
+      class="icon-tooltip"
+      :style="{ ...tooltipStyle, maxWidth: maxTooltipWidth }"
+    >
       {{ tooltip }}
     </span>
   </button>
@@ -18,15 +33,39 @@
 
 <script>
 import tooltipMixin from '@/tooltipMixin'
-import LoadingIndicator from '@/components/LoadingIndicator'
+import LoadingIndicator from '@/components/Common/LoadingIndicator'
 
 export default {
   name: 'SideBarButton',
-  props: ['active', 'disabled', 'tooltip', 'tooltipPosition', 'loading'],
   components: { LoadingIndicator },
   mixins: [tooltipMixin],
+  props: {
+    active: Boolean,
+    disabled: Boolean,
+    tooltip: String,
+    tooltipPosition: String,
+    maxTooltipWidth: String,
+    loading: Boolean,
+    icon: String,
+    iconColor: { type: String, default: 'var(--color-text-light-2)' },
+    variant: {
+      type: String,
+      default: 'accent',
+      validator: value => ['accent', 'secondary'].includes(value)
+    },
+    iconSize: {
+      type: Number,
+      default: 18
+    }
+  },
+  emits: ['click'],
+  computed: {
+    width() {
+      return this.iconSize + 8
+    }
+  },
   methods: {
-    onClick () {
+    onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
@@ -37,8 +76,6 @@ export default {
 <style scoped>
 .icon-btn {
   box-sizing: border-box;
-  width: 26px;
-  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,21 +83,27 @@ export default {
   background-color: transparent;
   border: none;
 }
-.icon-btn:hover {
+
+.icon-btn .icon i {
+  font-size: inherit;
+}
+.icon-btn.icon-btn-accent:hover {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-medium-2);
 }
 
-.icon-btn:hover .icon >>> path,
-.icon-btn.active .icon >>> path,
-.icon-btn:hover .icon >>> circle,
-.icon-btn.active .icon >>> circle {
-  fill: var(--color-accent);
+.icon-btn.icon-btn-accent:hover,
+.icon-btn.icon-btn-accent.active {
+  color: var(--color-accent) !important;
 }
 
-.icon-btn:disabled  .icon >>> path,
-.icon-btn:disabled  .icon >>> circle {
-  fill: var(--color-border);
+.icon-btn.icon-btn-secondary:hover,
+.icon-btn.icon-btn-secondary.active {
+  color: var(--color-text-base) !important;
+}
+
+.icon-btn:disabled {
+  color: var(--color-border) !important;
 }
 
 .icon-btn:disabled {
@@ -68,10 +111,6 @@ export default {
   pointer-events: none;
 }
 
-.disabled.icon-btn:hover .icon >>> path {
-  fill: var(--color-border);
-}
-
 .icon-in-progress {
   position: absolute;
   width: 26px;

src/components/Common/LoadingDialog.vue

@@ -0,0 +1,131 @@
+<template>
+  <modal
+    v-model="show"
+    class="dialog"
+    :clickToClose="false"
+    :contentTransition="{ name: 'loading-dialog' }"
+    :overlayTransition="{ name: 'loading-dialog' }"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div class="dialog-header">
+      {{ title }}
+      <IconButton
+        icon="myicon myicon-close"
+        variant="secondary"
+        :iconSize="14"
+        :disabled="loading"
+        @click="cancel"
+      />
+    </div>
+    <div class="dialog-body">
+      <div v-if="loading" class="loading-dialog-body">
+        <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"
+        />
+        {{ successMsg }}
+      </div>
+    </div>
+    <div class="dialog-buttons-container">
+      <button
+        class="secondary"
+        type="button"
+        :disabled="loading"
+        @click="cancel"
+      >
+        Cancel
+      </button>
+      <button
+        class="primary"
+        type="button"
+        :disabled="loading"
+        @click="$emit('action')"
+      >
+        {{ actionBtnName }}
+      </button>
+    </div>
+  </modal>
+</template>
+
+<script>
+import LoadingIndicator from '@/components/Common/LoadingIndicator'
+import IconButton from '@/components/Common/IconButton.vue'
+
+export default {
+  name: 'LoadingDialog',
+  components: { LoadingIndicator, IconButton },
+  props: {
+    modelValue: Boolean,
+    loadingMsg: String,
+    successMsg: String,
+    actionBtnName: String,
+    title: String,
+    loading: Boolean
+  },
+  emits: ['cancel', 'action', 'update:modelValue'],
+  data() {
+    return {
+      show: this.modelValue
+    }
+  },
+  watch: {
+    modelValue() {
+      this.show = this.modelValue
+    },
+    loading() {
+      if (this.loading) {
+        this.$emit('update:modelValue', true)
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.$emit('cancel')
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>
+
+<style>
+.loading-dialog-enter-active {
+  animation: show-modal 1s linear 0s 1;
+}
+.loading-dialog-leave-active {
+  opacity: 0;
+}
+
+@keyframes show-modal {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.loading-modal {
+  width: 400px;
+}
+</style>
+
+<style scoped>
+.loading-dialog-body {
+  display: flex;
+  align-items: center;
+}
+.success-icon {
+  width: 30px;
+}
+
+.state-icon {
+  margin-right: 8px;
+}
+</style>

src/components/Common/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"
@@ -31,23 +40,26 @@ export default {
       default: 20
     }
   },
+  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
     }
   }
@@ -57,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);
@@ -69,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;
 }
 
@@ -96,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;
   }
@@ -108,8 +123,7 @@ export default {
     r: 9;
   }
   100% {
-   r: 8;
+    r: 8;
   }
 }
-
 </style>

src/components/Common/Logs.vue

@@ -1,30 +1,38 @@
 <template>
-  <div class="logs-container" ref="logsContainer">
+  <div ref="logsContainer" class="logs-container">
     <div v-for="(msg, index) in messages" :key="index" class="msg">
-      <img v-if="msg.type === 'error'" :src="require('@/assets/images/error.svg')">
-      <img v-if="msg.type === 'info'" :src="require('@/assets/images/info.svg')" width="20px">
-      <img v-if="msg.type === 'success'" :src="require('@/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>
 </template>
 
 <script>
-import LoadingIndicator from '@/components/LoadingIndicator'
+import LoadingIndicator from '@/components/Common/LoadingIndicator'
 
 export default {
-  name: 'logs',
-  props: ['messages'],
+  name: 'Logs',
   components: { LoadingIndicator },
+  props: { messages: Array },
+  emits: [],
   watch: {
     'messages.length': 'scrollToBottom'
   },
-  mounted () {
+  mounted() {
     this.scrollToBottom()
   },
   methods: {
-    async scrollToBottom () {
+    async scrollToBottom() {
       const container = this.$refs.logsContainer
       if (container) {
         await this.$nextTick()
@@ -32,7 +40,7 @@ export default {
       }
     },
 
-    serializeMessage (msg) {
+    serializeMessage(msg) {
       let result = ''
       if (msg.row !== null && msg.row !== undefined) {
         if (msg.type === 'error') {
@@ -43,7 +51,7 @@ export default {
       }
 
       result += msg.message
-      if (!(/(\.|!|\?)$/.test(result))) {
+      if (!/(\.|!|\?)$/.test(result)) {
         result += '.'
       }
 

src/components/Common/Pager.vue

@@ -0,0 +1,109 @@
+<template>
+  <paginate
+    v-model="page"
+    :pageCount="pageCount"
+    :pageRange="5"
+    :marginPages="1"
+    :prevText="chevron"
+    :nextText="chevron"
+    :noLiSurround="true"
+    containerClass="paginator-continer"
+    pageLinkClass="paginator-page-link"
+    activeClass="paginator-active-page"
+    breakViewLinkClass="paginator-break"
+    nextLinkClass="paginator-next"
+    prevLinkClass="paginator-prev"
+    disabledClass="paginator-disabled"
+  />
+</template>
+
+<script>
+import Paginate from 'vuejs-paginate-next'
+
+export default {
+  name: 'Pager',
+  components: { Paginate },
+  props: {
+    pageCount: Number,
+    modelValue: Number
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      page: this.modelValue,
+      chevron: `
+        <svg width="9" height="9" viewBox="0 0 8 12" fill="none">
+        <path
+          d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992
+            5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"
+        />
+        </svg>
+      `
+    }
+  },
+  watch: {
+    page() {
+      this.$emit('update:modelValue', this.page)
+    },
+    modelValue() {
+      this.page = this.modelValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+.paginator-continer {
+  display: flex;
+  align-items: center;
+  line-height: 10px;
+}
+:deep(a) {
+  cursor: pointer;
+}
+
+:deep(.paginator-page-link) {
+  padding: 2px 3px;
+  margin: 0 5px;
+  display: block;
+  color: var(--color-text-base);
+  font-size: 11px;
+}
+:deep(.paginator-page-link:hover) {
+  color: var(--color-text-active);
+}
+:deep(.paginator-page-link:active),
+:deep(.paginator-page-link:visited),
+:deep(.paginator-page-link:focus),
+:deep(.paginator-next:active),
+:deep(.paginator-next:visited),
+:deep(.paginator-next:focus),
+:deep(.paginator-prev:active),
+:deep(.paginator-prev:visited),
+:deep(.paginator-prev:focus) {
+  outline: none;
+}
+
+:deep(.paginator-active-page),
+:deep(.paginator-active-page:hover) {
+  color: var(--color-accent);
+}
+
+:deep(.paginator-break:hover),
+:deep(.paginator-disabled:hover) {
+  cursor: default;
+}
+
+:deep(.paginator-prev svg) {
+  transform: rotate(180deg);
+}
+
+:deep(.paginator-next:hover path),
+:deep(.paginator-prev:hover path) {
+  fill: var(--color-text-active);
+}
+:deep(.paginator-disabled path),
+:deep(.paginator-disabled:hover path) {
+  fill: var(--color-text-light-2);
+}
+</style>

src/components/Common/Splitpanes/index.vue

@@ -7,18 +7,22 @@
       { 'splitpanes-dragging': dragging }
     ]"
   >
-    <div class="movable-splitter" ref="movableSplitter" :style="movableSplitterStyle" />
     <div
-      class="splitpanes-pane"
+      ref="movableSplitter"
+      class="movable-splitter"
+      :style="movableSplitterStyle"
+    />
+    <div
+      v-show="!before.hidden"
       ref="left"
-      :size="paneBefore.size"
-      max-size="30"
+      class="splitpanes-pane"
       :style="styles.before"
     >
       <slot name="left-pane" />
     </div>
     <!-- Splitter start-->
     <div
+      v-show="!before.hidden && !after.hidden"
       class="splitpanes-splitter"
       @mousedown="bindEvents"
       @touchstart="bindEvents"
@@ -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
           }
         ]"
       >
@@ -39,9 +46,9 @@
         >
           <img
             class="direction-icon"
-            :src="require('@/assets/images/chevron.svg')"
+            src="~@/assets/images/chevron.svg"
             :style="directionBeforeIconStyle"
-          >
+          />
         </div>
         <div
           v-if="before.max === 100 && paneBefore.size > 0"
@@ -50,16 +57,17 @@
         >
           <img
             class="direction-icon"
-            :src="require('@/assets/images/chevron.svg')"
+            src="~@/assets/images/chevron.svg"
             :style="directionAfterIconStyle"
-          >
+          />
         </div>
       </div>
     </div>
     <!-- splitter end -->
     <div
-      class="splitpanes-pane"
+      v-show="!after.hidden"
       ref="right"
+      class="splitpanes-pane"
       :style="styles.after"
     >
       <slot name="right-pane" />
@@ -86,15 +94,19 @@ export default {
       }
     }
   },
-  data () {
+  emits: [],
+  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,
@@ -104,19 +116,25 @@ 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.after.hidden ? 100 : this.paneBefore.size}%`
+        },
+        after: {
+          [this.horizontal ? 'height' : 'width']:
+            `${this.before.hidden ? 100 : 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 = ''
@@ -131,7 +149,7 @@ export default {
         transform: translation + rotation
       }
     },
-    directionAfterIconStyle () {
+    directionAfterIconStyle() {
       const expanded = this.paneAfter.size !== 0
       const translation = 'translate(-50%, -50%)'
       let rotation = ''
@@ -147,37 +165,48 @@ export default {
       }
     }
   },
+  mounted() {
+    this.container = this.$refs.container
+  },
 
   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
@@ -198,7 +227,7 @@ export default {
       this.unbindEvents()
     },
 
-    moveSplitter (event) {
+    moveSplitter(event) {
       const splitterInfo = {
         container: this.container,
         paneBeforeMax: this.paneBefore.max,
@@ -210,21 +239,19 @@ 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
         this.paneAfter.size = this.beforeMinimising.after
       }
     }
-  },
-  mounted () {
-    this.container = this.$refs.container
   }
 }
 </script>
@@ -236,9 +263,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%;
@@ -278,14 +311,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,
@@ -336,20 +369,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;
 }

src/components/Common/Splitpanes/splitter.js

@@ -0,0 +1,47 @@
+export default {
+  // Get the cursor position relative to the splitpane container.
+  getCurrentMouseDrag(event, container) {
+    const rect = container.getBoundingClientRect()
+    const { clientX, clientY } =
+      'ontouchstart' in window && event.touches ? event.touches[0] : event
+    return {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    }
+  },
+
+  // Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
+  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
+  },
+
+  // Returns the new position in percents.
+  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
+
+    // Prevent dragging beyond pane max.
+    if (paneBeforeMaxReached || paneAfterMaxReached) {
+      return paneBeforeMaxReached
+        ? paneBeforeMax
+        : Math.max(100 - paneAfterMax, 0)
+    } else {
+      return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
+    }
+  }
+}

src/components/Common/TextField.vue

@@ -1,28 +1,50 @@
 <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'"/>
+      <IconButton
+        v-if="hint"
+        icon="myicon myicon-hint"
+        variant="secondary"
+        class="hint"
+        :tooltip="hint"
+        :maxTooltipWidth="maxHintWidth"
+        :iconSize="20"
+      />
     </div>
     <input
       type="text"
       :placeholder="placeholder"
       :class="{ error: errorMsg }"
       :style="{ width: width }"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
     />
     <div v-show="errorMsg" class="text-field-error">{{ errorMsg }}</div>
   </div>
 </template>
 
 <script>
-import HintIcon from '@/components/svg/hint'
+import IconButton from '@/components/Common/IconButton.vue'
+
 export default {
-  name: 'textField',
-  props: ['placeholder', 'label', 'errorMsg', 'value', 'width', 'hint', 'maxHintWidth', 'disabled'],
-  components: { HintIcon }
+  name: 'TextField',
+  components: { IconButton },
+  props: {
+    placeholder: String,
+    label: String,
+    errorMsg: String,
+    modelValue: String,
+    width: String,
+    hint: String,
+    maxHintWidth: { type: String, default: '149px' },
+    disabled: Boolean
+  },
+  emits: ['update:modelValue']
 }
 </script>
 
@@ -66,10 +88,10 @@ input.error {
   position: relative;
 }
 
-.text-field-label .hint{
+.text-field-label .hint {
   position: absolute;
-  top: -2px;
-  right: -22px;
+  top: -6px;
+  right: -26px;
 }
 
 .text-field-label.error {
@@ -90,4 +112,13 @@ input.error {
 .text-field-error:first-letter {
   text-transform: uppercase;
 }
+
+:deep(.icon-tooltip) {
+  display: block;
+  white-space: normal;
+  height: auto;
+  line-height: normal;
+  padding: 6px;
+  box-sizing: border-box;
+}
 </style>

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,32 +8,45 @@
     >
       <div class="value">
         <input
-          :class="{ 'filled': filled }"
           ref="delimiterInput"
+          v-model="inputValue"
+          :class="{ filled: filled }"
           type="text"
           maxlength="1"
-          v-model="inputValue"
-          @click.stop
           :disabled="disabled"
+          @click.stop
         />
-        <div class="name">{{ getSymbolName(value) }}</div>
+        <div class="name">{{ getSymbolName(modelValue) }}</div>
       </div>
       <div class="controls" @click.stop>
-        <clear-icon @click.native="clear" :disabled="disabled"/>
-        <drop-down-chevron
+        <button
+          type="button"
           :disabled="disabled"
-          @click.native="!disabled && (showOptions = !showOptions)"
-        />
+          class="clear-btn"
+          @click="clear"
+        >
+          <i class="myicon myicon-clear" />
+        </button>
+
+        <button
+          type="button"
+          :disabled="disabled"
+          class="open-list-btn"
+          @click="!disabled && (showOptions = !showOptions)"
+        >
+          <i class="myicon myicon-dropdown-chevron" />
+        </button>
       </div>
     </div>
     <div v-show="showOptions" class="options" :style="{ width: width }">
       <div
         v-for="(option, index) in options"
         :key="index"
-        @click="chooseOption(option)"
         class="option"
+        @click="chooseOption(option)"
       >
-        <pre>{{option}}</pre><div>{{ getSymbolName(option) }}</div>
+        <pre>{{ option }}</pre>
+        <div>{{ getSymbolName(option) }}</div>
       </div>
     </div>
   </div>
@@ -41,14 +54,16 @@
 
 <script>
 import ascii from './ascii'
-import DropDownChevron from '@/components/svg/dropDownChevron'
-import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  props: ['value', 'width', 'disabled'],
-  components: { DropDownChevron, ClearIcon },
-  data () {
+  props: {
+    modelValue: String,
+    width: String,
+    disabled: Boolean
+  },
+  emits: ['update:modelValue'],
+  data() {
     return {
       showOptions: false,
       options: [',', '\t', ' ', '|', ';', '\u001F', '\u001E'],
@@ -57,36 +72,36 @@ export default {
     }
   },
   watch: {
-    inputValue () {
+    inputValue() {
       if (this.inputValue) {
         this.filled = true
-        if (this.inputValue !== this.value) {
-          this.$emit('input', this.inputValue)
+        if (this.inputValue !== this.modelValue) {
+          this.$emit('update:modelValue', this.inputValue)
         }
       } else {
         this.filled = false
       }
     }
   },
-  created () {
-    this.inputValue = this.value
+  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() {
       this.$refs.delimiterInput.focus()
     },
 
-    clear () {
+    clear() {
       if (!this.disabled) {
         this.inputValue = ''
         this.$refs.delimiterInput.focus()
@@ -124,6 +139,7 @@ export default {
 .controls {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
 
 .options {
@@ -201,4 +217,22 @@ input:disabled {
 .disabled .delimiter-selector-container {
   background: var(--color-bg-light);
 }
+
+.controls button {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 20px;
+  width: 20px;
+  color: var(--color-border);
+  font-size: 20px;
+}
+
+.clear-btn:not(:disabled):hover {
+  color: var(--color-danger);
+}
+
+.open-list-btn:not(:disabled):hover {
+  color: var(--color-accent);
+}
 </style>

src/components/CsvJsonImport/index.vue

@@ -1,24 +1,30 @@
 <template>
   <modal
-    :name="dialogName"
-    classes="dialog"
-    height="auto"
-    width="80%"
+    :modalId="dialogName"
+    class="dialog"
+    contentClass="import-modal"
     scrollable
     :clickToClose="false"
   >
     <div class="dialog-header">
       {{ typeName }} import
-      <close-icon @click="cancelImport" :disabled="disableDialog"/>
+      <IconButton
+        icon="myicon myicon-close"
+        variant="secondary"
+        :iconSize="14"
+        :disabled="disableDialog"
+        data-test="import-close-btn"
+        @click="cancelImport"
+      />
     </div>
     <div class="dialog-body">
       <text-field
-        label="Table name"
+        id="csv-json-table-name"
         v-model="tableName"
+        label="Table name"
         width="484px"
         :disabled="disableDialog"
-        :error-msg="tableNameError"
-        id="csv-json-table-name"
+        :errorMsg="tableNameError"
       />
       <div v-if="!isJson && !isNdJson" class="chars">
         <delimiter-selector
@@ -29,27 +35,27 @@
           @input="preview"
         />
         <text-field
+          id="quote-char"
+          v-model="quoteChar"
           label="Quote char"
           hint="The character used to quote fields."
-          v-model="quoteChar"
           width="93px"
           :disabled="disableDialog"
           class="char-input"
-          id="quote-char"
           @input="preview"
         />
         <text-field
+          id="escape-char"
+          v-model="escapeChar"
           label="Escape char"
           hint='
             The character used to escape the quote character within a field
             (e.g. "column with ""quotes"" in text").
           '
-          max-hint-width="242px"
-          v-model="escapeChar"
+          maxHintWidth="242px"
           width="93px"
           :disabled="disableDialog"
           class="char-input"
-          id="escape-char"
           @input="preview"
         />
       </div>
@@ -67,35 +73,32 @@
         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
+        id="import-cancel"
         class="secondary"
         :disabled="disableDialog"
         @click="cancelImport"
-        id="import-cancel"
       >
         Cancel
       </button>
       <button
         v-show="!importCompleted"
+        id="import-start"
         class="primary"
         :disabled="disableDialog || disableImport"
         @click="loadToDb(file)"
-        id="import-start"
       >
         Import
       </button>
       <button
         v-show="importCompleted"
+        id="import-finish"
         class="primary"
         :disabled="disableDialog"
         @click="finish"
-        id="import-finish"
       >
         Finish
       </button>
@@ -105,12 +108,12 @@
 
 <script>
 import csv from '@/lib/csv'
-import CloseIcon from '@/components/svg/close'
-import TextField from '@/components/TextField'
+import IconButton from '@/components/Common/IconButton.vue'
+import TextField from '@/components/Common/TextField'
 import DelimiterSelector from './DelimiterSelector'
-import CheckBox from '@/components/CheckBox'
+import CheckBox from '@/components/Common/CheckBox'
 import SqlTable from '@/components/SqlTable'
-import Logs from '@/components/Logs'
+import Logs from '@/components/Common/Logs'
 import time from '@/lib/utils/time'
 import fIo from '@/lib/utils/fileIo'
 import events from '@/lib/utils/events'
@@ -118,8 +121,8 @@ import events from '@/lib/utils/events'
 export default {
   name: 'CsvJsonImport',
   components: {
-    CloseIcon,
     TextField,
+    IconButton,
     DelimiterSelector,
     CheckBox,
     SqlTable,
@@ -130,7 +133,8 @@ export default {
     db: Object,
     dialogName: String
   },
-  data () {
+  emits: ['cancel', 'finish'],
+  data() {
     return {
       disableDialog: false,
       disableImport: false,
@@ -147,24 +151,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 +179,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 +199,7 @@ export default {
         this.$emit('cancel')
       }
     },
-    reset () {
+    reset() {
       this.header = !this.isJson && !this.isNdJson
       this.quoteChar = '"'
       this.escapeChar = '"'
@@ -210,11 +213,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 +260,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 +278,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
@@ -290,21 +295,22 @@ export default {
         delimiter: this.delimiter,
         columns: !this.isJson && !this.isNdJson ? null : ['doc']
       }
-      const parsingMsg = {
+      let parsingMsg = {}
+      this.importMessages.push({
         message: `Parsing ${this.typeName}...`,
         type: 'info'
-      }
-      this.importMessages.push(parsingMsg)
-      const parsingLoadingIndicator = setTimeout(() => { parsingMsg.type = 'loading' }, 1000)
+      })
+      // Get *reactive* link to parsing message for later updates
+      parsingMsg = this.importMessages[this.importMessages.length - 1]
+      const parsingLoadingIndicator = setTimeout(() => {
+        parsingMsg.type = 'loading'
+      }, 1000)
 
-      const importMsg = {
-        message: `Importing ${this.typeName} into a SQLite database...`,
-        type: 'info'
-      }
+      let importMsg = {}
       let importLoadingIndicator = null
 
       const updateProgress = progress => {
-        this.$set(importMsg, 'progress', progress)
+        importMsg.progress = progress
       }
       const progressCounterId = this.db.createProgressCounter(updateProgress)
 
@@ -322,7 +328,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
@@ -333,7 +341,11 @@ export default {
           clearTimeout(parsingLoadingIndicator)
 
           // Add info about import start
-          this.importMessages.push(importMsg)
+          this.importMessages.push({
+            message: `Importing ${this.typeName} into a SQLite database...`,
+            type: 'info'
+          })
+          importMsg = this.importMessages[this.importMessages.length - 1]
 
           // Show import progress after 1 second
           importLoadingIndicator = setTimeout(() => {
@@ -342,14 +354,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
@@ -382,7 +399,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 })
@@ -391,18 +408,20 @@ export default {
       this.$emit('finish')
       events.send('inquiry.create', null, { auto: true })
     },
-    getQueryExample () {
-      return this.isNdJson ? this.getNdJsonQueryExample()
-        : this.isJson ? this.getJsonQueryExample()
+    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}"`
-          ].join('\n')
+              '/*',
+              ` * 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]
@@ -410,7 +429,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}"`
@@ -426,7 +445,7 @@ export default {
         ].join('\n')
       }
     },
-    getJsonQueryExample () {
+    getJsonQueryExample() {
       try {
         const firstRowJson = JSON.parse(this.previewData.values.doc[0])
         const firstKey = Object.keys(firstRowJson)[0]
@@ -434,7 +453,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}"`,
@@ -455,13 +474,22 @@ export default {
 }
 </script>
 
+<style>
+.import-modal {
+  width: 80%;
+  max-width: 1152px;
+  margin: auto;
+  left: 0 !important;
+}
+</style>
+
 <style scoped>
 .dialog-body {
   padding-bottom: 0;
 }
 
 #csv-json-table-name {
-margin-bottom: 24px;
+  margin-bottom: 24px;
 }
 
 .chars {
@@ -494,11 +522,4 @@ margin-bottom: 24px;
   justify-content: center;
   align-items: center;
 }
-
-/* https://github.com/euvl/vue-js-modal/issues/623 */
->>> .vm--modal {
-  max-width: 1152px;
-  margin: auto;
-  left: 0 !important;
-}
 </style>

src/components/DataView.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="data-view-panel">
+    <div class="data-view-panel-content">
+      <component
+        :is="mode"
+        ref="viewComponent"
+        v-model:exportToPngEnabled="exportToPngEnabled"
+        v-model:exportToSvgEnabled="exportToSvgEnabled"
+        v-model:exportToHtmlEnabled="exportToHtmlEnabled"
+        v-model:exportToClipboardEnabled="exportToClipboardEnabled"
+        :initOptions="initOptionsByMode[mode]"
+        :data-sources="dataSource"
+        :showViewSettings="showViewSettings"
+        :showValueViewer="viewValuePanelVisible"
+        @loading-image-completed="loadingImage = false"
+        @update="$emit('update')"
+      />
+    </div>
+    <side-tool-bar panel="dataView" @switch-to="$emit('switchTo', $event)">
+      <icon-button
+        ref="chartBtn"
+        icon="myicon myicon-chart"
+        :active="mode === 'chart'"
+        tooltip="Switch to chart"
+        tooltipPosition="top-left"
+        @click="mode = 'chart'"
+      />
+      <icon-button
+        ref="pivotBtn"
+        icon="myicon myicon-pivot"
+        :active="mode === 'pivot'"
+        tooltip="Switch to pivot"
+        tooltipPosition="top-left"
+        @click="mode = 'pivot'"
+      />
+      <icon-button
+        ref="graphBtn"
+        icon="myicon myicon-graph"
+        :active="mode === 'graph'"
+        tooltip="Switch to graph"
+        tooltipPosition="top-left"
+        @click="mode = 'graph'"
+      />
+
+      <div class="side-tool-bar-divider" />
+
+      <icon-button
+        ref="settingsBtn"
+        icon="myicon myicon-settings"
+        :active="showViewSettings"
+        tooltip="Toggle visualisation settings visibility"
+        tooltipPosition="top-left"
+        @click="showViewSettings = !showViewSettings"
+      />
+
+      <icon-button
+        v-if="mode !== 'pivot'"
+        ref="viewDetailsBtn"
+        icon="myicon myicon-view-cell-value"
+        tooltip="View details"
+        tooltipPosition="top-left"
+        :active="viewValuePanelVisible"
+        @click="viewValuePanelVisible = !viewValuePanelVisible"
+      />
+
+      <div class="side-tool-bar-divider" />
+
+      <icon-button
+        ref="pngExportBtn"
+        icon="myicon myicon-png"
+        :disabled="!exportToPngEnabled || loadingImage"
+        :loading="loadingImage"
+        tooltip="Save as PNG image"
+        tooltipPosition="top-left"
+        @click="saveAsPng"
+      />
+
+      <icon-button
+        ref="svgExportBtn"
+        icon="myicon myicon-export-to-svg"
+        :disabled="!exportToSvgEnabled"
+        tooltip="Save as SVG"
+        tooltipPosition="top-left"
+        @click="saveAsSvg"
+      />
+
+      <icon-button
+        ref="htmlExportBtn"
+        icon="myicon myicon-html"
+        :disabled="!exportToHtmlEnabled"
+        tooltip="Save as HTML"
+        tooltipPosition="top-left"
+        @click="saveAsHtml"
+      />
+
+      <icon-button
+        ref="copyToClipboardBtn"
+        icon="myicon myicon-clipboard"
+        :disabled="!exportToClipboardEnabled"
+        :loading="copyingImage"
+        tooltip="Copy visualisation to clipboard"
+        tooltipPosition="top-left"
+        @click="prepareCopy"
+      />
+    </side-tool-bar>
+
+    <loading-dialog
+      v-model="showLoadingDialog"
+      loadingMsg="Rendering the visualisation..."
+      successMsg="Image is ready"
+      actionBtnName="Copy"
+      title="Copy to clipboard"
+      :loading="preparingCopy"
+      @action="copyToClipboard"
+      @cancel="cancelCopy"
+    />
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/Chart.vue'
+import Pivot from '@/components/Pivot'
+import Graph from '@/components/Graph/index.vue'
+import SideToolBar from '@/components/SideToolBar'
+import IconButton from '@/components/Common/IconButton'
+import cIo from '@/lib/utils/clipboardIo'
+import loadingDialog from '@/components/Common/LoadingDialog.vue'
+import time from '@/lib/utils/time'
+import events from '@/lib/utils/events'
+
+export default {
+  name: 'DataView',
+  components: {
+    Chart,
+    Pivot,
+    Graph,
+    SideToolBar,
+    IconButton,
+    loadingDialog
+  },
+  props: {
+    dataSource: Object,
+    initOptions: Object,
+    initMode: String
+  },
+  emits: ['update', 'switchTo'],
+  data() {
+    return {
+      mode: this.initMode || 'chart',
+      exportToPngEnabled: true,
+      exportToSvgEnabled: true,
+      exportToHtmlEnabled: true,
+      exportToClipboardEnabled: true,
+      loadingImage: false,
+      copyingImage: false,
+      preparingCopy: false,
+      dataToCopy: null,
+      initOptionsByMode: {
+        chart: this.initMode === 'chart' ? this.initOptions : null,
+        pivot: this.initMode === 'pivot' ? this.initOptions : null,
+        graph: this.initMode === 'graph' ? this.initOptions : null
+      },
+      showLoadingDialog: false,
+      showViewSettings: true,
+      viewValuePanelVisible: false
+    }
+  },
+  computed: {
+    plotlyInPivot() {
+      return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
+    }
+  },
+  watch: {
+    mode(newMode, oldMode) {
+      this.$emit('update')
+      this.exportToPngEnabled = true
+      this.exportToClipboardEnabled = true
+      this.initOptionsByMode[oldMode] = this.getOptionsForSave()
+    }
+  },
+  methods: {
+    async saveAsPng() {
+      this.loadingImage = true
+      /*
+      setTimeout does its thing by putting its callback on the callback queue.
+      The callback queue is only called by the browser after both the call stack
+      and the render queue are done. So our animation (which is on the call stack) gets done,
+      the render queue renders it, and then the browser is ready for the callback queue
+      and calls the long-calculation.
+
+      nextTick allows you to do something after you have changed the data
+      and VueJS has updated the DOM based on your data change,
+      but before the browser has rendered those changed on the page.
+
+      http://www.hesselinkwebdesign.nl/2019/nexttick-vs-settimeout-in-vue/
+
+      */
+      await time.sleep(0)
+      this.$refs.viewComponent.saveAsPng()
+      this.exportSignal('png')
+    },
+    getOptionsForSave() {
+      return this.$refs.viewComponent.getOptionsForSave()
+    },
+    async prepareCopy() {
+      if ('ClipboardItem' in window) {
+        this.preparingCopy = true
+        this.showLoadingDialog = true
+        const t0 = performance.now()
+
+        await time.sleep(0)
+        this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
+        const t1 = performance.now()
+        if (t1 - t0 < 950) {
+          this.copyToClipboard()
+        } else {
+          this.preparingCopy = false
+        }
+      } 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.'
+        )
+      }
+    },
+    copyToClipboard() {
+      cIo.copyImage(this.dataToCopy)
+      this.showLoadingDialog = false
+      this.exportSignal('clipboard')
+    },
+    cancelCopy() {
+      this.dataToCopy = null
+    },
+
+    saveAsSvg() {
+      this.$refs.viewComponent.saveAsSvg()
+      this.exportSignal('svg')
+    },
+    saveAsHtml() {
+      this.$refs.viewComponent.saveAsHtml()
+      this.exportSignal('html')
+    },
+    exportSignal(to) {
+      const eventLabels = { type: to }
+
+      if (this.mode === 'chart' || this.plotlyInPivot) {
+        eventLabels.pivot = this.plotlyInPivot
+      }
+
+      events.send(
+        this.mode === 'chart' || this.plotlyInPivot
+          ? 'viz_plotly.export'
+          : this.mode === 'graph'
+            ? 'viz_graph.export'
+            : 'viz_pivot.export',
+        null,
+        eventLabels
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.data-view-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.data-view-panel-content {
+  position: relative;
+  flex-grow: 1;
+  width: calc(100% - 39px);
+  height: 100%;
+  overflow: auto;
+}
+</style>

src/components/DbUploader.vue

@@ -1,43 +1,48 @@
 <template>
   <div class="db-uploader-container" :style="{ width }">
-    <change-db-icon v-if="type === 'small'" @click="browse"/>
+    <IconButton
+      v-if="type === 'small'"
+      icon="myicon myicon-change-db"
+      tooltip="Load another database, CSV, JSON or NDJSON"
+      @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>
     <div v-if="type === 'illustrated'" id="img-container">
-      <img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" />
+      <img id="drop-file-top-img" src="~@/assets/images/top.svg" />
       <img
         id="left-arm-img"
-        :class="{'swing': state === 'dragover'}"
-        :src="require('@/assets/images/leftArm.svg')"
+        :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="require('@/assets/images/file.png')"
+        src="~@/assets/images/file.png"
       />
-      <img id="drop-file-bottom-img" :src="require('@/assets/images/bottom.svg')" />
-      <img id="body-img" :src="require('@/assets/images/body.svg')" />
+      <img id="drop-file-bottom-img" src="~@/assets/images/bottom.svg" />
+      <img id="body-img" src="~@/assets/images/body.svg" />
       <img
         id="right-arm-img"
-        :class="{'swing': state === 'dragover'}"
-        :src="require('@/assets/images/rightArm.svg')"
+        :class="{ swing: state === 'dragover' }"
+        src="~@/assets/images/rightArm.svg"
       />
     </div>
     <div id="error" class="error"></div>
@@ -47,7 +52,7 @@
       ref="addCsvJson"
       :file="file"
       :db="newDb"
-      dialog-name="importFromCsvJson"
+      dialogName="importFromCsvJson"
       @cancel="cancelImport"
       @finish="finish"
     />
@@ -56,19 +61,23 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
-import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
 import CsvJsonImport from '@/components/CsvJsonImport'
 import events from '@/lib/utils/events'
+import IconButton from '@/components/Common/IconButton'
 
 export default {
   name: 'DbUploader',
+  components: {
+    IconButton,
+    CsvJsonImport
+  },
   props: {
     type: {
       type: String,
       required: false,
       default: 'small',
-      validator: (value) => {
+      validator: value => {
         return ['illustrated', 'small'].includes(value)
       }
     },
@@ -78,11 +87,8 @@ export default {
       default: 'unset'
     }
   },
-  components: {
-    ChangeDbIcon,
-    CsvJsonImport
-  },
-  data () {
+  emits: [],
+  data() {
     return {
       state: '',
       animationPromise: Promise.resolve(),
@@ -90,9 +96,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'
@@ -103,26 +109,34 @@ 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) {
+      if (!file) {
+        alert(
+          'You should drop a file. ' +
+            'It can be an SQLite database, CSV file, JSON or NDJSON file.'
+        )
+        return
+      }
       this.state = 'dropping'
       this.newDb = database.getNewDatabase()
 
@@ -139,16 +153,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])
     }
   }
@@ -242,11 +259,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 {

src/components/Graph/AdvancedForceAtlasLayoutSettings.vue

@@ -0,0 +1,141 @@
+<template>
+  <Field label="Scaling ratio" fieldContainerClassName="test_fa2_scaling">
+    <NumericInput
+      :value="modelValue.scalingRatio"
+      @update="update('scalingRatio', $event)"
+    />
+  </Field>
+
+  <Field
+    label="Prevent overlapping"
+    fieldContainerClassName="test_fa2_adjustSizes"
+  >
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.adjustSizes"
+      @option-change="update('adjustSizes', $event)"
+    />
+  </Field>
+
+  <Field
+    label="Barnes-Hut optimize"
+    fieldContainerClassName="test_fa2_barnes_hut"
+  >
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.barnesHutOptimize"
+      @option-change="update('barnesHutOptimize', $event)"
+    />
+  </Field>
+
+  <Field
+    v-show="modelValue.barnesHutOptimize"
+    label="Barnes-Hut Theta"
+    fieldContainerClassName="test_fa2_barnes_theta"
+  >
+    <NumericInput
+      :value="modelValue.barnesHutTheta"
+      @update="update('barnesHutTheta', $event)"
+    />
+  </Field>
+
+  <Field
+    label="Strong gravity mode"
+    fieldContainerClassName="test_fa2_strong_gravity"
+  >
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.strongGravityMode"
+      @option-change="update('strongGravityMode', $event)"
+    />
+  </Field>
+
+  <Field
+    label="Noack's LinLog model"
+    fieldContainerClassName="test_fa2_lin_log"
+  >
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.linLogMode"
+      @option-change="update('linLogMode', $event)"
+    />
+  </Field>
+
+  <Field
+    label="Outbound attraction distribution"
+    fieldContainerClassName="test_fa2_outbound_attraction"
+  >
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.outboundAttractionDistribution"
+      @option-change="update('outboundAttractionDistribution', $event)"
+    />
+  </Field>
+
+  <Field label="Slow down" fieldContainerClassName="test_fa2_slow_down">
+    <NumericInput
+      :value="modelValue.slowDown"
+      :min="0"
+      @update="update('slowDown', $event)"
+    />
+  </Field>
+
+  <Field label="Edge weight">
+    <Dropdown
+      :options="keyOptions"
+      :value="modelValue.weightSource"
+      className="test_fa2_weight_source"
+      @change="update('weightSource', $event)"
+    />
+  </Field>
+  <Field
+    v-show="modelValue.weightSource"
+    label="Edge weight influence"
+    fieldContainerClassName="test_fa2_weight_influence"
+  >
+    <NumericInput
+      :value="modelValue.edgeWeightInfluence"
+      @update="update('edgeWeightInfluence', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      booleanOptions: markRaw([
+        { label: 'Yes', value: true },
+        { label: 'No', value: false }
+      ])
+    }
+  },
+  methods: {
+    update(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/CirclePackLayoutSettings.vue

@@ -0,0 +1,75 @@
+<template>
+  <Field
+    label="Hierarchy attributes"
+    fieldContainerClassName="multiselect-field"
+  >
+    <multiselect
+      :modelValue="modelValue.hierarchyAttributes"
+      class="sqliteviz-select"
+      :options="keyOptions"
+      :multiple="true"
+      :hideSelected="true"
+      :closeOnSelect="true"
+      :showLabels="false"
+      :max="keyOptions.length"
+      placeholder=""
+      openDirection="bottom"
+      @update:model-value="update('hierarchyAttributes', $event)"
+    >
+      <template #maxElements>
+        <span class="no-results">No Results</span>
+      </template>
+
+      <template #placeholder>Select an Option</template>
+
+      <template #noResult>
+        <span class="no-results">No Results</span>
+      </template>
+    </multiselect>
+  </Field>
+
+  <Field label="Seed value" fieldContainerClassName="test_seed_value">
+    <NumericInput
+      :value="modelValue.seedValue"
+      @update="update('seedValue', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { applyPureReactInVue } from 'veaury'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Multiselect from 'vue-multiselect'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    NumericInput: applyPureReactInVue(NumericInput),
+    Multiselect
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    update(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.sqliteviz-select.multiselect--active .multiselect__input) {
+  width: 100% !important;
+}
+:deep(.multiselect-field .field__widget > *) {
+  flex-grow: 1 !important;
+}
+</style>

src/components/Graph/EdgeColorSettings.vue

@@ -0,0 +1,148 @@
+<template>
+  <Field label="Color" fieldContainerClassName="test_edge_color">
+    <RadioBlocks
+      :options="edgeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field
+      v-if="modelValue.type === 'constant'"
+      fieldContainerClassName="test_edge_color_value"
+    >
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field fieldContainerClassName="test_edge_color_value">
+        <Dropdown
+          v-if="modelValue.type === 'variable'"
+          :options="keyOptions"
+          :value="modelValue.source"
+          @change="updateSettings('source', $event)"
+        />
+      </Field>
+
+      <Field fieldContainerClassName="test_edge_color_mapping_mode">
+        <RadioBlocks
+          :options="colorSourceUsageOptions"
+          :activeOption="modelValue.sourceUsage"
+          @option-change="updateSettings('sourceUsage', $event)"
+        />
+      </Field>
+
+      <Field v-if="modelValue.sourceUsage === 'map_to'">
+        <ColorscalePicker
+          :selected="modelValue.colorscale"
+          className="colorscale-picker"
+          @colorscale-change="updateSettings('colorscale', $event)"
+        />
+      </Field>
+    </template>
+  </Field>
+
+  <Field
+    v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
+    label="Color as"
+    fieldContainerClassName="test_edge_color_as"
+  >
+    <RadioBlocks
+      :options="сolorAsOptions"
+      :activeOption="modelValue.mode"
+      @option-change="updateSettings('mode', $event)"
+    />
+  </Field>
+
+  <Field
+    v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
+    label="Colorscale direction"
+    fieldContainerClassName="test_edge_color_colorscale_direction"
+  >
+    <RadioBlocks
+      :options="сolorscaleDirections"
+      :activeOption="modelValue.colorscaleDirection"
+      @option-change="updateSettings('colorscaleDirection', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
+import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field),
+    ColorscalePicker: applyPureReactInVue(ColorscalePicker),
+    ColorPicker: applyPureReactInVue(ColorPicker)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      edgeColorTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' }
+      ]),
+      сolorAsOptions: markRaw([
+        { label: 'Continious', value: 'continious' },
+        { label: 'Categorical', value: 'categorical' }
+      ]),
+      сolorscaleDirections: markRaw([
+        { label: 'Normal', value: 'normal' },
+        { label: 'Reversed', value: 'reversed' }
+      ]),
+      colorSourceUsageOptions: markRaw([
+        { label: 'Direct', value: 'direct' },
+        { label: 'Map to', value: 'map_to' }
+      ]),
+      defaultColorSettings: {
+        constant: { value: '#1F77B4' },
+        variable: {
+          source: null,
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'categorical',
+          colorscaleDirection: 'normal'
+        }
+      }
+    }
+  },
+
+  methods: {
+    updateColorType(newColorType) {
+      const currentColorType = this.modelValue.type
+      this.defaultColorSettings[currentColorType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newColorType,
+        ...this.defaultColorSettings[newColorType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.customPickerContainer) {
+  float: right;
+}
+</style>

src/components/Graph/EdgeSizeSettings.vue

@@ -0,0 +1,93 @@
+<template>
+  <Field label="Size" fieldContainerClassName="test_edge_size">
+    <RadioBlocks
+      :options="edgeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field fieldContainerClassName="test_edge_size_value">
+      <NumericInput
+        v-if="modelValue.type === 'constant'"
+        :value="modelValue.value"
+        :min="1"
+        @update="updateSettings('value', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'variable'"
+        :options="keyOptions"
+        :value="modelValue.source"
+        @change="updateSettings('source', $event)"
+      />
+    </Field>
+  </Field>
+
+  <template v-if="modelValue.type !== 'constant'">
+    <Field label="Size scale" fieldContainerClassName="test_edge_size_scale">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size" fieldContainerClassName="test_edge_size_min">
+      <NumericInput
+        :value="modelValue.min"
+        @update="updateSettings('min', $event)"
+      />
+    </Field>
+  </template>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      edgeSizeTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' }
+      ]),
+      defaultSizeSettings: {
+        constant: { value: 4 },
+        variable: { source: null, scale: 1, min: 1 }
+      }
+    }
+  },
+  methods: {
+    updateSizeType(newSizeType) {
+      const currentSizeType = this.modelValue.type
+      this.defaultSizeSettings[currentSizeType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newSizeType,
+        ...this.defaultSizeSettings[newSizeType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/ForceAtlasLayoutSettings.vue

@@ -0,0 +1,46 @@
+<template>
+  <Field
+    label="Initial iterations"
+    fieldContainerClassName="test_fa2_iteration_amount"
+  >
+    <NumericInput
+      :value="modelValue.initialIterationsAmount"
+      :min="1"
+      @update="update('initialIterationsAmount', $event)"
+    />
+  </Field>
+
+  <Field label="Gravity" fieldContainerClassName="test_fa2_gravity">
+    <NumericInput
+      :value="modelValue.gravity"
+      @update="update('gravity', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { applyPureReactInVue } from 'veaury'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    NumericInput: applyPureReactInVue(NumericInput)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    update(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/ForceAtlasSeedLayoutSettings.vue

@@ -0,0 +1,86 @@
+<template>
+  <Field label="Initial algorithm">
+    <Dropdown
+      :options="layoutOptions"
+      :value="modelValue.initialAlgorithm"
+      :clearable="false"
+      className="test_fa2_initial_layout_algorithm_select"
+      @change="updateInitialAlgorithm"
+    />
+  </Field>
+
+  <component
+    :is="layoutSettingsComponentMap[modelValue.initialAlgorithm]"
+    v-if="modelValue.initialAlgorithm !== 'circular'"
+    :modelValue="modelValue"
+    :keyOptions="keyOptions"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import 'react-chart-editor/lib/react-chart-editor.css'
+import CirclePackLayoutSettings from '@/components/Graph/CirclePackLayoutSettings.vue'
+import RandomLayoutSettings from '@/components/Graph/RandomLayoutSettings.vue'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput),
+    RandomLayoutSettings,
+    CirclePackLayoutSettings
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      layoutOptions: markRaw([
+        { label: 'Circular', value: 'circular' },
+        { label: 'Random', value: 'random' },
+        { label: 'Circle pack', value: 'circlepack' }
+      ]),
+      layoutSettingsComponentMap: markRaw({
+        random: RandomLayoutSettings,
+        circlepack: CirclePackLayoutSettings
+      }),
+      defaultSeedLayoutSettings: {
+        circular: { initialAlgorithm: 'circular' },
+        random: { initialAlgorithm: 'random', seedValue: 1 },
+        circlepack: {
+          initialAlgorithm: 'circlepack',
+          hierarchyAttributes: [],
+          seedValue: 1
+        }
+      }
+    }
+  },
+  methods: {
+    updateInitialAlgorithm(newAlgorithm) {
+      const newSettings = {
+        ...this.modelValue
+      }
+
+      const prevAlgorithmSettings =
+        this.defaultSeedLayoutSettings[this.modelValue.initialAlgorithm]
+      Object.keys(prevAlgorithmSettings).forEach(key => {
+        delete newSettings[key]
+        prevAlgorithmSettings[key] = this.modelValue[key]
+      })
+
+      this.$emit('update:modelValue', {
+        ...newSettings,
+        ...this.defaultSeedLayoutSettings[newAlgorithm]
+      })
+    }
+  }
+}
+</script>

src/components/Graph/GraphEditor.vue

@@ -0,0 +1,909 @@
+<template>
+  <div :class="['plotly_editor', { with_controls: showViewSettings }]">
+    <GraphEditorControls v-show="showViewSettings">
+      <PanelMenuWrapper>
+        <Panel group="Structure" name="Graph">
+          <Fold name="Graph">
+            <Field>
+              Map your result set records to node and edge properties required
+              to build a graph. Learn more about result set requirements in the
+              <a href="https://sqliteviz.com/docs/graph/" target="_blank">
+                documentation</a
+              >.
+            </Field>
+            <Field ref="objectTypeField" label="Object type">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.structure.objectType"
+                className="test_object_type_select"
+                @change="updateStructure('objectType', $event)"
+              />
+              <Field>
+                A field indicating if the record is node (value&nbsp;0) or edge
+                (value&nbsp;1).
+              </Field>
+            </Field>
+
+            <Field label="Node Id">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.structure.nodeId"
+                className="test_node_id_select"
+                @change="updateStructure('nodeId', $event)"
+              />
+              <Field> A field keeping unique node identifier. </Field>
+            </Field>
+
+            <Field label="Edge source">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.structure.edgeSource"
+                className="test_edge_source_select"
+                @change="updateStructure('edgeSource', $event)"
+              />
+              <Field>
+                A field keeping a node identifier where the edge starts.
+              </Field>
+            </Field>
+
+            <Field label="Edge target">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.structure.edgeTarget"
+                className="test_edge_target_select"
+                @change="updateStructure('edgeTarget', $event)"
+              />
+              <Field>
+                A field keeping a node identifier where the edge ends.
+              </Field>
+            </Field>
+          </Fold>
+        </Panel>
+        <Panel group="Style" name="General">
+          <Fold name="General">
+            <Field label="Background color">
+              <ColorPicker
+                :selectedColor="settings.style.backgroundColor"
+                @color-change="settings.style.backgroundColor = $event"
+              />
+            </Field>
+
+            <Field label="Highlight mode">
+              <Dropdown
+                :options="highlightModeOptions"
+                :value="settings.style.highlightMode"
+                className="test_highlight_mode_select"
+                @change="updateHighlightNodeMode"
+              />
+            </Field>
+          </Fold>
+        </Panel>
+        <Panel group="Style" name="Nodes">
+          <Fold name="Nodes">
+            <Field label="Label">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.style.nodes.label.source"
+                className="test_label_select"
+                @change="updateNodes('label.source', $event)"
+              />
+            </Field>
+
+            <Field label="Label color">
+              <ColorPicker
+                :selectedColor="settings.style.nodes.label.color"
+                @color-change="updateNodes('label.color', $event)"
+              />
+            </Field>
+
+            <NodeSizeSettings
+              v-model="settings.style.nodes.size"
+              :keyOptions="keysOptions"
+              @update:model-value="updateNodes('size', $event)"
+            />
+            <NodeColorSettings
+              v-model="settings.style.nodes.color"
+              :keyOptions="keysOptions"
+              @update:model-value="updateNodes('color', $event)"
+            />
+          </Fold>
+        </Panel>
+
+        <Panel group="Style" name="Edges">
+          <Fold name="Edges">
+            <Field
+              label="Direction"
+              fieldContainerClassName="test_edge_direction"
+            >
+              <RadioBlocks
+                :options="visibilityOptions"
+                :activeOption="settings.style.edges.showDirection"
+                @option-change="updateEdges('showDirection', $event)"
+              />
+            </Field>
+
+            <Field label="Label">
+              <Dropdown
+                :options="keysOptions"
+                :value="settings.style.edges.label.source"
+                className="test_edge_label_select"
+                @change="updateEdges('label.source', $event)"
+              />
+            </Field>
+
+            <Field label="Label color">
+              <ColorPicker
+                :selectedColor="settings.style.edges.label.color"
+                @color-change="updateEdges('label.color', $event)"
+              />
+            </Field>
+
+            <EdgeSizeSettings
+              v-model="settings.style.edges.size"
+              :keyOptions="keysOptions"
+              @update:model-value="updateEdges('size', $event)"
+            />
+
+            <EdgeColorSettings
+              v-model="settings.style.edges.color"
+              :keyOptions="keysOptions"
+              @update:model-value="updateEdges('color', $event)"
+            />
+          </Fold>
+        </Panel>
+        <Panel group="Style" name="Layout">
+          <Fold name="Layout">
+            <Field label="Algorithm">
+              <Dropdown
+                :options="layoutOptions"
+                :value="settings.layout.type"
+                :clearable="false"
+                className="test_layout_algorithm_select"
+                @change="updateLayout($event)"
+              />
+            </Field>
+            <component
+              :is="layoutSettingsComponentMap[settings.layout.type]"
+              v-if="settings.layout.type !== 'circular'"
+              v-model="settings.layout.options"
+              :keyOptions="keysOptions"
+              @update:model-value="updateLayout(settings.layout.type)"
+            />
+          </Fold>
+          <template v-if="settings.layout.type === 'forceAtlas2'">
+            <Fold name="Seed layout">
+              <Field>
+                If you already built a graph using another layout, the initial
+                algorithm doesn't apply unless you restart it.
+              </Field>
+              <ForceAtlasSeedLayoutSettings
+                v-model="settings.layout.options"
+                :keyOptions="keysOptions"
+                @update:model-value="updateLayout(settings.layout.type)"
+              />
+            </Fold>
+            <Fold name="Advanced layout settings">
+              <AdvancedForceAtlasLayoutSettings
+                v-model="settings.layout.options"
+                :keyOptions="keysOptions"
+                @update:model-value="updateLayout(settings.layout.type)"
+              />
+            </Fold>
+            <div class="force-atlas-buttons">
+              <Button
+                variant="secondary"
+                class="test_fa2_reset"
+                title="Set the settings to default or previously saved ones."
+                @click="resetFA2LayoutSettings"
+              >
+                Reset
+              </Button>
+              <Button
+                variant="primary"
+                class="test_fa2_toggle"
+                @click="toggleFA2Layout"
+              >
+                <template #node:icon>
+                  <div class="button-icon-container">
+                    <i v-if="!fa2Running" class="myicon myicon-run" />
+                    <i v-else class="myicon myicon-pause" />
+                  </div>
+                </template>
+                {{ fa2Running ? 'Pause' : 'Continue' }}
+              </Button>
+              <Button
+                variant="primary"
+                class="test_fa2_restart"
+                title="Clear node coordinates and run the layout algorithm anew."
+                @click="restartFA2Layout"
+              >
+                <template #node:icon>
+                  <div class="button-icon-container">
+                    <i class="myicon myicon-restart" />
+                  </div>
+                </template>
+                Restart
+              </Button>
+            </div>
+          </template>
+        </Panel>
+      </PanelMenuWrapper>
+    </GraphEditorControls>
+
+    <div
+      ref="graph"
+      class="test_graph_output"
+      :style="{
+        height: '100%',
+        width: '100%',
+        backgroundColor: settings.style.backgroundColor
+      }"
+    />
+
+    <GraphSearchPanel
+      v-model:nodesMatchingSearchQuery="nodesMatchingSearchQuery"
+      v-model:focusedFoundNodeId="focusedFoundNodeId"
+      :graph="graph"
+      class="search-panel"
+    />
+  </div>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import GraphSearchPanel from '@/components/Graph/GraphSearchPanel.vue'
+import { applyPureReactInVue } from 'veaury'
+import GraphEditorControls from '@/lib/GraphEditorControls.jsx'
+import { PanelMenuWrapper, Panel, Fold, Section } from 'react-chart-editor'
+import 'react-chart-editor/lib/react-chart-editor.css'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
+import Button from 'react-chart-editor/lib/components/widgets/Button'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import RandomLayoutSettings from '@/components/Graph/RandomLayoutSettings.vue'
+import ForceAtlasLayoutSettings from '@/components/Graph/ForceAtlasLayoutSettings.vue'
+import ForceAtlasSeedLayoutSettings from '@/components/Graph/ForceAtlasSeedLayoutSettings.vue'
+// eslint-disable-next-line max-len
+import AdvancedForceAtlasLayoutSettings from '@/components/Graph/AdvancedForceAtlasLayoutSettings.vue'
+import CirclePackLayoutSettings from '@/components/Graph/CirclePackLayoutSettings.vue'
+import FA2Layout from 'graphology-layout-forceatlas2/worker'
+import * as forceAtlas2 from 'graphology-layout-forceatlas2'
+import { downloadAsPNG, drawOnCanvas } from '@sigma/export-image'
+import {
+  buildNodes,
+  buildEdges,
+  updateNodes,
+  updateEdges,
+  reduceNodes,
+  reduceEdges,
+  clearNodeCoordinates
+} from '@/lib/graphHelper'
+import Graph from 'graphology'
+import { circular, random, circlepack } from 'graphology-layout'
+import Sigma from 'sigma'
+import seedrandom from 'seedrandom'
+import NodeColorSettings from '@/components/Graph/NodeColorSettings.vue'
+import NodeSizeSettings from '@/components/Graph/NodeSizeSettings.vue'
+import EdgeSizeSettings from '@/components/Graph/EdgeSizeSettings.vue'
+import EdgeColorSettings from '@/components/Graph/EdgeColorSettings.vue'
+import events from '@/lib/utils/events'
+
+export default {
+  components: {
+    GraphEditorControls: applyPureReactInVue(GraphEditorControls),
+    PanelMenuWrapper: applyPureReactInVue(PanelMenuWrapper),
+    Panel: applyPureReactInVue(Panel),
+    PanelSection: applyPureReactInVue(Section),
+    Dropdown: applyPureReactInVue(Dropdown),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field),
+    Fold: applyPureReactInVue(Fold),
+    Button: applyPureReactInVue(Button),
+    ColorPicker: applyPureReactInVue(ColorPicker),
+    RandomLayoutSettings,
+    CirclePackLayoutSettings,
+    NodeColorSettings,
+    NodeSizeSettings,
+    EdgeSizeSettings,
+    EdgeColorSettings,
+    AdvancedForceAtlasLayoutSettings,
+    ForceAtlasSeedLayoutSettings,
+    GraphSearchPanel
+  },
+  inject: ['tabLayout'],
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    showViewSettings: Boolean
+  },
+  emits: ['update', 'selectItem', 'clearSelection'],
+  data() {
+    return {
+      nodesMatchingSearchQuery: null,
+      focusedFoundNodeId: null,
+      graph: new Graph({ multi: true, allowSelfLoops: true }),
+      renderer: null,
+      fa2Layout: null,
+      fa2Running: false,
+      checkIteration: null,
+      visibilityOptions: markRaw([
+        { label: 'Show', value: true },
+        { label: 'Hide', value: false }
+      ]),
+      layoutOptions: markRaw([
+        { label: 'Circular', value: 'circular' },
+        { label: 'Random', value: 'random' },
+        { label: 'Circle pack', value: 'circlepack' },
+        { label: 'ForceAtlas2', value: 'forceAtlas2' }
+      ]),
+      layoutSettingsComponentMap: markRaw({
+        random: RandomLayoutSettings,
+        circlepack: CirclePackLayoutSettings,
+        forceAtlas2: ForceAtlasLayoutSettings
+      }),
+      layoutMethodMap: markRaw({
+        circular: this.applyCircularLayout,
+        random: this.applyRandomLayout,
+        circlepack: this.applyCirclePackLayout,
+        forceAtlas2: this.applyFA2Layout
+      }),
+      selectedNodeId: undefined,
+      hoveredNodeId: undefined,
+      selectedEdgeId: undefined,
+      hoveredEdgeId: undefined,
+      settings: this.initOptions
+        ? JSON.parse(JSON.stringify(this.initOptions))
+        : {
+            structure: {
+              nodeId: null,
+              objectType: null,
+              edgeSource: null,
+              edgeTarget: null
+            },
+            style: {
+              backgroundColor: 'white',
+              highlightMode: 'node_and_neighbors',
+              nodes: {
+                size: {
+                  type: 'constant',
+                  value: 10
+                },
+                color: {
+                  type: 'constant',
+                  value: '#1F77B4',
+                  opacity: 100
+                },
+                label: {
+                  source: null,
+                  color: '#444444'
+                }
+              },
+              edges: {
+                showDirection: true,
+                size: {
+                  type: 'constant',
+                  value: 2
+                },
+                color: {
+                  type: 'constant',
+                  value: '#a2b1c6'
+                },
+                label: {
+                  source: null,
+                  color: '#a2b1c6'
+                }
+              }
+            },
+            layout: {
+              type: 'circular',
+              options: null
+            }
+          },
+      layoutOptionsArchive: {
+        random: null,
+        circlepack: null,
+        forceAtlas2: null
+      },
+      highlightModeOptions: markRaw([
+        { label: 'Node alone', value: 'node_alone' },
+        { label: 'Node and neighbors', value: 'node_and_neighbors' },
+        {
+          label: 'Include edges between neighbors',
+          value: 'include_neighbor_edges'
+        }
+      ])
+    }
+  },
+  computed: {
+    records() {
+      if (!this.dataSources) {
+        return []
+      }
+      const firstColumnName = Object.keys(this.dataSources)[0]
+      try {
+        return (
+          this.dataSources[firstColumnName].map(json => JSON.parse(json)) || []
+        )
+      } catch {
+        return []
+      }
+    },
+    keysOptions() {
+      if (!this.dataSources) {
+        return []
+      }
+      const keySet = this.records.reduce((result, currentRecord) => {
+        Object.keys(currentRecord).forEach(key => result.add(key))
+        return result
+      }, new Set())
+
+      return Array.from(keySet)
+    },
+    neighborsOfSelectedNode() {
+      if (this.settings.style.highlightMode === 'node_alone') {
+        return undefined
+      }
+      return this.selectedNodeId
+        ? new Set(this.graph.neighbors(this.selectedNodeId))
+        : undefined
+    },
+    neighborsOfHoveredNode() {
+      if (this.settings.style.highlightMode === 'node_alone') {
+        return undefined
+      }
+      return this.hoveredNodeId
+        ? new Set(this.graph.neighbors(this.hoveredNodeId))
+        : undefined
+    },
+    hoveredEdgeExtremities() {
+      return this.hoveredEdgeId
+        ? this.graph.extremities(this.hoveredEdgeId)
+        : []
+    },
+    selectedEdgeExtremities() {
+      return this.selectedEdgeId
+        ? this.graph.extremities(this.selectedEdgeId)
+        : []
+    },
+    interactionState() {
+      return {
+        selectedNodeId: this.selectedNodeId,
+        hoveredNodeId: this.hoveredNodeId,
+        selectedEdgeId: this.selectedEdgeId,
+        hoveredEdgeId: this.hoveredEdgeId,
+
+        neighborsOfSelectedNode: this.neighborsOfSelectedNode,
+        neighborsOfHoveredNode: this.neighborsOfHoveredNode,
+
+        hoveredEdgeExtremities: this.hoveredEdgeExtremities,
+        selectedEdgeExtremities: this.selectedEdgeExtremities,
+        nodesMatchingSearchQuery: this.nodesMatchingSearchQuery,
+        focusedFoundNodeId: this.focusedFoundNodeId
+      }
+    }
+  },
+  watch: {
+    dataSources() {
+      if (this.dataSources) {
+        this.buildGraph()
+      }
+    },
+    settings: {
+      deep: true,
+      handler() {
+        this.$emit('update')
+      }
+    },
+    'settings.structure': {
+      deep: true,
+      handler() {
+        this.buildGraph()
+      }
+    },
+    'settings.layout.type': {
+      immediate: true,
+      handler() {
+        events.send('viz_graph.render', null, {
+          layout: this.settings.layout.type
+        })
+      }
+    },
+    tabLayout: {
+      deep: true,
+      handler() {
+        if (this.tabLayout.dataView !== 'hidden' && this.renderer) {
+          this.renderer.scheduleRender()
+        }
+      }
+    },
+    nodesMatchingSearchQuery() {
+      if (this.renderer) {
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      }
+    },
+    focusedFoundNodeId() {
+      if (this.renderer) {
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      }
+      if (this.focusedFoundNodeId) {
+        this.moveCameraToNode(this.focusedFoundNodeId)
+      }
+    }
+  },
+  mounted() {
+    if (this.dataSources) {
+      this.buildGraph()
+    }
+  },
+  methods: {
+    buildGraph() {
+      this.clearSelection()
+      this.focusedFoundNodeId = null
+      this.nodesMatchingSearchQuery = null
+      if (this.renderer) {
+        this.renderer.kill()
+      }
+      this.graph.clear()
+
+      buildNodes(this.graph, this.dataSources, this.settings)
+      buildEdges(this.graph, this.dataSources, this.settings)
+
+      // Apply visual settings
+      updateNodes(this.graph, this.settings.style.nodes)
+      updateEdges(this.graph, this.settings.style.edges)
+
+      this.updateLayout(this.settings.layout.type)
+      this.renderer = new Sigma(this.graph, this.$refs.graph, {
+        renderEdgeLabels: true,
+        allowInvalidContainer: true,
+        labelColor: { attribute: 'labelColor', color: '#444444' },
+        edgeLabelColor: { attribute: 'labelColor', color: '#a2b1c6' },
+        enableEdgeEvents: true,
+        zIndex: true,
+        nodeReducer: (node, data) =>
+          reduceNodes(node, data, this.interactionState, this.settings),
+        edgeReducer: (edge, data) =>
+          reduceEdges(
+            edge,
+            data,
+            this.interactionState,
+            this.settings,
+            this.graph
+          )
+      })
+      this.renderer.on('clickNode', ({ node }) => {
+        this.selectedNodeId = node
+        this.selectedEdgeId = undefined
+        this.$emit('selectItem', this.graph.getNodeAttributes(node).data)
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('clickEdge', ({ edge }) => {
+        this.selectedEdgeId = edge
+        this.selectedNodeId = undefined
+        this.$emit('selectItem', this.graph.getEdgeAttributes(edge).data)
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('clickStage', () => {
+        this.clearSelection()
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('enterNode', ({ node }) => {
+        this.hoveredNodeId = node
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('enterEdge', ({ edge }) => {
+        this.hoveredEdgeId = edge
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('leaveNode', () => {
+        this.hoveredNodeId = undefined
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+      this.renderer.on('leaveEdge', () => {
+        this.hoveredEdgeId = undefined
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      })
+
+      if (this.settings.layout.type === 'forceAtlas2') {
+        this.autoRunFA2Layout()
+      }
+    },
+    clearSelection() {
+      this.selectedNodeId = undefined
+      this.selectedEdgeId = undefined
+      this.$emit('clearSelection')
+    },
+    updateHighlightNodeMode(mode) {
+      this.settings.style.highlightMode = mode
+
+      if (this.renderer) {
+        this.renderer.refresh({
+          skipIndexation: true
+        })
+      }
+    },
+    updateStructure(attributeName, value) {
+      this.settings.structure[attributeName] = value
+    },
+    updateNodes(attributeName, value) {
+      const attributePath = attributeName.split('.')
+      attributePath.reduce((result, current, index) => {
+        if (index === attributePath.length - 1) {
+          return (result[current] = value)
+        } else {
+          return result[current]
+        }
+      }, this.settings.style.nodes)
+
+      updateNodes(this.graph, {
+        [attributePath[0]]: this.settings.style.nodes[attributePath[0]]
+      })
+    },
+    updateEdges(attributeName, value) {
+      const attributePath = attributeName.split('.')
+      attributePath.reduce((result, current, index) => {
+        if (index === attributePath.length - 1) {
+          return (result[current] = value)
+        } else {
+          return result[current]
+        }
+      }, this.settings.style.edges)
+
+      updateEdges(this.graph, {
+        [attributePath[0]]: this.settings.style.edges[attributePath[0]]
+      })
+    },
+    updateLayout(layoutType) {
+      const prevLayout = this.settings.layout.type
+
+      // Change layout type? - restore layout settings or set default settings
+      if (layoutType !== prevLayout) {
+        this.layoutOptionsArchive[prevLayout] = this.settings.layout.options
+        this.settings.layout.options = this.layoutOptionsArchive[layoutType]
+
+        if (!this.settings.layout.options) {
+          if (layoutType === 'forceAtlas2') {
+            this.setRecommendedFA2Settings()
+          } else if (['random', 'circlepack'].includes(layoutType)) {
+            this.settings.layout.options = {
+              seedValue: 1
+            }
+          }
+        }
+        this.settings.layout.type = layoutType
+      }
+
+      // In any case kill FA2 if it exists
+      if (this.fa2Layout) {
+        if (this.fa2Layout.isRunning()) {
+          this.stopFA2Layout()
+        }
+        this.fa2Layout.kill()
+      }
+
+      this.layoutMethodMap[layoutType]()
+
+      if (layoutType === 'forceAtlas2' && layoutType !== prevLayout) {
+        this.autoRunFA2Layout()
+      }
+    },
+    applyCircularLayout() {
+      circular.assign(this.graph)
+    },
+    applyRandomLayout() {
+      random.assign(this.graph, {
+        rng: seedrandom(this.settings.layout.options.seedValue)
+      })
+    },
+    applyCirclePackLayout() {
+      this.graph.forEachNode(nodeId => {
+        this.graph.updateNode(nodeId, attributes => {
+          const newAttributes = { ...attributes }
+          // Delete old hierarchy attributes
+          Object.keys(newAttributes)
+            .filter(key => key.startsWith('hierarchyAttribute'))
+            .forEach(
+              hierarchyAttributeKey =>
+                delete newAttributes[hierarchyAttributeKey]
+            )
+          // Set new hierarchy attributes
+          this.settings.layout.options.hierarchyAttributes?.forEach(
+            (hierarchyAttribute, index) => {
+              newAttributes['hierarchyAttribute' + index] =
+                attributes.data[hierarchyAttribute]
+            }
+          )
+
+          return newAttributes
+        })
+      })
+
+      circlepack.assign(this.graph, {
+        hierarchyAttributes:
+          this.settings.layout.options.hierarchyAttributes?.map(
+            (_, index) => 'hierarchyAttribute' + index
+          ) || [],
+        rng: seedrandom(this.settings.layout.options.seedValue)
+      })
+    },
+    applyFA2Layout() {
+      if (
+        !this.graph.someNode(
+          (nodeKey, attributes) =>
+            typeof attributes.x === 'number' && typeof attributes.y === 'number'
+        )
+      ) {
+        this.layoutMethodMap[this.settings.layout.options.initialAlgorithm]()
+      }
+
+      const fa2settings = { ...this.settings.layout.options }
+      // delete all custom settings because they can break the algorithm running
+      delete fa2settings.initialAlgorithm
+      delete fa2settings.seedValue
+      delete fa2settings.initialIterationsAmount
+      delete fa2settings.hierarchyAttributes
+      this.fa2Layout = markRaw(
+        new FA2Layout(this.graph, {
+          getEdgeWeight: (_, attr) =>
+            this.settings.layout.options.weightSource
+              ? attr.data[this.settings.layout.options.weightSource]
+              : 1,
+          settings: fa2settings
+        })
+      )
+    },
+    toggleFA2Layout() {
+      if (this.fa2Layout.isRunning()) {
+        this.stopFA2Layout()
+      } else {
+        this.fa2Running = true
+        this.fa2Layout.start()
+      }
+    },
+    stopFA2Layout() {
+      this.fa2Running = false
+      this.fa2Layout.stop()
+      if (this.checkIteration) {
+        this.fa2Layout.worker.removeEventListener(
+          'message',
+          this.checkIteration
+        )
+        this.checkIteration = null
+      }
+    },
+    restartFA2Layout() {
+      if (this.fa2Layout.isRunning()) {
+        this.stopFA2Layout()
+      }
+      this.fa2Layout.kill()
+      clearNodeCoordinates(this.graph)
+      this.applyFA2Layout()
+      this.autoRunFA2Layout()
+    },
+    autoRunFA2Layout() {
+      let iteration = 1
+      this.checkIteration = () => {
+        if (
+          iteration === this.settings.layout.options.initialIterationsAmount
+        ) {
+          this.stopFA2Layout()
+        }
+        iteration++
+      }
+      this.fa2Layout.worker.addEventListener('message', this.checkIteration)
+      this.fa2Running = true
+      this.fa2Layout.start()
+    },
+    setRecommendedFA2Settings() {
+      const sensibleSettings = forceAtlas2.default.inferSettings(this.graph)
+      this.settings.layout.options = {
+        initialAlgorithm: 'circular',
+        initialIterationsAmount: 50,
+        adjustSizes: false,
+        barnesHutOptimize: false,
+        barnesHutTheta: 0.5,
+        edgeWeightInfluence: 0,
+        gravity: 1,
+        linLogMode: false,
+        outboundAttractionDistribution: false,
+        scalingRatio: 1,
+        slowDown: 1,
+        strongGravityMode: false,
+        ...sensibleSettings
+      }
+      if (
+        [Infinity, -Infinity].includes(this.settings.layout.options.slowDown)
+      ) {
+        this.settings.layout.options.slowDown = 1
+      }
+    },
+    resetFA2LayoutSettings() {
+      if (this.initOptions?.layout.type === 'forceAtlas2') {
+        this.settings.layout = JSON.parse(
+          JSON.stringify(this.initOptions.layout)
+        )
+      } else {
+        this.setRecommendedFA2Settings()
+      }
+      this.updateLayout(this.settings.layout.type)
+    },
+    saveAsPng() {
+      return downloadAsPNG(this.renderer, {
+        backgroundColor: this.settings.style.backgroundColor
+      })
+    },
+    prepareCopy() {
+      return drawOnCanvas(this.renderer, {
+        backgroundColor: this.settings.style.backgroundColor
+      })
+    },
+    moveCameraToNode(nodeId) {
+      const nodePosition = this.renderer.getNodeDisplayData(nodeId)
+      this.renderer.getCamera().animate(nodePosition, {
+        duration: 500
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.plotly_editor {
+  position: relative;
+}
+.plotly_editor.with_controls > div {
+  display: flex !important;
+}
+
+:deep(.customPickerContainer) {
+  float: right;
+}
+.force-atlas-buttons {
+  display: flex;
+  width: 100%;
+  gap: 16px;
+}
+
+.force-atlas-buttons :deep(button) {
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.force-atlas-buttons :deep(.button__icon > div) {
+  padding: 0 3px;
+}
+
+.search-panel {
+  top: 0;
+  right: 0;
+}
+
+.button-icon-container {
+  font-size: 16px;
+  filter: drop-shadow(0 1px 2px rgba(42, 63, 95, 0.7));
+  vertical-align: bottom;
+}
+
+.button-icon-container i {
+  vertical-align: top;
+}
+</style>

src/components/Graph/GraphSearchPanel.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="graph-search-panel">
+    <IconButton
+      icon="myicon myicon-open-search"
+      :title="panelOpen ? 'Close search panel' : 'Open search panel'"
+      variant="secondary"
+      :class="{ 'close-search-panel': panelOpen }"
+      data-test="toggle-search-panel-visibility-btn"
+      @click="panelOpen = !panelOpen"
+    />
+    <div v-show="panelOpen" class="graph-search-panel--search-controls">
+      <TextField
+        v-model.trim="searchQuery"
+        width="250px"
+        placeholder="Search nodes..."
+        :errorMsg="regExpIsValid ? '' : 'Invalid regular expression'"
+        class="query-input"
+        @keydown.enter.prevent="search"
+        @update:model-value="onSearchInput"
+      />
+      <IconButton
+        icon="myicon myicon-match-case"
+        title="Match case"
+        :active="matchCase"
+        data-test="match-case-btn"
+        @click="matchCase = !matchCase"
+      />
+      <IconButton
+        icon="myicon myicon-use-reg-exp"
+        title="Use regular expression"
+        :active="useRegExp"
+        data-test="use-reg-exp-btn"
+        @click="useRegExp = !useRegExp"
+      />
+
+      <div class="counter">
+        <span
+          v-if="
+            nodesMatchingSearchQuery?.length > 0 && currentFoundNodeIndex === -1
+          "
+        >
+          {{ shortResultCountString }}
+        </span>
+        <span
+          v-if="
+            nodesMatchingSearchQuery?.length > 0 && currentFoundNodeIndex !== -1
+          "
+          >{{ currentFoundNodeIndex + 1 }} of
+          {{ nodesMatchingSearchQuery.length }}
+        </span>
+
+        <span
+          v-show="
+            nodesMatchingSearchQuery && nodesMatchingSearchQuery.length === 0
+          "
+          data-test="no-results-text"
+        >
+          No results
+        </span>
+      </div>
+      <IconButton
+        icon="myicon myicon-arrow"
+        title="Previous match"
+        :disabled="arrowsDisabled"
+        data-test="previous-match-btn"
+        @click="toNextFoundNode(-1)"
+      />
+
+      <IconButton
+        icon="myicon myicon-arrow"
+        title="Next match"
+        :disabled="arrowsDisabled"
+        class="next-match-btn"
+        data-test="next-match-btn"
+        @click="toNextFoundNode(1)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TextField from '@/components/Common/TextField.vue'
+import IconButton from '@/components/Common/IconButton.vue'
+import time from '@/lib/utils/time'
+
+function getRegExp(query, matchCase) {
+  try {
+    const regExp = new RegExp(query, !matchCase ? 'i' : '')
+    return regExp
+  } catch (e) {
+    console.error('Invalid regular expression:', e)
+    return null
+  }
+}
+
+export default {
+  components: {
+    TextField,
+    IconButton
+  },
+  props: ['graph', 'nodesMatchingSearchQuery', 'focusedFoundNodeId'],
+  data() {
+    return {
+      searchQuery: '',
+      currentFoundNodeIndex: -1,
+      useRegExp: false,
+      matchCase: false,
+      panelOpen: false
+    }
+  },
+  computed: {
+    regExp() {
+      return this.useRegExp
+        ? getRegExp(this.searchQuery, this.matchCase)
+        : new RegExp(
+            this.searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'),
+            !this.matchCase ? 'i' : ''
+          )
+    },
+    regExpIsValid() {
+      return !this.searchQuery || this.regExp
+    },
+    arrowsDisabled() {
+      return (
+        !this.nodesMatchingSearchQuery ||
+        this.nodesMatchingSearchQuery.length === 0
+      )
+    },
+    shortResultCountString() {
+      const count = this.nodesMatchingSearchQuery?.length ?? 0
+      const formattedCount =
+        count > 1000
+          ? new Intl.NumberFormat('en', {
+              notation: 'compact',
+              compactDisplay: 'short',
+              maximumSignificantDigits: 3
+            }).format(count)
+          : count
+
+      return `${formattedCount} ${count === 1 ? 'node' : 'nodes'} found`
+    }
+  },
+  watch: {
+    focusedFoundNodeId() {
+      if (!this.focusedFoundNodeId) {
+        this.currentFoundNodeIndex = -1
+      }
+    },
+    useRegExp() {
+      this.search()
+    },
+    matchCase() {
+      this.search()
+    }
+  },
+  methods: {
+    onSearchInput: time.debounce(function () {
+      this.search()
+    }, 500),
+    search() {
+      this.currentFoundNodeIndex = -1
+      if (this.regExpIsValid) {
+        const foundNodes = this.searchQuery ? this.getFoundNodes() : null
+        this.$emit('update:nodesMatchingSearchQuery', foundNodes)
+      } else {
+        this.$emit('update:nodesMatchingSearchQuery', null)
+      }
+
+      this.$emit('update:focusedFoundNodeId', null)
+    },
+    getFoundNodes() {
+      if (!this.graph) {
+        return null
+      }
+
+      return this.graph.filterNodes((nodeId, nodeData) => {
+        return this.regExp.test(nodeData.label)
+      })
+    },
+    toNextFoundNode(direction = 1) {
+      this.currentFoundNodeIndex =
+        (this.currentFoundNodeIndex +
+          direction +
+          this.nodesMatchingSearchQuery.length) %
+        this.nodesMatchingSearchQuery.length
+      const nodeId = this.nodesMatchingSearchQuery[this.currentFoundNodeIndex]
+      this.$emit('update:focusedFoundNodeId', nodeId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.graph-search-panel {
+  position: absolute;
+  background-color: var(--color-bg-light);
+  padding: 4px;
+  border-width: 0px 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--color-border-light);
+  border-radius: 0 0 0 4px;
+}
+
+.graph-search-panel--search-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.next-match-btn :deep(i) {
+  transform: rotate(180deg);
+}
+.close-search-panel :deep(i) {
+  transform: scaleX(-1);
+}
+.query-input :deep(input) {
+  height: 26px;
+}
+
+.counter {
+  min-width: 60px;
+  font-size: 12px;
+  color: var(--color-text-base);
+}
+
+.query-input :deep(input.error) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.query-input :deep(.text-field-error) {
+  width: 250px;
+  border-width: 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--color-text-error);
+  box-sizing: border-box;
+  background-color: var(--color-bg-danger);
+  margin-top: 0;
+  border-radius: 0 0 4px 4px;
+  color: var(--color-danger);
+}
+</style>

src/components/Graph/NodeColorSettings.vue

@@ -0,0 +1,192 @@
+<template>
+  <Field label="Color" fieldContainerClassName="test_node_color">
+    <RadioBlocks
+      :options="nodeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field
+      v-if="modelValue.type === 'constant'"
+      fieldContainerClassName="test_node_color_value"
+    >
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field fieldContainerClassName="test_node_color_value">
+        <Dropdown
+          v-if="modelValue.type === 'variable'"
+          :options="keyOptions"
+          :value="modelValue.source"
+          @change="updateSettings('source', $event)"
+        />
+        <Dropdown
+          v-if="modelValue.type === 'calculated'"
+          :options="nodeCalculatedColorMethodOptions"
+          :value="modelValue.method"
+          :clearable="false"
+          @change="updateSettings('method', $event)"
+        />
+      </Field>
+
+      <Field
+        v-if="modelValue.type === 'variable'"
+        fieldContainerClassName="test_node_color_mapping_mode"
+      >
+        <RadioBlocks
+          :options="colorSourceUsageOptions"
+          :activeOption="modelValue.sourceUsage"
+          @option-change="updateSettings('sourceUsage', $event)"
+        />
+      </Field>
+
+      <Field
+        v-if="
+          modelValue.sourceUsage === 'map_to' ||
+          modelValue.type === 'calculated'
+        "
+      >
+        <ColorscalePicker
+          :selected="modelValue.colorscale"
+          className="colorscale-picker"
+          @colorscale-change="updateSettings('colorscale', $event)"
+        />
+      </Field>
+    </template>
+  </Field>
+
+  <Field label="Opacity" fieldContainerClassName="test_node_opacity">
+    <NumericInput
+      :value="modelValue.opacity"
+      :showSlider="true"
+      :integerOnly="true"
+      :max="100"
+      :min="0"
+      units="%"
+      @update="updateSettings('opacity', $event)"
+    />
+  </Field>
+
+  <Field
+    v-if="modelValue.type === 'map_to' || modelValue.type === 'calculated'"
+    label="Color as"
+    fieldContainerClassName="test_node_color_as"
+  >
+    <RadioBlocks
+      :options="сolorAsOptions"
+      :activeOption="modelValue.mode"
+      @option-change="updateSettings('mode', $event)"
+    />
+  </Field>
+
+  <Field
+    v-if="
+      modelValue.sourceUsage === 'map_to' || modelValue.type === 'calculated'
+    "
+    label="Colorscale direction"
+    fieldContainerClassName="test_node_color_colorscale_direction"
+  >
+    <RadioBlocks
+      :options="сolorscaleDirections"
+      :activeOption="modelValue.colorscaleDirection"
+      @option-change="updateSettings('colorscaleDirection', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import ColorscalePicker from 'react-chart-editor/lib/components/widgets/ColorscalePicker'
+import ColorPicker from 'react-chart-editor/lib/components/widgets/ColorPicker'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    NumericInput: applyPureReactInVue(NumericInput),
+    Dropdown: applyPureReactInVue(Dropdown),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field),
+    ColorscalePicker: applyPureReactInVue(ColorscalePicker),
+    ColorPicker: applyPureReactInVue(ColorPicker)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      nodeColorTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' },
+        { label: 'Calculated', value: 'calculated' }
+      ]),
+      nodeCalculatedColorMethodOptions: markRaw([
+        { label: 'Degree', value: 'degree' },
+        { label: 'In degree', value: 'inDegree' },
+        { label: 'Out degree', value: 'outDegree' }
+      ]),
+      сolorAsOptions: markRaw([
+        { label: 'Continious', value: 'continious' },
+        { label: 'Categorical', value: 'categorical' }
+      ]),
+      сolorscaleDirections: markRaw([
+        { label: 'Normal', value: 'normal' },
+        { label: 'Reversed', value: 'reversed' }
+      ]),
+      colorSourceUsageOptions: markRaw([
+        { label: 'Direct', value: 'direct' },
+        { label: 'Map to', value: 'map_to' }
+      ]),
+      defaultColorSettings: {
+        constant: { value: '#1F77B4', opacity: 100 },
+        variable: {
+          source: null,
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'categorical',
+          colorscaleDirection: 'normal',
+          opacity: 100
+        },
+        calculated: {
+          method: 'degree',
+          colorscale: null,
+          mode: 'continious',
+          colorscaleDirection: 'normal',
+          opacity: 100
+        }
+      }
+    }
+  },
+  methods: {
+    updateColorType(newColorType) {
+      const currentColorType = this.modelValue.type
+      this.defaultColorSettings[currentColorType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newColorType,
+        ...this.defaultColorSettings[newColorType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.customPickerContainer) {
+  float: right;
+}
+</style>

src/components/Graph/NodeSizeSettings.vue

@@ -0,0 +1,120 @@
+<template>
+  <Field label="Size" fieldContainerClassName="test_node_size">
+    <RadioBlocks
+      :options="nodeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field fieldContainerClassName="test_node_size_value">
+      <NumericInput
+        v-if="modelValue.type === 'constant'"
+        :value="modelValue.value"
+        :min="1"
+        class="test_node_size_value"
+        @update="updateSettings('value', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'variable'"
+        :options="keyOptions"
+        :value="modelValue.source"
+        @change="updateSettings('source', $event)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'calculated'"
+        :options="nodeCalculatedSizeMethodOptions"
+        :value="modelValue.method"
+        :clearable="false"
+        @change="updateSettings('method', $event)"
+      />
+    </Field>
+  </Field>
+
+  <template v-if="modelValue.type !== 'constant'">
+    <Field label="Size scale" fieldContainerClassName="test_node_size_scale">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Size mode" fieldContainerClassName="test_node_size_mode">
+      <RadioBlocks
+        :options="nodeSizeModeOptions"
+        :activeOption="modelValue.mode"
+        @option-change="updateSettings('mode', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size" fieldContainerClassName="test_node_size_min">
+      <NumericInput
+        :value="modelValue.min"
+        @update="updateSettings('min', $event)"
+      />
+    </Field>
+  </template>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { applyPureReactInVue } from 'veaury'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import RadioBlocks from 'react-chart-editor/lib/components/widgets/RadioBlocks'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Dropdown: applyPureReactInVue(Dropdown),
+    NumericInput: applyPureReactInVue(NumericInput),
+    RadioBlocks: applyPureReactInVue(RadioBlocks),
+    Field: applyPureReactInVue(Field)
+  },
+  props: {
+    modelValue: Object,
+    keyOptions: Array
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      nodeSizeTypeOptions: markRaw([
+        { label: 'Constant', value: 'constant' },
+        { label: 'Variable', value: 'variable' },
+        { label: 'Calculated', value: 'calculated' }
+      ]),
+      nodeCalculatedSizeMethodOptions: markRaw([
+        { label: 'Degree', value: 'degree' },
+        { label: 'In degree', value: 'inDegree' },
+        { label: 'Out degree', value: 'outDegree' }
+      ]),
+      nodeSizeModeOptions: markRaw([
+        { label: 'Area', value: 'area' },
+        { label: 'Diameter', value: 'diameter' }
+      ]),
+      defaultSizeSettings: {
+        constant: { value: 4 },
+        variable: { source: null, scale: 1, mode: 'diameter', min: 1 },
+        calculated: { method: 'degree', scale: 1, mode: 'diameter', min: 1 }
+      }
+    }
+  },
+  methods: {
+    updateSizeType(newSizeType) {
+      const currentSizeType = this.modelValue.type
+      this.defaultSizeSettings[currentSizeType] = this.modelValue
+
+      this.$emit('update:modelValue', {
+        type: newSizeType,
+        ...this.defaultSizeSettings[newSizeType]
+      })
+    },
+    updateSettings(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/RandomLayoutSettings.vue

@@ -0,0 +1,34 @@
+<template>
+  <Field label="Seed value" fieldContainerClassName="test_seed_value">
+    <NumericInput
+      :value="modelValue.seedValue"
+      @update="update('seedValue', $event)"
+    />
+  </Field>
+</template>
+
+<script>
+import { applyPureReactInVue } from 'veaury'
+import Field from 'react-chart-editor/lib/components/fields/Field'
+import NumericInput from 'react-chart-editor/lib/components/widgets/NumericInput'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    NumericInput: applyPureReactInVue(NumericInput)
+  },
+  props: {
+    modelValue: Object
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    update(attributeName, value) {
+      this.$emit('update:modelValue', {
+        ...this.modelValue,
+        [attributeName]: value
+      })
+    }
+  }
+}
+</script>

src/components/Graph/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div ref="graphContainer" class="graph-container">
+    <div v-show="!dataSources" class="warning data-view-warning no-data">
+      There is no data to build a graph. Run your SQL query and make sure the
+      result is not empty.
+    </div>
+    <div
+      v-show="!dataSourceIsValid"
+      class="warning data-view-warning invalid-data"
+    >
+      Result set is invalid for graph visualisation. Learn more in
+      <a href="https://sqliteviz.com/docs/graph/" target="_blank">
+        documentation</a
+      >.
+    </div>
+    <splitpanes
+      :before="{ size: 70, max: 100 }"
+      :after="{ size: 30, max: 50, hidden: !showValueViewer }"
+      :default="{ before: 70, after: 30 }"
+      class="graph"
+      :style="{
+        height:
+          !dataSources || !dataSourceIsValid ? 'calc(100% - 40px)' : '100%'
+      }"
+    >
+      <template #left-pane>
+        <div ref="graphEditorContainer" :style="{ height: '100%' }">
+          <GraphEditor
+            ref="graphEditor"
+            :dataSources="dataSources"
+            :initOptions="initOptions"
+            :showViewSettings="showViewSettings"
+            @update="$emit('update')"
+            @select-item="selectedItem = $event"
+            @clear-selection="selectedItem = null"
+          />
+        </div>
+      </template>
+      <template v-if="showValueViewer" #right-pane>
+        <value-viewer
+          :empty="!selectedItem"
+          emptyMessage="No node or edge selected to view"
+          :value="JSON.stringify(selectedItem)"
+          defaultFormat="json"
+        />
+      </template>
+    </splitpanes>
+  </div>
+</template>
+
+<script>
+import 'react-chart-editor/lib/react-chart-editor.css'
+import GraphEditor from '@/components/Graph/GraphEditor.vue'
+import { dataSourceIsValid } from '@/lib/graphHelper'
+import ValueViewer from '@/components/ValueViewer.vue'
+import Splitpanes from '@/components/Common/Splitpanes'
+
+export default {
+  name: 'Graph',
+  components: { GraphEditor, ValueViewer, Splitpanes },
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    exportToPngEnabled: Boolean,
+    exportToSvgEnabled: Boolean,
+    exportToHtmlEnabled: Boolean,
+    showViewSettings: Boolean,
+    showValueViewer: Boolean
+  },
+  emits: [
+    'update:exportToSvgEnabled',
+    'update:exportToHtmlEnabled',
+    'update:exportToPngEnabled',
+    'update:exportToClipboardEnabled',
+    'update',
+    'loadingImageCompleted'
+  ],
+  data() {
+    return {
+      resizeObserver: null,
+      selectedItem: null
+    }
+  },
+  computed: {
+    dataSourceIsValid() {
+      return !this.dataSources || dataSourceIsValid(this.dataSources)
+    }
+  },
+  watch: {
+    async showViewSettings() {
+      await this.$nextTick()
+      this.handleResize()
+    },
+    dataSources() {
+      this.$emit('update:exportToPngEnabled', !!this.dataSources)
+      this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
+    }
+  },
+  created() {
+    this.$emit('update:exportToSvgEnabled', false)
+    this.$emit('update:exportToHtmlEnabled', false)
+    this.$emit('update:exportToPngEnabled', !!this.dataSources)
+    this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.graphEditorContainer)
+  },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.graphEditorContainer)
+  },
+  methods: {
+    getOptionsForSave() {
+      return this.$refs.graphEditor.settings
+    },
+    async saveAsPng() {
+      await this.$refs.graphEditor.saveAsPng()
+      this.$emit('loadingImageCompleted')
+    },
+    prepareCopy() {
+      return this.$refs.graphEditor.prepareCopy()
+    },
+    async handleResize() {
+      const renderer = this.$refs.graphEditor?.renderer
+      if (renderer) {
+        renderer.refresh()
+        renderer.getCamera().animatedReset({ duration: 600 })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.graph-container {
+  height: 100%;
+}
+
+.graph {
+  min-height: 242px;
+}
+
+:deep(.editor_controls .sidebar__item:before) {
+  width: 0;
+}
+</style>

src/components/LoadingDialog.vue

@@ -1,83 +0,0 @@
-<template>
-  <modal
-    :name="name"
-    classes="dialog"
-    height="auto"
-    :clickToClose="false"
-  >
-    <div class="dialog-header">
-      {{ title }}
-      <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"/>
-        {{ loadingMsg }}
-      </div>
-      <div v-else class="loading-dialog-body">
-        <img :src="require('@/assets/images/success.svg')" class="success-icon state-icon" />
-        {{ successMsg }}
-      </div>
-    </div>
-    <div class="dialog-buttons-container">
-      <button
-        class="secondary"
-        :disabled="loading"
-        @click="$emit('cancel')"
-      >
-        Cancel
-      </button>
-      <button
-        class="primary"
-        :disabled="loading"
-        @click="$emit('action')"
-      >
-        {{ actionBtnName }}
-      </button>
-    </div>
-  </modal>
-</template>
-
-<script>
-import LoadingIndicator from '@/components/LoadingIndicator'
-import CloseIcon from '@/components/svg/close'
-
-export default {
-  name: 'loadingDialog',
-  props: {
-    loadingMsg: String,
-    successMsg: String,
-    actionBtnName: String,
-    name: String,
-    title: String,
-    loading: Boolean
-  },
-  watch: {
-    loading () {
-      if (this.loading) {
-        this.$modal.show(this.name)
-      }
-    }
-  },
-  components: { LoadingIndicator, CloseIcon },
-  methods: {
-    cancel () {
-      this.$emit('cancel')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.loading-dialog-body {
-  display: flex;
-  align-items: center;
-}
-.success-icon {
-  width: 30px;
-}
-
-.state-icon {
-  margin-right: 8px;
-}
-</style>

src/components/MainMenu.vue

@@ -0,0 +1,326 @@
+<template>
+  <nav>
+    <div id="nav-links">
+      <a href="https://sqliteviz.com">
+        <img src="~@/assets/images/logo_simple.svg" />
+      </a>
+      <router-link to="/workspace">Workspace</router-link>
+      <router-link to="/inquiries">Inquiries</router-link>
+      <a href="https://sqliteviz.com/docs" target="_blank">Help</a>
+    </div>
+    <div id="nav-buttons">
+      <button
+        v-show="currentInquiryTab && $route.path === '/workspace'"
+        id="save-btn"
+        class="primary"
+        :disabled="isSaved"
+        @click="onSave(false)"
+      >
+        Save
+      </button>
+      <button
+        v-show="currentInquiryTab && $route.path === '/workspace'"
+        id="save-as-btn"
+        class="primary"
+        @click="onSaveAs"
+      >
+        Save as
+      </button>
+      <button id="create-btn" class="primary" @click="createNewInquiry">
+        Create
+      </button>
+      <app-diagnostic-info />
+    </div>
+
+    <!--Save Inquiry dialog  -->
+    <modal modalId="save" class="dialog" contentStyle="width: 560px;">
+      <div class="dialog-header">
+        Save inquiry
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @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.
+        </div>
+        <text-field
+          v-model="name"
+          label="Inquiry name"
+          :errorMsg="errorMsg"
+          width="100%"
+        />
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="cancelSave">Cancel</button>
+        <button class="primary" @click="validateSaveFormAndSaveInquiry">
+          Save
+        </button>
+      </div>
+    </modal>
+
+    <!-- Inquiery saving conflict dialog -->
+    <modal
+      modalId="inquiry-conflict"
+      class="dialog"
+      contentStyle="width: 560px;"
+    >
+      <div class="dialog-header">
+        Inquiry saving conflict
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @click="cancelSave"
+        />
+      </div>
+      <div class="dialog-body">
+        <div id="save-note">
+          <img src="~@/assets/images/info.svg" />
+          This inquiry has been modified in the mean time. This can happen if an
+          inquiry is saved in another window or browser tab. Do you want to
+          overwrite that changes or save the current state as a new inquiry?
+        </div>
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="cancelSave">Cancel</button>
+        <button class="primary" @click="onSave(true)">Overwrite</button>
+        <button class="primary" @click="onSaveAs">Save as new</button>
+      </div>
+    </modal>
+  </nav>
+</template>
+
+<script>
+import TextField from '@/components/Common/TextField'
+import IconButton from '@/components/Common/IconButton.vue'
+import storedInquiries from '@/lib/storedInquiries'
+import AppDiagnosticInfo from './AppDiagnosticInfo'
+import events from '@/lib/utils/events'
+import eventBus from '@/lib/eventBus'
+
+export default {
+  name: 'MainMenu',
+  components: {
+    TextField,
+    IconButton,
+    AppDiagnosticInfo
+  },
+  data() {
+    return {
+      name: '',
+      errorMsg: null
+    }
+  },
+  computed: {
+    inquiries() {
+      return this.$store.state.inquiries
+    },
+    currentInquiryTab() {
+      return this.$store.state.currentTab
+    },
+    isSaved() {
+      return this.currentInquiryTab && this.currentInquiryTab.isSaved
+    },
+    isPredefined() {
+      return this.currentInquiryTab && this.currentInquiryTab.isPredefined
+    },
+    runDisabled() {
+      return (
+        this.currentInquiryTab &&
+        (!this.$store.state.db || !this.currentInquiryTab.query)
+      )
+    }
+  },
+  created() {
+    eventBus.$on('createNewInquiry', this.createNewInquiry)
+    eventBus.$on('saveInquiry', this.onSave)
+    document.addEventListener('keydown', this._keyListener)
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this._keyListener)
+  },
+  methods: {
+    createNewInquiry() {
+      this.$store.dispatch('addTab').then(id => {
+        this.$store.commit('setCurrentTabId', id)
+        if (this.$route.path !== '/workspace') {
+          this.$router.push('/workspace')
+        }
+      })
+
+      events.send('inquiry.create', null, { auto: false })
+    },
+    cancelSave() {
+      this.errorMsg = null
+      this.name = ''
+      this.$modal.hide('save')
+      this.$modal.hide('inquiry-conflict')
+      eventBus.$off('inquirySaved')
+    },
+    onSave(skipConcurrentEditingCheck = false) {
+      if (storedInquiries.isTabNeedName(this.currentInquiryTab)) {
+        this.openSaveModal()
+        return
+      }
+
+      if (!skipConcurrentEditingCheck) {
+        const inquiryInStore = this.inquiries.find(
+          inquiry => inquiry.id === this.currentInquiryTab.id
+        )
+
+        if (
+          inquiryInStore &&
+          inquiryInStore.updatedAt !== this.currentInquiryTab.updatedAt
+        ) {
+          this.$modal.show('inquiry-conflict')
+          return
+        }
+      }
+      this.saveInquiry()
+    },
+    onSaveAs() {
+      this.openSaveModal()
+    },
+    openSaveModal() {
+      this.$modal.hide('inquiry-conflict')
+      this.errorMsg = null
+      this.name = ''
+      this.$modal.show('save')
+    },
+    validateSaveFormAndSaveInquiry() {
+      if (!this.name) {
+        this.errorMsg = "Inquiry name can't be empty"
+        return
+      }
+      this.saveInquiry()
+    },
+    async saveInquiry() {
+      const eventName =
+        this.currentInquiryTab.name && this.name
+          ? 'inquiry.saveAs'
+          : 'inquiry.save'
+
+      // Save inquiry
+      const value = await this.$store.dispatch('saveInquiry', {
+        inquiryTab: this.currentInquiryTab,
+        newName: this.name
+      })
+
+      // Update tab in store
+      this.$store.commit('updateTab', {
+        tab: this.currentInquiryTab,
+        newValues: {
+          name: value.name,
+          id: value.id,
+          query: value.query,
+          viewType: value.viewType,
+          viewOptions: value.viewOptions,
+          isSaved: true,
+          updatedAt: value.updatedAt
+        }
+      })
+
+      // Hide dialogs
+      this.$modal.hide('save')
+      this.$modal.hide('inquiry-conflict')
+      this.errorMsg = null
+      this.name = ''
+
+      // Signal about saving
+      eventBus.$emit('inquirySaved')
+      events.send(eventName)
+    },
+    _keyListener(e) {
+      if (this.$route.path === '/workspace' && this.currentInquiryTab) {
+        // Run query Ctrl+R or Ctrl+Enter
+        if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
+          e.preventDefault()
+          if (!this.runDisabled) {
+            this.currentInquiryTab.execute()
+          }
+          return
+        }
+
+        // Save inquiry Ctrl+S
+        if (e.key === 's' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+          e.preventDefault()
+          if (!this.isSaved) {
+            this.onSave()
+          }
+          return
+        }
+        // Save inquiry as Ctrl+Shift+S
+        if (e.key === 'S' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+          e.preventDefault()
+          this.onSaveAs()
+          return
+        }
+      }
+      // New (blank) inquiry Ctrl+B
+      if (e.key === 'b' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault()
+        this.createNewInquiry()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+nav {
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-bg-light);
+  border-bottom: 1px solid var(--color-border-light);
+  box-shadow: var(--shadow-1);
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  padding: 0 16px 0 52px;
+  z-index: 999;
+}
+a {
+  font-size: 18px;
+  color: var(--color-text-base);
+  text-transform: none;
+  text-decoration: none;
+  margin-right: 28px;
+}
+a.router-link-active {
+  color: var(--color-accent);
+}
+button {
+  margin-left: 16px;
+}
+
+#save-note {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+}
+#save-note img {
+  margin: -3px 6px 0 0;
+}
+
+#nav-buttons {
+  display: flex;
+}
+
+#nav-links {
+  display: flex;
+  align-items: center;
+}
+#nav-links img {
+  width: 32px;
+}
+</style>

src/components/Pivot/PivotUi/PivotSortBtn.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="['pivot-sort-btn', direction]" @click="changeSorting">
+    {{ modelValue.includes('key') ? 'key' : 'value' }}
+    <i
+      :class="[
+        'myicon myicon-sort sort-icon',
+        { vertical: direction === 'row' },
+        { asc: modelValue.includes('a_to_z') }
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PivotSortBtn',
+  props: {
+    direction: String,
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    changeSorting() {
+      if (this.modelValue === 'key_a_to_z') {
+        this.$emit('update:modelValue', 'value_a_to_z')
+      } else if (this.modelValue === 'value_a_to_z') {
+        this.$emit('update:modelValue', 'value_z_to_a')
+      } else {
+        this.$emit('update:modelValue', 'key_a_to_z')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pivot-sort-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 43px;
+  height: 27px;
+  background-color: var(--color-bg-light-4);
+  border-radius: var(--border-radius-medium-2);
+  border: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--color-text-base);
+  line-height: 8px;
+  box-sizing: border-box;
+}
+.pivot-sort-btn:hover {
+  color: var(--color-text-active);
+  border-color: var(--color-border-dark);
+}
+
+.pivot-sort-btn.col {
+  flex-direction: column;
+  padding-top: 5px;
+}
+
+.pivot-sort-btn.row {
+  flex-direction: row;
+}
+
+.sort-icon {
+  font-size: 12px;
+}
+.sort-icon.asc {
+  transform: rotate(180deg);
+}
+.sort-icon.vertical {
+  transform: rotate(90deg);
+  margin-right: -3px;
+  margin-left: -1px;
+}
+
+.sort-icon.vertical.asc {
+  transform: rotate(-90deg);
+}
+</style>

src/components/Pivot/PivotUi/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="pivot-ui">
+    <div class="row">
+      <label>Columns</label>
+      <multiselect
+        v-model="cols"
+        class="sqliteviz-select cols"
+        :options="colsToSelect"
+        :disabled="colsToSelect.length === 0"
+        :multiple="true"
+        :hideSelected="true"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :max="colsToSelect.length"
+        openDirection="bottom"
+        placeholder=""
+      >
+        <template #maxElements>
+          <span class="no-results">No Results</span>
+        </template>
+
+        <template #placeholder>Choose columns</template>
+
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+      <pivot-sort-btn v-model="colOrder" class="sort-btn" direction="col" />
+    </div>
+
+    <div class="row">
+      <label>Rows</label>
+      <multiselect
+        v-model="rows"
+        class="sqliteviz-select rows"
+        :options="rowsToSelect"
+        :disabled="rowsToSelect.length === 0"
+        :multiple="true"
+        :hideSelected="true"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :max="rowsToSelect.length"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder=""
+      >
+        <template #maxElements>
+          <span class="no-results">No Results</span>
+        </template>
+
+        <template #placeholder>Choose rows</template>
+
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+      <pivot-sort-btn v-model="rowOrder" class="sort-btn" direction="row" />
+    </div>
+
+    <div class="row aggregator">
+      <label>Aggregator</label>
+      <multiselect
+        v-model="aggregator"
+        class="sqliteviz-select short aggregator"
+        :options="aggregators"
+        label="name"
+        trackBy="name"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a function"
+      >
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+
+      <multiselect
+        v-show="valCount > 0"
+        v-model="val1"
+        class="sqliteviz-select aggr-arg"
+        :options="keyNames"
+        :disabled="keyNames.length === 0"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose an argument"
+      />
+
+      <multiselect
+        v-show="valCount > 1"
+        v-model="val2"
+        class="sqliteviz-select aggr-arg"
+        :options="keyNames"
+        :disabled="keyNames.length === 0"
+        :closeOnSelect="true"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a second argument"
+      />
+    </div>
+
+    <div class="row">
+      <label>View</label>
+      <multiselect
+        v-model="renderer"
+        class="sqliteviz-select short renderer"
+        :options="renderers"
+        label="name"
+        trackBy="name"
+        :closeOnSelect="true"
+        :allowEmpty="false"
+        :showLabels="false"
+        :hideSelected="true"
+        :optionHeight="29"
+        openDirection="bottom"
+        placeholder="Choose a view"
+      >
+        <template #noResult>
+          <span class="no-results">No Results</span>
+        </template>
+      </multiselect>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+import Multiselect from 'vue-multiselect'
+import PivotSortBtn from './PivotSortBtn'
+import {
+  renderers,
+  aggregators,
+  zeroValAggregators,
+  twoValAggregators
+} from '../pivotHelper'
+
+export default {
+  name: 'PivotUi',
+  components: {
+    Multiselect,
+    PivotSortBtn
+  },
+  props: {
+    keyNames: Array,
+    modelValue: Object
+  },
+  emits: ['update:modelValue', 'update'],
+  data() {
+    const aggregatorName =
+      (this.modelValue && this.modelValue.aggregatorName) || 'Count'
+    const rendererName =
+      (this.modelValue && this.modelValue.rendererName) || 'Table'
+    return {
+      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]) ||
+        '',
+      colOrder: (this.modelValue && this.modelValue.colOrder) || 'key_a_to_z',
+      rowOrder: (this.modelValue && this.modelValue.rowOrder) || 'key_a_to_z'
+    }
+  },
+  computed: {
+    valCount() {
+      if (zeroValAggregators.includes(this.aggregator.name)) {
+        return 0
+      }
+
+      if (twoValAggregators.includes(this.aggregator.name)) {
+        return 2
+      }
+
+      return 1
+    },
+    renderers() {
+      return renderers
+    },
+    aggregators() {
+      return aggregators
+    },
+    rowsToSelect() {
+      return this.keyNames.filter(key => !this.cols.includes(key))
+    },
+    colsToSelect() {
+      return this.keyNames.filter(key => !this.rows.includes(key))
+    }
+  },
+  watch: {
+    renderer() {
+      this.returnValue()
+    },
+    aggregator() {
+      this.returnValue()
+    },
+    rows() {
+      this.returnValue()
+    },
+    cols() {
+      this.returnValue()
+    },
+    val1() {
+      this.returnValue()
+    },
+    val2() {
+      this.returnValue()
+    },
+    colOrder() {
+      this.returnValue()
+    },
+    rowOrder() {
+      this.returnValue()
+    }
+  },
+  methods: {
+    returnValue() {
+      const vals = []
+      for (let i = 1; i <= this.valCount; i++) {
+        vals.push(this[`val${i}`])
+      }
+      this.$emit('update')
+      this.$emit('update:modelValue', {
+        rows: this.rows,
+        cols: this.cols,
+        colOrder: this.colOrder,
+        rowOrder: this.rowOrder,
+        aggregator: this.aggregator.fun(vals),
+        aggregatorName: this.aggregator.name,
+        renderer: this.renderer.fun,
+        rendererName: this.renderer.name,
+        vals
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.pivot-ui {
+  padding: 12px 24px;
+  color: var(--color-text-base);
+  font-size: 12px;
+  border-bottom: 1px solid var(--color-border-light);
+  background-color: var(--color-bg-light);
+}
+
+.pivot-ui .row {
+  display: flex;
+  align-items: center;
+  margin: 12px 0;
+}
+
+.pivot-ui .row label {
+  width: 76px;
+  flex-shrink: 0;
+}
+
+.pivot-ui .row .sqliteviz-select.short {
+  width: 220px;
+  flex-shrink: 0;
+}
+
+.pivot-ui .row .aggr-arg {
+  margin-left: 12px;
+  max-width: 220px;
+}
+
+.pivot-ui .row .sort-btn {
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.switcher {
+  display: block;
+  width: min-content;
+  white-space: nowrap;
+  margin: auto;
+  cursor: pointer;
+}
+
+.switcher:hover {
+  color: var(--color-accent);
+}
+</style>

src/components/Pivot/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="pivot-container">
+    <div v-show="!dataSources" class="warning pivot-warning">
+      There is no data to build a pivot. Run your SQL query and make sure the
+      result is not empty.
+    </div>
+    <pivot-ui
+      v-show="showViewSettings"
+      v-model="pivotOptions"
+      :keyNames="columns"
+      @update="$emit('update')"
+    />
+    <div ref="pivotOutput" class="pivot-output" />
+    <div
+      v-show="viewCustomChart"
+      ref="customChartOutput"
+      class="custom-chart-output"
+    >
+      <chart
+        ref="customChart"
+        v-bind="customChartComponentProps"
+        :showViewSettings="showViewSettings"
+        @update="$emit('update')"
+        @loading-image-completed="$emit('loadingImageCompleted')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import fIo from '@/lib/utils/fileIo'
+import $ from 'jquery'
+import 'pivottable'
+import 'pivottable/dist/pivot.css'
+import PivotUi from './PivotUi/index.vue'
+import pivotHelper from './pivotHelper'
+import Chart from '@/components/Chart'
+import chartHelper from '@/lib/chartHelper'
+import events from '@/lib/utils/events'
+import plotly from 'plotly.js'
+
+export default {
+  name: 'Pivot',
+  components: {
+    PivotUi,
+    Chart
+  },
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    exportToPngEnabled: Boolean,
+    exportToSvgEnabled: Boolean,
+    showViewSettings: Boolean
+  },
+  emits: [
+    'loadingImageCompleted',
+    'update',
+    'update:exportToSvgEnabled',
+    'update:exportToPngEnabled',
+    'update:exportToHtmlEnabled'
+  ],
+  data() {
+    return {
+      resizeObserver: null,
+      pivotOptions: !this.initOptions
+        ? {
+            rows: [],
+            cols: [],
+            colOrder: 'key_a_to_z',
+            rowOrder: 'key_a_to_z',
+            aggregatorName: 'Count',
+            aggregator: $.pivotUtilities.aggregators.Count(),
+            vals: [],
+            rendererName: 'Table',
+            renderer: $.pivotUtilities.renderers.Table
+          }
+        : {
+            rows: this.initOptions.rows,
+            cols: this.initOptions.cols,
+            colOrder: this.initOptions.colOrder,
+            rowOrder: this.initOptions.rowOrder,
+            aggregatorName: this.initOptions.aggregatorName,
+            aggregator: $.pivotUtilities.aggregators[
+              this.initOptions.aggregatorName
+            ](this.initOptions.vals),
+            vals: this.initOptions.vals,
+            rendererName: this.initOptions.rendererName,
+            renderer: $.pivotUtilities.renderers[this.initOptions.rendererName]
+          },
+      customChartComponentProps: {
+        initOptions: this.initOptions?.rendererOptions?.customChartOptions,
+        forPivot: true
+      }
+    }
+  },
+  computed: {
+    columns() {
+      return Object.keys(this.dataSources || {})
+    },
+
+    viewStandartChart() {
+      return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers
+    },
+
+    viewCustomChart() {
+      return this.pivotOptions.rendererName === 'Custom chart'
+    }
+  },
+  watch: {
+    dataSources() {
+      this.show()
+    },
+    'pivotOptions.rendererName': {
+      immediate: true,
+      handler() {
+        this.$emit(
+          'update:exportToPngEnabled',
+          this.pivotOptions.rendererName !== 'TSV Export'
+        )
+        this.$emit(
+          'update:exportToSvgEnabled',
+          this.viewStandartChart || this.viewCustomChart
+        )
+        events.send('viz_pivot.render', null, {
+          type: this.pivotOptions.rendererName
+        })
+      }
+    },
+    pivotOptions() {
+      this.show()
+    },
+    showViewSettings() {
+      this.handleResize()
+    }
+  },
+  created() {
+    this.$emit('update:exportToHtmlEnabled', true)
+  },
+  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.pivotOutput)
+  },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.pivotOutput)
+  },
+  methods: {
+    handleResize() {
+      // hack: plotly changes size only on window.resize event,
+      // so, we resize it manually when container resizes (e.g. when move splitter)
+      if (this.viewStandartChart) {
+        plotly.Plots.resize(
+          this.$refs.pivotOutput.querySelector('.js-plotly-plot')
+        )
+      }
+    },
+
+    show() {
+      const options = { ...this.pivotOptions }
+      if (this.viewStandartChart) {
+        options.rendererOptions = {
+          plotly: {
+            autosize: true,
+            width: null,
+            height: null
+          },
+          plotlyConfig: {
+            displaylogo: false,
+            responsive: true,
+            modeBarButtonsToRemove: ['toImage']
+          }
+        }
+      }
+
+      if (this.viewCustomChart) {
+        options.rendererOptions = {
+          getCustomComponentsProps: () => this.customChartComponentProps
+        }
+      }
+
+      $(this.$refs.pivotOutput).pivot(
+        function (callback) {
+          const rowCount = !this.dataSources
+            ? 0
+            : this.dataSources[this.columns[0]].length
+          for (let i = 1; i <= rowCount; i++) {
+            const row = {}
+            this.columns.forEach(col => {
+              row[col] = this.dataSources[col][i - 1]
+            })
+            callback(row)
+          }
+        }.bind(this),
+        options
+      )
+
+      // fix for Firefox: fit plotly renderers just after choosing it in pivotUi
+      this.handleResize()
+    },
+
+    getOptionsForSave() {
+      const options = { ...this.pivotOptions }
+      if (this.viewCustomChart) {
+        const chartComponent = this.$refs.customChart
+        options.rendererOptions = {
+          customChartOptions: chartComponent.getOptionsForSave()
+        }
+      }
+      return options
+    },
+
+    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')
+
+        this.$emit('loadingImageCompleted')
+        fIo.downloadFromUrl(source, 'pivot')
+      }
+    },
+
+    async prepareCopy() {
+      if (this.viewCustomChart) {
+        return this.$refs.customChart.prepareCopy()
+      }
+      if (this.viewStandartChart) {
+        return chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
+      }
+      return pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
+    },
+
+    async saveAsSvg() {
+      if (this.viewCustomChart) {
+        this.$refs.customChart.saveAsSvg()
+      } else if (this.viewStandartChart) {
+        const url = await chartHelper.getImageDataUrl(
+          this.$refs.pivotOutput,
+          'svg'
+        )
+        fIo.downloadFromUrl(url, 'pivot')
+      }
+    },
+
+    saveAsHtml() {
+      if (this.viewCustomChart) {
+        this.$refs.customChart.saveAsHtml()
+        return
+      }
+
+      if (this.viewStandartChart) {
+        const chartState = chartHelper.getChartData(this.$refs.pivotOutput)
+        fIo.exportToFile(
+          chartHelper.getHtml(chartState),
+          'chart.html',
+          'text/html'
+        )
+        return
+      }
+      fIo.exportToFile(
+        pivotHelper.getPivotHtml(this.$refs.pivotOutput),
+        'pivot.html',
+        'text/html'
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pivot-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+}
+
+.pivot-output,
+.custom-chart-output {
+  flex-grow: 1;
+  width: 100%;
+  overflow: auto;
+}
+
+.pivot-warning {
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+}
+:deep(.pvtTable) {
+  min-width: 100%;
+}
+
+:deep(table.pvtTable tbody tr td),
+:deep(table.pvtTable thead tr th),
+:deep(table.pvtTable tbody tr th) {
+  border-color: var(--color-border-light);
+}
+:deep(table.pvtTable thead tr th),
+:deep(table.pvtTable tbody tr th) {
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-light);
+}
+
+:deep(table.pvtTable tbody tr td) {
+  color: var(--color-text-base);
+}
+
+.pivot-output :deep(textarea) {
+  color: var(--color-text-base);
+  min-width: 100%;
+  height: 100% !important;
+  display: block;
+  box-sizing: border-box;
+  border-width: 0;
+}
+
+.pivot-output :deep(textarea:focus-visible) {
+  outline: none;
+}
+.pivot-output:empty {
+  flex-grow: 0;
+}
+
+:deep(.js-plotly-plot) {
+  height: 100%;
+}
+</style>

src/components/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,13 +49,10 @@ export function _getDataSources (pivotData) {
   return Object.assign(dataSources, dataSourcesByCols, dataSourcesByRows)
 }
 
-function customChartRenderer (data, options) {
-  options.customChartComponent.dataSources = _getDataSources(data)
-  options.customChartComponent.forPivot = true
-
-  options.customChartComponent.$mount()
-
-  return $(options.customChartComponent.$el)
+function customChartRenderer(data, options) {
+  const propsRef = options.getCustomComponentsProps()
+  propsRef.dataSources = _getDataSources(data)
+  return null
 }
 
 $.extend(
@@ -72,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 {

src/components/RunResult/Record/RowNavigator.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="record-navigator">
+    <icon-button
+      icon="myicon myicon-edge-arrow"
+      iconColor="var(--color-text-base)"
+      :disabled="modelValue === 0"
+      tooltip="First row"
+      tooltipPosition="top-left"
+      class="first"
+      @click="$emit('update:modelValue', 0)"
+    />
+    <icon-button
+      icon="myicon myicon-arrow"
+      iconColor="var(--color-text-base)"
+      :disabled="modelValue === 0"
+      tooltip="Previous row"
+      tooltipPosition="top-left"
+      class="prev"
+      @click="$emit('update:modelValue', modelValue - 1)"
+    />
+    <icon-button
+      icon="myicon myicon-arrow"
+      iconColor="var(--color-text-base)"
+      :disabled="modelValue === total - 1"
+      tooltip="Next row"
+      tooltipPosition="top-left"
+      class="next"
+      @click="$emit('update:modelValue', modelValue + 1)"
+    />
+    <icon-button
+      icon="myicon myicon-edge-arrow"
+      iconColor="var(--color-text-base)"
+      :disabled="modelValue === total - 1"
+      tooltip="Last row"
+      tooltipPosition="top-left"
+      class="last"
+      @click="$emit('update:modelValue', total - 1)"
+    />
+  </div>
+</template>
+
+<script>
+import IconButton from '@/components/Common/IconButton'
+
+export default {
+  components: {
+    IconButton
+  },
+  props: {
+    modelValue: Number,
+    total: Number
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style scoped>
+.record-navigator {
+  display: flex;
+}
+
+.record-navigator .next :deep(i),
+.record-navigator .last :deep(i) {
+  transform: rotate(180deg);
+}
+</style>

src/components/RunResult/Record/index.vue

@@ -9,23 +9,23 @@
       >
         <thead>
           <tr>
-            <th/>
+            <th />
             <th>
-              <div class="cell-data">
-                Row #{{ currentRowIndex + 1 }}
-              </div>
+              <div class="cell-data">Row #{{ currentRowIndex + 1 }}</div>
             </th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(col, index) in columns" :key="index">
-            <th class="column-cell">{{ col }}</th>
+            <th class="column-cell" :title="col">
+              {{ col }}
+            </th>
             <td
+              :key="index"
               :data-col="index"
               :data-row="currentRowIndex"
               :data-isNull="isNull(getCellValue(col))"
               :data-isBlob="isBlob(getCellValue(col))"
-              :key="index"
               :aria-selected="false"
               @click="onCellClick"
             >
@@ -39,17 +39,18 @@
     </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>
 
 <script>
 import RowNavigator from './RowNavigator.vue'
+import { nextTick } from 'vue'
 
 export default {
   components: { RowNavigator },
@@ -59,32 +60,24 @@ export default {
     rowIndex: { type: Number, default: 0 },
     selectedColumnIndex: Number
   },
-  data () {
+  emits: ['updateSelectedCell'],
+  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 () {
-    const col = this.selectedColumnIndex
-    const row = this.currentRowIndex
-    const cell = this.$refs.table
-      .querySelector(`td[data-col="${col}"][data-row="${row}"]`)
-    if (cell) {
-      this.selectCell(cell)
-    }
-  },
   watch: {
-    async currentRowIndex () {
-      await this.$nextTick()
+    async currentRowIndex() {
+      await nextTick()
       if (this.selectedCellElement) {
         const previouslySelected = this.selectedCellElement
         this.selectCell(null)
@@ -92,17 +85,27 @@ export default {
       }
     }
   },
+  mounted() {
+    const col = this.selectedColumnIndex
+    const row = this.currentRowIndex
+    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) {
+    getCellValue(col) {
       return this.dataSet.values[col][this.currentRowIndex]
     },
-    getCellText (col) {
+    getCellText(col) {
       const value = this.getCellValue(col)
       if (this.isNull(value)) {
         return 'NULL'
@@ -112,7 +115,7 @@ export default {
       }
       return value
     },
-    onTableKeydown (e) {
+    onTableKeydown(e) {
       const keyCodeMap = {
         38: 'up',
         40: 'down'
@@ -128,10 +131,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'
@@ -150,19 +153,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)
       }
@@ -178,7 +183,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);
 }
 
@@ -187,6 +192,7 @@ table.sqliteviz-table {
 }
 .sqliteviz-table thead tr th {
   border-bottom: 1px solid var(--color-border-light);
+  text-align: left;
 }
 .sqliteviz-table tbody tr th {
   font-size: 14px;
@@ -217,5 +223,6 @@ table.sqliteviz-table {
 
 .column-cell {
   max-width: 150px;
+  width: 0;
 }
 </style>

src/components/RunResult/index.vue

@@ -1,157 +1,156 @@
 <template>
-  <div class="run-result-panel" ref="runResultPanel">
-   <component
-      :is="viewValuePanelVisible ? 'splitpanes':'div'"
+  <div ref="runResultPanel" class="run-result-panel">
+    <splitpanes
       :before="{ size: 50, max: 100 }"
-      :after="{ size: 50, max: 100 }"
+      :after="{ size: 50, max: 100, hidden: !viewValuePanelVisible }"
       :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>
-      <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]
-              : ''"
-          />
-          <div v-show="!selectedCell" class="table-preview">
-            No cell selected to view
+      <template #left-pane>
+        <div class="result-set-container">
+          <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"
+            :selectedCellCoordinates="defaultSelectedCell"
+            class="straight"
+            @update-selected-cell="onUpdateSelectedCell"
+          />
+
+          <record
+            v-if="result && viewRecord"
+            ref="recordView"
+            :data-set="result"
+            :time="time"
+            :selectedColumnIndex="selectedCell ? +selectedCell.dataset.col : 0"
+            :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
+            @update-selected-cell="onUpdateSelectedCell"
+          />
         </div>
       </template>
-    </component>
+      <template v-if="viewValuePanelVisible" #right-pane>
+        <value-viewer
+          :empty="!selectedCell"
+          emptyMessage="No cell selected to view"
+          :value="
+            selectedCell
+              ? result.values[result.columns[selectedCell.dataset.col]][
+                  selectedCell.dataset.row
+                ]
+              : ''
+          "
+        />
+      </template>
+    </splitpanes>
 
-    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
+    <side-tool-bar panel="table" @switch-to="$emit('switchTo', $event)">
       <icon-button
+        icon="myicon myicon-export-to-csv"
         :disabled="!result"
         tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="exportToCsv"
-      >
-        <export-to-csv-icon/>
-      </icon-button>
+      />
 
       <icon-button
+        ref="copyToClipboardBtn"
+        icon="myicon myicon-clipboard"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="prepareCopy"
-      >
-        <clipboard-icon/>
-      </icon-button>
+      />
 
       <icon-button
+        ref="rowBtn"
+        icon="myicon myicon-row"
         :disabled="!result"
         tooltip="View record"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewRecord"
         @click="toggleViewRecord"
-      >
-        <row-icon/>
-      </icon-button>
+      />
 
       <icon-button
+        ref="viewCellValueBtn"
+        icon="myicon myicon-view-cell-value"
         :disabled="!result"
         tooltip="View value"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
-      >
-        <view-cell-value-icon/>
-      </icon-button>
+      />
     </side-tool-bar>
 
     <loading-dialog
+      v-model="showLoadingDialog"
       loadingMsg="Building CSV..."
       successMsg="CSV is ready"
       actionBtnName="Copy"
-      name="prepareCSVCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
       @action="copyToClipboard"
       @cancel="cancelCopy"
     />
-
-    <teleport :to="resultSetTeleportTarget">
-      <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"
-            />
-
-            <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>
 
 <script>
-import Logs from '@/components/Logs'
+import Logs from '@/components/Common/Logs'
 import SqlTable from '@/components/SqlTable'
-import LoadingIndicator from '@/components/LoadingIndicator'
-import SideToolBar from '../SideToolBar'
-import Splitpanes from '@/components/Splitpanes'
-import ExportToCsvIcon from '@/components/svg/exportToCsv'
-import ClipboardIcon from '@/components/svg/clipboard'
-import ViewCellValueIcon from '@/components/svg/viewCellValue'
-import RowIcon from '@/components/svg/row'
-import IconButton from '@/components/IconButton'
+import LoadingIndicator from '@/components/Common/LoadingIndicator'
+import SideToolBar from '@/components/SideToolBar'
+import Splitpanes from '@/components/Common/Splitpanes'
+import IconButton from '@/components/Common/IconButton'
 import csv from '@/lib/csv'
 import fIo from '@/lib/utils/fileIo'
 import cIo from '@/lib/utils/clipboardIo'
 import time from '@/lib/utils/time'
-import loadingDialog from '@/components/LoadingDialog'
+import loadingDialog from '@/components/Common/LoadingDialog'
 import events from '@/lib/utils/events'
-import Teleport from 'vue2-teleport'
-import ValueViewer from './ValueViewer'
+import ValueViewer from '@/components/ValueViewer'
 import Record from './Record/index.vue'
 
 export default {
   name: 'RunResult',
+  components: {
+    SqlTable,
+    LoadingIndicator,
+    Logs,
+    SideToolBar,
+    IconButton,
+    loadingDialog,
+    ValueViewer,
+    Record,
+    Splitpanes
+  },
   props: {
-    tab: Object,
     result: Object,
     isGettingResults: Boolean,
     error: Object,
     time: [String, Number]
   },
-  data () {
+  emits: ['switchTo'],
+  data() {
     return {
       resizeObserver: null,
       pageSize: 20,
@@ -161,55 +160,37 @@ export default {
       selectedCell: null,
       viewRecord: false,
       defaultPage: 1,
-      defaultSelectedCell: null
+      defaultSelectedCell: null,
+      enableTeleport: this.$store.state.isWorkspaceVisible,
+      showLoadingDialog: false
     }
   },
-  components: {
-    SqlTable,
-    LoadingIndicator,
-    Logs,
-    SideToolBar,
-    ExportToCsvIcon,
-    IconButton,
-    ClipboardIcon,
-    ViewCellValueIcon,
-    RowIcon,
-    loadingDialog,
-    ValueViewer,
-    Record,
-    Splitpanes,
-    Teleport
-  },
-  computed: {
-    resultSetTeleportTarget () {
-      const base = `#${this.viewValuePanelVisible
-        ? 'run-result-left-pane'
-        : 'run-result-result-set'
-      }`
-      const tabIdPostfix = `-${this.tab.id}`
-      return base + tabIdPostfix
-    }
-  },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.handleResize)
-    this.resizeObserver.observe(this.$refs.runResultPanel)
-    this.calculatePageSize()
-  },
-  beforeDestroy () {
-    this.resizeObserver.unobserve(this.$refs.runResultPanel)
-  },
   watch: {
-    result () {
+    result() {
       this.defaultSelectedCell = null
       this.selectedCell = null
     }
   },
+  activated() {
+    this.enableTeleport = true
+  },
+  deactivated() {
+    this.enableTeleport = false
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.runResultPanel)
+    this.calculatePageSize()
+  },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.runResultPanel)
+  },
   methods: {
-    handleResize () {
+    handleResize() {
       this.calculatePageSize()
     },
 
-    calculatePageSize () {
+    calculatePageSize() {
       const runResultPanel = this.$refs.runResultPanel
       // 27 - table footer hight
       // 5 - padding-bottom of rounded table container
@@ -218,9 +199,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' }
         )
@@ -229,9 +211,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' }
         )
@@ -239,14 +222,13 @@ export default {
 
       if ('ClipboardItem' in window) {
         this.preparingCopy = true
-        this.$modal.show('prepareCSVCopy')
+        this.showLoadingDialog = true
         const t0 = performance.now()
 
         await time.sleep(0)
         this.dataToCopy = csv.serialize(this.result)
         const t1 = performance.now()
-        if ((t1 - t0) < 950) {
-          this.$modal.hide('prepareCSVCopy')
+        if (t1 - t0 < 950) {
           this.copyToClipboard()
         } else {
           this.preparingCopy = false
@@ -254,27 +236,26 @@ 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')
+      this.showLoadingDialog = false
     },
 
-    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,
@@ -288,7 +269,7 @@ export default {
       this.viewRecord = !this.viewRecord
     },
 
-    onUpdateSelectedCell (e) {
+    onUpdateSelectedCell(e) {
       this.selectedCell = e
     }
   }
@@ -308,19 +289,12 @@ export default {
   width: 0;
 }
 
-.result-set-container,
-.result-set-container > div {
+.result-set-container {
   position: relative;
   height: 100%;
   width: 100%;
   box-sizing: border-box;
 }
-.value-viewer-container {
-  height: 100%;
-  width: 100%;
-  background-color: var(--color-white);
-  position: relative;
-}
 
 .table-preview {
   position: absolute;
@@ -360,20 +334,4 @@ export default {
     opacity: 1;
   }
 }
-
->>>.vm--container {
-  animation: show-modal 1s linear 0s 1;
-}
-
-@keyframes show-modal {
-  0% {
-    opacity: 0;
-  }
-  99% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 </style>

src/components/Schema/TableDescription.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div @click="colVisible = !colVisible" class="table-name">
-      <tree-chevron :expanded="colVisible"/>
+    <div class="table-name" @click="colVisible = !colVisible">
+      <i :class="['myicon myicon-tree-chevron', { expanded: colVisible }]" />
       {{ name }}
     </div>
     <div v-show="colVisible" class="columns">
@@ -14,13 +14,13 @@
 </template>
 
 <script>
-import TreeChevron from '@/components/svg/treeChevron'
-
 export default {
   name: 'TableDescription',
-  components: { TreeChevron },
-  props: ['name', 'columns'],
-  data () {
+  props: {
+    name: String,
+    columns: Array
+  },
+  data() {
     return {
       colVisible: false
     }
@@ -29,7 +29,8 @@ export default {
 </script>
 
 <style scoped>
-.table-name, .column {
+.table-name,
+.column {
   margin-top: 11px;
 }
 

src/components/Schema/index.vue

@@ -1,16 +1,29 @@
 <template>
   <div id="schema-container">
     <div id="schema-filter">
-      <text-field placeholder="Search table" width="100%" v-model="filter"/>
+      <text-field v-model="filter" placeholder="Search table" width="100%" />
     </div>
     <div id="db">
-      <div @click="schemaVisible = !schemaVisible" class="db-name">
-        <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible"/>
+      <div class="db-name" @click="schemaVisible = !schemaVisible">
+        <i
+          v-show="schema.length > 0"
+          :class="['myicon myicon-tree-chevron', { expanded: schemaVisible }]"
+        />
         {{ dbName }}
       </div>
       <db-uploader id="db-edit" type="small" />
-      <export-icon tooltip="Export database" @click="exportToFile"/>
-      <add-table-icon @click="addCsvJson"/>
+      <IconButton
+        icon="myicon myicon-export"
+        tooltip="Export database"
+        data-test="export-db-btn"
+        @click="exportToFile"
+      />
+      <IconButton
+        icon="myicon myicon-add-table"
+        tooltip=" Add new table from CSV, JSON or NDJSON"
+        data-test="add-csv-json-btn"
+        @click="addCsvJson"
+      />
     </div>
     <div v-show="schemaVisible" class="schema">
       <table-description
@@ -26,7 +39,7 @@
       ref="addCsvJson"
       :file="file"
       :db="$store.state.db"
-      dialog-name="addCsvJson"
+      dialogName="addCsvJson"
     />
   </div>
 </template>
@@ -35,25 +48,21 @@
 import fIo from '@/lib/utils/fileIo'
 import events from '@/lib/utils/events'
 import TableDescription from './TableDescription'
-import TextField from '@/components/TextField'
-import TreeChevron from '@/components/svg/treeChevron'
+import TextField from '@/components/Common/TextField'
 import DbUploader from '@/components/DbUploader'
-import ExportIcon from '@/components/svg/export'
-import AddTableIcon from '@/components/svg/addTable'
 import CsvJsonImport from '@/components/CsvJsonImport'
+import IconButton from '@/components/Common/IconButton'
 
 export default {
   name: 'Schema',
   components: {
     TableDescription,
     TextField,
-    TreeChevron,
     DbUploader,
-    ExportIcon,
-    AddTableIcon,
+    IconButton,
     CsvJsonImport
   },
-  data () {
+  data() {
     return {
       schemaVisible: true,
       filter: null,
@@ -61,7 +70,7 @@ export default {
     }
   },
   computed: {
-    schema () {
+    schema() {
       if (!this.$store.state.db.schema) {
         return []
       }
@@ -69,18 +78,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 +129,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;
@@ -140,8 +151,20 @@ export default {
   flex-shrink: 0;
 }
 
-.db-name:hover .chevron-icon path,
->>> .table-name:hover .chevron-icon path {
-  fill: var(--color-gray-dark);
+.db-name:hover .myicon-tree-chevron,
+:deep(.table-name:hover .myicon-tree-chevron) {
+  color: var(--color-gray-dark);
+}
+
+:deep(.myicon-tree-chevron) {
+  color: var(--color-border-dark);
+  font-size: 9px;
+  transition: transform 0.15s ease-in-out;
+}
+
+:deep(.myicon-tree-chevron.expanded) {
+  color: var(--color-border-dark);
+  transform: rotate(90deg);
+  color: var(--color-gray-dark);
 }
 </style>

src/components/SideToolBar.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="side-tool-bar">
+    <icon-button
+      ref="sqlEditorBtn"
+      icon="myicon myicon-sql-editor"
+      :active="panel === 'sqlEditor'"
+      tooltip="Switch panel to SQL editor"
+      tooltipPosition="top-left"
+      @click="$emit('switchTo', 'sqlEditor')"
+    />
+
+    <icon-button
+      ref="tableBtn"
+      icon="myicon myicon-table"
+      :active="panel === 'table'"
+      tooltip="Switch panel to result set"
+      tooltipPosition="top-left"
+      @click="$emit('switchTo', 'table')"
+    />
+
+    <icon-button
+      ref="dataViewBtn"
+      icon="myicon myicon-data-view"
+      :active="panel === 'dataView'"
+      tooltip="Switch panel to data view"
+      tooltipPosition="top-left"
+      @click="$emit('switchTo', 'dataView')"
+    />
+
+    <div v-if="$slots.default" class="side-tool-bar-divider" />
+
+    <slot />
+  </div>
+</template>
+
+<script>
+import IconButton from '@/components/Common/IconButton'
+
+export default {
+  name: 'SideToolBar',
+  components: {
+    IconButton
+  },
+  props: {
+    panel: String
+  },
+  emits: ['switchTo']
+}
+</script>
+
+<style scoped>
+.side-tool-bar {
+  background-color: var(--color-bg-light);
+  border-left: 1px solid var(--color-border-light);
+  padding: 6px;
+}
+</style>
+
+<style>
+.side-tool-bar-divider {
+  width: 26px;
+  height: 1px;
+  background: var(--color-border-light);
+  margin: 6px 0;
+}
+</style>

src/components/Splitpanes/splitter.js

@@ -1,36 +0,0 @@
-export default {
-  // Get the cursor position relative to the splitpane container.
-  getCurrentMouseDrag (event, container) {
-    const rect = container.getBoundingClientRect()
-    const { clientX, clientY } = ('ontouchstart' in window && event.touches)
-      ? event.touches[0]
-      : event
-    return {
-      x: clientX - rect.left,
-      y: clientY - rect.top
-    }
-  },
-
-  // Returns the drag percentage of the splitter relative to the 2 panes it's inbetween.
-  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
-  },
-
-  // Returns the new position in percents.
-  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)
-
-    // Prevent dragging beyond pane max.
-    if (paneBeforeMaxReached || paneAfterMaxReached) {
-      return paneBeforeMaxReached ? paneBeforeMax : Math.max(100 - paneAfterMax, 0)
-    } else {
-      return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
-    }
-  }
-}

src/components/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)

src/components/SqlEditor/index.vue

@@ -1,23 +1,24 @@
 <template>
   <div class="sql-editor-panel">
-    <div class="codemirror-container">
+    <div class="codemirror-box original-style">
       <codemirror
         ref="cm"
-        v-model="query"
+        v-model:value="query"
         :options="cmOptions"
-        @changes="onChange"
+        :originalStyle="true"
+        @change="onChange"
       />
     </div>
-    <side-tool-bar panel="sqlEditor" @switchTo="$emit('switchTo', $event)">
+    <side-tool-bar panel="sqlEditor" @switch-to="$emit('switchTo', $event)">
       <icon-button
+        ref="runBtn"
+        icon="myicon myicon-run"
         :disabled="runDisabled"
         :loading="isGettingResults"
         tooltip="Run SQL query"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="$emit('run')"
-      >
-        <run-icon :disabled="runDisabled"/>
-      </icon-button>
+      />
     </side-tool-bar>
   </div>
 </template>
@@ -25,28 +26,27 @@
 <script>
 import showHint, { showHintOnDemand } from './hint'
 import time from '@/lib/utils/time'
-import { codemirror } from 'vue-codemirror'
+import Codemirror from 'codemirror-editor-vue3'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/mode/sql/sql.js'
 import 'codemirror/theme/neo.css'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/display/autorefresh.js'
 import SideToolBar from '../SideToolBar'
-import IconButton from '@/components/IconButton'
-import RunIcon from '@/components/svg/run'
+import IconButton from '@/components/Common/IconButton.vue'
 
 export default {
   name: 'SqlEditor',
-  props: ['value', 'isGettingResults'],
   components: {
-    codemirror,
+    Codemirror,
     SideToolBar,
-    IconButton,
-    RunIcon
+    IconButton
   },
-  data () {
+  props: { modelValue: String, isGettingResults: Boolean },
+  emits: ['update:modelValue', 'run', 'switchTo'],
+  data() {
     return {
-      query: this.value,
+      query: this.modelValue,
       cmOptions: {
         tabSize: 4,
         mode: 'text/x-mysql',
@@ -54,24 +54,25 @@ export default {
         lineNumbers: true,
         line: true,
         autoRefresh: true,
+        styleActiveLine: false,
         extraKeys: { 'Ctrl-Space': showHintOnDemand }
       }
     }
   },
   computed: {
-    runDisabled () {
-      return (!this.$store.state.db || !this.query || this.isGettingResults)
+    runDisabled() {
+      return !this.$store.state.db || !this.query || this.isGettingResults
     }
   },
   watch: {
-    query () {
-      this.$emit('input', this.query)
+    query() {
+      this.$emit('update:modelValue', this.query)
     }
   },
   methods: {
-    onChange: time.debounce(showHint, 400),
-    focus () {
-      this.$refs.cm.codemirror.focus()
+    onChange: time.debounce((value, editor) => showHint(editor), 400),
+    focus() {
+      this.$refs.cm.cminstance?.focus()
     }
   }
 }
@@ -87,20 +88,21 @@ export default {
   overflow: hidden;
 }
 
-.codemirror-container {
+.codemirror-box {
   flex-grow: 1;
   overflow: auto;
 }
 
->>> .vue-codemirror {
+:deep(.codemirror-container) {
+  display: block;
   height: 100%;
   max-height: 100%;
 }
->>> .CodeMirror {
+:deep(.CodeMirror) {
   height: 100%;
   max-height: 100%;
 }
->>> .CodeMirror-cursor {
+:deep(.CodeMirror-cursor) {
   width: 1px;
   background: var(--color-text-base);
 }

src/components/SqlTable.vue

@@ -1,74 +1,75 @@
 <template>
   <div>
     <div class="rounded-bg">
-      <div class="header-container" ref="header-container">
+      <div ref="header-container" class="header-container">
         <div>
           <div
             v-for="(th, index) in header"
+            :key="index"
             class="fixed-header"
             :style="{ width: `${th.width}px` }"
-            :key="index"
+            :title="th.name"
           >
             {{ th.name }}
           </div>
-      </div>
+        </div>
       </div>
       <div
-        class="table-container"
         ref="table-container"
+        class="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"
+                :key="colIndex"
+                :data-col="colIndex"
+                :data-row="pageSize * (currentPage - 1) + rowIndex - 1"
+                :data-isNull="isNull(getCellValue(col, rowIndex))"
+                :data-isBlob="isBlob(getCellValue(col, rowIndex))"
+                :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>
       <pager
         v-show="pageCount > 1"
-        :page-count="pageCount"
         v-model="currentPage"
+        :pageCount="pageCount"
       />
     </div>
   </div>
 </template>
 
 <script>
-import Pager from './Pager'
+import Pager from '@/components/Common/Pager.vue'
 
 export default {
   name: 'SqlTable',
@@ -87,7 +88,8 @@ export default {
     preview: Boolean,
     selectedCellCoordinates: Object
   },
-  data () {
+  emits: ['updateSelectedCell'],
+  data() {
     return {
       header: null,
       tableWidth: null,
@@ -97,20 +99,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) {
@@ -123,31 +125,44 @@ export default {
       }
     }
   },
-  mounted () {
+  watch: {
+    currentPageData() {
+      this.calculateHeadersWidth()
+      this.selectCell(null)
+    },
+    dataSet() {
+      this.currentPage = 1
+    }
+  },
+  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)
       }
     }
   },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.table)
+  },
   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'
@@ -157,7 +172,7 @@ export default {
       }
       return value
     },
-    calculateHeadersWidth () {
+    calculateHeadersWidth() {
       this.tableWidth = this.$refs['table-container'].offsetWidth
       this.$nextTick(() => {
         this.header = this.$refs.th.map(th => {
@@ -165,10 +180,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',
@@ -186,10 +202,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'
@@ -212,7 +228,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
@@ -241,24 +257,13 @@ 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)
       }
     }
-  },
-  beforeDestroy () {
-    this.resizeObserver.unobserve(this.$refs.table)
-  },
-  watch: {
-    currentPageData () {
-      this.calculateHeadersWidth()
-      this.selectCell(null)
-    },
-    dataSet () {
-      this.currentPage = 1
-    }
   }
 }
 </script>
@@ -270,7 +275,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>

src/components/SqlTable/Pager.vue

@@ -1,101 +0,0 @@
-<template>
-  <paginate
-    :page-count="pageCount"
-    :page-range="5"
-    :margin-pages="1"
-    :prev-text="chevron"
-    :next-text="chevron"
-    :no-li-surround="true"
-    container-class="paginator-continer"
-    page-link-class="paginator-page-link"
-    active-class="paginator-active-page"
-    break-view-link-class="paginator-break"
-    next-link-class="paginator-next"
-    prev-link-class="paginator-prev"
-    disabled-class="paginator-disabled"
-    v-model="page"
-  />
-</template>
-
-<script>
-import Paginate from 'vuejs-paginate'
-
-export default {
-  name: 'Pager',
-  components: { Paginate },
-  props: ['pageCount', 'value'],
-  data () {
-    return {
-      page: this.value,
-      chevron: `
-        <svg width="9" height="9" viewBox="0 0 8 12" fill="none">
-        <path
-          d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992
-            5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"
-        />
-        </svg>
-      `
-    }
-  },
-  watch: {
-    page () {
-      this.$emit('input', this.page)
-    },
-    value () {
-      this.page = this.value
-    }
-  }
-}
-</script>
-
-<style scoped>
-.paginator-continer {
-  display: flex;
-  align-items: center;
-  line-height: 10px;
-}
->>> .paginator-page-link {
-  padding: 2px 3px;
-  margin: 0 5px;
-  display: block;
-  color: var(--color-text-base);
-  font-size: 11px;
-}
->>> .paginator-page-link:hover {
-  color: var(--color-text-active);
-}
->>> .paginator-page-link:active,
->>> .paginator-page-link:visited,
->>> .paginator-page-link:focus,
->>> .paginator-next:active,
->>> .paginator-next:visited,
->>> .paginator-next:focus,
->>> .paginator-prev:active,
->>> .paginator-prev:visited,
->>> .paginator-prev:focus {
-  outline: none;
-}
-
->>> .paginator-active-page,
->>> .paginator-active-page:hover {
-  color: var(--color-accent);
-}
-
->>> .paginator-break:hover,
->>> .paginator-disabled:hover {
-  cursor: default;
-}
-
->>> .paginator-prev svg {
-  transform: rotate(180deg);
-}
-
->>> .paginator-next:hover path,
->>> .paginator-prev:hover path {
-   fill: var(--color-text-active);
-}
->>> .paginator-disabled path,
->>> .paginator-disabled:hover path {
-  fill: var(--color-text-light-2);
-}
-</style>

src/components/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-content-container" v-show="isActive">
+  <div v-show="isActive" class="tab-content-container">
     <splitpanes
       class="query-results-splitter"
       horizontal
@@ -11,40 +11,51 @@
         <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 :to="`#${tab.layout.sqlEditor}-${tab.id}`">
+    <teleport
+      defer
+      :to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}` : undefined"
+      :disabled="!enableTeleport"
+    >
       <sql-editor
         ref="sqlEditor"
         v-model="tab.query"
-        :is-getting-results="tab.isGettingResults"
-        @switchTo="onSwitchView('sqlEditor', $event)"
+        :isGettingResults="tab.isGettingResults"
+        @switch-to="onSwitchView('sqlEditor', $event)"
         @run="tab.execute()"
       />
     </teleport>
 
-    <teleport :to="`#${tab.layout.table}-${tab.id}`">
+    <teleport
+      defer
+      :to="enableTeleport ? `#${tab.layout.table}-${tab.id}` : undefined"
+      :disabled="!enableTeleport"
+    >
       <run-result
-        :tab="tab"
         :result="tab.result"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
         :error="tab.error"
         :time="tab.time"
-        @switchTo="onSwitchView('table', $event)"
+        @switch-to="onSwitchView('table', $event)"
       />
     </teleport>
 
-    <teleport :to="`#${tab.layout.dataView}-${tab.id}`">
+    <teleport
+      defer
+      :to="enableTeleport ? `#${tab.layout.dataView}-${tab.id}` : undefined"
+      :disabled="!enableTeleport"
+    >
       <data-view
-        :data-source="(tab.result && tab.result.values) || null"
-        :init-options="tab.viewOptions"
-        :init-mode="tab.viewType"
         ref="dataView"
-        @switchTo="onSwitchView('dataView', $event)"
+        :data-source="(tab.result && tab.result.values) || null"
+        :initOptions="tab.viewOptions"
+        :initMode="tab.viewType"
+        @switch-to="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
       />
     </teleport>
@@ -52,67 +63,85 @@
 </template>
 
 <script>
-import Splitpanes from '@/components/Splitpanes'
-import SqlEditor from './SqlEditor'
-import DataView from './DataView'
-import RunResult from './RunResult'
+import Splitpanes from '@/components/Common/Splitpanes'
+import SqlEditor from '@/components/SqlEditor'
+import DataView from '@/components/DataView'
+import RunResult from '@/components/RunResult'
+import { nextTick, computed } from 'vue'
 
-import Teleport from 'vue2-teleport'
 import events from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
-  props: {
-    tab: Object
-  },
   components: {
     SqlEditor,
     DataView,
     RunResult,
-    Splitpanes,
-    Teleport
+    Splitpanes
   },
-  data () {
+  provide() {
+    return {
+      tabLayout: computed(() => this.tab.layout)
+    }
+  },
+  props: {
+    tab: Object
+  },
+  emits: [],
+  data() {
     return {
       topPaneSize: this.tab.maximize
-        ? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
-        : 50
+        ? 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 this.$nextTick()
-          this.$refs.sqlEditor.focus()
+          await nextTick()
+          this.$refs.sqlEditor?.focus()
         }
       }
     },
-    'tab.query' () {
+    'tab.query'() {
       this.$store.commit('updateTab', {
         tab: this.tab,
         newValues: { isSaved: false }
       })
     }
   },
-  mounted () {
+  async activated() {
+    this.enableTeleport = true
+    if (this.isActive) {
+      await nextTick()
+      this.$refs.sqlEditor.focus()
+    }
+  },
+  deactivated() {
+    this.enableTeleport = false
+  },
+  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
 
       events.send('inquiry.panel', null, { panel: to })
     },
-    onDataViewUpdate () {
+    onDataViewUpdate() {
       this.$store.commit('updateTab', {
         tab: this.tab,
         newValues: { isSaved: false }

src/components/Tabs.vue

@@ -1,56 +1,70 @@
 <template>
-   <div id="tabs">
-    <div id="tabs-header" v-if="tabs.length > 0">
+  <div id="tabs">
+    <div v-if="tabs.length > 0" id="tabs-header">
       <div
         v-for="(tab, index) in tabs"
         :key="index"
+        :class="[{ 'tab-selected': tab.id === selectedTabId }, 'tab']"
         @click="selectTab(tab.id)"
-        :class="[{'tab-selected': (tab.id === selectedTabId)}, 'tab']"
       >
         <div class="tab-name">
           <span v-show="!tab.isSaved" class="star">*</span>
           <span v-if="tab.name">{{ tab.name }}</span>
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
-        <div>
-          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(tab)"/>
-        </div>
+
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="10"
+          class="close-icon"
+          @click="beforeCloseTab(tab)"
+        />
       </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="$root.$emit('createNewInquiry')">Create</span>
+      <span class="link" @click="emitCreateTabEvent">Create</span>
       new inquiry from scratch or open one from
       <router-link class="link" to="/inquiries">Inquiries</router-link>
     </div>
 
     <!--Close tab warning dialog  -->
-    <modal name="close-warn" classes="dialog" height="auto">
+    <modal modalId="close-warn" class="dialog" contentStyle="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')"/>
+
+        <IconButton
+          icon="myicon myicon-close"
+          variant="secondary"
+          :iconSize="14"
+          @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')">Cancel</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>
@@ -58,40 +72,45 @@
 
 <script>
 import Tab from './Tab'
-import CloseIcon from '@/components/svg/close'
+import IconButton from '@/components/Common/IconButton.vue'
+import eventBus from '@/lib/eventBus'
 
 export default {
   components: {
     Tab,
-    CloseIcon
+    IconButton
   },
-  data () {
+  emits: [],
+  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: {
-    leavingSqliteviz (event) {
+    emitCreateTabEvent() {
+      eventBus.$emit('createNewInquiry')
+    },
+    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')
@@ -99,19 +118,19 @@ export default {
         this.closeTab(tab)
       }
     },
-    closeTab (tab) {
+    closeTab(tab) {
       this.$modal.hide('close-warn')
       this.$store.commit('deleteTab', tab)
     },
-    saveAndClose (tab) {
-      this.$root.$on('inquirySaved', () => {
+    saveAndClose(tab) {
+      eventBus.$on('inquirySaved', () => {
         this.closeTab(tab)
-        this.$root.$off('inquirySaved')
+        eventBus.$off('inquirySaved')
       })
       this.selectTab(tab.id)
       this.$modal.hide('close-warn')
       this.$nextTick(() => {
-        this.$root.$emit('saveInquiry')
+        eventBus.$emit('saveInquiry')
       })
     }
   }
@@ -143,6 +162,7 @@ export default {
   position: relative;
   max-width: 200px;
   display: flex;
+  align-items: center;
   flex-shrink: 1;
   min-width: 0;
 }

src/components/ValueViewer.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="value-viewer">
+    <template v-if="!empty">
+      <div class="value-viewer-toolbar">
+        <button
+          v-for="format in formats"
+          :key="format.value"
+          type="button"
+          :aria-selected="currentFormat === format.value"
+          :class="format.value"
+          @click="currentFormat = format.value"
+        >
+          {{ format.text }}
+        </button>
+
+        <button type="button" class="copy" @click="copyToClipboard">
+          Copy
+        </button>
+        <button
+          type="button"
+          class="line-wrap"
+          :aria-selected="lineWrapping === true"
+          @click="lineWrapping = !lineWrapping"
+        >
+          Line wrap
+        </button>
+      </div>
+      <div class="value-body">
+        <codemirror
+          v-if="currentFormat === 'json' && formattedJson"
+          :value="formattedJson"
+          :options="cmOptions"
+          class="json-value original-style"
+        />
+        <pre
+          v-if="currentFormat === 'text'"
+          :class="[
+            'text-value',
+            { 'meta-value': isNull || isBlob },
+            { 'line-wrap': lineWrapping }
+          ]"
+          >{{ cellText }}</pre
+        >
+        <logs
+          v-if="messages && messages.length > 0"
+          :messages="messages"
+          class="messages"
+        />
+      </div>
+    </template>
+
+    <div v-show="empty" class="empty-message">
+      {{ emptyMessage }}
+    </div>
+  </div>
+</template>
+
+<script>
+import Codemirror from 'codemirror-editor-vue3'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/brace-fold.js'
+import 'codemirror/theme/neo.css'
+import cIo from '@/lib/utils/clipboardIo'
+import Logs from '@/components/Common/Logs'
+
+export default {
+  name: 'ValueViewer',
+  components: {
+    Codemirror,
+    Logs
+  },
+  props: {
+    value: [String, Number, Uint8Array],
+    empty: Boolean,
+    emptyMessage: String,
+    defaultFormat: {
+      type: String,
+      default: 'text'
+    }
+  },
+  data() {
+    return {
+      formats: [
+        { text: 'Text', value: 'text' },
+        { text: 'JSON', value: 'json' }
+      ],
+      currentFormat: this.defaultFormat,
+      lineWrapping: false,
+      formattedJson: '',
+      messages: []
+    }
+  },
+  computed: {
+    cmOptions() {
+      return {
+        tabSize: 4,
+        mode: { name: 'javascript', json: true },
+        theme: 'neo',
+        lineNumbers: true,
+        line: true,
+        lineWrapping: this.lineWrapping,
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        readOnly: true
+      }
+    },
+    isBlob() {
+      return this.value && ArrayBuffer.isView(this.value)
+    },
+    isNull() {
+      return this.value === null
+    },
+    cellText() {
+      const value = this.value
+      if (this.isNull) {
+        return 'NULL'
+      }
+      if (this.isBlob) {
+        return 'BLOB'
+      }
+      return value
+    }
+  },
+  watch: {
+    currentFormat: {
+      immediate: true,
+      handler() {
+        this.messages = []
+        this.formattedJson = ''
+        if (this.currentFormat === 'json') {
+          this.formatJson(this.value)
+        }
+      }
+    },
+    value: {
+      immediate: true,
+      handler() {
+        this.messages = []
+        if (this.currentFormat === 'json') {
+          this.formatJson(this.value)
+        }
+      }
+    }
+  },
+  methods: {
+    formatJson(jsonStr) {
+      try {
+        this.formattedJson = JSON.stringify(JSON.parse(jsonStr), null, 4)
+      } catch (e) {
+        this.formattedJson = ''
+        this.messages = [
+          {
+            type: 'error',
+            message: "Can't parse JSON."
+          }
+        ]
+      }
+    },
+    copyToClipboard() {
+      cIo.copyText(
+        this.currentFormat === 'json' ? this.formattedJson : this.value,
+        'The value is copied to clipboard.'
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.value-viewer {
+  background-color: var(--color-white);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.value-viewer-toolbar {
+  display: flex;
+  justify-content: end;
+}
+.value-body {
+  flex-grow: 1;
+  overflow: auto;
+}
+.text-value {
+  padding: 0 8px;
+  margin: 0;
+  color: var(--color-text-base);
+}
+
+.json-value {
+  margin-top: -4px;
+}
+
+.text-value.meta-value {
+  font-style: italic;
+  color: var(--color-text-light-2);
+}
+
+.text-value.line-wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.messages {
+  margin: 0 8px;
+}
+
+.value-viewer-toolbar button {
+  font-size: 10px;
+  height: 20px;
+  padding: 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-base);
+  border-radius: var(--border-radius-small);
+}
+
+.value-viewer-toolbar button:hover {
+  background-color: var(--color-bg-light);
+}
+
+.value-viewer-toolbar button[aria-selected='true'] {
+  color: var(--color-accent);
+}
+
+:deep(.codemirror-container) {
+  display: block;
+  height: 100%;
+  max-height: 100%;
+}
+:deep(.CodeMirror) {
+  height: 100%;
+  max-height: 100%;
+}
+:deep(.CodeMirror-cursor) {
+  width: 1px;
+  background: var(--color-text-base);
+}
+
+.empty-message {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-base);
+  font-size: 13px;
+  text-align: center;
+}
+</style>

src/components/svg/addTable.vue

@@ -1,68 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <g clip-path="url(#clip0)">
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          :d="
-            `M13.6573 1.5H2.59985C1.77485 1.5 1.09985 2.175 1.09985 3V13.6649C1.09985 14.4899
-            1.77485 15.1649 2.59985
-            15.1649H9.84V13.6649H8.87866V9.08244H13.6573V9.83777H15.1573V3C15.1573
-            2.17 14.4873 1.5 13.6573 1.5ZM13.6573
-            7.58244V3H8.87866V7.58244H13.6573ZM7.37866 3H2.59985V7.58244H7.37866V3ZM2.59985
-            9.08244V13.6649H7.37866V9.08244H2.59985ZM13.1702
-            10.8434H15.6702V13.1717H18.0001V15.6717H15.6702V18H13.1702V15.6717H10.8401V13.` +
-            '1717H13.1702V10.8434Z'
-          "
-          fill="#A2B1C6"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0">
-          <rect width="18" height="18" fill="white"/>
-        </clipPath>
-      </defs>
-    </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-      Add new table from CSV, JSON or NDJSON
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'AddTableIcon',
-  mixins: [tooltipMixin],
-  props: ['tooltip'],
-  methods: {
-    onClick () {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0;
-  cursor: pointer;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/arrow.vue

@@ -1,20 +0,0 @@
-<template>
-  <svg
-    width="28"
-    height="27"
-    viewBox="0 0 28 27"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17.9475 8.33625L12.7838 13.5L17.9475 18.6638L16.35 20.25L9.60001
-      13.5L16.35 6.75L17.9475 8.33625Z"
-      fill="#506784"
-    />
-</svg>
-</template>
-
-<script>
-export default {
-}
-</script>

src/components/svg/changeDb.vue

@@ -1,53 +0,0 @@
-<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
-      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>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'changeDbIcon',
-  mixins: [tooltipMixin],
-  methods: {
-    onClick () {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.db-edit-icon {
-  display: block;
-  cursor: pointer;
-}
-.db-edit-icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/chart.vue

@@ -1,53 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.41943 16V10H10.4194V16H8.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.41943 16L2.41943 10H4.41943V16H2.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M11.4194 16V7H13.4194V16H11.4194Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.4194 16V8H16.4194V16H14.4194Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.41943 12V16H5.41943V12H7.41943Z"
-      fill="#A2B1C6"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M12.4332 1.80676L16.6265 6.00001L15.9194 6.70712L12.4055 3.19326L5.93169 9.1691L1.71436
-        5.55424L2.36515 4.79499L5.90707 7.83092L12.4332 1.80676Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'ChartIcon'
-}
-</script>

src/components/svg/clear.vue

@@ -1,47 +0,0 @@
-<template>
-  <svg
-    :class="['clear-icon', {'disabled': disabled}]"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14.3481 14.849C13.8791 15.318 13.1191 15.318 12.6511 14.849L10.0001 11.819L7.34907
-        14.848C6.88007 15.317 6.12007 15.317 5.65207 14.848C5.18307 14.379 5.18307 13.619
-        5.65207 13.151L8.41007 10.001L5.65107 6.84898C5.18207 6.37998 5.18207 5.62098 5.65107
-        5.15198C6.12007 4.68298 6.87907 4.68298 7.34807 5.15198L10.0001 8.18298L12.6511
-        5.15198C13.1201 4.68298 13.8791 4.68298 14.3481 5.15198C14.8171 5.62098 14.8171 6.38098
-        14.3481 6.84898L11.5901 10.001L14.3481 13.151C14.8171 13.62 14.8171 14.38 14.3481
-        14.849V14.849Z"
-      fill="#C8D4E3"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'ClearIcon',
-  props: ['disabled']
-}
-</script>
-
-<style scoped>
-.clear-icon {
-  cursor: pointer;
-}
-
-.clear-icon:hover path {
-  fill: var(--color-danger);
-}
-
-.disabled.clear-icon {
-  cursor: default;
-}
-
-.disabled.clear-icon:hover path {
-  fill: #C8D4E3;
-}
-</style>

src/components/svg/clipboard.vue

@@ -1,33 +0,0 @@
-<template>
-  <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
-      3.14291V16.2422C2.07422 17.2115 2.86276 18 3.83203 18H14.1917C15.161 18 15.9495 17.2115
-      15.9495 16.2422V3.14291C15.9495 2.17365 15.1609 1.3851 14.1917 1.3851V1.3851ZM11.0744
-      1.40625V2.77034H6.94899C6.94899 2.30301 6.94899 1.91698 6.94899 1.40625H11.0744ZM14.5433
-      16.2422C14.5433 16.4361 14.3855 16.5938 14.1917 16.5938H3.83203C3.63812 16.5938 3.48047
-      16.4361 3.48047 16.2422V3.14291C3.48047 2.94914 3.63812 2.79135 3.83203
-      2.79135H5.54274V3.47346C5.54274 3.86183 5.85764 4.17659 6.24586 4.17659H11.7775C12.1657
-      4.17659 12.4806 3.86183 12.4806 3.47346V2.79135H14.1917C14.3855 2.79135 14.5433 2.94914
-      14.5433 3.14291V16.2422ZM12.2745 8.20967C12.5491 8.48433 12.5491 8.92955 12.2745
-      9.20407L8.5795 12.899C8.30498 13.1737 7.85976 13.1737 7.5851 12.899L5.74887
-      11.0628C5.47435 10.7883 5.47435 10.3431 5.74887 10.0684C6.02353 9.7939 6.46861 9.7939
-      6.74327 10.0684L8.08237 11.4075L11.2801 8.20981C11.5547 7.93515 11.9998 7.93515 12.2745
-      8.20967V8.20967Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'ClipboardIcon'
-}
-</script>

src/components/svg/close.vue

@@ -1,47 +0,0 @@
-<template>
-  <svg
-    @click.stop="$emit('click')"
-    :class="['icon', {'disabled': disabled }]"
-    :width="size"
-    :height="size"
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14
-      12.59L8.41 7L14 1.41Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'CloseIcon',
-  props: {
-    size: {
-      type: Number,
-      required: false,
-      default: 14
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  cursor: pointer;
-}
-.disabled {
-  pointer-events: none;
-}
-.icon:hover path {
-  fill: var(--color-text-base);
-}
-</style>

src/components/svg/dataView.vue

@@ -1,38 +0,0 @@
-<template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M13.5552 6.91522C13.7584 6.91357 13.9535 6.99442 14.096 7.13926L17.2582 10.3541C17.5486
-        10.6494 17.5447 11.1242 17.2494 11.4147C16.9541 11.7051 16.4793 11.7012 16.1888
-        11.4059L13.57 8.74357L9.29577 13.2318C9.01977 13.5216 8.56484 13.5436 8.2621
-        13.2819L5.35435 10.7677L2.03285 13.7321C1.72382 14.0079 1.24971 13.981 0.973901
-        13.6719C0.69809 13.3629 0.725022 12.8888 1.03406 12.613L4.8471 9.20986C5.12827 8.95892
-        5.55198 8.95559 5.83705 9.20208L8.70249 11.6797L13.0182 7.14796C13.1583 7.00084 13.3521
-        6.91686 13.5552 6.91522Z"
-      fill="#A2B1C6"
-    />
-    <circle cx="5.50049" cy="6.00339" r="1.5" fill="#A2B1C6"/>
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M16.036 1.21788L1.96546 1.213C1.14046 1.213 0.465462 1.888 0.465462 2.713L0.464111
-        15.2821C0.464111 16.1071 1.13911 16.7821 1.96411 16.7821L16.0347 16.787C16.8674 16.787
-        17.5347 16.1121 17.5347 15.287L17.536 2.71788C17.536 1.88787 16.866 1.21788 16.036
-        1.21788ZM16.0374 2.71788L1.96424 2.713L1.96289 15.2773L16.036 15.2821L16.0374 2.71788Z"
-      fill="#A2B1C6"
-    />
-</svg>
-</template>
-
-<script>
-
-export default {
-  name: 'DataViewIcon'
-}
-</script>

src/components/svg/dropDownChevron.vue

@@ -1,41 +0,0 @@
-<template>
-  <svg
-    :class="['chevron-icon', {'disabled': disabled}]"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.175 7.15002L10 10.975L13.825 7.15002L15 8.33336L10 13.3334L5 8.33336L6.175 7.15002Z"
-      fill="#C8D4E3"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'DropDownChevron',
-  props: ['disabled']
-}
-</script>
-
-<style scoped>
-.chevron-icon {
-  cursor: pointer;
-}
-
-.chevron-icon:hover path {
-  fill: var(--color-accent);
-}
-
-.disabled.chevron-icon {
-  cursor: default;
-}
-
-.disabled.chevron-icon:hover path {
-  fill: #C8D4E3;
-}
-</style>

src/components/svg/edgeArrow.vue

@@ -1,26 +0,0 @@
-<template>
-  <svg
-    width="27"
-    height="27"
-    viewBox="0 0 27 27"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M17.3474 8.33625L12.1837 13.5L17.3474 18.6638L15.7499 20.25L8.99991
-      13.5L15.7499 6.75L17.3474 8.33625Z"
-      fill="#506784"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.19995 19.8L7.19995 7.20001H9.19995V19.8H7.19995Z"
-      fill="#506784"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-}
-</script>

src/components/svg/export.vue

@@ -1,52 +0,0 @@
-<template>
-  <span>
-    <svg
-      class="icon"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip($event, tooltipPosition)"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.675 16.5 4.5 16.5H13.5C14.325 16.5
-        15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15ZM12 8.25V13.575L10.425
-        12L8.325 14.1L6.225 12L8.325 9.9L6.675 8.25H12Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-      {{ tooltip }}
-    </span>
-  </span>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'ExportIcon',
-  mixins: [tooltipMixin],
-  props: ['tooltip', 'tooltipPosition'],
-  methods: {
-    onClick () {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.icon {
-  display: block;
-  margin: 0 12px;
-  cursor: pointer;
-}
-
-.icon:hover path {
-  fill: var(--color-accent);
-}
-</style>

src/components/svg/exportToCsv.vue

@@ -1,62 +0,0 @@
-<template>
-  <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
-        1.93115 15.5561 1.44775 15.0082C0.964355 14.4604 0.722656 13.687 0.722656
-        12.6879V12.3715C0.722656 11.7446 0.831055 11.1967 1.04785 10.728C1.26758 10.2563 1.58252
-        9.89301 1.99268 9.63812C2.40283 9.38031 2.87744 9.2514 3.4165 9.2514C4.19287 9.2514
-        4.81689 9.45648 5.28857 9.86664C5.76025 10.2739 6.02832 10.8364 6.09277
-        11.5541H4.55469C4.54297 11.1645 4.44482 10.8847 4.26025 10.7148C4.07568 10.5449 3.79443
-        10.4599 3.4165 10.4599C3.03271 10.4599 2.75146 10.6035 2.57275 10.8906C2.39404 11.1777
-        2.30029 11.6362 2.2915 12.2661V12.7187C2.2915 13.4013 2.37646 13.8891 2.54639
-        14.1821C2.71924 14.475 3.01514 14.6215 3.43408 14.6215C3.78857 14.6215 4.05957 14.538
-        4.24707 14.371C4.43457 14.204 4.53418 13.9389 4.5459 13.5756H6.07959ZM10.1094
-        14.0414C10.1094 13.8159 10.0288 13.6401 9.86768 13.5141C9.70947 13.3881 9.42969 13.2578
-        9.02832 13.123C8.62695 12.9882 8.29883 12.8578 8.04395 12.7319C7.21484 12.3246 6.80029
-        11.7651 6.80029 11.0532C6.80029 10.6987 6.90283 10.3867 7.10791 10.1171C7.31592 9.84467
-        7.60889 9.63373 7.98682 9.48431C8.36475 9.33197 8.78955 9.2558 9.26123 9.2558C9.72119
-        9.2558 10.1328 9.33783 10.4961 9.50189C10.8623 9.66595 11.1465 9.90033 11.3486
-        10.205C11.5508 10.5068 11.6519 10.8525 11.6519 11.2421H10.1138C10.1138 10.9814 10.0332
-        10.7792 9.87207 10.6357C9.71387 10.4921 9.49854 10.4203 9.22607 10.4203C8.95068 10.4203
-        8.73242 10.4819 8.57129 10.6049C8.41309 10.725 8.33398 10.8788 8.33398 11.0663C8.33398
-        11.2304 8.42188 11.3798 8.59766 11.5146C8.77344 11.6464 9.08252 11.7841 9.5249
-        11.9277C9.96729 12.0683 10.3306 12.2206 10.6147 12.3847C11.3062 12.7831 11.6519 13.3325
-        11.6519 14.0327C11.6519 14.5922 11.4409 15.0317 11.019 15.351C10.5972 15.6703 10.0186
-        15.83 9.2832 15.83C8.76465 15.83 8.29443 15.7377 7.87256 15.5532C7.45361 15.3657 7.13721
-        15.1108 6.92334 14.7885C6.7124 14.4633 6.60693 14.0898 6.60693 13.6679H8.15381C8.15381
-        14.0107 8.2417 14.2641 8.41748 14.4282C8.59619 14.5893 8.88477 14.6699 9.2832
-        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"
-    />
-    <path
-      d="M3.03345 0.991333H4.89869V2.49133H3.03345V7.93074H1.53345V2.49133C1.53345 1.66633
-        2.20845 0.991333 3.03345 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.917 0.991333H14.0517V2.49133H15.917V7.93074H17.417V2.49133C17.417 1.66633 16.742
-      0.991333 15.917 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M9.53043 1.28245e-05L13.2199 3.83975L10.9929 3.7953L10.9337 6.76455L7.96442
-      6.70529L8.02368 3.73603L5.6907 3.68947L9.53043 1.28245e-05Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'ExportToCsvIcon'
-}
-</script>

src/components/svg/exportToSvg.vue

@@ -1,61 +0,0 @@
-<template>
-  <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
-        0.974609 11.7203 0.974609 11.0084C0.974609 10.6539 1.07715 10.3419 1.28223
-        10.0723C1.49023 9.79987 1.7832 9.58893 2.16113 9.43951C2.53906 9.28717 2.96387 9.211
-        3.43555 9.211C3.89551 9.211 4.30713 9.29303 4.67041 9.45709C5.03662 9.62115 5.3208
-        9.85553 5.52295 10.1602C5.7251 10.462 5.82617 10.8077 5.82617 11.1973H4.28809C4.28809
-        10.9366 4.20752 10.7344 4.04639 10.5909C3.88818 10.4473 3.67285 10.3755 3.40039
-        10.3755C3.125 10.3755 2.90674 10.4371 2.74561 10.5601C2.5874 10.6802 2.5083 10.834
-        2.5083 11.0215C2.5083 11.1856 2.59619 11.335 2.77197 11.4698C2.94775 11.6016 3.25684
-        11.7393 3.69922 11.8829C4.1416 12.0235 4.50488 12.1758 4.78906 12.3399C5.48047 12.7383
-        5.82617 13.2877 5.82617 13.9879C5.82617 14.5474 5.61523 14.9869 5.19336 15.3062C4.77148
-        15.6255 4.19287 15.7852 3.45752 15.7852C2.93896 15.7852 2.46875 15.6929 2.04688
-        15.5084C1.62793 15.3209 1.31152 15.066 1.09766 14.7437C0.886719 14.4185 0.78125 14.045
-        0.78125 13.6231H2.32812C2.32812 13.9659 2.41602 14.2193 2.5918 14.3834C2.77051 14.5445
-        3.05908 14.6251 3.45752 14.6251C3.7124 14.6251 3.91309 14.5709 4.05957 14.4625C4.20898
-        14.3511 4.28369 14.1959 4.28369 13.9966ZM9.1001 13.9571L10.3745 9.29889H12.0972L9.94385
-        15.6973H8.25635L6.12061 9.29889H7.83008L9.1001 13.9571ZM17.7441 14.9063C17.5068 15.17
-        17.1597 15.3824 16.7026 15.5435C16.2456 15.7047 15.7446 15.7852 15.1997 15.7852C14.3618
-        15.7852 13.6924 15.5289 13.1914 15.0162C12.6904 14.5035 12.4224 13.7901 12.3872
-        12.876L12.3828 12.3223C12.3828 11.6924 12.4941 11.1431 12.7168 10.6744C12.9395 10.2027
-        13.2573 9.84088 13.6704 9.58893C14.0864 9.33405 14.5669 9.2066 15.1118 9.2066C15.9087
-        9.2066 16.5269 9.38971 16.9663 9.75592C17.4087 10.1192 17.6665 10.6627 17.7397
-        11.3863H16.2544C16.2017 11.0289 16.0874 10.774 15.9116 10.6216C15.7358 10.4693 15.4868
-        10.3931 15.1646 10.3931C14.7778 10.3931 14.479 10.5572 14.2681 10.8853C14.0571 11.2134
-        13.9502 11.6822 13.9473 12.2916V12.6783C13.9473 13.317 14.0557 13.7974 14.2725
-        14.1197C14.4922 14.439 14.8364 14.5987 15.3052 14.5987C15.7065 14.5987 16.0054 14.5093
-        16.2017 14.3306V13.3375H15.1294V12.2784H17.7441V14.9063Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M2.86768 0.991333H4.73292V2.49133H2.86768V7.93074H1.36768V2.49133C1.36768 1.66633
-        2.04268 0.991333 2.86768 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M15.7512 0.991333H13.886V2.49133H15.7512V7.93074H17.2512V2.49133C17.2512 1.66633 16.5762
-        0.991333 15.7512 0.991333Z"
-      fill="#A2B1C6"
-    />
-    <path
-      d="M9.36466 -1.76931e-05L13.0541 3.83972L10.8272 3.79527L10.7679 6.76452L7.79865
-        6.70526L7.85791 3.736L5.52492 3.68944L9.36466 -1.76931e-05Z"
-      fill="#A2B1C6"
-    />
-  </svg>
-</template>
-
-<script>
-
-export default {
-  name: 'ExportToSvgIcon'
-}
-</script>

src/components/svg/hint.vue

@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <svg
-      class="hint-icon"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      @click.stop="onClick"
-      @mouseenter="showTooltip"
-      @mouseleave="hideTooltip"
-    >
-      <path
-        d="M8.75 14.1666H10.4167V12.5H8.75V14.1666ZM9.58333 16.25C5.90833 16.25 2.91667 13.2583
-        2.91667 9.58333C2.91667 5.90833 5.90833 2.91667 9.58333 2.91667C13.2583 2.91667 16.25
-        5.90833 16.25 9.58333C16.25 13.2583 13.2583 16.25 9.58333 16.25ZM9.58333 1.25C8.48898
-        1.25 7.40535 1.46555 6.3943 1.88434C5.38326 2.30313 4.4646 2.91696 3.69078
-        3.69078C2.12797 5.25358 1.25 7.3732 1.25 9.58333C1.25 11.7935 2.12797 13.9131 3.69078
-        15.4759C4.4646 16.2497 5.38326 16.8635 6.3943 17.2823C7.40535 17.7011 8.48898 17.9167
-        9.58333 17.9167C11.7935 17.9167 13.9131 17.0387 15.4759 15.4759C17.0387 13.9131 17.9167
-        11.7935 17.9167 9.58333C17.9167 8.48898 17.7011 7.40535 17.2823 6.3943C16.8635 5.38326
-        16.2497 4.4646 15.4759 3.69078C14.7021 2.91696 13.7834 2.30313 12.7724 1.88434C11.7613
-        1.46555 10.6777 1.25 9.58333 1.25Z"
-        fill="#A2B1C6"
-      />
-      <path
-        d="M9.91601 4.51787C8.98167 4.42606 8.05144 4.69097 7.36309 5.24472C6.68735 5.78828
-        6.2998 6.56661 6.2998 7.38012H7.92488C7.92488 6.97463 8.11059 6.60187 8.44779
-        6.33061C8.79784 6.049 9.25647 5.92005 9.73896 5.96755C10.4832 6.04076 11.0828 6.57277
-        11.1647 7.23265C11.2306 7.764 10.9661 8.28194 10.4744 8.58426C9.38676 9.25303 8.73742
-        10.343 8.73742 11.5H10.3625C10.3625 10.8243 10.7477 10.184 11.3929 9.78733C12.3808
-        9.17985 12.9122 8.13913 12.7798 7.07124C12.6144 5.73863 11.41 4.66476 9.91601 4.51787Z"
-        fill="#A2B1C6"
-      />
-    </svg>
-    <span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }" ref="tooltip">
-      {{ hint }}
-    </span>
-  </div>
-</template>
-
-<script>
-import tooltipMixin from '@/tooltipMixin'
-
-export default {
-  name: 'HintIcon',
-  props: ['hint', 'maxWidth'],
-  mixins: [tooltipMixin],
-  methods: {
-    onClick () {
-      this.hideTooltip()
-      this.$emit('click')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hint-icon {
-  display: block;
-  cursor: pointer;
-}
-.hint-icon:hover path {
-  fill: var(--color-text-base);
-}
-.icon-tooltip {
-  display: block;
-  white-space: normal;
-  height: auto;
-  line-height: normal;
-  padding: 6px;
-  box-sizing: border-box;
-}
-</style>