WIP ontology tree in menu

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;
-
-        let domainList = html`
-            <ul class="list-group mt-2" id="domains-list"></ul>
+        mainNode.innerHTML = html`
+            <span class="fs-5 fw-bold">${ontology.ontology}</span>
         `;
+        mainNode.classList.add('border-bottom', 'pb-3');
 
-        // Very fragile and ugly!!
-        mainNode.innerHTML += domainList;
-        domainList = tab.querySelector('#domains-list');
-        
-        for(let domain of ontology.domains) {
-            const domainItem = html`
-                <li class="list-group-item">${domain.label}</li>
-            `;
-            domainList.innerHTML += domainItem;
+        let domainList = document.createElement('div');
+
+        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');
+
+            if (domain.depth === 1) domainItem.classList.add('fw-bold');
+
+            domainList.appendChild(domainItem);
         }
+
+        mainNode.appendChild(domainList);
     }
 }