Evaluate active cell on Shift+Enter

kuzudb · Jan 31, 2024 · d6e8ab8 · d6e8ab8
1 parent 6d8e5aa
commit d6e8ab8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 35 deletions.
diff --git a/src/components/ShellView/CypherEditor.vue b/src/components/ShellView/CypherEditor.vue
@@ -16,6 +16,7 @@
       :style="{ width: editorWidth + 'px' }"
     >
       <textarea
+        ref="gptQuestionTextArea"
         v-model="gptQuestion"
         class="form-control"
         placeholder="Type your question here..."
@@ -26,31 +27,19 @@
       class="shell-editor__tools_container"
       :style="{ width: toolbarWidth + 'px' }"
     >
-      <div
-        v-show="!isMaximized"
-        class="shell-editor__button"
-      >
-        <i
-          class="fa-lg fa-solid fa-times"
-          @click="removeCell"
-        />
+      <div v-show="!isMaximized" class="shell-editor__button">
+        <i class="fa-lg fa-solid fa-times" @click="removeCell" />
       </div>
-      <div
-        v-show="!isLoading"
-        class="shell-editor__button"
-      >
+      <div v-show="!isLoading" class="shell-editor__button">
         <i
           class="fa-lg fa-solid fa-play"
           data-bs-toggle="tooltip"
           data-bs-placement="right"
           title="Run"
-          @click="evaluateCurrentCell"
+          @click="evaluateCell"
         />
       </div>
-      <div
-        v-show="!isLoading"
-        class="shell-editor__button"
-      >
+      <div v-show="!isLoading" class="shell-editor__button">
         <i
           :class="gptButtonClass"
           data-bs-toggle="tooltip"
@@ -59,10 +48,7 @@
           @click="toggleQueryGeneration"
         />
       </div>
-      <div
-        v-show="isMaximizable"
-        class="shell-editor__button"
-      >
+      <div v-show="isMaximizable" class="shell-editor__button">
         <i
           :class="maximizeButtonClass"
           data-bs-toggle="tooltip"
@@ -194,11 +180,6 @@ emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'
         fontSize: 16,
         scrollBeyondLastLine: false,
       });
-
-      this.editor.addCommand(window.Monaco.KeyMod.Shift | window.Monaco.KeyCode.Enter, () => {
-        this.evaluateCypher();
-      });
-
       new PlaceholderContentWidget('Type your Cypher code here...', this.editor);
     },
     toggleMaximize() {
@@ -220,7 +201,7 @@ emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'
     generateAndEvaluateQuery() {
       this.$emit("generateAndEvaluateQuery", this.gptQuestion);
     },
-    evaluateCurrentCell() {
+    evaluateCell() {
       if (this.isQueryGenerationMode) {
         this.generateAndEvaluateQuery();
       } else {
@@ -232,6 +213,10 @@ emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'
     },
     removeCell() {
       this.$emit("remove");
+    },
+    isActive(){
+      return (this.isQueryGenerationMode && this.$refs.gptQuestionTextArea === document.activeElement) ||
+        (!this.isQueryGenerationMode && this.editor && this.editor.hasTextFocus());
     }
   },
 }

diff --git a/src/components/ShellView/ShellCell.vue b/src/components/ShellView/ShellCell.vue
@@ -19,10 +19,7 @@
       :is-maximized="isMaximized"
       :navbar-height="navbarHeight"
     />
-    <div
-      v-if="isLoading"
-      class="d-flex align-items-center"
-    >
+    <div v-if="isLoading" class="d-flex align-items-center">
       <strong class="text-secondary">{{
         loadingText ? loadingText : "Loading..."
       }}</strong>
@@ -82,6 +79,9 @@ export default {
   },
 
   methods: {
+    isActive(){
+      return this.$refs.editor.isActive();
+    },
     evaluateCypher(query) {
       this.queryResult = null;
       this.errorMessage = "";
@@ -188,6 +188,9 @@ export default {
           }
         })
     },
+    evaluateCell() {
+      this.$refs.editor.evaluateCell();
+    },
     toggleMaximize() {
       if (this.isMaximized) {
         this.minimize();

diff --git a/src/components/ShellView/ShellMainView.vue b/src/components/ShellView/ShellMainView.vue
@@ -1,11 +1,9 @@
 <template>
-  <div
-    class="shell-main-view__wrapper"
-    :style="{ height: `${containerHeight}px` }"
-  >
+  <div class="shell-main-view__wrapper" :style="{ height: `${containerHeight}px` }">
     <ShellCell
       v-for="(cell, index) in shellCell"
       v-show="index === maximizedCellIndex || maximizedCellIndex < 0"
+      :ref="getCellRef(index)"
       :key="cell.cellId"
       :schema="schema"
       :navbar-height="navbarHeight"
@@ -56,10 +54,12 @@ export default {
       this.updateContainerHeight();
     });
     window.addEventListener("resize", this.updateContainerHeight);
+    document.addEventListener("keydown",this.handleKeyDown);
   },
 
   beforeUnmount() {
     window.removeEventListener("resize", this.updateContainerHeight);
+    document.removeEventListener("keydown",this.handleKeyDown);
   },
 
   methods: {
@@ -97,6 +97,29 @@ export default {
     reloadSchema() {
       this.$emit("reloadSchema");
     },
+    getCellRef(index) {
+      return `shell-cell-${this.shellCell[index].cellId}`;
+    },
+    handleKeyDown(event) {
+      if (event.shiftKey && event.key === "Enter") {
+        event.preventDefault();
+        this.evaluateCurrentCell();
+      }
+    },
+    evaluateCurrentCell() {
+      for(let i = 0; i < this.shellCell.length; ++i) {
+        const currentCell = this.$refs[this.getCellRef(i)][0];
+        if(currentCell.isActive()) {
+          return currentCell.evaluateCell();
+        }
+      }
+      try{
+      const currentCell = this.$refs[this.getCellRef(0)][0];
+      return currentCell.evaluateCell();
+      }catch(e){
+        // Do nothing, there is no cell to evaluate
+      }
+    },
   },
 
 }