Keep all ontology domains in menu

This commit is contained in:
2026-06-23 22:47:17 +02:00
parent 28a34905c7
commit 60646cebf6
3 changed files with 33 additions and 28 deletions

View File

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

View File

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

View File

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