How to use the @hpcc-js/common.select function in @hpcc-js/common

this.centerContainer.resize = function (s) {
            origResize.apply(this, arguments);
            d3Select(`#${context.id}DPReport`).style("height", `${s.h - 16}px`);  // 8 * 2 margins
            if (context.dpReport && context.dpReport.renderCount()) {
                context.dpReport
                    .resize()
                    .lazyRender()
                    ;
            }
        }

const stateIconClass = this._wu ? getStateIconClass(this._wu.StateID, this._wu.isComplete(), this._wu.Archived) : "";
        this.workunitWidget.set("iconClass", stateIconClass);
        domClass.remove(this.id + "StateIdImage");
        domClass.add(this.id + "StateIdImage", stateIconClass);

        d3Select(`#${this.id}WU`).style("display", isComplete ? "none" : null);

        const msg = [];
        if (!this._wu) {
            msg.push(this.i18n.DataPatternsNotStarted);
        } else if (!this._wu.isComplete()) {
            msg.push(this.i18n.DataPatternsStarted);
        }

        const dpMessage = d3Select(`#${this.id + "DPReport"}`).selectAll(".DPMessage").data(msg);
        dpMessage.enter().insert("p", ":first-child")
            .attr("class", "DPMessage")
            .style("text-align", "center")
            .merge(dpMessage as any)
            .text(d => d)
            ;
        dpMessage.exit()
            .remove()
            ;
    }
}

.each(function(row){
                const rowElement = d3Select(this);
                rowElement.select("span")
                    .style("float", "left")
                    .style("display", "inline-block")
                    .style("width", labelWidth+"px")
                    .text(row[0])
                    ;
                rowElement.select("div")
                    .style("float", "left")
                    .style("display", "inline-block")
                    .style("margin-left", gutter+"px")
                    .style("background-color", "red")
                    .style("width", row[1]+"px")
                    .style("height", rowHeight+"px")
                    .text(row[0])
                    ;
            })

.each(function (d) {
                const li = d3Select(this);
                li.append("a")
                    .html((d: any) => d.label)
                    .attr("href", d.href)
                    .on("click", function (d: any) {
                        const navAnchorTop = this.getBoundingClientRect().top;
                        context._marker
                            .style("top", (navAnchorTop + context._yOffset + 5) + "px")
                            .style("opacity", 1)
                            ;
                    })
                    ;
            })
            ;

setTimeout(function () {
                    common_1.select(_this)
                        .attr("src", "./galleryItem.html?" + d.path);
                }, i * 333);
            });

.each(function (d) {
                const li = d3Select(this);
                const div = li.append("div");
                div.append("span")
                    .text(d.label)
                    ;
                if (!d.children.length) {
                    div
                        .attr("class", "hpccIndex-sub-li")
                        .on("click", (_d: any) => {
                            context.clicked(_d.path);
                        })
                        ;
                } else {
                    div
                        .attr("class", "hpccIndex-label-div")
                        .on("click", () => {
                            li.classed("hpccIndex-collapsed", !li.classed("hpccIndex-collapsed"));

setTimeout(() => {
                    d3Select(this)
                        .attr("src", `./galleryItem.html?${d.path}`)
                        ;
                }, i * 333);
            })

style(id: string, _?: number | string | boolean): this | number | string | boolean {
        if (_ === void 0) return d3Select(this._layer.getPane()).style(id);
        d3Select(this._layer.getPane()).style(id, _);
        return this;
    }

layerEnter(map: Map) {
        map.addLayer(this._layer);
        const elem = d3Select(map.getContainer()).select(".leaflet-pane.leaflet-marker-pane");
        this._selection.widgetElement(elem);
    }

refreshActionState() {
        const isComplete = this._wu && this._wu.isComplete();
        this.setDisabled(this.id + "Analyze", !!this._wu);
        d3Select(`#${this.id}TargetSelectLabel`).style("color", !!this._wu ? "rgb(158,158,158)" : null);
        this.setDisabled(this.id + "TargetSelect", !!this._wu);
        this.setDisabled(this.id + "Delete", !this._wu);
        this.setDisabled(this.id + "OptimizeDropDown", !isComplete);
        this.setDisabled(this.id + "_RawData", !isComplete);
        this.setDisabled(this.id + "_Workunit", !this._wu);

        if (this._wu) {
            this.targetSelectWidget.set("value", this._wu.Cluster);
        }

        const stateIconClass = this._wu ? getStateIconClass(this._wu.StateID, this._wu.isComplete(), this._wu.Archived) : "";
        this.workunitWidget.set("iconClass", stateIconClass);
        domClass.remove(this.id + "StateIdImage");
        domClass.add(this.id + "StateIdImage", stateIconClass);

        d3Select(`#${this.id}WU`).style("display", isComplete ? "none" : null);