private renderTree()

in src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts [719:801]


    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 (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 (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();
        }
    }