public render()

in src/UXClient/Components/Hierarchy/Hierarchy.ts [19:112]
88 lines of code
13 McCabe index (conditional complexity)

    public render(data: any, options?: any){
        var self = this;
        var targetElement = d3.select(this.renderTarget).classed('tsi-hierarchy', true);
        targetElement.html('');
        this.chartOptions.setOptions(options);
        super.themify(targetElement, this.chartOptions.theme);
        this.withContextMenu = this.chartOptions.withContextMenu;
        this.root = this.buildTree(data);
        this.root.isExpanded = true;
        
        d3.select("html").on("click." + Utils.guid(), () => {
            if (this.clickedNode && d3.event.target != this.clickedNode && this.contextMenu) {
                this.closeContextMenu();
                this.clickedNode = null;
            }
        });
        
        var inputDebounceTimeout;
        var filter = targetElement.append('div').classed('tsi-filterWrapper', true).append('input').attr('placeholder', 'Search...').on('input', function(){
            clearTimeout(inputDebounceTimeout);
            inputDebounceTimeout = setTimeout(() => {
                self.filterText = (<any>this).value.trim();
                if(self.filterText.length == 1)
                    return;  // quick return for small sets
                var splitFilterText = self.filterText.split('/');
                self.root.filter(splitFilterText[0]);
                if(splitFilterText.length > 1){
                    for(var i = 1; i < splitFilterText.length; i++){
                        if(splitFilterText[i].length){
                            var nodesInFilter = self.root.traverse(n => n.selfInFilter);
                            nodesInFilter.forEach(n => {
                                var markedName = n.markedName;
                                n.filter(splitFilterText[i], false)
                                n.markedName = markedName;
                            });
                            nodesInFilter.forEach(n => {
                                if(!n.childrenInFilter)
                                    n.selfInFilter = false;
                            })
                        }
                    }
                }
                list.selectAll('ul').remove();
                list.classed('tsi-expanded', false);
                self.root.childrenInFilter = self.root.childrenInFilter || self.filterText.length == 0;
                if(self.root.childrenInFilter == false)
                    list.append('ul').append('div').text(self.getString('No filter results'))
                else
                    self.expandCollapseList(self.root, list, false);
                list.select('ul').classed('tsi-noPad', true);
            }, 250);
        });

        var navTabs = targetElement.append('div').classed('tsi-navTabWrapper', true);
        var allTab = navTabs.append('div').classed('tsi-navTab tsi-selected', true).text(this.getString('All hierarchies'));
        var selectedTab = navTabs.append('div').classed('tsi-navTab', true).text(this.getString('Selected'));
        
        var list = targetElement.append('div').classed('tsi-hierarchyList', true);
        this.hierarchyList = list;

        allTab.on('click', () => {
            if(!allTab.classed('tsi-selected')){
                allTab.classed('tsi-selected', true)
                selectedTab.classed('tsi-selected', false)
                list.html('').classed('tsi-expanded', false);
                this.expandCollapseList(this.root, list, true);
                list.select('ul').classed('tsi-noPad', true);
                filter.attr('disabled', null);
            }
        });
        selectedTab.on('click', () => {
            if(!selectedTab.classed('tsi-selected')){
                allTab.classed('tsi-selected', false)
                selectedTab.classed('tsi-selected', true)
                list.html('');
                var ul = list.append('ul').classed('tsi-noPad', true);
                var leafs = this.root.traverse(n => n.isSelected);
                leafs.forEach(n => {
                    var li = ul.append('li').classed('tsi-leaf', n.isLeaf).classed('tsi-selected', n.isSelected).on('click', function(){
                        n.isSelected = !n.isSelected;
                        d3.select(this).classed('tsi-selected', n.isSelected);
                        n.click(n)
                        n.colorify(d3.select(this));
                    });
                    li.append('span').text(n.name).classed('tsi-markedName', true);
                    n.colorify(li);
                });
                filter.attr('disabled', true);
            }
        });

        this.expandCollapseList(this.root, list, false);
        list.select('ul').classed('tsi-noPad', true);
    }