Keep all ontology domains in menu

scenes/ssgp/index.html

@@ -157,7 +157,7 @@
             <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0">
                 <!-- Temporary -->
                 <ul class="list-group me-4 ms-0">
-                    <li class="list-group-item pt-2 pb-2" id="ontology-list"> </li>
+                    <li class="list-group-item pt-2 pb-2" id="ontology-list"></li>
                 </ul>
             </div>
         </div>

src/controllers/menu_controller.js

@@ -225,30 +225,37 @@ export default class extends Controller {
     /**
      * Temporary implementation to show domains only
      * @todo Don't rebuild it every time, use caching, return a container
-     * @param {Object} ontology The traversed ontology object (temp)
+     * @param {Array<{id: string, tree: Array<Object>}>} domains The traversed ontology domains
      * @param {HTMLElement} tab Tab content element
      */
-    #buildOntologyMenu(ontology, tab) {
+    #buildOntologyMenu(domains, tab) {
         const mainNode = tab.querySelector('#ontology-list');
-        mainNode.innerHTML = html`
-            <span class="fs-5 fw-bold">${ontology.ontology}</span>
-        `;
         mainNode.classList.add('pb-3');
 
-        let domainList = document.createElement('div');
+        for (let domain of domains) {
+            const heading = document.createElement('span');
+            heading.className ="fs-5 fw-bold";
+            heading.textContent = domain.id;
+            mainNode.appendChild(heading);
 
-        for (let domain of ontology.domains) {
-            const domainItem = document.createElement('div');
-            domainItem.className = 'border-start border-bottom rounded';
-            domainItem.textContent = domain.label;
-            // Indentation...
-            domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
+            let domainList = document.createElement('div');
 
-            if (domain.depth === 1) domainItem.classList.add('fw-bold');
+            console.debug(domain.tree);
 
-            domainList.appendChild(domainItem);
+            // Traverse class trees for each domain
+            for (let item of domain.tree) {
+                const domainItem = document.createElement('div');
+                domainItem.className = 'border-start border-bottom rounded';
+                domainItem.textContent = item.label;
+                // Indentation...
+                domainItem.classList.add(`ms-${item.depth}`, `ps-${item.depth}`, 'py-2');
+
+                if (item.depth === 1) domainItem.classList.add('fw-bold');
+
+                domainList.appendChild(domainItem);
+            }
+
+            mainNode.appendChild(domainList);
         }
-
-        mainNode.appendChild(domainList);
     }
 }

src/ontology.js

@@ -12,21 +12,20 @@ export async function traverseOntology(jsonPath) {
     const ontology = await loadOntology(jsonPath);
     const modules = ontology.modules;
 
-    let tree = [];
+    const domains = [];
 
     for (const module of modules) {
-        if (module.id === 'Architecture') {
-            console.debug(module.classTrees);
-            for (const classTree of module.classTrees) {
-                traverseClasses(classTree, tree);
-            }
+        let tree = [];
+        for (const classTree of module.classTrees) {
+            traverseClasses(classTree, tree);
         }
+        domains.push({
+            id: module.id,
+            tree
+        });
     }
 
-    return {
-        ontology: "Architecture",
-        domains: tree
-    };
+    return domains;
 }
 
 /**
@@ -52,7 +51,6 @@ function traverseClasses(ontologyClass, tree, depth = 1) {
             );
         }
     }
-
 }
 
 /**