From d9879177ebb72afcdaef3b185a9ab7cd463c7fc5 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Mon, 30 Dec 2024 16:21:31 +0100
Subject: [PATCH] NN-640 minimize vertical pane and dynamic position

---
 frontend/src/assets/logo-grad.svg            |  29 +++
 frontend/src/assets/logo.svg                 |  55 +++++
 frontend/src/components/PersistentWindow.vue |   2 +-
 frontend/src/layout/VerticalPane.vue         | 207 +++++++++++--------
 frontend/tailwind.config.js                  |   1 +
 5 files changed, 208 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/assets/logo-grad.svg
 create mode 100644 frontend/src/assets/logo.svg

diff --git a/frontend/src/assets/logo-grad.svg b/frontend/src/assets/logo-grad.svg
new file mode 100644
index 00000000..e0597666
--- /dev/null
+++ b/frontend/src/assets/logo-grad.svg
@@ -0,0 +1,29 @@
+<svg width="683" height="683" viewBox="0 0 683 683" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_26_2)">
+<path d="M75.3336 2.53345C68.8003 5.46678 62.9336 11.2001 60.5336 16.9334C53.6003 33.3334 67.6003 82.4001 93.4669 131.867C98.5336 141.6 102.667 149.867 102.4 150C102.134 150.133 87.8669 144.4 70.6669 137.2C35.2003 122.4 31.8669 121.733 20.1336 127.467C10.1336 132.533 6.13358 138.933 5.60025 151.2C5.20025 160.133 5.46692 161.2 10.1336 168.933C27.3336 197.6 59.7336 231.2 98.4003 260.4C106.667 266.533 110.534 270.4 110 271.6C109.6 272.667 109.334 274.133 109.334 274.8C109.334 275.467 91.8669 276 67.2003 276C19.6003 276 16.9336 276.4 8.66692 284.667C-2.93308 296.267 -2.53308 314.133 9.60025 325.467C22.6669 337.6 64.9336 359.067 94.4003 368.667C100 370.4 101.467 371.6 102.134 374.4C102.534 376.4 104.667 383.867 106.8 391.067C117.6 426.267 142.8 459.733 176 483.067L178.934 485.2L171.467 509.6C167.334 523.067 164 535.2 164 536.4C164 540 170 545.333 174 545.333C180.267 545.333 183.067 540.533 189.867 518C193.467 506.267 196.4 496.533 196.534 496.4C196.667 496.133 202.267 498.667 209.067 502C233.6 514 265.067 522.933 298.667 527.467C320 530.4 362.667 530.4 384.134 527.6C416.267 523.333 449.6 513.867 473.867 501.867C480.534 498.667 486 496.267 486.134 496.4C486.267 496.533 494 521.6 503.467 552C519.067 602.8 520.534 608.267 520.534 618C520.667 626.8 520 630 517.2 636.133C512.667 645.733 504.4 654 494.8 658.533L487.334 662H341.334H195.334L187.867 658.533C183.6 656.533 177.734 652.4 174.667 649.333C160.667 635.333 158.4 618.8 167.067 591.867C172.8 573.867 173.067 570.8 168.934 566.933C165.2 563.333 160 563.2 156.134 566.267C152.534 569.333 142.934 600.133 141.734 612.267C138.8 644.267 161.467 674.533 193.067 681.2C202.934 683.2 479.734 683.2 489.6 681.2C520.934 674.667 543.867 644.133 540.934 612.533C540.4 607.2 533.2 581.6 521.867 544.533C506.4 494 504 484.8 505.6 483.867C506.8 483.2 512.4 478.933 518.267 474.133C545.6 452.133 566.4 422.133 575.867 391.067C578 383.867 580.134 376.4 580.534 374.4C581.2 371.6 582.667 370.4 588.267 368.667C625.467 356.533 670.934 331.6 678.134 319.333C685.067 307.333 683.6 294.133 674.134 284.667C665.734 276.4 663.2 276 615.467 276C590.8 276 573.334 275.467 573.334 274.8C573.334 274.133 573.067 272.667 572.667 271.733C572.134 270.4 577.067 265.867 586.934 258.267C608.934 241.6 614.667 235.867 614.667 231.067C614.667 228.667 613.467 226 611.6 224.267C606.134 219.067 602.134 220.4 588.134 231.733C581.067 237.467 572.8 244 569.734 246.4L564.134 250.8L559.867 242.4C554.4 231.333 545.6 217.733 535.6 204.933C531.2 199.333 527.867 194.267 528.267 194C529.734 192.4 648.134 144 650.4 144C653.867 144 657.334 148.133 657.334 152.533C657.334 157.067 647.334 172 634 187.6C622.534 200.933 621.2 205.6 627.467 210.533C633.334 215.2 636.934 214.133 644.934 205.6C653.467 196.533 665.334 180.533 672.4 169.067C677.334 161.067 677.467 160.133 677.067 151.2C676.534 138.933 672.534 132.533 662.534 127.467C650.934 121.733 647.467 122.4 612 137.2C594.8 144.4 580.534 150.133 580.267 150C580 149.867 584.134 141.6 589.2 131.867C610.934 90.4001 625.067 46.9334 623.734 25.8668C623.334 19.6001 622.4 16.4001 619.467 12.1334C615.067 5.86678 604.534 0.000113934 597.467 0.000113934C584.667 0.000113934 586.267 -1.46655 515.867 68.9334L449.6 134.933L436.534 129.6C418.667 122.4 404.534 118 386.534 114.4C373.334 111.733 367.334 111.333 341.334 111.333C315.334 111.333 309.334 111.733 296.134 114.4C278.134 118 264 122.4 246.134 129.6L233.067 134.933L166.8 68.9334C110.534 12.6668 99.8669 2.66678 95.3336 1.46678C87.6003 -0.666553 81.4669 -0.266553 75.3336 2.53345ZM152.534 82.5334L214.934 144.933L204.534 152C193.334 159.467 183.6 167.067 175.867 174.267L171.2 178.8L153.067 171.333L135.067 163.867L124.934 146.933C104.534 112.4 89.8669 79.4668 82.5336 50.9334C78.1336 33.7334 77.6003 26.0001 80.9336 22.4001C86.2669 16.4001 86.6669 16.6668 152.534 82.5334ZM601.6 22.2668C605.067 25.3334 604.667 33.2001 600 51.2001C592.8 79.0668 577.867 112.8 557.734 146.933L547.734 163.733L529.6 171.333L511.6 178.8L506.8 174.267C499.467 167.467 487.734 158.267 477.2 151.2L467.734 144.933L530.267 82.5334C595.467 17.2001 595.734 16.9334 601.6 22.2668ZM384.667 134.533C490.134 157.2 567.334 247.2 563.6 343.333C562.534 369.6 558 387.467 546.667 408.933C530.667 439.6 504.934 464.133 470.134 481.867C401.6 516.8 301.2 519.6 227.2 488.667C149.6 456.133 108.934 388.8 120.667 312C134.534 220.133 214 146.533 315.334 131.467C317.6 131.2 331.067 131.067 345.334 131.333C365.867 131.6 374.134 132.267 384.667 134.533ZM94.4003 168.667C127.067 182.267 154 193.6 154.4 194C154.8 194.267 151.467 199.333 147.067 204.933C137.2 217.733 128.267 231.333 122.8 242.4L118.534 250.8L110.267 244.4C75.3336 217.467 48.4003 190.4 30.9336 164.4C27.7336 159.733 25.3336 154.533 25.3336 152.533C25.3336 148.133 28.8003 144 32.4003 144C33.7336 144 61.6003 155.067 94.4003 168.667ZM102.134 300.267C100.134 311.333 98.8003 325.733 98.6669 336.933V349.067L85.0669 343.867C69.4669 337.733 46.2669 326.4 34.9336 319.2C20.1336 309.867 16.9336 304.4 22.6669 298.667C25.2003 296.133 27.0669 296 64.1336 296H102.934L102.134 300.267ZM660 298.667C666.4 305.067 662 310.8 640.8 323.333C627.067 331.333 616.534 336.4 597.067 344L584 349.067V336.933C583.867 325.733 582.534 311.333 580.534 300.267L579.734 296H618.534C655.6 296 657.467 296.133 660 298.667Z" fill="url(#paint0_linear_26_2)"/>
+<path d="M217.334 288C215.067 290.267 214.667 292.4 214.667 303.067C214.667 314.4 214.934 315.867 217.734 318.4C221.6 322 226.667 322.133 230.8 318.8C233.734 316.4 234 315.333 234 303.333C234 291.333 233.734 290.267 230.8 287.867C226.8 284.533 220.667 284.667 217.334 288Z" fill="url(#paint1_linear_26_2)"/>
+<path d="M451.867 287.867C448.934 290.267 448.667 291.333 448.667 303.333C448.667 315.333 448.934 316.4 451.867 318.8C456.134 322.267 461.6 322 465.067 318.267C467.6 315.6 468 313.6 468 302.933C468 292.4 467.6 290.267 465.334 288C462 284.667 455.867 284.533 451.867 287.867Z" fill="url(#paint2_linear_26_2)"/>
+<path d="M312.134 328.8C306.534 335.867 310.134 343.067 322.934 350C329.2 353.6 331.334 354 341.334 354C351.334 354 353.467 353.6 359.734 350C372.534 343.067 376.134 335.867 370.534 328.8C366.667 323.867 361.2 324.267 354.4 329.6C349.734 333.467 348 334 341.334 334C334.667 334 332.934 333.467 328.267 329.6C321.467 324.267 316 323.867 312.134 328.8Z" fill="url(#paint3_linear_26_2)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_26_2" x1="597" y1="-4.49996" x2="198" y2="695.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28CFBA"/>
+<stop offset="1" stop-color="#B92DD4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_26_2" x1="231.579" y1="285.197" x2="207.315" y2="308.219" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28CFBA"/>
+<stop offset="1" stop-color="#B92DD4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_26_2" x1="465.579" y1="285.196" x2="441.291" y2="308.218" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28CFBA"/>
+<stop offset="1" stop-color="#B92DD4"/>
+</linearGradient>
+<linearGradient id="paint3_linear_26_2" x1="365.135" y1="325.148" x2="355.746" y2="361.672" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28CFBA"/>
+<stop offset="1" stop-color="#B92DD4"/>
+</linearGradient>
+<clipPath id="clip0_26_2">
+<rect width="682.667" height="682.667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
new file mode 100644
index 00000000..7bfdd0a5
--- /dev/null
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt"
+    viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
+        <path d="M565 5101 c-49 -22 -93 -65 -111 -108 -52 -123 53 -491 247 -862 38
+-73 69 -135 67 -136 -2 -1 -109 42 -238 96 -266 111 -291 116 -379 73 -75 -38
+-105 -86 -109 -178 -3 -67 -1 -75 34 -133 129 -215 372 -467 662 -686 62 -46
+91 -75 87 -84 -3 -8 -5 -19 -5 -24 0 -5 -131 -9 -316 -9 -357 0 -377 -3 -439
+-65 -87 -87 -84 -221 7 -306 98 -91 415 -252 636 -324 42 -13 53 -22 58 -43 3
+-15 19 -71 35 -125 81 -264 270 -515 519 -690 l22 -16 -56 -183 c-31 -101 -56
+-192 -56 -201 0 -27 45 -67 75 -67 47 0 68 36 119 205 27 88 49 161 50 162 1
+2 43 -17 94 -42 184 -90 420 -157 672 -191 160 -22 480 -22 641 -1 241 32 491
+103 673 193 50 24 91 42 92 41 1 -1 59 -189 130 -417 117 -381 128 -422 128
+-495 1 -66 -4 -90 -25 -136 -34 -72 -96 -134 -168 -168 l-56 -26 -1095 0
+-1095 0 -56 26 c-32 15 -76 46 -99 69 -105 105 -122 229 -57 431 43 135 45
+158 14 187 -28 27 -67 28 -96 5 -27 -23 -99 -254 -108 -345 -22 -240 148 -467
+385 -517 74 -15 2150 -15 2224 0 235 49 407 278 385 515 -4 40 -58 232 -143
+510 -116 379 -134 448 -122 455 9 5 51 37 95 73 205 165 361 390 432 623 16
+54 32 110 35 125 5 21 16 30 58 43 279 91 620 278 674 370 52 90 41 189 -30
+260 -63 62 -82 65 -440 65 -185 0 -316 4 -316 9 0 5 -2 16 -5 23 -4 10 33 44
+107 101 165 125 208 168 208 204 0 18 -9 38 -23 51 -41 39 -71 29 -176 -56
+-53 -43 -115 -92 -138 -110 l-42 -33 -32 63 c-41 83 -107 185 -182 281 -33 42
+-58 80 -55 82 11 12 899 375 916 375 26 0 52 -31 52 -64 0 -34 -75 -146 -175
+-263 -86 -100 -96 -135 -49 -172 44 -35 71 -27 131 37 64 68 153 188 206 274
+37 60 38 67 35 134 -4 92 -34 140 -109 178 -87 43 -113 38 -379 -73 -129 -54
+-236 -97 -238 -96 -2 1 29 63 67 136 163 311 269 637 259 795 -3 47 -10 71
+-32 103 -33 47 -112 91 -165 91 -96 0 -84 11 -612 -517 l-497 -495 -98 40
+c-134 54 -240 87 -375 114 -99 20 -144 23 -339 23 -195 0 -240 -3 -339 -23
+-135 -27 -241 -60 -375 -114 l-98 -40 -497 495 c-422 422 -502 497 -536 506
+-58 16 -104 13 -150 -8z m579 -600 l468 -468 -78 -53 c-84 -56 -157 -113 -215
+-167 l-35 -34 -136 56 -135 56 -76 127 c-153 259 -263 506 -318 720 -33 129
+-37 187 -12 214 40 45 43 43 537 -451z m3368 452 c26 -23 23 -82 -12 -217 -54
+-209 -166 -462 -317 -718 l-75 -126 -136 -57 -135 -56 -36 34 c-55 51 -143
+120 -222 173 l-71 47 469 468 c489 490 491 492 535 452z m-1627 -842 c791
+-170 1370 -845 1342 -1566 -8 -197 -42 -331 -127 -492 -120 -230 -313 -414
+-574 -547 -514 -262 -1267 -283 -1822 -51 -582 244 -887 749 -799 1325 104
+689 700 1241 1460 1354 17 2 118 3 225 1 154 -2 216 -7 295 -24z m-2177 -256
+c245 -102 447 -187 450 -190 3 -2 -22 -40 -55 -82 -74 -96 -141 -198 -182
+-281 l-32 -63 -62 48 c-262 202 -464 405 -595 600 -24 35 -42 74 -42 89 0 33
+26 64 53 64 10 0 219 -83 465 -185z m58 -987 c-15 -83 -25 -191 -26 -275 l0
+-91 -102 39 c-117 46 -291 131 -376 185 -111 70 -135 111 -92 154 19 19 33 20
+311 20 l291 0 -6 -32z m4184 12 c48 -48 15 -91 -144 -185 -103 -60 -182 -98
+-328 -155 l-98 -38 0 91 c-1 84 -11 192 -26 275 l-6 32 291 0 c278 0 292 -1
+311 -20z" />
+        <path d="M1630 2960 c-17 -17 -20 -33 -20 -113 0 -85 2 -96 23 -115 29 -27 67
+-28 98 -3 22 18 24 26 24 116 0 90 -2 98 -24 116 -30 25 -76 24 -101 -1z" />
+        <path d="M3389 2961 c-22 -18 -24 -26 -24 -116 0 -90 2 -98 24 -116 32 -26 73
+-24 99 4 19 20 22 35 22 115 0 79 -3 95 -20 112 -25 25 -71 26 -101 1z" />
+        <path d="M2341 2654 c-42 -53 -15 -107 81 -159 47 -27 63 -30 138 -30 75 0 91
+3 138 30 96 52 123 106 81 159 -29 37 -70 34 -121 -6 -35 -29 -48 -33 -98 -33
+-50 0 -63 4 -98 33 -51 40 -92 43 -121 6z" />
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/PersistentWindow.vue b/frontend/src/components/PersistentWindow.vue
index 68bac3e5..e81c5119 100644
--- a/frontend/src/components/PersistentWindow.vue
+++ b/frontend/src/components/PersistentWindow.vue
@@ -108,7 +108,7 @@
   <Button v-show="showPersistentComponent" type="button" severity="primary" rounded
     :class="`!absolute z-[9] bottom-9 right-9 group/chat !w-16 !h-16 !border-2 !border-primary-200 !text-[#d3e4ff] hover:!text-white transition-all duration-500`"
     @click="windowCheck = !windowCheck">
-    <img src="@/assets/logo.png" />
+    <img src="@/assets/logo.svg" />
     <span
       class="w-full h-full absolute top-0 left-0 bg-gradient-prime rounded-full transition-all duration-500 group-hover/chat:rotate-180 z-[-1]"></span>
   </Button>
diff --git a/frontend/src/layout/VerticalPane.vue b/frontend/src/layout/VerticalPane.vue
index ff5c8fac..350ad430 100644
--- a/frontend/src/layout/VerticalPane.vue
+++ b/frontend/src/layout/VerticalPane.vue
@@ -1,109 +1,134 @@
 <template>
-  <Card class="w-[26rem] !rounded-none order-2"
-    :pt="{ body: { class: 'h-full !py-3 !px-0' }, content: { class: 'h-full flex flex-col gap-4' } }">
-    <template #content>
-      <section :class="`flex relative overflow-hidden transition duration-300 ease-in-out ${containerA.length > 0 ? 'flex-[1_1_50%]' : ''
-        }`">
-        <Tabs class="flex-1 w-full tab-active-grad" scrollable :value="active_tabA" @update:value="onchangeTabA">
-          <TabList :class="`flex-shrink-0 ${dragged_to_container === 'paneContainer1' ? 'opacity-50' : ''}`"
-            :pt="{ activeBar: 'tab-activebar-grad' }">
-            <!-- <draggable id="paneContainer1" class="min-h-[32px] w-full flex cursor-move" v-model="containerA"
+  <div :class="`group/parent flex h-full relative animate__animated animate__faster z-[1]
+      ${stacked === 'left' ? 'order-2' : 'order-4'}
+      ${is_minimized ? 'w-0 animate__fadeOutDown' : 'animate__fadeInUp'}`">
+
+    <div :class="`flex flex-col gap-2 absolute top-2 p-1 z-[1] opacity-0 duration-300 group-hover/parent:opacity-100
+          ${stacked === 'left' ? 'left-full rounded-tr-lg rounded-br-lg' : 'right-full rounded-tl-lg rounded-bl-lg'}`">
+      <Button class="w-5 h-5 !p-1.5" type="button" size="small" severity="warn" rounded
+        v-tooltip.bottom="'Minimize pane'" @click="minimizePane">
+        <span class="material-symbols-rounded !text-lg"> keep_off </span>
+      </Button>
+      <Button v-if="!is_minimized" class="w-5 h-5 !p-1.5" type="button" size="small" severity="success" rounded
+        v-tooltip.bottom="'Stack pane right'" @click="changePanePosition">
+        <span class="material-symbols-rounded !text-lg">
+          {{ stacked === "left" ? "arrow_right_alt" : "arrow_left_alt" }}
+        </span>
+      </Button>
+    </div>
+    <Card class="w-[26rem] !rounded-none"
+      :pt="{ body: { class: 'h-full !py-3 !px-0' }, content: { class: 'h-full flex flex-col gap-4' } }">
+      <template #content>
+        <section :class="`flex relative overflow-hidden transition duration-300 ease-in-out ${containerA.length > 0 ? 'flex-[1_1_47%]' : ''
+          }`">
+          <Tabs class="flex-1 w-full tab-active-grad" scrollable :value="active_tabA" @update:value="onchangeTabA">
+            <TabList :class="`flex-shrink-0 ${dragged_to_container === 'paneContainer1' ? 'opacity-50' : ''}`"
+              :pt="{ activeBar: 'tab-activebar-grad' }">
+              <!-- <draggable id="paneContainer1" class="min-h-[32px] w-full flex cursor-move" v-model="containerA"
               item-key="id" group="shared" :sort="true" :move="checkMove" @end="onDragEnd"> -->
-            <!-- <template #item="{ element }"> -->
-            <Tab v-for="(element) in containerA" v-show="element.view?.includes(mode)" class="!px-2.5 !py-1 rounded"
-              :key="element.value" :value="element.value">
-              {{ element.name }}
-            </Tab>
-            <!-- </template> -->
-            <!-- </draggable>  -->
+              <!-- <template #item="{ element }"> -->
+              <Tab v-for="(element) in containerA" v-show="element.view?.includes(mode)" class="!px-2.5 !py-1 rounded"
+                :key="element.value" :value="element.value">
+                {{ element.name }}
+              </Tab>
+              <!-- </template> -->
+              <!-- </draggable>  -->
 
-            <!-- <h6 v-if="containerA.length === 0"
+              <!-- <h6 v-if="containerA.length === 0"
               class="w-full h-full absolute top-0 left-0 flex items-center justify-center border border-dashed border-slate-400 rounded dark:bg-[#0F182A] bg-white text-slate-400 text-sm text-center">
               Drag and drop tabs
             </h6> -->
-          </TabList>
-          <!-- @active_term_changed="active_term = $event" @active_layer_changed="active_layer = $event" -->
-          <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto" v-if="containerA.length > 0">
-            <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>
+            </TabList>
+            <!-- @active_term_changed="active_term = $event" @active_layer_changed="active_layer = $event" -->
+            <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto" v-if="containerA.length > 0">
+              <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" 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="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" v-if="mode === 'protein'">
-              <CitationMenu :active_node="active_node" :active_background="active_background"></CitationMenu>
-            </TabPanel>
+              <TabPanel class="flex-1" value="citation" v-if="mode === 'protein'">
+                <CitationMenu :active_node="active_node" :active_background="active_background"></CitationMenu>
+              </TabPanel>
 
-            <TabPanel v-if="mode === 'term'" class="flex-1" value="tlist">
-              <PathwayGraphList :term_data="gephi_data" :mode="mode"></PathwayGraphList>
-            </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="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>
-          </TabPanels>
-        </Tabs>
-      </section>
+              <TabPanel v-if="mode === 'citation'" class="flex-1" value="communities">
+                <CitationCommunities :citation_data="gephi_data" :await_community="await_community">
+                </CitationCommunities>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </section>
 
-      <section :class="`flex relative overflow-hidden transition duration-300 ease-in-out ${containerB.length > 0 ? 'flex-[1_1_50%]' : ''
-        }`">
-        <Tabs class="flex-1 w-full tab-active-grad" scrollable :value="active_tabB" @update:value="onchangeTabB">
-          <TabList :class="`flex-shrink-0 ${dragged_to_container === 'paneContainer2' ? 'opacity-50' : ''}`">
-            <!-- <draggable id="paneContainer2" class="min-h-[32px] w-full flex cursor-move" v-model="containerB"
+        <section :class="`flex relative overflow-hidden transition duration-300 ease-in-out ${containerB.length > 0 ? 'flex-[1_1_53%]' : ''
+          }`">
+          <Tabs class="flex-1 w-full tab-active-grad" scrollable :value="active_tabB" @update:value="onchangeTabB">
+            <TabList :class="`flex-shrink-0 ${dragged_to_container === 'paneContainer2' ? 'opacity-50' : ''}`">
+              <!-- <draggable id="paneContainer2" class="min-h-[32px] w-full flex cursor-move" v-model="containerB"
               item-key="id" group="shared" :sort="true" :move="checkMove" @end="onDragEnd"> -->
-            <!-- <template #item="{ element }"> -->
-            <Tab v-for="(element) in containerB" v-show="element.view?.includes(mode)" class="!px-2.5 !py-1 rounded"
-              :key="element.value" :value="element.value">
-              {{ element.name }}
-            </Tab>
-            <!-- </template> -->
-            <!-- </draggable> -->
+              <!-- <template #item="{ element }"> -->
+              <Tab v-for="(element) in containerB" v-show="element.view?.includes(mode)" class="!px-2.5 !py-1 rounded"
+                :key="element.value" :value="element.value">
+                {{ element.name }}
+              </Tab>
+              <!-- </template> -->
+              <!-- </draggable> -->
 
-            <!-- <h6 v-if="containerB.length === 0"
+              <!-- <h6 v-if="containerB.length === 0"
               class="w-full h-full absolute top-0 left-0 flex items-center justify-center border border-dashed border-slate-400 rounded dark:bg-[#0F182A] bg-white text-slate-400 text-sm text-center">
               Drag and drop tabs
             </h6> -->
-          </TabList>
-          <!-- @active_term_changed="active_term = $event" @active_layer_changed="active_layer = $event" -->
+            </TabList>
+            <!-- @active_term_changed="active_term = $event" @active_layer_changed="active_layer = $event" -->
 
-          <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto" v-if="containerB.length > 0">
-            <TabPanel class="flex-1" value="set">
-              <PathwaySet :gephi_data="gephi_data" :api="api" :mode="mode"></PathwaySet>
-            </TabPanel>
+            <TabPanels class="h-[calc(100%-34px)] flex flex-col !p-0 !px-3 overflow-auto" v-if="containerB.length > 0">
+              <TabPanel class="flex-1" value="set">
+                <PathwaySet :gephi_data="gephi_data" :api="api" :mode="mode"></PathwaySet>
+              </TabPanel>
 
-            <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="layers" v-if="mode === 'protein'">
+                <PathwayLayers :active_termlayers="active_termlayers" :gephi_data="gephi_data" />
+              </TabPanel>
 
-            <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="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 && mode === 'protein'">
-              <DifExpMenu :active_decoloumn="active_decoloumn" :gephi_data="gephi_data" />
-            </TabPanel>
+              <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 === '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>
-        </Tabs>
-      </section>
-    </template>
-  </Card>
+              <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>
+          </Tabs>
+        </section>
+      </template>
+    </Card>
+  </div>
+  <Button v-show="is_minimized" type="button" severity="contrast" rounded
+    :class="`!absolute z-[9] bottom-9 left-20 !border-2 !border-primary-500`" @click="minimizePane">
+    <span class="material-symbols-rounded"> tv_options_input_settings </span>
+    Customization
+  </Button>
 </template>
 
 <script>
@@ -119,7 +144,9 @@ export default {
     "active_decoloumn",
     "node_index"
   ],
-  // components: { draggable },
+  components: {
+    // draggable,
+  },
   data() {
     return {
       favourite_pathways: [],
@@ -150,6 +177,9 @@ export default {
         { id: 9, name: "Diff exp", value: "difexp", view: ['protein'] },
         { id: 11, name: "Summary", value: "summary", view: ['citation'] },
       ],
+      is_minimized: false,
+      stacked: "left",
+      initial_drag_btn_position: { top: window.innerHeight - 80, left: 100 },
     };
   },
   watch: {
@@ -255,6 +285,13 @@ export default {
           com.await_load = false;
         });
     },
+    minimizePane(e) {
+      e.stopPropagation();
+      this.is_minimized = !this.is_minimized;
+    },
+    changePanePosition() {
+      this.stacked = this.stacked === "left" ? "right" : "left";
+    },
   },
   created() {
     this.emitter.on("enrichTerms", (terms) => {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7eb5ac66..315a9494 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -30,6 +30,7 @@ export default {
         "curve-light": "0 0.95rem 1.4rem -1.65rem #ffffff",
       },
       backgroundImage: {
+        "gradient-front": "linear-gradient(45deg,  rgba(39,42,55,1) 0%,rgba(39,42,55,0.97) 50%,rgba(39,42,55,0.4) 100%)",
         "gradient-prime": "linear-gradient(45deg, rgba(185,45,212,1) 0%, rgba(40,207,186,1) 100%)",
         "gradient-prime-reverse": "linear-gradient(45deg, rgba(40,207,186,1) 0%, rgba(185,45,212,1) 100%)",
         "gradient-prime-opacity": "linear-gradient(45deg, rgba(185,45,212,0.1) 0%, rgba(40,207,186,0.1) 100%)",