feat: Make adding new versions easier

index.html

@@ -42,24 +42,7 @@ <h1 id="pageTitle">EDAM ontology</h1>
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                          <span class="selection version-title" style="padding-right:4px">1.25 (stable)</span><span class="caret"></span>
                     </button>
-                    <ul class="dropdown-menu" role="menu">
-                    <li> 
-                        <a class="branch" onclick="browser.current_branch('edam','stable')"  >1.25 (stable)</a>
-                    </li>
-                    <li>
-                        <a class="branch" onclick="browser.current_branch('edam','1.24')" >1.24</a>
-                    </li>
-                    <li>
-                        <a class="branch" onclick="browser.current_branch('edam','1.23')">1.23</a>
-                    </li>
-                    <li role="separator" class="divider"></li>
-                    <li>
-                        <a class="branch" onclick="browser.current_branch('edam','latest')">latest (unstable)</a>
-                    </li>
-                    <li>
-                        <a class="branch" onclick="triggerVersion()">Custom Version</a>
-                    </li>    
-
+                    <ul class="dropdown-menu" id= "version-menu" role="menu">
                     </ul>
                 </div>
                 <div class="btn-group branch-group">

js/index.js

@@ -18,6 +18,7 @@ import 'regenerator-runtime/runtime';
 import * as d3 from 'd3';
 
 import {interactive_tree} from "./tree-reusable-d3.js"
+import {populateVersions,versionsDropdown} from "./versionsMap.js"
 
 import gtag, { install } from 'ga-gtag';
 
@@ -145,11 +146,13 @@ window.onload =  function (){
             });
         }
     });
+    populateVersions();
 
-    window.triggerVersion = function (){
+}
+    const triggerVersion = function (){
         $("#versionModal").modal('show');
     }
-};
+    window.triggerVersion=triggerVersion;
 
 const configGtag = function(){
     install('UA-115521967-1');    
@@ -158,18 +161,17 @@ const configGtag = function(){
     gtag('js', new Date());
 
     gtag('config', 'UA-115521967-1');
-
+    
 };
 
 const updateVersion=function(version){
-    const versionDict={"custom":4,"latest":3,"stable":0,"1.24":1,"1.23":2};
     let index;
     if(customRe.test(version))
-        index=versionDict["custom"];
+        index=versionsDropdown.indexOf("custom");
     else if (version=="undefined")
-        index=versionDict["stable"];
+        index=versionsDropdown.indexOf("stable")
     else 
-        index=versionDict[version]
+        index=versionsDropdown.indexOf(version)
     var text = $(".version-group .dropdown-menu li a")[index]?.innerText
     $('.version-title').html(text)
 }
@@ -186,4 +188,4 @@ const updateBranch=function(branch){
     $('.branch-title').html(text)
 }
 
-export {updateBranch,updateVersion}
+export {updateBranch,updateVersion,triggerVersion}

js/tree-edam-stand-alone.js

@@ -6,6 +6,7 @@ import {biosphere_api} from "./biosphere.api.js"
 import {bioweb_api} from "./bioweb.api.js"
 import {tess_api} from "./tess.api.js"
 import {updateVersion,updateBranch} from "./index.js"
+import {getTreeURL} from "./versionsMap.js"
 
 var customRe = new RegExp("^(http|https)://", "i");
 
@@ -122,20 +123,6 @@ function interactive_edam_browser(){
         setCookie("custom_url",versionURL);
        }
 
-    function getTreeURL(version){
-        switch(version){
-            case 'latest':
-                return "https://raw.githubusercontent.com/edamontology/edamontology/main/EDAM_dev.owl";
-            case 'custom':
-                return getCookie("custom_url","");
-            case 'stable':
-                return "https://raw.githubusercontent.com/edamontology/edamontology/main/releases/EDAM_1.25.owl";
-            default:
-                return "https://raw.githubusercontent.com/edamontology/edamontology/main/releases/EDAM_"+version+".owl";
-        }
-    }
-
-
 
     function selectCustom(){
         let branch="custom";

js/versionsMap.js

@@ -0,0 +1,67 @@
+import {getCookie} from "./utils.js"
+import {triggerVersion} from "./index.js"
+
+
+//map of al available versions in the drodown menu,to add a version:
+// 1. add all the needed info to this map where with the version as key:
+    //label: displayed label in the drpdown menu.
+    //url: url where the raw owl file is located, if missing, it will loaded from the baseUrl.
+// 2. add the version to the versionsDropdown in the preferred order to display.
+// Changing existing names of keys WILL break things. Like the name "stable". Please change values(label, url) only or add new values/keys.
+// Order of the map is not guranteed, hence the need for the versionsDropdown
+const versionsMap = {
+    "stable":{label:"1.25 (stable)",url:"https://raw.githubusercontent.com/edamontology/edamontology/main/releases/EDAM_1.25.owl"},
+    "1.24":{label:"1.24"},
+    "1.23":{label:"1.23"},
+    "latest":{label:"latest (unstable)",url:"https://raw.githubusercontent.com/edamontology/edamontology/main/EDAM_dev.owl"},
+    "custom":{label:"Custom Version"}
+};
+
+//order of displayed versions in the dropdown menu
+const versionsDropdown = ["stable","1.24","1.23","latest","custom"]
+
+const baseURL="https://raw.githubusercontent.com/edamontology/edamontology/main/releases/";
+
+
+/**
+ * 
+ * @param {string} version name of the version as key in the versionsMap.
+ * @returns url as retrieved from the map, fallback to the baseURL or custome url.
+ */
+function getTreeURL(version){
+    switch(version){
+        case 'custom':
+            return getCookie("custom_url","");
+        default: 
+            if ("url" in versionsMap[version])
+                return versionsMap[version]["url"];
+            return baseURL+"EDAM_"+version+".owl";
+    }
+}
+
+/**
+ * populate the versionsMap data dynamically in the dropdown menu.
+ */
+function populateVersions(){
+    var versionMenu = document.getElementById("version-menu");
+    versionsDropdown.map((val)=>{         
+        var li = document.createElement('li');
+        var a = document.createElement('a');
+        a.classList.add("branch")
+        a.innerText=versionsMap[val]["label"];
+        li.appendChild(a);
+        if(val =="custom")
+        a.addEventListener('click', function(){
+            triggerVersion();
+        });
+
+        else 
+        a.addEventListener('click', function(){
+            browser.current_branch('edam',val);
+        });
+        versionMenu.appendChild(li);
+    });
+}
+
+
+export {getTreeURL,versionsDropdown,populateVersions}