events

* 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

@@ -14,10 +14,10 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-        node-version: 10.x
+          node-version: 18.x
 
       - name: Update npm
-      run: npm install -g npm@7
+        run: npm install -g npm@10
 
       - name: npm install and build
         run: |
@@ -27,19 +27,19 @@ jobs:
       - name: Create archives
         run: |
           cd dist
-        zip -9 -r ../dist.zip . -x "js/*.map" -x "/*.map"
+          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"
+          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"
+          artifacts: 'dist.zip,dist_map.zip'
           token: ${{ secrets.GITHUB_TOKEN }}
-        bodyFile: "CHANGELOG.md"
+          bodyFile: 'CHANGELOG.md'

.github/workflows/test.yml

@@ -11,21 +11,22 @@ on:
 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
+          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
+          sudo apt-get install -y chromium-browser firefox-esr
 
       - name: Update npm
-      run: npm install -g npm@7
+        run: npm install -g npm@10
 
       - name: Install the project
         run: npm install

.prettierrc

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

Dockerfile.test

@@ -3,7 +3,7 @@
 #     docker build -t sqliteviz/test -f Dockerfile.test .
 #
 
-FROM node:12
+FROM node:12.22-bullseye
 
 RUN set -ex; \
     apt update; \

README.md

@@ -4,11 +4,13 @@
 
 # sqliteviz
 
-Sqliteviz is a single-page offline-first PWA for fully client-side visualisation of SQLite databases or CSV files.
+Sqliteviz is a single-page offline-first PWA for fully client-side visualisation
+of SQLite databases, CSV, JSON or NDJSON files.
 
 With sqliteviz you can:
+
 - run SQL queries against a SQLite database and create [Plotly][11] charts and pivot tables based on the result sets
-- import a CSV file into a SQLite database and visualize imported data
+- 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
 - import/export inquiries from/to a JSON file
@@ -18,15 +20,19 @@ With sqliteviz you can:
 https://user-images.githubusercontent.com/24638357/128249848-f8fab0f5-9add-46e0-a9c1-dd5085a8623e.mp4
 
 ## Quickstart
+
 The latest release of sqliteviz is deployed on [sqliteviz.com/app][6].
 
 ## Wiki
+
 For user documentation, check out sqliteviz [documentation][7].
 
 ## Motivation
+
 It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
 
 ## Components
+
 It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4] and [Vue-Codemirror][8] in [Vue.js][5]. CSV parsing is performed with [Papa Parse][9].
 
 [1]: https://github.com/plotly/falcon

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;
@@ -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,122 @@
+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', 'src/components/svg/*'],
+        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
+        }
+      }
+    },
+    // 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: ''
+    }
+  })
+  // 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

@@ -45,6 +45,8 @@ SQLite 3rd party extensions included:
 1. [pivot_vtab][5] -- a pivot virtual table
 2. `pearson` correlation coefficient function extension from [sqlean][21]
    (which is part of [squib][20])
+3. [sqlitelua][22] -- a virtual table `luafunctions` which allows to define custom scalar,
+   aggregate and table-valued functions in Lua
 
 To ease the step to have working clone locally, the build is committed into
 the repository.
@@ -103,3 +105,4 @@ described in [this message from SQLite Forum][12]:
 [19]: https://github.com/lana-k/sqliteviz/blob/master/tests/lib/database/sqliteExtensions.spec.js
 [20]: https://github.com/mrwilson/squib/blob/master/pearson.c
 [21]: https://github.com/nalgeon/sqlean/blob/incubator/src/pearson.c
+[22]: https://github.com/kev82/sqlitelua

lib/sql-js/benchmark/Dockerfile

@@ -1,10 +1,8 @@
-FROM node:14-bullseye
+FROM node:20.14-bookworm
 
 RUN set -ex; \
-    echo 'deb http://deb.debian.org/debian unstable main' \
-        > /etc/apt/sources.list.d/unstable.list; \
     apt-get update; \
-    apt-get install -y -t unstable firefox; \
+    apt-get install -y firefox-esr; \
     apt-get install -y chromium
 
 WORKDIR /tmp/build

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,
@@ -47,6 +53,5 @@ module.exports = function (config) {
     },
 
     jsonToFileReporter: { outputPath: '.', fileName: 'suite-result.json' }
-
   })
 }

lib/sql-js/benchmark/result-analysis.ipynb

@@ -69,6 +69,19 @@
       ],
       "metadata": {}
     },
+    {
+      "cell_type": "code",
+      "source": [
+        "!du -b lib | head -n 2"
+      ],
+      "outputs": [],
+      "execution_count": null,
+      "metadata": {
+        "collapsed": false,
+        "outputHidden": false,
+        "inputHidden": true
+      }
+    },
     {
       "cell_type": "code",
       "source": [
@@ -176,7 +189,7 @@
     },
     "language_info": {
       "name": "python",
-      "version": "3.10.7",
+      "version": "3.10.14",
       "mimetype": "text/x-python",
       "codemirror_mode": {
         "name": "ipython",

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
@@ -50,10 +49,8 @@ describe('SQLite build benchmark', function () {
     suite.add('select', { initCount: 3, minSamples: 50, fn: benchmarkSelect })
     await run(suite)
   })
-
 })
 
-
 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) => {
@@ -102,7 +98,6 @@ function chunkArray (arr, size) {
   }, [])
 }
 
-
 function createSuite() {
   // Combined workaround from:
   // - https://github.com/bestiejs/benchmark.js/issues/106
@@ -124,10 +119,12 @@ function run (suite) {
       console.info(String(event.target))
     })
     .on('complete', function () {
-      console.log(JSON.stringify({
+      console.log(
+        JSON.stringify({
           browser: useragent(navigator.userAgent).browser,
           result: this.filter('successful')
-      }))
+        })
+      )
       suiteResult.resolve()
     })
     .on('error', function (event) {

lib/sql-js/build.py

@@ -24,6 +24,7 @@ cflags = (
     # Compile-time optimisation
     '-Os',  # reduces the code size about in half comparing to -O2
     '-flto',
+    '-Isrc', '-Isrc/lua',
 )
 emflags = (
     # Base
@@ -61,6 +62,15 @@ def build(src: Path, dst: Path):
         '-c', src / 'extension-functions.c',
         '-o', out / 'extension-functions.o',
     ])
+    logging.info('Building LLVM bitcode for SQLite Lua extension')
+    subprocess.check_call([
+        'emcc',
+        *cflags,
+        '-shared',
+        *(src / 'lua').glob('*.c'),
+        *(src / 'sqlitelua').glob('*.c'),
+        '-o', out / 'sqlitelua.o',
+    ])
 
     logging.info('Building WASM from bitcode')
     subprocess.check_call([
@@ -68,6 +78,7 @@ def build(src: Path, dst: Path):
         *emflags,
         out / 'sqlite3.o',
         out / 'extension-functions.o',
+        out / 'sqlitelua.o',
         '-o', out / 'sql-wasm.js',
     ])
 

lib/sql-js/configure.py

@@ -1,14 +1,16 @@
 import logging
+import re
 import shutil
 import subprocess
 import sys
+import tarfile
 import zipfile
 from io import BytesIO
 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
 # ===================
@@ -20,18 +22,24 @@ 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
+    # ===========================================
+    ('https://github.com/kev82/sqlitelua/raw/db479510/src/main.c', 'sqlite3_luafunctions_init'),
 )
 
+lua_url = 'http://www.lua.org/ftp/lua-5.3.5.tar.gz'
+sqlitelua_url = 'https://github.com/kev82/sqlitelua/archive/db479510.zip'
+
 sqljs_url = 'https://github.com/sql-js/sql.js/archive/refs/tags/v1.7.0.zip'
 
 
@@ -59,6 +67,38 @@ def _get_amalgamation(tgt: Path):
             shutil.copyfileobj(fr, fw)
 
 
+def _get_lua(tgt: Path):
+    # Library definitions from lua/Makefile
+    lib_str = '''
+        CORE_O=    lapi.o lcode.o lctype.o ldebug.o ldo.o ldump.o lfunc.o lgc.o llex.o \
+            lmem.o lobject.o lopcodes.o lparser.o lstate.o lstring.o ltable.o \
+            ltm.o lundump.o lvm.o lzio.o
+        LIB_O=    lauxlib.o lbaselib.o lbitlib.o lcorolib.o ldblib.o liolib.o \
+            lmathlib.o loslib.o lstrlib.o ltablib.o lutf8lib.o loadlib.o linit.o
+        LUA_O=    lua.o
+    '''
+    header_only_files = {'lprefix', 'luaconf', 'llimits', 'lualib'}
+    lib_names = set(re.findall(r'(\w+)\.o', lib_str)) | header_only_files
+
+    logging.info('Downloading and extracting Lua %s', lua_url)
+    archive = tarfile.open(fileobj=BytesIO(request.urlopen(lua_url).read()))
+    (tgt / 'lua').mkdir()
+    for tarinfo in archive:
+        tarpath = Path(tarinfo.name)
+        if tarpath.match('src/*') and tarpath.stem in lib_names:
+            with (tgt / 'lua' / tarpath.name).open('wb') as fw:
+                shutil.copyfileobj(archive.extractfile(tarinfo), fw)
+
+    logging.info('Downloading and extracting SQLite Lua extension %s', sqlitelua_url)
+    archive = zipfile.ZipFile(BytesIO(request.urlopen(sqlitelua_url).read()))
+    archive_root_dir = zipfile.Path(archive, archive.namelist()[0])
+    (tgt / 'sqlitelua').mkdir()
+    for zpath in (archive_root_dir / 'src').iterdir():
+        if zpath.name != 'main.c':
+            with zpath.open() as fr, (tgt / 'sqlitelua' / zpath.name).open('wb') as fw:
+                shutil.copyfileobj(fr, fw)
+
+
 def _get_contrib_functions(tgt: Path):
     request.urlretrieve(contrib_functions_url, tgt / 'extension-functions.c')
 
@@ -70,6 +110,7 @@ def _get_extensions(tgt: Path):
         for url, init_fn in extension_urls:
             logging.info('Downloading and appending to amalgamation %s', url)
             with request.urlopen(url) as resp:
+                f.write(b'\n')
                 shutil.copyfileobj(resp, f)
             init_functions.append(init_fn)
 
@@ -90,6 +131,7 @@ def _get_sqljs(tgt: Path):
 def configure(tgt: Path):
     _get_amalgamation(tgt)
     _get_contrib_functions(tgt)
+    _get_lua(tgt)
     _get_extensions(tgt)
     _get_sqljs(tgt)
 

package.json

@@ -1,62 +1,85 @@
 {
   "name": "sqliteviz",
-  "version": "0.22.0",
+  "version": "0.27.1",
   "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"
   },
   "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.3.1",
+    "papaparse": "^5.4.1",
     "pivottable": "^2.23.0",
-    "plotly.js": "^1.58.4",
+    "plotly.js": "^2.35.2",
     "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.1",
     "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",
+    "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",
-    "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"
+    "eslint-plugin-vue": "^9.28.0",
+    "flush-promises": "^1.0.2",
+    "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",
+    "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"
+    }
   }
 }

public/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
   "background_color": "white",
-  "description": "Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases or CSV.",
+  "description": "Sqliteviz is a single-page application for fully client-side visualisation of SQLite databases, CSV, JSON or NDJSON.",
   "display": "fullscreen",
   "icons": [
     {

src/App.vue

@@ -4,55 +4,42 @@
   </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

@@ -4,3 +4,10 @@
   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,7 +116,7 @@
 }
 
 .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 {

src/assets/styles/tables.css

@@ -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;
@@ -107,3 +108,9 @@ table.sqliteviz-table {
   font-size: 11px;
   color: var(--color-text-base);
 }
+
+.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,7 +4,7 @@
   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);

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: #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-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/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,6 +55,7 @@ export default {
       default: false
     }
   },
+  emits: ['click'],
   data() {
     return {
       checked: this.init

src/components/CsvImport/index.vue

@@ -1,387 +0,0 @@
-<template>
-  <modal
-    :name="dialogName"
-    classes="dialog"
-    height="auto"
-    width="80%"
-    scrollable
-    :clickToClose="false"
-  >
-    <div class="dialog-header">
-      CSV import
-      <close-icon @click="cancelCsvImport" :disabled="disableDialog"/>
-    </div>
-    <div class="dialog-body">
-      <text-field
-        label="Table name"
-        v-model="tableName"
-        width="484px"
-        :disabled="disableDialog"
-        :error-msg="tableNameError"
-        id="csv-table-name"
-      />
-      <div class="chars">
-        <delimiter-selector
-          v-model="delimiter"
-          width="210px"
-          class="char-input"
-          @input="previewCsv"
-          :disabled="disableDialog"
-        />
-        <text-field
-          label="Quote char"
-          hint="The character used to quote fields."
-          v-model="quoteChar"
-          width="93px"
-          :disabled="disableDialog"
-          class="char-input"
-          id="quote-char"
-        />
-        <text-field
-          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"
-          width="93px"
-          :disabled="disableDialog"
-          class="char-input"
-          id="escape-char"
-        />
-      </div>
-      <check-box
-        @click="header = $event"
-        :init="true"
-        label="Use first row as column headers"
-        :disabled="disableDialog"
-      />
-      <sql-table
-        v-if="previewData
-          && (previewData.rowCount > 0 || Object.keys(previewData).length > 0)
-        "
-        :data-set="previewData"
-        class="preview-table"
-        :preview="true"
-      />
-      <div v-else class="no-data">No data</div>
-      <logs
-        class="import-csv-errors"
-        :messages="importCsvMessages"
-      />
-    </div>
-    <div class="dialog-buttons-container">
-      <button
-        class="secondary"
-        :disabled="disableDialog"
-        @click="cancelCsvImport"
-        id="csv-cancel"
-      >
-        Cancel
-      </button>
-      <button
-        v-show="!importCsvCompleted"
-        class="primary"
-        :disabled="disableDialog"
-        @click="loadFromCsv(file)"
-        id="csv-import"
-      >
-        Import
-      </button>
-      <button
-        v-show="importCsvCompleted"
-        class="primary"
-        :disabled="disableDialog"
-        @click="finish"
-        id="csv-finish"
-      >
-        Finish
-      </button>
-    </div>
-  </modal>
-</template>
-
-<script>
-import csv from '@/lib/csv'
-import CloseIcon from '@/components/svg/close'
-import TextField from '@/components/TextField'
-import DelimiterSelector from './DelimiterSelector'
-import CheckBox from '@/components/CheckBox'
-import SqlTable from '@/components/SqlTable'
-import Logs from '@/components/Logs'
-import time from '@/lib/utils/time'
-import fIo from '@/lib/utils/fileIo'
-import events from '@/lib/utils/events'
-
-export default {
-  name: 'CsvImport',
-  components: {
-    CloseIcon,
-    TextField,
-    DelimiterSelector,
-    CheckBox,
-    SqlTable,
-    Logs
-  },
-  props: ['file', 'db', 'dialogName'],
-  data () {
-    return {
-      disableDialog: false,
-      tableName: '',
-      delimiter: '',
-      quoteChar: '"',
-      escapeChar: '"',
-      header: true,
-      importCsvCompleted: false,
-      importCsvMessages: [],
-      previewData: null,
-      addedTable: null,
-      tableNameError: ''
-    }
-  },
-  watch: {
-    quoteChar () {
-      this.previewCsv()
-    },
-
-    escapeChar () {
-      this.previewCsv()
-    },
-
-    header () {
-      this.previewCsv()
-    },
-    tableName: time.debounce(function () {
-      this.tableNameError = ''
-      if (!this.tableName) {
-        return
-      }
-      this.db.validateTableName(this.tableName)
-        .catch(err => {
-          this.tableNameError = err.message + '. Try another table name.'
-        })
-    }, 400)
-  },
-  methods: {
-    cancelCsvImport () {
-      if (!this.disableDialog) {
-        if (this.addedTable) {
-          this.db.execute(`DROP TABLE "${this.addedTable}"`)
-          this.db.refreshSchema()
-        }
-        this.$modal.hide(this.dialogName)
-        this.$emit('cancel')
-      }
-    },
-    reset () {
-      this.header = true
-      this.quoteChar = '"'
-      this.escapeChar = '"'
-      this.delimiter = ''
-      this.tableName = ''
-      this.disableDialog = false
-      this.importCsvCompleted = false
-      this.importCsvMessages = []
-      this.previewData = null
-      this.addedTable = null
-      this.tableNameError = ''
-    },
-    open () {
-      this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
-      this.$modal.show(this.dialogName)
-    },
-    async previewCsv () {
-      this.importCsvCompleted = false
-      const config = {
-        preview: 3,
-        quoteChar: this.quoteChar || '"',
-        escapeChar: this.escapeChar,
-        header: this.header,
-        delimiter: this.delimiter
-      }
-      try {
-        const start = new Date()
-        const parseResult = await csv.parse(this.file, config)
-        const end = new Date()
-        this.previewData = parseResult.data
-        this.delimiter = parseResult.delimiter
-
-        // In parseResult.messages we can get parse errors
-        this.importCsvMessages = parseResult.messages || []
-
-        if (!parseResult.hasErrors) {
-          this.importCsvMessages.push({
-            message: `Preview parsing is completed in ${time.getPeriod(start, end)}.`,
-            type: 'success'
-          })
-        }
-      } catch (err) {
-        this.importCsvMessages = [{
-          message: err,
-          type: 'error'
-        }]
-      }
-    },
-    async loadFromCsv (file) {
-      if (!this.tableName) {
-        this.tableNameError = "Table name can't be empty"
-        return
-      }
-
-      this.disableDialog = true
-      const config = {
-        quoteChar: this.quoteChar || '"',
-        escapeChar: this.escapeChar,
-        header: this.header,
-        delimiter: this.delimiter
-      }
-      const parseCsvMsg = {
-        message: 'Parsing CSV...',
-        type: 'info'
-      }
-      this.importCsvMessages.push(parseCsvMsg)
-      const parseCsvLoadingIndicator = setTimeout(() => { parseCsvMsg.type = 'loading' }, 1000)
-
-      const importMsg = {
-        message: 'Importing CSV into a SQLite database...',
-        type: 'info'
-      }
-      let importLoadingIndicator = null
-
-      const updateProgress = progress => {
-        this.$set(importMsg, 'progress', progress)
-      }
-      const progressCounterId = this.db.createProgressCounter(updateProgress)
-
-      try {
-        let start = new Date()
-        const parseResult = await csv.parse(this.file, config)
-        let end = new Date()
-
-        if (!parseResult.hasErrors) {
-          const rowCount = parseResult.rowCount
-          let period = time.getPeriod(start, end)
-          parseCsvMsg.type = 'success'
-
-          if (parseResult.messages.length > 0) {
-            this.importCsvMessages = this.importCsvMessages.concat(parseResult.messages)
-            parseCsvMsg.message = `${rowCount} rows are parsed in ${period}.`
-          } else {
-            // Inform about csv parsing success
-            parseCsvMsg.message = `${rowCount} rows are parsed successfully in ${period}.`
-          }
-
-          // Loading indicator for csv parsing is not needed anymore
-          clearTimeout(parseCsvLoadingIndicator)
-
-          // Add info about import start
-          this.importCsvMessages.push(importMsg)
-
-          // Show import progress after 1 second
-          importLoadingIndicator = setTimeout(() => {
-            importMsg.type = 'loading'
-          }, 1000)
-
-          // Add table
-          start = new Date()
-          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 CSV into a SQLite database is completed in ${period}.`
-          importMsg.type = 'success'
-
-          // Loading indicator for import is not needed anymore
-          clearTimeout(importLoadingIndicator)
-
-          this.importCsvCompleted = true
-        } else {
-          parseCsvMsg.message = 'Parsing ended with errors.'
-          parseCsvMsg.type = 'info'
-          this.importCsvMessages = this.importCsvMessages.concat(parseResult.messages)
-        }
-      } catch (err) {
-        if (parseCsvMsg.type === 'loading') {
-          parseCsvMsg.type = 'info'
-        }
-
-        if (importMsg.type === 'loading') {
-          importMsg.type = 'info'
-        }
-
-        this.importCsvMessages.push({
-          message: err,
-          type: 'error'
-        })
-      }
-
-      clearTimeout(parseCsvLoadingIndicator)
-      clearTimeout(importLoadingIndicator)
-      this.db.deleteProgressCounter(progressCounterId)
-      this.disableDialog = false
-    },
-    async finish () {
-      this.$modal.hide(this.dialogName)
-      const stmt = [
-        '/*',
-        ` * 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')
-      const tabId = await this.$store.dispatch('addTab', { query: stmt })
-      this.$store.commit('setCurrentTabId', tabId)
-      this.importCsvCompleted = false
-      this.$emit('finish')
-      events.send('inquiry.create', null, { auto: true })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.dialog-body {
-  padding-bottom: 0;
-}
-
-.chars {
-  display: flex;
-  align-items: flex-end;
-  margin: 24px 0 20px;
-}
-.char-input {
-  margin-right: 44px;
-}
-.preview-table {
-  margin-top: 18px;
-}
-
-.import-csv-errors {
-  height: 136px;
-  margin-top: 8px;
-}
-.no-data {
-  margin-top: 32px;
-  background-color: white;
-  border-radius: 5px;
-  position: relative;
-  border: 1px solid var(--color-border-light);
-  box-sizing: border-box;
-  height: 147px;
-  font-size: 13px;
-  color: var(--color-text-base);
-  display: flex;
-  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/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,21 +8,21 @@
     >
       <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"/>
+        <clear-icon :disabled="disabled" @click="clear" />
         <drop-down-chevron
           :disabled="disabled"
-          @click.native="!disabled && (showOptions = !showOptions)"
+          @click="!disabled && (showOptions = !showOptions)"
         />
       </div>
     </div>
@@ -30,10 +30,11 @@
       <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>
@@ -46,8 +47,13 @@ import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  props: ['value', 'width', 'disabled'],
   components: { DropDownChevron, ClearIcon },
+  props: {
+    modelValue: String,
+    width: String,
+    disabled: Boolean
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
       showOptions: false,
@@ -60,8 +66,8 @@ export default {
     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
@@ -69,7 +75,7 @@ export default {
     }
   },
   created() {
-    this.inputValue = this.value
+    this.inputValue = this.modelValue
   },
   methods: {
     getSymbolName(str) {
@@ -82,7 +88,7 @@ export default {
       this.inputValue = option
       this.showOptions = false
     },
-    onContainerClick (event) {
+    onContainerClick() {
       this.$refs.delimiterInput.focus()
     },
 

src/components/CsvJsonImport/index.vue

@@ -0,0 +1,518 @@
+<template>
+  <modal
+    :modalId="dialogName"
+    class="dialog"
+    contentClass="import-modal"
+    scrollable
+    :clickToClose="false"
+  >
+    <div class="dialog-header">
+      {{ typeName }} import
+      <close-icon :disabled="disableDialog" @click="cancelImport" />
+    </div>
+    <div class="dialog-body">
+      <text-field
+        id="csv-json-table-name"
+        v-model="tableName"
+        label="Table name"
+        width="484px"
+        :disabled="disableDialog"
+        :errorMsg="tableNameError"
+      />
+      <div v-if="!isJson && !isNdJson" class="chars">
+        <delimiter-selector
+          v-model="delimiter"
+          width="210px"
+          class="char-input"
+          :disabled="disableDialog"
+          @input="preview"
+        />
+        <text-field
+          id="quote-char"
+          v-model="quoteChar"
+          label="Quote char"
+          hint="The character used to quote fields."
+          width="93px"
+          :disabled="disableDialog"
+          class="char-input"
+          @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").
+          '
+          maxHintWidth="242px"
+          width="93px"
+          :disabled="disableDialog"
+          class="char-input"
+          @input="preview"
+        />
+      </div>
+      <check-box
+        v-if="!isJson && !isNdJson"
+        :init="header"
+        label="Use first row as column headers"
+        :disabled="disableDialog"
+        @click="changeHeaderDisplaying"
+      />
+      <sql-table
+        v-if="previewData && previewData.rowCount > 0"
+        :data-set="previewData"
+        :preview="true"
+        class="preview-table"
+      />
+      <div v-else class="no-data">No data</div>
+      <logs class="import-errors" :messages="importMessages" />
+    </div>
+    <div class="dialog-buttons-container">
+      <button
+        id="import-cancel"
+        class="secondary"
+        :disabled="disableDialog"
+        @click="cancelImport"
+      >
+        Cancel
+      </button>
+      <button
+        v-show="!importCompleted"
+        id="import-start"
+        class="primary"
+        :disabled="disableDialog || disableImport"
+        @click="loadToDb(file)"
+      >
+        Import
+      </button>
+      <button
+        v-show="importCompleted"
+        id="import-finish"
+        class="primary"
+        :disabled="disableDialog"
+        @click="finish"
+      >
+        Finish
+      </button>
+    </div>
+  </modal>
+</template>
+
+<script>
+import csv from '@/lib/csv'
+import CloseIcon from '@/components/svg/close'
+import TextField from '@/components/TextField'
+import DelimiterSelector from './DelimiterSelector'
+import CheckBox from '@/components/CheckBox'
+import SqlTable from '@/components/SqlTable'
+import Logs from '@/components/Logs'
+import time from '@/lib/utils/time'
+import fIo from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
+
+export default {
+  name: 'CsvJsonImport',
+  components: {
+    CloseIcon,
+    TextField,
+    DelimiterSelector,
+    CheckBox,
+    SqlTable,
+    Logs
+  },
+  props: {
+    file: File,
+    db: Object,
+    dialogName: String
+  },
+  emits: ['cancel', 'finish'],
+  data() {
+    return {
+      disableDialog: false,
+      disableImport: false,
+      tableName: '',
+      delimiter: '',
+      quoteChar: '"',
+      escapeChar: '"',
+      header: true,
+      importCompleted: false,
+      importMessages: [],
+      previewData: null,
+      addedTable: null,
+      tableNameError: ''
+    }
+  },
+  computed: {
+    isJson() {
+      return fIo.isJSON(this.file)
+    },
+    isNdJson() {
+      return fIo.isNDJSON(this.file)
+    },
+    typeName() {
+      return this.isJson || this.isNdJson ? 'JSON' : 'CSV'
+    }
+  },
+  watch: {
+    isJson() {
+      if (this.isJson) {
+        this.delimiter = '\u001E'
+        this.header = false
+      }
+    },
+    isNdJson() {
+      if (this.isNdJson) {
+        this.delimiter = '\u001E'
+        this.header = false
+      }
+    },
+    tableName: time.debounce(function () {
+      this.tableNameError = ''
+      if (!this.tableName) {
+        return
+      }
+      this.db.validateTableName(this.tableName).catch(err => {
+        this.tableNameError = err.message + '. Try another table name.'
+      })
+    }, 400)
+  },
+  methods: {
+    changeHeaderDisplaying(e) {
+      this.header = e
+      this.preview()
+    },
+    cancelImport() {
+      if (!this.disableDialog) {
+        if (this.addedTable) {
+          this.db.execute(`DROP TABLE "${this.addedTable}"`)
+          this.db.refreshSchema()
+        }
+        this.$modal.hide(this.dialogName)
+        this.$emit('cancel')
+      }
+    },
+    reset() {
+      this.header = !this.isJson && !this.isNdJson
+      this.quoteChar = '"'
+      this.escapeChar = '"'
+      this.delimiter = !this.isJson && !this.isNdJson ? '' : '\u001E'
+      this.tableName = ''
+      this.disableDialog = false
+      this.disableImport = false
+      this.importCompleted = false
+      this.importMessages = []
+      this.previewData = null
+      this.addedTable = null
+      this.tableNameError = ''
+    },
+    open() {
+      this.tableName = this.db.sanitizeTableName(fIo.getFileName(this.file))
+      this.$modal.show(this.dialogName)
+    },
+    async preview() {
+      this.disableImport = false
+      if (!this.file) {
+        return
+      }
+      this.importCompleted = false
+      const config = {
+        preview: 3,
+        quoteChar: this.quoteChar || '"',
+        escapeChar: this.escapeChar,
+        header: this.header,
+        delimiter: this.delimiter,
+        columns: !this.isJson && !this.isNdJson ? null : ['doc']
+      }
+      try {
+        const start = new Date()
+        const parseResult = this.isJson
+          ? await this.getJsonParseResult(this.file)
+          : await csv.parse(this.file, config)
+        const end = new Date()
+        this.previewData = parseResult.data
+        this.previewData.rowCount = parseResult.rowCount
+        this.delimiter = parseResult.delimiter
+
+        // In parseResult.messages we can get parse errors
+        this.importMessages = parseResult.messages || []
+
+        if (this.previewData.rowCount === 0) {
+          this.disableImport = true
+          this.importMessages.push({
+            type: 'info',
+            message: 'No rows to import.'
+          })
+        }
+
+        if (!parseResult.hasErrors) {
+          this.importMessages.push({
+            message: `Preview parsing is completed in ${time.getPeriod(start, end)}.`,
+            type: 'success'
+          })
+        }
+      } catch (err) {
+        console.error(err)
+        this.importMessages = [
+          {
+            message: err,
+            type: 'error'
+          }
+        ]
+      }
+    },
+    async getJsonParseResult(file) {
+      const jsonContent = await fIo.getFileContent(file)
+      const isEmpty = !jsonContent.trim()
+      return {
+        data: {
+          columns: ['doc'],
+          values: { doc: !isEmpty ? [jsonContent] : [] }
+        },
+        hasErrors: false,
+        messages: [],
+        rowCount: +!isEmpty
+      }
+    },
+    async loadToDb(file) {
+      if (!this.tableName) {
+        this.tableNameError = "Table name can't be empty"
+        return
+      }
+
+      this.disableDialog = true
+      const config = {
+        quoteChar: this.quoteChar || '"',
+        escapeChar: this.escapeChar,
+        header: this.header,
+        delimiter: this.delimiter,
+        columns: !this.isJson && !this.isNdJson ? null : ['doc']
+      }
+      let parsingMsg = {}
+      this.importMessages.push({
+        message: `Parsing ${this.typeName}...`,
+        type: 'info'
+      })
+      // Get *reactive* link to parsing message for later updates
+      parsingMsg = this.importMessages[this.importMessages.length - 1]
+      const parsingLoadingIndicator = setTimeout(() => {
+        parsingMsg.type = 'loading'
+      }, 1000)
+
+      let importMsg = {}
+      let importLoadingIndicator = null
+
+      const updateProgress = progress => {
+        importMsg.progress = progress
+      }
+      const progressCounterId = this.db.createProgressCounter(updateProgress)
+
+      try {
+        let start = new Date()
+        const parseResult = this.isJson
+          ? await this.getJsonParseResult(file)
+          : await csv.parse(this.file, config)
+
+        let end = new Date()
+
+        if (!parseResult.hasErrors) {
+          const rowCount = parseResult.rowCount
+          let period = time.getPeriod(start, end)
+          parsingMsg.type = 'success'
+
+          if (parseResult.messages.length > 0) {
+            this.importMessages = this.importMessages.concat(
+              parseResult.messages
+            )
+            parsingMsg.message = `${rowCount} rows are parsed in ${period}.`
+          } else {
+            // Inform about parsing success
+            parsingMsg.message = `${rowCount} rows are parsed successfully in ${period}.`
+          }
+
+          // Loading indicator for parsing is not needed anymore
+          clearTimeout(parsingLoadingIndicator)
+
+          // Add info about import start
+          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(() => {
+            importMsg.type = 'loading'
+          }, 1000)
+
+          // Add table
+          start = new Date()
+          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.type = 'success'
+
+          // Loading indicator for import is not needed anymore
+          clearTimeout(importLoadingIndicator)
+
+          this.importCompleted = true
+        } else {
+          parsingMsg.message = 'Parsing ended with errors.'
+          parsingMsg.type = 'info'
+          this.importMessages = this.importMessages.concat(parseResult.messages)
+        }
+      } catch (err) {
+        console.error(err)
+        if (parsingMsg.type === 'loading') {
+          parsingMsg.type = 'info'
+        }
+
+        if (importMsg.type === 'loading') {
+          importMsg.type = 'info'
+        }
+
+        this.importMessages.push({
+          message: err,
+          type: 'error'
+        })
+      }
+
+      clearTimeout(parsingLoadingIndicator)
+      clearTimeout(importLoadingIndicator)
+      this.db.deleteProgressCounter(progressCounterId)
+      this.disableDialog = false
+    },
+    async finish() {
+      this.$modal.hide(this.dialogName)
+      const stmt = this.getQueryExample()
+      const tabId = await this.$store.dispatch('addTab', { query: stmt })
+      this.$store.commit('setCurrentTabId', tabId)
+      this.importCompleted = false
+      this.$emit('finish')
+      events.send('inquiry.create', null, { auto: true })
+    },
+    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')
+    },
+    getNdJsonQueryExample() {
+      try {
+        const firstRowJson = JSON.parse(this.previewData.values.doc[0])
+        const firstKey = Object.keys(firstRowJson)[0]
+        return [
+          '/*',
+          ` * 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.',
+          ' */',
+          `SELECT doc->>'${firstKey}'`,
+          `FROM "${this.addedTable}"`
+        ].join('\n')
+      } catch (err) {
+        console.error(err)
+        return [
+          '/*',
+          ` * Your NDJSON file has been imported into ${this.addedTable} table.`,
+          ' */',
+          'SELECT *',
+          `FROM "${this.addedTable}"`
+        ].join('\n')
+      }
+    },
+    getJsonQueryExample() {
+      try {
+        const firstRowJson = JSON.parse(this.previewData.values.doc[0])
+        const firstKey = Object.keys(firstRowJson)[0]
+        return [
+          '/*',
+          ` * 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.',
+          ' */',
+          'SELECT *',
+          `FROM "${this.addedTable}"`,
+          `JOIN json_each(doc, '$.${firstKey}')`
+        ].join('\n')
+      } catch (err) {
+        console.error(err)
+        return [
+          '/*',
+          ` * Your NDJSON file has been imported into ${this.addedTable} table.`,
+          ' */',
+          'SELECT *',
+          `FROM "${this.addedTable}"`
+        ].join('\n')
+      }
+    }
+  }
+}
+</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;
+}
+
+.chars {
+  display: flex;
+  align-items: flex-end;
+  margin: 0 0 20px;
+}
+.char-input {
+  margin-right: 44px;
+}
+.preview-table {
+  margin-top: 18px;
+}
+
+.import-errors {
+  height: 136px;
+  margin-top: 8px;
+}
+.no-data {
+  margin-top: 32px;
+  background-color: white;
+  border-radius: 5px;
+  position: relative;
+  border: 1px solid var(--color-border-light);
+  box-sizing: border-box;
+  height: 147px;
+  font-size: 13px;
+  color: var(--color-text-base);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/components/DbUploader.vue

@@ -10,44 +10,45 @@
         @click="browse"
       >
         <div class="text">
-          Drop the database or CSV 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>
 
-    <!--Parse csv dialog  -->
-    <csv-import
-      ref="addCsv"
+    <!--Parse csv or json dialog  -->
+    <csv-json-import
+      ref="addCsvJson"
       :file="file"
       :db="newDb"
-      dialog-name="importFromCsv"
-      @cancel="cancelCsvImport"
+      dialogName="importFromCsvJson"
+      @cancel="cancelImport"
       @finish="finish"
     />
   </div>
@@ -57,17 +58,21 @@
 import fIo from '@/lib/utils/fileIo'
 import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
-import CsvImport from '@/components/CsvImport'
+import CsvJsonImport from '@/components/CsvJsonImport'
 import events from '@/lib/utils/events'
 
 export default {
   name: 'DbUploader',
+  components: {
+    ChangeDbIcon,
+    CsvJsonImport
+  },
   props: {
     type: {
       type: String,
       required: false,
       default: 'small',
-      validator: (value) => {
+      validator: value => {
         return ['illustrated', 'small'].includes(value)
       }
     },
@@ -77,10 +82,7 @@ export default {
       default: 'unset'
     }
   },
-  components: {
-    ChangeDbIcon,
-    CsvImport
-  },
+  emits: [],
   data() {
     return {
       state: '',
@@ -91,7 +93,7 @@ export default {
   },
   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'
@@ -102,7 +104,7 @@ export default {
     }
   },
   methods: {
-    cancelCsvImport () {
+    cancelImport() {
       if (this.newDb) {
         this.newDb.shutDown()
         this.newDb = null
@@ -117,8 +119,9 @@ export default {
     },
 
     loadDb(file) {
-      return Promise.all([this.newDb.loadDb(file), this.animationPromise])
-        .then(this.finish)
+      return Promise.all([this.newDb.loadDb(file), this.animationPromise]).then(
+        this.finish
+      )
     },
 
     async checkFile(file) {
@@ -128,21 +131,25 @@ export default {
       if (fIo.isDatabase(file)) {
         this.loadDb(file)
       } else {
+        const isJson = fIo.isJSON(file) || fIo.isNDJSON(file)
         events.send('database.import', file.size, {
-          from: 'csv',
+          from: isJson ? 'json' : 'csv',
           new_db: true
         })
 
         this.file = file
         await this.$nextTick()
-        const csvImport = this.$refs.addCsv
-        csvImport.reset()
-        return Promise.all([csvImport.previewCsv(), this.animationPromise])
-          .then(csvImport.open)
+        const csvJsonImportModal = this.$refs.addCsvJson
+        csvJsonImportModal.reset()
+        return Promise.all([
+          csvJsonImportModal.preview(),
+          this.animationPromise
+        ]).then(csvJsonImportModal.open)
       }
     },
     browse() {
-      fIo.getFileFromUser('.db,.sqlite,.sqlite3,.csv')
+      fIo
+        .getFileFromUser('.db,.sqlite,.sqlite3,.csv,.json,.ndjson')
         .then(this.checkFile)
     },
 
@@ -243,8 +250,12 @@ export default {
   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,117 @@
+<template>
+  <Field label="Scaling ratio">
+    <NumericInput
+      :value="modelValue.scalingRatio"
+      @update="update('scalingRatio', $event)"
+    />
+  </Field>
+
+  <Field label="Prevent overlapping">
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.adjustSizes"
+      @option-change="update('adjustSizes', $event)"
+    />
+  </Field>
+
+  <Field label="Barnes-Hut optimize">
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.barnesHutOptimize"
+      @option-change="update('barnesHutOptimize', $event)"
+    />
+  </Field>
+
+  <Field v-show="modelValue.barnesHutOptimize" label="Barnes-Hut Theta">
+    <NumericInput
+      :value="modelValue.barnesHutTheta"
+      @update="update('barnesHutTheta', $event)"
+    />
+  </Field>
+
+  <Field label="Strong gravity mode">
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.strongGravityMode"
+      @option-change="update('strongGravityMode', $event)"
+    />
+  </Field>
+
+  <Field label="Noack's LinLog model">
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.linLogMode"
+      @option-change="update('linLogMode', $event)"
+    />
+  </Field>
+
+  <Field label="Out bound attraction distribution">
+    <RadioBlocks
+      :options="booleanOptions"
+      :activeOption="modelValue.outboundAttractionDistribution"
+      @option-change="update('outboundAttractionDistribution', $event)"
+    />
+  </Field>
+
+  <Field label="Slow down">
+    <NumericInput
+      :value="modelValue.slowDown"
+      :min="0"
+      @update="update('slowDown', $event)"
+    />
+  </Field>
+
+  <Field label="Edge weight">
+    <Dropdown
+      :options="keyOptions"
+      :value="modelValue.weightSource"
+      @change="update('weightSource', $event)"
+    />
+  </Field>
+  <Field v-show="modelValue.weightSource" label="Edge 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,77 @@
+<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">
+    <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 Dropdown from 'react-chart-editor/lib/components/widgets/Dropdown'
+import Multiselect from 'vue-multiselect'
+import 'react-chart-editor/lib/react-chart-editor.css'
+
+export default {
+  components: {
+    Field: applyPureReactInVue(Field),
+    NumericInput: applyPureReactInVue(NumericInput),
+    Dropdown: applyPureReactInVue(Dropdown),
+    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,143 @@
+<template>
+  <Field label="Color">
+    <RadioBlocks
+      :options="edgeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field v-if="modelValue.type === 'constant'">
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field>
+        <Dropdown
+          v-if="modelValue.type === 'variable'"
+          :options="keyOptions"
+          :value="modelValue.source"
+          @change="updateSettings('source', $event)"
+        />
+      </Field>
+
+      <Field>
+        <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"
+  >
+    <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"
+  >
+    <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: 'Recersed', 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">
+    <RadioBlocks
+      :options="edgeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field>
+      <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">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size">
+      <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,43 @@
+<template>
+  <Field label="Initial iterations">
+    <NumericInput
+      :value="modelValue.initialIterationsAmount"
+      :min="1"
+      @update="update('initialIterationsAmount', $event)"
+    />
+  </Field>
+
+  <Field label="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/NodeColorSettings.vue

@@ -0,0 +1,161 @@
+<template>
+  <Field label="Color">
+    <RadioBlocks
+      :options="nodeColorTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateColorType"
+    />
+    <Field v-if="modelValue.type === 'constant'">
+      <ColorPicker
+        :selectedColor="modelValue.value"
+        @color-change="updateSettings('value', $event)"
+      />
+    </Field>
+    <template v-else>
+      <Field>
+        <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"
+          @change="updateSettings('method', $event)"
+        />
+      </Field>
+
+      <Field v-if="modelValue.type === 'variable'">
+        <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"
+  >
+    <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"
+  >
+    <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 {
+      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: 'Recersed', 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'
+        },
+        calculated: {
+          method: 'degree',
+          sourceUsage: 'map_to',
+          colorscale: null,
+          mode: 'continious',
+          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/NodeSizeSettings.vue

@@ -0,0 +1,118 @@
+<template>
+  <Field label="Size">
+    <RadioBlocks
+      :options="nodeSizeTypeOptions"
+      :activeOption="modelValue.type"
+      @option-change="updateSizeType"
+    />
+
+    <Field>
+      <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)"
+      />
+      <Dropdown
+        v-if="modelValue.type === 'calculated'"
+        :options="nodeCalculatedSizeMethodOptions"
+        :value="modelValue.method"
+        @change="updateSettings('method', $event)"
+      />
+    </Field>
+  </Field>
+
+  <template v-if="modelValue.type !== 'constant'">
+    <Field label="Size scale">
+      <NumericInput
+        :value="modelValue.scale"
+        @update="updateSettings('scale', $event)"
+      />
+    </Field>
+
+    <Field label="Size mode">
+      <RadioBlocks
+        :options="nodeSizeModeOptions"
+        :activeOption="modelValue.mode"
+        @option-change="updateSettings('mode', $event)"
+      />
+    </Field>
+
+    <Field label="Minimum size">
+      <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">
+    <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/IconButton.vue

@@ -1,6 +1,7 @@
 <template>
-  <div
-    :class="['icon-btn', { active }, { disabled }]"
+  <button
+    :class="['icon-btn', { active }]"
+    :disabled="disabled"
     @click="onClick"
     @mouseenter="showTooltip($event, tooltipPosition)"
     @mouseleave="hideTooltip"
@@ -9,10 +10,15 @@
     <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"
+    >
       {{ tooltip }}
     </span>
-  </div>
+  </button>
 </template>
 
 <script>
@@ -21,9 +27,16 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 
 export default {
   name: 'SideBarButton',
-  props: ['active', 'disabled', 'tooltip', 'tooltipPosition', 'loading'],
   components: { LoadingIndicator },
   mixins: [tooltipMixin],
+  props: {
+    active: Boolean,
+    disabled: Boolean,
+    tooltip: String,
+    tooltipPosition: String,
+    loading: Boolean
+  },
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()
@@ -38,35 +51,36 @@ export default {
   box-sizing: border-box;
   width: 26px;
   height: 26px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+  background-color: transparent;
+  border: none;
 }
 .icon-btn: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 {
+.icon-btn:hover .icon :deep(path),
+.icon-btn.active .icon :deep(path),
+.icon-btn:hover .icon :deep(circle),
+.icon-btn.active .icon :deep(circle) {
   fill: var(--color-accent);
 }
 
-.disabled.icon-btn  .icon >>> path,
-.disabled.icon-btn  .icon >>> circle {
+.icon-btn:disabled .icon :deep(path),
+.icon-btn:disabled .icon :deep(circle) {
   fill: var(--color-border);
 }
 
-.disabled.icon-btn {
+.icon-btn:disabled {
   cursor: default;
   pointer-events: none;
 }
 
-.disabled.icon-btn:hover .icon >>> path {
+.disabled.icon-btn:hover .icon :deep(path) {
   fill: var(--color-border);
 }
 

src/components/LoadingDialog.vue

@@ -1,13 +1,15 @@
 <template>
   <modal
-    :name="name"
-    classes="dialog"
-    height="auto"
+    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 }}
-      <close-icon @click="$emit('cancel')" :disabled="loading"/>
+      <close-icon :disabled="loading" @click="cancel" />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
@@ -15,20 +17,25 @@
         {{ loadingMsg }}
       </div>
       <div v-else class="loading-dialog-body">
-        <img :src="require('@/assets/images/success.svg')" class="success-icon state-icon" />
+        <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="$emit('cancel')"
+        @click="cancel"
       >
         Cancel
       </button>
       <button
         class="primary"
+        type="button"
         :disabled="loading"
         @click="$emit('action')"
       >
@@ -43,31 +50,66 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 import CloseIcon from '@/components/svg/close'
 
 export default {
-  name: 'loadingDialog',
+  name: 'LoadingDialog',
+  components: { LoadingIndicator, CloseIcon },
   props: {
+    modelValue: Boolean,
     loadingMsg: String,
     successMsg: String,
     actionBtnName: String,
-    name: 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.$modal.show(this.name)
+        this.$emit('update:modelValue', true)
       }
     }
   },
-  components: { LoadingIndicator, CloseIcon },
   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;

src/components/LoadingIndicator.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg :class="animationClass" :height="size" :width="size" :viewBox="`0 0 ${size} ${size}`">
+  <svg
+    :class="animationClass"
+    :height="size"
+    :width="size"
+    :viewBox="`0 0 ${size} ${size}`"
+  >
     <circle
       class="loader-svg bg"
       :style="{ strokeWidth }"
@@ -9,7 +14,11 @@
     />
     <circle
       class="loader-svg front"
-      :style="{ strokeDasharray: circleProgress, strokeDashoffset: offset, strokeWidth }"
+      :style="{
+        strokeDasharray: circleProgress,
+        strokeDashoffset: offset,
+        strokeWidth
+      }"
       :cx="size / 2"
       :cy="size / 2"
       :r="radius"
@@ -31,10 +40,13 @@ export default {
       default: 20
     }
   },
+  emits: [],
   computed: {
     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`
     },
@@ -45,7 +57,7 @@ export default {
       return this.size / 2 - this.strokeWidth
     },
     offset() {
-      return this.radius * 3.14 / 2
+      return (this.radius * 3.14) / 2
     },
     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);
@@ -111,5 +126,4 @@ export default {
     r: 8;
   }
 }
-
 </style>

src/components/Logs.vue

@@ -1,10 +1,17 @@
 <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>
@@ -14,9 +21,10 @@
 import LoadingIndicator from '@/components/LoadingIndicator'
 
 export default {
-  name: 'logs',
-  props: ['messages'],
+  name: 'Logs',
   components: { LoadingIndicator },
+  props: { messages: Array },
+  emits: [],
   watch: {
     'messages.length': 'scrollToBottom'
   },
@@ -43,7 +51,7 @@ export default {
       }
 
       result += msg.message
-      if (!(/(\.|!|\?)$/.test(result))) {
+      if (!/(\.|!|\?)$/.test(result)) {
         result += '.'
       }
 

src/components/Splitpanes/index.vue

@@ -7,10 +7,14 @@
       { 'splitpanes-dragging': dragging }
     ]"
   >
-    <div class="movable-splitter" ref="movableSplitter" :style="movableSplitterStyle" />
     <div
-      class="splitpanes-pane"
+      ref="movableSplitter"
+      class="movable-splitter"
+      :style="movableSplitterStyle"
+    />
+    <div
       ref="left"
+      class="splitpanes-pane"
       :size="paneBefore.size"
       max-size="30"
       :style="styles.before"
@@ -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,18 +57,14 @@
         >
           <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"
-      ref="right"
-      :style="styles.after"
-    >
+    <div ref="right" class="splitpanes-pane" :style="styles.after">
       <slot name="right-pane" />
     </div>
   </div>
@@ -75,14 +78,27 @@ export default {
   props: {
     horizontal: { type: Boolean, default: false },
     before: { type: Object },
-    after: { type: Object }
+    after: { type: Object },
+    default: {
+      type: Object,
+      default: () => {
+        return {
+          before: 50,
+          after: 50
+        }
+      }
+    }
   },
+  emits: [],
   data() {
     return {
       container: null,
       paneBefore: this.before,
       paneAfter: this.after,
-      beforeMinimising: {
+      beforeMinimising:
+        !this.after.size || !this.before.size
+          ? this.default
+          : {
               before: this.before.size,
               after: this.after.size
             },
@@ -97,8 +113,12 @@ export default {
   computed: {
     styles() {
       return {
-        before: { [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%` },
-        after: { [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%` }
+        before: {
+          [this.horizontal ? 'height' : 'width']: `${this.paneBefore.size}%`
+        },
+        after: {
+          [this.horizontal ? 'height' : 'width']: `${this.paneAfter.size}%`
+        }
       }
     },
     movableSplitterStyle() {
@@ -138,25 +158,36 @@ export default {
       }
     }
   },
+  mounted() {
+    this.container = this.$refs.container
+  },
 
   methods: {
     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 })
+      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)
       }
     },
@@ -206,16 +237,14 @@ export default {
         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>
@@ -227,9 +256,15 @@ export default {
   position: relative;
 }
 
-.splitpanes-vertical {flex-direction: row;}
-.splitpanes-horizontal {flex-direction: column;}
-.splitpanes-dragging * {user-select: none;}
+.splitpanes-vertical {
+  flex-direction: row;
+}
+.splitpanes-horizontal {
+  flex-direction: column;
+}
+.splitpanes-dragging * {
+  user-select: none;
+}
 
 .splitpanes-pane {
   width: 100%;
@@ -276,7 +311,7 @@ export default {
 .splitpanes-vertical > .movable-splitter {
   width: 8px;
   z-index: 5;
-  height: 100%
+  height: 100%;
 }
 
 .splitpanes-horizontal > .splitpanes-splitter,
@@ -327,20 +362,32 @@ export default {
   left: 50%;
 }
 
-.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
+.splitpanes-horizontal
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:first-child {
   border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
 }
 
-.splitpanes-horizontal > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
+.splitpanes-horizontal
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:last-child {
   border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   margin-left: -1px;
 }
 
-.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:first-child {
+.splitpanes-vertical
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:first-child {
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
 
-.splitpanes-vertical > .splitpanes-splitter .toggle-btns.both .toggle-btn:last-child {
+.splitpanes-vertical
+  > .splitpanes-splitter
+  .toggle-btns.both
+  .toggle-btn:last-child {
   border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
   margin-top: -1px;
 }

src/components/Splitpanes/splitter.js

@@ -2,9 +2,8 @@ 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
+    const { clientX, clientY } =
+      'ontouchstart' in window && event.touches ? event.touches[0] : event
     return {
       x: clientX - rect.left,
       y: clientY - rect.top
@@ -15,20 +14,32 @@ export default {
   getCurrentDragPercentage(event, container, isHorisontal) {
     let drag = this.getCurrentMouseDrag(event, container)
     drag = drag[isHorisontal ? 'y' : 'x']
-    const containerSize = container[isHorisontal ? 'clientHeight' : 'clientWidth']
-    return drag * 100 / containerSize
+    const containerSize =
+      container[isHorisontal ? 'clientHeight' : 'clientWidth']
+    return (drag * 100) / containerSize
   },
 
   // Returns the new position in percents.
-  calculateOffset (event, { container, isHorisontal, paneBeforeMax, paneAfterMax }) {
-    const dragPercentage = this.getCurrentDragPercentage(event, container, isHorisontal)
+  calculateOffset(
+    event,
+    { container, isHorisontal, paneBeforeMax, paneAfterMax }
+  ) {
+    const dragPercentage = this.getCurrentDragPercentage(
+      event,
+      container,
+      isHorisontal
+    )
 
-    const paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
-    const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)
+    const paneBeforeMaxReached =
+      paneBeforeMax < 100 && dragPercentage >= paneBeforeMax
+    const paneAfterMaxReached =
+      paneAfterMax < 100 && dragPercentage <= 100 - paneAfterMax
 
     // Prevent dragging beyond pane max.
     if (paneBeforeMaxReached || paneAfterMaxReached) {
-      return paneBeforeMaxReached ? paneBeforeMax : Math.max(100 - paneAfterMax, 0)
+      return paneBeforeMaxReached
+        ? paneBeforeMax
+        : Math.max(100 - paneAfterMax, 0)
     } else {
       return Math.min(Math.max(dragPercentage, 0), paneBeforeMax)
     }

src/components/SqlTable/Pager.vue

@@ -1,32 +1,36 @@
 <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"
+    :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'
+import Paginate from 'vuejs-paginate-next'
 
 export default {
   name: 'Pager',
   components: { Paginate },
-  props: ['pageCount', 'value'],
+  props: {
+    pageCount: Number,
+    modelValue: Number
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
-      page: this.value,
+      page: this.modelValue,
       chevron: `
         <svg width="9" height="9" viewBox="0 0 8 12" fill="none">
         <path
@@ -39,10 +43,10 @@ export default {
   },
   watch: {
     page() {
-      this.$emit('input', this.page)
+      this.$emit('update:modelValue', this.page)
     },
-    value () {
-      this.page = this.value
+    modelValue() {
+      this.page = this.modelValue
     }
   }
 }
@@ -54,48 +58,52 @@ export default {
   align-items: center;
   line-height: 10px;
 }
->>> .paginator-page-link {
+:deep(a) {
+  cursor: pointer;
+}
+
+:deep(.paginator-page-link) {
   padding: 2px 3px;
   margin: 0 5px;
   display: block;
   color: var(--color-text-base);
   font-size: 11px;
 }
->>> .paginator-page-link:hover {
+:deep(.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 {
+: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;
 }
 
->>> .paginator-active-page,
->>> .paginator-active-page:hover {
+:deep(.paginator-active-page),
+:deep(.paginator-active-page:hover) {
   color: var(--color-accent);
 }
 
->>> .paginator-break:hover,
->>> .paginator-disabled:hover {
+:deep(.paginator-break:hover),
+:deep(.paginator-disabled:hover) {
   cursor: default;
 }
 
->>> .paginator-prev svg {
+:deep(.paginator-prev svg) {
   transform: rotate(180deg);
 }
 
->>> .paginator-next:hover path,
->>> .paginator-prev:hover path {
+:deep(.paginator-next:hover path),
+:deep(.paginator-prev:hover path) {
   fill: var(--color-text-active);
 }
->>> .paginator-disabled path,
->>> .paginator-disabled:hover path {
+:deep(.paginator-disabled path),
+:deep(.paginator-disabled:hover path) {
   fill: var(--color-text-light-2);
 }
 </style>

src/components/SqlTable/index.vue

@@ -1,24 +1,30 @@
 <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
-        class="table-container"
         ref="table-container"
+        class="table-container"
         @scroll="onScrollTable"
       >
-      <table ref="table" class="sqliteviz-table">
+        <table
+          ref="table"
+          class="sqliteviz-table"
+          tabindex="0"
+          @keydown="onTableKeydown"
+        >
           <thead>
             <tr>
               <th v-for="(th, index) in columns" :key="index" ref="th">
@@ -28,9 +34,18 @@
           </thead>
           <tbody>
             <tr v-for="rowIndex in currentPageData.count" :key="rowIndex">
-            <td v-for="(col, colIndex) in columns" :key="colIndex">
+              <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">
-                {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
+                  {{ getCellText(col, rowIndex) }}
                 </div>
               </td>
             </tr>
@@ -44,32 +59,43 @@
         <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" />
+      <pager
+        v-show="pageCount > 1"
+        v-model="currentPage"
+        :pageCount="pageCount"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Pager from './Pager'
+import Pager from './Pager.vue'
 
 export default {
   name: 'SqlTable',
   components: { Pager },
   props: {
     dataSet: Object,
-    time: String,
+    time: [String, Number],
     pageSize: {
       type: Number,
       default: 20
     },
-    preview: Boolean
+    page: {
+      type: Number,
+      default: 1
     },
+    preview: Boolean,
+    selectedCellCoordinates: Object
+  },
+  emits: ['updateSelectedCell'],
   data() {
     return {
       header: null,
       tableWidth: null,
-      currentPage: 1,
-      resizeObserver: null
+      currentPage: this.page,
+      resizeObserver: null,
+      selectedCellElement: null
     }
   },
   computed: {
@@ -99,7 +125,53 @@ export default {
       }
     }
   },
+  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}"]`
+      )
+      if (cell) {
+        this.selectCell(cell)
+      }
+    }
+  },
+  beforeUnmount() {
+    this.resizeObserver.unobserve(this.$refs.table)
+  },
   methods: {
+    isBlob(value) {
+      return value && ArrayBuffer.isView(value)
+    },
+    isNull(value) {
+      return value === null
+    },
+    getCellValue(col, rowIndex) {
+      return this.dataSet.values[col][rowIndex - 1 + this.currentPageData.start]
+    },
+    getCellText(col, rowIndex) {
+      const value = this.getCellValue(col, rowIndex)
+      if (this.isNull(value)) {
+        return 'NULL'
+      }
+      if (this.isBlob(value)) {
+        return 'BLOB'
+      }
+      return value
+    },
     calculateHeadersWidth() {
       this.tableWidth = this.$refs['table-container'].offsetWidth
       this.$nextTick(() => {
@@ -109,25 +181,101 @@ export default {
       })
     },
     onScrollTable() {
-      this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
+      this.$refs['header-container'].scrollLeft =
+        this.$refs['table-container'].scrollLeft
+    },
+    onTableKeydown(e) {
+      const keyCodeMap = {
+        37: 'left',
+        39: 'right',
+        38: 'up',
+        40: 'down'
       }
+
+      if (
+        !this.selectedCellElement ||
+        !Object.keys(keyCodeMap).includes(e.keyCode.toString())
+      ) {
+        return
+      }
+      e.preventDefault()
+
+      this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
     },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
-    this.resizeObserver.observe(this.$refs.table)
-    this.calculateHeadersWidth()
+    onCellClick(e) {
+      this.selectCell(e.target.closest('td'), false)
     },
-  beforeDestroy () {
-    this.resizeObserver.unobserve(this.$refs.table)
+    selectCell(cell, scrollTo = true) {
+      if (!cell) {
+        if (this.selectedCellElement) {
+          this.selectedCellElement.ariaSelected = 'false'
+        }
+        this.selectedCellElement = cell
+      } else if (!cell.ariaSelected || cell.ariaSelected === 'false') {
+        if (this.selectedCellElement) {
+          this.selectedCellElement.ariaSelected = 'false'
+        }
+        cell.ariaSelected = 'true'
+        this.selectedCellElement = cell
+      } else {
+        cell.ariaSelected = 'false'
+        this.selectedCellElement = null
+      }
+
+      if (this.selectedCellElement && scrollTo) {
+        this.selectedCellElement.scrollIntoView()
+      }
+
+      this.$emit('updateSelectedCell', this.selectedCellElement)
     },
-  watch: {
-    currentPageData: 'calculateHeadersWidth',
-    dataSet () {
-      this.currentPage = 1
+    moveFocusInTable(initialCell, direction) {
+      const currentRowIndex = +initialCell.dataset.row
+      const currentColIndex = +initialCell.dataset.col
+      let newRowIndex, newColIndex
+
+      if (direction === 'right') {
+        if (currentColIndex === this.columns.length - 1) {
+          newRowIndex = currentRowIndex + 1
+          newColIndex = 0
+        } else {
+          newRowIndex = currentRowIndex
+          newColIndex = currentColIndex + 1
+        }
+      } else if (direction === 'left') {
+        if (currentColIndex === 0) {
+          newRowIndex = currentRowIndex - 1
+          newColIndex = this.columns.length - 1
+        } else {
+          newRowIndex = currentRowIndex
+          newColIndex = currentColIndex - 1
+        }
+      } else if (direction === 'up') {
+        newRowIndex = currentRowIndex - 1
+        newColIndex = currentColIndex
+      } else if (direction === 'down') {
+        newRowIndex = currentRowIndex + 1
+        newColIndex = currentColIndex
+      }
+
+      const newCell = this.$refs.table.querySelector(
+        `td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`
+      )
+      if (newCell) {
+        this.selectCell(newCell)
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+table.sqliteviz-table:focus {
+  outline: none;
+}
+.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);
+}
 </style>

src/components/TextField.vue

@@ -1,17 +1,25 @@
 <template>
   <div>
-    <div v-if="label" :class="['text-field-label', { error: errorMsg }, {'disabled': disabled}]">
+    <div
+      v-if="label"
+      :class="['text-field-label', { error: errorMsg }, { disabled: disabled }]"
+    >
       {{ label }}
-      <hint-icon class="hint" v-if="hint" :hint="hint" :max-width="maxHintWidth || '149px'"/>
+      <hint-icon
+        v-if="hint"
+        class="hint"
+        :hint="hint"
+        :maxWidth="maxHintWidth || '149px'"
+      />
     </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>
@@ -20,9 +28,19 @@
 <script>
 import HintIcon from '@/components/svg/hint'
 export default {
-  name: 'textField',
-  props: ['placeholder', 'label', 'errorMsg', 'value', 'width', 'hint', 'maxHintWidth', 'disabled'],
-  components: { HintIcon }
+  name: 'TextField',
+  components: { HintIcon },
+  props: {
+    placeholder: String,
+    label: String,
+    errorMsg: String,
+    modelValue: String,
+    width: String,
+    hint: String,
+    maxHintWidth: String,
+    disabled: Boolean
+  },
+  emits: ['update:modelValue']
 }
 </script>
 

src/components/svg/addTable.vue

@@ -33,8 +33,8 @@
         </clipPath>
       </defs>
     </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-      Add new table from CSV
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
+      Add new table from CSV, JSON or NDJSON
     </span>
   </span>
 </template>
@@ -45,7 +45,8 @@ import tooltipMixin from '@/tooltipMixin'
 export default {
   name: 'AddTableIcon',
   mixins: [tooltipMixin],
-  props: ['tooltip'],
+  props: { tooltip: String },
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/components/svg/arrow.vue

@@ -0,0 +1,19 @@
+<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

@@ -21,8 +21,8 @@
         fill="#A2B1C6"
       />
     </svg>
-  <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
-    Load another database or CSV
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
+      Load another database, CSV, JSON or NDJSON
     </span>
   </div>
 </template>
@@ -31,8 +31,9 @@
 import tooltipMixin from '@/tooltipMixin'
 
 export default {
-  name: 'changeDbIcon',
+  name: 'ChangeDbIcon',
   mixins: [tooltipMixin],
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/components/svg/chart.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -46,7 +41,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ChartIcon'
 }

src/components/svg/clear.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    :class="['clear-icon', {'disabled': disabled}]"
+    :class="['clear-icon', { disabled: disabled }]"
     width="20"
     height="20"
     viewBox="0 0 20 20"
@@ -21,10 +21,9 @@
 </template>
 
 <script>
-
 export default {
   name: 'ClearIcon',
-  props: ['disabled']
+  props: { disabled: Boolean }
 }
 </script>
 
@@ -42,6 +41,6 @@ export default {
 }
 
 .disabled.clear-icon:hover path {
-  fill: #C8D4E3;
+  fill: #c8d4e3;
 }
 </style>

src/components/svg/clipboard.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       d="M14.1917 1.3851H12.4806V0.703125C12.4806 0.314758 12.1658 0 11.7775 0H6.246C5.85764 0
       5.54288 0.314758 5.54288 0.703125V1.3851H3.83203C2.86276 1.3851 2.07422 2.17365 2.07422
@@ -26,7 +21,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ClipboardIcon'
 }

src/components/svg/close.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    @click.stop="$emit('click')"
-    :class="['icon', {'disabled': disabled }]"
+    :class="['icon', { disabled: disabled }]"
     :width="size"
     :height="size"
     viewBox="0 0 14 14"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    @click.stop="$emit('click')"
   >
     <path
       d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14
@@ -30,7 +30,8 @@ export default {
       required: false,
       default: false
     }
-  }
+  },
+  emits: ['click']
 }
 </script>
 

src/components/svg/dataView.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -31,7 +26,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'DataViewIcon'
 }

src/components/svg/dropDownChevron.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    :class="['chevron-icon', {'disabled': disabled}]"
+    :class="['chevron-icon', { disabled: disabled }]"
     width="20"
     height="20"
     viewBox="0 0 20 20"
@@ -15,10 +15,9 @@
 </template>
 
 <script>
-
 export default {
   name: 'DropDownChevron',
-  props: ['disabled']
+  props: { disabled: Boolean }
 }
 </script>
 
@@ -36,6 +35,6 @@ export default {
 }
 
 .disabled.chevron-icon:hover path {
-  fill: #C8D4E3;
+  fill: #c8d4e3;
 }
 </style>

src/components/svg/edgeArrow.vue

@@ -0,0 +1,25 @@
+<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

@@ -17,7 +17,7 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
       {{ tooltip }}
     </span>
   </span>
@@ -29,7 +29,11 @@ import tooltipMixin from '@/tooltipMixin'
 export default {
   name: 'ExportIcon',
   mixins: [tooltipMixin],
-  props: ['tooltip', 'tooltipPosition'],
+  props: {
+    tooltip: String,
+    tooltipPosition: String
+  },
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/components/svg/exportToCsv.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="19"
-    height="18"
-    viewBox="0 0 19 18"
-    fill="none"
-  >
+  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
     <path
       d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043
         15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83
@@ -55,7 +50,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ExportToCsvIcon'
 }

src/components/svg/exportToSvg.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="19"
-    height="18"
-    viewBox="0 0 19 18"
-    fill="none"
-  >
+  <svg width="19" height="18" viewBox="0 0 19 18" fill="none">
     <path
       d="M4.28369 13.9966C4.28369 13.7711 4.20312 13.5953 4.04199 13.4693C3.88379 13.3433 3.604
         13.213 3.20264 13.0782C2.80127 12.9434 2.47314 12.813 2.21826 12.6871C1.38916 12.2798
@@ -54,7 +49,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'ExportToSvgIcon'
 }

src/components/svg/graph.vue

@@ -0,0 +1,40 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 4C5 5.10457 4.10457 6 3 6C1.89543 6 1 5.10457 1 4C1 2.89543 1.89543 2 3 2C4.10457 2 5 2.89543 5 4Z"
+      fill="#A2B1C6"
+    />
+    <path
+      d="M17 7.5C17 8.88071 15.8807 10 14.5 10C13.1193 10 12 8.88071 12 7.5C12 6.11929 13.1193 5 14.5 5C15.8807 5 17 6.11929 17 7.5Z"
+      fill="#A2B1C6"
+    />
+    <path
+      d="M8 13.5C8 14.8807 6.88071 16 5.5 16C4.11929 16 3 14.8807 3 13.5C3 12.1193 4.11929 11 5.5 11C6.88071 11 8 12.1193 8 13.5Z"
+      fill="#A2B1C6"
+    />
+    <path
+      d="M2.93128 5.31436L3.90527 5.08778L5.48693 11.8867L4.51294 12.1133L2.93128 5.31436Z"
+      fill="#A2B1C6"
+    />
+    <path
+      d="M12.9447 7.79159L13.5548 8.58392L7.30516 13.3962L6.69507 12.6038L12.9447 7.79159Z"
+      fill="#A2B1C6"
+    />
+    <path
+      d="M14.1316 6.51712L3.13166 3.51723L2.86844 4.48202L13.8684 7.48191L14.1316 6.51712Z"
+      fill="#A2B1C6"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GraphIcon'
+}
+</script>

src/components/svg/hint.vue

@@ -33,7 +33,11 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="{...tooltipStyle, maxWidth: maxWidth }" ref="tooltip">
+    <span
+      ref="tooltip"
+      class="icon-tooltip"
+      :style="{ ...tooltipStyle, maxWidth: maxWidth }"
+    >
       {{ hint }}
     </span>
   </div>
@@ -44,8 +48,12 @@ import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'HintIcon',
-  props: ['hint', 'maxWidth'],
   mixins: [tooltipMixin],
+  props: {
+    hint: String,
+    maxWidth: String
+  },
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/components/svg/pivot.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -21,7 +16,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'PivotIcon'
 }

src/components/svg/png.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686
         14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231
@@ -30,7 +25,10 @@
         5.5195V15.0117Z"
       fill="#A2B1C6"
     />
-    <path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
+    <path
+      d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z"
+      fill="#A2B1C6"
+    />
   </svg>
 </template>
 

src/components/svg/row.vue

@@ -0,0 +1,47 @@
+<template>
+  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
+    <g clip-path="url(#clip0_2130_5292)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.85303 11.3794L1.85303 7.80371L5.86304 7.80371L5.86304
+      11.3794L1.85303 11.3794ZM7.36304 11.3794L7.36304 7.80371L11.3428
+      7.80371L11.3428 11.3794L7.36304 11.3794ZM12.8428 11.3794L16.853
+      11.3794L16.853 7.80371L12.8428 7.80371L12.8428 11.3794ZM15.353
+      6.30371L16.853 6.30371C17.6815 6.30371 18.353 6.97528 18.353
+      7.80371L18.353 11.3794C18.353 12.2078 17.6815 12.8794 16.853
+      12.8794L15.353 12.8794L15.353 14.3111C15.353 15.0153 14.7603 15.5916
+      14.0358 15.5916L4.67027 15.5916C3.94579 15.5916 3.35303 15.0153 3.35303
+      14.3111L3.35303 12.8794L1.85303 12.8794C1.0246 12.8794 0.353027 12.2078
+      0.353027 11.3794L0.353027 7.80371C0.353027 6.97528 1.0246 6.30371
+      1.85303 6.30371L3.35303 6.30371L3.35303 4.87201C3.35303 4.16349 3.94139
+      3.59155 4.67027 3.59155L14.0358 3.59155C14.7604 3.59155 15.353 4.16117
+      15.353 4.87201L15.353 6.30371ZM14.0315 6.30371L14.0315 4.87086L11.887
+      4.87086L11.887 6.30371L12.8428 6.30371L14.0315 6.30371ZM10.387
+      6.30371L10.387 4.87086L8.26685 4.87086L8.26685 6.30371L10.387
+      6.30371ZM6.76685 6.30371L6.76685 4.87086L4.67027 4.87086L4.67027
+      6.30371L6.76685 6.30371ZM4.67027 12.8794L4.67027 14.3121L6.76685
+      14.3121L6.76685 12.8794L4.67027 12.8794ZM8.26685 12.8794L8.26685
+      14.3121L10.387 14.3121L10.387 12.8794L8.26685 12.8794ZM11.887
+      12.8794L11.887 14.3121L14.0315 14.3121L14.0315 12.8794L11.887 12.8794Z"
+        fill="#A2B1C6"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2130_5292">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0.353027 18.5916) rotate(-90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'RowIcon'
+}
+</script>

src/components/svg/run.vue

@@ -1,16 +1,13 @@
 <template>
-  <svg
-    width="12"
-    height="13"
-    viewBox="0 0 12 13"
-    fill="none"
-  >
-    <path d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z" fill="#A2B1C6"/>
+  <svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+    <path
+      d="M11.1624 6.94358L0.770043 12.9436L0.770043 0.943573L11.1624 6.94358Z"
+      fill="#A2B1C6"
+    />
   </svg>
 </template>
 
 <script>
-
 export default {
   name: 'RunIcon'
 }

src/components/svg/sort.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'SortIcon',
   props: {

src/components/svg/sqlEditor.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="19"
-    viewBox="0 0 18 19"
-    fill="none"
-  >
+  <svg width="18" height="19" viewBox="0 0 18 19" fill="none">
     <g clip-path="url(#clip0)">
       <path
         d="M4.5 1.51343H10.5L15 6.01343V8.45284H13.5V6.76343H9.75V3.01343H4.5V8.45284H3V3.01343C3
@@ -47,14 +42,18 @@
     </g>
     <defs>
       <clipPath id="clip0">
-        <rect width="18" height="18" fill="white" transform="translate(0 0.0134277)"/>
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.0134277)"
+        />
       </clipPath>
     </defs>
   </svg>
 </template>
 
 <script>
-
 export default {
   name: 'SqlEditorIcon'
 }

src/components/svg/stop.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 4C3 3.44772 3.44772 3 4 3H14C14.5523 3 15 3.44772 15 4V14C15 14.5523 14.5523 15 14 15H4C3.44772 15 3 14.5523 3 14V4Z"
+      fill="#A2B1C6"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'StopIcon'
+}
+</script>

src/components/svg/table.vue

@@ -1,10 +1,5 @@
 <template>
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-  >
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -41,7 +36,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'TableIcon'
 }

src/components/svg/treeChevron.vue

@@ -17,9 +17,8 @@
 </template>
 
 <script>
-
 export default {
-  name: 'treeChevron',
+  name: 'TreeChevron',
   props: {
     expanded: {
       type: Boolean,
@@ -31,7 +30,7 @@ export default {
 
 <style scoped>
 .chevron-icon {
-  -webkit-transition: transform .15s ease-in-out;
-  transition: transform .15s ease-in-out;
+  -webkit-transition: transform 0.15s ease-in-out;
+  transition: transform 0.15s ease-in-out;
 }
 </style>

src/components/svg/viewCellValue.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg width="19" height="19" viewBox="0 0 19 19" fill="none">
+    <g clip-path="url(#clip0_2131_6054)">
+      <path
+        d="M3.53784 11.5846L3.53784 3.14734L11.9751 3.14734V7.676C12.4655 7.51991
+      12.9771 7.47439 13.4751 7.53264V3.14734C13.4751 2.31891 12.8035 1.64734
+      11.9751 1.64734L3.53784 1.64734C2.70941 1.64734 2.03784 2.31891 2.03784
+      3.14734L2.03784 11.5846C2.03784 12.413 2.70942 13.0846 3.53784
+      13.0846H10.0831C9.771 12.6184 9.58279 12.1055 9.51083
+      11.5846H3.53784Z"
+        fill="#A2B1C6"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.7887 9.9291C15.4307 10.8837 15.1773 12.1779 14.2228
+      12.8199C13.2682 13.4618 11.974 13.2084 11.332 12.2539C10.69 11.2993
+      10.9434 10.0051 11.898 9.3631C12.8525 8.72113 14.1468 8.97454 14.7887
+      9.9291ZM14.4606 14.3901L16.6181 17.5982C16.8492 17.9419 17.3153 18.0331
+      17.659 17.802C18.0027 17.5708 18.0939 17.1048 17.8628 16.7611L15.6884
+      13.5279C16.7949 12.3365 16.9801 10.4996 16.0334 9.092C14.9292 7.45002
+      12.7029 7.01412 11.0609 8.1184C9.41891 9.22268 8.98302 11.449 10.0873
+      13.0909C11.062 14.5403 12.9109 15.05 14.4606 14.3901Z"
+        fill="#A2B1C6"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2131_6054">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0.5 18.5916) rotate(-90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ViewCellValueIcon'
+}
+</script>

src/lib/GraphEditorControls.jsx

@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import { localizeString } from 'react-chart-editor/lib'
+
+class EditorControls extends Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.localize = key =>
+      localizeString(this.props.dictionaries || {}, this.props.locale, key)
+  }
+
+  getChildContext() {
+    return {
+      dictionaries: this.props.dictionaries || {},
+      localize: this.localize,
+      locale: this.props.locale
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className={
+          'editor_controls plotly-editor--theme-provider' +
+          `${this.props.className ? ` ${this.props.className}` : ''}`
+        }
+      >
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+EditorControls.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dictionaries: PropTypes.object,
+  locale: PropTypes.string
+}
+
+EditorControls.defaultProps = {
+  locale: 'en'
+}
+
+EditorControls.childContextTypes = {
+  dictionaries: PropTypes.object,
+  locale: PropTypes.string,
+  localize: PropTypes.func
+}
+
+export default EditorControls

src/lib/ReactPlotlyEditorWithPlotRef.jsx

@@ -0,0 +1,65 @@
+import ReactPlotlyEditor from 'react-chart-editor'
+import React, { createRef } from 'react'
+import EditorControls from 'react-chart-editor/lib/EditorControls'
+
+/**
+ * This extended ReactPlotlyEditor has a reference to PlotComponent.
+ * The reference makes it possible to call updatePlotly method of PlotComponent.
+ * updatePlotly method allows smoothly resize the plot
+ * when resize chart editor container.
+ */
+export default class ReactPlotlyEditorWithPlotRef extends ReactPlotlyEditor {
+  constructor(props) {
+    super(props)
+    this.plotComponentRef = createRef()
+  }
+  render() {
+    return (
+      <div className="plotly_editor">
+        {!this.props.hideControls && (
+          <EditorControls
+            graphDiv={this.state.graphDiv}
+            dataSources={this.props.dataSources}
+            dataSourceOptions={this.props.dataSourceOptions}
+            plotly={this.props.plotly}
+            onUpdate={this.props.onUpdate}
+            advancedTraceTypeSelector={this.props.advancedTraceTypeSelector}
+            locale={this.props.locale}
+            traceTypesConfig={this.props.traceTypesConfig}
+            dictionaries={this.props.dictionaries}
+            showFieldTooltips={this.props.showFieldTooltips}
+            srcConverters={this.props.srcConverters}
+            makeDefaultTrace={this.props.makeDefaultTrace}
+            glByDefault={this.props.glByDefault}
+            mapBoxAccess={Boolean(
+              this.props.config && this.props.config.mapboxAccessToken
+            )}
+            fontOptions={this.props.fontOptions}
+            chartHelp={this.props.chartHelp}
+            customConfig={this.props.customConfig}
+          >
+            {this.props.children}
+          </EditorControls>
+        )}
+        <div
+          className="plotly_editor_plot"
+          style={{ width: '100%', height: '100%' }}
+        >
+          <this.PlotComponent
+            ref={this.plotComponentRef}
+            data={this.props.data}
+            layout={this.props.layout}
+            frames={this.props.frames}
+            config={this.props.config}
+            useResizeHandler={this.props.useResizeHandler}
+            debug={this.props.debug}
+            onInitialized={this.handleRender}
+            onUpdate={this.handleRender}
+            style={{ width: '100%', height: '100%' }}
+            divId={this.props.divId}
+          />
+        </div>
+      </div>
+    )
+  }
+}

src/lib/chartHelper.js

@@ -1,4 +1,4 @@
-import dereference from 'react-chart-editor/lib/lib/dereference'
+import * as dereference from 'react-chart-editor/lib/lib/dereference'
 import plotly from 'plotly.js'
 import { nanoid } from 'nanoid'
 
@@ -21,7 +21,7 @@ export function getOptionsForSave (state, dataSources) {
   for (const key in dataSources) {
     emptySources[key] = []
   }
-  dereference(stateCopy.data, emptySources)
+  dereference.default(stateCopy.data, emptySources)
   return stateCopy
 }
 

src/lib/csv.js

@@ -7,9 +7,9 @@ const hintsByCode = {
 }
 
 export default {
-  getResult (source) {
+  getResult(source, columns) {
     const result = {
-      columns: []
+      columns: columns || []
     }
     const values = {}
     if (source.meta.fields) {
@@ -24,8 +24,18 @@ export default {
           return value
         })
       })
+    } else if (columns) {
+      columns.forEach((col, i) => {
+        values[col] = source.data.map(row => {
+          let value = row[i]
+          if (value instanceof Date) {
+            value = value.toISOString()
+          }
+          return value
+        })
+      })
     } else {
-      for (let i = 0; i <= source.data[0].length - 1; i++) {
+      for (let i = 0; source.data[0] && i <= source.data[0].length - 1; i++) {
         const colName = `col${i + 1}`
         result.columns.push(colName)
         values[colName] = source.data.map(row => {
@@ -51,7 +61,9 @@ export default {
     }
 
     for (let rowNumber = 0; rowNumber < rowCount; rowNumber++) {
-      result.data.push(columns.map(column => resultSet.values[column][rowNumber]))
+      result.data.push(
+        columns.map(column => resultSet.values[column][rowNumber])
+      )
     }
 
     return result
@@ -73,8 +85,10 @@ export default {
         comments: false,
         step: undefined,
         complete: results => {
-          const res = {
-            data: this.getResult(results),
+          let res
+          try {
+            res = {
+              data: this.getResult(results, config.columns),
               delimiter: results.meta.delimiter,
               hasErrors: false,
               rowCount: results.data.length
@@ -85,9 +99,12 @@ export default {
               msg.hint = hintsByCode[msg.code]
               return msg
             })
+          } catch (error) {
+            reject(error)
+          }
           resolve(res)
         },
-        error: (error, file) => {
+        error: error => {
           reject(error)
         },
         download: false,

src/lib/database/_sql.js

@@ -1,18 +1,23 @@
-import initSqlJs from 'sql.js/dist/sql-wasm.js'
+import initSqlJs from 'sql.js'
 import dbUtils from './_statements'
+import wasmUrl from 'sql.js/dist/sql-wasm.wasm?url'
 
 let SQL = null
-const sqlModuleReady = initSqlJs().then(sqlModule => { SQL = sqlModule })
+const sqlModuleReady = initSqlJs({
+  locateFile: () => wasmUrl
+}).then(sqlModule => {
+  SQL = sqlModule
+})
 
 function _getDataSourcesFromSqlResult(sqlResult) {
   if (!sqlResult) {
     return {}
   }
-  const dataSorces = {}
+  const dataSources = {}
   sqlResult.columns.forEach((column, index) => {
-    dataSorces[column] = sqlResult.values.map(row => row[index])
+    dataSources[column] = sqlResult.values.map(row => row[index])
   })
-  return dataSorces
+  return dataSources
 }
 
 export default class Sql {
@@ -21,8 +26,7 @@ export default class Sql {
   }
 
   static build() {
-    return sqlModuleReady
-      .then(() => {
+    return sqlModuleReady.then(() => {
       return new Sql()
     })
   }
@@ -77,7 +81,10 @@ export default class Sql {
       }
       this.db.exec('COMMIT')
       count++
-      progressCallback({ progress: 100 * (count / chunksAmount), id: progressCounterId })
+      progressCallback({
+        progress: 100 * (count / chunksAmount),
+        id: progressCounterId
+      })
     }
 
     return {

src/lib/database/_statements.js

@@ -2,7 +2,9 @@ export default {
   *generateChunks(data, size) {
     const matrix = Object.keys(data).map(col => data[col])
     const [row] = matrix
-    const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
+    const transposedMatrix = row.map((value, column) =>
+      matrix.map(row => row[column])
+    )
 
     const count = Math.ceil(transposedMatrix.length / size)
 
@@ -38,7 +40,8 @@ export default {
           type = 'TEXT'
           break
         }
-        default: type = 'TEXT'
+        default:
+          type = 'TEXT'
       }
       result += `"${col}" ${type}, `
     }

src/lib/database/_worker.js

@@ -35,7 +35,5 @@ function onError (error) {
 }
 
 registerPromiseWorker(data => {
-  return sqlReady
-    .then(processMsg.bind(data))
-    .catch(onError)
+  return sqlReady.then(processMsg.bind(data)).catch(onError)
 })

src/lib/database/index.js

@@ -1,7 +1,4 @@
 import fu from '@/lib/utils/fileIo'
-// We can import workers like so because of worker-loader:
-// https://webpack.js.org/loaders/worker-loader/
-import Worker from './_worker.js'
 
 // Use promise-worker in order to turn worker into the promise based one:
 // https://github.com/nolanlawson/promise-worker
@@ -10,7 +7,9 @@ import PromiseWorker from 'promise-worker'
 import events from '@/lib/utils/events'
 
 function getNewDatabase() {
-  const worker = new Worker()
+  const worker = new Worker(new URL('./_worker.js', import.meta.url), {
+    type: 'module'
+  })
   return new Database(worker)
 }
 
@@ -31,9 +30,11 @@ class Database {
       const progress = e.data.progress
       if (progress !== undefined) {
         const id = e.data.id
-        this.importProgresses[id].dispatchEvent(new CustomEvent('progress', {
+        this.importProgresses[id].dispatchEvent(
+          new CustomEvent('progress', {
             detail: progress
-        }))
+          })
+        )
       }
     })
   }
@@ -45,7 +46,9 @@ class Database {
   createProgressCounter(callback) {
     const id = progressCounterIds++
     this.importProgresses[id] = new EventTarget()
-    this.importProgresses[id].addEventListener('progress', e => { callback(e.detail) })
+    this.importProgresses[id].addEventListener('progress', e => {
+      callback(e.detail)
+    })
     return id
   }
 
@@ -70,14 +73,17 @@ class Database {
 
   async loadDb(file) {
     const fileContent = file ? await fu.readAsArrayBuffer(file) : null
-    const res = await this.pw.postMessage({ action: 'open', buffer: fileContent })
+    const res = await this.pw.postMessage({
+      action: 'open',
+      buffer: fileContent
+    })
 
     if (res.error) {
       throw new Error(res.error)
     }
 
     this.dbName = file ? fu.getFileName(file) : 'database'
-    this.refreshSchema()
+    await this.refreshSchema()
 
     events.send('database.import', file ? file.size : 0, {
       from: file ? 'sqlite' : 'none',
@@ -130,7 +136,9 @@ class Database {
     }
 
     if (/[^\w]/.test(name)) {
-      throw new Error('Table name can contain only letters, digits and underscores')
+      throw new Error(
+        'Table name can contain only letters, digits and underscores'
+      )
     }
 
     if (/^(\d)/.test(name)) {

src/lib/eventBus.js

@@ -0,0 +1,8 @@
+import emitter from 'tiny-emitter/instance'
+
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args)
+}

src/lib/graphHelper.js

@@ -0,0 +1,344 @@
+import { COLOR_PICKER_CONSTANTS } from 'react-colorscales'
+import tinycolor from 'tinycolor2'
+
+const TYPE_NODE = 0
+const TYPE_EDGE = 1
+const DEFAULT_SCALE = COLOR_PICKER_CONSTANTS.DEFAULT_SCALE
+
+export function dataSourceIsValid(dataSources) {
+  const docColumn = Object.keys(dataSources)[0]
+  if (!docColumn) {
+    return false
+  }
+  try {
+    const records = dataSources[docColumn].slice(0, 10)
+    records.forEach(record => {
+      const parsedRec = JSON.parse(record)
+      if (Object.keys(parsedRec).length < 2) {
+        throw new Error('The records must have at least 2 keys')
+      }
+    })
+    const firstRecord = JSON.parse(records[0])
+    if (
+      !Object.keys(firstRecord).some(key => {
+        return records
+          .map(record => JSON.parse(record)[key])
+          .every(value => value === 0 || value === 1)
+      })
+    ) {
+      throw new Error(
+        'There must be a common key used as object type: 0 - node, 1 - edge'
+      )
+    }
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
+export function buildNodes(graph, dataSources, options) {
+  const docColumn = Object.keys(dataSources)[0]
+  const { objectType, nodeId } = options.structure
+
+  if (objectType && nodeId) {
+    const nodes = dataSources[docColumn]
+      .map(json => JSON.parse(json))
+      .filter(item => item[objectType] === TYPE_NODE)
+    nodes.forEach(node => {
+      if (node[nodeId]) {
+        graph.addNode(node[nodeId], {
+          data: node,
+          labelColor: options.style.nodes.label.color
+        })
+      }
+    })
+  }
+}
+
+export function buildEdges(graph, dataSources, options) {
+  const docColumn = Object.keys(dataSources)[0] || 'doc'
+  const { objectType, edgeSource, edgeTarget } = options.structure
+
+  if (objectType && edgeSource && edgeTarget) {
+    const edges = dataSources[docColumn]
+      .map(json => JSON.parse(json))
+      .filter(item => item[objectType] === TYPE_EDGE)
+
+    edges.forEach(edge => {
+      const source = edge[edgeSource]
+      const target = edge[edgeTarget]
+      if (graph.hasNode(source) && graph.hasNode(target)) {
+        graph.addEdge(source, target, {
+          data: edge,
+          labelColor: options.style.edges.label.color
+        })
+      }
+    })
+  }
+}
+
+export function updateNodes(graph, attributeUpdates) {
+  const changeMethods = []
+  if (attributeUpdates.label) {
+    changeMethods.push(getUpdateLabelMethod(attributeUpdates.label))
+  }
+
+  if (attributeUpdates.size) {
+    changeMethods.push(getUpdateSizeMethod(graph, attributeUpdates.size))
+  }
+
+  if (attributeUpdates.color) {
+    changeMethods.push(getUpdateNodeColorMethod(graph, attributeUpdates.color))
+  }
+  graph.forEachNode(nodeId => {
+    graph.updateNode(nodeId, attributes => {
+      const newAttributes = { ...attributes }
+      changeMethods.forEach(method => method(newAttributes, nodeId))
+      return newAttributes
+    })
+  })
+}
+
+export function updateEdges(graph, attributeUpdates) {
+  const changeMethods = []
+  if (attributeUpdates.label) {
+    changeMethods.push(getUpdateLabelMethod(attributeUpdates.label))
+  }
+
+  if (attributeUpdates.size) {
+    changeMethods.push(getUpdateSizeMethod(graph, attributeUpdates.size))
+  }
+
+  if (attributeUpdates.color) {
+    changeMethods.push(getUpdateEdgeColorMethod(graph, attributeUpdates.color))
+  }
+
+  if ('showDirection' in attributeUpdates) {
+    changeMethods.push(
+      attributes =>
+        (attributes.type = attributeUpdates.showDirection ? 'arrow' : 'line')
+    )
+  }
+
+  graph.forEachEdge((edgeId, attributes, source, target) => {
+    graph.updateEdgeWithKey(edgeId, source, target, attr => {
+      const newAttributes = { ...attr }
+      changeMethods.forEach(method => method(newAttributes, edgeId))
+      return newAttributes
+    })
+  })
+}
+
+function getUpdateLabelMethod(labelSettings) {
+  const { source, color } = labelSettings
+  return attributes => {
+    const label = attributes.data[source] ?? ''
+    attributes.label = label.toString()
+    attributes.labelColor = color
+  }
+}
+
+function getUpdateSizeMethod(graph, sizeSettings) {
+  const { type, value, source, scale, mode, min, method } = sizeSettings
+  if (type === 'constant') {
+    return attributes => (attributes.size = value)
+  } else if (type === 'variable') {
+    return attributes => {
+      attributes.size = getVariabledSize(
+        mode,
+        attributes.data[source],
+        scale,
+        min
+      )
+    }
+  } else {
+    return (attributes, nodeId) => {
+      attributes.size = getVariabledSize(
+        mode,
+        graph[method](nodeId),
+        scale,
+        min
+      )
+    }
+  }
+}
+
+function getDirectVariableColorUpdateMethod(source) {
+  return attributes =>
+    (attributes.color = tinycolor(attributes.data[source]).toHexString())
+}
+
+function getUpdateNodeColorMethod(graph, colorSettings) {
+  const {
+    type,
+    value,
+    source,
+    sourceUsage,
+    colorscale,
+    colorscaleDirection,
+    mode,
+    method
+  } = colorSettings
+  if (type === 'constant') {
+    return attributes => (attributes.color = value)
+  } else if (type === 'variable') {
+    return sourceUsage === 'map_to'
+      ? getColorMethod(
+          graph,
+          mode,
+          (nodeId, attributes) => attributes.data[source],
+          colorscale,
+          colorscaleDirection,
+          getNodeValueScale
+        )
+      : getDirectVariableColorUpdateMethod(source)
+  } else {
+    return getColorMethod(
+      graph,
+      mode,
+      nodeId => graph[method](nodeId),
+      colorscale,
+      colorscaleDirection,
+      getNodeValueScale
+    )
+  }
+}
+
+function getUpdateEdgeColorMethod(graph, colorSettings) {
+  const {
+    type,
+    value,
+    source,
+    sourceUsage,
+    colorscale,
+    colorscaleDirection,
+    mode
+  } = colorSettings
+  if (type === 'constant') {
+    return attributes => (attributes.color = value)
+  } else {
+    return sourceUsage === 'map_to'
+      ? getColorMethod(
+          graph,
+          mode,
+          (edgeId, attributes) => attributes.data[source],
+          colorscale,
+          colorscaleDirection,
+          getEdgeValueScale
+        )
+      : getDirectVariableColorUpdateMethod(source)
+  }
+}
+
+function getVariabledSize(mode, value, scale, min) {
+  if (mode === 'diameter') {
+    return Math.max((value / 2) * scale, min / 2)
+  } else if (mode === 'area') {
+    return Math.max(Math.sqrt((value / 2) * scale), min / 2)
+  } else {
+    return Math.max(value * scale, min)
+  }
+}
+
+function getColorMethod(
+  graph,
+  mode,
+  sourceGetter,
+  selectedColorscale,
+  colorscaleDirection,
+  valueScaleGetter
+) {
+  const valueScale = valueScaleGetter(graph, sourceGetter)
+  let colorscale = selectedColorscale || DEFAULT_SCALE
+  if (colorscaleDirection === 'reversed') {
+    colorscale = [...colorscale].reverse()
+  }
+
+  if (mode === 'categorical') {
+    const colorMap = Object.fromEntries(
+      valueScale.map((value, index) => [
+        value,
+        colorscale[index % colorscale.length]
+      ])
+    )
+
+    return (attributes, nodeId) => {
+      const category = sourceGetter(nodeId, attributes)
+      attributes.color = colorMap[category]
+    }
+  } else {
+    const min = valueScale[0]
+    const max = valueScale[valueScale.length - 1]
+    const normalizedColorscale = colorscale.map((color, index) => [
+      index / (colorscale.length - 1),
+      tinycolor(color).toRgb()
+    ])
+    return (attributes, nodeId) => {
+      const value = sourceGetter(nodeId, attributes)
+      const normalizedValue = (value - min) / (max - min)
+      if (isNaN(normalizedValue)) {
+        return
+      }
+      const exactMatch = normalizedColorscale.find(
+        ([value]) => value === normalizedValue
+      )
+      if (exactMatch) {
+        attributes.color = tinycolor(exactMatch[1]).toHexString()
+        return
+      }
+
+      const rightColorIndex = normalizedColorscale.findIndex(
+        ([value]) => value >= normalizedValue
+      )
+      const leftColorIndex = (rightColorIndex || 1) - 1
+      const right = normalizedColorscale[rightColorIndex]
+      const left = normalizedColorscale[leftColorIndex]
+      const interpolationFactor =
+        (normalizedValue - left[0]) / (right[0] - left[0])
+
+      const r0 = left[1].r
+      const g0 = left[1].g
+      const b0 = left[1].b
+      const r1 = right[1].r
+      const g1 = right[1].g
+      const b1 = right[1].b
+
+      attributes.color = tinycolor({
+        r: r0 + interpolationFactor * (r1 - r0),
+        g: g0 + interpolationFactor * (g1 - g0),
+        b: b0 + interpolationFactor * (b1 - b0)
+      }).toHexString()
+    }
+  }
+}
+
+function getNodeValueScale(graph, sourceGetter) {
+  const scaleSet = graph.reduceNodes((res, nodeId, attributes) => {
+    res.add(sourceGetter(nodeId, attributes))
+    return res
+  }, new Set())
+  return Array.from(scaleSet).sort((a, b) => a - b)
+}
+
+function getEdgeValueScale(graph, sourceGetter) {
+  const scaleSet = graph.reduceEdges((res, edgeId, attributes) => {
+    res.add(sourceGetter(edgeId, attributes))
+    return res
+  }, new Set())
+  return Array.from(scaleSet).sort((a, b) => a - b)
+}
+
+export function getOptionsFromDataSources(dataSources) {
+  if (!dataSources) {
+    return []
+  }
+
+  return Object.keys(dataSources).map(name => ({
+    value: name,
+    label: name
+  }))
+}
+
+export default {
+  getOptionsFromDataSources
+}

src/lib/storedInquiries/index.js

@@ -4,11 +4,13 @@ import events from '@/lib/utils/events'
 import migration from './_migrations'
 
 const migrate = migration._migrate
+const myInquiriesKey = 'myInquiries'
 
 export default {
   version: 2,
+  myInquiriesKey,
   getStoredInquiries() {
-    let myInquiries = JSON.parse(localStorage.getItem('myInquiries'))
+    let myInquiries = JSON.parse(localStorage.getItem(myInquiriesKey))
     if (!myInquiries) {
       const oldInquiries = localStorage.getItem('myQueries')
       if (oldInquiries) {
@@ -26,57 +28,32 @@ export default {
     const newInquiry = JSON.parse(JSON.stringify(baseInquiry))
     newInquiry.name = newInquiry.name + ' Copy'
     newInquiry.id = nanoid()
-    newInquiry.createdAt = new Date()
+    newInquiry.createdAt = new Date().toJSON()
+    newInquiry.updatedAt = new Date().toJSON()
     delete newInquiry.isPredefined
 
     return newInquiry
   },
 
   isTabNeedName(inquiryTab) {
-    const isFromScratch = !inquiryTab.initName
-    return inquiryTab.isPredefined || isFromScratch
-  },
-
-  save (inquiryTab, newName) {
-    const value = {
-      id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
-      query: inquiryTab.query,
-      viewType: inquiryTab.$refs.dataView.mode,
-      viewOptions: inquiryTab.$refs.dataView.getOptionsForSave(),
-      name: newName || inquiryTab.initName
-    }
-
-    // Get inquiries from local storage
-    const myInquiries = this.getStoredInquiries()
-
-    // Set createdAt
-    if (newName) {
-      value.createdAt = new Date()
-    } else {
-      var inquiryIndex = myInquiries.findIndex(oldInquiry => oldInquiry.id === inquiryTab.id)
-      value.createdAt = myInquiries[inquiryIndex].createdAt
-    }
-
-    // Insert in inquiries list
-    if (newName) {
-      myInquiries.push(value)
-    } else {
-      myInquiries[inquiryIndex] = value
-    }
-
-    // Save to local storage
-    this.updateStorage(myInquiries)
-    return value
+    return inquiryTab.isPredefined || !inquiryTab.name
   },
 
   updateStorage(inquiries) {
-    localStorage.setItem('myInquiries', JSON.stringify({ version: this.version, inquiries }))
+    localStorage.setItem(
+      myInquiriesKey,
+      JSON.stringify({ version: this.version, inquiries })
+    )
   },
 
   serialiseInquiries(inquiryList) {
     const preparedData = JSON.parse(JSON.stringify(inquiryList))
     preparedData.forEach(inquiry => delete inquiry.isPredefined)
-    return JSON.stringify({ version: this.version, inquiries: preparedData }, null, 4)
+    return JSON.stringify(
+      { version: this.version, inquiries: preparedData },
+      null,
+      4
+    )
   },
 
   deserialiseInquiries(str) {
@@ -92,7 +69,9 @@ export default {
 
     // Generate new ids if they are the same as existing inquiries
     inquiryList.forEach(inquiry => {
-      const allInquiriesIds = this.getStoredInquiries().map(inquiry => inquiry.id)
+      const allInquiriesIds = this.getStoredInquiries().map(
+        inquiry => inquiry.id
+      )
       if (allInquiriesIds.includes(inquiry.id)) {
         inquiry.id = nanoid()
       }
@@ -102,8 +81,7 @@ export default {
   },
 
   importInquiries() {
-    return fu.importFile()
-      .then(str => {
+    return fu.importFile().then(str => {
       const inquires = this.deserialiseInquiries(str)
 
       events.send('inquiry.import', inquires.length)

src/lib/tab.js

@@ -0,0 +1,63 @@
+import { nanoid } from 'nanoid'
+import time from '@/lib/utils/time'
+import events from '@/lib/utils/events'
+
+export default class Tab {
+  constructor(state, inquiry = {}) {
+    this.id = inquiry.id || nanoid()
+    this.name = inquiry.id ? inquiry.name : null
+    this.tempName =
+      inquiry.name ||
+      (state.untitledLastIndex
+        ? `Untitled ${state.untitledLastIndex}`
+        : 'Untitled')
+    this.query = inquiry.query
+    this.viewOptions = inquiry.viewOptions || undefined
+    this.isPredefined = inquiry.isPredefined
+    this.viewType = inquiry.viewType || 'chart'
+    this.result = null
+    this.isGettingResults = false
+    this.error = null
+    this.time = 0
+    this.layout = inquiry.layout || {
+      sqlEditor: 'above',
+      table: 'bottom',
+      dataView: 'hidden'
+    }
+    this.maximize = inquiry.maximize
+
+    this.isSaved = !!inquiry.id
+    this.state = state
+    this.updatedAt = inquiry.updatedAt
+  }
+
+  async execute() {
+    this.isGettingResults = true
+    this.result = null
+    this.error = null
+    const db = this.state.db
+    try {
+      const start = new Date()
+      this.result = await db.execute(this.query + ';')
+      this.time = time.getPeriod(start, new Date())
+
+      if (this.result && this.result.values) {
+        events.send(
+          'resultset.create',
+          this.result.values[this.result.columns[0]].length
+        )
+      }
+
+      events.send('query.run', parseFloat(this.time), { status: 'success' })
+    } catch (err) {
+      this.error = {
+        type: 'error',
+        message: err
+      }
+
+      events.send('query.run', 0, { status: 'error' })
+    }
+    db.refreshSchema()
+    this.isGettingResults = false
+  }
+}

src/lib/utils/clipboardIo.js

@@ -2,9 +2,11 @@ import Lib from 'plotly.js/src/lib'
 import dataUrlToBlob from 'dataurl-to-blob'
 
 export default {
-  async copyCsv (str) {
+  async copyText(str, notifyMessage) {
     await navigator.clipboard.writeText(str)
-    Lib.notifier('CSV copied to clipboard successfully', 'long')
+    if (notifyMessage) {
+      Lib.notifier(notifyMessage, 'long')
+    }
   },
 
   async copyImage(source) {
@@ -17,7 +19,8 @@ export default {
 
   async _copyBlob(blob) {
     await navigator.clipboard.write([
-      new ClipboardItem({ // eslint-disable-line no-undef
+      new ClipboardItem({
+        // eslint-disable-line no-undef
         [blob.type]: blob
       })
     ])
@@ -30,9 +33,13 @@ export default {
   },
 
   async _copyCanvas(canvas) {
-    canvas.toBlob(async (blob) => {
+    canvas.toBlob(
+      async blob => {
         await this._copyBlob(blob)
         Lib.notifier('Image copied to clipboard successfully', 'long')
-    }, 'image/png', 1)
+      },
+      'image/png',
+      1
+    )
   }
 }

src/lib/utils/fileIo.js

@@ -1,4 +1,10 @@
 export default {
+  isJSON(file) {
+    return file && file.type === 'application/json'
+  },
+  isNDJSON(file) {
+    return file && file.name.endsWith('.ndjson')
+  },
   isDatabase(file) {
     const dbTypes = ['application/vnd.sqlite3', 'application/x-sqlite3']
     return file.type
@@ -51,16 +57,16 @@ export default {
   },
 
   importFile() {
-    const reader = new FileReader()
-
-    return this.getFileFromUser('.json')
-      .then(file => {
-        return new Promise((resolve, reject) => {
-          reader.onload = e => {
-            resolve(e.target.result)
-          }
-          reader.readAsText(file)
+    return this.getFileFromUser('.json').then(file => {
+      return this.getFileContent(file)
     })
+  },
+
+  getFileContent(file) {
+    const reader = new FileReader()
+    return new Promise(resolve => {
+      reader.onload = e => resolve(e.target.result)
+      reader.readAsText(file)
     })
   },
 

src/lib/utils/time.js

@@ -15,7 +15,9 @@ export default {
 
   sleep(ms) {
     return new Promise(resolve => {
-      setTimeout(() => { resolve() }, ms)
+      setTimeout(() => {
+        resolve()
+      }, ms)
     })
   }
 }