in src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts [1021:1148]
private renderTree(data, target, locInTarget = null, skipLevels = null) {
if (Object.keys(data).length === 0) {
this.showNoResultsForSearch();
return;
} else {
this.noResultsElem.style("display", "none");
if (this.mode === State.Filter) {
(this.viewTypesElem.node() as any).style.display = "inline-flex";
}
}
let list, currentShowMore;
if (!locInTarget) {
list = target
.append("ul")
.attr("role", target === this.hierarchyElem ? "tree" : "group");
} else {
if (locInTarget === ".tsi-show-more.tsi-show-more-hierarchy")
currentShowMore = target
.selectAll(".tsi-show-more.tsi-show-more-hierarchy")
.filter(function (d, i, list) {
return i === list.length - 1;
});
else
currentShowMore = target
.selectAll(".tsi-show-more.tsi-show-more-instance")
.filter(function (d, i, list) {
return i === list.length - 1;
});
currentShowMore.node().style.display = "none";
currentShowMore.classed("tsi-target-loc", true);
}
if (locInTarget && skipLevels) {
while (skipLevels) {
data = data[Object.keys(data)[0]].children;
skipLevels--;
}
}
Object.keys(data).forEach((el) => {
let li, newListElem;
let nodeNameToCheckIfExists =
data[el] instanceof InstanceNode &&
data[el].name !== this.getString("Show More Instances")
? this.instanceNodeString(data[el])
: el;
if (locInTarget) {
if (
// ⛳️: performance hit
target
.selectAll(".tsi-name")
.nodes()
.find((e) => e.innerText === nodeNameToCheckIfExists)
) {
return;
}
li = target
.insert("li", ".tsi-target-loc")
.classed("tsi-leaf", data[el].isLeaf);
} else {
if (
// ⛳️: performance hit
list
.selectAll(".tsi-name")
.nodes()
.find((e) => e.innerText === nodeNameToCheckIfExists)
) {
return;
}
li = list.append("li").classed("tsi-leaf", data[el].isLeaf);
}
li.attr("role", "none");
if (el === this.getString("Show More Hierarchies")) {
li.classed("tsi-show-more tsi-show-more-hierarchy", true)
.append("span")
.classed("tsi-hierarchyItem", true)
.attr("tabindex", 0)
.attr("role", "treeitem")
.attr("aria-expanded", false)
.attr("style", `padding-left: ${data[el].level * 18 + 20}px`)
.text(this.getString("Show more"))
.on("click keydown", function () {
if (Utils.isKeyDownAndNotEnter(d3.event)) {
return;
}
return data[el].onClick();
});
} else if (el === this.getString("Show More Instances")) {
li.classed("tsi-show-more tsi-show-more-instance", true)
.append("span")
.classed("tsi-hierarchyItem", true)
.attr("tabindex", 0)
.attr("role", "treeitem")
.attr("aria-expanded", false)
.attr("style", `padding-left: ${data[el].level * 18 + 20}px`)
.text(this.getString("Show more"))
.on("click keydown", function () {
if (Utils.isKeyDownAndNotEnter(d3.event)) {
return;
}
data[el].onClick();
});
} else {
newListElem = this.createHierarchyItemElem(data[el], el);
li.node().appendChild(newListElem.node());
}
data[el].node = li;
if (data[el].children) {
data[el].isExpanded = true;
data[el].node.classed("tsi-expanded", true);
this.renderTree(data[el].children, data[el].node);
}
if (
data[el] instanceof HierarchyNode &&
el !== this.getString("Show More Hierarchies") &&
this.mode === State.Filter &&
data[el].cumulativeInstanceCount == 1 &&
!data[el].isExpanded
) {
//expand the last parent node by default to prevent additional click to see the filter results
newListElem.node().click();
}
});
if (locInTarget) {
currentShowMore.remove();
}
}