Minor adjustments

src/controllers/menu_controller.js

@@ -6,7 +6,7 @@ import { traverseOntology } from "../ontology.js";
 const html = String.raw;
 const domParser = new DOMParser;
 // TODO: hard-coded, but follows a convention...
-const ontologyJsonPath = location.pathname + 'ontology.json';
+const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json';
 
 export default class extends Controller {
     static targets = ['trigger', 'layers', 'ontology'];
@@ -229,24 +229,26 @@ export default class extends Controller {
      * @param {HTMLElement} tab Tab content element
      */
     #buildOntologyMenu(ontology, tab) {
-        console.debug(ontology);
-
         const mainNode = tab.querySelector('#ontology-list');
-        mainNode.textContent = ontology.ontology;
+        mainNode.innerHTML = html`
-
+            <span class="fs-5 fw-bold">${ontology.ontology}</span>
-        let domainList = html`
-            <ul class="list-group mt-2" id="domains-list"></ul>
         `;
+        mainNode.classList.add('pb-3');
 
-        // Very fragile and ugly!!
+        let domainList = document.createElement('div');
-        mainNode.innerHTML += domainList;
-        domainList = tab.querySelector('#domains-list');
 
-        for(let domain of ontology.domains) {
+        for (let domain of ontology.domains) {
-            const domainItem = html`
+            const domainItem = document.createElement('div');
-                <li class="list-group-item">${domain.label}</li>
+            domainItem.className = 'border-start border-bottom rounded';
-            `;
+            domainItem.textContent = domain.label;
-            domainList.innerHTML += domainItem;
+            // Indentation...
+            domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
+
+            if (domain.depth === 1) domainItem.classList.add('fw-bold');
+
+            domainList.appendChild(domainItem);
         }
+
+        mainNode.appendChild(domainList);
     }
 }

src/ontology.js

@@ -10,25 +10,51 @@
  */
 export async function traverseOntology(jsonPath) {
     const ontology = await loadOntology(jsonPath);
-    const domains = [];
+    const modules = ontology.modules;
 
-    for (const k of Object.keys(ontology)) {
+    let tree = [];
-        if (k === 'domains') {
+
-            for (const domainKey of Object.keys(ontology[k])) {
+    for (const module of modules) {
-                domains.push({
+        if (module.id === 'Architecture') {
-                    label: domainKey,
+            console.debug(module.classTrees);
-                    child: ontology[k][domainKey][0].label,
+            for (const classTree of module.classTrees) {
-                });
+                traverseClasses(classTree, tree);
             }
         }
     }
 
     return {
-        ontology: ontology.ontology,
+        ontology: "Architecture",
-        domains
+        domains: tree
     };
 }
 
+/**
+ * 
+ * @param {Object} ontologyClass 
+ * @param {Array<Object>} tree 
+ * @param {Number} depth
+ */
+function traverseClasses(ontologyClass, tree, depth = 1) {
+    const ontologyNode = {
+        id: ontologyClass.id,
+        label: ontologyClass.label,
+        depth,
+        children: [],
+    };
+
+    tree.push(ontologyNode);
+
+    if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
+        for(const child of ontologyClass.children) {
+            ontologyNode.children.push(
+                traverseClasses(child, tree, depth + 1)
+            );
+        }
+    }
+
+}
+
 /**
  * Load an ontology from its JSON description
  * @param {String} jsonPath The path (URI) of the ontology JSON file