Implemented Bookmark Functionality.

css/index.css

@@ -215,4 +215,25 @@ body {
 .flex-column{
     flex-direction: column;
 }
+#bookClick{
+    width: 100%;
+    margin: 8px 8px;
+    border-radius: 100px;
+    font-size: 18px;
+    align-items: center;
+    box-sizing: border-box;
+    max-height: none;
+    min-height: 48px;
+    padding: 0 17px;
+    position: relative;
+    border-color: black;
+}
+.bookmarks {
+    column-count: 2;
+}
+@media screen and (max-width: 600px) {
+    .bookmarks {
+        column-count: 1;
+    }
+}
 /*end of file*/

index.html

@@ -134,7 +134,7 @@ <h1 id="pageTitle">EDAM ontology</h1>
         </div>
     </div>
     <div class="content row" id="main">
-        <div class="col-xs-12 col-lg-8">
+        <div class="col-xs-12 col-lg-8 parentContainer">
             <div class="panel panel-default" id="tree-and-controls">
 		<div class="loader-wrapper">
                   <i class="fa fa-spinner fa-spin fa-10x"></i>

js/index.js

@@ -64,6 +64,30 @@ window.onload = function() {
     }else{
         browser.current_branch(branch);
     }
+    let keys = Object.keys(sessionStorage);
+    if (keys != "IsThisFirstTime_Log_From_LiveServer") {
+        if ($(".bookmarks").length == 0) {
+            $(".parentContainer").append("<div class='bookmarks'></div>");
+        }
+        for (let key of keys) {
+            if (key != "IsThisFirstTime_Log_From_LiveServer") {
+                $(".bookmarks").append(
+                `<button id="bookClick">${key}</button>`
+                );
+            }
+        }
+
+        const buttons = document.querySelectorAll("#bookClick");
+        for (const button of buttons) {
+            button.addEventListener("click", function () {
+                browser.interactive_tree().cmd().clearSelectedElements(false);
+                browser
+                .interactive_tree()
+                .cmd()
+                .selectElement(`${sessionStorage.getItem(button.innerHTML)}`, true);
+            });
+        }
+  }
     $("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");
 };

js/tree-edam-stand-alone.js

@@ -222,6 +222,7 @@ function interactive_edam_browser(){
         details +=                 '<span>';
         details +=                 '<a title="edit this term" type="button" class="btn btn-default btn-xs pull-right" target="_blank" href="edit.html?term='+uri+'&branch='+current_branch+'"><span class="glyphicon glyphicon-pencil"></span></a>';
         details +=                 '<a title="add a child to this term" type="button" class="btn btn-default btn-xs pull-right" target="_blank" href="edit.html?parent='+uri+'&branch='+current_branch+'"><span class="glyphicon glyphicon-plus"></span></a>';
+        details +=                 `<a title="bookmark this term" type="button" class="btn btn-default btn-xs pull-right" id="bookmark" target="_blank"><span class="glyphicon glyphicon-bookmark"></span></a>`;
         details +=                 '</span>';
         details +=             '</h4>';
         details +=         '</div>';
@@ -232,6 +233,9 @@ function interactive_edam_browser(){
         details += '</div>';
         details=$(details);
         details.find(".term-name-heading").text(d.data.text);
+        details.find("#bookmark").click(function () {
+            bookmark(d.data.text, d.data.data.uri);
+          });
         return details;
     }
 
@@ -754,3 +758,30 @@ function toggleFullscreen(){
         $('#go-fullscreen').show();
     }
 }
+function bookmark(branch, uri) {
+    sessionStorage.setItem(branch, uri);
+    let keys = Object.keys(sessionStorage);
+    for (const key of keys) {
+        $("#bookClick").remove();
+    }
+    for (const key of keys) {
+        if (key != "IsThisFirstTime_Log_From_LiveServer") {
+            if ($(".bookmarks").length == 0) {
+                $(".parentContainer").append("<div class='bookmarks'></div>");
+            }
+            $(".bookmarks").append(
+            `<button id="bookClick">${key}</button>`
+            );
+        }
+    }
+    const buttons = document.querySelectorAll("#bookClick");
+    for (const button of buttons) {
+        button.addEventListener("click", function () {
+            browser.interactive_tree().cmd().clearSelectedElements(false);
+            browser
+            .interactive_tree()
+            .cmd()
+            .selectElement(`${sessionStorage.getItem(button.innerHTML)}`, true);
+        });
+    }
+}