From 74aa3a97ac553c3b7f520963032fb946b367340f Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Mon, 6 Jan 2025 11:34:43 +0100
Subject: [PATCH] NN-643 complete pathway layer pane in protein view

---
 frontend/src/components/pane/PaneSystem.vue   |  73 +++++-------
 .../modules/layer/EnrichmentConnections.vue   |  45 ++++++-
 .../modules/layer/EnrichmentLayerPane.vue     | 111 ++++++++++--------
 .../pane/modules/layer/LayerProteins.vue      |  86 +++++++++++++-
 4 files changed, 217 insertions(+), 98 deletions(-)

diff --git a/frontend/src/components/pane/PaneSystem.vue b/frontend/src/components/pane/PaneSystem.vue
index 9b2bb0e7..79b9dc59 100644
--- a/frontend/src/components/pane/PaneSystem.vue
+++ b/frontend/src/components/pane/PaneSystem.vue
@@ -1,47 +1,39 @@
 <template>
-  <div v-show="active_node !== null ||
+  <Dialog :visible="active_node !== null ||
     active_subset !== null ||
     active_term !== null ||
     active_decoloumn !== null ||
     active_termlayers !== null ||
-    paneHidden == false
-    ">
-    <Dialog :visible="active_node !== null ||
-      active_subset !== null ||
-      active_term !== null ||
-      active_decoloumn !== null ||
-      active_termlayers !== null ||
-      paneHidden == false" @hide="close_pane()" position="bottomright" :closable="false" :minY="60" :minX="60" :pt="{
-        root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
-        header: { class: '!px-2.5 !py-1.5 cursor-move' },
-        content: { class: '!px-2.5 !py-0' },
-      }">
-      <template #header>
-        <h3 class="text-sm font-bold">
-          {{ active_tab }}
-        </h3>
-        <Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="close_pane()">
-          <span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
-        </Button>
-      </template>
-      <NodePane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
-        @tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
-        :gephi_data="gephi_data" @active_item_changed="active_item = $event"></NodePane>
-      <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
-        @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
-        @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
-        @active_layer_changed="active_layer = $event"></SubsetPane>
-      <TermPane v-show="active_tab === 'Pathway'" :mode="mode" :tool_active="tool_active"
-        @tool_active_changed="tool_active = $event" :active_term="active_term" :gephi_data="gephi_data"
-        @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"></TermPane>
-      <DEValuePane v-show="active_tab === 'Differential expression'" :mode="mode" :tool_active="tool_active"
-        @tool_active_changed="tool_active = $event" :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"
-        @active_item_changed="active_item = $event"></DEValuePane>
-      <EnrichmentLayerPane v-show="active_tab === 'Pathway layers'" :mode="mode" :tool_active="tool_active"
-        @tool_active_changed="tool_active = $event" :active_termlayers="active_termlayers" :gephi_data="gephi_data"
-        @active_item_changed="active_item = $event"></EnrichmentLayerPane>
-    </Dialog>
-  </div>
+    paneHidden == false" @hide="close_pane()" position="bottom" :closable="false" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!px-2.5 !py-1.5 cursor-move' },
+      content: { class: '!px-2.5 !py-0' },
+    }">
+    <template #header>
+      <h3 class="text-sm font-bold">
+        {{ active_tab }}
+      </h3>
+      <Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="close_pane()">
+        <span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
+      </Button>
+    </template>
+    <NodePane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
+      :gephi_data="gephi_data" @active_item_changed="active_item = $event"></NodePane>
+    <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
+      @active_layer_changed="active_layer = $event"></SubsetPane>
+    <TermPane v-show="active_tab === 'Pathway'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_term="active_term" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"></TermPane>
+    <DEValuePane v-show="active_tab === 'Differential expression'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_decoloumn="active_decoloumn" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event"></DEValuePane>
+    <EnrichmentLayerPane v-show="active_tab === 'Pathway layers'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_termlayers="active_termlayers" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event"></EnrichmentLayerPane>
+  </Dialog>
 
   <!-- <div
     v-show="
@@ -170,7 +162,6 @@ export default {
       this.$emit("active_background_changed", val);
       if (this.active_tab != Object.keys(val)[0]) this.tool_active = false;
       this.active_tab = Object.keys(val)[0];
-      console.log('active pane',this.active_tab);
       if (val == null) {
         delete this.active_dict.val;
         return;
@@ -213,7 +204,7 @@ export default {
     },
     close_pane() {
       this.active_dict = {};
-
+      
       this.$emit("active_node_changed", null);
       this.$emit("active_term_changed", null);
       this.$emit("active_subset_changed", null);
diff --git a/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue b/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
index 53d41c6d..8b678a13 100644
--- a/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
+++ b/frontend/src/components/pane/modules/layer/EnrichmentConnections.vue
@@ -1,5 +1,42 @@
 <template>
-  <div id="pathway-layer-connect" class="connect">
+  <Listbox v-if="intersectingDicts?.length" optionLabel="" :options="intersectingDicts" :pt="{
+    listContainer: { class: 'order-2' },
+    list: { class: '!p-0' },
+    emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
+    option: {
+      class:
+        '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
+    },
+  }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
+    emptyMessage="No nodes available.">
+
+    <template #footer>
+      <header class="sticky -top-2 bg-[var(--card-bg)] items-center gap-2 z-[1] order-1">
+        <!-- sorting -->
+        <div
+          class="grid grid-cols-2 py-1 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
+
+          <a class="text-sm">
+            Pathway
+          </a>
+
+          <a class="text-sm">
+            Pathway
+          </a>
+        </div>
+      </header>
+    </template>
+    <!-- options -->
+    <template #option="slotProps">
+      <div :class="`grid items-center w-full grid-cols-2 gap-2`">
+        <span class="text-xs">{{ slotProps.option?.[0]?.name }}</span>
+
+        <span class="text-xs">{{ slotProps.option?.[1]?.name }}</span>
+      </div>
+    </template>
+  </Listbox>
+
+  <!-- <div id="pathway-layer-connect" class="connect">
     <div class="sorting">
       <a class="enrichment_filter">pathway</a>
       <a class="cluster_filter">pathway</a>
@@ -21,7 +58,7 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -80,7 +117,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 #pathway-layer-connect {
   width: 100%;
   height: 100%;
@@ -122,4 +159,4 @@ export default {
   overflow: hidden; /* Hide overflow content */
   text-overflow: ellipsis;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue b/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
index 9b8229c0..e51ccfc9 100644
--- a/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
+++ b/frontend/src/components/pane/modules/layer/EnrichmentLayerPane.vue
@@ -1,74 +1,91 @@
 <template>
-  <div id="layerpane" class="text" v-show="active_termlayers !== null">
+  <div v-show="active_termlayers !== null">
+    <header v-if="active_termlayers !== null" class="flex flex-wrap items-center gap-2">
+      <span class="flex items-center gap-1 text-sm font-medium">
+        <strong class="font-normal dark:text-slate-300">pathways:</strong>
+        {{ active_termlayers.main.size }}
+      </span>
+    </header>
+
+    <Tabs :value="active_section" @update:value="change_section">
+      <div
+        :class="`${active_section ? '!pt-2 !border-t !border-slate-700 !mt-2' : ''} px-2.5 -mx-2.5 max-h-[10rem] overflow-auto overflow-x-visible`">
+        <TabPanels class="!p-0">
+          <TabPanel value="statistics">
+            <div class="flex items-center justify-between mb-3">
+              <h3 class="text-sm font-medium">
+                Contained proteins
+              </h3>
+              <Button class="w-5 h-5" size="small" text plain rounded @click="copyclipboard()">
+                <span class="dark:text-white material-symbols-rounded !text-lg"> content_copy </span>
+              </Button>
+            </div>
+            <LayerProteins :active_termlayers="active_termlayers" :gephi_data="gephi_data"></LayerProteins>
+          </TabPanel>
+          <TabPanel value="connections">
+            <h3 class="mb-3 text-sm font-medium">
+              Connections
+            </h3>
+            <EnrichmentConnections :active_termlayers="active_termlayers"></EnrichmentConnections>
+          </TabPanel>
+        </TabPanels>
+      </div>
+
+      <footer class="flex items-end !mt-2 !border-t !border-slate-600 py-2">
+        <TabList class="" :pt="{
+          tabList: { class: '!border-0 !gap-4' },
+          activeBar: { class: '!hidden' }
+        }">
+          <Tab value="statistics" class="!p-0 !border-0"><span
+              :class="`material-symbols-rounded !text-lg ${active_section == 'statistics' ? 'font-variation-ico-filled' : ''}`">tune</span>
+          </Tab>
+          <Tab value="connections" class="!p-0 !border-0"><span
+              :class="`material-symbols-rounded !text-base ${active_section == 'connections' ? 'font-variation-ico-filled' : ''}`">hub</span>
+          </Tab>
+        </TabList>
+      </footer>
+    </Tabs>
+  </div>
+
+  <!-- <div id="layerpane" class="text" v-show="active_termlayers !== null">
     <div class="gene_attribute" v-if="active_termlayers !== null">
       <div class="gene_attr">pathways: {{ active_termlayers.main.size }};</div>
     </div>
 
-    <div
-      :class="{
-        'tool-section': !tool_active,
-        'tool-section-active': tool_active,
-      }"
-    >
-      <div
-        id="informations"
-        class="subsection"
-        v-show="tool_active && active_section == 'information'"
-      >
+    <div :class="{
+      'tool-section': !tool_active,
+      'tool-section-active': tool_active,
+    }">
+      <div id="informations" class="subsection" v-show="tool_active && active_section == 'information'">
         <div class="subsection-header">
           <span>informations</span>
         </div>
         <div class="subsection-main colortype"></div>
       </div>
-      <div
-        id="network"
-        class="subsection"
-        v-show="tool_active && active_section == 'statistics'"
-      >
+      <div id="network" class="subsection" v-show="tool_active && active_section == 'statistics'">
         <div class="subsection-header">
           <span>contained proteins</span>
           <img src="@/assets/pane/copy.png" v-on:click="copyclipboard()" />
         </div>
         <div class="subsection-main colortype">
-          <LayerProteins
-            :active_termlayers="active_termlayers"
-            :gephi_data="gephi_data"
-          ></LayerProteins>
+          <LayerProteins :active_termlayers="active_termlayers" :gephi_data="gephi_data"></LayerProteins>
         </div>
       </div>
-      <div
-        id="connections"
-        class="subsection"
-        v-show="tool_active && active_section == 'connections'"
-      >
+      <div id="connections" class="subsection" v-show="tool_active && active_section == 'connections'">
         <div class="subsection-header">
           <span>connections</span>
         </div>
         <div class="subsection-main colortype">
-          <EnrichmentConnections
-            :active_termlayers="active_termlayers"
-          ></EnrichmentConnections>
+          <EnrichmentConnections :active_termlayers="active_termlayers"></EnrichmentConnections>
         </div>
       </div>
     </div>
     <div class="nodeattributes">
-      <img
-        class="icons"
-        src="@/assets/toolbar/menu-burger.png"
-        v-on:click="change_section('information')"
-      />
-      <img
-        class="icons"
-        src="@/assets/toolbar/settings-sliders.png"
-        v-on:click="change_section('statistics')"
-      />
-      <img
-        class="icons"
-        src="@/assets/toolbar/proteinselect.png"
-        v-on:click="change_section('connections')"
-      />
+      <img class="icons" src="@/assets/toolbar/menu-burger.png" v-on:click="change_section('information')" />
+      <img class="icons" src="@/assets/toolbar/settings-sliders.png" v-on:click="change_section('statistics')" />
+      <img class="icons" src="@/assets/toolbar/proteinselect.png" v-on:click="change_section('connections')" />
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -138,7 +155,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 #layer-connections {
   height: 30%;
 }
@@ -150,4 +167,4 @@ export default {
 #pathway-connections {
   height: 28%;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/pane/modules/layer/LayerProteins.vue b/frontend/src/components/pane/modules/layer/LayerProteins.vue
index b9ff5d0b..d8a8af51 100644
--- a/frontend/src/components/pane/modules/layer/LayerProteins.vue
+++ b/frontend/src/components/pane/modules/layer/LayerProteins.vue
@@ -1,5 +1,75 @@
 <template>
-  <div id="layer-connect" class="connect">
+  <p v-if="!filt_links?.length" class="flex items-center justify-center py-1 text-sm text-slate-300">No proteins
+  </p>
+
+  <Listbox v-if="filt_links?.length" optionLabel="" :options="filt_links" :pt="{
+    listContainer: { class: 'order-2' },
+    list: { class: '!p-0' },
+    emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
+    option: {
+      class:
+        '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
+    },
+  }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
+    emptyMessage="No proteins available.">
+
+    <template #footer>
+      <header class="sticky -top-2 bg-[var(--card-bg)] items-center gap-2 z-[1] order-1">
+        <!-- sorting -->
+        <div
+          class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
+
+          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+            sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_degree = '';
+          ">
+            Nodes
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_node ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_node ? "swap_vert" : sort_node === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
+          sort_node = '';
+          sort_degree = '';
+          ">
+            Cluster
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_cluster ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_cluster ? "swap_vert" : sort_cluster === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_node = '';
+          ">
+            Degree
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_degree ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_degree ? "swap_vert" : sort_degree === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+        </div>
+      </header>
+    </template>
+    <!-- options -->
+    <template #option="slotProps">
+      <div :class="`grid items-center w-full grid-cols-12 gap-2`">
+        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+
+        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+
+        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+      </div>
+    </template>
+  </Listbox>
+
+  <!-- <div id="layer-connect" class="connect">
     <div class="sorting">
       <a
         class="node_filter"
@@ -50,10 +120,11 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
+import { useToast } from "primevue/usetoast";
 export default {
   name: "LayerProteins",
   props: ["active_termlayers", "gephi_data"],
@@ -117,9 +188,11 @@ export default {
       var textToCopy = [];
       for (var link of com.intersectionSet) textToCopy.push(link.label);
       navigator.clipboard.writeText(textToCopy.join("\n"));
+      this.toast.add({ severity: 'success', detail: 'Message copied to clipboard.', life: 4000 });
     },
   },
   mounted() {
+    this.toast = useToast();
     this.emitter.on("copyLayerConnections", () => {
       this.copyclipboard();
     });
@@ -174,18 +247,19 @@ export default {
           (t1, t2) => t1.attributes["Degree"] - t2.attributes["Degree"]
         );
       }
-
-      return new Set(filtered);
+      
+      return filtered;
+      // return new Set(filtered);
     },
   },
 };
 </script>
 
-<style>
+<!-- <style>
 #layer-connect {
   width: 100%;
   height: 100%;
   font-family: "ABeeZee", sans-serif;
   padding: 1.3vw 1.3vw 1vw 1.3vw;
 }
-</style>
+</style> -->