NN-588 Added streaming on frontend

added citation "generate button"
added correct addToChatbot function on selection
added new hide label button

frontend/src/components/PersistentWindow.vue

@@ -98,7 +98,6 @@ export default {
     });
 
     com.emitter.on("addToChatbot", (data) => {
-      console.log(data);
       this.addLink(data);
     });
   },
@@ -222,24 +221,72 @@ export default {
         inputDiv.innerText = "";
       }
     },
+    async streamChatbotResponse(formData) {
+      const response = await fetch(this.api.chatbot, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!response.body) {
+        throw new Error("No response body");
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+      let done = false;
+      let fullText = "";
+      let refData = null;
+
+      const botMessage = {
+        sender: "Bot",
+        text: "", // Initially empty, will be updated progressively
+        data: [...this.tags], // Add contextual data if needed
+        ref: null, // This will hold the pmids when received
+      };
+      this.messages.push(botMessage);
+
+      // Index of the newly added Bot message
+      const botMessageIndex = this.messages.length - 1;
+
+      while (!done) {
+        const { value, done: readerDone } = await reader.read();
+        done = readerDone;
+        if (done) break;
+
+        // Decode the streamed data
+        const chunk = decoder.decode(value || new Uint8Array(), {
+          stream: !done,
+        });
+        // Parse the chunk as JSON to extract "messages" and "pmids"
+        let parsedChunk = JSON.parse(chunk);
+
+        // Check if it's a message part or pmids
+        if (parsedChunk.messages) {
+          // Append message chunks to the fullText
+          fullText += parsedChunk.messages;
+
+          // Update the bot message progressively
+          this.updateBotMessage(fullText, botMessageIndex);
+        }
+
+        if (parsedChunk.pmids) {
+          // If pmids are received, store them for later
+          refData = parsedChunk.pmids;
+          this.messages[botMessageIndex].ref = refData;
+        }
+      }
+    },
+    updateBotMessage(text, index) {
+      // Ensure we're updating the correct (newest) bot message by index
+      this.messages[index].text = text;
+    },
     getAnswer(message) {
       let com = this;
       let formData = new FormData();
       formData.append("message", message.text);
       formData.append("background", JSON.stringify(message.data));
 
-      const responseTags = [...this.tags];
-
-      //POST request for generating pathways
-      com.axios.post(com.api.chatbot, formData).then((response) => {
-        // let fakeresponse = {"message": "", "pmids": ["18668037", "16153702", "9851930"]}
-        this.messages.push({
-          sender: "Bot",
-          text: response.data.message,
-          data: responseTags,
-          ref: response.data.pmids,
-        });
-      });
+      com.streamChatbotResponse(formData);
     },
     closeWindow() {
       this.windowCheck = false;

frontend/src/components/citation/CitationMenu.vue

@@ -6,38 +6,28 @@
         v-if="sorted == 'bottom'"
         v-show="active_function === 'citation'"
       >
-        <div class="tool-section-term">
-          <div class="citation-search">
-            <img
-              class="citation-search-icon"
-              src="@/assets/toolbar/search.png"
-            />
-            <input
-              type="text"
-              v-model="context_raw"
-              class="empty"
-              placeholder="search context"
-              @keyup.enter="get_citation_graph(context_raw)"
-            />
-            <div
-              class="loading_pane_citation"
-              v-if="loading_state == true"
-            ></div>
+        <div class="tool-section-graph">
+          <div class="coloumn-button">
+            <button
+              class="tool-buttons"
+              v-on:click="get_citation_graph(context_raw)"
+            >
+              <img
+                class="buttons-img"
+                src="@/assets/plus-1.png"
+                v-if="!loading_state"
+              />
+              <div v-if="loading_state" class="loading_button"></div>
+            </button>
           </div>
-          <!-- <div class="coloumn-button">
-                        <button class="tool-buttons" :class="{recolor_filter: bookmark_off == false}" v-on:click="bookmark_off = !bookmark_off" >bookmarks</button>
-                    </div> -->
-        </div>
-        <div class="context-check">
-          <div class="context-confirm">
-            <span>citations</span>
-            <input id="citation" type="checkbox" /><label
-              for="citation"
-            ></label>
-          </div>
-          <div class="context-confirm">
-            <span>year</span>
-            <input id="year" type="checkbox" /><label for="year"></label>
+          <div class="coloumn-button">
+            <button
+              class="tool-buttons"
+              :class="{ recolor_filter: bookmark_off == false }"
+              v-on:click="bookmark_off = !bookmark_off"
+            >
+              <img class="buttons-img" src="@/assets/star.png" />
+            </button>
           </div>
         </div>
         <div class="graph-section">
@@ -102,10 +92,7 @@ export default {
       if (com.loading_state) return;
 
       com.loading_state = true;
-      const [year, citations] = [
-        document.getElementById("year").checked,
-        document.getElementById("citation").checked,
-      ];
+      const [year, citations] = [true, true];
       var base = this.active_background || "";
       com.getContext(base, context, com.get_rank(year, citations));
     },
@@ -122,17 +109,13 @@ export default {
       var com = this;
 
       var background;
-      var displayBackground;
 
       if (Object.keys(base)[0] == "Protein") {
         background = base["Protein"].value.attributes["Name"];
-        displayBackground = background;
       } else if (Object.keys(base)[0] == "Subset") {
         background = base["Subset"].value.map((node) => node.label).join(" ");
-        displayBackground = background;
       } else if (Object.keys(base)[0] == "Pathway") {
         background = base["Pathway"].value.symbols.join(" ");
-        displayBackground = base["Pathway"].value.id;
       } else {
         background = "";
       }
@@ -160,12 +143,12 @@ export default {
           }
           this.$store.commit("assign_new_citation_graph", {
             id: this.graph_number,
-            label: `br: ${displayBackground} in: ${context}`,
+            label: `Graph ${this.graph_number}`,
             graph: response.data,
           });
           this.citation_graphs.add({
             id: this.graph_number,
-            label: `br:${displayBackground} in:${context}`,
+            label: `Graph ${this.graph_number}`,
             graph: response.data,
           });
         }

frontend/src/components/pane/modules/subset/SubsetPane.vue

@@ -207,11 +207,14 @@ export default {
       com.hide = !com.hide;
     },
     call_chatbot(mode) {
+      let addedSubset = this.active_subset.selection
+        ? this.active_subset.genes
+        : this.active_subset;
       this.emitter.emit("addToChatbot", {
-        id: `${mode}:subset${this.active_subset.length}`,
+        id: `${mode}:subset${addedSubset.length}`,
         mode: mode,
         type: "subset",
-        data: this.active_subset,
+        data: addedSubset,
       });
     },
     /**

frontend/src/components/toolbar/CitationToolBar.vue

@@ -22,6 +22,15 @@
       <li v-on:click="chatbot()">
         <img src="@/assets/toolbar/bote.png" alt="bot Icon" />
       </li>
+      <li
+        v-on:click="hide_labels(label_check)"
+        :class="{ crossed: label_check }"
+      >
+        <div class="label-container">
+          <img src="@/assets/toolbar/label.png" alt="label Icon" />
+          <span v-if="label_check" class="cross-line"></span>
+        </div>
+      </li>
       <li v-on:click="switch_graph()">
         <img src="@/assets/toolbar/logout.png" alt="3D Icon" />
       </li>
@@ -72,6 +81,7 @@ export default {
       protein_active: false,
       selection_active: false,
       mode: "citation",
+      label_check: false,
     };
   },
   methods: {
@@ -89,6 +99,13 @@ export default {
     chatbot() {
       this.emitter.emit("openChatbot");
     },
+    hide_labels(check) {
+      this.label_check = !check;
+      this.emitter.emit("hideLabels", {
+        check: this.label_check,
+        mode: this.mode,
+      });
+    },
   },
 };
 </script>

frontend/src/components/toolbar/MainToolBar.vue

@@ -25,6 +25,15 @@
       <li v-on:click="chatbot()">
         <img src="@/assets/toolbar/bote.png" alt="bot Icon" />
       </li>
+      <li
+        v-on:click="hide_labels(label_check)"
+        :class="{ crossed: label_check }"
+      >
+        <div class="label-container">
+          <img src="@/assets/toolbar/label.png" alt="label Icon" />
+          <span v-if="label_check" class="cross-line"></span>
+        </div>
+      </li>
     </ul>
     <MenuWindow
       v-show="tools_active"
@@ -80,6 +89,7 @@ export default {
       tools_active: false,
       protein_active: false,
       selection_active: false,
+      label_check: false,
       mode: "protein",
     };
   },
@@ -98,6 +108,13 @@ export default {
     chatbot() {
       this.emitter.emit("openChatbot");
     },
+    hide_labels(check) {
+      this.label_check = !check;
+      this.emitter.emit("hideLabels", {
+        check: this.label_check,
+        mode: this.mode,
+      });
+    },
   },
 };
 </script>
@@ -168,4 +185,16 @@ export default {
 ::v-deep .menu-bar li:hover {
   color: black;
 }
+.label-container {
+  position: relative;
+  display: contents;
+  text-align: center;
+}
+
+.cross-line {
+  position: absolute;
+  border-top: 1px solid rgba(255, 255, 255, 0.883); /* Red cross line, adjust thickness/color as needed */
+  transform: rotate(-45deg); /* Optional: Diagonal cross */
+  width: 60%;
+}
 </style>

frontend/src/components/toolbar/TermToolBar.vue

@@ -22,6 +22,15 @@
       <li v-on:click="chatbot()">
         <img src="@/assets/toolbar/bote.png" alt="bot Icon" />
       </li>
+      <li
+        v-on:click="hide_labels(label_check)"
+        :class="{ crossed: label_check }"
+      >
+        <div class="label-container">
+          <img src="@/assets/toolbar/label.png" alt="label Icon" />
+          <span v-if="label_check" class="cross-line"></span>
+        </div>
+      </li>
       <li v-on:click="switch_graph()">
         <img src="@/assets/toolbar/logout.png" alt="3D Icon" />
       </li>
@@ -71,6 +80,7 @@ export default {
       tools_active: false,
       protein_active: false,
       selection_active: false,
+      label_check: false,
       mode: "term",
     };
   },
@@ -89,6 +99,13 @@ export default {
     chatbot() {
       this.emitter.emit("openChatbot");
     },
+    hide_labels(check) {
+      this.label_check = !check;
+      this.emitter.emit("hideLabels", {
+        check: this.label_check,
+        mode: this.mode,
+      });
+    },
   },
 };
 </script>

frontend/src/components/toolbar/windows/MenuWindow.vue

@@ -3,7 +3,6 @@
     <div class="menu-window">
       <div class="window-label">graph settings</div>
       <div class="menu-items">
-        <ToggleLabel :mode="mode"></ToggleLabel>
         <ConnectedGraph :mode="mode"></ConnectedGraph>
         <ShowModules :mode="mode"></ShowModules>
         <ModuleSelection :mode="mode"></ModuleSelection>
@@ -43,7 +42,6 @@ import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
 import NodeLabelSelect from "@/components/toolbar/modules/NodeLabelSelect.vue";
 import ConnectedGraph from "@/components/toolbar/modules/ConnectedGraph.vue";
 import ShowModules from "@/components/toolbar/modules/ShowModules.vue";
-import ToggleLabel from "@/components/toolbar/modules/ToggleLabel.vue";
 import EdgeOpacity from "@/components/toolbar/modules/EdgeOpacity.vue";
 import ModuleSelection from "@/components/toolbar/modules/ModuleSelection.vue";
 
@@ -57,7 +55,6 @@ export default {
     EdgeOpacity,
     NodeLabelSelect,
     ConnectedGraph,
-    ToggleLabel,
     ModuleSelection,
     FDRValue,
     ExportProteins,