Keep all ontology domains in menu
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user