private buildHeaders()

in src/UXClient/Components/EventsTable/EventsTable.ts [229:299]
64 lines of code
13 McCabe index (conditional complexity)

    private buildHeaders (filteredColumnKeys, focusedHeader = null) {
        let longAndDoubleExist = (propertyKey) => {
            let propertyName = this.eventsTableData.columns[propertyKey].name;
            return this.eventsTableData.columns.hasOwnProperty(propertyName + "_Long") && this.eventsTableData.columns.hasOwnProperty(propertyName + "_Double")
        }

        this.eventsTable.select(".tsi-columnHeaders").html("");
        var self = this;
        var columnHeaders = this.eventsTable.select(".tsi-columnHeaders").selectAll(".tsi-columnHeader")
            .data(filteredColumnKeys);
        var isOffsetDateTimeColumn = (d: string) => d.includes('timestamp') && (d.includes('') || d.includes('-')) && !d.includes('$ts') ? true : null
        var columnHeadersEntered = columnHeaders.enter()
            .append("div")
            .classed("tsi-columnHeader", true)
            .classed("tsi-columnHeaderDisabled", isOffsetDateTimeColumn)
            .each( function(d: string) {
                d3.select(this).append("span")
                    .classed("tsi-columnHeaderName", true)
                    .classed("moreMarginRight", (d: any) => self.eventsTableData.columns[d].isTsid)
                    .text(longAndDoubleExist(d) ? `${self.eventsTableData.columns[d].name} (${self.eventsTableData.columns[d].type})` : self.eventsTableData.columns[d].name);
                d3.select(this).append("span").attr("class", "tsi-columnSortIcon").classed("moreRight", self.eventsTableData.columns[d].isTsid)
                    .classed("up", (self.sortColumn == d && self.isAscending))
                    .classed("down", (self.sortColumn == d && !self.isAscending));
                if (self.eventsTableData.columns[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(self.eventsTableData.columns[d].type, true);
                } else {
                    d3.select(this).append("span").attr("class", "tsi-columnTypeIcon")
                        .classed(self.eventsTableData.columns[d].type, true);
                }
                var id = JSON.parse(JSON.stringify(d));
                d3.select(this).append("button").attr("class", "tsi-sortColumnButton")
                    .attr("aria-label", title => "Sort by column " + title)
                    .on("click", function (f, i) {
                        //set sort column and direction
                        if (self.sortColumn == d) {
                            self.isAscending = !self.isAscending;
                        } else {
                            self.isAscending = false;
                        }
                        self.sortColumn = d;

                        self.eventsTableData.sortEvents(d, self.isAscending);
                        self.buildTable(f);
                        self.eventsTable.select('.tsi-columnHeaders').node().scrollLeft = 
                            self.eventsTable.select('.tsi-eventRowsContainer').node().scrollLeft;
                        
                    })
                    .attr("disabled", isOffsetDateTimeColumn);
            });
        var widthDictionary = {};
        columnHeadersEntered.each(function (d) {
            widthDictionary[d] = d3.select(this).node().getBoundingClientRect().width;
        })
        columnHeaders.exit().remove();

        if (focusedHeader !== null) {
            let columnHeader = d3.select(columnHeadersEntered.filter((d) => {
                return d === focusedHeader;
            }).nodes()[0]);

            if (columnHeader) {
                (<any>columnHeader.select("button").node()).focus();
            }
        }

        return widthDictionary;
    }