#115 fix version number

* Build SQLite 3.41.0

* Update pivot_vtab

* Add Pearson correlation coefficient function extension, build

* Add an easy way to running test locally without Nodejs

* Use RSS sum to pick top2 processes for the report

* Try previous Ubuntu LTS as a workaround for Firefox worker not starting

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: Deploy to GitHub Pages and create release
+name: Create release
 on:
   workflow_dispatch:
   push:
@@ -7,7 +7,7 @@ on:
 
 jobs:
   deploy:
-    name: Deploy to GitHub Pages and create release
+    name: Create release
     runs-on: ubuntu-latest    
     steps:
     - uses: actions/checkout@v2
@@ -24,10 +24,11 @@ jobs:
         npm install
         npm run build
 
-    - name: Create archive
+    - name: Create archives
       run: |
         cd dist
-        zip -9 -r  dist.zip . -x "js/*.map" -x "/*.map"
+        zip -9 -r ../dist.zip . -x "js/*.map" -x "/*.map"
+        zip -9 -r  ../dist_map.zip .
 
     - name: Create Release Notes
       run: |
@@ -39,16 +40,6 @@ jobs:
     - name: Create release
       uses: ncipollo/release-action@v1
       with:
-        artifacts: "dist/dist.zip"
+        artifacts: "dist.zip,dist_map.zip"
         token: ${{ secrets.GITHUB_TOKEN }}
         bodyFile: "CHANGELOG.md"
-
-    - name: Deploy 🚀
-      uses: JamesIves/github-pages-deploy-action@4.1.1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-        branch: build # The branch the action should deploy to.
-        folder: dist/ # The folder the action should deploy.
-        clean: true # Automatically remove deleted files from the deploy branch
-        clean-exclude: .nojekyll
-

.github/workflows/test.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   test:
     name: Run tests
-    runs-on: ubuntu-latest    
+    runs-on: ubuntu-20.04
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js

Dockerfile.test

@@ -0,0 +1,24 @@
+# An easy way to run tests locally without Nodejs installed:
+#
+#     docker build -t sqliteviz/test -f Dockerfile.test .
+#
+
+FROM node:12
+
+RUN set -ex; \
+    apt update; \
+    apt install -y chromium firefox-esr; \
+    npm install -g npm@7
+
+WORKDIR /tmp/build
+
+COPY package.json package-lock.json ./
+COPY lib lib
+RUN npm install
+
+COPY . .
+
+RUN set -ex; \
+    sed -i 's/browsers: \[.*\],/browsers: ['"'FirefoxHeadlessTouch'"'],/' karma.conf.js
+
+RUN npm run lint -- --no-fix && npm run test

README.md

@@ -18,10 +18,10 @@ 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 GitHub Pages at [lana-k.github.io/sqliteviz][6].
+The latest release of sqliteviz is deployed on [sqliteviz.com/app][6].
 
 ## Wiki
-For user documentation, check out sqliteviz [Wiki][7].
+For user documentation, check out sqliteviz [documentation][7].
 
 ## Motivation
 It's a kind of middleground between [Plotly Falcon][1] and [Redash][2].
@@ -34,8 +34,8 @@ It is built on top of [react-chart-editor][3], [PivotTable.js][12], [sql.js][4]
 [3]: https://github.com/plotly/react-chart-editor
 [4]: https://github.com/sql-js/sql.js
 [5]: https://github.com/vuejs/vue
-[6]: https://lana-k.github.io/sqliteviz/
-[7]: https://github.com/lana-k/sqliteviz/wiki
+[6]: https://sqliteviz.com/app/
+[7]: https://sqliteviz.com/docs
 [8]: https://github.com/surmon-china/vue-codemirror#readme
 [9]: https://www.papaparse.com/
 [10]: https://github.com/lana-k/sqliteviz/wiki/Predefined-queries

lib/sql-js/Dockerfile

@@ -1,4 +1,4 @@
-FROM emscripten/emsdk:2.0.24
+FROM emscripten/emsdk:3.0.1
 
 WORKDIR /tmp/build
 

lib/sql-js/README.md

@@ -43,6 +43,8 @@ SQLite [miscellaneous extensions][3] included:
 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])
 
 To ease the step to have working clone locally, the build is committed into
 the repository.
@@ -99,3 +101,5 @@ described in [this message from SQLite Forum][12]:
 [17]: https://sqlite.org/contrib/
 [18]: https://sqlite.org/contrib//download/extension-functions.c?get=25
 [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

lib/sql-js/benchmark/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12-buster
+FROM node:14-bullseye
 
 RUN set -ex; \
     echo 'deb http://deb.debian.org/debian unstable main' \

lib/sql-js/benchmark/README.md

@@ -1,14 +1,25 @@
 # SQLite WebAssembly build micro-benchmark
 
-This directory contains a micro-benchmark for evaluating SQLite
-WebAssembly builds performance on typical SQL queries, run from
-`make.sh` script. It can also serve as a smoke test.
+This directory contains a micro-benchmark for evaluating SQLite WebAssembly
+builds performance on read and write SQL queries, run from `make.sh` script. If
+the script has permission to `nice` processes and [Procpath][1] is installed,
+e.g. it is run with `sudo -E env PATH=$PATH ./make.sh`, it'll `renice` all
+processes running inside the benchmark containers. It can also serve as a smoke
+test (e.g. for memory leaks).
 
-The benchmark operates on a set of SQLite WebAssembly builds expected
-in `lib/build-$NAME` directories each containing `sql-wasm.js` and
-`sql-wasm.wasm`. Then it creates a Docker image for each, and runs
-the benchmark in Firefox and Chromium using Karma in the container.
+The benchmark operates on a set of SQLite WebAssembly builds expected in
+`lib/build-$NAME` directories each containing `sql-wasm.js` and
+`sql-wasm.wasm`. Then it creates a Docker image for each, and runs the
+benchmark in Firefox and Chromium using Karma in the container.
 
-After successful run, the benchmark result of each build is contained
-in `build-$NAME-result.json`. The JSON result files can be analysed
-using `result-analysis.ipynb` Jupyter notebook.
+After successful run, the benchmark produces the following per each build:
+
+- `build-$NAME-result.json`
+- `build-$NAME.sqlite` (if Procpath is installed)
+- `build-$NAME.svg` (if Procpath is installed)
+
+These files can be analysed using `result-analysis.ipynb` Jupyter notebook.
+The SVG is a chart with CPU and RSS usage of each test container (i.e. Chromium
+run, then Firefox run per container).
+
+[1]: https://pypi.org/project/Procpath/

lib/sql-js/benchmark/make.sh

@@ -1,21 +1,47 @@
 #!/bin/bash -e
 
+cleanup () {
+  rm -rf lib/dist "$renice_flag_file"
+  docker rm -f sqljs-benchmark-run 2> /dev/null || true
+}
+trap cleanup EXIT
+
 if [ ! -f sample.csv ]; then
   wget --header="accept-encoding: gzip" -q -O- \
     https://github.com/plotly/datasets/raw/547090bd/wellspublic.csv \
     | gunzip -c > sample.csv
 fi
 
+PLAYBOOK=procpath/karma_docker.procpath
+
+# for renice to work run like "sudo -E env PATH=$PATH ./make.sh"
+test_ni=$(nice -n -5 nice)
+if [ $test_ni == -5 ]; then
+  renice_flag_file=$(mktemp)
+fi
+{
+  while [ -f $renice_flag_file ]; do
+    procpath --logging-level ERROR play -f $PLAYBOOK renice:watch
+  done
+} &
+
+shopt -s nullglob
 for d in lib/build-* ; do
-  rm -r lib/dist || true
+  rm -rf lib/dist
   cp -r $d lib/dist
+  sample_name=$(basename $d)
 
-  name=$(basename $d)
-  docker build -t sqliteviz/sqljs-benchmark:$name .
-  docker rm sqljs-benchmark-$name 2> /dev/null || true
-  docker run -it --name sqljs-benchmark-$name sqliteviz/sqljs-benchmark:$name
-  docker cp sqljs-benchmark-$name:/tmp/build/suite-result.json ${name}-result.json
-  docker rm sqljs-benchmark-$name
+  docker build -t sqliteviz/sqljs-benchmark .
+  docker rm sqljs-benchmark-run 2> /dev/null || true
+  docker run -d -it --cpus 2 --name sqljs-benchmark-run sqliteviz/sqljs-benchmark
+  {
+    rm -f ${sample_name}.sqlite
+    procpath play -f $PLAYBOOK -o database_file=${sample_name}.sqlite track:record
+    procpath play -f $PLAYBOOK -o database_file=${sample_name}.sqlite \
+      -o plot_file=${sample_name}.svg track:plot
+  } &
+
+  docker attach sqljs-benchmark-run
+  docker cp sqljs-benchmark-run:/tmp/build/suite-result.json ${sample_name}-result.json
+  docker rm sqljs-benchmark-run
 done
-
-rm -r lib/dist

lib/sql-js/benchmark/procpath/karma_docker.procpath

@@ -0,0 +1,28 @@
+# This command may run when "sqljs-benchmark-run" does not yet exist or run
+[renice:watch]
+interval: 2
+repeat: 30
+environment:
+  ROOT_PID=docker inspect -f "{{.State.Pid}}" sqljs-benchmark-run 2> /dev/null || true
+query:
+  PIDS=$..children[?(@.stat.pid in [$ROOT_PID])]..pid
+command:
+  echo $PIDS | tr , '\n' | xargs --no-run-if-empty -I{} -- renice -n -5 -p {}
+
+# Expected input arguments: database_file
+[track:record]
+interval: 1
+stop_without_result: 1
+environment:
+  ROOT_PID=docker inspect -f "{{.State.Pid}}" sqljs-benchmark-run
+query:
+  $..children[?(@.stat.pid == $ROOT_PID)]
+pid_list: $ROOT_PID
+
+# Expected input arguments: database_file, plot_file
+[track:plot]
+moving_average_window: 5
+title: Chromium vs Firefox (№1 RSS, №2 CPU)
+custom_query_file:
+  procpath/top2_rss.sql
+  procpath/top2_cpu.sql

lib/sql-js/benchmark/procpath/top2_cpu.sql

@@ -0,0 +1,29 @@
+WITH diff_all AS (
+    SELECT
+        record_id,
+        ts,
+        stat_pid,
+        stat_utime + stat_stime - LAG(stat_utime + stat_stime) OVER (
+            PARTITION BY stat_pid
+            ORDER BY record_id
+        ) tick_diff,
+        ts - LAG(ts) OVER (
+            PARTITION BY stat_pid
+            ORDER BY record_id
+        ) ts_diff
+    FROM record
+), diff AS (
+    SELECT * FROM diff_all WHERE tick_diff IS NOT NULL
+), one_time_pid_condition AS (
+    SELECT stat_pid
+    FROM record
+    GROUP BY 1
+    ORDER BY SUM(stat_utime + stat_stime) DESC
+    LIMIT 2
+)
+SELECT
+    ts,
+    stat_pid pid,
+    100.0 * tick_diff / (SELECT value FROM meta WHERE key = 'clock_ticks') / ts_diff value
+FROM diff
+JOIN one_time_pid_condition USING(stat_pid)

lib/sql-js/benchmark/procpath/top2_rss.sql

@@ -0,0 +1,13 @@
+WITH one_time_pid_condition AS (
+    SELECT stat_pid
+    FROM record
+    GROUP BY 1
+    ORDER BY SUM(stat_rss) DESC
+    LIMIT 2
+)
+SELECT
+    ts,
+    stat_pid pid,
+    stat_rss / 1024.0 / 1024 * (SELECT value FROM meta WHERE key = 'page_size') value
+FROM record
+JOIN one_time_pid_condition USING(stat_pid)

lib/sql-js/build.py

@@ -2,9 +2,11 @@ import logging
 import subprocess
 from pathlib import Path
 
-
+# See the setting descriptions on these pages:
+# - https://emscripten.org/docs/optimizing/Optimizing-Code.html
+# - https://github.com/emscripten-core/emscripten/blob/main/src/settings.js
 cflags = (
-    '-O2',
+    # SQLite configuration
     '-DSQLITE_DEFAULT_CACHE_SIZE=-65536',  # 64 MiB
     '-DSQLITE_DEFAULT_MEMSTATUS=0',
     '-DSQLITE_DEFAULT_SYNCHRONOUS=0',
@@ -13,26 +15,26 @@ cflags = (
     '-DSQLITE_ENABLE_FTS3',
     '-DSQLITE_ENABLE_FTS3_PARENTHESIS',
     '-DSQLITE_ENABLE_FTS5',
-    '-DSQLITE_ENABLE_JSON1',
     '-DSQLITE_ENABLE_NORMALIZE',
     '-DSQLITE_EXTRA_INIT=extra_init',
     '-DSQLITE_OMIT_DEPRECATED',
     '-DSQLITE_OMIT_LOAD_EXTENSION',
     '-DSQLITE_OMIT_SHARED_CACHE',
     '-DSQLITE_THREADSAFE=0',
+    # Compile-time optimisation
+    '-Os',  # reduces the code size about in half comparing to -O2
+    '-flto',
 )
 emflags = (
     # Base
     '--memory-init-file', '0',
-    '-s', 'RESERVED_FUNCTION_POINTERS=64',
     '-s', 'ALLOW_TABLE_GROWTH=1',
-    '-s', 'SINGLE_FILE=0',
     # WASM
     '-s', 'WASM=1',
     '-s', 'ALLOW_MEMORY_GROWTH=1',
-    # Optimisation
-    '-s', 'INLINING_LIMIT=50',
-    '-O3',
+    '-s', 'ENVIRONMENT=web,worker',
+    # Link-time optimisation
+    '-Os',
     '-flto',
     # sql.js
     '-s', 'EXPORTED_FUNCTIONS=@src/sqljs/exported_functions.json',
@@ -50,22 +52,22 @@ def build(src: Path, dst: Path):
         'emcc',
         *cflags,
         '-c', src / 'sqlite3.c',
-        '-o', out / 'sqlite3.bc',
+        '-o', out / 'sqlite3.o',
     ])
     logging.info('Building LLVM bitcode for extension-functions.c')
     subprocess.check_call([
         'emcc',
         *cflags,
         '-c', src / 'extension-functions.c',
-        '-o', out / 'extension-functions.bc',
+        '-o', out / 'extension-functions.o',
     ])
 
     logging.info('Building WASM from bitcode')
     subprocess.check_call([
         'emcc',
         *emflags,
-        out / 'sqlite3.bc',
-        out / 'extension-functions.bc',
+        out / 'sqlite3.o',
+        out / 'extension-functions.o',
         '-o', out / 'sql-wasm.js',
     ])
 

lib/sql-js/configure.py

@@ -8,7 +8,7 @@ from pathlib import Path
 from urllib import request
 
 
-amalgamation_url = 'https://sqlite.org/2021/sqlite-amalgamation-3360000.zip'
+amalgamation_url = 'https://sqlite.org/2023/sqlite-amalgamation-3410000.zip'
 
 # Extension-functions
 # ===================
@@ -20,7 +20,7 @@ contrib_functions_url = 'https://sqlite.org/contrib/download/extension-functions
 extension_urls = (
     # Miscellaneous extensions
     # ========================
-    ('https://sqlite.org/src/raw/c6bd5d24?at=series.c', 'sqlite3_series_init'),
+    ('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/5bb2264c?at=uuid.c', 'sqlite3_uuid_init'),
     ('https://sqlite.org/src/raw/5853b0e5?at=regexp.c', 'sqlite3_regexp_init'),
@@ -28,10 +28,11 @@ extension_urls = (
     ('https://sqlite.org/src/raw/09f967dc?at=decimal.c', 'sqlite3_decimal_init'),
     # Third-party extension
     # =====================
-    ('https://github.com/jakethaw/pivot_vtab/raw/08ab0797/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
+    ('https://github.com/jakethaw/pivot_vtab/raw/9323ef93/pivot_vtab.c', 'sqlite3_pivotvtab_init'),
+    ('https://github.com/nalgeon/sqlean/raw/95e8d21a/src/pearson.c', 'sqlite3_pearson_init'),
 )
 
-sqljs_url = 'https://github.com/sql-js/sql.js/archive/refs/tags/v1.5.0.zip'
+sqljs_url = 'https://github.com/sql-js/sql.js/archive/refs/tags/v1.7.0.zip'
 
 
 def _generate_extra_init_c_function(init_function_names):

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.18.0",
+  "version": "0.24.1",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -16,7 +16,7 @@
     "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",
     "promise-worker": "^2.0.1",
@@ -51,6 +51,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "flush-promises": "^1.0.2",
     "karma": "^3.1.4",
     "karma-firefox-launcher": "^2.1.0",
     "karma-webpack": "^4.0.2",

public/index.html

@@ -69,6 +69,8 @@
         }
       }
     </style>
+    <!-- head extention slot start -->
+    <!-- head extention slot end -->
   </head>
   <body>
     <noscript>
@@ -93,6 +95,8 @@
         </svg>
       </div>
     </div>
+    <!-- extention slot start -->
+    <!-- extention slot end -->
     <!-- built files will be auto injected -->
   </body>
 </html>

src/assets/images/logo_simple.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8311 34.6554C25.4675 33.8178 24.177 32.8655 22.9735 31.8086V14.3616H30.5728V36.753C29.3146 36.0982 28.0673 35.399 26.8311 34.6554ZM41.4669 25.8486H33.8675V38.1514C36.3477 39.3055 38.884 40.3334 41.4669 41.2313V25.8486ZM22.9735 35.3046L22.4768 34.9051C21.7152 34.2725 21.0033 33.6232 20.3245 32.9739L2.2947 30.8763L5.60596 37.3024L28.7848 39.2002C26.7511 38.0537 24.8082 36.7513 22.9735 35.3046ZM41.0695 44.6441C38.4829 43.7946 35.9458 42.7997 33.4702 41.6641L32.543 41.198L17.2616 40.1825L19.8444 45.593L46.5 46.209C44.6788 45.7761 42.8411 45.2434 41.0695 44.6441ZM9.34768 14.3616C12.2649 19.4905 15.735 24.2807 19.6954 28.6455V11.2651L2.99007 2.99115L1.5 22.3859L18.702 31.2592C14.1919 26.5283 10.9703 20.7087 9.34768 14.3616Z" fill="#119DFF"/>
+</svg>

src/assets/styles/tables.css

@@ -107,3 +107,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/components/CsvImport/index.vue

@@ -112,6 +112,7 @@ 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',
@@ -335,6 +336,7 @@ export default {
       this.$store.commit('setCurrentTabId', tabId)
       this.importCsvCompleted = false
       this.$emit('finish')
+      events.send('inquiry.create', null, { auto: true })
     }
   }
 }

src/components/DbUploader.vue

@@ -58,6 +58,7 @@ import fIo from '@/lib/utils/fileIo'
 import ChangeDbIcon from '@/components/svg/changeDb'
 import database from '@/lib/database'
 import CsvImport from '@/components/CsvImport'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'DbUploader',
@@ -127,6 +128,11 @@ export default {
       if (fIo.isDatabase(file)) {
         this.loadDb(file)
       } else {
+        events.send('database.import', file.size, {
+          from: 'csv',
+          new_db: true
+        })
+
         this.file = file
         await this.$nextTick()
         const csvImport = this.$refs.addCsv

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"
@@ -12,7 +13,7 @@
     <span v-if="tooltip" class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
       {{ tooltip }}
     </span>
-  </div>
+  </button>
 </template>
 
 <script>
@@ -38,11 +39,12 @@ 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);
@@ -56,12 +58,12 @@ export default {
   fill: var(--color-accent);
 }
 
-.disabled.icon-btn  .icon >>> path,
-.disabled.icon-btn  .icon >>> circle {
+.icon-btn:disabled  .icon >>> path,
+.icon-btn:disabled  .icon >>> circle {
   fill: var(--color-border);
 }
 
-.disabled.icon-btn {
+.icon-btn:disabled {
   cursor: default;
   pointer-events: none;
 }

src/components/Splitpanes/index.vue

@@ -75,14 +75,23 @@ 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
+        }
+      }
+    }
   },
   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
       },

src/components/SqlTable/index.vue

@@ -18,7 +18,12 @@
         ref="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 +33,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"
+              :data-col="colIndex"
+              :data-row="pageSize * (currentPage - 1) + rowIndex - 1"
+              :data-isNull="isNull(getCellValue(col, rowIndex))"
+              :data-isBlob="isBlob(getCellValue(col, rowIndex))"
+              :key="colIndex"
+              :aria-selected="false"
+              @click="onCellClick"
+            >
               <div class="cell-data" :style="cellStyle">
-                {{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
+                {{ getCellText(col, rowIndex) }}
               </div>
             </td>
           </tr>
@@ -44,7 +58,11 @@
         <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"
+        :page-count="pageCount"
+        v-model="currentPage"
+      />
     </div>
   </div>
 </template>
@@ -62,14 +80,20 @@ export default {
       type: Number,
       default: 20
     },
-    preview: Boolean
+    page: {
+      type: Number,
+      default: 1
+    },
+    preview: Boolean,
+    selectedCellCoordinates: Object
   },
   data () {
     return {
       header: null,
       tableWidth: null,
-      currentPage: 1,
-      resizeObserver: null
+      currentPage: this.page,
+      resizeObserver: null,
+      selectedCellElement: null
     }
   },
   computed: {
@@ -99,7 +123,40 @@ export default {
       }
     }
   },
+  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)
+      }
+    }
+  },
   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(() => {
@@ -110,18 +167,95 @@ export default {
     },
     onScrollTable () {
       this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
-    }
     },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
-    this.resizeObserver.observe(this.$refs.table)
-    this.calculateHeadersWidth()
+    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])
+    },
+    onCellClick (e) {
+      this.selectCell(e.target.closest('td'), false)
+    },
+    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)
+    },
+    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)
+      }
+    }
   },
   beforeDestroy () {
     this.resizeObserver.unobserve(this.$refs.table)
   },
   watch: {
-    currentPageData: 'calculateHeadersWidth',
+    currentPageData () {
+      this.calculateHeadersWidth()
+      this.selectCell(null)
+    },
     dataSet () {
       this.currentPage = 1
     }
@@ -130,4 +264,13 @@ export default {
 </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/svg/arrow.vue

@@ -0,0 +1,20 @@
+<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/edgeArrow.vue

@@ -0,0 +1,26 @@
+<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/row.vue

@@ -0,0 +1,53 @@
+<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/viewCellValue.vue

@@ -0,0 +1,50 @@
+<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/csv.js

@@ -73,7 +73,9 @@ export default {
         comments: false,
         step: undefined,
         complete: results => {
-          const res = {
+          let res
+          try {
+            res = {
               data: this.getResult(results),
               delimiter: results.meta.delimiter,
               hasErrors: false,
@@ -85,9 +87,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

@@ -8,11 +8,11 @@ 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 {

src/lib/database/index.js

@@ -7,6 +7,8 @@ import Worker from './_worker.js'
 // https://github.com/nolanlawson/promise-worker
 import PromiseWorker from 'promise-worker'
 
+import events from '@/lib/utils/events'
+
 function getNewDatabase () {
   const worker = new Worker()
   return new Database(worker)
@@ -75,7 +77,12 @@ class Database {
     }
 
     this.dbName = file ? fu.getFileName(file) : 'database'
-    this.refreshSchema()
+    await this.refreshSchema()
+
+    events.send('database.import', file ? file.size : 0, {
+      from: file ? 'sqlite' : 'none',
+      new_db: true
+    })
   }
 
   async refreshSchema () {
@@ -114,6 +121,7 @@ class Database {
       throw new Error(data.error)
     }
     fu.exportToFile(data, fileName)
+    events.send('database.export', data.byteLength, { to: 'sqlite' })
   }
 
   async validateTableName (name) {

src/lib/storedInquiries/index.js

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid'
 import fu from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
 import migration from './_migrations'
 
 const migrate = migration._migrate
@@ -32,17 +33,16 @@ export default {
   },
 
   isTabNeedName (inquiryTab) {
-    const isFromScratch = !inquiryTab.initName
-    return inquiryTab.isPredefined || isFromScratch
+    return inquiryTab.isPredefined || !inquiryTab.name
   },
 
   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
+      viewType: inquiryTab.dataView.mode,
+      viewOptions: inquiryTab.dataView.getOptionsForSave(),
+      name: newName || inquiryTab.name
     }
 
     // Get inquiries from local storage
@@ -103,9 +103,19 @@ export default {
   importInquiries () {
     return fu.importFile()
       .then(str => {
-        return this.deserialiseInquiries(str)
+        const inquires = this.deserialiseInquiries(str)
+
+        events.send('inquiry.import', inquires.length)
+
+        return inquires
       })
   },
+  export (inquiryList, fileName) {
+    const jsonStr = this.serialiseInquiries(inquiryList)
+    fu.exportToFile(jsonStr, fileName)
+
+    events.send('inquiry.export', inquiryList.length)
+  },
 
   async readPredefinedInquiries () {
     const res = await fu.readFile('./inquiries.json')

src/lib/tab.js

@@ -0,0 +1,59 @@
+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
+  }
+
+  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) {

src/lib/utils/events.js

@@ -0,0 +1,12 @@
+export default {
+  send (name, value, labels) {
+    const event = new CustomEvent('sqliteviz-app-event', {
+      detail: {
+        name,
+        value,
+        labels: labels || {}
+      }
+    })
+    window.dispatchEvent(event)
+  }
+}

src/registerServiceWorker.js

@@ -1,3 +1,4 @@
+import events from '@/lib/utils/events'
 let refresh = false
 
 function invokeServiceWorkerUpdateFlow (registration) {
@@ -41,4 +42,8 @@ if ('serviceWorker' in navigator) {
       }
     })
   })
+
+  window.addEventListener('appinstalled', () => {
+    events.send('pwa.install')
+  })
 }

src/router.js

@@ -4,6 +4,7 @@ import Workspace from '@/views/Main/Workspace'
 import Inquiries from '@/views/Main/Inquiries'
 import Welcome from '@/views/Welcome'
 import Main from '@/views/Main'
+import LoadView from '@/views/LoadView'
 import store from '@/store'
 import database from '@/lib/database'
 
@@ -31,6 +32,11 @@ const routes = [
         component: Inquiries
       }
     ]
+  },
+  {
+    path: '/load',
+    name: 'Load',
+    component: LoadView
   }
 ]
 
@@ -39,7 +45,7 @@ const router = new VueRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  if (!store.state.db) {
+  if (!store.state.db && to.name !== 'Load') {
     const newDb = database.getNewDatabase()
     await newDb.loadDb()
     store.commit('setDb', newDb)

src/store/actions.js

@@ -1,32 +1,17 @@
-import { nanoid } from 'nanoid'
+import Tab from '@/lib/tab'
 
 export default {
-  async addTab ({ state }, data) {
-    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
-    // If no data then create a new blank one...
-    // No data.id means to create new tab, but not blank,
-    // e.g. with 'select * from csv_import' inquiry after csv import
-    if (!data || !data.id) {
-      tab.id = nanoid()
-      tab.name = null
-      tab.tempName = state.untitledLastIndex
-        ? `Untitled ${state.untitledLastIndex}`
-        : 'Untitled'
-      tab.viewType = 'chart'
-      tab.viewOptions = undefined
-      tab.isSaved = false
-    } else {
-      tab.isSaved = true
-    }
-
-    // add new tab only if was not already opened
-    if (!state.tabs.some(openedTab => openedTab.id === tab.id)) {
+  async addTab ({ state }, inquiry = {}) {
+    // add new tab only if it was not already opened
+    if (!state.tabs.some(openedTab => openedTab.id === inquiry.id)) {
+      const tab = new Tab(state, JSON.parse(JSON.stringify(inquiry)))
       state.tabs.push(tab)
       if (!tab.name) {
         state.untitledLastIndex += 1
       }
-    }
-
       return tab.id
     }
+
+    return inquiry.id
+  }
 }

src/store/mutations.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 export default {
   setDb (state, db) {
     if (state.db) {
@@ -8,8 +6,8 @@ export default {
     state.db = db
   },
 
-  updateTab (state, { index, name, id, query, viewType, viewOptions, isSaved }) {
-    const tab = state.tabs[index]
+  updateTab (state, { tab, newValues }) {
+    const { name, id, query, viewType, viewOptions, isSaved } = newValues
     const oldId = tab.id
 
     if (id && state.currentTabId === oldId) {
@@ -26,32 +24,41 @@ export default {
       // Saved inquiry is not predefined
       delete tab.isPredefined
     }
-
-    Vue.set(state.tabs, index, tab)
   },
 
-  deleteTab (state, index) {
+  deleteTab (state, tab) {
+    const index = state.tabs.indexOf(tab)
     // If closing tab is the current opened
-    if (state.tabs[index].id === state.currentTabId) {
+    if (tab.id === state.currentTabId) {
       if (index < state.tabs.length - 1) {
         state.currentTabId = state.tabs[index + 1].id
       } else if (index > 0) {
         state.currentTabId = state.tabs[index - 1].id
       } else {
         state.currentTabId = null
-        state.currentTab = null
         state.untitledLastIndex = 0
       }
+      state.currentTab = state.currentTabId
+        ? state.tabs.find(tab => tab.id === state.currentTabId)
+        : null
     }
     state.tabs.splice(index, 1)
   },
   setCurrentTabId (state, id) {
+    try {
       state.currentTabId = id
-  },
-  setCurrentTab (state, tab) {
-    state.currentTab = tab
+      state.currentTab = state.tabs.find(tab => tab.id === id)
+    } catch (e) {
+      console.error('Can\'t open a tab id:' + id)
+    }
   },
   updatePredefinedInquiries (state, inquiries) {
     state.predefinedInquiries = Array.isArray(inquiries) ? inquiries : [inquiries]
+  },
+  setLoadingPredefinedInquiries (state, value) {
+    state.loadingPredefinedInquiries = value
+  },
+  setPredefinedInquiriesLoaded (state, value) {
+    state.predefinedInquiriesLoaded = value
   }
 }

src/store/state.js

@@ -4,5 +4,7 @@ export default {
   currentTabId: null,
   untitledLastIndex: 0,
   predefinedInquiries: [],
+  loadingPredefinedInquiries: false,
+  predefinedInquiriesLoaded: false,
   db: null
 }

src/views/LoadView.vue

@@ -0,0 +1,200 @@
+<template>
+    <div>
+      <logs
+        id="logs"
+        :messages="messages"
+      />
+      <button
+        v-if="hasErrors"
+        id="open-workspace-btn"
+        class="secondary"
+        @click="$router.push('/workspace?hide_schema=1')">
+        Open workspace
+      </button>
+    </div>
+</template>
+
+<script>
+import fu from '@/lib/utils/fileIo'
+import database from '@/lib/database'
+import Logs from '@/components/Logs'
+import events from '@/lib/utils/events'
+
+export default {
+  name: 'LoadView',
+  components: {
+    Logs
+  },
+  data () {
+    return {
+      newDb: null,
+      messages: [],
+      dataMsg: {},
+      inquiryMsg: {}
+    }
+  },
+  computed: {
+    hasErrors () {
+      return this.dataMsg.type === 'error' || this.inquiryMsg.type === 'error'
+    }
+  },
+  async created () {
+    const {
+      data_url: dataUrl,
+      data_format: dataFormat,
+      inquiry_url: inquiryUrl,
+      inquiry_id: inquiryIds,
+      maximize
+    } = this.$route.query
+
+    events.send('share.load', null, {
+      has_data_url: !!dataUrl,
+      data_format: dataFormat,
+      has_inquiry_url: !!inquiryUrl,
+      inquiry_id_count: (inquiryIds || []).length,
+      maximize
+    })
+
+    await this.loadData(dataUrl, dataFormat)
+    const inquiries = await this.loadInquiries(inquiryUrl, inquiryIds)
+    if (inquiries && inquiries.length > 0) {
+      await this.openInquiries(inquiries, maximize)
+    }
+    if (!this.hasErrors) {
+      this.$router.push('/workspace?hide_schema=1')
+    }
+  },
+  methods: {
+    async loadData (dataUrl, dataFormat) {
+      this.newDb = database.getNewDatabase()
+      if (dataUrl) {
+        this.dataMsg = {
+          message: 'Preparing data...',
+          type: 'info'
+        }
+        this.messages.push(this.dataMsg)
+
+        // Show loading indicator after 1 second
+        const loadingDataIndicator = setTimeout(() => {
+          if (this.dataMsg.type === 'info') {
+            this.dataMsg.type = 'loading'
+          }
+        }, 1000)
+
+        if (dataFormat === 'sqlite') {
+          await this.getSqliteDb(dataUrl)
+        } else {
+          this.dataMsg.message = 'Unknown data format'
+          this.dataMsg.type = 'error'
+        }
+
+        // Loading indicator is not needed anymore
+        clearTimeout(loadingDataIndicator)
+      } else {
+        await this.newDb.loadDb()
+      }
+      this.$store.commit('setDb', this.newDb)
+    },
+    async getSqliteDb (dataUrl) {
+      try {
+        const filename = new URL(dataUrl).pathname.split('/').pop()
+        const res = await fu.readFile(dataUrl)
+        if (!res.ok) {
+          throw new Error('Fetching DB failed')
+        }
+        const file = await res.blob()
+        file.name = filename
+
+        await this.newDb.loadDb(file)
+        this.dataMsg.message = 'Data is ready'
+        this.dataMsg.type = 'success'
+      } catch (error) {
+        console.error(error)
+        this.dataMsg.message = error
+        this.dataMsg.type = 'error'
+      }
+    },
+    async loadInquiries (inquiryUrl, inquiryIds = []) {
+      if (!inquiryUrl) {
+        return []
+      }
+      // Show loading indicator after 1 second
+      const loadingInquiriesIndicator = setTimeout(() => {
+        if (this.inquiryMsg.type === 'info') {
+          this.inquiryMsg.type = 'loading'
+        }
+      }, 1000)
+      try {
+        this.inquiryMsg = {
+          message: 'Preparing inquiries...',
+          type: 'info'
+        }
+        this.messages.push(this.inquiryMsg)
+
+        const res = await fu.readFile(inquiryUrl)
+        const file = await res.json()
+
+        this.inquiryMsg.message = 'Inquiries are ready'
+        this.inquiryMsg.type = 'success'
+
+        return inquiryIds.length > 0
+          ? file.inquiries.filter(inquiry => inquiryIds.includes(inquiry.id))
+          : file.inquiries
+      } catch (error) {
+        console.error(error)
+        this.inquiryMsg.message = error
+        this.inquiryMsg.type = 'error'
+      }
+      // Loading indicator is not needed anymore
+      clearTimeout(loadingInquiriesIndicator)
+    },
+    async openInquiries (inquiries, maximize) {
+      let tabToOpen = null
+      const layout = maximize ? this.getLayout(maximize) : undefined
+      for (const inquiry of inquiries) {
+        const tabId = await this.$store.dispatch('addTab', {
+          ...inquiry,
+          id: undefined,
+          layout,
+          maximize
+        })
+        if (!tabToOpen) {
+          tabToOpen = tabId
+          this.$store.commit('setCurrentTabId', tabToOpen)
+        }
+      }
+
+      this.$store.state.currentTab.execute()
+    },
+
+    getLayout (panelToMaximize) {
+      if (panelToMaximize === 'dataView') {
+        return {
+          sqlEditor: 'hidden',
+          table: 'above',
+          dataView: 'bottom'
+        }
+      } else {
+        return {
+          sqlEditor: 'above',
+          table: 'bottom',
+          dataView: 'hidden'
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+#logs {
+  margin: 8px auto;
+  max-width: 800px;
+
+}
+
+#open-workspace-btn {
+  margin: 16px auto;
+  display: block;
+}
+</style>

src/views/Main/AppDiagnosticInfo.vue

@@ -62,6 +62,7 @@ export default {
 <style scoped>
 #app-info-icon {
   cursor: pointer;
+  width: 24px;
 }
 #app-info-container {
   display: flex;

src/views/Main/Inquiries/index.vue

@@ -1,11 +1,18 @@
 <template>
-  <div>
+  <div id="my-inquiries-container">
     <div id="start-guide" v-if="allInquiries.length === 0">
       You don't have saved inquiries so far.
       <span class="link" @click="$root.$emit('createNewInquiry')">Create</span>
       the one from scratch or
       <span @click="importInquiries" class="link">import</span> from a file.
     </div>
+    <div
+      id="loading-predefined-status"
+      v-if="$store.state.loadingPredefinedInquiries"
+    >
+      <loading-indicator/>
+      Loading predefined inquiries...
+    </div>
     <div id="my-inquiries-content" ref="my-inquiries-content" v-show="allInquiries.length > 0">
       <div id="my-inquiries-toolbar">
         <div id="toolbar-buttons">
@@ -157,9 +164,9 @@ import DeleteIcon from './svg/delete'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import CheckBox from '@/components/CheckBox'
+import LoadingIndicator from '@/components/LoadingIndicator'
 import tooltipMixin from '@/tooltipMixin'
 import storedInquiries from '@/lib/storedInquiries'
-import fu from '@/lib/utils/fileIo'
 
 export default {
   name: 'Inquiries',
@@ -170,7 +177,8 @@ export default {
     DeleteIcon,
     CloseIcon,
     TextField,
-    CheckBox
+    CheckBox,
+    LoadingIndicator
   },
   mixins: [tooltipMixin],
   data () {
@@ -249,15 +257,21 @@ export default {
       }
     }
   },
-  created () {
-    storedInquiries.readPredefinedInquiries()
-      .then(inquiries => {
-        this.$store.commit('updatePredefinedInquiries', inquiries)
-      })
-      .catch(console.error)
-      .finally(() => {
+  async created () {
     this.inquiries = storedInquiries.getStoredInquiries()
-      })
+    const loadingPredefinedInquiries = this.$store.state.loadingPredefinedInquiries
+    const predefinedInquiriesLoaded = this.$store.state.predefinedInquiriesLoaded
+    if (!predefinedInquiriesLoaded && !loadingPredefinedInquiries) {
+      try {
+        this.$store.commit('setLoadingPredefinedInquiries', true)
+        const inquiries = await storedInquiries.readPredefinedInquiries()
+        this.$store.commit('updatePredefinedInquiries', inquiries)
+        this.$store.commit('setPredefinedInquiriesLoaded', true)
+      } catch (e) {
+        console.error(e)
+      }
+      this.$store.commit('setLoadingPredefinedInquiries', false)
+    }
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.calcMaxTableHeight)
@@ -324,12 +338,14 @@ export default {
       storedInquiries.updateStorage(this.inquiries)
 
       // update tab, if renamed inquiry is opened
-      const tabIndex = this.findTabIndex(processedInquiry.id)
-      if (tabIndex >= 0) {
+      const tab = this.$store.state.tabs
+        .find(tab => tab.id === processedInquiry.id)
+      if (tab) {
         this.$store.commit('updateTab', {
-          index: tabIndex,
-          name: this.newName,
-          id: processedInquiry.id
+          tab,
+          newValues: {
+            name: this.newName
+          }
         })
       }
       // hide dialog
@@ -353,9 +369,10 @@ export default {
         this.inquiries.splice(this.processedInquiryIndex, 1)
 
         // Close deleted inquiry tab if it was opened
-        const tabIndex = this.findTabIndex(this.processedInquiryId)
-        if (tabIndex >= 0) {
-          this.$store.commit('deleteTab', tabIndex)
+        const tab = this.$store.state.tabs
+          .find(tab => tab.id === this.processedInquiryId)
+        if (tab) {
+          this.$store.commit('deleteTab', tab)
         }
 
         // Clear checkbox
@@ -369,10 +386,12 @@ export default {
 
         // Close deleted inquiries if it was opened
         const tabs = this.$store.state.tabs
-        for (let i = tabs.length - 1; i >= 0; i--) {
+        let i = tabs.length - 1
+        while (i > -1) {
           if (this.selectedInquiriesIds.has(tabs[i].id)) {
-            this.$store.commit('deleteTab', i)
+            this.$store.commit('deleteTab', tabs[i])
           }
+          i--
         }
 
         // Clear checkboxes
@@ -381,12 +400,8 @@ export default {
       this.selectedInquiriesCount = this.selectedInquiriesIds.size
       storedInquiries.updateStorage(this.inquiries)
     },
-    findTabIndex (id) {
-      return this.$store.state.tabs.findIndex(tab => tab.id === id)
-    },
     exportToFile (inquiryList, fileName) {
-      const jsonStr = storedInquiries.serialiseInquiries(inquiryList)
-      fu.exportToFile(jsonStr, fileName)
+      storedInquiries.export(inquiryList, fileName)
     },
     exportSelectedInquiries () {
       const inquiryList = this.allInquiries.filter(
@@ -443,6 +458,21 @@ export default {
 </script>
 
 <style scoped>
+#my-inquiries-container {
+  position: relative;
+}
+
+#loading-predefined-status {
+  position: absolute;
+  right: 0;
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-text-light-2);
+  align-items: center;
+  padding: 8px;
+}
+
 #start-guide {
   position: absolute;
   top: 50%;

src/views/Main/MainMenu.vue

@@ -1,9 +1,12 @@
 <template>
   <nav>
-    <div>
+    <div id="nav-links">
+      <a href="https://sqliteviz.com">
+        <img :src="require('@/assets/images/logo_simple.svg')">
+      </a>
       <router-link to="/workspace">Workspace</router-link>
       <router-link to="/inquiries">Inquiries</router-link>
-      <a href="https://github.com/lana-k/sqliteviz/wiki" target="_blank">Help</a>
+      <a href="https://sqliteviz.com/docs" target="_blank">Help</a>
     </div>
     <div id="nav-buttons">
       <button
@@ -57,6 +60,7 @@ import TextField from '@/components/TextField'
 import CloseIcon from '@/components/svg/close'
 import storedInquiries from '@/lib/storedInquiries'
 import AppDiagnosticInfo from './AppDiagnosticInfo'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'MainMenu',
@@ -76,19 +80,10 @@ export default {
       return this.$store.state.currentTab
     },
     isSaved () {
-      if (!this.currentInquiry) {
-        return false
-      }
-      const tabIndex = this.currentInquiry.tabIndex
-      const tab = this.$store.state.tabs[tabIndex]
-      return tab && tab.isSaved
+      return this.currentInquiry && this.currentInquiry.isSaved
     },
     isPredefined () {
-      if (this.currentInquiry) {
-        return this.currentInquiry.isPredefined
-      } else {
-        return false
-      }
+      return this.currentInquiry && this.currentInquiry.isPredefined
     },
     runDisabled () {
       return this.currentInquiry && (!this.$store.state.db || !this.currentInquiry.query)
@@ -110,6 +105,8 @@ export default {
           this.$router.push('/workspace')
         }
       })
+
+      events.send('inquiry.create', null, { auto: false })
     },
     cancelSave () {
       this.$modal.hide('save')
@@ -139,13 +136,15 @@ export default {
 
       // Update tab in store
       this.$store.commit('updateTab', {
-        index: this.currentInquiry.tabIndex,
+        tab: this.currentInquiry,
+        newValues: {
           name: value.name,
           id: value.id,
           query: value.query,
           viewType: value.viewType,
           viewOptions: value.viewOptions,
           isSaved: true
+        }
       })
 
       // Restore data:
@@ -163,6 +162,7 @@ export default {
 
       // Signal about saving
       this.$root.$emit('inquirySaved')
+      events.send('inquiry.save')
     },
     _keyListener (e) {
       if (this.$route.path === '/workspace') {
@@ -237,4 +237,12 @@ button {
 #nav-buttons {
   display: flex;
 }
+
+#nav-links {
+  display: flex;
+  align-items: center;
+}
+#nav-links img {
+  width: 32px;
+}
 </style>

src/views/Main/Workspace/Schema/index.vue

@@ -33,6 +33,7 @@
 
 <script>
 import fIo from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
 import TableDescription from './TableDescription'
 import TextField from '@/components/TextField'
 import TreeChevron from '@/components/svg/treeChevron'
@@ -86,6 +87,11 @@ export default {
       csvImport.reset()
       await csvImport.previewCsv()
       csvImport.open()
+
+      events.send('database.import', this.file.size, {
+        from: 'csv',
+        new_db: false
+      })
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -31,10 +31,15 @@ import PlotlyEditor from 'react-chart-editor'
 import chartHelper from '@/lib/chartHelper'
 import dereference from 'react-chart-editor/lib/lib/dereference'
 import fIo from '@/lib/utils/fileIo'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Chart',
-  props: ['dataSources', 'initOptions', 'importToPngEnabled', 'importToSvgEnabled'],
+  props: [
+    'dataSources', 'initOptions',
+    'importToPngEnabled', 'importToSvgEnabled',
+    'forPivot'
+  ],
   components: {
     PlotlyEditor
   },
@@ -60,6 +65,19 @@ export default {
     plotly.setPlotConfig({
       notifyOnLogging: 1
     })
+    this.$watch(
+      () => this.state && this.state.data && this.state.data
+        .map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
+        .join(','),
+      (value) => {
+        events.send('viz_plotly.render', null, {
+          type: value,
+          pivot: !!this.forPivot
+        })
+      },
+      { deep: true }
+    )
+    this.$emit('update:importToSvgEnabled', true)
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -23,6 +23,7 @@ import pivotHelper from './pivotHelper'
 import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import Vue from 'vue'
+import events from '@/lib/utils/events'
 const ChartClass = Vue.extend(Chart)
 
 export default {
@@ -87,8 +88,17 @@ export default {
     'pivotOptions.rendererName': {
       immediate: true,
       handler () {
-        this.$emit('update:importToPngEnabled', this.pivotOptions.rendererName !== 'TSV Export')
-        this.$emit('update:importToSvgEnabled', this.viewStandartChart || this.viewCustomChart)
+        this.$emit(
+          'update:importToPngEnabled',
+          this.pivotOptions.rendererName !== 'TSV Export'
+        )
+        this.$emit(
+          'update:importToSvgEnabled',
+          this.viewStandartChart || this.viewCustomChart
+        )
+        events.send('viz_pivot.render', null, {
+          type: this.pivotOptions.rendererName
+        })
       }
     },
     pivotOptions () {
@@ -179,11 +189,11 @@ export default {
     async prepareCopy () {
       if (this.viewCustomChart) {
         return await this.pivotOptions.rendererOptions.customChartComponent.prepareCopy()
-      } else if (this.viewStandartChart) {
-        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
-      } else {
-        return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
       }
+      if (this.viewStandartChart) {
+        return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
+      }
+      return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
     },
 
     async saveAsSvg () {
@@ -198,14 +208,18 @@ export default {
     saveAsHtml () {
       if (this.viewCustomChart) {
         this.pivotOptions.rendererOptions.customChartComponent.saveAsHtml()
-      } else if (this.viewStandartChart) {
+        return
+      }
+
+      if (this.viewStandartChart) {
         const chartState = chartHelper.getChartData(this.$refs.pivotOutput)
         fIo.exportToFile(
           chartHelper.getHtml(chartState),
           'chart.html',
           'text/html'
         )
-      } else {
+        return
+      }
       fIo.exportToFile(
         pivotHelper.getPivotHtml(this.$refs.pivotOutput),
         'pivot.html',
@@ -213,7 +227,6 @@ export default {
       )
     }
   }
-  }
 }
 </script>
 

src/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.js

@@ -51,6 +51,8 @@ export function _getDataSources (pivotData) {
 
 function customChartRenderer (data, options) {
   options.customChartComponent.dataSources = _getDataSources(data)
+  options.customChartComponent.forPivot = true
+
   options.customChartComponent.$mount()
 
   return $(options.customChartComponent.$el)

src/views/Main/Workspace/Tabs/Tab/DataView/index.vue

@@ -41,7 +41,6 @@
       >
         <png-icon />
       </icon-button>
-
       <icon-button
         :disabled="!importToSvgEnabled"
         tooltip="Save as SVG"
@@ -95,6 +94,7 @@ import ClipboardIcon from '@/components/svg/clipboard'
 import cIo from '@/lib/utils/clipboardIo'
 import loadingDialog from '@/components/LoadingDialog'
 import time from '@/lib/utils/time'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'DataView',
@@ -123,6 +123,11 @@ export default {
       dataToCopy: null
     }
   },
+  computed: {
+    plotlyInPivot () {
+      return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
+    }
+  },
   watch: {
     mode () {
       this.$emit('update')
@@ -148,6 +153,7 @@ export default {
       */
       await time.sleep(0)
       this.$refs.viewComponent.saveAsPng()
+      this.exportSignal('png')
     },
     getOptionsForSave () {
       return this.$refs.viewComponent.getOptionsForSave()
@@ -178,6 +184,7 @@ export default {
     async copyToClipboard () {
       cIo.copyImage(this.dataToCopy)
       this.$modal.hide('prepareCopy')
+      this.exportSignal('clipboard')
     },
     cancelCopy () {
       this.dataToCopy = null
@@ -186,9 +193,26 @@ export default {
 
     saveAsSvg () {
       this.$refs.viewComponent.saveAsSvg()
+      this.exportSignal('svg')
     },
     saveAsHtml () {
       this.$refs.viewComponent.saveAsHtml()
+      this.exportSignal('html')
+    },
+    exportSignal (to) {
+      const eventLabels = { type: to }
+
+      if (this.mode === 'chart' || this.plotlyInPivot) {
+        eventLabels.pivot = this.plotlyInPivot
+      }
+
+      events.send(
+        this.mode === 'chart' || this.plotlyInPivot
+          ? 'viz_plotly.export'
+          : 'viz_pivot.export',
+        null,
+        eventLabels
+      )
     }
   }
 }

src/views/Main/Workspace/Tabs/Tab/RunResult.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="run-result-panel" ref="runResultPanel">
-    <div class="run-result-panel-content">
-      <div
-        v-show="result === null && !isGettingResults && !error"
-        class="table-preview result-before"
-      >
-        Run your query and get results here
-      </div>
-      <div v-if="isGettingResults" class="table-preview result-in-progress">
-        <loading-indicator :size="30"/>
-        Fetching results...
-      </div>
-      <div
-        v-show="result === undefined && !isGettingResults && !error"
-        class="table-preview result-empty"
-      >
-        No rows retrieved according to your query
-      </div>
-      <logs v-if="error" :messages="[error]"/>
-      <sql-table
-        v-if="result"
-        :data-set="result"
-        :time="time"
-        :pageSize="pageSize"
-        class="straight"
-      />
-    </div>
-    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
-      <icon-button
-        :disabled="!result"
-        tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
-        @click="exportToCsv"
-      >
-        <export-to-csv-icon/>
-      </icon-button>
-
-      <icon-button
-        :disabled="!result"
-        tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
-        @click="prepareCopy"
-      >
-        <clipboard-icon/>
-      </icon-button>
-    </side-tool-bar>
-
-    <loading-dialog
-      loadingMsg="Building CSV..."
-      successMsg="CSV is ready"
-      actionBtnName="Copy"
-      name="prepareCSVCopy"
-      title="Copy to clipboard"
-      :loading="preparingCopy"
-      @action="copyToClipboard"
-      @cancel="cancelCopy"
-    />
-  </div>
-</template>
-
-<script>
-import Logs from '@/components/Logs'
-import SqlTable from '@/components/SqlTable'
-import LoadingIndicator from '@/components/LoadingIndicator'
-import SideToolBar from './SideToolBar'
-import ExportToCsvIcon from '@/components/svg/exportToCsv'
-import ClipboardIcon from '@/components/svg/clipboard'
-import IconButton from '@/components/IconButton'
-import csv from '@/lib/csv'
-import fIo from '@/lib/utils/fileIo'
-import cIo from '@/lib/utils/clipboardIo'
-import time from '@/lib/utils/time'
-import loadingDialog from '@/components/LoadingDialog'
-
-export default {
-  name: 'RunResult',
-  props: ['result', 'isGettingResults', 'error', 'time'],
-  data () {
-    return {
-      resizeObserver: null,
-      pageSize: 20,
-      preparingCopy: false,
-      dataToCopy: null
-    }
-  },
-  components: {
-    SqlTable,
-    LoadingIndicator,
-    Logs,
-    SideToolBar,
-    ExportToCsvIcon,
-    IconButton,
-    ClipboardIcon,
-    loadingDialog
-  },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.handleResize)
-    this.resizeObserver.observe(this.$refs.runResultPanel)
-    this.calculatePageSize()
-  },
-  beforeDestroy () {
-    this.resizeObserver.unobserve(this.$refs.runResultPanel)
-  },
-  methods: {
-    handleResize () {
-      this.calculatePageSize()
-    },
-
-    calculatePageSize () {
-      const runResultPanel = this.$refs.runResultPanel
-      // 27 - table footer hight
-      // 5 - padding-bottom of rounded table container
-      // 35 - height of table header
-      const freeSpace = runResultPanel.offsetHeight - 27 - 5 - 35
-      this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
-    },
-
-    exportToCsv () {
-      fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
-    },
-
-    async prepareCopy () {
-      if ('ClipboardItem' in window) {
-        this.preparingCopy = true
-        this.$modal.show('prepareCSVCopy')
-        const t0 = performance.now()
-
-        await time.sleep(0)
-        this.dataToCopy = csv.serialize(this.result)
-        const t1 = performance.now()
-        if ((t1 - t0) < 950) {
-          this.$modal.hide('prepareCSVCopy')
-          this.copyToClipboard()
-        } else {
-          this.preparingCopy = false
-        }
-      } else {
-        alert(
-          "Your browser doesn't support copying into the clipboard. " +
-          'If you use Firefox you can enable it ' +
-          'by setting dom.events.asyncClipboard.clipboardItem to true.'
-        )
-      }
-    },
-
-    copyToClipboard () {
-      cIo.copyCsv(this.dataToCopy)
-      this.$modal.hide('prepareCSVCopy')
-    },
-
-    cancelCopy () {
-      this.dataToCopy = null
-      this.$modal.hide('prepareCSVCopy')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.run-result-panel {
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-}
-
-.run-result-panel-content {
-  position: relative;
-  flex-grow: 1;
-  height: 100%;
-  width: 0;
-  box-sizing: border-box;
-}
-
-.table-preview {
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--color-text-base);
-  font-size: 13px;
-}
-
-.result-in-progress {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  will-change: opacity;
-  /*
-    We need to show loader in 1 sec after starting query execution. We can't do that with
-    setTimeout because the main thread can be busy by getting a result set from the web worker.
-    But we can use CSS animation for opacity. Opacity triggers changes only in the Composite Layer
-    stage in rendering waterfall. Hence it can be processed only with Compositor Thread while
-    the Main Thread processes a result set.
-    https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
-  */
-  animation: show-loader 1s linear 0s 1;
-}
-
-@keyframes show-loader {
-  0% {
-    opacity: 0;
-  }
-  99% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
->>>.vm--container {
-  animation: show-modal 1s linear 0s 1;
-}
-
-@keyframes show-modal {
-  0% {
-    opacity: 0;
-  }
-  99% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>

src/views/Main/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="record-navigator">
+        <icon-button
+            :disabled="value === 0"
+            tooltip="First row"
+            tooltip-position="top-left"
+            class="first"
+            @click="$emit('input', 0)"
+        >
+            <edge-arrow-icon :disabled="false" />
+        </icon-button>
+        <icon-button
+            :disabled="value === 0"
+            tooltip="Previous row"
+            tooltip-position="top-left"
+            class="prev"
+            @click="$emit('input', value - 1)"
+        >
+            <arrow-icon :disabled="false" />
+        </icon-button>
+        <icon-button
+            :disabled="value === total - 1"
+            tooltip="Next row"
+            tooltip-position="top-left"
+            class="next"
+            @click="$emit('input', value + 1)"
+        >
+            <arrow-icon :disabled="false" />
+        </icon-button>
+        <icon-button
+            :disabled="value === total - 1"
+            tooltip="Last row"
+            tooltip-position="top-left"
+            class="last"
+            @click="$emit('input', total - 1)"
+        >
+            <edge-arrow-icon :disabled="false" />
+        </icon-button>
+    </div>
+</template>
+
+<script>
+import IconButton from '@/components/IconButton'
+import ArrowIcon from '@/components/svg/arrow'
+import EdgeArrowIcon from '@/components/svg/edgeArrow'
+
+export default {
+  components: {
+    IconButton,
+    ArrowIcon,
+    EdgeArrowIcon
+  },
+  props: {
+    value: Number,
+    total: Number
+  }
+}
+</script>
+
+<style scoped>
+.record-navigator {
+    display: flex;
+}
+
+.record-navigator .next,
+.record-navigator .last {
+  transform: rotate(180deg);
+}
+</style>

src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="record-view">
+    <div class="table-container">
+      <table
+        ref="table"
+        class="sqliteviz-table"
+        tabindex="0"
+        @keydown="onTableKeydown"
+      >
+        <thead>
+          <tr>
+            <th/>
+            <th>
+              <div class="cell-data">
+                Row #{{ currentRowIndex + 1 }}
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(col, index) in columns" :key="index">
+            <th class="column-cell">{{ col }}</th>
+            <td
+              :data-col="index"
+              :data-row="currentRowIndex"
+              :data-isNull="isNull(getCellValue(col))"
+              :data-isBlob="isBlob(getCellValue(col))"
+              :key="index"
+              :aria-selected="false"
+              @click="onCellClick"
+            >
+              <div class="cell-data">
+                {{ getCellText(col) }}
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="table-footer">
+      <div class="table-footer-count">
+        {{ rowCount }} {{rowCount === 1 ? 'row' : 'rows'}} retrieved
+        <span v-if="time">in {{ time }}</span>
+      </div>
+
+     <row-navigator v-model="currentRowIndex" :total="rowCount"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import RowNavigator from './RowNavigator.vue'
+
+export default {
+  components: { RowNavigator },
+  props: {
+    dataSet: Object,
+    time: String,
+    rowIndex: { type: Number, default: 0 },
+    selectedColumnIndex: Number
+  },
+  data () {
+    return {
+      selectedCellElement: null,
+      currentRowIndex: this.rowIndex
+    }
+  },
+  computed: {
+    columns () {
+      return this.dataSet.columns
+    },
+    rowCount () {
+      return this.dataSet.values[this.columns[0]].length
+    }
+  },
+  mounted () {
+    const col = this.selectedColumnIndex
+    const row = this.currentRowIndex
+    const cell = this.$refs.table
+      .querySelector(`td[data-col="${col}"][data-row="${row}"]`)
+    if (cell) {
+      this.selectCell(cell)
+    }
+  },
+  watch: {
+    async currentRowIndex () {
+      await this.$nextTick()
+      if (this.selectedCellElement) {
+        const previouslySelected = this.selectedCellElement
+        this.selectCell(null)
+        this.selectCell(previouslySelected)
+      }
+    }
+  },
+  methods: {
+    isBlob (value) {
+      return value && ArrayBuffer.isView(value)
+    },
+    isNull (value) {
+      return value === null
+    },
+    getCellValue (col) {
+      return this.dataSet.values[col][this.currentRowIndex]
+    },
+    getCellText (col) {
+      const value = this.getCellValue(col)
+      if (this.isNull(value)) {
+        return 'NULL'
+      }
+      if (this.isBlob(value)) {
+        return 'BLOB'
+      }
+      return value
+    },
+    onTableKeydown (e) {
+      const keyCodeMap = {
+        38: 'up',
+        40: 'down'
+      }
+
+      if (
+        !this.selectedCellElement ||
+        !Object.keys(keyCodeMap).includes(e.keyCode.toString())
+      ) {
+        return
+      }
+      e.preventDefault()
+
+      this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
+    },
+    onCellClick (e) {
+      this.selectCell(e.target.closest('td'), false)
+    },
+    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.selectedCellElement.closest('.table-container').scrollTo({ left: 0 })
+      }
+
+      this.$emit('updateSelectedCell', this.selectedCellElement)
+    },
+    moveFocusInTable (initialCell, direction) {
+      const currentColIndex = +initialCell.dataset.col
+      const newColIndex = direction === 'up'
+        ? currentColIndex - 1
+        : currentColIndex + 1
+
+      const newCell = this.$refs.table
+        .querySelector(`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`)
+      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);
+}
+
+table.sqliteviz-table {
+  margin-top: 0;
+}
+.sqliteviz-table thead tr th {
+  border-bottom: 1px solid var(--color-border-light);
+}
+.sqliteviz-table tbody tr th {
+  font-size: 14px;
+  font-weight: 600;
+  box-sizing: border-box;
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-light);
+  border-bottom: 1px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+}
+
+.table-footer {
+  align-items: center;
+}
+.record-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.table-container {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.column-cell {
+  max-width: 150px;
+}
+</style>

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

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

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="run-result-panel" ref="runResultPanel">
+   <component
+      :is="viewValuePanelVisible ? 'splitpanes':'div'"
+      :before="{ size: 50, max: 100 }"
+      :after="{ size: 50, max: 100 }"
+      :default="{ before: 50, after: 50 }"
+      class="run-result-panel-content"
+    >
+      <template  #left-pane>
+        <div :id="'run-result-left-pane-'+tab.id" class="result-set-container"/>
+      </template>
+      <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
+      <template #right-pane v-if="viewValuePanelVisible">
+        <div class="value-viewer-container">
+          <value-viewer
+            v-show="selectedCell"
+            :cellValue="selectedCell
+              ? result.values[result.columns[selectedCell.dataset.col]][selectedCell.dataset.row]
+              : ''"
+          />
+          <div v-show="!selectedCell" class="table-preview">
+            No cell selected to view
+          </div>
+        </div>
+      </template>
+    </component>
+
+    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
+      <icon-button
+        :disabled="!result"
+        tooltip="Export result set to CSV file"
+        tooltip-position="top-left"
+        @click="exportToCsv"
+      >
+        <export-to-csv-icon/>
+      </icon-button>
+
+      <icon-button
+        :disabled="!result"
+        tooltip="Copy result set to clipboard"
+        tooltip-position="top-left"
+        @click="prepareCopy"
+      >
+        <clipboard-icon/>
+      </icon-button>
+
+      <icon-button
+        :disabled="!result"
+        tooltip="View record"
+        tooltip-position="top-left"
+        :active="viewRecord"
+        @click="toggleViewRecord"
+      >
+        <row-icon/>
+      </icon-button>
+
+      <icon-button
+        :disabled="!result"
+        tooltip="View value"
+        tooltip-position="top-left"
+        :active="viewValuePanelVisible"
+        @click="toggleViewValuePanel"
+      >
+        <view-cell-value-icon/>
+      </icon-button>
+    </side-tool-bar>
+
+    <loading-dialog
+      loadingMsg="Building CSV..."
+      successMsg="CSV is ready"
+      actionBtnName="Copy"
+      name="prepareCSVCopy"
+      title="Copy to clipboard"
+      :loading="preparingCopy"
+      @action="copyToClipboard"
+      @cancel="cancelCopy"
+    />
+
+    <teleport :to="resultSetTeleportTarget">
+      <div>
+            <div
+              v-show="result === null && !isGettingResults && !error"
+              class="table-preview result-before"
+            >
+              Run your query and get results here
+            </div>
+            <div v-if="isGettingResults" class="table-preview result-in-progress">
+              <loading-indicator :size="30"/>
+              Fetching results...
+            </div>
+            <div
+              v-show="result === undefined && !isGettingResults && !error"
+              class="table-preview result-empty"
+            >
+              No rows retrieved according to your query
+            </div>
+            <logs v-if="error" :messages="[error]"/>
+            <sql-table
+              v-if="result && !viewRecord"
+              :data-set="result"
+              :time="time"
+              :pageSize="pageSize"
+              :page="defaultPage"
+              :selected-cell-coordinates="defaultSelectedCell"
+              class="straight"
+              @updateSelectedCell="onUpdateSelectedCell"
+            />
+
+            <record
+              ref="recordView"
+              v-if="result && viewRecord"
+              :data-set="result"
+              :time="time"
+              :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
+              :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
+              @updateSelectedCell="onUpdateSelectedCell"
+            />
+          </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import Logs from '@/components/Logs'
+import SqlTable from '@/components/SqlTable'
+import LoadingIndicator from '@/components/LoadingIndicator'
+import SideToolBar from '../SideToolBar'
+import Splitpanes from '@/components/Splitpanes'
+import ExportToCsvIcon from '@/components/svg/exportToCsv'
+import ClipboardIcon from '@/components/svg/clipboard'
+import ViewCellValueIcon from '@/components/svg/viewCellValue'
+import RowIcon from '@/components/svg/row'
+import IconButton from '@/components/IconButton'
+import csv from '@/lib/csv'
+import fIo from '@/lib/utils/fileIo'
+import cIo from '@/lib/utils/clipboardIo'
+import time from '@/lib/utils/time'
+import loadingDialog from '@/components/LoadingDialog'
+import events from '@/lib/utils/events'
+import Teleport from 'vue2-teleport'
+import ValueViewer from './ValueViewer'
+import Record from './Record/index.vue'
+
+export default {
+  name: 'RunResult',
+  props: {
+    tab: Object,
+    result: Object,
+    isGettingResults: Boolean,
+    error: Object,
+    time: [String, Number]
+  },
+  data () {
+    return {
+      resizeObserver: null,
+      pageSize: 20,
+      preparingCopy: false,
+      dataToCopy: null,
+      viewValuePanelVisible: false,
+      selectedCell: null,
+      viewRecord: false,
+      defaultPage: 1,
+      defaultSelectedCell: null
+    }
+  },
+  components: {
+    SqlTable,
+    LoadingIndicator,
+    Logs,
+    SideToolBar,
+    ExportToCsvIcon,
+    IconButton,
+    ClipboardIcon,
+    ViewCellValueIcon,
+    RowIcon,
+    loadingDialog,
+    ValueViewer,
+    Record,
+    Splitpanes,
+    Teleport
+  },
+  computed: {
+    resultSetTeleportTarget () {
+      const base = `#${this.viewValuePanelVisible
+        ? 'run-result-left-pane'
+        : 'run-result-result-set'
+      }`
+      const tabIdPostfix = `-${this.tab.id}`
+      return base + tabIdPostfix
+    }
+  },
+  mounted () {
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.runResultPanel)
+    this.calculatePageSize()
+  },
+  beforeDestroy () {
+    this.resizeObserver.unobserve(this.$refs.runResultPanel)
+  },
+  watch: {
+    result () {
+      this.defaultSelectedCell = null
+      this.selectedCell = null
+    }
+  },
+  methods: {
+    handleResize () {
+      this.calculatePageSize()
+    },
+
+    calculatePageSize () {
+      const runResultPanel = this.$refs.runResultPanel
+      // 27 - table footer hight
+      // 5 - padding-bottom of rounded table container
+      // 35 - height of table header
+      const freeSpace = runResultPanel.offsetHeight - 27 - 5 - 35
+      this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
+    },
+
+    exportToCsv () {
+      if (this.result && this.result.values) {
+        events.send('resultset.export',
+          this.result.values[this.result.columns[0]].length,
+          { to: 'csv' }
+        )
+      }
+
+      fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
+    },
+
+    async prepareCopy () {
+      if (this.result && this.result.values) {
+        events.send('resultset.export',
+          this.result.values[this.result.columns[0]].length,
+          { to: 'clipboard' }
+        )
+      }
+
+      if ('ClipboardItem' in window) {
+        this.preparingCopy = true
+        this.$modal.show('prepareCSVCopy')
+        const t0 = performance.now()
+
+        await time.sleep(0)
+        this.dataToCopy = csv.serialize(this.result)
+        const t1 = performance.now()
+        if ((t1 - t0) < 950) {
+          this.$modal.hide('prepareCSVCopy')
+          this.copyToClipboard()
+        } else {
+          this.preparingCopy = false
+        }
+      } else {
+        alert(
+          "Your browser doesn't support copying into the clipboard. " +
+          'If you use Firefox you can enable it ' +
+          'by setting dom.events.asyncClipboard.clipboardItem to true.'
+        )
+      }
+    },
+
+    copyToClipboard () {
+      cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
+      this.$modal.hide('prepareCSVCopy')
+    },
+
+    cancelCopy () {
+      this.dataToCopy = null
+      this.$modal.hide('prepareCSVCopy')
+    },
+
+    toggleViewValuePanel () {
+      this.viewValuePanelVisible = !this.viewValuePanelVisible
+    },
+
+    toggleViewRecord () {
+      if (this.viewRecord) {
+        this.defaultSelectedCell = {
+          row: this.$refs.recordView.currentRowIndex,
+          col: this.selectedCell ? +this.selectedCell.dataset.col : 0
+        }
+        this.defaultPage = Math.ceil(
+          (this.$refs.recordView.currentRowIndex + 1) / this.pageSize
+        )
+      }
+
+      this.viewRecord = !this.viewRecord
+    },
+
+    onUpdateSelectedCell (e) {
+      this.selectedCell = e
+    }
+  }
+}
+</script>
+
+<style scoped>
+.run-result-panel {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.run-result-panel-content {
+  flex-grow: 1;
+  height: 100%;
+  width: 0;
+}
+
+.result-set-container,
+.result-set-container > div {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+.value-viewer-container {
+  height: 100%;
+  width: 100%;
+  background-color: var(--color-white);
+  position: relative;
+}
+
+.table-preview {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-base);
+  font-size: 13px;
+  text-align: center;
+}
+
+.result-in-progress {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  will-change: opacity;
+  /*
+    We need to show loader in 1 sec after starting query execution. We can't do that with
+    setTimeout because the main thread can be busy by getting a result set from the web worker.
+    But we can use CSS animation for opacity. Opacity triggers changes only in the Composite Layer
+    stage in rendering waterfall. Hence it can be processed only with Compositor Thread while
+    the Main Thread processes a result set.
+    https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
+  */
+  animation: show-loader 1s linear 0s 1;
+}
+
+@keyframes show-loader {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+>>>.vm--container {
+  animation: show-modal 1s linear 0s 1;
+}
+
+@keyframes show-modal {
+  0% {
+    opacity: 0;
+  }
+  99% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

src/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.js

@@ -3,14 +3,20 @@ import 'codemirror/addon/hint/show-hint.js'
 import 'codemirror/addon/hint/sql-hint.js'
 import store from '@/store'
 
+function _getHintText (hint) {
+  return typeof hint === 'string' ? hint : hint.text
+}
 export function getHints (cm, options) {
-  const token = cm.getTokenAt(cm.getCursor()).string.toUpperCase()
   const result = CM.hint.sql(cm, options)
+
   // Don't show the hint if there is only one option
-  // and the token is already completed with this option
-  if (result.list.length === 1 && result.list[0].text.toUpperCase() === token) {
+  // and the replacingText is already equals to this option
+  const replacedText = cm.getRange(result.from, result.to).toUpperCase()
+  if (result.list.length === 1 &&
+    _getHintText(result.list[0]).toUpperCase() === replacedText) {
     result.list = []
   }
+
   return result
 }
 

src/views/Main/Workspace/Tabs/Tab/index.vue

@@ -3,44 +3,46 @@
     <splitpanes
       class="query-results-splitter"
       horizontal
-      :before="{ size: 50, max: 100 }"
-      :after="{ size: 50, max: 100 }"
+      :before="{ size: topPaneSize, max: 100 }"
+      :after="{ size: 100 - topPaneSize, max: 100 }"
+      :default="{ before: 50, after: 50 }"
     >
       <template #left-pane>
-        <div :id="'above-' + tabIndex" class="above" />
+        <div :id="'above-' + tab.id" class="above" />
       </template>
       <template #right-pane>
-        <div :id="'bottom-'+ tabIndex" ref="bottomPane" class="bottomPane" />
+        <div :id="'bottom-'+ tab.id" ref="bottomPane" class="bottomPane" />
       </template>
     </splitpanes>
 
-    <div :id="'hidden-'+ tabIndex" class="hidden-part" />
+    <div :id="'hidden-'+ tab.id" class="hidden-part" />
 
-    <teleport :to="`#${layout.sqlEditor}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.sqlEditor}-${tab.id}`">
       <sql-editor
         ref="sqlEditor"
-        v-model="query"
-        :is-getting-results="isGettingResults"
+        v-model="tab.query"
+        :is-getting-results="tab.isGettingResults"
         @switchTo="onSwitchView('sqlEditor', $event)"
-        @run="execute"
+        @run="tab.execute()"
       />
     </teleport>
 
-    <teleport :to="`#${layout.table}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.table}-${tab.id}`">
       <run-result
-        :result="result"
-        :is-getting-results="isGettingResults"
-        :error="error"
-        :time="time"
+        :tab="tab"
+        :result="tab.result"
+        :is-getting-results="tab.isGettingResults"
+        :error="tab.error"
+        :time="tab.time"
         @switchTo="onSwitchView('table', $event)"
       />
     </teleport>
 
-    <teleport :to="`#${layout.dataView}-${tabIndex}`">
+    <teleport :to="`#${tab.layout.dataView}-${tab.id}`">
       <data-view
-        :data-source="(result && result.values) || null"
-        :init-options="initViewOptions"
-        :init-mode="initViewType"
+        :data-source="(tab.result && tab.result.values) || null"
+        :init-options="tab.viewOptions"
+        :init-mode="tab.viewType"
         ref="dataView"
         @switchTo="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
@@ -54,14 +56,15 @@ import Splitpanes from '@/components/Splitpanes'
 import SqlEditor from './SqlEditor'
 import DataView from './DataView'
 import RunResult from './RunResult'
-import time from '@/lib/utils/time'
+
 import Teleport from 'vue2-teleport'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
-  props: [
-    'id', 'initName', 'initQuery', 'initViewOptions', 'tabIndex', 'isPredefined', 'initViewType'
-  ],
+  props: {
+    tab: Object
+  },
   components: {
     SqlEditor,
     DataView,
@@ -71,21 +74,14 @@ export default {
   },
   data () {
     return {
-      query: this.initQuery,
-      result: null,
-      isGettingResults: false,
-      error: null,
-      time: 0,
-      layout: {
-        sqlEditor: 'above',
-        table: 'bottom',
-        dataView: 'hidden'
-      }
+      topPaneSize: this.tab.maximize
+        ? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
+        : 50
     }
   },
   computed: {
     isActive () {
-      return this.id === this.$store.state.currentTabId
+      return this.tab.id === this.$store.state.currentTabId
     }
   },
   watch: {
@@ -93,42 +89,34 @@ export default {
       immediate: true,
       async handler () {
         if (this.isActive) {
-          this.$store.commit('setCurrentTab', this)
           await this.$nextTick()
           this.$refs.sqlEditor.focus()
         }
       }
     },
-    query () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
+    'tab.query' () {
+      this.$store.commit('updateTab', {
+        tab: this.tab,
+        newValues: { isSaved: false }
+      })
     }
   },
+  mounted () {
+    this.tab.dataView = this.$refs.dataView
+  },
   methods: {
     onSwitchView (from, to) {
-      const fromPosition = this.layout[from]
-      this.layout[from] = this.layout[to]
-      this.layout[to] = fromPosition
+      const fromPosition = this.tab.layout[from]
+      this.tab.layout[from] = this.tab.layout[to]
+      this.tab.layout[to] = fromPosition
+
+      events.send('inquiry.panel', null, { panel: to })
     },
     onDataViewUpdate () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
-    },
-    async execute () {
-      this.isGettingResults = true
-      this.result = null
-      this.error = null
-      const state = this.$store.state
-      try {
-        const start = new Date()
-        this.result = await state.db.execute(this.query + ';')
-        this.time = time.getPeriod(start, new Date())
-      } catch (err) {
-        this.error = {
-          type: 'error',
-          message: err
-        }
-      }
-      state.db.refreshSchema()
-      this.isGettingResults = false
+      this.$store.commit('updateTab', {
+        tab: this.tab,
+        newValues: { isSaved: false }
+      })
     }
   }
 }

src/views/Main/Workspace/Tabs/index.vue

@@ -5,7 +5,7 @@
         v-for="(tab, index) in tabs"
         :key="index"
         @click="selectTab(tab.id)"
-        :class="[{'tab-selected': (tab.id === selectedIndex)}, 'tab']"
+        :class="[{'tab-selected': (tab.id === selectedTabId)}, 'tab']"
       >
         <div class="tab-name">
           <span v-show="!tab.isSaved" class="star">*</span>
@@ -13,20 +13,14 @@
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
         <div>
-          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(index)"/>
+          <close-icon class="close-icon" :size="10" @click="beforeCloseTab(tab)"/>
         </div>
       </div>
     </div>
     <tab
-      v-for="(tab, index) in tabs"
+      v-for="tab in tabs"
       :key="tab.id"
-      :id="tab.id"
-      :init-name="tab.name"
-      :init-query="tab.query"
-      :init-view-options="tab.viewOptions"
-      :init-view-type="tab.viewType"
-      :is-predefined="tab.isPredefined"
-      :tab-index="index"
+      :tab="tab"
     />
     <div v-show="tabs.length === 0" id="start-guide">
       <span class="link" @click="$root.$emit('createNewInquiry')">Create</span>
@@ -38,25 +32,25 @@
     <modal name="close-warn" classes="dialog" height="auto">
       <div class="dialog-header">
         Close tab {{
-          closingTabIndex !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          closingTab !== null
+          ? (closingTab.name || `[${closingTab.tempName}]`)
           : ''
         }}
         <close-icon @click="$modal.hide('close-warn')"/>
       </div>
       <div class="dialog-body">
         You have unsaved changes. Save changes in {{
-          closingTabIndex !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          closingTab !== null
+          ? (closingTab.name || `[${closingTab.tempName}]`)
           : ''
         }} before closing?
       </div>
       <div class="dialog-buttons-container">
-        <button class="secondary" @click="closeTab(closingTabIndex)">
+        <button class="secondary" @click="closeTab(closingTab)">
           Close without saving
         </button>
         <button class="secondary" @click="$modal.hide('close-warn')">Cancel</button>
-        <button class="primary" @click="saveAndClose(closingTabIndex)">Save and close</button>
+        <button class="primary" @click="saveAndClose(closingTab)">Save and close</button>
       </div>
     </modal>
   </div>
@@ -73,14 +67,14 @@ export default {
   },
   data () {
     return {
-      closingTabIndex: null
+      closingTab: null
     }
   },
   computed: {
     tabs () {
       return this.$store.state.tabs
     },
-    selectedIndex () {
+    selectedTabId () {
       return this.$store.state.currentTabId
     }
   },
@@ -97,25 +91,24 @@ export default {
     selectTab (id) {
       this.$store.commit('setCurrentTabId', id)
     },
-    beforeCloseTab (index) {
-      this.closingTabIndex = index
-      if (!this.tabs[index].isSaved) {
+    beforeCloseTab (tab) {
+      this.closingTab = tab
+      if (!tab.isSaved) {
         this.$modal.show('close-warn')
       } else {
-        this.closeTab(index)
+        this.closeTab(tab)
       }
     },
-    closeTab (index) {
+    closeTab (tab) {
       this.$modal.hide('close-warn')
-      this.closingTabIndex = null
-      this.$store.commit('deleteTab', index)
+      this.$store.commit('deleteTab', tab)
     },
-    saveAndClose (index) {
+    saveAndClose (tab) {
       this.$root.$on('inquirySaved', () => {
-        this.closeTab(index)
+        this.closeTab(tab)
         this.$root.$off('inquirySaved')
       })
-      this.selectTab(this.tabs[index].id)
+      this.selectTab(tab.id)
       this.$modal.hide('close-warn')
       this.$nextTick(() => {
         this.$root.$emit('saveInquiry')

src/views/Main/Workspace/index.vue

@@ -2,8 +2,9 @@
   <div>
     <splitpanes
       class="schema-tabs-splitter"
-      :before="{ size: 20, max: 30 }"
-      :after="{ size: 80, max: 100 }"
+      :before="{ size: schemaWidth, max: 30 }"
+      :after="{ size: 100 - schemaWidth, max: 100 }"
+      :default="{ before: 20, after: 80 }"
     >
       <template #left-pane>
         <schema/>
@@ -19,6 +20,7 @@
 import Splitpanes from '@/components/Splitpanes'
 import Schema from './Schema'
 import Tabs from './Tabs'
+import events from '@/lib/utils/events'
 
 export default {
   name: 'Workspace',
@@ -27,9 +29,14 @@ export default {
     Splitpanes,
     Tabs
   },
+  data () {
+    return {
+      schemaWidth: this.$route.query.hide_schema === '1' ? 0 : 20
+    }
+  },
   async beforeCreate () {
     const schema = this.$store.state.db.schema
-    if (!schema || schema.length === 0) {
+    if ((!schema || schema.length === 0) && this.$store.state.tabs.length === 0) {
       const stmt = [
         '/*',
         ' * Your database is empty. In order to start building charts',
@@ -49,6 +56,8 @@ export default {
 
       const tabId = await this.$store.dispatch('addTab', { query: stmt })
       this.$store.commit('setCurrentTabId', tabId)
+
+      events.send('inquiry.create', null, { auto: true })
     }
   }
 }

tests/components/Logs.spec.js

@@ -55,6 +55,7 @@ describe('Logs.vue', () => {
     await wrapper.vm.$nextTick()
     messages.push({ type: 'error', message: 'msg 5' })
 
+    await wrapper.vm.$nextTick()
     await wrapper.vm.$nextTick()
     const height = wrapper.find('.logs-container').element.scrollHeight
     expect(wrapper.find('.logs-container').element.scrollTop)

tests/components/Splitpanes/Splitpanes.spec.js

@@ -40,7 +40,7 @@ describe('Splitpanes.vue', () => {
     expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.height).to.equal('40%')
   })
 
-  it('toggles correctly', async () => {
+  it('toggles correctly - no maximized initially', async () => {
     // mount the component
     const wrapper = shallowMount(Splitpanes, {
       slots: {
@@ -70,6 +70,64 @@ describe('Splitpanes.vue', () => {
     expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('40%')
   })
 
+  it('toggles correctly - with maximized initially', async () => {
+    // mount the component
+    let wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 0, max: 100 },
+        after: { size: 100, max: 100 },
+        default: { before: 20, after: 80 }
+      }
+    })
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
+
+    await wrapper.findAll('.toggle-btn').at(0).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('20%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('80%')
+
+    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+
+    wrapper = shallowMount(Splitpanes, {
+      slots: {
+        leftPane: '<div />',
+        rightPane: '<div />'
+      },
+      propsData: {
+        before: { size: 100, max: 100 },
+        after: { size: 0, max: 100 }
+      }
+    })
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
+
+    await wrapper.findAll('.toggle-btn').at(0).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('0%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('100%')
+
+    await wrapper.find('.toggle-btn').trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('50%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('50%')
+
+    await wrapper.findAll('.toggle-btn').at(1).trigger('click')
+    expect(wrapper.findAll('.splitpanes-pane').at(0).element.style.width).to.equal('100%')
+    expect(wrapper.findAll('.splitpanes-pane').at(1).element.style.width).to.equal('0%')
+  })
+
   it('drag - vertical', async () => {
     const root = document.createElement('div')
     const place = document.createElement('div')

tests/lib/csv.spec.js

@@ -116,6 +116,33 @@ describe('csv.js', () => {
     await expect(csv.parse(file)).to.be.rejectedWith(err)
   })
 
+  it('parse rejects when getResult failed', async () => {
+    let err
+    try {
+      new Date('invalid date').toISOString()
+    } catch (e) {
+      err = e // get error message, it's different depending on browser
+    }
+    sinon.stub(Papa, 'parse').callsFake((file, config) => {
+      config.complete({
+        data: [
+          [1, new Date('invalid date')],
+          [2, new Date('2023-05-05T15:30:00Z')]
+        ],
+        errors: [],
+        meta: {
+          delimiter: ',',
+          linebreak: '\n',
+          aborted: false,
+          truncated: true
+        }
+      })
+    })
+
+    const file = {}
+    await expect(csv.parse(file)).to.be.rejectedWith(err.message)
+  })
+
   it('prepareForExport', () => {
     const resultSet = {
       columns: ['id', 'name'],

tests/lib/database/database.spec.js

@@ -44,7 +44,7 @@ describe('database.js', () => {
     expect(schema[0].columns[0].type).to.equal('N/A')
 
     expect(schema[0].columns[1].name).to.equal('col2')
-    expect(schema[0].columns[1].type).to.equal('integer')
+    expect(schema[0].columns[1].type).to.equal('INTEGER')
   })
 
   it('creates schema with view', async () => {
@@ -68,12 +68,12 @@ describe('database.js', () => {
 
     expect(schema[0].columns[1]).to.eql({
       name: 'col2',
-      type: 'integer'
+      type: 'INTEGER'
     })
 
     expect(schema[1].columns).to.eql([{
       name: 'amount',
-      type: 'integer'
+      type: 'INTEGER'
     }])
   })
 

tests/lib/database/sqliteExtensions.spec.js

@@ -293,7 +293,7 @@ describe('SQLite extensions', function () {
 
   it('supports decimal', async function () {
     const actual = await db.execute(`
-      select
+      SELECT
         decimal_add(decimal('0.1'), decimal('0.2')) "add",
         decimal_sub(0.2, 0.1) sub,
         decimal_mul(power(2, 69), 2) mul,
@@ -430,4 +430,29 @@ describe('SQLite extensions', function () {
       ]
     })
   })
+
+  it('supports pearson', async function () {
+    const actual = await db.execute(`
+      CREATE TABLE dataset(x REAL, y REAL, z REAL);
+      INSERT INTO dataset VALUES
+        (5,3,3.2),  (5,6,4.3),  (5,9,5.4),
+        (10,3,4),   (10,6,3.8), (10,9,3.6),
+        (15,3,4.8), (15,6,4),   (15,9,3.5);
+
+      SELECT
+        pearson(x, x) xx,
+        pearson(x, y) xy,
+        abs(-0.12666 - pearson(x, z)) < 0.00001 xz,
+        pearson(y, x) yx,
+        pearson(y, y) yy,
+        abs(0.10555 - pearson(y, z))  < 0.00001 yz,
+        abs(-0.12666 - pearson(z, x)) < 0.00001 zx,
+        abs(0.10555 - pearson(z, y))  < 0.00001 zy,
+        pearson(z, z) zz
+      FROM dataset;
+    `)
+    expect(actual.values).to.eql({
+      xx: [1], xy: [0], xz: [1], yx: [0], yy: [1], yz: [1], zx: [1], zy: [1], zz: [1]
+    })
+  })
 })

tests/lib/storedInquiries/storedInquiries.spec.js

@@ -87,14 +87,14 @@ describe('storedInquiries.js', () => {
 
   it('isTabNeedName returns false when the inquiry has a name and is not predefined', () => {
     const tab = {
-      initName: 'foo'
+      name: 'foo'
     }
     expect(storedInquiries.isTabNeedName(tab)).to.equal(false)
   })
 
   it('isTabNeedName returns true when the inquiry has no name and is not predefined', () => {
     const tab = {
-      initName: null,
+      name: null,
       tempName: 'Untitled'
     }
     expect(storedInquiries.isTabNeedName(tab)).to.equal(true)
@@ -102,7 +102,7 @@ describe('storedInquiries.js', () => {
 
   it('isTabNeedName returns true when the inquiry is predefined', () => {
     const tab = {
-      initName: 'foo',
+      name: 'foo',
       isPredefined: true
     }
 
@@ -351,14 +351,13 @@ describe('storedInquiries.js', () => {
       query: 'select * from foo',
       viewType: 'chart',
       viewOptions: [],
-      initName: null,
-      $refs: {
+      name: null,
       dataView: {
         getOptionsForSave () {
           return ['chart']
         }
       }
-      }
+
     }
     const value = storedInquiries.save(tab, 'foo')
     expect(value.id).to.equal(tab.id)
@@ -376,19 +375,18 @@ describe('storedInquiries.js', () => {
       query: 'select * from foo',
       viewType: 'chart',
       viewOptions: [],
-      initName: null,
-      $refs: {
+      name: null,
       dataView: {
         getOptionsForSave () {
           return ['chart']
         }
       }
-      }
+
     }
 
     const first = storedInquiries.save(tab, 'foo')
 
-    tab.initName = 'foo'
+    tab.name = 'foo'
     tab.query = 'select * from foo'
     storedInquiries.save(tab)
     const inquiries = storedInquiries.getStoredInquiries()
@@ -409,13 +407,11 @@ describe('storedInquiries.js', () => {
       query: 'select * from foo',
       viewType: 'chart',
       viewOptions: [],
-      initName: 'foo predefined',
-      $refs: {
+      name: 'foo predefined',
       dataView: {
         getOptionsForSave () {
           return ['chart']
         }
-        }
       },
       isPredefined: true
     }

tests/lib/tab.spec.js

@@ -0,0 +1,189 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import Tab from '@/lib/tab.js'
+
+describe('tab.js', () => {
+  it('Creates a tab for new inquiry', () => {
+    const state = {
+      untitledLastIndex: 5
+    }
+
+    const newTab = new Tab(state)
+    expect(newTab).to.include({
+      name: null,
+      tempName: 'Untitled 5',
+      query: undefined,
+      viewOptions: undefined,
+      isPredefined: undefined,
+      viewType: 'chart',
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: false,
+      state: state
+    })
+    expect(newTab.layout).to.include({
+      sqlEditor: 'above',
+      table: 'bottom',
+      dataView: 'hidden'
+    })
+    expect(newTab.id).to.have.lengthOf(21)
+  })
+
+  it('Creates a tab for existing inquiry', () => {
+    const state = {
+      untitledLastIndex: 5
+    }
+
+    const inquiry = {
+      id: 'qwerty',
+      query: 'SELECT * from foo',
+      viewType: 'pivot',
+      viewOptions: 'this is view options object',
+      name: 'Foo inquiry',
+      createdAt: '2022-12-05T18:30:30'
+    }
+
+    const newTab = new Tab(state, inquiry)
+    expect(newTab).to.include({
+      id: 'qwerty',
+      name: 'Foo inquiry',
+      tempName: 'Foo inquiry',
+      query: 'SELECT * from foo',
+      viewOptions: 'this is view options object',
+      isPredefined: undefined,
+      viewType: 'pivot',
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true,
+      state: state
+    })
+    expect(newTab.layout).to.include({
+      sqlEditor: 'above',
+      table: 'bottom',
+      dataView: 'hidden'
+    })
+  })
+
+  it('Set isGettingResults true when execute', async () => {
+    let resolveQuering
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().returns(new Promise(resolve => {
+          resolveQuering = resolve
+        })),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const newTab = new Tab(state, {
+      id: 'qwerty',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'cart',
+      viewOptions: 'this is view options object',
+      name: 'Foo inquiry',
+      createdAt: '2022-12-05T18:30:30'
+    })
+
+    expect(newTab.isGettingResults).to.equal(false)
+    newTab.execute()
+    expect(newTab.isGettingResults).to.equal(true)
+    resolveQuering()
+  })
+
+  it('Updates result with query execution result', async () => {
+    const result = {
+      columns: ['id', 'name'],
+      values: {
+        id: [1, 2],
+        name: ['Harry', 'Drako']
+      }
+    }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().resolves(result),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const newTab = new Tab(state, {
+      id: 'qwerty',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'cart',
+      viewOptions: 'this is view options object',
+      name: 'Foo inquiry',
+      createdAt: '2022-12-05T18:30:30'
+    })
+
+    await newTab.execute()
+    expect(newTab.isGettingResults).to.equal(false)
+    expect(newTab.result).to.eql(result)
+  })
+
+  it('Updates error with query execution error', async () => {
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().rejects(new Error('No such table')),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const newTab = new Tab(state, {
+      id: 'qwerty',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'cart',
+      viewOptions: 'this is view options object',
+      name: 'Foo inquiry',
+      createdAt: '2022-12-05T18:30:30'
+    })
+
+    await newTab.execute()
+    expect(newTab.error.type).to.eql('error')
+    expect(newTab.error.message.toString()).to.equal('Error: No such table')
+  })
+
+  it('Updates schema after query execution', async () => {
+    const result = {
+      columns: ['id', 'name'],
+      values: {
+        id: [],
+        name: []
+      }
+    }
+
+    // mock store state
+    const state = {
+      currentTabId: 1,
+      dbName: 'fooDb',
+      db: {
+        execute: sinon.stub().resolves(result),
+        refreshSchema: sinon.stub().resolves()
+      }
+    }
+
+    const newTab = new Tab(state, {
+      id: 'qwerty',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'cart',
+      viewOptions: 'this is view options object',
+      name: 'Foo inquiry',
+      createdAt: '2022-12-05T18:30:30'
+    })
+
+    await newTab.execute()
+    expect(state.db.refreshSchema.calledOnce).to.equal(true)
+  })
+})

tests/lib/utils/clipboardIo.spec.js

@@ -7,9 +7,9 @@ describe('clipboardIo.js', async () => {
     sinon.restore()
   })
 
-  it('copyCsv', async () => {
+  it('copyText', async () => {
     sinon.stub(navigator.clipboard, 'writeText').resolves(true)
-    await cIo.copyCsv('id\tname\r\n1\t2')
+    await cIo.copyText('id\tname\r\n1\t2')
     expect(navigator.clipboard.writeText.calledOnceWith('id\tname\r\n1\t2'))
   })
 

tests/lib/utils/time.spec.js

@@ -29,12 +29,12 @@ describe('time.js', () => {
   })
 
   it('sleep resolves after n ms', async () => {
-    let before = performance.now()
+    let before = Date.now()
     await time.sleep(10)
-    expect(performance.now() - before).to.be.least(10)
+    expect(Date.now() - before).to.be.least(10)
 
-    before = performance.now()
+    before = Date.now()
     await time.sleep(30)
-    expect(performance.now() - before).to.be.least(30)
+    expect(Date.now() - before).to.be.least(30)
   })
 })

tests/store/actions.spec.js

@@ -11,7 +11,7 @@ describe('actions', () => {
     }
 
     let id = await addTab({ state })
-    expect(state.tabs[0]).to.eql({
+    expect(state.tabs[0]).to.include({
       id: id,
       name: null,
       tempName: 'Untitled',
@@ -22,7 +22,7 @@ describe('actions', () => {
     expect(state.untitledLastIndex).to.equal(1)
 
     id = await addTab({ state })
-    expect(state.tabs[1]).to.eql({
+    expect(state.tabs[1]).to.include({
       id: id,
       name: null,
       tempName: 'Untitled 1',
@@ -41,14 +41,13 @@ describe('actions', () => {
     const tab = {
       id: 1,
       name: 'test',
-      tempName: null,
       query: 'SELECT * from foo',
       viewType: 'chart',
-      viewOptions: {},
+      viewOptions: 'an object with view options',
       isSaved: true
     }
     await addTab({ state }, tab)
-    expect(state.tabs[0]).to.eql(tab)
+    expect(state.tabs[0]).to.include(tab)
     expect(state.untitledLastIndex).to.equal(0)
   })
 

tests/store/mutations.spec.js

@@ -5,9 +5,10 @@ const {
   updateTab,
   deleteTab,
   setCurrentTabId,
-  setCurrentTab,
   updatePredefinedInquiries,
-  setDb
+  setDb,
+  setLoadingPredefinedInquiries,
+  setPredefinedInquiriesLoaded
 } = mutations
 
 describe('mutations', () => {
@@ -35,8 +36,7 @@ describe('mutations', () => {
       isPredefined: false
     }
 
-    const newTab = {
-      index: 0,
+    const newValues = {
       id: 1,
       name: 'new test',
       query: 'SELECT * from bar',
@@ -49,7 +49,7 @@ describe('mutations', () => {
       tabs: [tab]
     }
 
-    updateTab(state, newTab)
+    updateTab(state, { tab, newValues })
     expect(state.tabs[0]).to.eql({
       id: 1,
       name: 'new test',
@@ -73,8 +73,7 @@ describe('mutations', () => {
       isPredefined: true
     }
 
-    const newTab = {
-      index: 0,
+    const newValues = {
       id: 2,
       name: 'new test',
       query: 'SELECT * from bar',
@@ -88,7 +87,7 @@ describe('mutations', () => {
       currentTabId: 1
     }
 
-    updateTab(state, newTab)
+    updateTab(state, { tab, newValues })
     expect(state.tabs).to.have.lengthOf(1)
     expect(state.currentTabId).to.equal(2)
     expect(state.tabs[0].id).to.equal(2)
@@ -109,8 +108,7 @@ describe('mutations', () => {
       isSaved: false
     }
 
-    const newTab = {
-      index: 0,
+    const newValues = {
       id: 1,
       name: 'new test'
     }
@@ -119,7 +117,7 @@ describe('mutations', () => {
       tabs: [tab]
     }
 
-    updateTab(state, newTab)
+    updateTab(state, { tab, newValues })
     expect(state.tabs).to.have.lengthOf(1)
     expect(state.tabs[0].id).to.equal(1)
     expect(state.tabs[0].name).to.equal('new test')
@@ -139,8 +137,7 @@ describe('mutations', () => {
       isPredefined: true
     }
 
-    const newTab = {
-      index: 0,
+    const newValues = {
       isSaved: false
     }
 
@@ -148,7 +145,7 @@ describe('mutations', () => {
       tabs: [tab]
     }
 
-    updateTab(state, newTab)
+    updateTab(state, { tab, newValues })
     expect(state.tabs).to.have.lengthOf(1)
     expect(state.tabs[0].id).to.equal(1)
     expect(state.tabs[0].name).to.equal('test')
@@ -179,13 +176,15 @@ describe('mutations', () => {
 
     const state = {
       tabs: [tab1, tab2],
-      currentTabId: 1
+      currentTabId: 1,
+      currentTab: tab1
     }
 
-    deleteTab(state, 0)
+    deleteTab(state, tab1)
     expect(state.tabs).to.have.lengthOf(1)
     expect(state.tabs[0].id).to.equal(2)
     expect(state.currentTabId).to.equal(2)
+    expect(state.currentTab).to.eql(tab2)
   })
 
   it('deleteTab - opened, last', () => {
@@ -211,13 +210,15 @@ describe('mutations', () => {
 
     const state = {
       tabs: [tab1, tab2],
-      currentTabId: 2
+      currentTabId: 2,
+      currentTab: tab2
     }
 
-    deleteTab(state, 1)
+    deleteTab(state, tab2)
     expect(state.tabs).to.have.lengthOf(1)
     expect(state.tabs[0].id).to.equal(1)
     expect(state.currentTabId).to.equal(1)
+    expect(state.currentTab).to.eql(tab1)
   })
 
   it('deleteTab - opened, in the middle', () => {
@@ -253,14 +254,16 @@ describe('mutations', () => {
 
     const state = {
       tabs: [tab1, tab2, tab3],
-      currentTabId: 2
+      currentTabId: 2,
+      currentTab: tab2
     }
 
-    deleteTab(state, 1)
+    deleteTab(state, tab2)
     expect(state.tabs).to.have.lengthOf(2)
     expect(state.tabs[0].id).to.equal(1)
     expect(state.tabs[1].id).to.equal(3)
     expect(state.currentTabId).to.equal(3)
+    expect(state.currentTab).to.eql(tab3)
   })
 
   it('deleteTab - opened, single', () => {
@@ -276,48 +279,19 @@ describe('mutations', () => {
 
     const state = {
       tabs: [tab1],
-      currentTabId: 1
+      currentTabId: 1,
+      currentTab: tab1
     }
 
-    deleteTab(state, 0)
+    deleteTab(state, tab1)
     expect(state.tabs).to.have.lengthOf(0)
     expect(state.currentTabId).to.equal(null)
-  })
-
-  it('deleteTab - not opened', () => {
-    const tab1 = {
-      id: 1,
-      name: 'foo',
-      tempName: null,
-      query: 'SELECT * from foo',
-      viewType: 'chart',
-      viewOptions: {},
-      isSaved: true
-    }
-
-    const tab2 = {
-      id: 2,
-      name: 'bar',
-      tempName: null,
-      query: 'SELECT * from bar',
-      viewType: 'chart',
-      viewOptions: {},
-      isSaved: true
-    }
-
-    const state = {
-      tabs: [tab1, tab2],
-      currentTabId: 1
-    }
-
-    deleteTab(state, 1)
-    expect(state.tabs).to.have.lengthOf(1)
-    expect(state.tabs[0].id).to.equal(1)
-    expect(state.currentTabId).to.equal(1)
+    expect(state.currentTab).to.equal(null)
   })
 
   it('setCurrentTabId', () => {
     const state = {
+      tabs: [{ id: 1 }, { id: 2 }],
       currentTabId: 1
     }
 
@@ -325,15 +299,6 @@ describe('mutations', () => {
     expect(state.currentTabId).to.equal(2)
   })
 
-  it('setCurrentTab', () => {
-    const state = {
-      currentTab: { id: 1 }
-    }
-
-    setCurrentTab(state, { id: 2 })
-    expect(state.currentTab).to.eql({ id: 2 })
-  })
-
   it('updatePredefinedInquiries - single', () => {
     const inquiry = {
       id: 1,
@@ -377,4 +342,22 @@ describe('mutations', () => {
     updatePredefinedInquiries(state, inquiries)
     expect(state.predefinedInquiries).to.eql(inquiries)
   })
+
+  it('setLoadingPredefinedInquiries', () => {
+    const state = {
+      loadingPredefinedInquiries: false
+    }
+
+    setLoadingPredefinedInquiries(state, true)
+    expect(state.loadingPredefinedInquiries).to.equal(true)
+  })
+
+  it('setPredefinedInquiriesLoaded', () => {
+    const state = {
+      predefinedInquiriesLoaded: false
+    }
+
+    setPredefinedInquiriesLoaded(state, true)
+    expect(state.predefinedInquiriesLoaded).to.equal(true)
+  })
 })

tests/views/LoadView.spec.js

@@ -0,0 +1,147 @@
+import { expect } from 'chai'
+import sinon from 'sinon'
+import { mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import LoadView from '@/views/LoadView'
+import fu from '@/lib/utils/fileIo'
+import database from '@/lib/database'
+import realMutations from '@/store/mutations'
+import realActions from '@/store/actions'
+import flushPromises from 'flush-promises'
+import Tab from '@/lib/tab'
+
+describe('LoadView.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('Loads db and inquiries and redirects to workspace if no errors', async () => {
+    const state = {
+      tabs: []
+    }
+    const mutations = {
+      setCurrentTabId: sinon.stub().callsFake(realMutations.setCurrentTabId),
+      setDb: sinon.stub().callsFake(realMutations.setDb)
+    }
+    const actions = {
+      addTab: sinon.stub().callsFake(realActions.addTab)
+    }
+    const store = new Vuex.Store({ state, mutations, actions })
+    const $route = {
+      path: '/workspace',
+      query: {
+        data_url: 'https://my-url/test.db',
+        data_format: 'sqlite',
+        inquiry_url: 'https://my-url/test_inquiries.json',
+        inquiry_id: [1],
+        maximize: 'dataView'
+      }
+    }
+
+    const $router = { push: sinon.stub() }
+
+    const readFile = sinon.stub(fu, 'readFile')
+    const dataRes = new Response()
+    dataRes.blob = sinon.stub().resolves({})
+    readFile.onCall(0).returns(Promise.resolve(dataRes))
+
+    const inquiriesRes = new Response()
+    inquiriesRes.json = sinon.stub().resolves({
+      version: 2,
+      inquiries: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+    })
+    readFile.onCall(1).returns(Promise.resolve(inquiriesRes))
+    const db = {
+      loadDb: sinon.stub().resolves()
+    }
+    sinon.stub(database, 'getNewDatabase').returns(db)
+    Tab.prototype.execute = sinon.stub()
+
+    const wrapper = mount(LoadView, {
+      store,
+      mocks: { $route, $router },
+      stubs: ['router-link']
+    })
+
+    await flushPromises()
+
+    // DB file is read
+    expect(fu.readFile.firstCall.args[0]).to.equal('https://my-url/test.db')
+
+    // Db is loaded
+    expect(db.loadDb.firstCall.args[0]).to.equal(await dataRes.blob.returnValues[0])
+
+    // Inquiries file is read
+    expect(fu.readFile.secondCall.args[0])
+      .to.equal('https://my-url/test_inquiries.json')
+
+    // Tab for inquiry is created
+    expect(actions.addTab.calledOnce).to.equal(true)
+    expect(actions.addTab.firstCall.args[1]).eql({
+      id: undefined,
+      name: 'foo',
+      layout: {
+        dataView: 'bottom',
+        sqlEditor: 'hidden',
+        table: 'above'
+      },
+      maximize: 'dataView'
+    })
+    const executedTab = Tab.prototype.execute.firstCall.thisValue
+    expect(executedTab.tempName).to.equal('foo')
+    expect(wrapper.find('#open-workspace-btn').exists()).to.equal(false)
+    expect($router.push.called).to.equal(true)
+  })
+
+  it('Doesn\'t redirect and show the button if there is an error', async () => {
+    const state = {
+      tabs: []
+    }
+    const mutations = {
+      setCurrentTabId: sinon.stub().callsFake(realMutations.setCurrentTabId),
+      setDb: sinon.stub().callsFake(realMutations.setDb)
+    }
+    const actions = {
+      addTab: sinon.stub().callsFake(realActions.addTab)
+    }
+    const store = new Vuex.Store({ state, mutations, actions })
+    const $route = {
+      path: '/workspace',
+      query: {
+        data_url: 'https://my-url/test.db',
+        data_format: 'sqlite',
+        inquiry_url: 'https://my-url/test_inquiries.json',
+        inquiry_id: [1],
+        maximize: 'dataView'
+      }
+    }
+
+    const $router = { push: sinon.stub() }
+
+    const readFile = sinon.stub(fu, 'readFile')
+    const dataRes = new Response()
+    dataRes.blob = sinon.stub().rejects(new Error('Something is wrong'))
+    readFile.onCall(0).returns(Promise.resolve(dataRes))
+
+    const inquiriesRes = new Response()
+    inquiriesRes.json = sinon.stub().resolves({
+      version: 2,
+      inquiries: [{ id: 1 }]
+    })
+    readFile.onCall(1).returns(Promise.resolve(inquiriesRes))
+    sinon.stub(database, 'getNewDatabase').returns({
+      loadDb: sinon.stub().resolves()
+    })
+
+    const wrapper = mount(LoadView, {
+      store,
+      mocks: { $route, $router },
+      stubs: ['router-link']
+    })
+
+    await flushPromises()
+    expect(wrapper.find('#open-workspace-btn').exists()).to.equal(true)
+    expect($router.push.called).to.equal(false)
+    expect(wrapper.find('#logs').text()).to.include('Something is wrong')
+  })
+})

tests/views/Main/Inquiries/Inquiries.spec.js

@@ -19,7 +19,9 @@ describe('Inquiries.vue', () => {
       predefinedInquiries: []
     }
     const mutations = {
-      updatePredefinedInquiries: sinon.stub()
+      setPredefinedInquiriesLoaded: sinon.stub(),
+      updatePredefinedInquiries: sinon.stub(),
+      setLoadingPredefinedInquiries: sinon.stub()
     }
     const store = new Vuex.Store({ state, mutations })
     const wrapper = shallowMount(Inquiries, { store })
@@ -327,6 +329,7 @@ describe('Inquiries.vue', () => {
     sinon.stub(storedInquiries, 'getStoredInquiries').returns([inquiryInStorage])
 
     const state = {
+      tabs: [],
       predefinedInquiries: []
     }
     const actions = { addTab: sinon.stub().resolves(1) }

tests/views/Main/MainMenu.spec.js

@@ -45,7 +45,7 @@ describe('MainMenu.vue', () => {
   it('Save is not visible if there is no tabs', () => {
     const state = {
       currentTab: null,
-      tabs: [{}],
+      tabs: [],
       db: {}
     }
     const store = new Vuex.Store({ state })
@@ -62,13 +62,15 @@ describe('MainMenu.vue', () => {
   })
 
   it('Save is disabled if current tab.isSaved is true', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
+      id: 1,
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const store = new Vuex.Store({ state })
@@ -83,17 +85,19 @@ describe('MainMenu.vue', () => {
     expect(wrapper.find('#save-btn').element.disabled).to.equal(false)
 
     await vm.$set(state.tabs[0], 'isSaved', true)
+    await vm.$nextTick()
     expect(wrapper.find('#save-btn').element.disabled).to.equal(true)
   })
 
   it('Creates a tab', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const newInquiryId = 1
@@ -121,13 +125,14 @@ describe('MainMenu.vue', () => {
   })
 
   it('Creates a tab and redirects to workspace', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const newInquiryId = 1
@@ -156,13 +161,14 @@ describe('MainMenu.vue', () => {
 
   it('Ctrl R calls currentTab.execute if running is enabled and route.path is "/workspace"',
     async () => {
-      const state = {
-        currentTab: {
+      const tab = {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
-        },
-        tabs: [{ isSaved: false }],
+        isSaved: false
+      }
+      const state = {
+        currentTab: tab,
+        tabs: [tab],
         db: {}
       }
       const store = new Vuex.Store({ state })
@@ -201,13 +207,14 @@ describe('MainMenu.vue', () => {
 
   it('Ctrl Enter calls currentTab.execute if running is enabled and route.path is "/workspace"',
     async () => {
-      const state = {
-        currentTab: {
+      const tab = {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
-        },
-        tabs: [{ isSaved: false }],
+        isSaved: false
+      }
+      const state = {
+        currentTab: tab,
+        tabs: [tab],
         db: {}
       }
       const store = new Vuex.Store({ state })
@@ -245,13 +252,14 @@ describe('MainMenu.vue', () => {
     })
 
   it('Ctrl B calls createNewInquiry', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const store = new Vuex.Store({ state })
@@ -280,13 +288,14 @@ describe('MainMenu.vue', () => {
 
   it('Ctrl S calls checkInquiryBeforeSave if the tab is unsaved and route path is /workspace',
     async () => {
-      const state = {
-        currentTab: {
+      const tab = {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
-        },
-        tabs: [{ isSaved: false }],
+        isSaved: false
+      }
+      const state = {
+        currentTab: tab,
+        tabs: [tab],
         db: {}
       }
       const store = new Vuex.Store({ state })
@@ -325,13 +334,16 @@ describe('MainMenu.vue', () => {
 
   it('Saves the inquiry when no need the new name',
     async () => {
-      const state = {
-        currentTab: {
+      const tab = {
+        id: 1,
+        name: 'foo',
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
-        },
-        tabs: [{ id: 1, name: 'foo', isSaved: false }],
+        isSaved: false
+      }
+      const state = {
+        currentTab: tab,
+        tabs: [tab],
         db: {}
       }
       const mutations = {
@@ -364,13 +376,15 @@ describe('MainMenu.vue', () => {
 
       // check that the tab was updated
       expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-        index: 0,
+        tab,
+        newValues: {
           name: 'foo',
           id: 1,
           query: 'SELECT * FROM foo',
           viewType: 'chart',
           viewOptions: [],
           isSaved: true
+        }
       }))).to.equal(true)
 
       // check that 'inquirySaved' event was triggered on $root
@@ -378,13 +392,17 @@ describe('MainMenu.vue', () => {
     })
 
   it('Shows en error when the new name is needed but not specifyied', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const mutations = {
@@ -424,13 +442,17 @@ describe('MainMenu.vue', () => {
   })
 
   it('Saves the inquiry with a new name', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const mutations = {
@@ -475,13 +497,15 @@ describe('MainMenu.vue', () => {
 
     // check that the tab was updated
     expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-      index: 0,
+      tab: tab,
+      newValues: {
         name: 'foo',
         id: 1,
         query: 'SELECT * FROM foo',
         viewType: 'chart',
         viewOptions: [],
         isSaved: true
+      }
     }))).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on $root
@@ -489,11 +513,11 @@ describe('MainMenu.vue', () => {
   })
 
   it('Saves a predefined inquiry with a new name', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
+      id: 1,
+      name: 'foo',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0,
       isPredefined: true,
       result: {
         columns: ['id', 'name'],
@@ -503,9 +527,12 @@ describe('MainMenu.vue', () => {
         ]
       },
       viewType: 'chart',
-        viewOptions: []
-      },
-      tabs: [{ id: 1, name: 'foo', isSaved: false, isPredefined: true }],
+      viewOptions: [],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const mutations = {
@@ -553,13 +580,15 @@ describe('MainMenu.vue', () => {
 
     // check that the tab was updated
     expect(mutations.updateTab.calledOnceWith(state, sinon.match({
-      index: 0,
+      tab,
+      newValues: {
         name: 'bar',
         id: 2,
         query: 'SELECT * FROM foo',
         viewType: 'chart',
         viewOptions: [],
         isSaved: true
+      }
     }))).to.equal(true)
 
     // check that 'inquirySaved' event was triggered on $root
@@ -580,13 +609,17 @@ describe('MainMenu.vue', () => {
   })
 
   it('Cancel saving', async () => {
-    const state = {
-      currentTab: {
+    const tab = {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
-      },
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
+      isSaved: false
+    }
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const mutations = {

tests/views/Main/Workspace/Tabs/Tab/DataView/DataView.spec.js

@@ -54,6 +54,10 @@ describe('DataView.vue', () => {
     const pivot = wrapper.findComponent({ name: 'pivot' }).vm
     sinon.spy(pivot, 'saveAsSvg')
 
+    // Switch to Custom Chart renderer
+    pivot.pivotOptions.rendererName = 'Custom chart'
+    await pivot.$nextTick()
+
     // Export to svg
     await svgBtn.trigger('click')
     expect(pivot.saveAsSvg.calledOnce).to.equal(true)

tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/Pivot.spec.js

@@ -461,6 +461,7 @@ describe('Pivot.vue', () => {
   })
 
   it('saveAsPng - table', async () => {
+    sinon.stub(pivotHelper, 'getPivotCanvas').returns(document.createElement('canvas'))
     sinon.stub(HTMLCanvasElement.prototype, 'toDataURL').returns('canvas data url')
     sinon.stub(fIo, 'downloadFromUrl')
 

tests/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper.spec.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import { _getDataSources, getPivotCanvas, getPivotHtml }
-  from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper'
+from '@/views/Main/Workspace/Tabs/Tab/DataView/Pivot/pivotHelper'
 
 describe('pivotHelper.js', () => {
   it('_getDataSources returns data sources', () => {

tests/views/Main/Workspace/Tabs/Tab/RunResult.spec.js

@@ -1,155 +0,0 @@
-import { expect } from 'chai'
-import { mount, createWrapper } from '@vue/test-utils'
-import RunResult from '@/views/Main/Workspace/Tabs/Tab/RunResult'
-import csv from '@/lib/csv'
-import sinon from 'sinon'
-
-describe('RunResult.vue', () => {
-  afterEach(() => {
-    sinon.restore()
-  })
-
-  it('shows alert when ClipboardItem is not supported', async () => {
-    const ClipboardItem = window.ClipboardItem
-    delete window.ClipboardItem
-    sinon.spy(window, 'alert')
-    const wrapper = mount(RunResult, {
-      propsData: {
-        result: {
-          columns: ['id', 'name'],
-          values: {
-            id: [1],
-            name: ['foo']
-          }
-        }
-      }
-    })
-
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
-    await copyBtn.trigger('click')
-
-    expect(
-      window.alert.calledOnceWith(
-        "Your browser doesn't support copying into the clipboard. " +
-        'If you use Firefox you can enable it ' +
-        'by setting dom.events.asyncClipboard.clipboardItem to true.'
-      )
-    ).to.equal(true)
-
-    window.ClipboardItem = ClipboardItem
-  })
-
-  it('copy to clipboard more than 1 sec', async () => {
-    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
-    const clock = sinon.useFakeTimers()
-    const wrapper = mount(RunResult, {
-      propsData: {
-        result: {
-          columns: ['id', 'name'],
-          values: {
-            id: [1],
-            name: ['foo']
-          }
-        }
-      }
-    })
-    sinon.stub(csv, 'serialize').callsFake(() => {
-      clock.tick(5000)
-    })
-
-    // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
-    await copyBtn.trigger('click')
-
-    // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
-
-    // ... with Building message...
-    expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
-
-    // Switch to microtasks (let serialize run)
-    clock.tick(0)
-    await wrapper.vm.$nextTick()
-
-    // The dialog is shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
-
-    // ... with Ready message...
-    expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
-
-    // Click copy
-    await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
-
-    // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
-  })
-
-  it('copy to clipboard less than 1 sec', async () => {
-    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
-    const clock = sinon.useFakeTimers()
-    const wrapper = mount(RunResult, {
-      propsData: {
-        result: {
-          columns: ['id', 'name'],
-          values: {
-            id: [1],
-            name: ['foo']
-          }
-        }
-      }
-    })
-    sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(csv, 'serialize').callsFake(() => {
-      clock.tick(500)
-    })
-
-    // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
-    await copyBtn.trigger('click')
-
-    // Switch to microtasks (let serialize run)
-    clock.tick(0)
-    await wrapper.vm.$nextTick()
-
-    // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
-    // copyToClipboard is called
-    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
-  })
-
-  it('cancel long copy', async () => {
-    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
-    const clock = sinon.useFakeTimers()
-    const wrapper = mount(RunResult, {
-      propsData: {
-        result: {
-          columns: ['id', 'name'],
-          values: {
-            id: [1],
-            name: ['foo']
-          }
-        }
-      }
-    })
-    sinon.spy(wrapper.vm, 'copyToClipboard')
-    sinon.stub(csv, 'serialize').callsFake(() => {
-      clock.tick(5000)
-    })
-
-    // Click copy to clipboard
-    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
-    await copyBtn.trigger('click')
-
-    // Switch to microtasks (let serialize run)
-    clock.tick(0)
-    await wrapper.vm.$nextTick()
-
-    // Click cancel
-    await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
-
-    // The dialog is not shown...
-    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
-    // copyToClipboard is not called
-    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
-  })
-})

tests/views/Main/Workspace/Tabs/Tab/RunResult/Record.spec.js

@@ -0,0 +1,116 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import Record from '@/views/Main/Workspace/Tabs/Tab/RunResult/Record'
+
+describe('Record.vue', () => {
+  it('shows record with selected cell', async () => {
+    const wrapper = mount(Record, {
+      propsData: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        },
+        rowIndex: 1,
+        selectedColumnIndex: 1
+      }
+    })
+
+    const rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows.at(0).findAll('th').at(0).text()).to.equals('id')
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('2')
+    expect(rows.at(1).findAll('th').at(0).text()).to.equals('name')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
+
+    const selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('bar')
+  })
+
+  it('switches to the next or previous row', async () => {
+    const wrapper = mount(Record, {
+      propsData: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2, 3],
+            name: ['foo', 'bar', 'baz']
+          }
+        },
+        rowIndex: 0,
+        selectedColumnIndex: 0
+      }
+    })
+
+    let rows = wrapper.findAll('tbody tr')
+    expect(rows).to.have.lengthOf(2)
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    let selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('1')
+
+    await wrapper.find('.next').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('2')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('bar')
+    selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('2')
+
+    await wrapper.find('.prev').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('1')
+
+    await wrapper.find('.last').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('3')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('baz')
+    selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('3')
+
+    await wrapper.find('.first').trigger('click')
+
+    rows = wrapper.findAll('tbody tr')
+    expect(rows.at(0).findAll('td').at(0).text()).to.equals('1')
+    expect(rows.at(1).findAll('td').at(0).text()).to.equals('foo')
+    selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('1')
+  })
+
+  it('removes selection when click on selected cell', async () => {
+    const wrapper = mount(Record, {
+      propsData: {
+        dataSet: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        },
+        rowIndex: 1,
+        selectedColumnIndex: 1
+      }
+    })
+
+    const selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    await selectedCell.trigger('click')
+
+    const selectedCellAfterClick = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCellAfterClick.exists()).to.equals(false)
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/RunResult/RunResult.spec.js

@@ -0,0 +1,348 @@
+import { expect } from 'chai'
+import { mount, createWrapper } from '@vue/test-utils'
+import RunResult from '@/views/Main/Workspace/Tabs/Tab/RunResult'
+import csv from '@/lib/csv'
+import sinon from 'sinon'
+
+describe('RunResult.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows alert when ClipboardItem is not supported', async () => {
+    const ClipboardItem = window.ClipboardItem
+    delete window.ClipboardItem
+    sinon.spy(window, 'alert')
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      }
+    })
+
+    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    await copyBtn.trigger('click')
+
+    expect(
+      window.alert.calledOnceWith(
+        "Your browser doesn't support copying into the clipboard. " +
+        'If you use Firefox you can enable it ' +
+        'by setting dom.events.asyncClipboard.clipboardItem to true.'
+      )
+    ).to.equal(true)
+
+    window.ClipboardItem = ClipboardItem
+  })
+
+  it('copy to clipboard more than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      }
+    })
+    sinon.stub(csv, 'serialize').callsFake(() => {
+      clock.tick(5000)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    await copyBtn.trigger('click')
+
+    // The dialog is shown...
+    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
+
+    // ... with Building message...
+    expect(wrapper.find('.dialog-body').text()).to.equal('Building CSV...')
+
+    // Switch to microtasks (let serialize run)
+    clock.tick(0)
+    await wrapper.vm.$nextTick()
+
+    // The dialog is shown...
+    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(true)
+
+    // ... with Ready message...
+    expect(wrapper.find('.dialog-body').text()).to.equal('CSV is ready')
+
+    // Click copy
+    await wrapper.find('.dialog-buttons-container button.primary').trigger('click')
+
+    // The dialog is not shown...
+    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+  })
+
+  it('copy to clipboard less than 1 sec', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon.stub(csv, 'serialize').callsFake(() => {
+      clock.tick(500)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let serialize run)
+    clock.tick(0)
+    await wrapper.vm.$nextTick()
+
+    // The dialog is not shown...
+    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+    // copyToClipboard is called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(true)
+  })
+
+  it('cancel long copy', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const clock = sinon.useFakeTimers()
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1],
+            name: ['foo']
+          }
+        }
+      }
+    })
+    sinon.spy(wrapper.vm, 'copyToClipboard')
+    sinon.stub(csv, 'serialize').callsFake(() => {
+      clock.tick(5000)
+    })
+
+    // Click copy to clipboard
+    const copyBtn = createWrapper(wrapper.findComponent({ name: 'clipboardIcon' }).vm.$parent)
+    await copyBtn.trigger('click')
+
+    // Switch to microtasks (let serialize run)
+    clock.tick(0)
+    await wrapper.vm.$nextTick()
+
+    // Click cancel
+    await wrapper.find('.dialog-buttons-container button.secondary').trigger('click')
+
+    // The dialog is not shown...
+    expect(wrapper.find('[data-modal="prepareCSVCopy"]').exists()).to.equal(false)
+    // copyToClipboard is not called
+    expect(wrapper.vm.copyToClipboard.calledOnce).to.equal(false)
+  })
+
+  it('shows value of selected cell - result set', async () => {
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = createWrapper(
+      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    )
+    await viewValueBtn.trigger('click')
+
+    /*
+    Result set:
+    |1 | foo
+    +--+-----
+    |2 | bar
+    */
+
+    // Click on '1' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows.at(0).findAll('td').at(0).trigger('click')
+
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Go to 'foo' with right arrow key
+    await wrapper.find('table').trigger('keydown.right')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Go to 'bar' with down arrow key
+    await wrapper.find('table').trigger('keydown.down')
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Go to '2' with left arrow key
+    await wrapper.find('table').trigger('keydown.left')
+    expect(wrapper.find('.value-body').text()).to.equals('2')
+
+    // Go to '1' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Click on 'bar' cell
+    await rows.at(1).findAll('td').at(1).trigger('click')
+
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Click on 'bar' cell again
+    await rows.at(1).findAll('td').at(1).trigger('click')
+
+    expect(wrapper.find('.value-viewer-container .table-preview').text())
+      .to.equals('No cell selected to view')
+  })
+
+  it('shows value of selected cell - record view', async () => {
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [1, 2],
+            name: ['foo', 'bar']
+          }
+        }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = createWrapper(
+      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    )
+    await viewValueBtn.trigger('click')
+
+    // Go to record view
+    const vierRecordBtn = createWrapper(
+      wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
+    )
+    await vierRecordBtn.trigger('click')
+
+    /*
+    Record 1:
+    |id   | 1
+    +-----+-----
+    |name | foo
+
+    Record 2:
+    |id   | 2
+    +-----+-----
+    |name | bar
+
+    */
+
+    // Click '1' is selected by default
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Go to 'foo' with down arrow key
+    await wrapper.find('table').trigger('keydown.down')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Go to next record
+    await wrapper.find('.icon-btn.next').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('bar')
+
+    // Go to '2' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('2')
+
+    // Go to prev record
+    await wrapper.find('.icon-btn.prev').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('1')
+
+    // Click on 'foo' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows.at(1).find('td').trigger('click')
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+
+    // Click on 'foo' cell again
+    await rows.at(1).find('td').trigger('click')
+    expect(wrapper.find('.value-viewer-container .table-preview').text())
+      .to.equals('No cell selected to view')
+  })
+
+  it('keeps selected cell when switch between record and regular view', async () => {
+    const wrapper = mount(RunResult, {
+      propsData: {
+        tab: { id: 1 },
+        result: {
+          columns: ['id', 'name'],
+          values: {
+            id: [...Array(30)].map((x, i) => i),
+            name: [...Array(30)].map((x, i) => `name-${i}`)
+          }
+        }
+      }
+    })
+
+    // Open cell value panel
+    const viewValueBtn = createWrapper(
+      wrapper.findComponent({ name: 'viewCellValueIcon' }).vm.$parent
+    )
+    await viewValueBtn.trigger('click')
+
+    // Click on 'name-1' cell
+    const rows = wrapper.findAll('table tbody tr')
+    await rows.at(1).findAll('td').at(1).trigger('click')
+
+    expect(wrapper.find('.value-body').text()).to.equals('name-1')
+
+    // Go to record view
+    const vierRecordBtn = createWrapper(
+      wrapper.findComponent({ name: 'rowIcon' }).vm.$parent
+    )
+    await vierRecordBtn.trigger('click')
+
+    // 'name-1' is selected
+    expect(wrapper.find('.value-body').text()).to.equals('name-1')
+    let selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('name-1')
+
+    // Go to last record
+    await wrapper.find('.icon-btn.last').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.value-body').text()).to.equals('name-29')
+
+    // Go to '29' with up arrow key
+    await wrapper.find('table').trigger('keydown.up')
+    expect(wrapper.find('.value-body').text()).to.equals('29')
+
+    // Go to regular view
+    await vierRecordBtn.trigger('click')
+
+    // '29' is selected
+    expect(wrapper.find('.value-body').text()).to.equals('29')
+    selectedCell = wrapper
+      .find('.sqliteviz-table tbody td[aria-selected="true"]')
+    expect(selectedCell.text()).to.equals('29')
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.spec.js

@@ -0,0 +1,44 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import ValueViewer from '@/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer'
+import sinon from 'sinon'
+
+describe('ValueViewer.vue', () => {
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it('shows value in text mode', async () => {
+    const wrapper = mount(ValueViewer, {
+      propsData: {
+        cellValue: 'foo'
+      }
+    })
+
+    expect(wrapper.find('.value-body').text()).to.equals('foo')
+  })
+
+  it('shows error in json mode if the value is not json', async () => {
+    const wrapper = mount(ValueViewer, {
+      propsData: {
+        cellValue: 'foo'
+      }
+    })
+    await wrapper.find('button.json').trigger('click')
+    expect(wrapper.find('.value-body').text()).to.equals('Can\'t parse JSON.')
+  })
+
+  it('copy to clipboard', async () => {
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves()
+    const wrapper = mount(ValueViewer, {
+      propsData: {
+        cellValue: 'foo'
+      }
+    })
+
+    await wrapper.find('button.copy').trigger('click')
+
+    expect(window.navigator.clipboard.writeText.calledOnceWith('foo'))
+      .to.equal(true)
+  })
+})

tests/views/Main/Workspace/Tabs/Tab/SqlEditor/hint.spec.js

@@ -138,15 +138,37 @@ describe('hint.js', () => {
     'getHints returns [ ] if there is only one option and token is completed with this option',
     () => {
       // mock CM.hint.sql and editor
-      sinon.stub(CM.hint, 'sql').returns({ list: [{ text: 'SELECT' }] })
+      sinon.stub(CM.hint, 'sql').returns({
+        list: [{ text: 'SELECT' }],
+        from: null, // from/to doesn't metter because getRange is mocked
+        to: null
+      })
+
       const editor = {
-        getTokenAt () {
-          return {
-            string: 'select',
-            type: 'keyword'
+        getRange () {
+          return 'select'
+        }
+      }
+
+      const hints = getHints(editor, {})
+      expect(hints.list).to.eql([])
+    }
+  )
+
+  it(
+    'getHints returns [ ] if there is only one string option and token ' +
+    'is completed with this option',
+    () => {
+      // mock CM.hint.sql and editor
+      sinon.stub(CM.hint, 'sql').returns({
+        list: ['house.name'],
+        from: null, // from/to doesn't metter because getRange is mocked
+        to: null
+      })
+      const editor = {
+        getRange () {
+          return 'house.name'
         }
-        },
-        getCursor: sinon.stub()
       }
 
       const hints = getHints(editor, {})
@@ -160,15 +182,11 @@ describe('hint.js', () => {
       { text: 'SELECT' },
       { text: 'ST' }
     ]
-    sinon.stub(CM.hint, 'sql').returns({ list })
+    sinon.stub(CM.hint, 'sql').returns({ list, from: null, to: null })
     const editor = {
-      getTokenAt () {
-        return {
-          string: 'se',
-          type: 'keyword'
+      getRange () {
+        return 'se'
       }
-      },
-      getCursor: sinon.stub()
     }
 
     const hints = getHints(editor, {})
@@ -182,15 +200,11 @@ describe('hint.js', () => {
     () => {
       // mock CM.hint.sql and editor
       const list = [{ text: 'SELECT' }]
-      sinon.stub(CM.hint, 'sql').returns({ list })
+      sinon.stub(CM.hint, 'sql').returns({ list, from: null, to: null })
       const editor = {
-        getTokenAt () {
-          return {
-            string: 'sele',
-            type: 'keyword'
+        getRange () {
+          return 'sele'
         }
-        },
-        getCursor: sinon.stub()
       }
 
       const hints = getHints(editor, {})

tests/views/Main/Workspace/Tabs/Tab/Tab.spec.js

@@ -31,13 +31,23 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
+        tab: {
           id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewType: 'chart',
-        initViewOptions: [],
-        tabIndex: 0,
-        isPredefined: false
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
       }
     })
 
@@ -60,7 +70,23 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1
+        tab: {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
       }
     })
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
@@ -79,40 +105,51 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1
+        tab: {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0
+        }
       }
     })
 
     expect(wrapper.find('.tab-content-container').isVisible()).to.equal(false)
   })
 
-  it('Calls setCurrentTab when becomes active', async () => {
-    // mock store state
-    const state = {
-      currentTabId: 0
-    }
-    sinon.spy(mutations, 'setCurrentTab')
-    const store = new Vuex.Store({ state, mutations })
-
-    // mount the component
-    const wrapper = mount(Tab, {
-      store,
-      stubs: ['chart'],
-      propsData: {
-        id: 1
-      }
-    })
-
-    state.currentTabId = 1
-    await wrapper.vm.$nextTick()
-    expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
-  })
-
   it('Update tab state when a query is changed', async () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0,
+          isSaved: true
+        }
       ],
       currentTabId: 1
     }
@@ -124,13 +161,7 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab: state.tabs[0]
       }
     })
     await wrapper.findComponent({ name: 'SqlEditor' }).vm.$emit('input', ' limit 100')
@@ -141,7 +172,24 @@ describe('Tab.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'SELECT * FROM foo', chart: [], isSaved: true }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'SELECT * FROM foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isPredefined: false,
+          result: null,
+          isGettingResults: false,
+          error: null,
+          time: 0,
+          isSaved: true
+        }
       ],
       currentTabId: 1
     }
@@ -153,13 +201,7 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab: state.tabs[0]
       }
     })
     await wrapper.findComponent({ name: 'DataView' }).vm.$emit('update')
@@ -169,29 +211,38 @@ describe('Tab.vue', () => {
   it('Shows .result-in-progress message when executing query', async () => {
     // mock store state
     const state = {
-      currentTabId: 1,
-      db: {
-        execute () { return new Promise(() => {}) }
-      }
+      currentTabId: 1
     }
 
     const store = new Vuex.Store({ state, mutations })
     // mount the component
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
     const wrapper = mount(Tab, {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab
       }
     })
 
-    wrapper.vm.execute()
+    tab.isGettingResults = true
     await wrapper.vm.$nextTick()
     expect(wrapper.find('.run-result-panel .result-in-progress').isVisible()).to.equal(true)
   })
@@ -199,30 +250,42 @@ describe('Tab.vue', () => {
   it('Shows error when executing query ends with error', async () => {
     // mock store state
     const state = {
-      currentTabId: 1,
-      db: {
-        execute: sinon.stub().rejects(new Error('There is no table foo')),
-        refreshSchema: sinon.stub().resolves()
-      }
+      currentTabId: 1
     }
 
     const store = new Vuex.Store({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
     // mount the component
     const wrapper = mount(Tab, {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab
       }
     })
 
-    await wrapper.vm.execute()
+    tab.error = {
+      type: 'error',
+      message: 'There is no table foo'
+    }
+    await wrapper.vm.$nextTick()
     expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
     expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).isVisible()).to.equal(true)
@@ -239,11 +302,26 @@ describe('Tab.vue', () => {
     }
     // mock store state
     const state = {
-      currentTabId: 1,
-      db: {
-        execute: sinon.stub().resolves(result),
-        refreshSchema: sinon.stub().resolves()
+      currentTabId: 1
     }
+
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
     }
 
     const store = new Vuex.Store({ state, mutations })
@@ -253,83 +331,50 @@ describe('Tab.vue', () => {
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab
       }
     })
 
-    await wrapper.vm.execute()
+    tab.result = result
+    await wrapper.vm.$nextTick()
     expect(wrapper.find('.run-result-panel .result-before').isVisible()).to.equal(false)
     expect(wrapper.find('.run-result-panel .result-in-progress').exists()).to.equal(false)
     expect(wrapper.findComponent({ name: 'logs' }).exists()).to.equal(false)
     expect(wrapper.findComponent({ name: 'SqlTable' }).vm.dataSet).to.eql(result)
   })
 
-  it('Updates schema after query execution', async () => {
-    const result = {
-      columns: ['id', 'name'],
-      values: {
-        id: [],
-        name: []
-      }
-    }
-
-    // mock store state
-    const state = {
-      currentTabId: 1,
-      dbName: 'fooDb',
-      db: {
-        execute: sinon.stub().resolves(result),
-        refreshSchema: sinon.stub().resolves()
-      }
-    }
-
-    const store = new Vuex.Store({ state, mutations })
-
-    // mount the component
-    const wrapper = mount(Tab, {
-      store,
-      stubs: ['chart'],
-      propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
-      }
-    })
-
-    await wrapper.vm.execute()
-    expect(state.db.refreshSchema.calledOnce).to.equal(true)
-  })
-
   it('Switches views', async () => {
     const state = {
-      currentTabId: 1,
-      db: {}
+      currentTabId: 1
     }
 
     const store = new Vuex.Store({ state, mutations })
 
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
     const wrapper = mount(Tab, {
       attachTo: place,
       store,
       stubs: ['chart'],
       propsData: {
-        id: 1,
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
+        tab
       }
     })
 
@@ -361,4 +406,119 @@ describe('Tab.vue', () => {
     expect(wrapper.find('.above .sql-editor-panel').exists()).to.equal(true)
     expect(wrapper.find('.bottomPane .run-result-panel').exists()).to.equal(true)
   })
+
+  it('Maximize top panel if maximized panel is above', () => {
+    const state = {
+      currentTabId: 1
+    }
+    const store = new Vuex.Store({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      maximize: 'sqlEditor',
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      store,
+      stubs: ['chart'],
+      propsData: {
+        tab
+      }
+    })
+
+    expect(wrapper.find('.above').element.parentElement.style.height)
+      .to.equal('100%')
+  })
+
+  it('Maximize bottom panel if maximized panel is below', () => {
+    const state = {
+      currentTabId: 1
+    }
+    const store = new Vuex.Store({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      maximize: 'table',
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      store,
+      stubs: ['chart'],
+      propsData: {
+        tab
+      }
+    })
+
+    expect(wrapper.find('.bottomPane').element.parentElement.style.height)
+      .to.equal('100%')
+  })
+
+  it('Panel size is 50 is nothing to maximize', () => {
+    const state = {
+      currentTabId: 1
+    }
+    const store = new Vuex.Store({ state, mutations })
+    const tab = {
+      id: 1,
+      name: 'foo',
+      query: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
+      viewType: 'chart',
+      viewOptions: {},
+      layout: {
+        sqlEditor: 'above',
+        table: 'bottom',
+        dataView: 'hidden'
+      },
+      isPredefined: false,
+      result: null,
+      isGettingResults: false,
+      error: null,
+      time: 0,
+      isSaved: true
+    }
+
+    const wrapper = mount(Tab, {
+      attachTo: place,
+      store,
+      stubs: ['chart'],
+      propsData: {
+        tab
+      }
+    })
+
+    expect(wrapper.find('.above').element.parentElement.style.height)
+      .to.equal('50%')
+    expect(wrapper.find('.bottomPane').element.parentElement.style.height)
+      .to.equal('50%')
+  })
 })

tests/views/Main/Workspace/Tabs/Tabs.spec.js

@@ -94,8 +94,33 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -125,8 +150,33 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -166,8 +216,33 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }
@@ -211,8 +286,33 @@ describe('Tabs.vue', () => {
     // mock store state
     const state = {
       tabs: [
-        { id: 1, name: 'foo', query: 'select * from foo', chart: [], isSaved: true },
-        { id: 2, name: null, tempName: 'Untitled', query: '', chart: [], isSaved: false }
+        {
+          id: 1,
+          name: 'foo',
+          query: 'select * from foo',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: true
+        },
+        {
+          id: 2,
+          name: null,
+          tempName: 'Untitled',
+          query: '',
+          viewType: 'chart',
+          viewOptions: {},
+          layout: {
+            sqlEditor: 'above',
+            table: 'bottom',
+            dataView: 'hidden'
+          },
+          isSaved: false
+        }
       ],
       currentTabId: 2
     }

tests/views/Main/Workspace/Workspace.spec.js

@@ -12,9 +12,11 @@ describe('Workspace.vue', () => {
       tabs: []
     }
     const store = new Vuex.Store({ state, actions, mutations })
+    const $route = { path: '/workspace', query: {} }
     mount(Workspace, {
       store,
-      stubs: ['router-link']
+      stubs: ['router-link'],
+      mocks: { $route }
     })
 
     expect(state.tabs[0].query).to.include('Your database is empty.')
@@ -24,4 +26,20 @@ describe('Workspace.vue', () => {
     expect(state.tabs[0].viewOptions).to.equal(undefined)
     expect(state.tabs[0].isSaved).to.equal(false)
   })
+
+  it('Collapse schema if hide_schema is 1', () => {
+    const state = {
+      db: {},
+      tabs: []
+    }
+    const store = new Vuex.Store({ state, actions, mutations })
+    const $route = { path: '/workspace', query: { hide_schema: '1' } }
+    const vm = mount(Workspace, {
+      store,
+      stubs: ['router-link'],
+      mocks: { $route }
+    })
+
+    expect(vm.find('#schema-container').element.offsetWidth).to.equal(0)
+  })
 })

vue.config.js

@@ -41,5 +41,12 @@ module.exports = {
       .end()
 
     config.module.rule('js').exclude.add(/worker\.js$/)
+
+    config
+      .plugin('html')
+      .tap(args => {
+        args[0].minify = false
+        return args
+      })
   }
 }