Initial commit

src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+</style>

src/assets/styles/colors.css

@@ -0,0 +1,13 @@
+:root {
+    --color-bg-light: #F3F6FA;
+    --color-accent: #119DFF;
+    --color-accent-shade: #0D76BF;
+    --color-border-light: #DFE8F3;
+    --color-text-base: #506784;
+    --color-text-white: #ffffff;
+    --shadow: 0 1px 2px rgba(43, 63, 95, 0.7);
+  }
+  body {
+    margin: 0;
+  }
+

src/assets/styles/scrollbars.css

@@ -0,0 +1,19 @@
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }

src/components/MainMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <nav>
+    <div>
+      <router-link to="/editor">Editor</router-link>
+      <router-link to="/my-queries">My queries</router-link>
+    </div>
+    <div>
+      <button>Save</button>
+      <button>Create</button>
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'MainMenu'
+}
+</script>
+<style scoped>
+nav {
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-bg-light);
+  border-bottom: 1px solid var(--color-border-light);
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+</style>

src/components/Schema.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <table-description
+      v-for="(table, index) in schema"
+      :key="index"
+      :name="table[0]"
+      :sql="table[1]"
+    />
+  </div>
+</template>
+
+<script>
+import TableDescription from '@/components/TableDescription'
+
+export default {
+  name: 'Schema',
+  components: { TableDescription },
+  props: ['schema']
+}
+</script>

src/components/SqlTable.vue

@@ -0,0 +1,35 @@
+<template>
+  <vue-good-table v-if="data" :columns="columns" :rows="rows"/>
+</template>
+
+<script>
+import 'vue-good-table/dist/vue-good-table.css'
+import { VueGoodTable } from 'vue-good-table'
+
+export default {
+  name: 'SqlTable',
+  components: { VueGoodTable },
+  props: ['data'],
+  computed: {
+    columns () {
+      const columns = []
+      this.data.columns.forEach(column => {
+        columns.push({ label: column, field: column })
+      })
+      return columns
+    },
+    rows () {
+      const rows = []
+      this.data.values.forEach(row => {
+        const newRow = {}
+        row.forEach((value, index) => {
+          const column = this.data.columns[index]
+          newRow[column] = value
+        })
+        rows.push(newRow)
+      })
+      return rows
+    }
+  }
+}
+</script>

src/components/TableDescription.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div @click="colVisible = !colVisible" class="table-name">{{ name }}</div>
+    <div v-show="colVisible" class="columns">
+      <div v-for="(col, index) in columns" :key="index">
+        {{ col.name }}, {{ col.type }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import sqliteParser from 'sqlite-parser'
+
+export default {
+  name: 'TableDescription',
+  props: ['name', 'sql'],
+  data () {
+    return {
+      colVisible: false
+    }
+  },
+  computed: {
+    ast () {
+      return sqliteParser(this.sql)
+    },
+    columns () {
+      const columns = []
+      this.ast.statement[0].definition.forEach(item => {
+        if (item.variant === 'column') {
+          let type = item.datatype.variant
+          if (item.datatype.args) {
+            type = type + '(' + item.datatype.args.expression[0].value
+            if (item.datatype.args.expression.length === 2) {
+              type = type + ', ' + item.datatype.args.expression[1].value
+            }
+            type = type + ')'
+          }
+          columns.push({ name: item.name, type: type })
+        }
+      })
+      return columns
+    }
+  }
+}
+</script>
+<style scoped>
+.table-name:hover {
+  cursor: pointer;
+}
+.columns {
+  margin-left: 30px;
+}
+</style>

src/main.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import VueReact from 'vue-react'
+import PlotlyEditor from 'react-chart-editor'
+
+import '@/assets/styles/colors.css'
+
+Vue.use(VueReact)
+Vue.react('PlotlyEditor', PlotlyEditor)
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,39 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Editor from '../views/Editor'
+import MyQueries from '../views/MyQueries'
+import DbUpload from '../views/DbUpload'
+import MainView from '../views/MainView'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Welcome',
+    component: DbUpload
+  },
+  {
+    path: '/',
+    name: 'MainView',
+    component: MainView,
+    children: [
+      {
+        path: '/editor',
+        name: 'Editor',
+        component: Editor
+      },
+      {
+        path: '/my-queries',
+        name: 'MyQueries',
+        component: MyQueries
+      }
+    ]
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    schema: null,
+    dbFile: null,
+    worker: new Worker('/js/worker.sql-wasm.js')
+  },
+  mutations: {
+    saveSchema (state, schema) {
+      state.schema = schema
+    },
+    saveDbFile (state, file) {
+      state.dbFile = file
+    }
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/DbUpload.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <label class="button">
+      Load an SQLite database file: <input type='file' ref='dbfile' @change="loadDb">
+    </label>
+    <div id="error" class="error"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DbUpload',
+  data () {
+    return {
+      worker: this.$store.state.worker
+    }
+  },
+  created () {
+    // Open a database
+    this.$store.state.worker.postMessage({ action: 'open' })
+  },
+  methods: {
+    loadDb () {
+      const f = this.$refs.dbfile.files[0]
+      const r = new FileReader()
+      r.onload = () => {
+        this.worker.onmessage = () => {
+          const getSchemaSql = `
+            SELECT name, sql
+            FROM sqlite_master
+            WHERE type='table' AND name NOT LIKE 'sqlite_%';`
+          this.worker.onmessage = event => {
+            this.$store.commit('saveSchema', event.data.results[0].values)
+            // this.schema = event.data.results[0].values
+            this.$router.push('/editor')
+          }
+          this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
+        }
+        this.$store.commit('saveDbFile', r.result)
+        try {
+          this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
+        } catch (exception) {
+          this.worker.postMessage({ action: 'open', buffer: r.result })
+        }
+      }
+      r.readAsArrayBuffer(f)
+    }
+  }
+}
+</script>

src/views/Editor.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div style="display:flex">
+      <div>
+        <schema :schema="schema"/>
+      </div>
+      <div>
+        <codemirror v-model="code" :options="cmOptions" @changes="onCmChange" />
+        <button id="execute" class="button" @click="execEditorContents">Execute</button>
+        <label class="button">
+          Load an SQLite database file: <input type='file' ref='dbfile' @change="loadDb">
+        </label>
+
+        <div id="error" class="error"></div>
+
+        <pre ref="output" id="output">Results will be displayed here</pre>
+
+        <sql-table :data="result" />
+      </div>
+    </div>
+    <PlotlyEditor
+      :data="state.data"
+      :layout="state.layout"
+      :frames="state.frames"
+      :config="{ editable: true }"
+      :dataSources="dataSources"
+      :dataSourceOptions="dataSourceOptions"
+      :plotly="plotly"
+      @onUpdate="update"
+      :useResizeHandler="true"
+      :debug="true"
+      :advancedTraceTypeSelector="true"
+    />
+  </div>
+</template>
+
+<script>
+import SqlTable from '@/components/SqlTable'
+import Schema from '@/components/Schema'
+
+import plotly from 'plotly.js/dist/plotly'
+import 'react-chart-editor/lib/react-chart-editor.min.css'
+
+import CM from 'codemirror'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/theme/neo.css'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/sql-hint.js'
+
+export default {
+  name: 'Editor',
+  components: {
+    codemirror,
+    SqlTable,
+    Schema
+  },
+  data () {
+    return {
+      plotly: plotly,
+      state: {
+        data: [],
+        layout: {},
+        frames: []
+      },
+      code: 'select * from albums',
+      cmOptions: {
+        // codemirror options
+        tabSize: 4,
+        mode: 'text/x-mysql',
+        theme: 'neo',
+        lineNumbers: true,
+        line: true
+      },
+      result: null,
+      schema: null,
+      worker: this.$store.state.worker
+    }
+  },
+  computed: {
+    dataSources () {
+      if (!this.result) {
+        return {}
+      }
+      const dataSorces = {}
+      const matrix = this.result.values
+      const [row] = matrix
+      const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
+      this.result.columns.forEach((column, index) => {
+        dataSorces[column] = transposedMatrix[index]
+      })
+      return dataSorces
+    },
+    dataSourceOptions () {
+      return Object.keys(this.dataSources).map(name => ({
+        value: name,
+        label: name
+      }))
+    }
+  },
+  created () {
+    // Open a database
+    // worker.postMessage({ action: 'open' })
+    // let dbFile = this.$store.state.dbFile
+    // console.log(dbFile)
+    /* try {
+      worker.postMessage({ action: 'open', buffer: this.$store.state.dbFile }, [this.$store.state.dbFile])
+    } catch (exception) {
+      worker.postMessage({ action: 'open', buffer: this.$store.state.dbFile })
+    } */
+    this.schema = this.$store.state.schema
+  },
+  methods: {
+    update (data, layout, frames) {
+      this.state = { data, layout, frames }
+      console.log(this.state)
+    },
+    onCmChange (editor) {
+      // Don't show autocomplete after a space or semicolon
+      const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
+      if (!ch || ch === ' ' || ch === ';') {
+        return
+      }
+
+      const hintOptions = {
+      //   tables: this.state.tables,
+        completeSingle: false,
+        completeOnSingleClick: true
+      }
+
+      // editor.hint.sql is defined when importing codemirror/addon/hint/sql-hint
+      // (this is mentioned in codemirror addon documentation)
+      // Reference the hint function imported here when including other hint addons
+      // or supply your own
+      CM.showHint(editor, CM.hint.sql, hintOptions)
+    },
+    // Run a command in the database
+    execute (commands) {
+      this.worker.onmessage = (event) => {
+        // if it was more than one select - take only the first one
+        this.result = event.data.results[0]
+        if (!this.result) {
+          console.log(event.data.error)
+          return
+        }
+
+        this.$refs.output.innerHTML = ''
+      }
+      this.worker.postMessage({ action: 'exec', sql: commands })
+      this.$refs.output.textContent = 'Fetching results...'
+    },
+    execEditorContents () {
+      this.execute(this.code + ';')
+    },
+    loadDb () {
+      const f = this.$refs.dbfile.files[0]
+      const r = new FileReader()
+      r.onload = () => {
+        this.worker.onmessage = () => {
+          const getSchemaSql = `
+            SELECT name, sql
+            FROM sqlite_master
+            WHERE type='table' AND name NOT LIKE 'sqlite_%';`
+          this.worker.onmessage = event => {
+            this.schema = event.data.results[0].values
+          }
+          this.worker.postMessage({ action: 'exec', sql: getSchemaSql })
+        }
+        try {
+          this.worker.postMessage({ action: 'open', buffer: r.result }, [r.result])
+        } catch (exception) {
+          this.worker.postMessage({ action: 'open', buffer: r.result })
+        }
+      }
+      r.readAsArrayBuffer(f)
+    }
+  }
+}
+</script>

src/views/MainView.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <main-menu />
+    <router-view id="main-view" />
+  </div>
+</template>
+
+<script>
+import MainMenu from '@/components/MainMenu'
+import '@/assets/styles/scrollbars.css'
+
+export default {
+  name: 'MainView',
+  components: { MainMenu }
+}
+</script>
+<style scoped>
+#main-view {
+  margin-top: 68px;
+  height: calc(100vh - 68px);
+  overflow-y: auto;
+}
+</style>

src/views/MyQueries.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    My queries
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyQueries',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  created () {
+    // Get queries
+  },
+  methods: {
+  }
+}
+</script>