optimize

Author: dpgiakatos

src/components/Iframe.vue

@@ -4,7 +4,7 @@ import hljs from 'highlight.js'
 import 'highlight.js/scss/vs.scss'
 import { copyToClipboard } from 'quasar'
 
-const props = defineProps(['query', 'queryType'])
+const props = defineProps(['query'])
 
 const showIframeDialog = ref(false)
 const iFrameCode = ref('')
@@ -13,8 +13,7 @@ watch(
   () => props.query,
   () => {
     const query = {
-      query: props.query,
-      queryType: props.queryType
+      query: props.query
     }
     iFrameCode.value = `<iframe src="${window.location.origin}/embed/?session=[${encodeURIComponent(JSON.stringify(query))}]" width="100%" height="500px"></iframe>`
   }

src/components/InputPanel.vue

@@ -9,12 +9,10 @@ const GlobalVariables = inject('GlobalVariables')
 
 const emits = defineEmits(['run', 'clear', 'editorHeightChanged'])
 
-const props = defineProps(['cypherInput', 'textInput', 'activeTab', 'serveInOutput'])
+const props = defineProps(['cypherInput', 'serveInOutput'])
 
 const code = ref()
-const tab = ref('')
 let cypher = ''
-let text = ''
 let editor = null
 const minHeight = 3
 const maxHeight = 10
@@ -36,15 +34,10 @@ const updateEditorHeight = () => {
 const runQuery = () => {
   const getValue = editor.getValue()
   if (getValue !== '') {
-    emits('run', getValue, tab.value)
-    if (props.serveInOutput) {
-      if (tab.value === 'cypher') {
-        text = ''
-      }
-    } else {
+    emits('run', getValue)
+    if (!props.serveInOutput) {
       editor.setValue('')
       cypher = ''
-      text = ''
     }
   }
 }
@@ -53,48 +46,20 @@ const clearQuery = () => {
   if (!props.serveInOutput) {
     editor.setValue('')
     cypher = ''
-    text = ''
-    tab.value = 'cypher'
   } else {
     emits('clear')
   }
 }
 
-watch(tab, (newTab, oldTab) => {
-  if (newTab === 'text' && oldTab === 'cypher') {
-    cypher = editor.getValue()
-    editor.setValue(text)
-  } else if (newTab === 'cypher' && oldTab === 'text') {
-    text = editor.getValue()
-    editor.setValue(cypher)
-  }
-  monaco.editor.setModelLanguage(editor.getModel(), tab.value)
-})
-
 watch(
   () => props.cypherInput,
   () => {
     cypher = props.cypherInput
-    if (props.activeTab === 'cypher') {
-      tab.value = 'cypher'
-      editor.setValue(cypher)
-    }
-  }
-)
-
-watch(
-  () => props.textInput,
-  () => {
-    text = props.textInput
-    if (props.activeTab === 'text') {
-      tab.value = 'text'
-      editor.setValue(text)
-    }
+    editor.setValue(cypher)
   }
 )
 
 onMounted(() => {
-  tab.value = 'cypher'
   editor = monaco.editor.create(code.value, {
     value: '',
     language: 'cypher',
@@ -308,12 +273,6 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="input-container row">
-    <!-- <q-tabs v-model="tab" class="input-language-switcher" vertical dense>
-      <q-tab v-if="!GlobalVariables.disableCypherInput" name="cypher" label="Cypher" />
-      <q-tab v-if="!GlobalVariables.disableTextInput" name="text" label="Text" disable>
-        <q-badge>Coming Soon</q-badge>
-      </q-tab>
-    </q-tabs> -->
     <div ref="code" class="code col q-mr-md q-ml-xs"></div>
     <div class="col-auto q-mr-md">
       <div class="row q-mb-sm">

src/components/OutputPanel.vue

@@ -3,35 +3,24 @@ import { ref, inject, onMounted } from 'vue'
 import InputPanel from '@/components/InputPanel.vue'
 import GraphOutput from '@/components/output/GraphOutput.vue'
 import TableOutput from '@/components/output/TableOutput.vue'
-import ExplanationOutput from '@/components/output/ExplanationOutput.vue'
 import { version } from '../../package.json'
 import interact from 'interactjs'
 import Iframe from '@/components/Iframe.vue'
 
 const Neo4jApi = inject('Neo4jApi')
-const LlmApi = inject('LlmApi')
 const GlobalVariables = inject('GlobalVariables')
 
 const emits = defineEmits(['clear', 'share', 'update'])
 
-const props = defineProps([
-  'query',
-  'queryTypeInput',
-  'disableInput',
-  'disableTopBar',
-  'disableResizer'
-])
+const props = defineProps(['query', 'disableInput', 'disableTopBar', 'disableResizer'])
 
 const cypherQuery = ref('')
-const textQuery = ref('')
-const queryType = ref('')
 const tab = ref('graph')
 const loading = ref(false)
 const nodes = ref([])
 const relationships = ref([])
 const rows = ref([])
 const columns = ref([])
-const explanationText = ref('')
 const errorText = ref('')
 const outputPanel = ref()
 const isFullscreen = ref(false)
@@ -56,35 +45,17 @@ const runCypher = async (cypher) => {
     relationships.value = []
     rows.value = []
     columns.value = []
-    explanationText.value = []
   }
   loading.value = false
 }
 
-const runLlm = async (text) => {
-  loading.value = true
-  const res = await LlmApi.run(text)
-  cypherQuery.value = res.cypher
-  explanationText.value = res.explanation
-  runCypher(cypherQuery.value)
-  loading.value = false
-}
-
-const run = async (queryInput, queryInputType) => {
-  queryType.value = queryInputType
+const run = async (queryInput) => {
   errorText.value = ''
   tab.value = 'graph'
-  if (queryType.value === 'cypher') {
-    cypherQuery.value = queryInput
-    textQuery.value = ''
-    runCypher(cypherQuery.value)
-  } else {
-    textQuery.value = queryInput
-    runLlm(textQuery.value)
-  }
+  cypherQuery.value = queryInput
+  runCypher(cypherQuery.value)
   emits('update', {
-    query: queryInput,
-    queryType: queryInputType
+    query: queryInput
   })
 }
 
@@ -121,7 +92,7 @@ const changeTab = (tabName) => {
 }
 
 onMounted(() => {
-  run(props.query, props.queryTypeInput)
+  run(props.query)
   if (!props.disableResizer) {
     interact(outputPanel.value)
       .origin('self')
@@ -151,7 +122,7 @@ onMounted(() => {
       <q-btn dense flat icon="link" color="white" @click="emits('share')">
         <q-tooltip>Share</q-tooltip>
       </q-btn>
-      <Iframe :query="cypherQuery" :query-type="queryType" />
+      <Iframe :query="cypherQuery" />
       <q-btn
         dense
         flat
@@ -168,8 +139,6 @@ onMounted(() => {
     <InputPanel
       v-if="!disableInput"
       :cypher-input="cypherQuery"
-      :text-input="textQuery"
-      :active-tab="queryType"
       :serve-in-output="true"
       @run="run"
       @clear="emits('clear')"
@@ -180,12 +149,6 @@ onMounted(() => {
       <q-btn-group outline class="output-tabs q-ml-md q-pt-sm">
         <q-btn outline label="Graph" v-if="nodes.length" @click="changeTab('graph')" />
         <q-btn outline label="Table" v-if="rows.length" @click="changeTab('table')" />
-        <q-btn
-          outline
-          label="Explanation"
-          v-if="textQuery !== ''"
-          @click="changeTab('explanation')"
-        />
         <q-btn outline label="Error" v-if="errorText !== ''" @click="changeTab('error')" />
       </q-btn-group>
       <q-tab-panels v-model="tab" vertical class="output-panels">
@@ -200,9 +163,6 @@ onMounted(() => {
         <q-tab-panel name="table" v-if="rows.length" class="output-tab-panel">
           <TableOutput :rows="rows" :columns="columns" />
         </q-tab-panel>
-        <q-tab-panel name="explanation" v-if="textQuery !== ''" class="output-tab-panel">
-          <ExplanationOutput :text="explanationText" />
-        </q-tab-panel>
         <q-tab-panel name="error" v-if="errorText !== ''" class="output-tab-panel">
           <div class="text-body2 q-pt-xl">{{ errorText }}</div>
         </q-tab-panel>

src/components/output/ExplanationOutput.vue

@@ -5,7 +5,6 @@ import App from './App.vue'
 import router from './router'
 import { Quasar, Notify } from 'quasar'
 import { Neo4jApi } from '@/plugins/Neo4jApi'
-import { LlmApi } from '@/plugins/LlmApi'
 import { GlobalVariables } from '@/plugins/GlobalVariables'
 
 import '@quasar/extras/roboto-font/roboto-font.css'
@@ -22,7 +21,6 @@ app.use(Quasar, {
   }
 })
 app.use(Neo4jApi)
-app.use(LlmApi)
 app.use(GlobalVariables)
 
 app.mount('#app')

src/main.js

@@ -1,8 +1,6 @@
 const GlobalVariables = {
   install: (app) => {
     const GlobalVariables = {
-      disableCypherInput: false,
-      disableTextInput: true,
       outputPanelHeight: 580
     }
     app.provide('GlobalVariables', GlobalVariables)

src/plugins/GlobalVariables.js

@@ -13,9 +13,9 @@ const queries = ref(route.query.session ? JSON.parse(route.query.session) : [])
 const outputPanel = ref()
 const outputPanelHeight = ref(`${GlobalVariables.outputPanelHeight}px`)
 
-const runQuery = (query, queryType) => {
+const runQuery = (query) => {
   const uuid = uid()
-  queries.value.push({ query, queryType, uuid })
+  queries.value.push({ query, uuid })
 }
 
 const clearQuery = (uuid) => {
@@ -29,16 +29,12 @@ const shareQuery = (query) => {
 
 const updateQuery = (query, uuid) => {
   const index = queries.value.findIndex((obj) => obj.uuid === uuid)
-  if (
-    queries.value[index].query !== query.query ||
-    queries.value[index].queryType !== query.queryType
-  ) {
+  if (queries.value[index].query !== query.query) {
     queries.value = queries.value.map((obj) => {
       if (obj.uuid === uuid) {
         return {
           ...obj,
-          query: query.query,
-          queryType: query.queryType
+          query: query.query
         }
       }
       return obj
@@ -67,14 +63,13 @@ watch(
 <template>
   <div class="container">
     <div class="browser-input-container">
-      <InputPanel active-tab="cypher" @run="runQuery" />
+      <InputPanel @run="runQuery" />
     </div>
     <div class="browser-output-container">
       <div v-for="query in queries" :key="query.uuid">
         <OutputPanel
           ref="outputPanel"
           :query="query.query"
-          :query-type-input="query.queryType"
           :disable-input="false"
           :disable-top-bar="false"
           :disable-resizer="false"

src/plugins/LlmApi.js

@@ -10,7 +10,6 @@ const query = ref(JSON.parse(route.query.session)[0])
 <template>
   <OutputPanel
     :query="query.query"
-    :query-type-input="query.queryType"
     :disable-input="true"
     :disable-top-bar="true"
     :disable-resizer="true"