zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 10:08:52 +08:00
Code Issues Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
lana-k
2020-09-20 22:52:06 +02:00
commit 0a0407cb04
27 changed files with 17617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.browserslistrc Normal file
View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

5
.editorconfig Normal file
View File

@@ -0,0 +1,5 @@
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

28
.eslintrc.js Normal file
View File

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

22
.gitignore vendored Normal file
View File

@@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# sqliteviz
Interactive SQLite database visualiser using Plotly `react-chart-editor`.

5
babel.config.js Normal file
View File

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

16913
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

46
package.json Normal file
View File

@@ -0,0 +1,46 @@
{
"name": "sqliteviz",
"version": "0.0.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"codemirror": "^5.57.0",
"core-js": "^3.6.5",
"plotly.js": "^1.54.6",
"react": "^16.13.1",
"react-chart-editor": "^0.41.7",
"react-dom": "^16.13.1",
"sql.js": "^1.3.0",
"sqlite-parser": "^1.0.1",
"vue": "^2.6.11",
"vue-codemirror": "^4.0.6",
"vue-good-table": "^2.21.0",
"vue-react": "^1.2.0",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.4.0",
"@vue/cli-plugin-eslint": "^4.4.0",
"@vue/cli-plugin-router": "^4.4.0",
"@vue/cli-plugin-unit-mocha": "^4.4.0",
"@vue/cli-plugin-vuex": "^4.4.0",
"@vue/cli-service": "^4.4.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"chai": "^4.1.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

14
src/App.vue Normal file
View File

@@ -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>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

13
src/assets/styles/colors.css Normal file
View File

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

19
src/assets/styles/scrollbars.css Normal file
View File

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

33
src/components/MainMenu.vue Normal file
View File

@@ -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>

20
src/components/Schema.vue Normal file
View File

@@ -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>

35
src/components/SqlTable.vue Normal file
View File

@@ -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>

54
src/components/TableDescription.vue Normal file
View File

@@ -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>

19
src/main.js Normal file
View File

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

39
src/router/index.js Normal file
View File

@@ -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

24
src/store/index.js Normal file
View File

@@ -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: {
}
})

50
src/views/DbUpload.vue Normal file
View File

@@ -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>

181
src/views/Editor.vue Normal file
View File

@@ -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>

23
src/views/MainView.vue Normal file
View File

@@ -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>

24
src/views/MyQueries.vue Normal file
View File

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

13
tests/unit/example.spec.js Normal file
View File

@@ -0,0 +1,13 @@
import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})

14
vue.config.js Normal file
View File

@@ -0,0 +1,14 @@
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CopyPlugin([
// This wasm file will be fetched dynamically when we initialize sql.js
// It is important that we do not change its name, and that it is in the same folder as the js
{ from: 'node_modules/sql.js/dist/sql-wasm.wasm', to: 'js/' },
{ from: 'node_modules/sql.js/dist/worker.sql-wasm.js', to: 'js/' },
])
]
}
}