X

kuzudb · Feb 13, 2024 · d18599c · d18599c
1 parent b5c320f
commit d18599c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 31 deletions.
diff --git a/src/components/ShellView/CypherEditor.vue b/src/components/ShellView/CypherEditor.vue
@@ -27,19 +27,10 @@
       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"
@@ -48,10 +39,7 @@
           @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"
@@ -60,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"
@@ -108,7 +93,7 @@ export default {
       default: false,
     },
   },
-emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'],
+  emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'],
   data: () => {
     return {
       name: "CypherEditor",
@@ -229,10 +214,15 @@ emits: ['remove', 'evaluateCypher', 'toggleMaximize', 'generateAndEvaluateQuery'
     removeCell() {
       this.$emit("remove");
     },
-    isActive(){
+    isActive() {
       return (this.isQueryGenerationMode && this.$refs.gptQuestionTextArea === document.activeElement) ||
         (!this.isQueryGenerationMode && this.editor && this.editor.hasTextFocus());
-    }
+    },
+    loadFromHistory(history) {
+      this.isQueryGenerationMode = history.isQueryGenerationMode;
+      this.gptQuestion = history.gptQuestion;
+      this.setEditorContent(history.cypherQuery);
+    },
   },
 }
 </script>

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>
@@ -85,6 +82,10 @@ export default {
     isActive() {
       return this.$refs.editor.isActive();
     },
+    loadEditorFromHistory(history) {
+      this.isEvaluated = true;
+      this.$refs.editor.loadFromHistory(history);
+    },
     evaluateCypher(query) {
       this.queryResult = null;
       this.errorMessage = "";

diff --git a/src/components/ShellView/ShellMainView.vue b/src/components/ShellView/ShellMainView.vue
@@ -1,8 +1,5 @@
 <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"
@@ -59,6 +56,7 @@ export default {
     });
     window.addEventListener("resize", this.updateContainerHeight);
     document.addEventListener("keydown", this.handleKeyDown);
+    this.loadCellsFromHistory();
   },
 
   beforeUnmount() {
@@ -95,6 +93,31 @@ export default {
     removeCellFromHistory(uuid) {
       return Axios.delete(`/api/session/history/${uuid}`);
     },
+    loadCellHistoryFromServer() {
+      return Axios.get("/api/session/history").then(res => res.data);
+    },
+    async loadCellsFromHistory() {
+      const history = await this.loadCellHistoryFromServer();
+      history.map(cell => {
+        return {
+          cellId: cell.uuid,
+        };
+      }).forEach(cell => {
+        if (this.isCellAddedToTheEnd) {
+          this.shellCell.unshift(cell);
+        }
+        else {
+          this.shellCell.push(cell);
+        }
+      });
+      this.$nextTick(() => {
+        history.forEach((cell) => {
+          const uuid = cell.uuid;
+          const cellRef = this.$refs[this.getCellRefById(uuid)][0];
+          cellRef.loadEditorFromHistory(cell);
+        });
+      });
+    },
     addCell() {
       const cell = this.createCell();
       if (this.isCellAddedToTheEnd) {
@@ -116,6 +139,9 @@ export default {
     getCellRef(index) {
       return `shell-cell-${this.shellCell[index].cellId}`;
     },
+    getCellRefById(uuid) {
+      return `shell-cell-${uuid}`;
+    },
     handleKeyDown(event) {
       if (event.shiftKey && event.key === "Enter") {
         event.preventDefault();