in src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts [1643:1866]
private createHierarchyItemElem(hORi, key) {
let self = this;
let isHierarchyNode = hORi instanceof HierarchyNode;
let hierarchyItemElem = d3
.create("div")
.classed("tsi-hierarchyItem", true)
.attr(
"style",
`padding-left: ${hORi.isLeaf ? hORi.level * 18 + 20 : (hORi.level + 1) * 18 + 20
}px`
)
.attr("tabindex", 0)
.attr(
"arialabel",
isHierarchyNode ? key : Utils.getTimeSeriesIdString(hORi)
)
.attr("title", isHierarchyNode ? key : Utils.getTimeSeriesIdString(hORi))
.attr("role", "treeitem")
.attr("aria-expanded", hORi.isExpanded)
.on("click keydown", async function () {
if (Utils.isKeyDownAndNotEnter(d3.event)) {
return;
}
if (!isHierarchyNode) {
// means it is an instance
d3.event.stopPropagation();
self.closeContextMenu();
let mouseElt = d3.mouse(this as any);
let target = self.hierarchyElem.select(function () {
return this.parentNode;
});
let mouseWrapper = d3.mouse(target.node());
self.prepareForContextMenu(
hORi,
target,
mouseWrapper[1],
mouseElt[1]
);
self.chartOptions.onInstanceClick(hORi);
} else {
if (hORi.isExpanded) {
hORi.collapse();
} else {
await hORi.expand();
}
}
})
.on("mouseover focus", function () {
if (isHierarchyNode) {
if (
d3.event.relatedTarget !=
d3.select(this.parentNode as Element).select(".tsi-filter-icon").node()
) {
(
d3
.select(this.parentNode as Element)
.select(".tsi-filter-icon")
.node() as any
).style.visibility = "visible";
}
}
})
.on("mouseleave blur", function () {
if (isHierarchyNode) {
if (
d3.event.relatedTarget !=
d3.select(this.parentNode as Element).select(".tsi-filter-icon").node()
) {
(
d3
.select(this.parentNode as Element)
.select(".tsi-filter-icon")
.node() as any
).style.visibility = "hidden";
}
}
});
if (isHierarchyNode) {
hierarchyItemElem
.append("span")
.classed("tsi-caret-icon", true)
.attr("style", `left: ${hORi.level * 18 + 20}px`);
hierarchyItemElem.append("span").classed("tsi-name", true).text(key);
hierarchyItemElem
.append("span")
.classed("tsi-instanceCount", true)
.text(hORi.cumulativeInstanceCount);
hierarchyItemElem.append("span").classed("tsi-hitCount", true).text(""); // hit count is the number of hierarchy nodes below, it is filled after expand is clicked for this node (after search is done for this path)
hierarchyItemElem
.append("div")
.classed("tsi-filter-icon", true)
.attr("title", this.getString("Add to Filter Path"))
.attr("tabindex", 0)
.attr("arialabel", this.getString("Add to Filter Path"))
.attr("role", "button")
.on("click keydown", function () {
if (Utils.isKeyDownAndNotEnter(d3.event)) {
return;
}
self.path = hORi.path;
let pathListElem = d3.select(".tsi-path-list");
pathListElem.text("");
let pathToLoop =
self.selectedHierarchyName !== HierarchySelectionValues.All
? hORi.path.slice(1)
: hORi.path;
pathToLoop.forEach((a, i) => {
if (i > 0) {
pathListElem.append("span").text(" / ");
}
let pathName = self.hierarchyNodeIdentifier(a);
pathListElem
.append("span")
.classed("tsi-path", true)
.text(pathName)
.attr("title", pathName)
.attr("tabindex", 0)
.attr("arialabel", pathName)
.on("click keydown", function () {
if (Utils.isKeyDownAndNotEnter(d3.event)) {
return;
}
self.path = self.path.slice(
0,
i +
(self.selectedHierarchyName === HierarchySelectionValues.All
? 1
: 2)
);
d3.selectAll(
pathListElem
.selectAll("span")
.nodes()
.splice(
i * 2 + 1,
pathListElem.selectAll("span").nodes().length
)
).remove();
self.clearAndGetResults();
});
});
d3.select(".tsi-filter-clear").style("display", "inline-block");
self.filterPathElem.classed("visible", true);
self.clearAndGetResults();
})
.on("mouseleave blur", function () {
if (
d3.event.relatedTarget !=
d3.select((this as HTMLElement).parentNode as Element)
) {
(this as any).style.visibility = "hidden";
}
});
} else {
let spanElem = hierarchyItemElem.append("span").classed("tsi-name", true);
Utils.appendFormattedElementsFromString(
spanElem,
this.instanceNodeStringToDisplay(hORi)
);
if (hORi.highlights) {
let hitsExist = false;
let highlightDetails = hierarchyItemElem
.append("div")
.classed("tsi-highlights-detail", true);
if (
hORi.highlights.description &&
this.hasHits(hORi.highlights.description)
) {
hitsExist = true;
Utils.appendFormattedElementsFromString(
highlightDetails,
hORi.highlights.description
);
}
let hitTuples = [];
if (
hORi.highlights.name &&
this.hasHits(Utils.getHighlightedTimeSeriesIdToDisplay(hORi))
) {
hitsExist = true;
hitTuples.push([
this.getString("Time Series ID"),
Utils.getHighlightedTimeSeriesIdToDisplay(hORi),
]);
}
if (hORi.highlights.instanceFieldNames && hORi.highlights.instanceFieldNames) {
hORi.highlights.instanceFieldNames.forEach((ifn, idx) => {
var val = hORi.highlights.instanceFieldValues[idx];
if (this.hasHits(ifn) || this.hasHits(val)) {
hitsExist = true;
hitTuples.push([ifn, hORi.highlights.instanceFieldValues[idx]]);
}
});
}
let rows = highlightDetails
.append("table")
.selectAll("tr")
.data(hitTuples)
.enter()
.append("tr");
let cells = rows.selectAll("td").data(function (d) {
return d;
});
cells
.enter()
.append("td")
.each(function (d) {
Utils.appendFormattedElementsFromString(d3.select(this), d);
})
.merge(cells as d3.Selection<HTMLTableCellElement,unknown, HTMLTableRowElement,any>);
cells.exit().remove();
rows.exit().remove();
if (hitsExist) {
highlightDetails.style("display", "block");
}
}
}
return hierarchyItemElem;
}