fix test for firefox #110

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sqliteviz",
-  "version": "0.18.1",
+  "version": "0.23.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "sqliteviz",
-      "version": "0.18.1",
+      "version": "0.23.1",
       "license": "Apache-2.0",
       "dependencies": {
         "codemirror": "^5.57.0",
@@ -15,7 +15,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",
@@ -50,6 +50,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",
@@ -5248,9 +5249,9 @@
       "dev": true
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001352",
+      "version": "1.0.30001488",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
-      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
+      "integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
       "dev": true,
       "funding": [
         {
@@ -5260,6 +5261,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -10086,6 +10091,12 @@
       "resolved": "https://registry.npmjs.org/flip-pixels/-/flip-pixels-1.0.2.tgz",
       "integrity": "sha512-oXbJGbjDnfJRWPC7Va38EFhd+A8JWE5/hCiKcK8qjCdbLj9DTpsq6MEudwpRTH+V4qq+Jw7d3pUgQdSr3x3mTA=="
     },
+    "node_modules/flush-promises": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flush-promises/-/flush-promises-1.0.2.tgz",
+      "integrity": "sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==",
+      "dev": true
+    },
     "node_modules/flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -16370,9 +16381,9 @@
       "dev": true
     },
     "node_modules/papaparse": {
-      "version": "5.3.2",
+      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
-      "integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw=="
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
     },
     "node_modules/parallel-transform": {
       "version": "1.2.0",
@@ -27489,7 +27500,6 @@
       "integrity": "sha512-iFv9J3F5VKUPcbx+TqW5qhGmAVyXQxPRpKpPOuTLFIVTzg+iwJnrqVbL4kJU5ECGDxPESW2oCVgxv9bTlDPu7w==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -27502,7 +27512,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }
@@ -29627,9 +29636,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001352",
+      "version": "1.0.30001488",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001488.tgz",
-      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
+      "integrity": "sha512-NORIQuuL4xGpIy6iCCQGN4iFjlBXtfKWIenlUuyZJumLRIindLb7wXM+GO8erEhb7vXfcnf4BAg2PrSDN5TNLQ==",
       "dev": true
     },
     "canvas-fit": {
@@ -33656,6 +33665,12 @@
       "resolved": "https://registry.npmjs.org/flip-pixels/-/flip-pixels-1.0.2.tgz",
       "integrity": "sha512-oXbJGbjDnfJRWPC7Va38EFhd+A8JWE5/hCiKcK8qjCdbLj9DTpsq6MEudwpRTH+V4qq+Jw7d3pUgQdSr3x3mTA=="
     },
+    "flush-promises": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flush-promises/-/flush-promises-1.0.2.tgz",
+      "integrity": "sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -38840,9 +38855,9 @@
       "dev": true
     },
     "papaparse": {
-      "version": "5.3.2",
+      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
-      "integrity": "sha512-6dNZu0Ki+gyV0eBsFKJhYr+MdQYAzFUGlBMNj3GNrmHxmz1lfRa24CjFObPXtjcetlOv5Ad299MhIK0znp3afw=="
+      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
     },
     "parallel-transform": {
       "version": "1.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.21.1",
+  "version": "0.23.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",

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/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/index.js

@@ -77,7 +77,7 @@ 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',

src/lib/storedInquiries/index.js

@@ -33,17 +33,16 @@ export default {
   },
 
   isTabNeedName (inquiryTab) {
-    const isFromScratch = !inquiryTab.initName
+    return inquiryTab.isPredefined || !inquiryTab.name
-    return inquiryTab.isPredefined || isFromScratch
   },
 
   save (inquiryTab, newName) {
     const value = {
       id: inquiryTab.isPredefined ? nanoid() : inquiryTab.id,
       query: inquiryTab.query,
-      viewType: inquiryTab.$refs.dataView.mode,
+      viewType: inquiryTab.dataView.mode,
-      viewOptions: inquiryTab.$refs.dataView.getOptionsForSave(),
+      viewOptions: inquiryTab.dataView.getOptionsForSave(),
-      name: newName || inquiryTab.initName
+      name: newName || inquiryTab.name
     }
 
     // Get inquiries from local storage

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/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) {
+  async addTab ({ state }, inquiry = {}) {
-    const tab = data ? JSON.parse(JSON.stringify(data)) : {}
+    // add new tab only if it was not already opened
-    // If no data then create a new blank one...
+    if (!state.tabs.some(openedTab => openedTab.id === inquiry.id)) {
-    // No data.id means to create new tab, but not blank,
+      const tab = new Tab(state, JSON.parse(JSON.stringify(inquiry)))
-    // 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)) {
       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 }) {
+  updateTab (state, { tab, newValues }) {
-    const tab = state.tabs[index]
+    const { name, id, query, viewType, viewOptions, isSaved } = newValues
     const oldId = tab.id
 
     if (id && state.currentTabId === oldId) {
@@ -26,13 +24,12 @@ 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) {
@@ -46,12 +43,20 @@ export default {
     state.tabs.splice(index, 1)
   },
   setCurrentTabId (state, id) {
+    try {
       state.currentTabId = id
-  },
+      state.currentTab = state.tabs.find(tab => tab.id === id)
-  setCurrentTab (state, tab) {
+    } catch (e) {
-    state.currentTab = tab
+      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/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,6 +164,7 @@ 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'
 
@@ -169,7 +177,8 @@ export default {
     DeleteIcon,
     CloseIcon,
     TextField,
-    CheckBox
+    CheckBox,
+    LoadingIndicator
   },
   mixins: [tooltipMixin],
   data () {
@@ -248,15 +257,21 @@ export default {
       }
     }
   },
-  created () {
+  async created () {
-    storedInquiries.readPredefinedInquiries()
-      .then(inquiries => {
-        this.$store.commit('updatePredefinedInquiries', inquiries)
-      })
-      .catch(console.error)
-      .finally(() => {
     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)
@@ -323,12 +338,14 @@ export default {
       storedInquiries.updateStorage(this.inquiries)
 
       // update tab, if renamed inquiry is opened
-      const tabIndex = this.findTabIndex(processedInquiry.id)
+      const tab = this.$store.state.tabs
-      if (tabIndex >= 0) {
+        .find(tab => tab.id === processedInquiry.id)
+      if (tab) {
         this.$store.commit('updateTab', {
-          index: tabIndex,
+          tab,
-          name: this.newName,
+          newValues: {
-          id: processedInquiry.id
+            name: this.newName
+          }
         })
       }
       // hide dialog
@@ -352,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)
+        const tab = this.$store.state.tabs
-        if (tabIndex >= 0) {
+          .find(tab => tab.id === this.processedInquiryId)
-          this.$store.commit('deleteTab', tabIndex)
+        if (tab) {
+          this.$store.commit('deleteTab', tab)
         }
 
         // Clear checkbox
@@ -368,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
@@ -380,9 +400,6 @@ 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) {
       storedInquiries.export(inquiryList, fileName)
     },
@@ -441,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

@@ -80,19 +80,10 @@ export default {
       return this.$store.state.currentTab
     },
     isSaved () {
-      if (!this.currentInquiry) {
+      return this.currentInquiry && this.currentInquiry.isSaved
-        return false
-      }
-      const tabIndex = this.currentInquiry.tabIndex
-      const tab = this.$store.state.tabs[tabIndex]
-      return tab && tab.isSaved
     },
     isPredefined () {
-      if (this.currentInquiry) {
+      return this.currentInquiry && this.currentInquiry.isPredefined
-        return this.currentInquiry.isPredefined
-      } else {
-        return false
-      }
     },
     runDisabled () {
       return this.currentInquiry && (!this.$store.state.db || !this.currentInquiry.query)
@@ -145,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:

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

@@ -66,7 +66,8 @@ export default {
       notifyOnLogging: 1
     })
     this.$watch(
-      () => this.state.data.map(trace => `${trace.type}-${trace.mode}`)
+      () => this.state && this.state.data && this.state.data
+        .map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
         .join(','),
       (value) => {
         events.send('viz_plotly.render', null, {

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

@@ -3,44 +3,45 @@
     <splitpanes
       class="query-results-splitter"
       horizontal
-      :before="{ size: 50, max: 100 }"
+      :before="{ size: topPaneSize, max: 100 }"
-      :after="{ size: 50, 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"
+        v-model="tab.query"
-        :is-getting-results="isGettingResults"
+        :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"
+        :result="tab.result"
-        :is-getting-results="isGettingResults"
+        :is-getting-results="tab.isGettingResults"
-        :error="error"
+        :error="tab.error"
-        :time="time"
+        :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"
+        :data-source="(tab.result && tab.result.values) || null"
-        :init-options="initViewOptions"
+        :init-options="tab.viewOptions"
-        :init-mode="initViewType"
+        :init-mode="tab.viewType"
         ref="dataView"
         @switchTo="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
@@ -54,15 +55,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: [
+  props: {
-    'id', 'initName', 'initQuery', 'initViewOptions', 'tabIndex', 'isPredefined', 'initViewType'
+    tab: Object
-  ],
+  },
   components: {
     SqlEditor,
     DataView,
@@ -72,21 +73,14 @@ export default {
   },
   data () {
     return {
-      query: this.initQuery,
+      topPaneSize: this.tab.maximize
-      result: null,
+        ? this.tab.layout[this.tab.maximize] === 'above' ? 100 : 0
-      isGettingResults: false,
+        : 50
-      error: null,
-      time: 0,
-      layout: {
-        sqlEditor: 'above',
-        table: 'bottom',
-        dataView: 'hidden'
-      }
     }
   },
   computed: {
     isActive () {
-      return this.id === this.$store.state.currentTabId
+      return this.tab.id === this.$store.state.currentTabId
     }
   },
   watch: {
@@ -94,54 +88,34 @@ export default {
       immediate: true,
       async handler () {
         if (this.isActive) {
-          this.$store.commit('setCurrentTab', this)
           await this.$nextTick()
           this.$refs.sqlEditor.focus()
         }
       }
     },
-    query () {
+    'tab.query' () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
+      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]
+      const fromPosition = this.tab.layout[from]
-      this.layout[from] = this.layout[to]
+      this.tab.layout[from] = this.tab.layout[to]
-      this.layout[to] = fromPosition
+      this.tab.layout[to] = fromPosition
 
       events.send('inquiry.panel', null, { panel: to })
     },
     onDataViewUpdate () {
-      this.$store.commit('updateTab', { index: this.tabIndex, isSaved: false })
+      this.$store.commit('updateTab', {
-    },
+        tab: this.tab,
-    async execute () {
+        newValues: { isSaved: false }
-      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())
-
-        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' })
-      }
-      state.db.refreshSchema()
-      this.isGettingResults = 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"
+      :tab="tab"
-      :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"
     />
     <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
+          closingTab !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          ? (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
+          closingTab !== null
-          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          ? (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) {
+    beforeCloseTab (tab) {
-      this.closingTabIndex = index
+      this.closingTab = tab
-      if (!this.tabs[index].isSaved) {
+      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', tab)
-      this.$store.commit('deleteTab', index)
     },
-    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 }"
+      :before="{ size: schemaWidth, max: 30 }"
-      :after="{ size: 80, max: 100 }"
+      :after="{ size: 100 - schemaWidth, max: 100 }"
+      :default="{ before: 20, after: 80 }"
     >
       <template #left-pane>
         <schema/>
@@ -28,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',

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/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,
+      name: null,
-      $refs: {
       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,
+      name: null,
-      $refs: {
       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',
+      name: 'foo predefined',
-      $refs: {
       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/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 = {
+    const newValues = {
-      index: 0,
       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 = {
+    const newValues = {
-      index: 0,
       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 = {
+    const newValues = {
-      index: 0,
       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 = {
+    const newValues = {
-      index: 0,
       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')
@@ -182,7 +179,7 @@ describe('mutations', () => {
       currentTabId: 1
     }
 
-    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)
@@ -214,7 +211,7 @@ describe('mutations', () => {
       currentTabId: 2
     }
 
-    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)
@@ -256,7 +253,7 @@ describe('mutations', () => {
       currentTabId: 2
     }
 
-    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)
@@ -279,45 +276,14 @@ describe('mutations', () => {
       currentTabId: 1
     }
 
-    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)
-  })
-
   it('setCurrentTabId', () => {
     const state = {
+      tabs: [{ id: 1 }, { id: 2 }],
       currentTabId: 1
     }
 
@@ -325,15 +291,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 +334,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 = {
+    const tab = {
-      currentTab: {
+      id: 1,
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ 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 = {
+    const tab = {
-      currentTab: {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ 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 = {
+    const tab = {
-      currentTab: {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ 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 = {
+      const tab = {
-        currentTab: {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
+        isSaved: false
-        },
+      }
-        tabs: [{ 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 = {
+      const tab = {
-        currentTab: {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
+        isSaved: false
-        },
+      }
-        tabs: [{ 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 = {
+    const tab = {
-      currentTab: {
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ 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 = {
+      const tab = {
-        currentTab: {
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
+        isSaved: false
-        },
+      }
-        tabs: [{ 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 = {
+      const tab = {
-        currentTab: {
+        id: 1,
+        name: 'foo',
         query: 'SELECT * FROM foo',
         execute: sinon.stub(),
-          tabIndex: 0
+        isSaved: false
-        },
+      }
-        tabs: [{ id: 1, name: 'foo', 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 = {
+    const tab = {
-      currentTab: {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', 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 = {
+    const tab = {
-      currentTab: {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', 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 = {
+    const tab = {
-      currentTab: {
+      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: []
+      viewOptions: [],
-      },
+      isSaved: false
-      tabs: [{ id: 1, name: 'foo', isSaved: false, isPredefined: true }],
+    }
+    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 = {
+    const tab = {
-      currentTab: {
+      id: 1,
+      name: null,
+      tempName: 'Untitled',
       query: 'SELECT * FROM foo',
       execute: sinon.stub(),
-        tabIndex: 0
+      isSaved: false
-      },
+    }
-      tabs: [{ id: 1, name: null, tempName: 'Untitled', isSaved: false }],
+    const state = {
+      currentTab: tab,
+      tabs: [tab],
       db: {}
     }
     const mutations = {

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',
+          name: 'foo',
-        initQuery: 'SELECT * FROM foo',
+          query: 'SELECT * FROM foo',
-        initViewType: 'chart',
+          viewType: 'chart',
-        initViewOptions: [],
+          viewOptions: {},
-        tabIndex: 0,
+          layout: {
-        isPredefined: false
+            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,
+        tab: state.tabs[0]
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
     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,
+        tab: state.tabs[0]
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
     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,
+      currentTabId: 1
-      db: {
-        execute () { return new Promise(() => {}) }
-      }
     }
 
     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,
+        tab
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
 
-    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,
+      currentTabId: 1
-      db: {
-        execute: sinon.stub().rejects(new Error('There is no table foo')),
-        refreshSchema: sinon.stub().resolves()
-      }
     }
 
     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,
+        tab
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
 
-    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,
+      currentTabId: 1
-      db: {
-        execute: sinon.stub().resolves(result),
-        refreshSchema: sinon.stub().resolves()
     }
+
+    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,
+        tab
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
 
-    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,
+      currentTabId: 1
-      db: {}
     }
 
     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,
+        tab
-        initName: 'foo',
-        initQuery: 'SELECT * FROM foo; CREATE TABLE bar(a,b);',
-        initViewOptions: [],
-        initViewType: 'chart',
-        tabIndex: 0,
-        isPredefined: false
       }
     })
 
@@ -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)
+  })
 })