mountDt()

in src/rowsdisplaytable.tsx [80:205]

• 92 lines of code
• 16 McCabe index (conditional complexity)

    mountDt() {
        if (!this.props.params_def["uid"]) {
            return;
        }
        const dom = $(this.table_ref.current);
        this.ordered_cols = ['uid'];
        const me = this;
        $.each(this.props.params_def, function(k: string, def) {
            if (k == 'uid') {
                return;
            }
            me.ordered_cols.push(k);
        });
        if (me.props.order) {
            const columnOrderScore = function(col: string) {
                const index = me.props.order.indexOf(col);
                if (index == -1) {
                    return me.props.order.length;
                }
                return index;
            }
            me.ordered_cols.sort(function(a, b) {
                // Return negative if `a` comes first
                return columnOrderScore(a) - columnOrderScore(b);
            });
        }
        me.ordered_cols.unshift('');
        const uidColIndex = me.ordered_cols.indexOf('uid');

        dom.empty();
        var columns: Array<{[k: string]: any}> = this.ordered_cols.map(function(x) {
            const pd = me.props.params_def[x];
            return {
                'title': x == '' ? '' : $("<span />").attr("class", pd.label_css).html(pd.label_html)[0].outerHTML,
                'defaultContent': 'null',
                'type': x == '' ? 'html' : (pd.numeric ? "num" : "string"),
                'visible': !me.props.hide || !me.props.hide.includes(x),
                'orderable': x != '', // Don't allow to sort by color
            };
        });
        const order_by = this.props.order_by.map(function(col_otype: [string, string]): [number, string] {
            const col_idx = me.ordered_cols.indexOf(col_otype[0]);
            console.assert(
                col_idx >= 0,
                `TABLE: Column for ordering ${col_otype[0]} does not exist. Available columns: ${me.ordered_cols.join(",")}`
            );
            return [col_idx, col_otype[1]];
        });
        columns[0]['render'] = function(data, type, row, meta) {
            if (!me.dt) {
                return '';
            }
            const individualUidColIdx = me.dt.colReorder.order().indexOf(uidColIndex);
            const color = me.props.get_color_for_row(me.props.dp_lookup[row[individualUidColIdx]], 1.0);
            return `<span class="${style.colorBlock}" style="background-color: ${color}" />`;
        };
        this.dt = dom.DataTable({
            columns: columns,
            data: [],
            order: order_by,
            deferRender: true, // Create HTML elements only when displayed
            headerCallback: function headerCallback(thead: HTMLTableRowElement, data: Array<Array<any>>, start: number, end: number, display) {
                Array.from(thead.cells).forEach(function(th: HTMLElement, i) {
                    const col = th.innerText;
                    if (col != '' && me.dt === null && me.props.context_menu_ref !== undefined) {
                        th.addEventListener('contextmenu', e => {
                            me.props.context_menu_ref.current.show(e.pageX, e.pageY, col);
                            e.preventDefault();
                            e.stopPropagation();
                        });
                    }
                });
            },
            //@ts-ignore
            buttons: [
                {
                    text: 'Select results',
                    className: 'btn-sm btn-outline-primary d-none',
                    action: this.setSelectedToSearchResult.bind(this)
                }
            ],
            //@ts-ignore
            colReorder: true,
        });
        const btnsContainer = $(this.table_container.current).find('.col-md-6:eq(1)');
        btnsContainer.addClass("btn-group");
        this.dt.buttons().container().appendTo(btnsContainer);
        btnsContainer.find(".dt-buttons").removeClass("btn-group");
        dom.on( 'search.dt', function (this: RowsDisplayTable) {
            if (!this.dt) {
                return;
            }
            const node = this.dt.buttons()[0].node;
            node.classList.remove("d-none");
            node.classList.remove("btn-secondary");
            const searchResults = this.dt.rows( { filter : 'applied'} );
            if (this.dt.search() == "" || searchResults.nodes().length == 0) {
                node.classList.add("d-none");
            }
        }.bind(this));

        this.empty = true;
        dom.find('tbody')
            .on('mouseenter', 'td', function () {
                if (!me.dt || me.empty) {
                    return;
                }
                const rowIdx = me.dt.cell(this).index().row;
                const row = me.dt.row(rowIdx);
                const individualUidColIdx = me.dt.colReorder.order().indexOf(uidColIndex);

                dom.find(`.table-primary`).removeClass("table-primary");
                $(row.nodes()).addClass("table-primary");
                me.props.setHighlighted([me.props.dp_lookup[row.data()[individualUidColIdx]]]);
            })
            .on("mouseout", "td", function() {
                if (!me.dt || me.empty) {
                    return;
                }
                const rowIdx = me.dt.cell(this).index().row;
                $(me.dt.row(rowIdx).nodes()).removeClass("table-primary");
                me.props.setHighlighted([]);
            });

        me.setSelected(me.props.rows_selected);
    }