NN-630 use verticalpane in term view

frontend/src/components/verticalpane/TabPanelOption.vue

@@ -1,38 +1,55 @@
 <template>
   <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto">
-    <TabPanel class="flex-1" value="list">
+    <TabPanel class="flex-1" value="list" v-if="mode === 'protein'">
       <PathwayList :gephi_data="gephi_data" :terms="terms" :await_load="await_load"
         :favourite_pathways="favourite_pathways" @favourite_pathways_changed="favourite_pathways = $event"
         @filtered_terms_changed="filtered_terms = $event"></PathwayList>
     </TabPanel>
 
-    <TabPanel class="flex-1" value="graph">
+    <TabPanel class="flex-1" value="graph" v-if="mode !== 'citation'">
       <PathwayTools :gephi_data="gephi_data" :filtered_terms="filtered_terms" :favourite_pathways="favourite_pathways"
         :mode="mode">
       </PathwayTools>
     </TabPanel>
 
-    <TabPanel class="flex-1" value="citation">
+    <TabPanel class="flex-1" value="citation" v-if="mode === 'protein'">
       <CitationMenu :active_node="active_node" :active_background="active_background"></CitationMenu>
     </TabPanel>
 
     <TabPanel class="flex-1" value="set">
       <PathwaySet :gephi_data="gephi_data" :api="api" :mode="mode"></PathwaySet>
     </TabPanel>
 
-    <TabPanel class="flex-1" value="layers">
+    <TabPanel class="flex-1" value="layers" v-if="mode === 'protein'">
       <PathwayLayers :active_termlayers="active_termlayers" :gephi_data="gephi_data" />
     </TabPanel>
 
-    <TabPanel class="flex-1" value="heatmap">
+    <TabPanel class="flex-1" value="heatmap" v-if="mode === 'protein'">
       <HeatmapTool :mode="mode" :gephi_data="gephi_data" :filtered_terms="filtered_terms"
         :favourite_pathways="favourite_pathways">
       </HeatmapTool>
     </TabPanel>
 
-    <TabPanel class="flex-1" value="difexp" v-if="dcoloumns">
+    <TabPanel class="flex-1" value="difexp" v-if="dcoloumns && mode === 'protein'">
       <DifExpMenu :active_decoloumn="active_decoloumn" :gephi_data="gephi_data" />
     </TabPanel>
+
+    <TabPanel v-if="mode === 'term'" class="flex-1" value="tlist">
+      <PathwayGraphList :term_data="gephi_data" :mode="mode"></PathwayGraphList>
+    </TabPanel>
+
+    <TabPanel v-if="mode === 'citation'" class="flex-1" value="clist">
+      <CitationList :citation_data="gephi_data"></CitationList>
+    </TabPanel>
+
+    <TabPanel v-if="mode === 'citation'" class="flex-1" value="communities">
+      <CitationCommunities :citation_data="gephi_data" :await_community="await_community"></CitationCommunities>
+    </TabPanel>
+
+    <TabPanel v-if="mode === 'citation'" class="flex-1" value="summary">
+      <CitationSummary :citation_data="gephi_data" :node_index="node_index" :await_community="await_community"
+        @await_community_changed="await_community = $event"></CitationSummary>
+    </TabPanel>
   </TabPanels>
 </template>
 
@@ -44,10 +61,14 @@ import PathwaySet from "@/components/enrichment/PathwaySet.vue";
 import CitationMenu from "@/components/citation/CitationMenu.vue";
 import PathwayLayers from "@/components/pane/modules/layer/PathwayLayers.vue";
 import DifExpMenu from "@/components/pane/modules/difexp/DifExpMenu.vue";
+import PathwayGraphList from "@/components/pathwaytools/PathwayGraphList.vue";
+import CitationList from "@/components/citation/CitationList.vue";
+import CitationCommunities from "@/components/citation/CitationCommunities.vue";
+import CitationSummary from "@/components/citation/CitationSummary.vue";
 
 export default {
   name: "TabPanelOption",
-  props: ["mode", "modelValue", "gephi_data", "active_decoloumn", "active_node", "active_background", "active_termlayers", "terms", "api", "await_load"],
+  props: ["mode", "modelValue", "gephi_data", "active_decoloumn", "active_node", "active_background", "active_termlayers", "terms", "api", "await_load", "node_index"],
   emits: ["update:modelValue"],
   components: {
     PathwayList,
@@ -56,13 +77,18 @@ export default {
     HeatmapTool,
     PathwayLayers,
     DifExpMenu,
-    CitationMenu
+    CitationMenu,
+    PathwayGraphList,
+    CitationList,
+    CitationSummary,
+    CitationCommunities,
   },
   data() {
     return {
       dcoloumns: this.$store.state.dcoloumns,
       favourite_pathways: [],
       filtered_terms: [],
+      await_community: false,
     };
   },
   watch: {
@@ -78,6 +104,5 @@ export default {
       this.$emit("update:modelValue", value);
     },
   },
-  mounted() { },
 };
 </script>

frontend/src/components/verticalpane/VerticalPaneCitation.vue

@@ -27,13 +27,13 @@
           </li>
         </ul>
       </div>
-      <PathwayMenu
+      <!-- <PathwayMenu
         v-show="active_function_tab1 == 'set'"
         :gephi_data="citation_data"
         :mode="mode"
         :sorted="'top'"
         :active_function="active_function_tab1"
-      ></PathwayMenu>
+      ></PathwayMenu> -->
       <CitationList
         v-show="active_function_tab1 === 'list'"
         :citation_data="citation_data"
@@ -73,8 +73,8 @@
 import CitationList from "@/components/citation/CitationList.vue";
 import CitationCommunities from "@/components/citation/CitationCommunities.vue";
 import CitationSummary from "@/components/citation/CitationSummary.vue";
-import PathwayMenu from "@/components/enrichment/PathwayMenu.vue";
-import SearchField from "@/components/interface/SearchField.vue";
+// import PathwayMenu from "@/components/enrichment/PathwayMenu.vue";
+import SearchField from "@/components/appbar/SearchField.vue";
 
 export default {
   name: "VerticalPaneCitation",
@@ -83,7 +83,7 @@ export default {
     CitationList,
     CitationSummary,
     CitationCommunities,
-    PathwayMenu,
+    // PathwayMenu,
     SearchField,
   },
   data() {

frontend/src/components/verticalpane/VerticalPanePathway.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div id="vertical-pane">
     <SearchField :data="term_data" :mode="mode"></SearchField>
     <div class="upper-block">
@@ -73,4 +73,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style></style> -->

frontend/src/components/visualization/MainVis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex-1 overflow-hidden visualization">
+  <div class="relative flex-1 order-3 overflow-hidden visualization">
     <div id="sigma-heatmap" class="relative w-full h-full overflow-hidden" v-show="heatmap">
       <Button
         class="w-8 h-8 !absolute top-2 right-2"

frontend/src/components/visualization/TermVis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex-1 overflow-hidden visualization">
+  <div class="relative flex-1 order-3 overflow-hidden visualization">
     <div
       id="sigma-canvas"
       class="sigma-parent"

frontend/src/layout/MainToolBar.vue

@@ -1,5 +1,6 @@
 <template>
-  <aside :class="`py-4 animate__animated animate__faster ${widget ? 'animate__fadeInDown' : 'w-0 animate__fadeOutUp'}`">
+  <aside
+    :class="`py-4 animate__animated animate__faster order-1 ${widget ? 'animate__fadeInDown' : 'w-0 animate__fadeOutUp'}`">
     <nav class="w-[64px] flex flex-col items-center gap-4 overflow-auto">
       <Button class="group" icon="material-symbols-rounded" text plain v-tooltip="'Home'" @click="switch_home">
         <span class="material-symbols-rounded group-hover:font-variation-ico-filled">home</span>
@@ -47,7 +48,8 @@
           class="material-symbols-rounded group-hover:font-variation-ico-filled">subtitles_off</span>
       </Button>
 
-      <Button v-if="mode != 'protein'" class="group" icon="material-symbols-rounded" text plain v-tooltip="'Switch graph'" @click="switch_graph">
+      <Button v-if="mode != 'protein'" class="group" icon="material-symbols-rounded" text plain
+        v-tooltip="'Switch graph'" @click="switch_graph">
         <span class="material-symbols-rounded group-hover:font-variation-ico-filled">logout</span>
       </Button>
     </nav>
@@ -146,6 +148,11 @@ export default {
       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(() => {