From 388c6ca026e87c2c2c21bdc8da97addb96cf9525 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Sun, 7 Jan 2024 23:09:29 +0100
Subject: [PATCH] NN-427 Add function to collapse the enrichment graph tools

---
 frontend/src/assets/pathwaybar/fullscreen.png | Bin 0 -> 1554 bytes
 .../src/components/enrichment/PathwayList.vue |  16 ++++++-
 .../src/components/enrichment/PathwayMenu.vue |  39 +++++++++++-------
 3 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/assets/pathwaybar/fullscreen.png

diff --git a/frontend/src/assets/pathwaybar/fullscreen.png b/frontend/src/assets/pathwaybar/fullscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..398a97b2551378c4dfab5b53e82e3457435b74f9
GIT binary patch
literal 1554
zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+Cx8@lv6E*A2M5RPhyD+MT+RZI
z$YKTt?kOP5SpIg~7oebIiEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$Qb0v3
z0(?ST|Ns9FWDb6C%U5v&(3R#TL4LsujLa--+&p}uGIH`J7B;p{&hB2(#WhXMEo~j0
zQ>QImzIxr(9lQ1)I(+o>h08bZJ$wD;?dPAr{yh`%PG(?Wnd#}`7$PD0_F%hHG`kSP
z0allZf_q!bN(5X>?*02eKi1>X5!U1b78~!K^I@TJxRm;Sn|8g7@7MF`*T0{vfA#Oz
zr#<x>HgCH#yQlu>k4M)&hJNDSWpyt~rhooQ<NbBNCj2=h=Xd?N^~d5fIrr6^ACy(A
z-Mjncm4c*H^VOFX{(JwbNot*~)4zB6PNGo@-}6VdI&)N<U!^G4g_P?{CRN}4A(*UP
zellQpv}CvW?7bds_m1Z5Is3wG@)n29hEn+#-m2?fe1B}U?p>9&g_}jz8*jR)qI)T)
z?}&Cu+2m<A-yZ4ql~G+=Y$B*{QaWwRg_|LJPP98-@@nS)$Q0bXWGP$l$5`QX&+NIr
zN6Jh3CW%?UI<ncVY;xFb+0N%VYP#Dc&qriUnwCB7(d=F3p0DqgJeGF*?aBD}V#O`D
zphIppncF<QGSVJ%CX0ItiYI^EI(13U)E{2o^)w%^la9aT&2_U|Uq@xB&XMPSlY;yn
z85esR7JpoMc*%^zKV0-Rmy7?u;eYC8|9)R{Ps_6<HCtwhY>|@Zoz%qkar(?9OJ@GK
zTo!cc|0Djnx0fur?PoK~ziU>%`)kj@{YMvHUb5oykGnsdgRUH|aM4jq)pa`(7IZDl
zMMgbU*8NCm(6!JbDM2?<zDzn)wQ-KfHkoYC#O#feMYajEdnU49^yhkgyfWxUWsF*D
z?6K0I8>M&DTkjsP4Z2Yqquv^OJT>S>>Kygfx$gFwYve&1z&gQ3fXv#vWJ8>fTC1;H
zjB0AE>yg5sYlSX3s;RlIN0NfBCAsw2tGL?s9DnaOd6D1ai&a5a@;_$SX=d5UmF7*J
zlxO|1{q2$^|Bud3n=~oyk$&@%1&&aELjvJXuDxcu{lAOer(Paa=bN0w_c$0FXfr1-
znKJpu9jBmEPBn@8nkoAGuI%+bwd3`%@UTfnVUMz*5zul|O>^PQUiDlR)tn=jAyM_C
z?VazXD)YNPmMvAw+?l31Z{y4@chYRqQ_M5B-kn$x_FN-#<6^&><3}PdMWqXWjD;o(
zCV4hbZC<-0-9B?wbxX`d^-T(=Y&mz)Wlu!9dFIT!etQm`NSnOHW3#2u`pqSiw;Veg
zv?pr&{4Fl~rSlDTT~yJ%kkfPQ_L(>p=l4lw_i}Qc>PcpmYbSqH-c@~4;P&fd{ZSU4
zZC6e@?P=e6IE6#@+|lZnZ_Q5zWPYpuIB!`v`^gIuYy6Jyo_%wlZ`*;l-+cba%>DWG
za{CkUZw0&T?sv}5tSNl`L+dANtZcq+-|_uPo3`)SR(!#J|DJvR|AN0?pZ@%B^W3dZ
g@1@YVC<wUzpRvQ4E6{wp?`Duyp00i_>zopr0P~nW(*OVf

literal 0
HcmV?d00001

diff --git a/frontend/src/components/enrichment/PathwayList.vue b/frontend/src/components/enrichment/PathwayList.vue
index 42a8053d..4cacddce 100644
--- a/frontend/src/components/enrichment/PathwayList.vue
+++ b/frontend/src/components/enrichment/PathwayList.vue
@@ -288,7 +288,7 @@ export default {
 
 
 <style>
-    #pathways-list {
+    .pathways #pathways-list {
         width: 32.83%;
         height: 96.92%;
         position: absolute;
@@ -302,6 +302,20 @@ export default {
 
     }
 
+    .pathwaybar-small #pathways-list {
+        width: 99%;
+        height: 96.92%;
+        position: absolute;
+        top:50%;
+        transform: translateY(-50%);
+        margin-left: 0.5%;
+        border-radius: 5px;
+        z-index: 997;
+        cursor: default;
+        font-family: 'ABeeZee', sans-serif;
+
+    }
+
     .pathway-search {
         width: 37.54%;
         height: 11.16%;
diff --git a/frontend/src/components/enrichment/PathwayMenu.vue b/frontend/src/components/enrichment/PathwayMenu.vue
index 9ef769fa..fd460b76 100644
--- a/frontend/src/components/enrichment/PathwayMenu.vue
+++ b/frontend/src/components/enrichment/PathwayMenu.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="pathways" :class="{ show_pathways_menu: pane_hidden === true }">
+    <div :class="{ 'pathwaybar-small': pane_hidden === true, 'pathways': pane_hidden === false }">
         <div class="minimize-bar" v-on:click="pane_hidden = !pane_hidden" >
-            <img src="@/assets/pathwaybar/arrows.png" :style="{ transform: pane_hidden ? 'rotate(-90deg)' : 'rotate(90deg)' }">
+            <img src="@/assets/pathwaybar/fullscreen.png">
         </div>
-        <div class="pathwaybar" v-show="pane_hidden === false">
+        <div class="pathwaybar">
             <PathwayList
             :gephi_data='gephi_data'
             :terms='terms'
@@ -11,16 +11,16 @@
             @favourite_pathways_changed = 'favourite_pathways = $event'
             @filtered_terms_changed = 'filtered_terms = $event'
             ></PathwayList>
-            <PathwaySet
+            <PathwaySet v-show="pane_hidden === false"
             :gephi_data='gephi_data'
             :api='api'
             ></PathwaySet>
-            <PathwayTools
+            <PathwayTools v-show="pane_hidden === false"
             :gephi_data='gephi_data'
             :filtered_terms='filtered_terms'
             :favourite_pathways='favourite_pathways'
             ></PathwayTools>
-            <img id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
+            <img v-show="pane_hidden === false" id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
         </div>
     </div>
 </template>
@@ -119,14 +119,18 @@ export default {
     .minimize-bar {
         width: 100%;
         height: 9.41%;
-        position: fixed;
+        position: absolute;
         flex-shrink: 0;
         border-radius: 5px 5px 0px 0px;
         backdrop-filter: blur(7.5px);
         background: #D9D9D9;
-        text-align: center;
+        transition: transform 330ms ease-in-out;
     }
-    .minimize-bar img {
+
+    .minimize-bar img{
+        position: absolute;
+        top: 35%;
+        right: 0.7vw;
         width: 0.7vw;
         height: 0.7vw;
         flex-shrink: 0;
@@ -135,13 +139,22 @@ export default {
     .pathwaybar {
         width: 100%;
         height: 90.59%;
-        position: fixed;
+        position: absolute;
         top: 9.41%;
         flex-shrink: 0;
         border-radius: 0px 0px 5px 5px;
         background: rgba(222, 222, 222, 0.61);
         backdrop-filter: blur(7.5px);
     }
+    .pathwaybar-small{
+        z-index: 999;
+        position: absolute;
+        width: 32.83%;
+        height: 27.2%;
+        top: 70.7%;
+        left: 3.515%;
+        transition: transform 330ms ease-in-out;
+    }
     .pathwaybar #pathway-bg {
         width: 20%;
         height: 100%;
@@ -150,11 +163,5 @@ export default {
         top:50%;
         transform: translateY(-50%);
     }
-    .show_pathways_menu {
-        transform: translate(-50%,98%);
-        width: 20%;
-        transition: transform 330ms ease-in-out;
-        transition: width 900ms ease-in-out;
-    }
 
 </style>
\ No newline at end of file