change code structure

src/views/Main/Editor/Tabs/Tab/Chart/chartHelper.js

@@ -0,0 +1,40 @@
+import dereference from 'react-chart-editor/lib/lib/dereference'
+
+export function getDataSourcesFromSqlResult (sqlResult) {
+  if (!sqlResult) {
+    return {}
+  }
+  const dataSorces = {}
+  const matrix = sqlResult.values
+  const [row] = matrix
+  const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
+  sqlResult.columns.forEach((column, index) => {
+    dataSorces[column] = transposedMatrix[index]
+  })
+  return dataSorces
+}
+
+export function getOptionsFromDataSources (dataSources) {
+  return Object.keys(dataSources).map(name => ({
+    value: name,
+    label: name
+  }))
+}
+
+export function getChartStateForSave (state, dataSources) {
+  // we don't need to save the data, only settings
+  // so we modify state.data using dereference
+  const stateCopy = JSON.parse(JSON.stringify(state))
+  const emptySources = {}
+  for (const key in dataSources) {
+    emptySources[key] = []
+  }
+  dereference(stateCopy.data, emptySources)
+  return stateCopy
+}
+
+export default {
+  getDataSourcesFromSqlResult,
+  getOptionsFromDataSources,
+  getChartStateForSave
+}

src/views/Main/Editor/Tabs/Tab/Chart/index.vue

@@ -0,0 +1,98 @@
+<template>
+<div v-show="visible" class="chart-container">
+  <div class="warning chart-warning" v-show="!sqlResult && visible">
+    There is no data to build a chart. Run your sql query and make sure the result is not empty.
+  </div>
+  <PlotlyEditor
+    :data="state.data"
+    :layout="state.layout"
+    :frames="state.frames"
+    :config="{ editable: true, displaylogo: false }"
+    :dataSources="dataSources"
+    :dataSourceOptions="dataSourceOptions"
+    :plotly="plotly"
+    @onUpdate="update"
+    @onRender="go"
+    :useResizeHandler="true"
+    :debug="true"
+    :advancedTraceTypeSelector="true"
+    class="chart"
+    ref="plotlyEditor"
+    :style="{ height: !sqlResult ? 'calc(100% - 40px)' : '100%' }"
+  />
+</div>
+</template>
+
+<script>
+import plotly from 'plotly.js/dist/plotly'
+import 'react-chart-editor/lib/react-chart-editor.min.css'
+
+import PlotlyEditor from 'react-chart-editor'
+import chartHelper from './chartHelper'
+import dereference from 'react-chart-editor/lib/lib/dereference'
+
+export default {
+  name: 'Chart',
+  props: ['sqlResult', 'initChart', 'visible'],
+  components: {
+    PlotlyEditor
+  },
+  data () {
+    return {
+      plotly: plotly,
+      state: this.initChart || {
+        data: [],
+        layout: {},
+        frames: []
+      }
+    }
+  },
+  computed: {
+    dataSources () {
+      return chartHelper.getDataSourcesFromSqlResult(this.sqlResult)
+    },
+    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
+      dereference(this.state.data, this.dataSources)
+    }
+  },
+  methods: {
+    go (data, layout, frames) {
+      // TODO: check changes and enable Save button if needed
+    },
+    update (data, layout, frames) {
+      this.state = { data, layout, frames }
+      this.$emit('update')
+    },
+    getChartStateForSave () {
+      return chartHelper.getChartStateForSave(this.state, this.dataSources)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chart-container {
+  height: calc(100% - 89px);
+}
+
+.chart-warning {
+  height: 40px;
+  line-height: 40px;
+}
+
+.chart {
+  border-top: 1px solid var(--color-border);
+  min-height: 242px;
+}
+
+>>> .editor_controls .sidebar__item:before {
+  width: 0;
+}
+</style>

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

@@ -0,0 +1,45 @@
+import CM from 'codemirror'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/sql-hint.js'
+import store from '@/store'
+
+export function getHints (cm, options) {
+  const token = cm.getTokenAt(cm.getCursor()).string.toUpperCase()
+  const result = CM.hint.sql(cm, options)
+  // Don't show the hint if there is only one option
+  // and the token is already completed with this option
+  if (result.list.length === 1 && result.list[0].text.toUpperCase() === token) {
+    result.list = []
+  }
+  return result
+}
+
+const hintOptions = {
+  get tables () {
+    const tables = {}
+    if (store.state.schema) {
+      store.state.schema.forEach(table => {
+        tables[table.name] = table.columns.map(column => column.name)
+      })
+    }
+    return tables
+  },
+  get defaultTable () {
+    const schema = store.state.schema
+    return schema && schema.length === 1 ? schema[0].name : null
+  },
+  completeSingle: false,
+  completeOnSingleClick: true,
+  alignWithWord: false
+}
+
+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)
+}

src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="codemirror-container">
+    <codemirror v-model="query" :options="cmOptions" @changes="onChange" />
+  </div>
+</template>
+
+<script>
+import showHint from './hint'
+import { debounce } from 'debounce'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/theme/neo.css'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/display/autorefresh.js'
+
+export default {
+  name: 'SqlEditor',
+  props: ['value'],
+  components: { codemirror },
+  data () {
+    return {
+      query: this.value,
+      cmOptions: {
+        // codemirror options
+        tabSize: 4,
+        mode: 'text/x-mysql',
+        theme: 'neo',
+        lineNumbers: true,
+        line: true,
+        autofocus: true,
+        autoRefresh: true
+      }
+    }
+  },
+  watch: {
+    query () {
+      this.$emit('input', this.query)
+    }
+  },
+  methods: {
+    onChange: debounce(showHint, 400)
+  }
+}
+</script>
+
+<style scoped>
+.codemirror-container {
+  flex-grow: 1;
+  min-height: 0;
+}
+
+>>> .vue-codemirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror-cursor {
+  width: 1px;
+  background: var(--color-text-base);
+}
+</style>

src/views/Main/Editor/Tabs/Tab/ViewSwitcher.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="view-switcher">
+    <div
+      :class="['table-mode', {'active-mode': view === 'table'}]"
+      @click="$emit('update:view','table')"
+    >
+      Table
+    </div>
+    <div
+      :class="['chart-mode', {'active-mode': view === 'chart'}]"
+      @click="$emit('update:view','chart')"
+    >
+      Chart
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ViewSwitcher',
+  props: ['view']
+}
+</script>
+
+<style scoped>
+.view-switcher {
+  height: 28px;
+  display: flex;
+  padding: 30px;
+  justify-content: center;
+}
+.view-switcher div {
+  height: 100%;
+  width: 136px;
+  box-sizing: border-box;
+  line-height: 28px;
+  font-size: 12px;
+  cursor: pointer;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-base);
+  text-align: center;
+  font-weight: 400;
+}
+.view-switcher div:hover {
+  background-color: var(--color-bg-light);
+  color: var(--color-text-active);
+}
+.view-switcher div.active-mode {
+  background: var(--color-accent);
+  border: 1px solid var(--color-accent-shade);
+  color: var(--color-text-light);
+  text-shadow: var(--shadow);
+  z-index: 1;
+  font-weight: 600;
+}
+.view-switcher div.active-mode:hover {
+  background: var(--color-accent-shade);
+}
+.table-mode {
+  border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+}
+.chart-mode {
+  margin-left: -1px;
+  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+}
+</style>

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

@@ -0,0 +1,193 @@
+<template>
+  <div class="tab-content-container" v-show="isActive">
+    <splitpanes
+      class="query-results-splitter"
+      horizontal
+      :before="{ size: 50, max: 100 }"
+      :after="{ size: 50, max: 100 }"
+    >
+      <template #left-pane>
+        <div class="query-editor">
+          <sql-editor v-model="query" />
+        </div>
+      </template>
+      <template #right-pane>
+        <div id="bottomPane" ref="bottomPane">
+          <view-switcher :view.sync="view" />
+          <div v-show="view === 'table'" class="table-view">
+            <div
+              v-show="result === null && !isGettingResults && !error"
+              class="table-preview result-before"
+            >
+              Run your query and get results here
+            </div>
+            <div v-show="isGettingResults" class="table-preview result-in-progress">
+              Fetching results...
+            </div>
+            <div
+              v-show="result === undefined && !isGettingResults && !error"
+              class="table-preview result-empty"
+            >
+              No rows retrieved according to your query
+            </div>
+            <div v-show="error" class="table-preview error">
+              {{ error }}
+            </div>
+            <sql-table v-if="result" :data-set="result" :height="tableViewHeight" />
+          </div>
+          <chart
+            :visible="view === 'chart'"
+            :sql-result="result"
+            :init-chart="initChart"
+            ref="chart"
+            @update="$store.commit('updateTab', { index: tabIndex, isUnsaved: true })"
+          />
+        </div>
+      </template>
+    </splitpanes>
+  </div>
+</template>
+
+<script>
+import SqlTable from '@/components/SqlTable'
+import Splitpanes from '@/components/Splitpanes'
+import SqlEditor from './SqlEditor'
+import ViewSwitcher from './ViewSwitcher'
+import Chart from './Chart'
+
+export default {
+  name: 'Tab',
+  props: ['id', 'initName', 'initQuery', 'initChart', 'tabIndex', 'isPredefined'],
+  components: {
+    SqlEditor,
+    SqlTable,
+    Splitpanes,
+    ViewSwitcher,
+    Chart
+  },
+  data () {
+    return {
+      query: this.initQuery,
+      result: null,
+      view: 'table',
+      tableViewHeight: 0,
+      isGettingResults: false,
+      error: null,
+      resizeObserver: null
+    }
+  },
+  computed: {
+    isActive () {
+      return this.id === this.$store.state.currentTabId
+    }
+  },
+  created () {
+    this.$store.commit('setCurrentTab', this)
+  },
+  mounted () {
+    this.resizeObserver = new ResizeObserver(this.handleResize)
+    this.resizeObserver.observe(this.$refs.bottomPane)
+    this.calculateTableHeight()
+  },
+  beforeDestroy () {
+    this.resizeObserver.unobserve(this.$refs.bottomPane)
+  },
+  watch: {
+    isActive () {
+      if (this.isActive) {
+        this.$store.commit('setCurrentTab', this)
+      }
+    },
+    query () {
+      this.$store.commit('updateTab', { index: this.tabIndex, isUnsaved: true })
+    }
+  },
+  methods: {
+    // Run a command in the database
+    async execute () {
+      this.isGettingResults = true
+      this.result = null
+      this.error = null
+      const state = this.$store.state
+      try {
+        this.result = await state.db.execute(this.query + ';')
+        const schema = await state.db.getSchema(state.dbName)
+        this.$store.commit('saveSchema', schema)
+      } catch (err) {
+        this.error = err
+      }
+      this.isGettingResults = false
+    },
+    handleResize () {
+      if (this.view === 'chart') {
+        // hack react-chart editor: hidden and show in order to make the graph resize
+        this.view = 'not chart'
+        this.$nextTick(() => {
+          this.view = 'chart'
+        })
+      }
+      this.calculateTableHeight()
+    },
+    calculateTableHeight () {
+      const bottomPane = this.$refs.bottomPane
+      // 88 - view swittcher height
+      // 42 - table footer width
+      // 30 - desirable space after the table
+      // 5 - padding-bottom of rounded table container
+      // 40 - height of table header
+      const freeSpace = bottomPane.offsetHeight - 88 - 42 - 30 - 5 - 40
+      this.tableViewHeight = freeSpace - (freeSpace % 40)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.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);
+}
+
+.query-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  min-height: 190px;
+}
+
+.table-view {
+  margin: 0 52px;
+  height: calc(100% - 88px);
+  position: relative;
+}
+
+.table-preview {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--color-text-base);
+  font-size: 13px;
+}
+
+.table-preview.error {
+  color: var(--color-text-error);
+}
+
+.table-preview.error::first-letter {
+  text-transform: capitalize;
+}
+</style>

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

@@ -0,0 +1,195 @@
+<template>
+   <div id="tabs">
+    <div id="tabs-header" v-if="tabs.length > 0">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="index"
+        @click="selectTab(tab.id)"
+        :class="[{'tab-selected': (tab.id === selectedIndex)}, 'tab']"
+      >
+        <div class="tab-name">
+          <span v-show="tab.isUnsaved" 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(index)"/>
+        </div>
+      </div>
+    </div>
+    <tab
+      v-for="(tab, index) in tabs"
+      :key="tab.id"
+      :id="tab.id"
+      :init-name="tab.name"
+      :init-query="tab.query"
+      :init-chart="tab.chart"
+      :is-predefined="tab.isPredefined"
+      :tab-index="index"
+    />
+    <div v-show="tabs.length === 0" id="start-guide">
+      <span class="link" @click="$root.$emit('createNewQuery')">Create</span>
+      a new query from scratch or open the one from
+      <router-link class="link" to="/my-queries">My queries</router-link>
+    </div>
+
+    <!--Close tab warning dialog  -->
+    <modal name="close-warn" classes="dialog" height="auto">
+      <div class="dialog-header">
+        Close tab {{
+          closingTabIndex !== null
+          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          : ''
+        }}
+        <close-icon @click="$modal.hide('close-warn')"/>
+      </div>
+      <div class="dialog-body">
+        You have unsaved changes. Save changes in {{
+          closingTabIndex !== null
+          ? (tabs[closingTabIndex].name || `[${tabs[closingTabIndex].tempName}]`)
+          : ''
+        }} before closing?
+      </div>
+      <div class="dialog-buttons-container">
+        <button class="secondary" @click="closeTab(closingTabIndex)">
+          Close without saving
+        </button>
+        <button class="secondary" @click="$modal.hide('close-warn')">Cancel</button>
+        <button class="primary" @click="saveAndClose(closingTabIndex)">Save and close</button>
+      </div>
+    </modal>
+  </div>
+</template>
+
+<script>
+import Tab from './Tab'
+import CloseIcon from '@/components/svg/close'
+
+export default {
+  components: {
+    Tab,
+    CloseIcon
+  },
+  data () {
+    return {
+      closingTabIndex: null
+    }
+  },
+  computed: {
+    tabs () {
+      return this.$store.state.tabs
+    },
+    selectedIndex () {
+      return this.$store.state.currentTabId
+    }
+  },
+  created () {
+    window.addEventListener('beforeunload', this.leavingSqliteviz)
+  },
+  methods: {
+    leavingSqliteviz (event) {
+      if (this.tabs.some(tab => tab.isUnsaved)) {
+        event.preventDefault()
+        event.returnValue = ''
+      }
+    },
+    selectTab (id) {
+      this.$store.commit('setCurrentTabId', id)
+    },
+    beforeCloseTab (index) {
+      this.closingTabIndex = index
+      if (this.tabs[index].isUnsaved) {
+        this.$modal.show('close-warn')
+      } else {
+        this.closeTab(index)
+      }
+    },
+    closeTab (index) {
+      this.$modal.hide('close-warn')
+      this.closingTabIndex = null
+      this.$store.commit('deleteTab', index)
+    },
+    saveAndClose (index) {
+      this.$root.$on('querySaved', () => {
+        this.closeTab(index)
+        this.$root.$off('querySaved')
+      })
+      this.selectTab(this.tabs[index].id)
+      this.$modal.hide('close-warn')
+      this.$nextTick(() => {
+        this.$root.$emit('saveQuery')
+      })
+    }
+  }
+}
+</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 div:hover {
+  cursor: pointer;
+}
+
+#tabs-header .tab-selected {
+  color: var(--color-text-active);
+  font-weight: 600;
+  border-bottom: none;
+  background-color: var(--color-white);
+}
+#tabs-header .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>