@rcsb/rcsb-saguaro-app 6.0.0-development.1 → 6.0.0-development.2

package/lib/RcsbFvUI/Components/PaginationItemComponent.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AbstractMenuItemComponent } from "../AbstractMenuItemComponent";
+export class PaginationItemComponent extends AbstractMenuItemComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            after: parseInt(this.props.after),
+            first: this.props.first > this.props.count ? this.props.count : this.props.first
+        };
+    }
+    render() {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { onClick: () => this.next(-this.state.first), role: this.role(-this.state.first), className: "d-inline-block text-center" + " " + this.textColor(-this.state.first), style: { width: 20 }, children: "\u276E" }), _jsxs("div", { className: "d-inline-block text-center", style: { width: 90 }, children: [this.state.after + 1, " - ", this.state.after + this.state.first] }), _jsx("div", { onClick: () => this.next(this.state.first), role: this.role(this.state.first), className: "d-inline-block text-center" + " " + this.textColor(this.state.first), style: { width: 20 }, children: "\u276F" })] }));
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        super.componentDidUpdate(prevProps, prevState, snapshot);
+    }
+    next(n) {
+        this.switchAction({
+            middle: () => {
+                this.setState({ after: (this.state.after + n) });
+                return undefined;
+            },
+            end: () => {
+                this.setState({ after: this.props.count - n });
+                return undefined;
+            },
+            start: () => {
+                this.setState({ after: 0 });
+                return undefined;
+            },
+            out: () => {
+                return undefined;
+            },
+        }, n);
+    }
+    role(n) {
+        return this.switchAction({
+            middle: () => {
+                return "button";
+            },
+            end: () => {
+                return "button";
+            },
+            start: () => {
+                return "button";
+            },
+            out: () => {
+                return undefined;
+            },
+        }, n);
+    }
+    textColor(n) {
+        return this.switchAction({
+            middle: () => {
+                return "text-white";
+            },
+            end: () => {
+                return "text-white";
+            },
+            start: () => {
+                return "text-white";
+            },
+            out: () => {
+                return "text-opacity-25 text-primary";
+            },
+        }, n);
+    }
+    switchAction(x, n) {
+        const O = n > 0 ? this.state.after + n : this.state.after;
+        if ((O + n) >= 0 && (O + n) <= this.props.count) {
+            return x.middle();
+        }
+        else if ((O + n) >= 0 && O != this.props.count) {
+            return x.end();
+        }
+        else if (O != 0 && n < 0) {
+            return x.start();
+        }
+        return x.out();
+    }
+}

package/lib/RcsbFvUI/GroupPfvUI.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type UiComponentType<T extends {}> = {
+    component: typeof React.Component<T, any>;
+    props: T;
+};
+export declare class GroupPfvUI {
+    static fvUI(element: string | HTMLElement, uiComponent: UiComponentType<any>[]): void;
+    static addBootstrapElement(elementId: string): HTMLElement;
+    private static htmlElementUI;
+}

package/lib/RcsbFvUI/GroupPfvUI.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { RcsbTabs } from "../RcsbFvWeb/RcsbFvComponents/RcsbTabs";
+import { createRoot } from "react-dom/client";
+import classes from "../scss/bootstrap-fv-display.module.scss";
+import { ItemComponent } from "./Components/ItemComponent";
+export class GroupPfvUI {
+    static fvUI(element, uiComponent) {
+        createRoot(typeof element === "string" ? GroupPfvUI.htmlElementUI(element) : element).render(_jsx(_Fragment, { children: uiComponent.map((b, n) => (_jsx(ItemComponent, { role: "", children: _jsx(b.component, Object.assign({}, b.props)) }, "uiItem_" + n))) }));
+    }
+    static addBootstrapElement(elementId) {
+        const div = GroupPfvUI.htmlElementUI(elementId);
+        div.className = classes.bootstrapFvComponentScope;
+        return div;
+    }
+    static htmlElementUI(elementId) {
+        var _a, _b;
+        let uiDiv = document.getElementById(elementId + RcsbTabs.UI_SUFFIX);
+        if (!uiDiv) {
+            uiDiv = document.createElement("div");
+            uiDiv.setAttribute("id", elementId + RcsbTabs.UI_SUFFIX);
+            (_b = (_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.insertBefore(uiDiv, document.getElementById(elementId));
+        }
+        return uiDiv;
+    }
+}

package/lib/RcsbFvUI/Helper/ActionMethods.d.ts

@@ -0,0 +1,11 @@
+import { RcsbFvAdditionalConfig, RcsbFvModulePublicInterface } from "../../RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+export declare namespace ActionMethods {
+    type PfvMethodType<T extends unknown[]> = (...pfvParams: MenuActionArgsType<T>) => Promise<RcsbFvModulePublicInterface>;
+    type MenuActionArgsType<T extends unknown[]> = [string, ...T, RcsbFvAdditionalConfig?];
+    export interface FvChangeConfigInterface {
+        beforeChangeCallback?: (module: RcsbFvModulePublicInterface | undefined) => void;
+        onChangeCallback?: (module: RcsbFvModulePublicInterface) => void;
+    }
+    export function paginationCallback<T extends unknown[]>(): (elementId: string, pfv: RcsbFvModulePublicInterface, pfvMethod: PfvMethodType<T>, pfvParams: T, additionalConfig?: RcsbFvAdditionalConfig & FvChangeConfigInterface) => void;
+    export {};
+}

package/lib/RcsbFvUI/Helper/ActionMethods.js

@@ -0,0 +1,29 @@
+import { __awaiter } from "tslib";
+import { asyncScheduler } from "rxjs";
+export var ActionMethods;
+(function (ActionMethods) {
+    function paginationCallback() {
+        let subscription = undefined;
+        return (elementId, pfv, pfvMethod, pfvParams, additionalConfig) => {
+            if (subscription)
+                subscription.unsubscribe();
+            subscription = asyncScheduler.schedule(() => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                const dom = pfv.getFv().getDomain();
+                const sel = pfv.getFv().getSelection("select");
+                (_a = additionalConfig === null || additionalConfig === void 0 ? void 0 : additionalConfig.beforeChangeCallback) === null || _a === void 0 ? void 0 : _a.call(additionalConfig, pfv);
+                yield pfvMethod(elementId, ...pfvParams, Object.assign({}, additionalConfig));
+                pfv.getFv().setDomain(dom);
+                pfv.getFv().setSelection({
+                    elements: sel.map((s) => ({
+                        begin: s.rcsbFvTrackDataElement.begin,
+                        end: s.rcsbFvTrackDataElement.end
+                    })),
+                    mode: "select"
+                });
+                (_b = additionalConfig === null || additionalConfig === void 0 ? void 0 : additionalConfig.onChangeCallback) === null || _b === void 0 ? void 0 : _b.call(additionalConfig, pfv);
+            }), 333);
+        };
+    }
+    ActionMethods.paginationCallback = paginationCallback;
+})(ActionMethods || (ActionMethods = {}));

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvAssemblyBuilder.d.ts

@@ -0,0 +1,5 @@
+import { InstanceSequenceOnchangeInterface } from "./RcsbFvInstanceBuilder";
+import { RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+export declare class RcsbFvAssemblyBuilder {
+    static buildAssemblySequenceFv(elementFvId: string, elementSelectAssemblyId: string, elementSelectInstanceId: string, entryId: string, onAsseblyChangeCallback?: (x: string) => void, onInstanceChangeCallback?: (x: InstanceSequenceOnchangeInterface) => void): Promise<RcsbFvModulePublicInterface>;
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvAssemblyBuilder.js

@@ -0,0 +1,40 @@
+import { __awaiter } from "tslib";
+import { RcsbFvCoreBuilder } from "./RcsbFvCoreBuilder";
+import { RcsbFvInstanceBuilder } from "./RcsbFvInstanceBuilder";
+import { rcsbRequestCtxManager } from "../../RcsbRequest/RcsbRequestContextManager";
+import { Assertions } from "../../RcsbUtils/Helpers/Assertions";
+var assertDefined = Assertions.assertDefined;
+export class RcsbFvAssemblyBuilder {
+    static buildAssemblySequenceFv(elementFvId, elementSelectAssemblyId, elementSelectInstanceId, entryId, onAsseblyChangeCallback, onInstanceChangeCallback) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const assemblyTranslate = yield rcsbRequestCtxManager.getEntryToAssembly(entryId);
+            const assemblyMap = assemblyTranslate.getData();
+            if (assemblyMap.size == 0) {
+                RcsbFvCoreBuilder.showMessage(elementFvId, "No sequence features are available");
+                throw new Error("No sequence features are available");
+            }
+            else {
+                RcsbFvCoreBuilder.buildSelectButton(elementFvId, elementSelectAssemblyId, Array.from(assemblyMap.keys()).map(assemblyId => {
+                    return {
+                        name: assemblyId,
+                        label: assemblyId,
+                        onChange: () => __awaiter(this, void 0, void 0, function* () {
+                            const o = assemblyMap.get(assemblyId);
+                            if (!o)
+                                return;
+                            yield RcsbFvInstanceBuilder.buildSelectorInstanceFv(o, elementFvId, elementSelectInstanceId, entryId, { onChangeCallback: onInstanceChangeCallback });
+                            if (typeof onAsseblyChangeCallback === "function")
+                                onAsseblyChangeCallback(assemblyId);
+                        })
+                    };
+                }), { dropdownTitle: "ASSEMBLY" });
+                const o = assemblyMap.get(rcsbRequestCtxManager.modelKey);
+                assertDefined(o);
+                const out = yield RcsbFvInstanceBuilder.buildSelectorInstanceFv(o, elementFvId, elementSelectInstanceId, entryId, { onChangeCallback: onInstanceChangeCallback });
+                if (typeof onAsseblyChangeCallback === "function")
+                    onAsseblyChangeCallback(rcsbRequestCtxManager.modelKey);
+                return out;
+            }
+        });
+    }
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvChromosomeBuilder.d.ts

@@ -0,0 +1,7 @@
+import { RcsbFvAdditionalConfig, RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+export declare class RcsbFvChromosomeBuilder {
+    static buildFullChromosome(elementFvId: string, chrId: string): Promise<RcsbFvModulePublicInterface>;
+    static buildEntryChromosome(elementFvId: string, entitySelectId: string, chromosomeSelectId: string, entryId: string): Promise<RcsbFvModulePublicInterface>;
+    static buildEntityChromosome(elementFvId: string, elementSelectId: string, entityId: string): Promise<RcsbFvModulePublicInterface>;
+    static buildChromosome(elementFvId: string, entityId: string | undefined, chrId: string | undefined, elementSelectId?: string, additionalConfig?: RcsbFvAdditionalConfig): Promise<RcsbFvModulePublicInterface>;
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvChromosomeBuilder.js

@@ -0,0 +1,93 @@
+import { __awaiter } from "tslib";
+import { RcsbFvChromosome } from "../RcsbFvModule/RcsbFvChromosome";
+import { RcsbFvCoreBuilder } from "./RcsbFvCoreBuilder";
+import { rcsbRequestCtxManager } from "../../RcsbRequest/RcsbRequestContextManager";
+import { TagDelimiter } from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
+export class RcsbFvChromosomeBuilder {
+    static buildFullChromosome(elementFvId, chrId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield RcsbFvChromosomeBuilder.buildChromosome(elementFvId, undefined, chrId);
+        });
+    }
+    static buildEntryChromosome(elementFvId, entitySelectId, chromosomeSelectId, entryId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                const entityInstanceTranslator = yield rcsbRequestCtxManager.getEntityToInstance(entryId);
+                const result = entityInstanceTranslator.getData();
+                const entitySet = new Set();
+                result.sort((a, b) => {
+                    return parseInt(a.entityId) - parseInt(b.entityId);
+                }).forEach(r => {
+                    entitySet.add(r.entryId + TagDelimiter.entity + r.entityId);
+                });
+                const entityChrTranslate = yield rcsbRequestCtxManager.getEntityToChromosome(Array.from(entitySet));
+                const entityMap = entityChrTranslate.getData();
+                if (entityMap.size == 0) {
+                    RcsbFvCoreBuilder.showMessage(elementFvId, "No genome alignments are available");
+                }
+                else {
+                    const unique = new Set();
+                    RcsbFvCoreBuilder.buildSelectButton(elementFvId, entitySelectId, result.filter(r => {
+                        const included = unique.has(r.entryId + TagDelimiter.entity + r.entityId);
+                        unique.add(r.entryId + TagDelimiter.entity + r.entityId);
+                        return entityMap.has(r.entryId + TagDelimiter.entity + r.entityId) && !included;
+                    }).map((e, n) => {
+                        const entityId = e.entryId + TagDelimiter.entity + e.entityId;
+                        if (n == 0) {
+                            RcsbFvChromosomeBuilder.buildEntityChromosome(elementFvId, chromosomeSelectId, entityId).then((module) => {
+                                resolve(module);
+                            });
+                        }
+                        return {
+                            name: e.name + " - " + e.taxNames.join(", "),
+                            label: entityId + " - " + e.name,
+                            shortLabel: entityId,
+                            onChange: () => __awaiter(this, void 0, void 0, function* () {
+                                yield RcsbFvChromosomeBuilder.buildEntityChromosome(elementFvId, chromosomeSelectId, entityId);
+                            })
+                        };
+                    }), { addTitle: true, dropdownTitle: "ENTITY" });
+                }
+            }));
+        });
+    }
+    static buildEntityChromosome(elementFvId, elementSelectId, entityId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const chrViewer = yield RcsbFvChromosomeBuilder.buildChromosome(elementFvId, entityId, undefined, elementSelectId, { boardConfig: { rowTitleWidth: 160 } });
+            const targets = yield chrViewer.getTargets();
+            RcsbFvCoreBuilder.buildSelectButton(elementFvId, elementSelectId, targets.map((chrId, n) => {
+                return {
+                    label: chrId,
+                    name: chrId,
+                    shortLabel: chrId,
+                    onChange: () => __awaiter(this, void 0, void 0, function* () {
+                        yield RcsbFvChromosomeBuilder.buildChromosome(elementFvId, entityId, chrId, elementSelectId);
+                    })
+                };
+            }), { addTitle: false, width: 190, dropdownTitle: "CHROMOSOME" });
+            return chrViewer;
+        });
+    }
+    static buildChromosome(elementFvId, entityId, chrId, elementSelectId, additionalConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                try {
+                    RcsbFvCoreBuilder.createFv({
+                        elementId: elementFvId,
+                        fvModuleI: RcsbFvChromosome,
+                        config: {
+                            entityId: entityId,
+                            chrId: chrId,
+                            elementSelectId: elementSelectId,
+                            additionalConfig: Object.assign({ rcsbContext: Object.assign(Object.assign({}, (entityId ? TagDelimiter.parseEntity(entityId) : {})), { chrId: chrId }) }, additionalConfig),
+                            resolve: resolve
+                        }
+                    });
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        });
+    }
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvContextManager.d.ts

@@ -0,0 +1,14 @@
+import { RcsbFv } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import { RcsbFvBoardConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+declare class RcsbFvContextManager {
+    private readonly rcsbFvManager;
+    private readonly rcsbButtonManager;
+    getFv(elementFvId: string, boardConfig?: Partial<RcsbFvBoardConfigInterface>): RcsbFv;
+    hasFv(elementFvId: string): boolean;
+    private setFv;
+    getButtonList(elementFvId: string): Set<string> | undefined;
+    setButton(elementFvId: string, buttonId: string): void;
+    removeFv(elementFvId: string): void;
+}
+export declare const rcsbFvCtxManager: RcsbFvContextManager;
+export {};

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvContextManager.js

@@ -0,0 +1,48 @@
+import { RcsbFv } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import { RcsbFvTooltip } from "../RcsbFvTooltip/RcsbFvTooltip";
+class RcsbFvContextManager {
+    constructor() {
+        this.rcsbFvManager = new Map();
+        this.rcsbButtonManager = new Map();
+    }
+    getFv(elementFvId, boardConfig) {
+        const o = this.rcsbFvManager.get(elementFvId);
+        if (o) {
+            return o;
+        }
+        else {
+            const rcsbFvSingleViewer = buildRcsbFvSingleViewer(elementFvId, boardConfig);
+            this.setFv(elementFvId, rcsbFvSingleViewer);
+            return rcsbFvSingleViewer;
+        }
+    }
+    hasFv(elementFvId) {
+        return this.rcsbFvManager.has(elementFvId);
+    }
+    setFv(elementFvId, rcsbFv) {
+        this.rcsbFvManager.set(elementFvId, rcsbFv);
+    }
+    getButtonList(elementFvId) {
+        return this.rcsbButtonManager.get(elementFvId);
+    }
+    setButton(elementFvId, buttonId) {
+        var _a;
+        if (this.rcsbButtonManager.get(elementFvId) == null)
+            this.rcsbButtonManager.set(elementFvId, new Set());
+        (_a = this.rcsbButtonManager.get(elementFvId)) === null || _a === void 0 ? void 0 : _a.add(buttonId);
+    }
+    removeFv(elementFvId) {
+        this.rcsbFvManager.delete(elementFvId);
+        if (this.rcsbButtonManager.has(elementFvId))
+            this.rcsbButtonManager.delete(elementFvId);
+    }
+}
+function buildRcsbFvSingleViewer(elementId, boardConfig) {
+    const config = Object.assign({ rowTitleWidth: 190, trackWidth: 900, tooltipGenerator: new RcsbFvTooltip() }, boardConfig);
+    return new RcsbFv({
+        rowConfigData: [],
+        boardConfigData: config,
+        elementId: elementId
+    });
+}
+export const rcsbFvCtxManager = new RcsbFvContextManager();

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvCoreBuilder.d.ts

@@ -0,0 +1,35 @@
+import { PolymerEntityInstanceTranslate } from "../../RcsbUtils/Translators/PolymerEntityInstanceTranslate";
+import { RcsbFv } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import { RcsbFvModuleBuildInterface, RcsbFvModuleInterface, RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+import { SelectButtonConfigInterface } from "../RcsbFvComponents/ComponentsManager";
+import { GroupedOptionsInterface, SelectOptionInterface } from "../RcsbFvComponents/SelectButton";
+export interface CreateFvInterface {
+    elementId: string;
+    fvModuleI: new (elementId: string, rcsbFv: RcsbFv) => RcsbFvModuleInterface;
+    config: RcsbFvModuleBuildInterface;
+    p?: PolymerEntityInstanceTranslate;
+}
+/**
+ * This class provides static methods to build PFVs. PFVs should be always created using methods in this class
+ * */
+export declare class RcsbFvCoreBuilder {
+    /**
+     * @description The main purpose of this method is to have a unique point where Entity to Instance maps are collected.  It forces to generate a <PolymerEntityInstanceTranslate> that will be passed to the PFV create method <getPolymerEntityInstanceMapAndBuildFv>
+     * @param entryId PDB entry Id
+     * @param createFvBuilder This is the function used to create the PFV. Cases where buttons are needed will be created in custom definitions of createFvBuilder. The PFV should be always created calling RcsbFvCoreBuilder.createFv
+     * */
+    static getPolymerEntityInstanceMapAndCustomBuildFv(entryId: string, createFvBuilder: (p: PolymerEntityInstanceTranslate) => Promise<RcsbFvModulePublicInterface>): Promise<RcsbFvModulePublicInterface>;
+    /**
+     * @description Generic method to create PFVs. This method must be used if no other elements such as buttons are needed.
+     * */
+    static getPolymerEntityInstanceMapAndBuildFv(elementId: string, entryId: string, fvModuleI: new (elementId: string, rcsbFv: RcsbFv) => RcsbFvModuleInterface, config: RcsbFvModuleBuildInterface): Promise<RcsbFvModulePublicInterface>;
+    /**
+     * @description This method implements a centralized point where PFVs are created. All PFV should be created using this method directly or through <CreateFvInterface.getPolymerEntityInstanceMapAndBuildFv>. In any case PFV should be built using a custom implementation.
+     * */
+    static createFv(createFvI: CreateFvInterface): Promise<RcsbFvModulePublicInterface>;
+    static unmount(elementId: string): void;
+    static buildSelectButton(elementFvId: string, selectButtonId: string, options: Array<SelectOptionInterface> | Array<GroupedOptionsInterface>, config?: SelectButtonConfigInterface): void;
+    static clearAdditionalSelectButton(elementFvId: string, selectButtonId: string): void;
+    static addSelectButton(elementFvId: string, selectButtonId: string, options: Array<SelectOptionInterface>, config?: SelectButtonConfigInterface): void;
+    static showMessage(elementId: string, message: string): void;
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvCoreBuilder.js

@@ -0,0 +1,91 @@
+import { __awaiter } from "tslib";
+import { rcsbFvCtxManager } from "./RcsbFvContextManager";
+import { ComponentsManager } from "../RcsbFvComponents/ComponentsManager";
+import { rcsbRequestCtxManager } from "../../RcsbRequest/RcsbRequestContextManager";
+/**
+ * This class provides static methods to build PFVs. PFVs should be always created using methods in this class
+ * */
+export class RcsbFvCoreBuilder {
+    /**
+     * @description The main purpose of this method is to have a unique point where Entity to Instance maps are collected.  It forces to generate a <PolymerEntityInstanceTranslate> that will be passed to the PFV create method <getPolymerEntityInstanceMapAndBuildFv>
+     * @param entryId PDB entry Id
+     * @param createFvBuilder This is the function used to create the PFV. Cases where buttons are needed will be created in custom definitions of createFvBuilder. The PFV should be always created calling RcsbFvCoreBuilder.createFv
+     * */
+    static getPolymerEntityInstanceMapAndCustomBuildFv(entryId, createFvBuilder) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const entityToInstance = yield rcsbRequestCtxManager.getEntityToInstance(entryId);
+            return yield createFvBuilder(entityToInstance);
+        });
+    }
+    /**
+     * @description Generic method to create PFVs. This method must be used if no other elements such as buttons are needed.
+     * */
+    static getPolymerEntityInstanceMapAndBuildFv(elementId, entryId, fvModuleI, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const entityToInstance = yield rcsbRequestCtxManager.getEntityToInstance(entryId);
+            return yield RcsbFvCoreBuilder.createFv({
+                elementId: elementId,
+                fvModuleI: fvModuleI,
+                config: config,
+                p: entityToInstance
+            });
+        });
+    }
+    /**
+     * @description This method implements a centralized point where PFVs are created. All PFV should be created using this method directly or through <CreateFvInterface.getPolymerEntityInstanceMapAndBuildFv>. In any case PFV should be built using a custom implementation.
+     * */
+    static createFv(createFvI) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const elementId = createFvI.elementId;
+            const fvModuleI = createFvI.fvModuleI;
+            const config = createFvI.config;
+            const p = createFvI.p;
+            const rcsbFv = rcsbFvCtxManager.getFv(elementId, (_a = createFvI.config.additionalConfig) === null || _a === void 0 ? void 0 : _a.boardConfig);
+            yield rcsbFv.then(() => {
+                console.info(`PFV ${elementId} render complete`);
+            });
+            const rcsbFvInstance = new fvModuleI(elementId, rcsbFv);
+            if (p != null)
+                rcsbFvInstance.setPolymerEntityInstanceTranslator(p);
+            yield rcsbFvInstance.build(config);
+            if (!rcsbFvInstance.activeDisplay())
+                throw "ERROR: Module display failed";
+            config.resolve(rcsbFvInstance);
+            return rcsbFvInstance;
+        });
+    }
+    static unmount(elementId) {
+        var _a;
+        if (rcsbFvCtxManager.hasFv(elementId)) {
+            if (rcsbFvCtxManager.getButtonList(elementId) != null) {
+                (_a = rcsbFvCtxManager.getButtonList(elementId)) === null || _a === void 0 ? void 0 : _a.forEach(buttonId => {
+                    ComponentsManager.clearSelectButton(buttonId);
+                });
+            }
+            rcsbFvCtxManager.getFv(elementId).unmount();
+            rcsbFvCtxManager.removeFv(elementId);
+        }
+    }
+    static buildSelectButton(elementFvId, selectButtonId, options, config) {
+        rcsbFvCtxManager.setButton(elementFvId, selectButtonId);
+        ComponentsManager.buildSelectButton(selectButtonId, options, config);
+    }
+    static clearAdditionalSelectButton(elementFvId, selectButtonId) {
+        var _a, _b;
+        if ((_a = rcsbFvCtxManager.getButtonList(elementFvId)) === null || _a === void 0 ? void 0 : _a.has(selectButtonId)) {
+            (_b = rcsbFvCtxManager.getButtonList(elementFvId)) === null || _b === void 0 ? void 0 : _b.delete(selectButtonId);
+        }
+        ComponentsManager.clearAdditionalSelectButton(selectButtonId);
+    }
+    static addSelectButton(elementFvId, selectButtonId, options, config) {
+        rcsbFvCtxManager.setButton(elementFvId, selectButtonId);
+        ComponentsManager.addSelectButton(selectButtonId, options, config);
+    }
+    static showMessage(elementId, message) {
+        var _a;
+        const domElement = document.createElement("h4");
+        domElement.innerHTML = message;
+        (_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.append(domElement);
+    }
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvDataProviderBuilder.d.ts

@@ -0,0 +1,4 @@
+import { RcsbFvAdditionalConfig, RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+export declare class RcsbFvDataProviderBuilder {
+    static buildFv(elementId: string, additionalConfig?: RcsbFvAdditionalConfig): Promise<RcsbFvModulePublicInterface>;
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvDataProviderBuilder.js

@@ -0,0 +1,27 @@
+import { __awaiter } from "tslib";
+import { RcsbFvCoreBuilder } from "./RcsbFvCoreBuilder";
+import { RcsbFvDataProvider } from "../RcsbFvModule/RcsbFvDataProvider";
+import { GroupPfvUI } from "../../RcsbFvUI/GroupPfvUI";
+export class RcsbFvDataProviderBuilder {
+    static buildFv(elementId, additionalConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                var _a, _b;
+                try {
+                    RcsbFvCoreBuilder.createFv({
+                        elementId,
+                        fvModuleI: RcsbFvDataProvider,
+                        config: {
+                            resolve,
+                            additionalConfig
+                        }
+                    });
+                    GroupPfvUI.fvUI(GroupPfvUI.addBootstrapElement(elementId), (additionalConfig === null || additionalConfig === void 0 ? void 0 : additionalConfig.externalUiComponents) ? [...((_a = additionalConfig.externalUiComponents.add) !== null && _a !== void 0 ? _a : []), ...((_b = additionalConfig.externalUiComponents.replace) !== null && _b !== void 0 ? _b : [])] : []);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            });
+        });
+    }
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvEntityBuilder.d.ts

@@ -0,0 +1,7 @@
+import { RcsbFvAdditionalConfig } from "../RcsbFvModule/RcsbFvModuleInterface";
+import { RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+export declare class RcsbFvEntityBuilder {
+    static buildEntitySummaryFv(elementFvId: string, elementSelectId: string, entityId: string): Promise<RcsbFvModulePublicInterface>;
+    static buildSingleEntitySummaryFv(elementId: string, entityId: string): Promise<RcsbFvModulePublicInterface>;
+    static buildEntityFv(elementId: string, entityId: string, additionalConfig?: RcsbFvAdditionalConfig): Promise<RcsbFvModulePublicInterface>;
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvEntityBuilder.js

@@ -0,0 +1,88 @@
+import { __awaiter } from "tslib";
+import { RcsbFvEntity } from "../RcsbFvModule/RcsbFvEntity";
+import { FieldName, OperationType, Source, Type } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import { RcsbFvCoreBuilder } from "./RcsbFvCoreBuilder";
+import { RcsbFvUniprotBuilder } from "./RcsbFvUniprotBuilder";
+import { TagDelimiter } from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
+export class RcsbFvEntityBuilder {
+    static buildEntitySummaryFv(elementFvId, elementSelectId, entityId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const pdbId = TagDelimiter.parseEntity(entityId).entryId;
+                const createSelectAndFvBuilder = (p) => __awaiter(this, void 0, void 0, function* () {
+                    const rcsbFvEntity = yield RcsbFvCoreBuilder.createFv({
+                        elementId: elementFvId,
+                        fvModuleI: RcsbFvEntity,
+                        p: p,
+                        config: {
+                            entityId: entityId,
+                            elementSelectId: elementSelectId,
+                            additionalConfig: Object.assign({ rcsbContext: TagDelimiter.parseEntity(entityId) }, additionalConfig()),
+                            resolve: resolve
+                        }
+                    });
+                    const targets = yield rcsbFvEntity.getTargets();
+                    RcsbFvCoreBuilder.buildSelectButton(elementFvId, elementSelectId, [entityId].concat(targets).map(t => {
+                        return {
+                            label: t,
+                            onChange: () => __awaiter(this, void 0, void 0, function* () {
+                                if (t === entityId) {
+                                    yield RcsbFvEntityBuilder.buildSingleEntitySummaryFv(elementFvId, entityId);
+                                }
+                                else {
+                                    yield RcsbFvUniprotBuilder.buildUniprotEntityFv(elementFvId, t, entityId, Object.assign({ alignmentFilter: [entityId] }, additionalConfig({
+                                        field: FieldName.TargetId,
+                                        operation: OperationType.Contains,
+                                        source: Source.PdbInstance,
+                                        values: [pdbId + TagDelimiter.instance]
+                                    })));
+                                }
+                            })
+                        };
+                    }));
+                    return rcsbFvEntity;
+                });
+                const entryId = TagDelimiter.parseEntity(entityId).entryId;
+                RcsbFvCoreBuilder.getPolymerEntityInstanceMapAndCustomBuildFv(entryId, createSelectAndFvBuilder);
+            });
+        });
+    }
+    static buildSingleEntitySummaryFv(elementId, entityId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const entryId = TagDelimiter.parseEntity(entityId).entryId;
+                RcsbFvCoreBuilder.getPolymerEntityInstanceMapAndBuildFv(elementId, entryId, RcsbFvEntity, {
+                    entityId: entityId,
+                    additionalConfig: Object.assign({ rcsbContext: TagDelimiter.parseEntity(entityId) }, additionalConfig()),
+                    resolve: resolve
+                });
+            });
+        });
+    }
+    static buildEntityFv(elementId, entityId, additionalConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                const entryId = TagDelimiter.parseEntity(entityId).entryId;
+                RcsbFvCoreBuilder.getPolymerEntityInstanceMapAndBuildFv(elementId, entryId, RcsbFvEntity, {
+                    entityId: entityId,
+                    additionalConfig: Object.assign({ rcsbContext: TagDelimiter.parseEntity(entityId) }, additionalConfig),
+                    resolve: resolve
+                });
+            });
+        });
+    }
+}
+function additionalConfig(f) {
+    const filters = [{
+            field: FieldName.Type,
+            operation: OperationType.Equals,
+            source: Source.PdbInstance,
+            values: [Type.UnobservedResidueXyz, Type.UnobservedAtomXyz, Type.MaQaMetricLocalTypeOther, Type.MaQaMetricLocalTypePlddt]
+        }];
+    if (f)
+        filters.push(f);
+    return {
+        sources: [Source.PdbEntity, Source.PdbInstance],
+        filters: filters
+    };
+}

package/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvGroupAlignmentBuilder.d.ts

@@ -0,0 +1,8 @@
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { SearchQuery } from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
+import { RcsbFvAdditionalConfig, RcsbFvModulePublicInterface } from "../RcsbFvModule/RcsbFvModuleInterface";
+import { ActionMethods } from "../../RcsbFvUI/Helper/ActionMethods";
+export declare class RcsbFvGroupAlignmentBuilder {
+    static buildUniprotAlignmentFv(elementId: string, upAcc: string, query?: SearchQuery, additionalConfig?: RcsbFvAdditionalConfig & ActionMethods.FvChangeConfigInterface): Promise<RcsbFvModulePublicInterface>;
+    static buildGroupAlignmentFv(elementId: string, groupProvenance: GroupProvenanceId, groupId: string, query?: SearchQuery, additionalConfig?: RcsbFvAdditionalConfig & ActionMethods.FvChangeConfigInterface): Promise<RcsbFvModulePublicInterface>;
+}