public renderLegend()

in src/UXClient/Components/EventsTable/EventsTable.ts [99:183]
81 lines of code
9 McCabe index (conditional complexity)

    public renderLegend() {
        this.eventsLegend.html("");
        this.eventsLegend.append("ul");

        var columns = this.eventsTableData.sortColumnKeys()
            .map((cIdx) => this.eventsTableData.columns[cIdx]);
        
        this.setSelectAllState();
        if (columns.length > 2) { // tristate - all selected
            var selectAllColumns = this.eventsLegend.select("ul")
                .append("li").attr("class", "tsi-selectAllColumns");
            selectAllColumns.append("button").attr("class", "tsi-columnToggleButton")
                .attr("aria-label", () => {
                    var selectAllState = this.getSelectAllState();
                    return selectAllState !== "all" ? this.getString("Toggle all columns") : this.getString("Toggle all columns");
                })
                .on("click", () => {
                    var setAllVisible: boolean = false;
                    var selectAllState = this.getSelectAllState();
                    if (selectAllState != "all") {
                        setAllVisible = true;
                    }
                    Object.keys(this.eventsTableData.columns).forEach((columnKey) => {
                        if (setAllVisible) {
                            this.eventsTableData.columns[columnKey].visible = true;
                        } else {
                            if (columnKey != this.timestampColumnName)
                                this.eventsTableData.columns[columnKey].visible = false;
                        }
                        
                    });
                    this.setLegendColumnStates();
                    this.buildTable();
                });
            selectAllColumns.append("span").attr("class", "tsi-columnToggleCheckbox");
            selectAllColumns.append("span").attr("class", "tsi-selectAllSomeState");
            selectAllColumns.append("span").attr("class", "tsi-columnToggleName")
                .text(this.getString("All Columns"));
        }
        var toggleableColumnLis = this.eventsLegend.select("ul").selectAll(".tsi-columnToggle")
            .data(columns);
        
        var toggleableColumnLisEntered = toggleableColumnLis.enter()
            .append("li")
            .classed("tsi-columnToggle", true)
            .merge(toggleableColumnLis)
        var self = this;
        toggleableColumnLisEntered.each(function (d) {
            d3.select(this).append("button").attr("class", "tsi-columnToggleButton")
                .attr("aria-label", (d: any) => "toggle column " + d.key)
                .on("click", (d: any) => {
                    d.visible = !d.visible;
                    self.setLegendColumnStates();
                    self.buildTable();
                });
            d3.select(this).append("div").attr("class", "tsi-columnToggleCheckbox");
            if (d.isTsid) {
                let typeIconCOntainer = d3.select(this).append("div").attr("class", "tsi-columnTypeIcons");
                typeIconCOntainer.append("span").attr("class", "tsi-columnTypeIcon")
                    .classed("tsid", true).attr("title", self.getString("Time Series ID"));
                typeIconCOntainer.append("span").attr("class", "tsi-columnTypeIcon")
                    .classed(d.type, true);
            } else {
                d3.select(this).append("div").attr("class", "tsi-columnTypeIcon")
                    .classed(d.type, true);
            }
            d3.select(this).select("button").append("div").attr("class", "tsi-onlyLabel").text(self.getString("only"))
                .attr('tabindex', "0")
                .attr('role', 'button')
                .on("click", (d: any) => {
                    d3.event.stopPropagation();
                    columns.forEach((column: any) => {
                        if (column.key == d.key)
                            column.visible = true;
                        else 
                            column.visible = false;
                    });
                    self.setLegendColumnStates();
                    self.buildTable();
                })
            d3.select(this).append("div").attr("class", "tsi-columnToggleName").classed('tsidPropertyName', (d: any) => d.isTsid).text((d : any) => columns.filter(c => c.name === d.name).length > 1 ? `${d.name} (${d.type})` : d.name);
        });
        this.setLegendColumnStates();
        toggleableColumnLis.exit().remove();
    }