ui improvement

Author: dpgiakatos

src/components/InputPanel.vue

@@ -308,13 +308,13 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="input-container row">
-    <q-tabs v-model="tab" class="input-language-switcher" vertical dense>
+    <!-- <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"></div>
+    </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">
         <q-btn flat square color="primary" icon="play_arrow" class="full-width" @click="runQuery" />

src/components/OutputPanel.vue

@@ -26,7 +26,6 @@ const cypherQuery = ref('')
 const textQuery = ref('')
 const queryType = ref('')
 const tab = ref('graph')
-const splitter = ref(110)
 const loading = ref(false)
 const nodes = ref([])
 const relationships = ref([])
@@ -117,6 +116,10 @@ const handleNodeUnexpanded = ({ newNodes, newRels }) => {
   relationships.value = newRels
 }
 
+const changeTab = (tabName) => {
+  tab.value = tabName
+}
+
 onMounted(() => {
   run(props.query, props.queryTypeInput)
   if (!props.disableResizer) {
@@ -174,37 +177,36 @@ onMounted(() => {
     />
     <q-skeleton v-if="loading" class="output-skeleton" animation="wave" />
     <div v-else class="output-container">
-      <q-splitter v-model="splitter" disable unit="px" class="output-tabs">
-        <template v-slot:before>
-          <q-tabs v-model="tab" dense vertical>
-            <q-tab name="graph" label="Graph" v-if="nodes.length" />
-            <q-tab name="table" label="Table" v-if="rows.length" />
-            <q-tab name="explanation" label="Explanation" v-if="textQuery !== ''" />
-            <q-tab name="error" label="Error" v-if="errorText !== ''" />
-          </q-tabs>
-        </template>
-        <template v-slot:after>
-          <q-tab-panels v-model="tab" vertical class="output-panels">
-            <q-tab-panel name="graph" v-if="nodes.length" class="output-tab-panel">
-              <GraphOutput
-                :nodes="nodes"
-                :relationships="relationships"
-                @nodeExpanded="handleNodeExpanded"
-                @nodeUnexpanded="handleNodeUnexpanded"
-              />
-            </q-tab-panel>
-            <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">
-              <p>{{ errorText }}</p>
-            </q-tab-panel>
-          </q-tab-panels>
-        </template>
-      </q-splitter>
+      <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">
+        <q-tab-panel name="graph" v-if="nodes.length" class="output-tab-panel">
+          <GraphOutput
+            :nodes="nodes"
+            :relationships="relationships"
+            @nodeExpanded="handleNodeExpanded"
+            @nodeUnexpanded="handleNodeUnexpanded"
+          />
+        </q-tab-panel>
+        <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>
+      </q-tab-panels>
     </div>
     <div class="footer">
       <div class="row">
@@ -272,7 +274,8 @@ onMounted(() => {
 }
 .output-tabs {
   background-color: #ffffff;
-  height: 100%;
+  position: absolute;
+  z-index: 1;
 }
 .footer {
   width: 100%;

src/components/output/GraphOutput.vue

@@ -88,19 +88,19 @@ const fetchConnectedNodes = async (nodeId) => {
 const nodeExpansion = async (nodeId) => {
   const { nodes: newNodes, relationships: newRels } = await fetchConnectedNodes(nodeId)
 
-  const existingNodeIds = new Set(nvl.getNodes().map(n => n.id));
-  const existingRelIds = new Set(nvl.getRelationships().map(r => r.id));
+  const existingNodeIds = new Set(nvl.getNodes().map((n) => n.id))
+  const existingRelIds = new Set(nvl.getRelationships().map((r) => r.id))
 
-  const filteredNodes = newNodes.filter(n => !existingNodeIds.has(n.id));
-  const filteredRels = newRels.filter(r => !existingRelIds.has(r.id));
+  const filteredNodes = newNodes.filter((n) => !existingNodeIds.has(n.id))
+  const filteredRels = newRels.filter((r) => !existingRelIds.has(r.id))
 
   if (filteredNodes.length || filteredRels.length) {
-    nvl.addAndUpdateElementsInGraph(filteredNodes, filteredRels);
+    nvl.addAndUpdateElementsInGraph(filteredNodes, filteredRels)
     expandedNodesMap.value.set(nodeId, {
       nodes: filteredNodes,
       relationships: filteredRels
-    });
-    emit('nodeExpanded', { newNodes: filteredNodes, newRels: filteredRels });
+    })
+    emit('nodeExpanded', { newNodes: filteredNodes, newRels: filteredRels })
   } else {
     q.notify({
       message: 'Node is not expandable',
@@ -112,13 +112,12 @@ const nodeExpansion = async (nodeId) => {
   }
 }
 
-
 const nodeUnexpand = (nodeId) => {
   const expansion = expandedNodesMap.value.get(nodeId)
   if (expansion) {
     const nodeIds = expansion.nodes.map((n) => n.id)
     const relIds = expansion.relationships.map((r) => r.id)
-    
+
     nvl.removeNodesWithIds(nodeIds)
     nvl.removeRelationshipsWithIds(relIds)
     expandedNodesMap.value.delete(nodeId)
@@ -292,22 +291,25 @@ onUnmounted(() => {
     <div ref="graph">
       <q-menu v-model="nodeRightClickMenu.clicked" context-menu>
         <q-list dense>
-          <q-item 
-            clickable 
-            v-close-popup 
-            @click="() => {
-              const nodeId = nodeRightClickMenu.node?.id;
-              if (!nodeId) return;
-              if (isNodeExpanded(nodeId)) {
-                nodeUnexpand(nodeId);
-              } else {
-                nodeExpansion(nodeId);
+          <q-item
+            clickable
+            v-close-popup
+            @click="
+              () => {
+                const nodeId = nodeRightClickMenu.node?.id
+                if (!nodeId) return
+                if (isNodeExpanded(nodeId)) {
+                  nodeUnexpand(nodeId)
+                } else {
+                  nodeExpansion(nodeId)
+                }
               }
-            }"
+            "
           >
-            <q-item-section>
-              {{ isNodeExpanded(nodeRightClickMenu.node?.id) ? 'Unexpand' : 'Expand' }}
+            <q-item-section v-if="isNodeExpanded(nodeRightClickMenu.node?.id)">
+              Unexpand
             </q-item-section>
+            <q-item-section v-else> Expand </q-item-section>
           </q-item>
         </q-list>
       </q-menu>

src/components/output/TableOutput.vue

@@ -51,8 +51,8 @@ const exportTable = () => {
 </script>
 
 <template>
-  <div class="row q-mb-sm">
-    <div class="col q-mr-md">
+  <div class="row justify-end q-mb-sm">
+    <div class="col-3 q-mr-md">
       <q-input outlined dense debounce="300" v-model="filter" placeholder="Search">
         <template v-slot:append>
           <q-icon name="search" />