NN-642 fix multiple dialog renderings

BackofenLab · Dec 29, 2024 · c7ca96a · c7ca96a
1 parent 274c716
commit c7ca96a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 58 deletions.
diff --git a/frontend/src/components/enrichment/PathwaySet.vue b/frontend/src/components/enrichment/PathwaySet.vue
@@ -85,10 +85,41 @@
 
   <EmptyState v-if="filt_abstracts.size === 0" message="There is no generated subsets.">
   </EmptyState>
+
+  <Dialog v-model:visible="keyword_active" header="Highlight nodes" position="topleft" :minY="60" :minX="60" :pt="{
+    root: { class: 'w-[24rem] !mt-[60px] !ml-[60px]' },
+    header: { class: '!py-2.5 cursor-move' },
+    title: { class: '!text-base' },
+  }">
+    <KeywordList v-show="keyword_active" :gephi_data="gephi_data" :mode="mode">
+    </KeywordList>
+  </Dialog>
+
+  <Dialog v-model:visible="selection_active" header="Graph parameter" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5 cursor-move' },
+      title: { class: '!text-base' },
+    }">
+      <SelectionList :data="gephi_data" :selection_active="selection_active" :active_subset="null"
+        :active_term="null" :mode="mode">
+      </SelectionList>
+    </Dialog>
+
+    <Dialog v-model:visible="protein_active" header="Highlight nodes" position="topleft" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[24rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!py-2.5 cursor-move' },
+      title: { class: '!text-base' },
+    }">
+      <ProteinList v-show="protein_active" :gephi_data="gephi_data" :mode="mode">
+      </ProteinList>
+    </Dialog>
 </template>
 
 <script>
 import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
+import ProteinList from "@/components/toolbar/modules/ProteinList.vue";
+import SelectionList from "@/components/toolbar/modules/SelectionList.vue";
+import KeywordList from "@/components/toolbar/modules/KeywordList.vue";
 import EmptyState from "@/components/verticalpane/EmptyState.vue";
 import { useToast } from "primevue/usetoast";
 import { nextTick } from "vue";
@@ -98,33 +129,39 @@ export default {
   props: ["gephi_data", "api", "mode"],
   components: {
     ListActionHeader,
-    EmptyState
+    EmptyState,
+    ProteinList,
+    SelectionList,
+    KeywordList
   },
-  emits: ["term_set_changed", "selection_active_changed", "protein_active_changed", "keyword_active_changed"],
+  emits: ["term_set_changed"],
   data() {
     return {
       sort_alph: "",
       set_dict: new Set(),
       search_raw: "",
       loading_state: false,
       focus_subset_id: null,
+      keyword_active: false,
+      protein_active: false,
+      selection_active: false,
       subset_options: [
         {
           label: 'By searching in genes',
           command: () => {
-            this.active_protein();
+            this.protein_active = !this.protein_active
           }
         },
         {
           label: 'By searching in keywords',
           command: () => {
-            this.active_keyword_protein();
+            this.keyword_active = !this.keyword_active
           }
         },
         {
           label: 'By parameter filtering',
           command: () => {
-            this.active_selection();
+            this.selection_active = !this.selection_active
           }
         },
       ]
@@ -192,15 +229,6 @@ export default {
     clearFocus() {
       this.focus_subset_id = null;
     },
-    active_keyword_protein() {
-      this.emitter.emit("keyword_active_changed", true);
-    },
-    active_protein() {
-      this.emitter.emit("protein_active_changed", true);
-    },
-    active_selection() {
-      this.emitter.emit("selection_active_changed", true);
-    },
     apply_enrichment(subset) {
       var com = this;
 

diff --git a/frontend/src/components/toolbar/modules/KeywordList.vue b/frontend/src/components/toolbar/modules/KeywordList.vue
@@ -10,7 +10,7 @@
   </InputGroup>
 
   <ul class="max-h-[200px] flex flex-wrap gap-2 mt-5 pr-2 overflow-auto">
-    <li v-for="(entry, index) in filt_keyword" v-on:click="select_node(entry)" :key="index" :class="`w-[calc((100%-(10px*2))/3)] px-2 py-1.5 border rounded-md text-sm text-center font-semibold cursor-pointer
+    <li v-for="(entry, index) in filt_keyword" v-on:click="select_node(entry)" :key="index" :class="`${mode === 'term' ? 'w-[calc((100%-(10px*2))/2)] text-left' : 'w-[calc((100%-(10px*2))/3)] text-center '} px-2 py-1.5 border rounded-md text-sm font-semibold cursor-pointer
       ${active_genes.has(entry.label)
         ? 'border-primary-400 bg-primary-400/10'
         : 'border-slate-300'

diff --git a/frontend/src/components/toolbar/modules/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -31,20 +31,13 @@ export default {
           subset.push(node);
         }
       });
-      com.save_subset();
       com.emitter.emit("searchSubset", { subset: subset, mode: this.mode });
+      com.save_subset(subset);
     },
-    save_subset() {
+    save_subset(subset) {
       var com = this;
-      let genes;
+      let genes = subset;
       let count = new Set(com.$store.state.favourite_subsets)?.size || 0;
-      if (com.mode == "protein") {
-        genes = com.$store.state.active_subset;
-      } else if (com.mode == "term") {
-        genes = com.$store.state.p_active_subset;
-      } else {
-        genes = com.$store.state.c_active_subset;
-      }
 
       if (!genes) return;
 

diff --git a/frontend/src/components/toolbar/modules/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
@@ -111,7 +111,6 @@ import { useToast } from "primevue/usetoast";
 export default {
   name: "SelectionList",
   props: ["data", "mode", "active_subset", "active_term", "selection_active"],
-  // emits: ["selection_active_changed"],
   data() {
     return {
       coloumnsCheck: false,

diff --git a/frontend/src/layout/MainToolBar.vue b/frontend/src/layout/MainToolBar.vue
@@ -75,15 +75,6 @@
       </ProteinList>
     </Dialog>
 
-    <Dialog v-model:visible="keyword_active" header="Highlight nodes" position="topleft" :minY="60" :minX="60" :pt="{
-      root: { class: 'w-[24rem] !mt-[60px] !ml-[60px]' },
-      header: { class: '!py-2.5 cursor-move' },
-      title: { class: '!text-base' },
-    }">
-      <KeywordList v-show="keyword_active" :gephi_data="gephi_data" :mode="mode">
-      </KeywordList>
-    </Dialog>
-
     <Dialog v-model:visible="tools_active" header="Graph settings" position="topleft" :minY="60" :minX="60" :pt="{
       root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
       header: { class: '!py-2.5 cursor-move' },
@@ -110,7 +101,6 @@
 import SettingList from "@/components/toolbar/modules/SettingList.vue";
 import ExportList from "@/components/toolbar/modules/ExportList.vue";
 import ProteinList from "@/components/toolbar/modules/ProteinList.vue";
-import KeywordList from "@/components/toolbar/modules/KeywordList.vue";
 import SelectionList from "@/components/toolbar/modules/SelectionList.vue";
 
 export default {
@@ -120,39 +110,17 @@ export default {
     SettingList,
     ExportList,
     ProteinList,
-    KeywordList,
     SelectionList,
   },
   data() {
     return {
       tools_active: false,
       export_active: false,
       protein_active: false,
-      keyword_active: false,
       selection_active: false,
       label_check: true,
     };
   },
-  mounted() {
-    var com = this;
-
-    this.emitter.on("selection_active_changed", (state) => {
-      com.selection_active = state;
-    });
-
-    this.emitter.on("protein_active_changed", (state) => {
-      com.protein_active = state;
-    });
-
-    this.emitter.on("keyword_active_changed", (state) => {
-      com.keyword_active = state;
-    });
-  },
-  beforeUnmount() {
-    this.emitter.off("selection_active_changed");
-    this.emitter.off("protein_active_changed");
-    this.emitter.off("keyword_active_changed");
-  },
   methods: {
     switch_home() {
       this.$router.push("/").then(() => {