private renderTree()

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