From 8104af4426c4039c4073cde41c00265217246b09 Mon Sep 17 00:00:00 2001
From: Sakshi Dhamija <sakshidhamija15@gmail.com>
Date: Wed, 12 May 2021 22:38:57 +0530
Subject: [PATCH 1/5] Making tree box extendable vertically.

---
 css/index.css | 19 +++++++++++++++----
 index.html    |  3 ++-
 js/index.js   | 20 ++++++++++++++++++++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/css/index.css b/css/index.css
index 461b7463..3feb5e6f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -115,12 +115,23 @@ a:before {
     text-decoration: none;
 }
 
-#tree-and-controls
+#tree-and-controls 
 {
     position:relative;
-    height: 70vh !important;
+    height: 70vh;
+    min-height: 400px;
+    resize: vertical !important;
+}
+.resizer 
+{
+    background-color: grey;
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    cursor: row-resize;
 }
-
 .tree-controls{
     position: absolute ;
     display:flex;
@@ -128,7 +139,7 @@ a:before {
 }
 .tree-controls-right-bottom{
     right:0px;
-    bottom:1em;
+    bottom:2em;
 }
 .tree-controls-right-top{
     right:0px;
diff --git a/index.html b/index.html
index 3ce391dc..ecffc9ae 100644
--- a/index.html
+++ b/index.html
@@ -217,7 +217,8 @@ <h1 id="pageTitle">EDAM ontology</h1>
                     </div>
                 </div>
                 <div class="tooltip"></div>
-            </div>
+                <div id ="handle" class="resizer"></div>
+            </div> 
         </div>
         <div class="col-xs-12 col-lg-4" id="edamAccordion">
             <div id="history-separator" class="panel-separator temp">
diff --git a/js/index.js b/js/index.js
index a0097c83..b83dbbd1 100644
--- a/js/index.js
+++ b/js/index.js
@@ -64,4 +64,24 @@ window.onload = function() {
     }else{
         browser.current_branch(branch);
     }
+    var treeElement = document.getElementById("tree-and-controls");
+    var resizer = document.getElementById("handle");
+    resizer.addEventListener("mousedown", initDrag, false);
+    var startY, startHeight;
+    function initDrag(e) {
+        startY = e.clientY;
+        startHeight = parseInt(
+        document.defaultView.getComputedStyle(treeElement).height,
+        10
+        );
+        document.documentElement.addEventListener("mousemove", doDrag, false);
+        document.documentElement.addEventListener("mouseup", stopDrag, false);
+    }
+    function doDrag(e) {
+        treeElement.style.height = startHeight + e.clientY - startY + "px";
+    }
+    function stopDrag(e) {
+        document.documentElement.removeEventListener("mousemove", doDrag, false);
+        document.documentElement.removeEventListener("mouseup", stopDrag, false);
+    }
 };

From b4f349ac39e031881ab12c963853b2c84e5e5501 Mon Sep 17 00:00:00 2001
From: Sakshi Dhamija <sakshidhamija15@gmail.com>
Date: Wed, 12 May 2021 22:56:14 +0530
Subject: [PATCH 2/5] Added and removed spaces.

---
 css/index.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index 3feb5e6f..dc66a347 100644
--- a/css/index.css
+++ b/css/index.css
@@ -115,7 +115,7 @@ a:before {
     text-decoration: none;
 }
 
-#tree-and-controls 
+#tree-and-controls
 {
     position:relative;
     height: 70vh;
@@ -132,6 +132,7 @@ a:before {
     bottom: 0;
     cursor: row-resize;
 }
+
 .tree-controls{
     position: absolute ;
     display:flex;

From 7ba9ce43174c0efb6936babd74cbe15f49c351ff Mon Sep 17 00:00:00 2001
From: bryan brancotte <bryan.brancotte@pasteur.fr>
Date: Tue, 18 May 2021 17:42:59 +0200
Subject: [PATCH 3/5] keep the rounded border aspect

---
 css/index.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/css/index.css b/css/index.css
index dc66a347..b33b0859 100644
--- a/css/index.css
+++ b/css/index.css
@@ -131,6 +131,8 @@ a:before {
     right: 0;
     bottom: 0;
     cursor: row-resize;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
 }
 
 .tree-controls{

From f02584e3cd341d3fb61aba13e84755c6a8f2e45e Mon Sep 17 00:00:00 2001
From: bryan brancotte <bryan.brancotte@pasteur.fr>
Date: Tue, 18 May 2021 17:43:28 +0200
Subject: [PATCH 4/5] Darker resizer on hover

---
 css/index.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index b33b0859..32c8ebdf 100644
--- a/css/index.css
+++ b/css/index.css
@@ -122,9 +122,13 @@ a:before {
     min-height: 400px;
     resize: vertical !important;
 }
-.resizer 
+.resizer:hover
 {
     background-color: grey;
+}
+.resizer
+{
+    background-color: #8884;
     width: 100%;
     height: 5px;
     position: absolute;

From 021487d8e182a565de7918b3914aefa725dc49bd Mon Sep 17 00:00:00 2001
From: bryan brancotte <bryan.brancotte@pasteur.fr>
Date: Tue, 18 May 2021 17:44:09 +0200
Subject: [PATCH 5/5] Save/re-use heigh requested by the user

---
 js/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/index.js b/js/index.js
index 10e698a1..933ed6fe 100644
--- a/js/index.js
+++ b/js/index.js
@@ -65,6 +65,7 @@ window.onload = function() {
         browser.current_branch(branch);
     }
     var treeElement = document.getElementById("tree-and-controls");
+    treeElement.style.height = localStorage.getItem("tree-and-controls-height");
     var resizer = document.getElementById("handle");
     resizer.addEventListener("mousedown", initDrag, false);
     var startY, startHeight;
@@ -83,6 +84,7 @@ window.onload = function() {
     function stopDrag(e) {
         document.documentElement.removeEventListener("mousemove", doDrag, false);
         document.documentElement.removeEventListener("mouseup", stopDrag, false);
+        localStorage.setItem("tree-and-controls-height", treeElement.style.height);
     }
     $("input[name='show-detail']").prop("checked" , (localStorage.getItem("show-detail")||"true") == "true");
     $("input[name='show-community-usage']").prop("checked" , (localStorage.getItem("show-community-usage")||"false") == "true");