mirror of
https://github.com/lana-k/sqliteviz.git
synced 2026-03-24 23:16:18 +08:00
change repo structure
This commit is contained in:
lana-k
98
src/components/AppDiagnosticInfo.vue
Normal file
98
src/components/AppDiagnosticInfo.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div id="app-info-container">
|
||||
<img
|
||||
id="app-info-icon"
|
||||
src="~@/assets/images/info.svg"
|
||||
@click="$modal.show('app-info')"
|
||||
/>
|
||||
<modal modalId="app-info" class="dialog" contentClass="app-info-modal">
|
||||
<div class="dialog-header">
|
||||
App info
|
||||
<close-icon @click="$modal.hide('app-info')" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div v-for="(item, index) in info" :key="index" class="info-item">
|
||||
{{ item.name }}
|
||||
<div class="divider" />
|
||||
<div class="options">
|
||||
<div v-for="(opt, optIndex) in item.info" :key="optIndex">
|
||||
{{ opt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
import { version } from '../../package.json'
|
||||
|
||||
export default {
|
||||
name: 'AppDiagnosticInfo',
|
||||
components: { CloseIcon },
|
||||
data() {
|
||||
return {
|
||||
info: [
|
||||
{
|
||||
name: 'sqliteviz version',
|
||||
info: [version]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
const state = this.$store.state
|
||||
let result = (await state.db.execute('select sqlite_version()')).values
|
||||
this.info.push({
|
||||
name: 'SQLite version',
|
||||
info: result['sqlite_version()']
|
||||
})
|
||||
|
||||
result = (await state.db.execute('PRAGMA compile_options')).values
|
||||
this.info.push({
|
||||
name: 'SQLite compile options',
|
||||
info: result.compile_options
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.app-info-modal {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
#app-info-icon {
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
}
|
||||
#app-info-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 32px;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: var(--color-border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
.options {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
margin-left: 8px;
|
||||
overflow: auto;
|
||||
max-height: 170px;
|
||||
}
|
||||
.info-item {
|
||||
margin-bottom: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
198
src/components/Chart.vue
Normal file
198
src/components/Chart.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<div ref="chartContainer" class="chart-container">
|
||||
<div v-show="!dataSources" class="warning data-view-warning">
|
||||
There is no data to build a chart. Run your SQL query and make sure the
|
||||
result is not empty.
|
||||
</div>
|
||||
<div
|
||||
class="chart"
|
||||
:style="{ height: !dataSources ? 'calc(100% - 40px)' : '100%' }"
|
||||
>
|
||||
<PlotlyEditor
|
||||
ref="plotlyEditor"
|
||||
:data="state.data"
|
||||
:layout="state.layout"
|
||||
:frames="state.frames"
|
||||
:config="config"
|
||||
:dataSources="dataSources"
|
||||
:dataSourceOptions="dataSourceOptions"
|
||||
:plotly="plotly"
|
||||
:useResizeHandler="useResizeHandler"
|
||||
:debug="true"
|
||||
:advancedTraceTypeSelector="true"
|
||||
:hideControls="!showViewSettings"
|
||||
@update="update"
|
||||
@render="onRender"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { applyPureReactInVue } from 'veaury'
|
||||
import plotly from 'plotly.js'
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
import ReactPlotlyEditorWithPlotRef from '@/lib/ReactPlotlyEditorWithPlotRef.jsx'
|
||||
import chartHelper from '@/lib/chartHelper'
|
||||
import * as dereference from 'react-chart-editor/lib/lib/dereference'
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef)
|
||||
},
|
||||
props: {
|
||||
dataSources: Object,
|
||||
initOptions: Object,
|
||||
exportToPngEnabled: Boolean,
|
||||
exportToSvgEnabled: Boolean,
|
||||
forPivot: Boolean,
|
||||
showViewSettings: Boolean
|
||||
},
|
||||
emits: [
|
||||
'update:exportToSvgEnabled',
|
||||
'update:exportToHtmlEnabled',
|
||||
'update',
|
||||
'loadingImageCompleted'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
plotly,
|
||||
state: this.initOptions || {
|
||||
data: [],
|
||||
layout: { autosize: true },
|
||||
frames: []
|
||||
},
|
||||
config: {
|
||||
editable: true,
|
||||
displaylogo: false,
|
||||
modeBarButtonsToRemove: ['toImage']
|
||||
},
|
||||
resizeObserver: null,
|
||||
useResizeHandler: this.$store.state.isWorkspaceVisible
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataSourceOptions() {
|
||||
return chartHelper.getOptionsFromDataSources(this.dataSources)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSources() {
|
||||
// we need to update state.data in order to update the graph
|
||||
// https://github.com/plotly/react-chart-editor/issues/948
|
||||
if (this.dataSources) {
|
||||
dereference.default(this.state.data, this.dataSources)
|
||||
this.updatePlotly()
|
||||
}
|
||||
},
|
||||
showViewSettings() {
|
||||
this.handleResize()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// https://github.com/plotly/plotly.js/issues/4555
|
||||
plotly.setPlotConfig({
|
||||
notifyOnLogging: 1
|
||||
})
|
||||
this.$watch(
|
||||
() =>
|
||||
this.state &&
|
||||
this.state.data &&
|
||||
this.state.data
|
||||
.map(trace => `${trace.type}${trace.mode ? '-' + trace.mode : ''}`)
|
||||
.join(','),
|
||||
value => {
|
||||
events.send('viz_plotly.render', null, {
|
||||
type: value,
|
||||
pivot: !!this.forPivot
|
||||
})
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
this.$emit('update:exportToSvgEnabled', true)
|
||||
this.$emit('update:exportToHtmlEnabled', true)
|
||||
},
|
||||
mounted() {
|
||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||
this.resizeObserver.observe(this.$refs.chartContainer)
|
||||
if (this.dataSources) {
|
||||
dereference.default(this.state.data, this.dataSources)
|
||||
}
|
||||
this.handleResize()
|
||||
},
|
||||
activated() {
|
||||
this.useResizeHandler = true
|
||||
},
|
||||
deactivated() {
|
||||
this.useResizeHandler = false
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.resizeObserver.unobserve(this.$refs.chartContainer)
|
||||
},
|
||||
methods: {
|
||||
async handleResize() {
|
||||
// Call updatePlotly twice because there is a small gap (for scrolling?)
|
||||
// on right and bottom of the plot.
|
||||
// After the second call it's good.
|
||||
this.updatePlotly()
|
||||
this.updatePlotly()
|
||||
},
|
||||
onRender() {
|
||||
// TODO: check changes and enable Save button if needed
|
||||
},
|
||||
update(data, layout, frames) {
|
||||
this.state = { data, layout, frames }
|
||||
this.$emit('update')
|
||||
},
|
||||
updatePlotly() {
|
||||
const plotComponent = this.$refs.plotlyEditor.plotComponentRef.current
|
||||
plotComponent.updatePlotly(
|
||||
true, // shouldInvokeResizeHandler
|
||||
plotComponent.props.onUpdate, // figureCallbackFunction
|
||||
false // shouldAttachUpdateEvents
|
||||
)
|
||||
},
|
||||
getOptionsForSave() {
|
||||
return chartHelper.getOptionsForSave(this.state, this.dataSources)
|
||||
},
|
||||
async saveAsPng() {
|
||||
const url = await this.prepareCopy()
|
||||
this.$emit('loadingImageCompleted')
|
||||
fIo.downloadFromUrl(url, 'chart')
|
||||
},
|
||||
|
||||
async saveAsSvg() {
|
||||
const url = await this.prepareCopy('svg')
|
||||
fIo.downloadFromUrl(url, 'chart')
|
||||
},
|
||||
|
||||
saveAsHtml() {
|
||||
fIo.exportToFile(
|
||||
chartHelper.getHtml(this.state),
|
||||
'chart.html',
|
||||
'text/html'
|
||||
)
|
||||
},
|
||||
prepareCopy(type = 'png') {
|
||||
return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart {
|
||||
min-height: 242px;
|
||||
}
|
||||
|
||||
:deep(.editor_controls .sidebar__item:before) {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<script>
|
||||
import tooltipMixin from '@/tooltipMixin'
|
||||
import LoadingIndicator from '@/components/LoadingIndicator'
|
||||
import LoadingIndicator from '@/components/Common/LoadingIndicator'
|
||||
|
||||
export default {
|
||||
name: 'SideBarButton',
|
||||
@@ -46,7 +46,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoadingIndicator from '@/components/LoadingIndicator'
|
||||
import LoadingIndicator from '@/components/Common/LoadingIndicator'
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
|
||||
export default {
|
||||
@@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoadingIndicator from '@/components/LoadingIndicator'
|
||||
import LoadingIndicator from '@/components/Common/LoadingIndicator'
|
||||
|
||||
export default {
|
||||
name: 'Logs',
|
||||
@@ -102,11 +102,11 @@
|
||||
<script>
|
||||
import csv from '@/lib/csv'
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
import TextField from '@/components/TextField'
|
||||
import TextField from '@/components/Common/TextField'
|
||||
import DelimiterSelector from './DelimiterSelector'
|
||||
import CheckBox from '@/components/CheckBox'
|
||||
import CheckBox from '@/components/Common/CheckBox'
|
||||
import SqlTable from '@/components/SqlTable'
|
||||
import Logs from '@/components/Logs'
|
||||
import Logs from '@/components/Common/Logs'
|
||||
import time from '@/lib/utils/time'
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
290
src/components/DataView.vue
Normal file
290
src/components/DataView.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="data-view-panel">
|
||||
<div class="data-view-panel-content">
|
||||
<component
|
||||
:is="mode"
|
||||
ref="viewComponent"
|
||||
v-model:exportToPngEnabled="exportToPngEnabled"
|
||||
v-model:exportToSvgEnabled="exportToSvgEnabled"
|
||||
v-model:exportToHtmlEnabled="exportToHtmlEnabled"
|
||||
v-model:exportToClipboardEnabled="exportToClipboardEnabled"
|
||||
:initOptions="initOptionsByMode[mode]"
|
||||
:data-sources="dataSource"
|
||||
:showViewSettings="showViewSettings"
|
||||
@loading-image-completed="loadingImage = false"
|
||||
@update="$emit('update')"
|
||||
/>
|
||||
</div>
|
||||
<side-tool-bar panel="dataView" @switch-to="$emit('switchTo', $event)">
|
||||
<icon-button
|
||||
ref="chartBtn"
|
||||
:active="mode === 'chart'"
|
||||
tooltip="Switch to chart"
|
||||
tooltipPosition="top-left"
|
||||
@click="mode = 'chart'"
|
||||
>
|
||||
<chart-icon />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
ref="pivotBtn"
|
||||
:active="mode === 'pivot'"
|
||||
tooltip="Switch to pivot"
|
||||
tooltipPosition="top-left"
|
||||
@click="mode = 'pivot'"
|
||||
>
|
||||
<pivot-icon />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
ref="graphBtn"
|
||||
:active="mode === 'graph'"
|
||||
tooltip="Switch to graph"
|
||||
tooltipPosition="top-left"
|
||||
@click="mode = 'graph'"
|
||||
>
|
||||
<graph-icon />
|
||||
</icon-button>
|
||||
|
||||
<div class="side-tool-bar-divider" />
|
||||
|
||||
<icon-button
|
||||
ref="settingsBtn"
|
||||
:active="showViewSettings"
|
||||
tooltip="Toggle visualisation settings visibility"
|
||||
tooltipPosition="top-left"
|
||||
@click="showViewSettings = !showViewSettings"
|
||||
>
|
||||
<settings-icon />
|
||||
</icon-button>
|
||||
|
||||
<div class="side-tool-bar-divider" />
|
||||
|
||||
<icon-button
|
||||
ref="pngExportBtn"
|
||||
:disabled="!exportToPngEnabled || loadingImage"
|
||||
:loading="loadingImage"
|
||||
tooltip="Save as PNG image"
|
||||
tooltipPosition="top-left"
|
||||
@click="saveAsPng"
|
||||
>
|
||||
<png-icon />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
ref="svgExportBtn"
|
||||
:disabled="!exportToSvgEnabled"
|
||||
tooltip="Save as SVG"
|
||||
tooltipPosition="top-left"
|
||||
@click="saveAsSvg"
|
||||
>
|
||||
<export-to-svg-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="htmlExportBtn"
|
||||
:disabled="!exportToHtmlEnabled"
|
||||
tooltip="Save as HTML"
|
||||
tooltipPosition="top-left"
|
||||
@click="saveAsHtml"
|
||||
>
|
||||
<HtmlIcon />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
ref="copyToClipboardBtn"
|
||||
:disabled="!exportToClipboardEnabled"
|
||||
:loading="copyingImage"
|
||||
tooltip="Copy visualisation to clipboard"
|
||||
tooltipPosition="top-left"
|
||||
@click="prepareCopy"
|
||||
>
|
||||
<clipboard-icon />
|
||||
</icon-button>
|
||||
</side-tool-bar>
|
||||
|
||||
<loading-dialog
|
||||
v-model="showLoadingDialog"
|
||||
loadingMsg="Rendering the visualisation..."
|
||||
successMsg="Image is ready"
|
||||
actionBtnName="Copy"
|
||||
title="Copy to clipboard"
|
||||
:loading="preparingCopy"
|
||||
@action="copyToClipboard"
|
||||
@cancel="cancelCopy"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from '@/components/Chart.vue'
|
||||
import Pivot from '@/components/Pivot'
|
||||
import Graph from '@/components/Graph/index.vue'
|
||||
import SideToolBar from '@/components/SideToolBar'
|
||||
import IconButton from '@/components/Common/IconButton'
|
||||
import ChartIcon from '@/components/svg/chart'
|
||||
import PivotIcon from '@/components/svg/pivot'
|
||||
import GraphIcon from '@/components/svg/graph.vue'
|
||||
import SettingsIcon from '@/components/svg/settings.vue'
|
||||
import HtmlIcon from '@/components/svg/html'
|
||||
import ExportToSvgIcon from '@/components/svg/exportToSvg'
|
||||
import PngIcon from '@/components/svg/png'
|
||||
import ClipboardIcon from '@/components/svg/clipboard'
|
||||
import cIo from '@/lib/utils/clipboardIo'
|
||||
import loadingDialog from '@/components/Common/LoadingDialog.vue'
|
||||
import time from '@/lib/utils/time'
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
components: {
|
||||
Chart,
|
||||
Pivot,
|
||||
Graph,
|
||||
SideToolBar,
|
||||
IconButton,
|
||||
ChartIcon,
|
||||
PivotIcon,
|
||||
GraphIcon,
|
||||
SettingsIcon,
|
||||
ExportToSvgIcon,
|
||||
PngIcon,
|
||||
HtmlIcon,
|
||||
ClipboardIcon,
|
||||
loadingDialog
|
||||
},
|
||||
props: {
|
||||
dataSource: Object,
|
||||
initOptions: Object,
|
||||
initMode: String
|
||||
},
|
||||
emits: ['update', 'switchTo'],
|
||||
data() {
|
||||
return {
|
||||
mode: this.initMode || 'chart',
|
||||
exportToPngEnabled: true,
|
||||
exportToSvgEnabled: true,
|
||||
exportToHtmlEnabled: true,
|
||||
exportToClipboardEnabled: true,
|
||||
loadingImage: false,
|
||||
copyingImage: false,
|
||||
preparingCopy: false,
|
||||
dataToCopy: null,
|
||||
initOptionsByMode: {
|
||||
chart: this.initMode === 'chart' ? this.initOptions : null,
|
||||
pivot: this.initMode === 'pivot' ? this.initOptions : null,
|
||||
graph: this.initMode === 'graph' ? this.initOptions : null
|
||||
},
|
||||
showLoadingDialog: false,
|
||||
showViewSettings: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
plotlyInPivot() {
|
||||
return this.mode === 'pivot' && this.$refs.viewComponent.viewCustomChart
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mode(newMode, oldMode) {
|
||||
this.$emit('update')
|
||||
this.exportToPngEnabled = true
|
||||
this.exportToClipboardEnabled = true
|
||||
this.initOptionsByMode[oldMode] = this.getOptionsForSave()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async saveAsPng() {
|
||||
this.loadingImage = true
|
||||
/*
|
||||
setTimeout does its thing by putting its callback on the callback queue.
|
||||
The callback queue is only called by the browser after both the call stack
|
||||
and the render queue are done. So our animation (which is on the call stack) gets done,
|
||||
the render queue renders it, and then the browser is ready for the callback queue
|
||||
and calls the long-calculation.
|
||||
|
||||
nextTick allows you to do something after you have changed the data
|
||||
and VueJS has updated the DOM based on your data change,
|
||||
but before the browser has rendered those changed on the page.
|
||||
|
||||
http://www.hesselinkwebdesign.nl/2019/nexttick-vs-settimeout-in-vue/
|
||||
|
||||
*/
|
||||
await time.sleep(0)
|
||||
this.$refs.viewComponent.saveAsPng()
|
||||
this.exportSignal('png')
|
||||
},
|
||||
getOptionsForSave() {
|
||||
return this.$refs.viewComponent.getOptionsForSave()
|
||||
},
|
||||
async prepareCopy() {
|
||||
if ('ClipboardItem' in window) {
|
||||
this.preparingCopy = true
|
||||
this.showLoadingDialog = true
|
||||
const t0 = performance.now()
|
||||
|
||||
await time.sleep(0)
|
||||
this.dataToCopy = await this.$refs.viewComponent.prepareCopy()
|
||||
const t1 = performance.now()
|
||||
if (t1 - t0 < 950) {
|
||||
this.copyToClipboard()
|
||||
} else {
|
||||
this.preparingCopy = false
|
||||
}
|
||||
} else {
|
||||
alert(
|
||||
"Your browser doesn't support copying images into the clipboard. " +
|
||||
'If you use Firefox you can enable it ' +
|
||||
'by setting dom.events.asyncClipboard.clipboardItem to true.'
|
||||
)
|
||||
}
|
||||
},
|
||||
copyToClipboard() {
|
||||
cIo.copyImage(this.dataToCopy)
|
||||
this.showLoadingDialog = false
|
||||
this.exportSignal('clipboard')
|
||||
},
|
||||
cancelCopy() {
|
||||
this.dataToCopy = null
|
||||
},
|
||||
|
||||
saveAsSvg() {
|
||||
this.$refs.viewComponent.saveAsSvg()
|
||||
this.exportSignal('svg')
|
||||
},
|
||||
saveAsHtml() {
|
||||
this.$refs.viewComponent.saveAsHtml()
|
||||
this.exportSignal('html')
|
||||
},
|
||||
exportSignal(to) {
|
||||
const eventLabels = { type: to }
|
||||
|
||||
if (this.mode === 'chart' || this.plotlyInPivot) {
|
||||
eventLabels.pivot = this.plotlyInPivot
|
||||
}
|
||||
|
||||
events.send(
|
||||
this.mode === 'chart' || this.plotlyInPivot
|
||||
? 'viz_plotly.export'
|
||||
: this.mode === 'graph'
|
||||
? 'viz_graph.export'
|
||||
: 'viz_pivot.export',
|
||||
null,
|
||||
eventLabels
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-view-panel {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.data-view-panel-content {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
width: calc(100% - 39px);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
125
src/components/Graph/index.vue
Normal file
125
src/components/Graph/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div ref="graphContainer" class="graph-container">
|
||||
<div v-show="!dataSources" class="warning data-view-warning no-data">
|
||||
There is no data to build a graph. Run your SQL query and make sure the
|
||||
result is not empty.
|
||||
</div>
|
||||
<div
|
||||
v-show="!dataSourceIsValid"
|
||||
class="warning data-view-warning invalid-data"
|
||||
>
|
||||
Result set is invalid for graph visualisation. Learn more in
|
||||
<a href="https://sqliteviz.com/docs/graph/" target="_blank">
|
||||
documentation</a
|
||||
>.
|
||||
</div>
|
||||
<div
|
||||
class="graph"
|
||||
:style="{
|
||||
height:
|
||||
!dataSources || !dataSourceIsValid ? 'calc(100% - 40px)' : '100%'
|
||||
}"
|
||||
>
|
||||
<GraphEditor
|
||||
ref="graphEditor"
|
||||
:dataSources="dataSources"
|
||||
:initOptions="initOptions"
|
||||
:showViewSettings="showViewSettings"
|
||||
@update="$emit('update')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'react-chart-editor/lib/react-chart-editor.css'
|
||||
import GraphEditor from '@/components/Graph/GraphEditor.vue'
|
||||
import { dataSourceIsValid } from '@/lib/graphHelper'
|
||||
|
||||
export default {
|
||||
name: 'Graph',
|
||||
components: { GraphEditor },
|
||||
props: {
|
||||
dataSources: Object,
|
||||
initOptions: Object,
|
||||
exportToPngEnabled: Boolean,
|
||||
exportToSvgEnabled: Boolean,
|
||||
exportToHtmlEnabled: Boolean,
|
||||
showViewSettings: Boolean
|
||||
},
|
||||
emits: [
|
||||
'update:exportToSvgEnabled',
|
||||
'update:exportToHtmlEnabled',
|
||||
'update:exportToPngEnabled',
|
||||
'update:exportToClipboardEnabled',
|
||||
'update',
|
||||
'loadingImageCompleted'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
resizeObserver: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataSourceIsValid() {
|
||||
return !this.dataSources || dataSourceIsValid(this.dataSources)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async showViewSettings() {
|
||||
await this.$nextTick()
|
||||
this.handleResize()
|
||||
},
|
||||
dataSources() {
|
||||
this.$emit('update:exportToPngEnabled', !!this.dataSources)
|
||||
this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('update:exportToSvgEnabled', false)
|
||||
this.$emit('update:exportToHtmlEnabled', false)
|
||||
this.$emit('update:exportToPngEnabled', !!this.dataSources)
|
||||
this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
|
||||
},
|
||||
mounted() {
|
||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||
this.resizeObserver.observe(this.$refs.graphContainer)
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.resizeObserver.unobserve(this.$refs.graphContainer)
|
||||
},
|
||||
methods: {
|
||||
getOptionsForSave() {
|
||||
return this.$refs.graphEditor.settings
|
||||
},
|
||||
async saveAsPng() {
|
||||
await this.$refs.graphEditor.saveAsPng()
|
||||
this.$emit('loadingImageCompleted')
|
||||
},
|
||||
prepareCopy() {
|
||||
return this.$refs.graphEditor.prepareCopy()
|
||||
},
|
||||
async handleResize() {
|
||||
const renderer = this.$refs.graphEditor.renderer
|
||||
if (renderer) {
|
||||
renderer.refresh()
|
||||
renderer.getCamera().animatedReset({ duration: 600 })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.graph {
|
||||
min-height: 242px;
|
||||
}
|
||||
|
||||
:deep(.editor_controls .sidebar__item:before) {
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
316
src/components/MainMenu.vue
Normal file
316
src/components/MainMenu.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<nav>
|
||||
<div id="nav-links">
|
||||
<a href="https://sqliteviz.com">
|
||||
<img src="~@/assets/images/logo_simple.svg" />
|
||||
</a>
|
||||
<router-link to="/workspace">Workspace</router-link>
|
||||
<router-link to="/inquiries">Inquiries</router-link>
|
||||
<a href="https://sqliteviz.com/docs" target="_blank">Help</a>
|
||||
</div>
|
||||
<div id="nav-buttons">
|
||||
<button
|
||||
v-show="currentInquiryTab && $route.path === '/workspace'"
|
||||
id="save-btn"
|
||||
class="primary"
|
||||
:disabled="isSaved"
|
||||
@click="onSave(false)"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
v-show="currentInquiryTab && $route.path === '/workspace'"
|
||||
id="save-as-btn"
|
||||
class="primary"
|
||||
@click="onSaveAs"
|
||||
>
|
||||
Save as
|
||||
</button>
|
||||
<button id="create-btn" class="primary" @click="createNewInquiry">
|
||||
Create
|
||||
</button>
|
||||
<app-diagnostic-info />
|
||||
</div>
|
||||
|
||||
<!--Save Inquiry dialog -->
|
||||
<modal modalId="save" class="dialog" contentStyle="width: 560px;">
|
||||
<div class="dialog-header">
|
||||
Save inquiry
|
||||
<close-icon @click="cancelSave" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div v-show="isPredefined" id="save-note">
|
||||
<img src="~@/assets/images/info.svg" />
|
||||
Note: Predefined inquiries can't be edited. That's why your
|
||||
modifications will be saved as a new inquiry. Enter the name for it.
|
||||
</div>
|
||||
<text-field
|
||||
v-model="name"
|
||||
label="Inquiry name"
|
||||
:errorMsg="errorMsg"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="dialog-buttons-container">
|
||||
<button class="secondary" @click="cancelSave">Cancel</button>
|
||||
<button class="primary" @click="validateSaveFormAndSaveInquiry">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
<!-- Inquiery saving conflict dialog -->
|
||||
<modal
|
||||
modalId="inquiry-conflict"
|
||||
class="dialog"
|
||||
contentStyle="width: 560px;"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
Inquiry saving conflict
|
||||
<close-icon @click="cancelSave" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<div id="save-note">
|
||||
<img src="~@/assets/images/info.svg" />
|
||||
This inquiry has been modified in the mean time. This can happen if an
|
||||
inquiry is saved in another window or browser tab. Do you want to
|
||||
overwrite that changes or save the current state as a new inquiry?
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-buttons-container">
|
||||
<button class="secondary" @click="cancelSave">Cancel</button>
|
||||
<button class="primary" @click="onSave(true)">Overwrite</button>
|
||||
<button class="primary" @click="onSaveAs">Save as new</button>
|
||||
</div>
|
||||
</modal>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TextField from '@/components/Common/TextField'
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
import storedInquiries from '@/lib/storedInquiries'
|
||||
import AppDiagnosticInfo from './AppDiagnosticInfo'
|
||||
import events from '@/lib/utils/events'
|
||||
import eventBus from '@/lib/eventBus'
|
||||
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
components: {
|
||||
TextField,
|
||||
CloseIcon,
|
||||
AppDiagnosticInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
errorMsg: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inquiries() {
|
||||
return this.$store.state.inquiries
|
||||
},
|
||||
currentInquiryTab() {
|
||||
return this.$store.state.currentTab
|
||||
},
|
||||
isSaved() {
|
||||
return this.currentInquiryTab && this.currentInquiryTab.isSaved
|
||||
},
|
||||
isPredefined() {
|
||||
return this.currentInquiryTab && this.currentInquiryTab.isPredefined
|
||||
},
|
||||
runDisabled() {
|
||||
return (
|
||||
this.currentInquiryTab &&
|
||||
(!this.$store.state.db || !this.currentInquiryTab.query)
|
||||
)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
eventBus.$on('createNewInquiry', this.createNewInquiry)
|
||||
eventBus.$on('saveInquiry', this.onSave)
|
||||
document.addEventListener('keydown', this._keyListener)
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('keydown', this._keyListener)
|
||||
},
|
||||
methods: {
|
||||
createNewInquiry() {
|
||||
this.$store.dispatch('addTab').then(id => {
|
||||
this.$store.commit('setCurrentTabId', id)
|
||||
if (this.$route.path !== '/workspace') {
|
||||
this.$router.push('/workspace')
|
||||
}
|
||||
})
|
||||
|
||||
events.send('inquiry.create', null, { auto: false })
|
||||
},
|
||||
cancelSave() {
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
this.$modal.hide('save')
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
eventBus.$off('inquirySaved')
|
||||
},
|
||||
onSave(skipConcurrentEditingCheck = false) {
|
||||
if (storedInquiries.isTabNeedName(this.currentInquiryTab)) {
|
||||
this.openSaveModal()
|
||||
return
|
||||
}
|
||||
|
||||
if (!skipConcurrentEditingCheck) {
|
||||
const inquiryInStore = this.inquiries.find(
|
||||
inquiry => inquiry.id === this.currentInquiryTab.id
|
||||
)
|
||||
|
||||
if (
|
||||
inquiryInStore &&
|
||||
inquiryInStore.updatedAt !== this.currentInquiryTab.updatedAt
|
||||
) {
|
||||
this.$modal.show('inquiry-conflict')
|
||||
return
|
||||
}
|
||||
}
|
||||
this.saveInquiry()
|
||||
},
|
||||
onSaveAs() {
|
||||
this.openSaveModal()
|
||||
},
|
||||
openSaveModal() {
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
this.$modal.show('save')
|
||||
},
|
||||
validateSaveFormAndSaveInquiry() {
|
||||
if (!this.name) {
|
||||
this.errorMsg = "Inquiry name can't be empty"
|
||||
return
|
||||
}
|
||||
this.saveInquiry()
|
||||
},
|
||||
async saveInquiry() {
|
||||
const eventName =
|
||||
this.currentInquiryTab.name && this.name
|
||||
? 'inquiry.saveAs'
|
||||
: 'inquiry.save'
|
||||
|
||||
// Save inquiry
|
||||
const value = await this.$store.dispatch('saveInquiry', {
|
||||
inquiryTab: this.currentInquiryTab,
|
||||
newName: this.name
|
||||
})
|
||||
|
||||
// Update tab in store
|
||||
this.$store.commit('updateTab', {
|
||||
tab: this.currentInquiryTab,
|
||||
newValues: {
|
||||
name: value.name,
|
||||
id: value.id,
|
||||
query: value.query,
|
||||
viewType: value.viewType,
|
||||
viewOptions: value.viewOptions,
|
||||
isSaved: true,
|
||||
updatedAt: value.updatedAt
|
||||
}
|
||||
})
|
||||
|
||||
// Hide dialogs
|
||||
this.$modal.hide('save')
|
||||
this.$modal.hide('inquiry-conflict')
|
||||
this.errorMsg = null
|
||||
this.name = ''
|
||||
|
||||
// Signal about saving
|
||||
eventBus.$emit('inquirySaved')
|
||||
events.send(eventName)
|
||||
},
|
||||
_keyListener(e) {
|
||||
if (this.$route.path === '/workspace') {
|
||||
// Run query Ctrl+R or Ctrl+Enter
|
||||
if ((e.key === 'r' || e.key === 'Enter') && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault()
|
||||
if (!this.runDisabled) {
|
||||
this.currentInquiryTab.execute()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Save inquiry Ctrl+S
|
||||
if (e.key === 's' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
if (!this.isSaved) {
|
||||
this.onSave()
|
||||
}
|
||||
return
|
||||
}
|
||||
// Save inquiry as Ctrl+Shift+S
|
||||
if (e.key === 'S' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
|
||||
e.preventDefault()
|
||||
this.onSaveAs()
|
||||
return
|
||||
}
|
||||
}
|
||||
// New (blank) inquiry Ctrl+B
|
||||
if (e.key === 'b' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault()
|
||||
this.createNewInquiry()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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-shadow: var(--shadow-1);
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: 0 16px 0 52px;
|
||||
z-index: 999;
|
||||
}
|
||||
a {
|
||||
font-size: 18px;
|
||||
color: var(--color-text-base);
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
margin-right: 28px;
|
||||
}
|
||||
a.router-link-active {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
button {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
#save-note {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#save-note img {
|
||||
margin: -3px 6px 0 0;
|
||||
}
|
||||
|
||||
#nav-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#nav-links img {
|
||||
width: 32px;
|
||||
}
|
||||
</style>
|
||||
75
src/components/Pivot/PivotUi/PivotSortBtn.vue
Normal file
75
src/components/Pivot/PivotUi/PivotSortBtn.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div :class="['pivot-sort-btn', direction]" @click="changeSorting">
|
||||
{{ modelValue.includes('key') ? 'key' : 'value' }}
|
||||
<sort-icon
|
||||
class="sort-icon"
|
||||
:horizontal="direction === 'col'"
|
||||
:asc="modelValue.includes('a_to_z')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SortIcon from '@/components/svg/sort'
|
||||
|
||||
export default {
|
||||
name: 'PivotSortBtn',
|
||||
components: {
|
||||
SortIcon
|
||||
},
|
||||
props: {
|
||||
direction: String,
|
||||
modelValue: String
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
methods: {
|
||||
changeSorting() {
|
||||
if (this.modelValue === 'key_a_to_z') {
|
||||
this.$emit('update:modelValue', 'value_a_to_z')
|
||||
} else if (this.modelValue === 'value_a_to_z') {
|
||||
this.$emit('update:modelValue', 'value_z_to_a')
|
||||
} else {
|
||||
this.$emit('update:modelValue', 'key_a_to_z')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pivot-sort-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 43px;
|
||||
height: 27px;
|
||||
background-color: var(--color-bg-light-4);
|
||||
border-radius: var(--border-radius-medium-2);
|
||||
border: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-base);
|
||||
line-height: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.pivot-sort-btn:hover {
|
||||
color: var(--color-text-active);
|
||||
border-color: var(--color-border-dark);
|
||||
}
|
||||
.pivot-sort-btn:hover :deep(.sort-icon path) {
|
||||
fill: var(--color-text-active);
|
||||
}
|
||||
|
||||
.pivot-sort-btn.col {
|
||||
flex-direction: column;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pivot-sort-btn.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pivot-sort-btn.row .sort-icon {
|
||||
margin-left: 2px;
|
||||
}
|
||||
</style>
|
||||
300
src/components/Pivot/PivotUi/index.vue
Normal file
300
src/components/Pivot/PivotUi/index.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="pivot-ui">
|
||||
<div class="row">
|
||||
<label>Columns</label>
|
||||
<multiselect
|
||||
v-model="cols"
|
||||
class="sqliteviz-select cols"
|
||||
:options="colsToSelect"
|
||||
:disabled="colsToSelect.length === 0"
|
||||
:multiple="true"
|
||||
:hideSelected="true"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:max="colsToSelect.length"
|
||||
openDirection="bottom"
|
||||
placeholder=""
|
||||
>
|
||||
<template #maxElements>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
|
||||
<template #placeholder>Choose columns</template>
|
||||
|
||||
<template #noResult>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
<pivot-sort-btn v-model="colOrder" class="sort-btn" direction="col" />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>Rows</label>
|
||||
<multiselect
|
||||
v-model="rows"
|
||||
class="sqliteviz-select rows"
|
||||
:options="rowsToSelect"
|
||||
:disabled="rowsToSelect.length === 0"
|
||||
:multiple="true"
|
||||
:hideSelected="true"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:max="rowsToSelect.length"
|
||||
:optionHeight="29"
|
||||
openDirection="bottom"
|
||||
placeholder=""
|
||||
>
|
||||
<template #maxElements>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
|
||||
<template #placeholder>Choose rows</template>
|
||||
|
||||
<template #noResult>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
<pivot-sort-btn v-model="rowOrder" class="sort-btn" direction="row" />
|
||||
</div>
|
||||
|
||||
<div class="row aggregator">
|
||||
<label>Aggregator</label>
|
||||
<multiselect
|
||||
v-model="aggregator"
|
||||
class="sqliteviz-select short aggregator"
|
||||
:options="aggregators"
|
||||
label="name"
|
||||
trackBy="name"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:hideSelected="true"
|
||||
:optionHeight="29"
|
||||
openDirection="bottom"
|
||||
placeholder="Choose a function"
|
||||
>
|
||||
<template #noResult>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
|
||||
<multiselect
|
||||
v-show="valCount > 0"
|
||||
v-model="val1"
|
||||
class="sqliteviz-select aggr-arg"
|
||||
:options="keyNames"
|
||||
:disabled="keyNames.length === 0"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:hideSelected="true"
|
||||
:optionHeight="29"
|
||||
openDirection="bottom"
|
||||
placeholder="Choose an argument"
|
||||
/>
|
||||
|
||||
<multiselect
|
||||
v-show="valCount > 1"
|
||||
v-model="val2"
|
||||
class="sqliteviz-select aggr-arg"
|
||||
:options="keyNames"
|
||||
:disabled="keyNames.length === 0"
|
||||
:closeOnSelect="true"
|
||||
:showLabels="false"
|
||||
:hideSelected="true"
|
||||
:optionHeight="29"
|
||||
openDirection="bottom"
|
||||
placeholder="Choose a second argument"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>View</label>
|
||||
<multiselect
|
||||
v-model="renderer"
|
||||
class="sqliteviz-select short renderer"
|
||||
:options="renderers"
|
||||
label="name"
|
||||
trackBy="name"
|
||||
:closeOnSelect="true"
|
||||
:allowEmpty="false"
|
||||
:showLabels="false"
|
||||
:hideSelected="true"
|
||||
:optionHeight="29"
|
||||
openDirection="bottom"
|
||||
placeholder="Choose a view"
|
||||
>
|
||||
<template #noResult>
|
||||
<span class="no-results">No Results</span>
|
||||
</template>
|
||||
</multiselect>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import Multiselect from 'vue-multiselect'
|
||||
import PivotSortBtn from './PivotSortBtn'
|
||||
import {
|
||||
renderers,
|
||||
aggregators,
|
||||
zeroValAggregators,
|
||||
twoValAggregators
|
||||
} from '../pivotHelper'
|
||||
|
||||
export default {
|
||||
name: 'PivotUi',
|
||||
components: {
|
||||
Multiselect,
|
||||
PivotSortBtn
|
||||
},
|
||||
props: {
|
||||
keyNames: Array,
|
||||
modelValue: Object
|
||||
},
|
||||
emits: ['update:modelValue', 'update'],
|
||||
data() {
|
||||
const aggregatorName =
|
||||
(this.modelValue && this.modelValue.aggregatorName) || 'Count'
|
||||
const rendererName =
|
||||
(this.modelValue && this.modelValue.rendererName) || 'Table'
|
||||
return {
|
||||
renderer: {
|
||||
name: rendererName,
|
||||
fun: $.pivotUtilities.renderers[rendererName]
|
||||
},
|
||||
aggregator: {
|
||||
name: aggregatorName,
|
||||
fun: $.pivotUtilities.aggregators[aggregatorName]
|
||||
},
|
||||
rows: (this.modelValue && this.modelValue.rows) || [],
|
||||
cols: (this.modelValue && this.modelValue.cols) || [],
|
||||
val1:
|
||||
(this.modelValue && this.modelValue.vals && this.modelValue.vals[0]) ||
|
||||
'',
|
||||
val2:
|
||||
(this.modelValue && this.modelValue.vals && this.modelValue.vals[1]) ||
|
||||
'',
|
||||
colOrder: (this.modelValue && this.modelValue.colOrder) || 'key_a_to_z',
|
||||
rowOrder: (this.modelValue && this.modelValue.rowOrder) || 'key_a_to_z'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
valCount() {
|
||||
if (zeroValAggregators.includes(this.aggregator.name)) {
|
||||
return 0
|
||||
}
|
||||
|
||||
if (twoValAggregators.includes(this.aggregator.name)) {
|
||||
return 2
|
||||
}
|
||||
|
||||
return 1
|
||||
},
|
||||
renderers() {
|
||||
return renderers
|
||||
},
|
||||
aggregators() {
|
||||
return aggregators
|
||||
},
|
||||
rowsToSelect() {
|
||||
return this.keyNames.filter(key => !this.cols.includes(key))
|
||||
},
|
||||
colsToSelect() {
|
||||
return this.keyNames.filter(key => !this.rows.includes(key))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
renderer() {
|
||||
this.returnValue()
|
||||
},
|
||||
aggregator() {
|
||||
this.returnValue()
|
||||
},
|
||||
rows() {
|
||||
this.returnValue()
|
||||
},
|
||||
cols() {
|
||||
this.returnValue()
|
||||
},
|
||||
val1() {
|
||||
this.returnValue()
|
||||
},
|
||||
val2() {
|
||||
this.returnValue()
|
||||
},
|
||||
colOrder() {
|
||||
this.returnValue()
|
||||
},
|
||||
rowOrder() {
|
||||
this.returnValue()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
returnValue() {
|
||||
const vals = []
|
||||
for (let i = 1; i <= this.valCount; i++) {
|
||||
vals.push(this[`val${i}`])
|
||||
}
|
||||
this.$emit('update')
|
||||
this.$emit('update:modelValue', {
|
||||
rows: this.rows,
|
||||
cols: this.cols,
|
||||
colOrder: this.colOrder,
|
||||
rowOrder: this.rowOrder,
|
||||
aggregator: this.aggregator.fun(vals),
|
||||
aggregatorName: this.aggregator.name,
|
||||
renderer: this.renderer.fun,
|
||||
rendererName: this.renderer.name,
|
||||
vals
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pivot-ui {
|
||||
padding: 12px 24px;
|
||||
color: var(--color-text-base);
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.pivot-ui .row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.pivot-ui .row label {
|
||||
width: 76px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pivot-ui .row .sqliteviz-select.short {
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pivot-ui .row .aggr-arg {
|
||||
margin-left: 12px;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.pivot-ui .row .sort-btn {
|
||||
margin-left: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
display: block;
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switcher:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
333
src/components/Pivot/index.vue
Normal file
333
src/components/Pivot/index.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div class="pivot-container">
|
||||
<div v-show="!dataSources" class="warning pivot-warning">
|
||||
There is no data to build a pivot. Run your SQL query and make sure the
|
||||
result is not empty.
|
||||
</div>
|
||||
<pivot-ui
|
||||
v-show="showViewSettings"
|
||||
v-model="pivotOptions"
|
||||
:keyNames="columns"
|
||||
@update="$emit('update')"
|
||||
/>
|
||||
<div ref="pivotOutput" class="pivot-output" />
|
||||
<div
|
||||
v-show="viewCustomChart"
|
||||
ref="customChartOutput"
|
||||
class="custom-chart-output"
|
||||
>
|
||||
<chart
|
||||
ref="customChart"
|
||||
v-bind="customChartComponentProps"
|
||||
@update="$emit('update')"
|
||||
@loading-image-completed="$emit('loadingImageCompleted')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import $ from 'jquery'
|
||||
import 'pivottable'
|
||||
import 'pivottable/dist/pivot.css'
|
||||
import PivotUi from './PivotUi/index.vue'
|
||||
import pivotHelper from './pivotHelper'
|
||||
import Chart from '@/components/Chart'
|
||||
import chartHelper from '@/lib/chartHelper'
|
||||
import events from '@/lib/utils/events'
|
||||
import plotly from 'plotly.js'
|
||||
|
||||
export default {
|
||||
name: 'Pivot',
|
||||
components: {
|
||||
PivotUi,
|
||||
Chart
|
||||
},
|
||||
props: {
|
||||
dataSources: Object,
|
||||
initOptions: Object,
|
||||
exportToPngEnabled: Boolean,
|
||||
exportToSvgEnabled: Boolean,
|
||||
showViewSettings: Boolean
|
||||
},
|
||||
emits: [
|
||||
'loadingImageCompleted',
|
||||
'update',
|
||||
'update:exportToSvgEnabled',
|
||||
'update:exportToPngEnabled',
|
||||
'update:exportToHtmlEnabled'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
resizeObserver: null,
|
||||
pivotOptions: !this.initOptions
|
||||
? {
|
||||
rows: [],
|
||||
cols: [],
|
||||
colOrder: 'key_a_to_z',
|
||||
rowOrder: 'key_a_to_z',
|
||||
aggregatorName: 'Count',
|
||||
aggregator: $.pivotUtilities.aggregators.Count(),
|
||||
vals: [],
|
||||
rendererName: 'Table',
|
||||
renderer: $.pivotUtilities.renderers.Table
|
||||
}
|
||||
: {
|
||||
rows: this.initOptions.rows,
|
||||
cols: this.initOptions.cols,
|
||||
colOrder: this.initOptions.colOrder,
|
||||
rowOrder: this.initOptions.rowOrder,
|
||||
aggregatorName: this.initOptions.aggregatorName,
|
||||
aggregator: $.pivotUtilities.aggregators[
|
||||
this.initOptions.aggregatorName
|
||||
](this.initOptions.vals),
|
||||
vals: this.initOptions.vals,
|
||||
rendererName: this.initOptions.rendererName,
|
||||
renderer: $.pivotUtilities.renderers[this.initOptions.rendererName]
|
||||
},
|
||||
customChartComponentProps: {
|
||||
initOptions: this.initOptions?.rendererOptions?.customChartOptions,
|
||||
forPivot: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return Object.keys(this.dataSources || {})
|
||||
},
|
||||
|
||||
viewStandartChart() {
|
||||
return this.pivotOptions.rendererName in $.pivotUtilities.plotly_renderers
|
||||
},
|
||||
|
||||
viewCustomChart() {
|
||||
return this.pivotOptions.rendererName === 'Custom chart'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dataSources() {
|
||||
this.show()
|
||||
},
|
||||
'pivotOptions.rendererName': {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.$emit(
|
||||
'update:exportToPngEnabled',
|
||||
this.pivotOptions.rendererName !== 'TSV Export'
|
||||
)
|
||||
this.$emit(
|
||||
'update:exportToSvgEnabled',
|
||||
this.viewStandartChart || this.viewCustomChart
|
||||
)
|
||||
events.send('viz_pivot.render', null, {
|
||||
type: this.pivotOptions.rendererName
|
||||
})
|
||||
}
|
||||
},
|
||||
pivotOptions() {
|
||||
this.show()
|
||||
},
|
||||
showViewSettings() {
|
||||
this.handleResize()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$emit('update:exportToHtmlEnabled', true)
|
||||
},
|
||||
mounted() {
|
||||
this.show()
|
||||
// We need to detect resizing because plotly doesn't resize when resize its container
|
||||
// but it resize on window.resize (we will trigger it manualy in order to make plotly resize)
|
||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||
this.resizeObserver.observe(this.$refs.pivotOutput)
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.resizeObserver.unobserve(this.$refs.pivotOutput)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
// hack: plotly changes size only on window.resize event,
|
||||
// so, we resize it manually when container resizes (e.g. when move splitter)
|
||||
if (this.viewStandartChart) {
|
||||
plotly.Plots.resize(
|
||||
this.$refs.pivotOutput.querySelector('.js-plotly-plot')
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
show() {
|
||||
const options = { ...this.pivotOptions }
|
||||
if (this.viewStandartChart) {
|
||||
options.rendererOptions = {
|
||||
plotly: {
|
||||
autosize: true,
|
||||
width: null,
|
||||
height: null
|
||||
},
|
||||
plotlyConfig: {
|
||||
displaylogo: false,
|
||||
responsive: true,
|
||||
modeBarButtonsToRemove: ['toImage']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.viewCustomChart) {
|
||||
options.rendererOptions = {
|
||||
getCustomComponentsProps: () => this.customChartComponentProps
|
||||
}
|
||||
}
|
||||
|
||||
$(this.$refs.pivotOutput).pivot(
|
||||
function (callback) {
|
||||
const rowCount = !this.dataSources
|
||||
? 0
|
||||
: this.dataSources[this.columns[0]].length
|
||||
for (let i = 1; i <= rowCount; i++) {
|
||||
const row = {}
|
||||
this.columns.forEach(col => {
|
||||
row[col] = this.dataSources[col][i - 1]
|
||||
})
|
||||
callback(row)
|
||||
}
|
||||
}.bind(this),
|
||||
options
|
||||
)
|
||||
|
||||
// fix for Firefox: fit plotly renderers just after choosing it in pivotUi
|
||||
this.handleResize()
|
||||
},
|
||||
|
||||
getOptionsForSave() {
|
||||
const options = { ...this.pivotOptions }
|
||||
if (this.viewCustomChart) {
|
||||
const chartComponent = this.$refs.customChart
|
||||
options.rendererOptions = {
|
||||
customChartOptions: chartComponent.getOptionsForSave()
|
||||
}
|
||||
}
|
||||
return options
|
||||
},
|
||||
|
||||
async saveAsPng() {
|
||||
if (this.viewCustomChart) {
|
||||
this.$refs.customChart.saveAsPng()
|
||||
} else {
|
||||
const source = this.viewStandartChart
|
||||
? await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
|
||||
: (
|
||||
await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
|
||||
).toDataURL('image/png')
|
||||
|
||||
this.$emit('loadingImageCompleted')
|
||||
fIo.downloadFromUrl(source, 'pivot')
|
||||
}
|
||||
},
|
||||
|
||||
async prepareCopy() {
|
||||
if (this.viewCustomChart) {
|
||||
return this.$refs.customChart.prepareCopy()
|
||||
}
|
||||
if (this.viewStandartChart) {
|
||||
return chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
|
||||
}
|
||||
return pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
|
||||
},
|
||||
|
||||
async saveAsSvg() {
|
||||
if (this.viewCustomChart) {
|
||||
this.$refs.customChart.saveAsSvg()
|
||||
} else if (this.viewStandartChart) {
|
||||
const url = await chartHelper.getImageDataUrl(
|
||||
this.$refs.pivotOutput,
|
||||
'svg'
|
||||
)
|
||||
fIo.downloadFromUrl(url, 'pivot')
|
||||
}
|
||||
},
|
||||
|
||||
saveAsHtml() {
|
||||
if (this.viewCustomChart) {
|
||||
this.$refs.customChart.saveAsHtml()
|
||||
return
|
||||
}
|
||||
|
||||
if (this.viewStandartChart) {
|
||||
const chartState = chartHelper.getChartData(this.$refs.pivotOutput)
|
||||
fIo.exportToFile(
|
||||
chartHelper.getHtml(chartState),
|
||||
'chart.html',
|
||||
'text/html'
|
||||
)
|
||||
return
|
||||
}
|
||||
fIo.exportToFile(
|
||||
pivotHelper.getPivotHtml(this.$refs.pivotOutput),
|
||||
'pivot.html',
|
||||
'text/html'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pivot-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
.pivot-output,
|
||||
.custom-chart-output {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pivot-warning {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:deep(.pvtTable) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
:deep(table.pvtTable tbody tr td),
|
||||
:deep(table.pvtTable thead tr th),
|
||||
:deep(table.pvtTable tbody tr th) {
|
||||
border-color: var(--color-border-light);
|
||||
}
|
||||
:deep(table.pvtTable thead tr th),
|
||||
:deep(table.pvtTable tbody tr th) {
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
:deep(table.pvtTable tbody tr td) {
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
|
||||
.pivot-output :deep(textarea) {
|
||||
color: var(--color-text-base);
|
||||
min-width: 100%;
|
||||
height: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.pivot-output :deep(textarea:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
.pivot-output:empty {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
:deep(.js-plotly-plot) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
121
src/components/Pivot/pivotHelper.js
Normal file
121
src/components/Pivot/pivotHelper.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import $ from 'jquery'
|
||||
import 'pivottable'
|
||||
import 'pivottable/dist/export_renderers.js'
|
||||
import 'pivottable/dist/plotly_renderers.js'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
||||
export const zeroValAggregators = [
|
||||
'Count',
|
||||
'Count as Fraction of Total',
|
||||
'Count as Fraction of Rows',
|
||||
'Count as Fraction of Columns'
|
||||
]
|
||||
|
||||
export const twoValAggregators = [
|
||||
'Sum over Sum',
|
||||
'80% Upper Bound',
|
||||
'80% Lower Bound'
|
||||
]
|
||||
|
||||
export function _getDataSources(pivotData) {
|
||||
const rowKeys = pivotData.getRowKeys()
|
||||
const colKeys = pivotData.getColKeys()
|
||||
|
||||
const dataSources = {
|
||||
'Column keys': colKeys.map(colKey => colKey.join('-')),
|
||||
'Row keys': rowKeys.map(rowKey => rowKey.join('-'))
|
||||
}
|
||||
|
||||
const dataSourcesByRows = {}
|
||||
const dataSourcesByCols = {}
|
||||
|
||||
const rowAttrs = pivotData.rowAttrs.join('-')
|
||||
const colAttrs = pivotData.colAttrs.join('-')
|
||||
|
||||
colKeys.forEach(colKey => {
|
||||
const sourceColKey = colAttrs + ':' + colKey.join('-')
|
||||
dataSourcesByCols[sourceColKey] = []
|
||||
rowKeys.forEach(rowKey => {
|
||||
const value = pivotData.getAggregator(rowKey, colKey).value()
|
||||
dataSourcesByCols[sourceColKey].push(value)
|
||||
const sourceRowKey = rowAttrs + ':' + rowKey.join('-')
|
||||
if (!dataSourcesByRows[sourceRowKey]) {
|
||||
dataSourcesByRows[sourceRowKey] = []
|
||||
}
|
||||
dataSourcesByRows[sourceRowKey].push(value)
|
||||
})
|
||||
})
|
||||
|
||||
return Object.assign(dataSources, dataSourcesByCols, dataSourcesByRows)
|
||||
}
|
||||
|
||||
function customChartRenderer(data, options) {
|
||||
const propsRef = options.getCustomComponentsProps()
|
||||
propsRef.dataSources = _getDataSources(data)
|
||||
return null
|
||||
}
|
||||
|
||||
$.extend(
|
||||
$.pivotUtilities.renderers,
|
||||
$.pivotUtilities.export_renderers,
|
||||
$.pivotUtilities.plotly_renderers,
|
||||
{ 'Custom chart': customChartRenderer }
|
||||
)
|
||||
|
||||
export const renderers = Object.keys($.pivotUtilities.renderers).map(key => {
|
||||
return {
|
||||
name: key,
|
||||
fun: $.pivotUtilities.renderers[key]
|
||||
}
|
||||
})
|
||||
|
||||
export const aggregators = Object.keys($.pivotUtilities.aggregators).map(
|
||||
key => {
|
||||
return {
|
||||
name: key,
|
||||
fun: $.pivotUtilities.aggregators[key]
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export async function getPivotCanvas(pivotOutput) {
|
||||
const tableElement = pivotOutput.querySelector('.pvtTable')
|
||||
return await html2canvas(tableElement, { logging: false })
|
||||
}
|
||||
|
||||
export function getPivotHtml(pivotOutput) {
|
||||
return `
|
||||
<style>
|
||||
table.pvtTable {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
min-width: 100%;
|
||||
}
|
||||
table.pvtTable .pvtColLabel {
|
||||
text-align: center;
|
||||
}
|
||||
table.pvtTable .pvtTotalLabel {
|
||||
text-align: right;
|
||||
}
|
||||
table.pvtTable tbody tr td {
|
||||
color: #506784;
|
||||
border: 1px solid #DFE8F3;
|
||||
text-align: right;
|
||||
}
|
||||
table.pvtTable thead tr th,
|
||||
table.pvtTable tbody tr th {
|
||||
background-color: #506784;
|
||||
color: #fff;
|
||||
border: 1px solid #DFE8F3;
|
||||
}
|
||||
</style>
|
||||
${pivotOutput.outerHTML}
|
||||
`
|
||||
}
|
||||
|
||||
export default {
|
||||
getPivotCanvas,
|
||||
getPivotHtml
|
||||
}
|
||||
70
src/components/RunResult/Record/RowNavigator.vue
Normal file
70
src/components/RunResult/Record/RowNavigator.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="record-navigator">
|
||||
<icon-button
|
||||
:disabled="modelValue === 0"
|
||||
tooltip="First row"
|
||||
tooltipPosition="top-left"
|
||||
class="first"
|
||||
@click="$emit('update:modelValue', 0)"
|
||||
>
|
||||
<edge-arrow-icon :disabled="false" />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
:disabled="modelValue === 0"
|
||||
tooltip="Previous row"
|
||||
tooltipPosition="top-left"
|
||||
class="prev"
|
||||
@click="$emit('update:modelValue', modelValue - 1)"
|
||||
>
|
||||
<arrow-icon :disabled="false" />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
:disabled="modelValue === total - 1"
|
||||
tooltip="Next row"
|
||||
tooltipPosition="top-left"
|
||||
class="next"
|
||||
@click="$emit('update:modelValue', modelValue + 1)"
|
||||
>
|
||||
<arrow-icon :disabled="false" />
|
||||
</icon-button>
|
||||
<icon-button
|
||||
:disabled="modelValue === total - 1"
|
||||
tooltip="Last row"
|
||||
tooltipPosition="top-left"
|
||||
class="last"
|
||||
@click="$emit('update:modelValue', total - 1)"
|
||||
>
|
||||
<edge-arrow-icon :disabled="false" />
|
||||
</icon-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from '@/components/Common/IconButton'
|
||||
import ArrowIcon from '@/components/svg/arrow'
|
||||
import EdgeArrowIcon from '@/components/svg/edgeArrow'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconButton,
|
||||
ArrowIcon,
|
||||
EdgeArrowIcon
|
||||
},
|
||||
props: {
|
||||
modelValue: Number,
|
||||
total: Number
|
||||
},
|
||||
emits: ['update:modelValue']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.record-navigator {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.record-navigator .next,
|
||||
.record-navigator .last {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
228
src/components/RunResult/Record/index.vue
Normal file
228
src/components/RunResult/Record/index.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="record-view">
|
||||
<div class="table-container">
|
||||
<table
|
||||
ref="table"
|
||||
class="sqliteviz-table"
|
||||
tabindex="0"
|
||||
@keydown="onTableKeydown"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th>
|
||||
<div class="cell-data">Row #{{ currentRowIndex + 1 }}</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(col, index) in columns" :key="index">
|
||||
<th class="column-cell" :title="col">
|
||||
{{ col }}
|
||||
</th>
|
||||
<td
|
||||
:key="index"
|
||||
:data-col="index"
|
||||
:data-row="currentRowIndex"
|
||||
:data-isNull="isNull(getCellValue(col))"
|
||||
:data-isBlob="isBlob(getCellValue(col))"
|
||||
:aria-selected="false"
|
||||
@click="onCellClick"
|
||||
>
|
||||
<div class="cell-data">
|
||||
{{ getCellText(col) }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="table-footer">
|
||||
<div class="table-footer-count">
|
||||
{{ rowCount }} {{ rowCount === 1 ? 'row' : 'rows' }} retrieved
|
||||
<span v-if="time">in {{ time }}</span>
|
||||
</div>
|
||||
|
||||
<row-navigator v-model="currentRowIndex" :total="rowCount" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RowNavigator from './RowNavigator.vue'
|
||||
import { nextTick } from 'vue'
|
||||
|
||||
export default {
|
||||
components: { RowNavigator },
|
||||
props: {
|
||||
dataSet: Object,
|
||||
time: String,
|
||||
rowIndex: { type: Number, default: 0 },
|
||||
selectedColumnIndex: Number
|
||||
},
|
||||
emits: ['updateSelectedCell'],
|
||||
data() {
|
||||
return {
|
||||
selectedCellElement: null,
|
||||
currentRowIndex: this.rowIndex
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
columns() {
|
||||
return this.dataSet.columns
|
||||
},
|
||||
rowCount() {
|
||||
return this.dataSet.values[this.columns[0]].length
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async currentRowIndex() {
|
||||
await nextTick()
|
||||
if (this.selectedCellElement) {
|
||||
const previouslySelected = this.selectedCellElement
|
||||
this.selectCell(null)
|
||||
this.selectCell(previouslySelected)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const col = this.selectedColumnIndex
|
||||
const row = this.currentRowIndex
|
||||
const cell = this.$refs.table.querySelector(
|
||||
`td[data-col="${col}"][data-row="${row}"]`
|
||||
)
|
||||
if (cell) {
|
||||
this.selectCell(cell)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isBlob(value) {
|
||||
return value && ArrayBuffer.isView(value)
|
||||
},
|
||||
isNull(value) {
|
||||
return value === null
|
||||
},
|
||||
getCellValue(col) {
|
||||
return this.dataSet.values[col][this.currentRowIndex]
|
||||
},
|
||||
getCellText(col) {
|
||||
const value = this.getCellValue(col)
|
||||
if (this.isNull(value)) {
|
||||
return 'NULL'
|
||||
}
|
||||
if (this.isBlob(value)) {
|
||||
return 'BLOB'
|
||||
}
|
||||
return value
|
||||
},
|
||||
onTableKeydown(e) {
|
||||
const keyCodeMap = {
|
||||
38: 'up',
|
||||
40: 'down'
|
||||
}
|
||||
|
||||
if (
|
||||
!this.selectedCellElement ||
|
||||
!Object.keys(keyCodeMap).includes(e.keyCode.toString())
|
||||
) {
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
|
||||
this.moveFocusInTable(this.selectedCellElement, keyCodeMap[e.keyCode])
|
||||
},
|
||||
onCellClick(e) {
|
||||
this.selectCell(e.target.closest('td'), false)
|
||||
},
|
||||
selectCell(cell, scrollTo = true) {
|
||||
if (!cell) {
|
||||
if (this.selectedCellElement) {
|
||||
this.selectedCellElement.ariaSelected = 'false'
|
||||
}
|
||||
this.selectedCellElement = cell
|
||||
} else if (!cell.ariaSelected || cell.ariaSelected === 'false') {
|
||||
if (this.selectedCellElement) {
|
||||
this.selectedCellElement.ariaSelected = 'false'
|
||||
}
|
||||
cell.ariaSelected = 'true'
|
||||
this.selectedCellElement = cell
|
||||
} else {
|
||||
cell.ariaSelected = 'false'
|
||||
this.selectedCellElement = null
|
||||
}
|
||||
|
||||
if (this.selectedCellElement && scrollTo) {
|
||||
this.selectedCellElement.scrollIntoView()
|
||||
this.selectedCellElement
|
||||
.closest('.table-container')
|
||||
.scrollTo({ left: 0 })
|
||||
}
|
||||
|
||||
this.$emit('updateSelectedCell', this.selectedCellElement)
|
||||
},
|
||||
moveFocusInTable(initialCell, direction) {
|
||||
const currentColIndex = +initialCell.dataset.col
|
||||
const newColIndex =
|
||||
direction === 'up' ? currentColIndex - 1 : currentColIndex + 1
|
||||
|
||||
const newCell = this.$refs.table.querySelector(
|
||||
`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`
|
||||
)
|
||||
if (newCell) {
|
||||
this.selectCell(newCell)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table.sqliteviz-table:focus {
|
||||
outline: none;
|
||||
}
|
||||
.sqliteviz-table tbody td:hover {
|
||||
background-color: var(--color-bg-light-3);
|
||||
}
|
||||
.sqliteviz-table tbody td[aria-selected='true'] {
|
||||
box-shadow: inset 0 0 0 1px var(--color-accent);
|
||||
}
|
||||
|
||||
table.sqliteviz-table {
|
||||
margin-top: 0;
|
||||
}
|
||||
.sqliteviz-table thead tr th {
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
text-align: left;
|
||||
}
|
||||
.sqliteviz-table tbody tr th {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-bg-dark);
|
||||
color: var(--color-text-light);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
align-items: center;
|
||||
}
|
||||
.record-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.column-cell {
|
||||
max-width: 150px;
|
||||
width: 0;
|
||||
}
|
||||
</style>
|
||||
222
src/components/RunResult/ValueViewer.vue
Normal file
222
src/components/RunResult/ValueViewer.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="value-viewer">
|
||||
<div class="value-viewer-toolbar">
|
||||
<button
|
||||
v-for="format in formats"
|
||||
:key="format.value"
|
||||
type="button"
|
||||
:aria-selected="currentFormat === format.value"
|
||||
:class="format.value"
|
||||
@click="currentFormat = format.value"
|
||||
>
|
||||
{{ format.text }}
|
||||
</button>
|
||||
|
||||
<button type="button" class="copy" @click="copyToClipboard">Copy</button>
|
||||
<button
|
||||
type="button"
|
||||
class="line-wrap"
|
||||
:aria-selected="lineWrapping === true"
|
||||
@click="lineWrapping = !lineWrapping"
|
||||
>
|
||||
Line wrap
|
||||
</button>
|
||||
</div>
|
||||
<div class="value-body">
|
||||
<codemirror
|
||||
v-if="currentFormat === 'json' && formattedJson"
|
||||
:value="formattedJson"
|
||||
:options="cmOptions"
|
||||
class="json-value original-style"
|
||||
/>
|
||||
<pre
|
||||
v-if="currentFormat === 'text'"
|
||||
:class="[
|
||||
'text-value',
|
||||
{ 'meta-value': isNull || isBlob },
|
||||
{ 'line-wrap': lineWrapping }
|
||||
]"
|
||||
>{{ cellText }}</pre
|
||||
>
|
||||
<logs
|
||||
v-if="messages && messages.length > 0"
|
||||
:messages="messages"
|
||||
class="messages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Codemirror from 'codemirror-editor-vue3'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/mode/javascript/javascript.js'
|
||||
import 'codemirror/addon/fold/foldcode.js'
|
||||
import 'codemirror/addon/fold/foldgutter.js'
|
||||
import 'codemirror/addon/fold/foldgutter.css'
|
||||
import 'codemirror/addon/fold/brace-fold.js'
|
||||
import 'codemirror/theme/neo.css'
|
||||
import cIo from '@/lib/utils/clipboardIo'
|
||||
import Logs from '@/components/Common/Logs'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Codemirror,
|
||||
Logs
|
||||
},
|
||||
props: {
|
||||
cellValue: [String, Number, Uint8Array]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formats: [
|
||||
{ text: 'Text', value: 'text' },
|
||||
{ text: 'JSON', value: 'json' }
|
||||
],
|
||||
currentFormat: 'text',
|
||||
lineWrapping: false,
|
||||
formattedJson: '',
|
||||
messages: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cmOptions() {
|
||||
return {
|
||||
tabSize: 4,
|
||||
mode: { name: 'javascript', json: true },
|
||||
theme: 'neo',
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
lineWrapping: this.lineWrapping,
|
||||
foldGutter: true,
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
||||
readOnly: true
|
||||
}
|
||||
},
|
||||
isBlob() {
|
||||
return this.cellValue && ArrayBuffer.isView(this.cellValue)
|
||||
},
|
||||
isNull() {
|
||||
return this.cellValue === null
|
||||
},
|
||||
cellText() {
|
||||
const value = this.cellValue
|
||||
if (this.isNull) {
|
||||
return 'NULL'
|
||||
}
|
||||
if (this.isBlob) {
|
||||
return 'BLOB'
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentFormat() {
|
||||
this.messages = []
|
||||
this.formattedJson = ''
|
||||
if (this.currentFormat === 'json') {
|
||||
this.formatJson(this.cellValue)
|
||||
}
|
||||
},
|
||||
cellValue() {
|
||||
this.messages = []
|
||||
if (this.currentFormat === 'json') {
|
||||
this.formatJson(this.cellValue)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatJson(jsonStr) {
|
||||
try {
|
||||
this.formattedJson = JSON.stringify(JSON.parse(jsonStr), null, 4)
|
||||
} catch (e) {
|
||||
this.formattedJson = ''
|
||||
this.messages = [
|
||||
{
|
||||
type: 'error',
|
||||
message: "Can't parse JSON."
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
copyToClipboard() {
|
||||
cIo.copyText(
|
||||
this.currentFormat === 'json' ? this.formattedJson : this.cellValue,
|
||||
'The value is copied to clipboard.'
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.value-viewer {
|
||||
background-color: var(--color-white);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.value-viewer-toolbar {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.value-body {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
.text-value {
|
||||
padding: 0 8px;
|
||||
margin: 0;
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
|
||||
.json-value {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.text-value.meta-value {
|
||||
font-style: italic;
|
||||
color: var(--color-text-light-2);
|
||||
}
|
||||
|
||||
.text-value.line-wrap {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.value-viewer-toolbar button {
|
||||
font-size: 10px;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-base);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.value-viewer-toolbar button:hover {
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.value-viewer-toolbar button[aria-selected='true'] {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
:deep(.codemirror-container) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
:deep(.CodeMirror) {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
:deep(.CodeMirror-cursor) {
|
||||
width: 1px;
|
||||
background: var(--color-text-base);
|
||||
}
|
||||
</style>
|
||||
387
src/components/RunResult/index.vue
Normal file
387
src/components/RunResult/index.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div ref="runResultPanel" class="run-result-panel">
|
||||
<component
|
||||
:is="viewValuePanelVisible ? 'splitpanes' : 'div'"
|
||||
:before="{ size: 50, max: 100 }"
|
||||
:after="{ size: 50, max: 100 }"
|
||||
:default="{ before: 50, after: 50 }"
|
||||
class="run-result-panel-content"
|
||||
>
|
||||
<template #left-pane>
|
||||
<div
|
||||
:id="'run-result-left-pane-' + tab.id"
|
||||
class="result-set-container"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
:id="'run-result-result-set-' + tab.id"
|
||||
class="result-set-container"
|
||||
/>
|
||||
<template v-if="viewValuePanelVisible" #right-pane>
|
||||
<div class="value-viewer-container">
|
||||
<value-viewer
|
||||
v-show="selectedCell"
|
||||
:cellValue="
|
||||
selectedCell
|
||||
? result.values[result.columns[selectedCell.dataset.col]][
|
||||
selectedCell.dataset.row
|
||||
]
|
||||
: ''
|
||||
"
|
||||
/>
|
||||
<div v-show="!selectedCell" class="table-preview">
|
||||
No cell selected to view
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</component>
|
||||
|
||||
<side-tool-bar panel="table" @switch-to="$emit('switchTo', $event)">
|
||||
<icon-button
|
||||
:disabled="!result"
|
||||
tooltip="Export result set to CSV file"
|
||||
tooltipPosition="top-left"
|
||||
@click="exportToCsv"
|
||||
>
|
||||
<export-to-csv-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="copyToClipboardBtn"
|
||||
:disabled="!result"
|
||||
tooltip="Copy result set to clipboard"
|
||||
tooltipPosition="top-left"
|
||||
@click="prepareCopy"
|
||||
>
|
||||
<clipboard-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="rowBtn"
|
||||
:disabled="!result"
|
||||
tooltip="View record"
|
||||
tooltipPosition="top-left"
|
||||
:active="viewRecord"
|
||||
@click="toggleViewRecord"
|
||||
>
|
||||
<row-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="viewCellValueBtn"
|
||||
:disabled="!result"
|
||||
tooltip="View value"
|
||||
tooltipPosition="top-left"
|
||||
:active="viewValuePanelVisible"
|
||||
@click="toggleViewValuePanel"
|
||||
>
|
||||
<view-cell-value-icon />
|
||||
</icon-button>
|
||||
</side-tool-bar>
|
||||
|
||||
<loading-dialog
|
||||
v-model="showLoadingDialog"
|
||||
loadingMsg="Building CSV..."
|
||||
successMsg="CSV is ready"
|
||||
actionBtnName="Copy"
|
||||
title="Copy to clipboard"
|
||||
:loading="preparingCopy"
|
||||
@action="copyToClipboard"
|
||||
@cancel="cancelCopy"
|
||||
/>
|
||||
|
||||
<teleport defer :to="resultSetTeleportTarget" :disabled="!enableTeleport">
|
||||
<div>
|
||||
<div
|
||||
v-show="result === null && !isGettingResults && !error"
|
||||
class="table-preview result-before"
|
||||
>
|
||||
Run your query and get results here
|
||||
</div>
|
||||
<div v-if="isGettingResults" class="table-preview result-in-progress">
|
||||
<loading-indicator :size="30" />
|
||||
Fetching results...
|
||||
</div>
|
||||
<div
|
||||
v-show="result === undefined && !isGettingResults && !error"
|
||||
class="table-preview result-empty"
|
||||
>
|
||||
No rows retrieved according to your query
|
||||
</div>
|
||||
<logs v-if="error" :messages="[error]" />
|
||||
<sql-table
|
||||
v-if="result && !viewRecord"
|
||||
:data-set="result"
|
||||
:time="time"
|
||||
:pageSize="pageSize"
|
||||
:page="defaultPage"
|
||||
:selectedCellCoordinates="defaultSelectedCell"
|
||||
class="straight"
|
||||
@update-selected-cell="onUpdateSelectedCell"
|
||||
/>
|
||||
|
||||
<record
|
||||
v-if="result && viewRecord"
|
||||
ref="recordView"
|
||||
:data-set="result"
|
||||
:time="time"
|
||||
:selectedColumnIndex="selectedCell ? +selectedCell.dataset.col : 0"
|
||||
:rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
|
||||
@update-selected-cell="onUpdateSelectedCell"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Logs from '@/components/Common/Logs'
|
||||
import SqlTable from '@/components/SqlTable'
|
||||
import LoadingIndicator from '@/components/Common/LoadingIndicator'
|
||||
import SideToolBar from '@/components/SideToolBar'
|
||||
import Splitpanes from '@/components/Common/Splitpanes'
|
||||
import ExportToCsvIcon from '@/components/svg/exportToCsv'
|
||||
import ClipboardIcon from '@/components/svg/clipboard'
|
||||
import ViewCellValueIcon from '@/components/svg/viewCellValue'
|
||||
import RowIcon from '@/components/svg/row'
|
||||
import IconButton from '@/components/Common/IconButton'
|
||||
import csv from '@/lib/csv'
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import cIo from '@/lib/utils/clipboardIo'
|
||||
import time from '@/lib/utils/time'
|
||||
import loadingDialog from '@/components/Common/LoadingDialog'
|
||||
import events from '@/lib/utils/events'
|
||||
import ValueViewer from './ValueViewer'
|
||||
import Record from './Record/index.vue'
|
||||
|
||||
export default {
|
||||
name: 'RunResult',
|
||||
components: {
|
||||
SqlTable,
|
||||
LoadingIndicator,
|
||||
Logs,
|
||||
SideToolBar,
|
||||
ExportToCsvIcon,
|
||||
IconButton,
|
||||
ClipboardIcon,
|
||||
ViewCellValueIcon,
|
||||
RowIcon,
|
||||
loadingDialog,
|
||||
ValueViewer,
|
||||
Record,
|
||||
Splitpanes
|
||||
},
|
||||
props: {
|
||||
tab: Object,
|
||||
result: Object,
|
||||
isGettingResults: Boolean,
|
||||
error: Object,
|
||||
time: [String, Number]
|
||||
},
|
||||
emits: ['switchTo'],
|
||||
data() {
|
||||
return {
|
||||
resizeObserver: null,
|
||||
pageSize: 20,
|
||||
preparingCopy: false,
|
||||
dataToCopy: null,
|
||||
viewValuePanelVisible: false,
|
||||
selectedCell: null,
|
||||
viewRecord: false,
|
||||
defaultPage: 1,
|
||||
defaultSelectedCell: null,
|
||||
enableTeleport: this.$store.state.isWorkspaceVisible,
|
||||
showLoadingDialog: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resultSetTeleportTarget() {
|
||||
if (!this.enableTeleport) {
|
||||
return undefined
|
||||
}
|
||||
const base = `#${
|
||||
this.viewValuePanelVisible
|
||||
? 'run-result-left-pane'
|
||||
: 'run-result-result-set'
|
||||
}`
|
||||
const tabIdPostfix = `-${this.tab.id}`
|
||||
return base + tabIdPostfix
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
result() {
|
||||
this.defaultSelectedCell = null
|
||||
this.selectedCell = null
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.enableTeleport = true
|
||||
},
|
||||
deactivated() {
|
||||
this.enableTeleport = false
|
||||
},
|
||||
mounted() {
|
||||
this.resizeObserver = new ResizeObserver(this.handleResize)
|
||||
this.resizeObserver.observe(this.$refs.runResultPanel)
|
||||
this.calculatePageSize()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.resizeObserver.unobserve(this.$refs.runResultPanel)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.calculatePageSize()
|
||||
},
|
||||
|
||||
calculatePageSize() {
|
||||
const runResultPanel = this.$refs.runResultPanel
|
||||
// 27 - table footer hight
|
||||
// 5 - padding-bottom of rounded table container
|
||||
// 35 - height of table header
|
||||
const freeSpace = runResultPanel.offsetHeight - 27 - 5 - 35
|
||||
this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
|
||||
},
|
||||
|
||||
exportToCsv() {
|
||||
if (this.result && this.result.values) {
|
||||
events.send(
|
||||
'resultset.export',
|
||||
this.result.values[this.result.columns[0]].length,
|
||||
{ to: 'csv' }
|
||||
)
|
||||
}
|
||||
|
||||
fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
|
||||
},
|
||||
|
||||
async prepareCopy() {
|
||||
if (this.result && this.result.values) {
|
||||
events.send(
|
||||
'resultset.export',
|
||||
this.result.values[this.result.columns[0]].length,
|
||||
{ to: 'clipboard' }
|
||||
)
|
||||
}
|
||||
|
||||
if ('ClipboardItem' in window) {
|
||||
this.preparingCopy = true
|
||||
this.showLoadingDialog = true
|
||||
const t0 = performance.now()
|
||||
|
||||
await time.sleep(0)
|
||||
this.dataToCopy = csv.serialize(this.result)
|
||||
const t1 = performance.now()
|
||||
if (t1 - t0 < 950) {
|
||||
this.copyToClipboard()
|
||||
} else {
|
||||
this.preparingCopy = false
|
||||
}
|
||||
} else {
|
||||
alert(
|
||||
"Your browser doesn't support copying into the clipboard. " +
|
||||
'If you use Firefox you can enable it ' +
|
||||
'by setting dom.events.asyncClipboard.clipboardItem to true.'
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
copyToClipboard() {
|
||||
cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
|
||||
this.showLoadingDialog = false
|
||||
},
|
||||
|
||||
cancelCopy() {
|
||||
this.dataToCopy = null
|
||||
},
|
||||
|
||||
toggleViewValuePanel() {
|
||||
this.viewValuePanelVisible = !this.viewValuePanelVisible
|
||||
},
|
||||
|
||||
toggleViewRecord() {
|
||||
if (this.viewRecord) {
|
||||
this.defaultSelectedCell = {
|
||||
row: this.$refs.recordView.currentRowIndex,
|
||||
col: this.selectedCell ? +this.selectedCell.dataset.col : 0
|
||||
}
|
||||
this.defaultPage = Math.ceil(
|
||||
(this.$refs.recordView.currentRowIndex + 1) / this.pageSize
|
||||
)
|
||||
}
|
||||
|
||||
this.viewRecord = !this.viewRecord
|
||||
},
|
||||
|
||||
onUpdateSelectedCell(e) {
|
||||
this.selectedCell = e
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.run-result-panel {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.run-result-panel-content {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.result-set-container,
|
||||
.result-set-container > div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.value-viewer-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--color-white);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-preview {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-text-base);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-in-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
will-change: opacity;
|
||||
/*
|
||||
We need to show loader in 1 sec after starting query execution. We can't do that with
|
||||
setTimeout because the main thread can be busy by getting a result set from the web worker.
|
||||
But we can use CSS animation for opacity. Opacity triggers changes only in the Composite Layer
|
||||
stage in rendering waterfall. Hence it can be processed only with Compositor Thread while
|
||||
the Main Thread processes a result set.
|
||||
https://www.viget.com/articles/animation-performance-101-browser-under-the-hood/
|
||||
*/
|
||||
animation: show-loader 1s linear 0s 1;
|
||||
}
|
||||
|
||||
@keyframes show-loader {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
55
src/components/Schema/TableDescription.vue
Normal file
55
src/components/Schema/TableDescription.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="table-name" @click="colVisible = !colVisible">
|
||||
<tree-chevron :expanded="colVisible" />
|
||||
{{ name }}
|
||||
</div>
|
||||
<div v-show="colVisible" class="columns">
|
||||
<div v-for="(col, index) in columns" :key="index" class="column">
|
||||
{{ col.name }}
|
||||
<span class="column-type">{{ col.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeChevron from '@/components/svg/treeChevron'
|
||||
|
||||
export default {
|
||||
name: 'TableDescription',
|
||||
components: { TreeChevron },
|
||||
props: {
|
||||
name: String,
|
||||
columns: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-name,
|
||||
.column {
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
.table-name:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.columns {
|
||||
margin-left: 24px;
|
||||
}
|
||||
.column-type {
|
||||
display: inline-block;
|
||||
background-color: var(--color-gray-light-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-small);
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
149
src/components/Schema/index.vue
Normal file
149
src/components/Schema/index.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div id="schema-container">
|
||||
<div id="schema-filter">
|
||||
<text-field v-model="filter" placeholder="Search table" width="100%" />
|
||||
</div>
|
||||
<div id="db">
|
||||
<div class="db-name" @click="schemaVisible = !schemaVisible">
|
||||
<tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
|
||||
{{ dbName }}
|
||||
</div>
|
||||
<db-uploader id="db-edit" type="small" />
|
||||
<export-icon tooltip="Export database" @click="exportToFile" />
|
||||
<add-table-icon @click="addCsvJson" />
|
||||
</div>
|
||||
<div v-show="schemaVisible" class="schema">
|
||||
<table-description
|
||||
v-for="table in schema"
|
||||
:key="table.name"
|
||||
:name="table.name"
|
||||
:columns="table.columns"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Parse csv or json dialog -->
|
||||
<csv-json-import
|
||||
ref="addCsvJson"
|
||||
:file="file"
|
||||
:db="$store.state.db"
|
||||
dialogName="addCsvJson"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fIo from '@/lib/utils/fileIo'
|
||||
import events from '@/lib/utils/events'
|
||||
import TableDescription from './TableDescription'
|
||||
import TextField from '@/components/Common/TextField'
|
||||
import TreeChevron from '@/components/svg/treeChevron'
|
||||
import DbUploader from '@/components/DbUploader'
|
||||
import ExportIcon from '@/components/svg/export'
|
||||
import AddTableIcon from '@/components/svg/addTable'
|
||||
import CsvJsonImport from '@/components/CsvJsonImport'
|
||||
|
||||
export default {
|
||||
name: 'Schema',
|
||||
components: {
|
||||
TableDescription,
|
||||
TextField,
|
||||
TreeChevron,
|
||||
DbUploader,
|
||||
ExportIcon,
|
||||
AddTableIcon,
|
||||
CsvJsonImport
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
schemaVisible: true,
|
||||
filter: null,
|
||||
file: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
schema() {
|
||||
if (!this.$store.state.db.schema) {
|
||||
return []
|
||||
}
|
||||
|
||||
return !this.filter
|
||||
? this.$store.state.db.schema
|
||||
: this.$store.state.db.schema.filter(
|
||||
table =>
|
||||
table.name.toUpperCase().indexOf(this.filter.toUpperCase()) !== -1
|
||||
)
|
||||
},
|
||||
dbName() {
|
||||
return this.$store.state.db.dbName
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportToFile() {
|
||||
this.$store.state.db.export(`${this.dbName}.sqlite`)
|
||||
},
|
||||
async addCsvJson() {
|
||||
this.file = await fIo.getFileFromUser('.csv,.json,.ndjson')
|
||||
await this.$nextTick()
|
||||
const csvJsonImportModal = this.$refs.addCsvJson
|
||||
csvJsonImportModal.reset()
|
||||
await csvJsonImportModal.preview()
|
||||
csvJsonImportModal.open()
|
||||
|
||||
const isJson = fIo.isJSON(this.file) || fIo.isNDJSON(this.file)
|
||||
events.send('database.import', this.file.size, {
|
||||
from: isJson ? 'json' : 'csv',
|
||||
new_db: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#schema-container {
|
||||
position: relative;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.schema {
|
||||
margin-left: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
#schema-filter {
|
||||
padding: 32px 12px;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
background-image: linear-gradient(white 73%, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
}
|
||||
.schema,
|
||||
.db-name {
|
||||
color: var(--color-text-base);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#db {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: -5px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.db-name {
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.db-name:hover .chevron-icon path,
|
||||
:deep(.table-name:hover .chevron-icon path) {
|
||||
fill: var(--color-gray-dark);
|
||||
}
|
||||
</style>
|
||||
75
src/components/SideToolBar.vue
Normal file
75
src/components/SideToolBar.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="side-tool-bar">
|
||||
<icon-button
|
||||
ref="sqlEditorBtn"
|
||||
:active="panel === 'sqlEditor'"
|
||||
tooltip="Switch panel to SQL editor"
|
||||
tooltipPosition="top-left"
|
||||
@click="$emit('switchTo', 'sqlEditor')"
|
||||
>
|
||||
<sql-editor-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="tableBtn"
|
||||
:active="panel === 'table'"
|
||||
tooltip="Switch panel to result set"
|
||||
tooltipPosition="top-left"
|
||||
@click="$emit('switchTo', 'table')"
|
||||
>
|
||||
<table-icon />
|
||||
</icon-button>
|
||||
|
||||
<icon-button
|
||||
ref="dataViewBtn"
|
||||
:active="panel === 'dataView'"
|
||||
tooltip="Switch panel to data view"
|
||||
tooltipPosition="top-left"
|
||||
@click="$emit('switchTo', 'dataView')"
|
||||
>
|
||||
<data-view-icon />
|
||||
</icon-button>
|
||||
|
||||
<div v-if="$slots.default" class="side-tool-bar-divider" />
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from '@/components/Common/IconButton'
|
||||
import TableIcon from '@/components/svg/table'
|
||||
import SqlEditorIcon from '@/components/svg/sqlEditor'
|
||||
import DataViewIcon from '@/components/svg/dataView'
|
||||
|
||||
export default {
|
||||
name: 'SideToolBar',
|
||||
components: {
|
||||
IconButton,
|
||||
SqlEditorIcon,
|
||||
DataViewIcon,
|
||||
TableIcon
|
||||
},
|
||||
props: {
|
||||
panel: String
|
||||
},
|
||||
emits: ['switchTo']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side-tool-bar {
|
||||
background-color: var(--color-bg-light);
|
||||
border-left: 1px solid var(--color-border-light);
|
||||
padding: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.side-tool-bar-divider {
|
||||
width: 26px;
|
||||
height: 1px;
|
||||
background: var(--color-border-light);
|
||||
margin: 6px 0;
|
||||
}
|
||||
</style>
|
||||
58
src/components/SqlEditor/hint.js
Normal file
58
src/components/SqlEditor/hint.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import CM from 'codemirror'
|
||||
import 'codemirror/addon/hint/show-hint.js'
|
||||
import 'codemirror/addon/hint/sql-hint.js'
|
||||
import store from '@/store'
|
||||
|
||||
function _getHintText(hint) {
|
||||
return typeof hint === 'string' ? hint : hint.text
|
||||
}
|
||||
export function getHints(cm, options) {
|
||||
const result = CM.hint.sql(cm, options)
|
||||
|
||||
// Don't show the hint if there is only one option
|
||||
// and the replacingText is already equals to this option
|
||||
const replacedText = cm.getRange(result.from, result.to).toUpperCase()
|
||||
if (
|
||||
result.list.length === 1 &&
|
||||
_getHintText(result.list[0]).toUpperCase() === replacedText
|
||||
) {
|
||||
result.list = []
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const hintOptions = {
|
||||
get tables() {
|
||||
const tables = {}
|
||||
if (store.state.db.schema) {
|
||||
store.state.db.schema.forEach(table => {
|
||||
tables[table.name] = table.columns.map(column => column.name)
|
||||
})
|
||||
}
|
||||
return tables
|
||||
},
|
||||
get defaultTable() {
|
||||
const schema = store.state.db.schema
|
||||
return schema && schema.length === 1 ? schema[0].name : null
|
||||
},
|
||||
completeSingle: false,
|
||||
completeOnSingleClick: true,
|
||||
alignWithWord: false
|
||||
}
|
||||
|
||||
export function showHintOnDemand(editor) {
|
||||
CM.showHint(editor, getHints, hintOptions)
|
||||
}
|
||||
|
||||
export default function showHint(editor) {
|
||||
// Don't show autocomplete after a space or semicolon or in string literals
|
||||
const token = editor.getTokenAt(editor.getCursor())
|
||||
const ch = token.string.slice(-1)
|
||||
const tokenType = token.type
|
||||
if (tokenType === 'string' || !ch || ch === ' ' || ch === ';') {
|
||||
return
|
||||
}
|
||||
|
||||
CM.showHint(editor, getHints, hintOptions)
|
||||
}
|
||||
112
src/components/SqlEditor/index.vue
Normal file
112
src/components/SqlEditor/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="sql-editor-panel">
|
||||
<div class="codemirror-box original-style">
|
||||
<codemirror
|
||||
ref="cm"
|
||||
v-model:value="query"
|
||||
:options="cmOptions"
|
||||
:originalStyle="true"
|
||||
@change="onChange"
|
||||
/>
|
||||
</div>
|
||||
<side-tool-bar panel="sqlEditor" @switch-to="$emit('switchTo', $event)">
|
||||
<icon-button
|
||||
ref="runBtn"
|
||||
:disabled="runDisabled"
|
||||
:loading="isGettingResults"
|
||||
tooltip="Run SQL query"
|
||||
tooltipPosition="top-left"
|
||||
@click="$emit('run')"
|
||||
>
|
||||
<run-icon :disabled="runDisabled" />
|
||||
</icon-button>
|
||||
</side-tool-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import showHint, { showHintOnDemand } from './hint'
|
||||
import time from '@/lib/utils/time'
|
||||
import Codemirror from 'codemirror-editor-vue3'
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
import 'codemirror/theme/neo.css'
|
||||
import 'codemirror/addon/hint/show-hint.css'
|
||||
import 'codemirror/addon/display/autorefresh.js'
|
||||
import SideToolBar from '../SideToolBar'
|
||||
import IconButton from '@/components/Common/IconButton'
|
||||
import RunIcon from '@/components/svg/run'
|
||||
|
||||
export default {
|
||||
name: 'SqlEditor',
|
||||
components: {
|
||||
Codemirror,
|
||||
SideToolBar,
|
||||
IconButton,
|
||||
RunIcon
|
||||
},
|
||||
props: { modelValue: String, isGettingResults: Boolean },
|
||||
emits: ['update:modelValue', 'run', 'switchTo'],
|
||||
data() {
|
||||
return {
|
||||
query: this.modelValue,
|
||||
cmOptions: {
|
||||
tabSize: 4,
|
||||
mode: 'text/x-mysql',
|
||||
theme: 'neo',
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
autoRefresh: true,
|
||||
styleActiveLine: false,
|
||||
extraKeys: { 'Ctrl-Space': showHintOnDemand }
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
runDisabled() {
|
||||
return !this.$store.state.db || !this.query || this.isGettingResults
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query() {
|
||||
this.$emit('update:modelValue', this.query)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange: time.debounce((value, editor) => showHint(editor), 400),
|
||||
focus() {
|
||||
this.$refs.cm.cminstance?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sql-editor-panel {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.codemirror-box {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.codemirror-container) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
:deep(.CodeMirror) {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
:deep(.CodeMirror-cursor) {
|
||||
width: 1px;
|
||||
background: var(--color-text-base);
|
||||
}
|
||||
</style>
|
||||
@@ -69,7 +69,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pager from './Pager.vue'
|
||||
import Pager from '@/components/Common/Pager.vue'
|
||||
|
||||
export default {
|
||||
name: 'SqlTable',
|
||||
180
src/components/Tab.vue
Normal file
180
src/components/Tab.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div v-show="isActive" class="tab-content-container">
|
||||
<splitpanes
|
||||
class="query-results-splitter"
|
||||
horizontal
|
||||
:before="{ size: topPaneSize, max: 100 }"
|
||||
:after="{ size: 100 - topPaneSize, max: 100 }"
|
||||
:default="{ before: 50, after: 50 }"
|
||||
>
|
||||
<template #left-pane>
|
||||
<div :id="'above-' + tab.id" class="above" />
|
||||
</template>
|
||||
<template #right-pane>
|
||||
<div :id="'bottom-' + tab.id" ref="bottomPane" class="bottomPane" />
|
||||
</template>
|
||||
</splitpanes>
|
||||
|
||||
<div :id="'hidden-' + tab.id" class="hidden-part" />
|
||||
|
||||
<teleport
|
||||
defer
|
||||
:to="enableTeleport ? `#${tab.layout.sqlEditor}-${tab.id}` : undefined"
|
||||
:disabled="!enableTeleport"
|
||||
>
|
||||
<sql-editor
|
||||
ref="sqlEditor"
|
||||
v-model="tab.query"
|
||||
:isGettingResults="tab.isGettingResults"
|
||||
@switch-to="onSwitchView('sqlEditor', $event)"
|
||||
@run="tab.execute()"
|
||||
/>
|
||||
</teleport>
|
||||
|
||||
<teleport
|
||||
defer
|
||||
:to="enableTeleport ? `#${tab.layout.table}-${tab.id}` : undefined"
|
||||
:disabled="!enableTeleport"
|
||||
>
|
||||
<run-result
|
||||
:tab="tab"
|
||||
:result="tab.result"
|
||||
:isGettingResults="tab.isGettingResults"
|
||||
:error="tab.error"
|
||||
:time="tab.time"
|
||||
@switch-to="onSwitchView('table', $event)"
|
||||
/>
|
||||
</teleport>
|
||||
|
||||
<teleport
|
||||
defer
|
||||
:to="enableTeleport ? `#${tab.layout.dataView}-${tab.id}` : undefined"
|
||||
:disabled="!enableTeleport"
|
||||
>
|
||||
<data-view
|
||||
ref="dataView"
|
||||
:data-source="(tab.result && tab.result.values) || null"
|
||||
:initOptions="tab.viewOptions"
|
||||
:initMode="tab.viewType"
|
||||
@switch-to="onSwitchView('dataView', $event)"
|
||||
@update="onDataViewUpdate"
|
||||
/>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Splitpanes from '@/components/Common/Splitpanes'
|
||||
import SqlEditor from '@/components/SqlEditor'
|
||||
import DataView from '@/components/DataView'
|
||||
import RunResult from '@/components/RunResult'
|
||||
import { nextTick, computed } from 'vue'
|
||||
|
||||
import events from '@/lib/utils/events'
|
||||
|
||||
export default {
|
||||
name: 'Tab',
|
||||
components: {
|
||||
SqlEditor,
|
||||
DataView,
|
||||
RunResult,
|
||||
Splitpanes
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
tabLayout: computed(() => this.tab.layout)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tab: Object
|
||||
},
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
topPaneSize: this.tab.maximize
|
||||
? this.tab.layout[this.tab.maximize] === 'above'
|
||||
? 100
|
||||
: 0
|
||||
: 50,
|
||||
enableTeleport: this.$store.state.isWorkspaceVisible
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isActive() {
|
||||
return this.tab.id === this.$store.state.currentTabId
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isActive: {
|
||||
immediate: true,
|
||||
async handler() {
|
||||
if (this.isActive) {
|
||||
await nextTick()
|
||||
this.$refs.sqlEditor?.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
'tab.query'() {
|
||||
this.$store.commit('updateTab', {
|
||||
tab: this.tab,
|
||||
newValues: { isSaved: false }
|
||||
})
|
||||
}
|
||||
},
|
||||
async activated() {
|
||||
this.enableTeleport = true
|
||||
if (this.isActive) {
|
||||
await nextTick()
|
||||
this.$refs.sqlEditor.focus()
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
this.enableTeleport = false
|
||||
},
|
||||
async mounted() {
|
||||
this.tab.dataView = this.$refs.dataView
|
||||
},
|
||||
methods: {
|
||||
onSwitchView(from, to) {
|
||||
const fromPosition = this.tab.layout[from]
|
||||
this.tab.layout[from] = this.tab.layout[to]
|
||||
this.tab.layout[to] = fromPosition
|
||||
|
||||
events.send('inquiry.panel', null, { panel: to })
|
||||
},
|
||||
onDataViewUpdate() {
|
||||
this.$store.commit('updateTab', {
|
||||
tab: this.tab,
|
||||
newValues: { isSaved: false }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.above {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.hidden-part {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content-container {
|
||||
background-color: var(--color-white);
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.bottomPane {
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
|
||||
.query-results-splitter {
|
||||
height: calc(100vh - 104px);
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
</style>
|
||||
212
src/components/Tabs.vue
Normal file
212
src/components/Tabs.vue
Normal file
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div id="tabs">
|
||||
<div v-if="tabs.length > 0" id="tabs-header">
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="[{ 'tab-selected': tab.id === selectedTabId }, 'tab']"
|
||||
@click="selectTab(tab.id)"
|
||||
>
|
||||
<div class="tab-name">
|
||||
<span v-show="!tab.isSaved" class="star">*</span>
|
||||
<span v-if="tab.name">{{ tab.name }}</span>
|
||||
<span v-else class="tab-untitled">{{ tab.tempName }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<close-icon
|
||||
class="close-icon"
|
||||
:size="10"
|
||||
@click="beforeCloseTab(tab)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tab v-for="tab in tabs" :key="tab.id" :tab="tab" />
|
||||
<div v-show="tabs.length === 0" id="start-guide">
|
||||
<span class="link" @click="emitCreateTabEvent">Create</span>
|
||||
new inquiry from scratch or open one from
|
||||
<router-link class="link" to="/inquiries">Inquiries</router-link>
|
||||
</div>
|
||||
|
||||
<!--Close tab warning dialog -->
|
||||
<modal modalId="close-warn" class="dialog" contentStyle="width: 560px;">
|
||||
<div class="dialog-header">
|
||||
Close tab
|
||||
{{
|
||||
closingTab !== null
|
||||
? closingTab.name || `[${closingTab.tempName}]`
|
||||
: ''
|
||||
}}
|
||||
<close-icon @click="$modal.hide('close-warn')" />
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
You have unsaved changes. Save changes in
|
||||
{{
|
||||
closingTab !== null
|
||||
? closingTab.name || `[${closingTab.tempName}]`
|
||||
: ''
|
||||
}}
|
||||
before closing?
|
||||
</div>
|
||||
<div class="dialog-buttons-container">
|
||||
<button class="secondary" @click="closeTab(closingTab)">
|
||||
Close without saving
|
||||
</button>
|
||||
<button class="secondary" @click="$modal.hide('close-warn')">
|
||||
Don't close
|
||||
</button>
|
||||
<button class="primary" @click="saveAndClose(closingTab)">
|
||||
Save and close
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tab from './Tab'
|
||||
import CloseIcon from '@/components/svg/close'
|
||||
import eventBus from '@/lib/eventBus'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Tab,
|
||||
CloseIcon
|
||||
},
|
||||
emits: [],
|
||||
data() {
|
||||
return {
|
||||
closingTab: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.$store.state.tabs
|
||||
},
|
||||
selectedTabId() {
|
||||
return this.$store.state.currentTabId
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('beforeunload', this.leavingSqliteviz)
|
||||
},
|
||||
methods: {
|
||||
emitCreateTabEvent() {
|
||||
eventBus.$emit('createNewInquiry')
|
||||
},
|
||||
leavingSqliteviz(event) {
|
||||
if (this.tabs.some(tab => !tab.isSaved)) {
|
||||
event.preventDefault()
|
||||
event.returnValue = ''
|
||||
}
|
||||
},
|
||||
selectTab(id) {
|
||||
this.$store.commit('setCurrentTabId', id)
|
||||
},
|
||||
beforeCloseTab(tab) {
|
||||
this.closingTab = tab
|
||||
if (!tab.isSaved) {
|
||||
this.$modal.show('close-warn')
|
||||
} else {
|
||||
this.closeTab(tab)
|
||||
}
|
||||
},
|
||||
closeTab(tab) {
|
||||
this.$modal.hide('close-warn')
|
||||
this.$store.commit('deleteTab', tab)
|
||||
},
|
||||
saveAndClose(tab) {
|
||||
eventBus.$on('inquirySaved', () => {
|
||||
this.closeTab(tab)
|
||||
eventBus.$off('inquirySaved')
|
||||
})
|
||||
this.selectTab(tab.id)
|
||||
this.$modal.hide('close-warn')
|
||||
this.$nextTick(() => {
|
||||
eventBus.$emit('saveInquiry')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#tabs {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
#tabs-header {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#tabs-header .tab {
|
||||
height: 36px;
|
||||
background-color: var(--color-bg-light);
|
||||
border-right: 1px solid var(--color-border-light);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-base);
|
||||
padding: 0 12px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
max-width: 200px;
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
#tabs-header .tab-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#tabs-header .tab:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tabs-header .tab-selected {
|
||||
color: var(--color-text-active);
|
||||
border-bottom: none;
|
||||
background-color: var(--color-white);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tabs-header .tab-selected:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--color-accent);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#tabs-header .tab.tab-selected:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#start-guide {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--color-text-base);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.link {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
53
src/components/svg/copy.vue
Normal file
53
src/components/svg/copy.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg
|
||||
class="icon"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
@click.stop="onClick"
|
||||
@mouseenter="showTooltip"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<path
|
||||
d="M14.25 15.75H6V5.25H14.25V15.75ZM14.25 3.75H6C5.60218 3.75 5.22064 3.90804 4.93934
|
||||
4.18934C4.65804 4.47064 4.5 4.85218 4.5 5.25V15.75C4.5 16.1478 4.65804 16.5294 4.93934
|
||||
16.8107C5.22064 17.092 5.60218 17.25 6 17.25H14.25C14.6478 17.25 15.0294 17.092 15.3107
|
||||
16.8107C15.592 16.5294 15.75 16.1478 15.75 15.75V5.25C15.75 4.85218 15.592 4.47064
|
||||
15.3107 4.18934C15.0294 3.90804 14.6478 3.75 14.25 3.75ZM12 0.75H3C2.60218 0.75 2.22064
|
||||
0.908035 1.93934 1.18934C1.65804 1.47064 1.5 1.85218 1.5 2.25V12.75H3V2.25H12V0.75Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
</svg>
|
||||
<span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
|
||||
Duplicate inquiry
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tooltipMixin from '@/tooltipMixin'
|
||||
|
||||
export default {
|
||||
name: 'CopyIcon',
|
||||
mixins: [tooltipMixin],
|
||||
emits: ['click'],
|
||||
methods: {
|
||||
onClick() {
|
||||
this.hideTooltip()
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: block;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
52
src/components/svg/delete.vue
Normal file
52
src/components/svg/delete.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg
|
||||
class="icon"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
@click.stop="onClick"
|
||||
@mouseenter="showTooltip($event, 'top-left')"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<path
|
||||
d="M6.75 2.25V3H3V4.5H3.75V14.25C3.75 14.6478 3.90804 15.0294 4.18934 15.3107C4.47064
|
||||
15.592 4.85218 15.75 5.25 15.75H12.75C13.1478 15.75 13.5294 15.592 13.8107
|
||||
15.3107C14.092 15.0294 14.25 14.6478 14.25 14.25V4.5H15V3H11.25V2.25H6.75ZM5.25
|
||||
4.5H12.75V14.25H5.25V4.5ZM6.75 6V12.75H8.25V6H6.75ZM9.75 6V12.75H11.25V6H9.75Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
</svg>
|
||||
<span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
|
||||
Delete inquiry
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tooltipMixin from '@/tooltipMixin'
|
||||
|
||||
export default {
|
||||
name: 'DeleteIcon',
|
||||
mixins: [tooltipMixin],
|
||||
emits: ['click'],
|
||||
methods: {
|
||||
onClick() {
|
||||
this.hideTooltip()
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: block;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
52
src/components/svg/rename.vue
Normal file
52
src/components/svg/rename.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg
|
||||
class="icon"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
@click.stop="onClick"
|
||||
@mouseenter="showTooltip"
|
||||
@mouseleave="hideTooltip"
|
||||
>
|
||||
<path
|
||||
d="M10.545 6.75L11.25 7.455L4.44 14.25H3.75V13.56L10.545 6.75ZM13.245 2.25C13.0575 2.25
|
||||
12.8625 2.325 12.72 2.4675L11.3475 3.84L14.16 6.6525L15.5325 5.28C15.825 4.9875 15.825
|
||||
4.5 15.5325 4.2225L13.7775 2.4675C13.6275 2.3175 13.44 2.25 13.245 2.25ZM10.545
|
||||
4.6425L2.25 12.9375V15.75H5.0625L13.3575 7.455L10.545 4.6425Z"
|
||||
fill="#A2B1C6"
|
||||
/>
|
||||
</svg>
|
||||
<span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
|
||||
Rename inquiry
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tooltipMixin from '@/tooltipMixin'
|
||||
|
||||
export default {
|
||||
name: 'RenameIcon',
|
||||
mixins: [tooltipMixin],
|
||||
emits: ['click'],
|
||||
methods: {
|
||||
onClick() {
|
||||
this.hideTooltip()
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: block;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.icon:hover path {
|
||||
fill: var(--color-accent);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user