How to use the @hpcc-js/comms.Workunit.attach function in @hpcc-js/comms

fetchScopeGraph(wuid: string, graphID: string, refresh: boolean = false): Promise {
        this.graphStatus.innerText = this.i18n.FetchingData;
        const hash = hashSum({
            wuid,
            graphID
        });
        if (!this._prevScopeGraph || refresh || this._prevHashSum !== hash) {
            this._prevHashSum = hash;
            this._gc.clear();
            const wu = Workunit.attach({ baseUrl: "" }, wuid);
            this._prevScopeGraph = wu.fetchScopeGraphs(graphID ? [graphID] : []).then(scopedGraph => {
                this.graphStatus.innerText = this.i18n.Loading;
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this._gc.set(scopedGraph);
                        resolve(scopedGraph);
                    }, 0);
                });
            });
        }
        return this._prevScopeGraph;
    }
    //  --- ---

attachWorkunit() {
        const hash = hashSum({
            baseUrl: this.baseUrl(),
            wuid: this.wuid()
        });
        if (this._prevHash !== hash) {
            this._prevHash = hash;
            this._wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
            if (this._wuHandle) {
                this._wuHandle.release();
            }
            this._wuHandle = this._wu.watch(changes => {
                this.lazyRender();
            });
        }
    }

attachWorkunit() {
        const hash = hashSum({
            baseUrl: this.baseUrl(),
            wuid: this.wuid()
        });
        if (this._prevHash !== hash) {
            this._prevHash = hash;
            this._wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
            if (this._wuHandle) {
                this._wuHandle.release();
            }
            this._wuHandle = this._wu.watch(changes => {
                this.lazyRender();
            });
        }
    }

fetchScopeGraph(): Promise {
        const hash = hashSum({
            baseUrl: this.baseUrl(),
            wuid: this.wuid(),
            graphID: this.graphID(),
            subgraphID: this.subgraphID()
        });
        if (!this._prevScopeGraph || this._prevHashSum !== hash) {
            this.startProgress();
            this._prevHashSum = hash;
            this._gc.clear();
            const wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
            return wu.fetchGraphs().then(graphs => {
                for (const graph of graphs) {
                    if (graph.Name === this.graphID()) {
                        this.finishProgress();
                        return graph.fetchScopeGraph(this.subgraphID());
                    }
                }
            }).then(scopeGraph => {
                this._prevScopeGraph = scopeGraph;
                return this._prevScopeGraph;
            });
        }
        return Promise.resolve(this._prevScopeGraph);
    }

fetchScopeGraph(wuid: string, graphID: string, subgraphID: string = "", refresh: boolean = false): Promise {
        this.graphStatus.innerText = this.i18n.FetchingData;
        const hash = hashSum({
            wuid,
            graphID,
            subgraphID
        });
        if (!this._prevScopeGraph || refresh || this._prevHashSum !== hash) {
            this._prevHashSum = hash;
            this._gc.clear();
            const wu = Workunit.attach({ baseUrl: "" }, wuid);
            this._prevScopeGraph = wu.fetchGraphs().then(graphs => {
                for (const graph of graphs) {
                    if (graph.Name === graphID) {
                        return graph.fetchScopeGraph(subgraphID).then(scopedGraph => {
                            this.graphStatus.innerText = this.i18n.Loading;
                            return new Promise((resolve, reject) => {
                                setTimeout(() => {
                                    this._gc.set(scopedGraph);
                                    this._legend.data(this._gc.calcLegend());
                                    resolve(scopedGraph);
                                }, 0);
                            });
                        });
                    }
                }
            });

fetchScopes() {
        const hash = hashSum({
            baseUrl: this.baseUrl(),
            wuid: this.wuid(),
            request: this.request()
        });
        if (this._prevHashSum !== hash) {
            this._prevHashSum = hash;
            const wu = Workunit.attach({ baseUrl: this.baseUrl() }, this.wuid());
            wu.fetchDetails(this.request()).then(scopes => {
                return scopes.filter(scope => scope.Id && scope.attr("WhenStarted").RawValue).map((scope: Scope) => {
                    const whenStarted = +scope.attr("WhenStarted").RawValue / 1000;
                    const timeElapsed = +scope.attr("TimeElapsed").RawValue / 1000000;
                    return [
                        scope.Id,
                        new Date(whenStarted).toISOString(),
                        timeElapsed ? new Date(whenStarted + timeElapsed).toISOString() : undefined,
                        null,
                        this._palette(scope.ScopeType),
                        scope
                    ];
                });
            }).then(scopes => {
                this
                    .data(scopes)