NN-627 implement primevue toast service

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <PersistentWindow />
   <DocumentWindow />
+  <Toast />
   <router-view v-slot="{ Component }">
     <keep-alive exclude="HomeView">
       <component :is="Component" />
@@ -15,6 +16,7 @@ import ProteinView from "@/views/ProteinView.vue";
 import HomeView from "@/views/HomeView.vue";
 import PersistentWindow from "@/components/PersistentWindow.vue";
 import DocumentWindow from "@/components/DocumentWindow.vue";
+import Toast from 'primevue/toast';
 
 export default {
   name: "App",
@@ -25,6 +27,7 @@ export default {
     CitationView,
     PersistentWindow,
     DocumentWindow,
+    Toast
   },
 };
 </script>

frontend/src/components/enrichment/HeatmapTool.vue

@@ -49,6 +49,7 @@
 <script>
 import PathwayHeatmap from "@/components/enrichment/heatmap/PathwayHeatmap.vue";
 import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
+import { useToast } from "primevue/usetoast";
 
 export default {
   name: "HeatmapTool",
@@ -64,11 +65,13 @@ export default {
       // tool_selecting: false
     };
   },
+  mounted() {
+    this.toast = useToast();
+  },
   methods: {
     get_heatmap() {
       if (this.favourite_pathways.length == 0) {
-        // FIXME: Use toast instead of alert
-        alert("favorize pathways before generating heatmap");
+        this.toast.add({ severity: 'error', summary: 'Error', detail: 'Please favorize pathways before generating heatmap.', life: 4000 });
         return;
       }
       this.emitter.emit("generateHeatmap", this.favourite_pathways);

frontend/src/components/enrichment/PathwaySet.vue

@@ -200,6 +200,7 @@ const toggle = (event) => {
 <script>
 import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
 import EmptyState from "@/components/verticalpane/EmptyState.vue";
+import { useToast } from "primevue/usetoast";
 import { nextTick } from "vue";
 
 export default {
@@ -219,6 +220,9 @@ export default {
       focus_subset_id: null
     };
   },
+  mounted() {
+    this.toast = useToast();
+  },
   computed: {
     regex() {
       var com = this;
@@ -289,9 +293,9 @@ export default {
     },
     apply_enrichment(subset) {
       var com = this;
-
+      
       if (!subset.genes || com.loading_state) {
-        alert("please select a subset or pathway to apply enrichment");
+        this.toast.add({ severity: 'error', summary: 'Error', detail: 'Please select a subset or pathway to apply enrichment.', life: 4000 });
         return;
       }
 

frontend/src/components/interface/SearchField.vue

@@ -3,7 +3,7 @@
     :pt="{ label: { class: 'mx-auto' } }" @click="show_search = !show_search" />
 
   <Dialog v-model:visible="show_search" position="top" :minY="60" :minX="60" :closable="true" :pt="{
-    root: { class: 'w-[20rem] !mt-[60px] !ml-[60px]' },
+    root: { class: 'w-[24rem] !mt-[60px] !ml-[60px]' },
     headerActions: { class: '!hidden' },
     header: { class: '!p-3 order-1 cursor-move' },
     content: { class: 'order-2 !px-0' },

frontend/src/layout/AppBar.vue

@@ -50,40 +50,39 @@ const toggle = (event) => {
 
 <script>
 import SearchField from "@/components/interface/SearchField.vue";
-import NetworkValues from "../components/interface/NetworkValues.vue";
+import NetworkValues from "@/components/interface/NetworkValues.vue";
+import { useToast } from "primevue/usetoast";
 
 export default {
   name: "AppBar",
-  props: ["isDockActive", "gephi_data", "mode", "view","widget"],
+  props: ["gephi_data", "filter_views", "mode", "view", "widget"],
   emits: ["widget_toggled"],
   components: {
     SearchField,
     NetworkValues,
   },
-  data() {
-    return { filter_views: ["term", "citation"] };
+  mounted() {
+    this.toast = useToast();
   },
   methods: {
     toggle_widget(event) {
       this.$emit("widget_toggled", event);
     },
     swap_view(entry) {
-      // FIXME: Use toast instead of alert
       if (entry == "protein") {
         this.$router.push("protein");
       }
       if (entry == "term") {
         this.$store.state.term_graph_data
           ? this.$router.push("term")
-          : alert("Please generate first a term graph via the enrichment section ");
+          : this.toast.add({ severity: 'error', summary: 'Error', detail: 'Please generate first a term graph via the enrichment section.', life: 4000 });
       }
       if (entry == "citation") {
         this.$store.state.citation_graph_data
           ? this.$router.push("citation")
-          : alert("Please generate first a citation graph via the citation section ");
+          : this.toast.add({ severity: 'error', summary: 'Error', detail: 'Please generate first a citation graph via the citation section.', life: 4000 });
       }
     },
   },
-  mounted() {},
 };
 </script>

frontend/src/main.js

@@ -16,6 +16,7 @@ import AppState from "./plugins/appState.js";
 import { definePreset } from "@primevue/themes";
 import Aura from "@primevue/themes/aura";
 import "animate.css";
+import ToastService from "primevue/toastservice";
 
 // Create a reactive object to serve as the EventBus
 const emitter = mitt();
@@ -98,6 +99,7 @@ app.component("v-select", vSelect);
 app.config.globalProperties.emitter = emitter;
 app.directive("styleclass", StyleClass); // StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element
 app.use(AppState);
+app.use(ToastService);
 app.component("ThemeSwitcher", ThemeSwitcher);
 app.mount("#app");