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

package/lib/RcsbFvWeb/RcsbFvBuilder.js

@@ -0,0 +1,78 @@
+import { RcsbFvCoreBuilder } from "./RcsbFvBuilder/RcsbFvCoreBuilder";
+import { RcsbFvChromosomeBuilder } from "./RcsbFvBuilder/RcsbFvChromosomeBuilder";
+import { RcsbFvPairwiseAligmentBuilder } from "./RcsbFvBuilder/RcsbFvPairwiseAligmentBuilder";
+import { RcsbFvUniprotBuilder } from "./RcsbFvBuilder/RcsbFvUniprotBuilder";
+import { RcsbFvEntityBuilder } from "./RcsbFvBuilder/RcsbFvEntityBuilder";
+import { RcsbFvInstanceBuilder } from "./RcsbFvBuilder/RcsbFvInstanceBuilder";
+import { RcsbFvProteinSequenceBuilder } from "./RcsbFvBuilder/RcsbFvProteinSequenceBuilder";
+import { RcsbFvAssemblyBuilder } from "./RcsbFvBuilder/RcsbFvAssemblyBuilder";
+import { GroupProvenanceId } from "@rcsb/rcsb-api-tools/build/RcsbDw/Types/DwEnums";
+import { RcsbFvGroupTabsBuilder } from "./RcsbFvGroup/RcsbFvGroupTabsBuilder";
+import { RcsbFvGroupAlignmentBuilder } from "./RcsbFvBuilder/RcsbFvGroupAlignmentBuilder";
+import { RcsbFvDataProviderBuilder } from "./RcsbFvBuilder/RcsbFvDataProviderBuilder";
+export function unmount(elementId) {
+    RcsbFvCoreBuilder.unmount(elementId);
+}
+export function buildMultipleAlignmentSequenceFv(elementFvId, elementSelectId, upAcc, config = {}, additionalConfig) {
+    return RcsbFvUniprotBuilder.buildUniprotMultipleEntitySequenceFv(elementFvId, elementSelectId, upAcc, config, additionalConfig);
+}
+export function buildEntitySummaryFv(elementFvId, elementSelectId, entityId) {
+    return RcsbFvEntityBuilder.buildEntitySummaryFv(elementFvId, elementSelectId, entityId);
+}
+export function buildSingleEntitySummaryFv(elementId, entityId) {
+    return RcsbFvEntityBuilder.buildSingleEntitySummaryFv(elementId, entityId);
+}
+export function buildInstanceSequenceFv(elementFvId, elementSelectId, entryId, config = {}, additionalConfig) {
+    return RcsbFvInstanceBuilder.buildInstanceSequenceFv(elementFvId, elementSelectId, entryId, config, additionalConfig);
+}
+export function buildMultipleInstanceSequenceFv(elementFvId, elementEntrySelectId, elementInstanceSelectId, entryIdList, config = {}, additionalConfig) {
+    return RcsbFvInstanceBuilder.buildMultipleInstanceSequenceFv(elementFvId, elementEntrySelectId, elementInstanceSelectId, entryIdList, config, additionalConfig);
+}
+export function buildAssemblySequenceFv(elementFvId, elementSelectAssemblyId, elementSelectInstanceId, entryId, onAsseblyChangeCallback, onInstanceChangeCallback) {
+    return RcsbFvAssemblyBuilder.buildAssemblySequenceFv(elementFvId, elementSelectAssemblyId, elementSelectInstanceId, entryId, onAsseblyChangeCallback, onInstanceChangeCallback);
+}
+export function buildUniprotFv(elementId, upAcc, additionalConfig) {
+    return RcsbFvUniprotBuilder.buildUniprotFv(elementId, upAcc, additionalConfig);
+}
+export function buildEntityFv(elementId, entityId, additionalConfig) {
+    return RcsbFvEntityBuilder.buildEntityFv(elementId, entityId, additionalConfig);
+}
+export function buildInstanceFv(elementId, instanceId, additionalConfig) {
+    return RcsbFvInstanceBuilder.buildInstanceFv(elementId, instanceId, additionalConfig);
+}
+export function buildUniprotEntityFv(elementId, upAcc, entityId, additionalConfig) {
+    return RcsbFvUniprotBuilder.buildUniprotEntityFv(elementId, upAcc, entityId, additionalConfig);
+}
+export function buildUniprotEntityInstanceFv(elementId, upAcc, entityId, instanceId, additionalConfig) {
+    return RcsbFvUniprotBuilder.buildUniprotEntityInstanceFv(elementId, upAcc, entityId, instanceId, additionalConfig);
+}
+export function buildPfv(elementId, config) {
+    return RcsbFvProteinSequenceBuilder.buildPfv(elementId, config);
+}
+export function buildPairwiseAlignment(elementId, psa, additionalConfig) {
+    return RcsbFvPairwiseAligmentBuilder.buildPairwiseAlignment(elementId, psa, additionalConfig);
+}
+export function buildFullChromosome(elementFvId, chrId) {
+    return RcsbFvChromosomeBuilder.buildFullChromosome(elementFvId, chrId);
+}
+export function buildEntryChromosome(elementFvId, entitySelectId, chromosomeSelectId, entryId) {
+    return RcsbFvChromosomeBuilder.buildEntryChromosome(elementFvId, entitySelectId, chromosomeSelectId, entryId);
+}
+export function buildEntityChromosome(elementFvId, elementSelectId, entityId) {
+    return RcsbFvChromosomeBuilder.buildEntityChromosome(elementFvId, elementSelectId, entityId);
+}
+export function buildChromosome(elementFvId, entityId, chrId, elementSelectId) {
+    return RcsbFvChromosomeBuilder.buildChromosome(elementFvId, chrId, elementSelectId);
+}
+export function buildGroupFv(elementId, groupProvenanceId, groupId, query, additionalConfig) {
+    RcsbFvGroupTabsBuilder.buildGroupTabs(elementId, groupProvenanceId, groupId, query, additionalConfig);
+}
+export function buildSequenceIdentityAlignmentFv(elementId, groupId, query, additionalConfig) {
+    return RcsbFvGroupAlignmentBuilder.buildGroupAlignmentFv(elementId, GroupProvenanceId.ProvenanceSequenceIdentity, groupId, query, additionalConfig);
+}
+export function buildUniprotAlignmentFv(elementId, upAcc, query, additionalConfig) {
+    return RcsbFvGroupAlignmentBuilder.buildGroupAlignmentFv(elementId, GroupProvenanceId.ProvenanceMatchingUniprotAccession, upAcc, query, additionalConfig);
+}
+export function buildDataProviderFv(elementId, dataProvider, additionalConfig) {
+    return RcsbFvDataProviderBuilder.buildFv(elementId, Object.assign(Object.assign({}, additionalConfig), { dataProvider: Object.assign({}, dataProvider) }));
+}

package/lib/RcsbFvWeb/RcsbFvComponents/ComponentsManager.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { GroupedOptionsInterface, SelectOptionInterface, SelectOptionProps } from "./SelectButton";
+export interface SelectButtonConfigInterface {
+    addTitle?: boolean;
+    defaultValue?: string | undefined | null;
+    width?: number;
+    dropdownTitle?: string;
+    optionProps?: (props: SelectOptionProps) => JSX.Element;
+    isAdditionalButton?: boolean;
+}
+export declare class ComponentsManager {
+    private static readonly loaderSpinner;
+    private static readonly selectButtonMap;
+    private static readonly nodeMap;
+    static buildSelectButton(elementId: string, options: Array<SelectOptionInterface> | Array<GroupedOptionsInterface>, config?: SelectButtonConfigInterface): void;
+    static addSelectButton(elementId: string, options: Array<SelectOptionInterface>, config?: SelectButtonConfigInterface): void;
+    static clearSelectButton(elementId: string): void;
+    static clearAdditionalSelectButton(elementId: string): void;
+    static buildLoaderSpinner(elementId: string): void;
+    static unmountLoaderSpinner(elementId: string): void;
+    private static hideElement;
+    private static showElement;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/ComponentsManager.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoaderSpinner } from "./LoaderSpinner";
+import { createRoot } from "react-dom/client";
+import { SelectButtonManager } from "./SelectButtonManager";
+export class ComponentsManager {
+    static buildSelectButton(elementId, options, config) {
+        var _a;
+        ComponentsManager.selectButtonMap.set(elementId, new SelectButtonManager(elementId));
+        (_a = ComponentsManager.selectButtonMap.get(elementId)) === null || _a === void 0 ? void 0 : _a.createButton(options, config);
+    }
+    static addSelectButton(elementId, options, config) {
+        var _a;
+        (_a = ComponentsManager.selectButtonMap.get(elementId)) === null || _a === void 0 ? void 0 : _a.addButton(options, config);
+    }
+    static clearSelectButton(elementId) {
+        var _a;
+        if (ComponentsManager.selectButtonMap.has(elementId)) {
+            (_a = ComponentsManager.selectButtonMap.get(elementId)) === null || _a === void 0 ? void 0 : _a.unmountButton();
+            ComponentsManager.selectButtonMap.delete(elementId);
+        }
+    }
+    static clearAdditionalSelectButton(elementId) {
+        var _a;
+        (_a = ComponentsManager.selectButtonMap.get(elementId)) === null || _a === void 0 ? void 0 : _a.unmountAdditionalButton();
+    }
+    static buildLoaderSpinner(elementId) {
+        var _a, _b;
+        const id = elementId + ComponentsManager.loaderSpinner;
+        if (!ComponentsManager.nodeMap.has(id)) {
+            ComponentsManager.hideElement(elementId);
+            const div = document.createElement("div");
+            div.setAttribute("id", id);
+            (_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.prepend(div);
+            ComponentsManager.nodeMap.set(id, { reactRoot: createRoot(div), htmlElement: div });
+            (_b = ComponentsManager.nodeMap.get(id)) === null || _b === void 0 ? void 0 : _b.reactRoot.render(_jsx(LoaderSpinner, {}));
+        }
+    }
+    static unmountLoaderSpinner(elementId) {
+        var _a, _b;
+        const id = elementId + ComponentsManager.loaderSpinner;
+        if (ComponentsManager.nodeMap.has(id)) {
+            (_a = ComponentsManager.nodeMap.get(id)) === null || _a === void 0 ? void 0 : _a.reactRoot.unmount();
+            (_b = ComponentsManager.nodeMap.get(id)) === null || _b === void 0 ? void 0 : _b.htmlElement.remove();
+            ComponentsManager.nodeMap.delete(id);
+            ComponentsManager.showElement(elementId);
+        }
+    }
+    static hideElement(elementId) {
+        var _a, _b, _c;
+        for (let i = 0; i < ((_b = (_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.children.length) !== null && _b !== void 0 ? _b : 0); i++) {
+            ((_c = document.getElementById(elementId)) === null || _c === void 0 ? void 0 : _c.children.item(i)).style.visibility = "hidden";
+        }
+    }
+    static showElement(elementId) {
+        var _a, _b, _c;
+        for (let i = 0; i < ((_b = (_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.children.length) !== null && _b !== void 0 ? _b : 0); i++) {
+            ((_c = document.getElementById(elementId)) === null || _c === void 0 ? void 0 : _c.children.item(i)).style.visibility = "visible";
+        }
+    }
+}
+ComponentsManager.loaderSpinner = "_loaderSpinner";
+ComponentsManager.selectButtonMap = new Map();
+ComponentsManager.nodeMap = new Map();

package/lib/RcsbFvWeb/RcsbFvComponents/LoaderSpinner.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare class LoaderSpinner extends React.Component<{}, {}> {
+    render(): JSX.Element;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/LoaderSpinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import classes from "../../scss/load-spinner.scss";
+export class LoaderSpinner extends React.Component {
+    render() {
+        return (_jsx("div", { style: { position: "absolute", left: 0, right: 0, marginLeft: "auto", zIndex: Number.MAX_SAFE_INTEGER, marginRight: "auto" }, children: _jsx("div", { className: classes.loadSpinnerComponentScope, children: _jsx("div", { className: "loader" }) }) }));
+    }
+}

package/lib/RcsbFvWeb/RcsbFvComponents/MountableComponent.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export declare class MountableComponent {
+    private readonly element;
+    private root;
+    constructor(element: HTMLElement);
+    render(node: ReactNode): void;
+    unmount(): void;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/MountableComponent.js

@@ -0,0 +1,14 @@
+import { createRoot } from "react-dom/client";
+export class MountableComponent {
+    constructor(element) {
+        this.element = element;
+        this.root = createRoot(this.element);
+    }
+    render(node) {
+        this.unmount();
+        this.root.render(node);
+    }
+    unmount() {
+        this.root.render(undefined);
+    }
+}

package/lib/RcsbFvWeb/RcsbFvComponents/RcsbTabs.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface RcsbTabsInterface<T extends string> {
+    tabList: Array<{
+        key: T;
+        title: string;
+        additionalComponent?: JSX.Element;
+    }>;
+    default: T;
+    id: string;
+    onSelect(t: T): void;
+    onMount(t: T): void;
+}
+export declare class RcsbTabs<T extends string> extends React.Component<RcsbTabsInterface<T>, {}> {
+    static readonly UI_SUFFIX: string;
+    static readonly SELECT_SUFFIX: string;
+    constructor(props: RcsbTabsInterface<T>);
+    render(): JSX.Element;
+    componentDidMount(): void;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/RcsbTabs.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Tab, Tabs } from "react-bootstrap";
+import classes from "../../scss/bootstrap-fv-display.module.scss";
+import uniqid from "uniqid";
+export class RcsbTabs extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsx("div", { className: classes.bootstrapFvComponentScope, children: _jsx(Tabs, { id: this.props.id, defaultActiveKey: this.props.default, onSelect: (eventKey) => {
+                    this.props.onSelect(eventKey);
+                }, children: this.props.tabList.map((tab, n) => (_jsxs(Tab, { eventKey: tab.key, title: tab.title, children: [tab.additionalComponent, _jsx("div", { id: tab.key + RcsbTabs.UI_SUFFIX, style: { height: 20 } }), _jsx("div", { id: tab.key })] }, uniqid(`${tab.key}_`)))) }) }));
+    }
+    componentDidMount() {
+        this.props.onMount(this.props.default);
+    }
+}
+RcsbTabs.UI_SUFFIX = "_" + uniqid() + "_UI_DIV";
+RcsbTabs.SELECT_SUFFIX = "_" + uniqid() + "_SELECT_DIV";

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButton.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { OptionProps } from "react-select";
+export interface GroupedOptionsInterface {
+    options: Array<SelectOptionInterface>;
+    label: string;
+}
+export type SelectOptionProps = OptionProps<OptionPropsInterface, false, GroupOptionPropsInterface>;
+interface SelectButtonInterface {
+    elementId: string;
+    options?: Array<SelectOptionInterface> | Array<GroupedOptionsInterface>;
+    addTitle: boolean;
+    renderTitle: (title: string) => void;
+    defaultValue?: string | undefined | null;
+    width?: number;
+    dropdownTitle?: string;
+    optionProps?: (props: SelectOptionProps) => JSX.Element;
+    isAdditionalButton?: boolean;
+}
+export interface SelectOptionInterface {
+    optId?: string;
+    groupLabel?: string;
+    name?: string;
+    shortLabel?: string;
+    label: string;
+    onChange: () => void;
+}
+export interface OptionPropsInterface extends SelectOptionInterface {
+    value: number;
+}
+export interface GroupOptionPropsInterface {
+    label: string;
+    options: OptionPropsInterface[];
+}
+interface SelectButtonState {
+    selectedOption: OptionPropsInterface;
+}
+export declare class SelectButton extends React.Component<SelectButtonInterface, SelectButtonState> {
+    private static readonly BUTTON_CONTAINER_DIV_SUFFIX;
+    private defaultValue;
+    private currentOption;
+    readonly state: SelectButtonState;
+    constructor(props: SelectButtonInterface);
+    private change;
+    componentDidUpdate(prevProps: Readonly<SelectButtonInterface>, prevState: Readonly<SelectButtonState>): void;
+    componentDidMount(): void;
+    render(): JSX.Element;
+    private selectRender;
+    private selectButtonRender;
+    private innerSelectButtonRender;
+    private configStyle;
+    private getSelectOpt;
+    private renderTitle;
+}
+export {};

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButton.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Select, { components } from 'react-select';
+import { Assertions } from "../../RcsbUtils/Helpers/Assertions";
+var assertDefined = Assertions.assertDefined;
+export class SelectButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedOption: (this.props.options[0].options) == null ? Object.assign(Object.assign({}, (this.props.options[0])), { value: 0 }) : Object.assign(Object.assign({}, (this.props.options[0].options[0])), { value: 0 })
+        };
+        this.defaultValue = props.defaultValue;
+    }
+    change(option) {
+        this.setState({ selectedOption: option });
+    }
+    componentDidUpdate(prevProps, prevState) {
+        this.renderTitle();
+        this.state.selectedOption.onChange();
+    }
+    componentDidMount() {
+        this.renderTitle();
+        this.defaultValue = null;
+    }
+    render() {
+        return (_jsx("div", { children: this.selectRender() }));
+    }
+    selectRender() {
+        this.currentOption = this.getSelectOpt();
+        return (_jsx("div", { children: _jsx("div", { style: { display: "inline-block" }, children: this.selectButtonRender(this.currentOption.selectOpt, this.currentOption.index) }) }));
+    }
+    selectButtonRender(defaultValue, index) {
+        return (_jsx("div", { id: this.props.elementId + SelectButton.BUTTON_CONTAINER_DIV_SUFFIX, children: this.innerSelectButtonRender(defaultValue, index) }));
+    }
+    innerSelectButtonRender(defaultValue, index) {
+        const SingleValue = (props) => {
+            const label = typeof props.data.shortLabel === "string" ? props.data.shortLabel : props.data.label;
+            return (_jsx(components.SingleValue, Object.assign({}, props, { children: label })));
+        };
+        let options;
+        if (this.props.options[0].options == null) {
+            options = this.props.options.map((opt, index) => {
+                const props = Object.assign(Object.assign({}, opt), { value: index });
+                return props;
+            });
+        }
+        else {
+            let i = 0;
+            options = this.props.options.map((group, n) => ({
+                label: group.label,
+                options: group.options.map(opt => (Object.assign(Object.assign({}, opt), { value: i++ })))
+            }));
+        }
+        const title = typeof this.props.dropdownTitle === "string" ? _jsx("div", { style: { color: "grey", fontWeight: "bold", fontSize: 12 }, children: this.props.dropdownTitle }) : _jsx(_Fragment, {});
+        return (_jsxs("div", { style: { display: "inline-block" }, children: [title, _jsx("div", { children: _jsx(Select, { options: options, isSearchable: false, onChange: this.change.bind(this), styles: this.configStyle(), components: { SingleValue, Option: this.props.optionProps ? (props) => {
+                                var _a, _b, _c;
+                                return (_c = (_b = (_a = this.props).optionProps) === null || _b === void 0 ? void 0 : _b.call(_a, Object.assign(Object.assign({}, props), { children: _jsx(components.Option, Object.assign({}, props, { children: props.children })) }))) !== null && _c !== void 0 ? _c : _jsx(_Fragment, {});
+                            } : ((props) => (_jsx(components.Option, Object.assign({}, props, { children: props.children })))) }, defaultValue: Object.assign(Object.assign({}, defaultValue), { value: index }) }) })] }));
+    }
+    configStyle() {
+        return {
+            control: (base) => {
+                var _a;
+                return (Object.assign(Object.assign({}, base), { width: (_a = this.props.width) !== null && _a !== void 0 ? _a : 120, border: '1px solid #ddd', boxShadow: 'none', '&:hover': {
+                        border: '1px solid #ddd',
+                    } }));
+            },
+            menu: (base) => (Object.assign(Object.assign({}, base), { width: 500 })),
+            option: (base) => (Object.assign({}, base))
+        };
+    }
+    getSelectOpt() {
+        let index = 0;
+        let selectOpt = undefined;
+        if (this.defaultValue != null) {
+            if (this.props.options[0].options == null) {
+                const n = this.props.options.findIndex(a => {
+                    return a.optId === this.defaultValue;
+                });
+                if (n >= 0) {
+                    index = n;
+                    selectOpt = this.props.options[n];
+                }
+            }
+            else if (this.props.options[0].options != null) {
+                let flag = false;
+                for (const group of this.props.options) {
+                    for (const opt of group.options) {
+                        if (opt.optId === this.defaultValue) {
+                            selectOpt = opt;
+                            flag = true;
+                            break;
+                        }
+                        index++;
+                    }
+                    if (flag) {
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            selectOpt = this.state.selectedOption;
+            index = this.props.options.findIndex(a => {
+                return a.optId === this.state.selectedOption.optId;
+            });
+        }
+        assertDefined(selectOpt);
+        return { selectOpt: selectOpt, index: index };
+    }
+    renderTitle() {
+        if (this.props.addTitle && this.currentOption.selectOpt.name)
+            this.props.renderTitle(this.currentOption.selectOpt.name);
+    }
+}
+SelectButton.BUTTON_CONTAINER_DIV_SUFFIX = "_buttonContainerDiv";

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButtonManager.d.ts

@@ -0,0 +1,17 @@
+import { GroupedOptionsInterface, SelectOptionInterface } from "./SelectButton";
+import { SelectButtonConfigInterface } from "./ComponentsManager";
+export declare class SelectButtonManager {
+    private readonly elementId;
+    private static readonly MAIN_BUTTON_SUFFIX;
+    private static readonly ADDITIONAL_BUTTON_SUFFIX;
+    private static readonly SELECT_TITLE_DIV;
+    private readonly selectComponent;
+    constructor(elementId: string);
+    createButton(options: Array<SelectOptionInterface> | Array<GroupedOptionsInterface>, config?: SelectButtonConfigInterface): void;
+    addButton(options: Array<SelectOptionInterface> | Array<GroupedOptionsInterface>, config?: SelectButtonConfigInterface): void;
+    unmountButton(): void;
+    unmountAdditionalButton(): void;
+    private button;
+    private renderTitle;
+    private createDiv;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButtonManager.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectButton } from "./SelectButton";
+import { SelectButtonTitle } from "./SelectButtonTitle";
+import { MountableComponent } from "./MountableComponent";
+export class SelectButtonManager {
+    constructor(elementId) {
+        var _a, _b, _c;
+        this.elementId = elementId;
+        const selectDiv = this.createDiv(SelectButtonManager.MAIN_BUTTON_SUFFIX);
+        const additionalDiv = this.createDiv(SelectButtonManager.ADDITIONAL_BUTTON_SUFFIX);
+        const titleDiv = this.createDiv(SelectButtonManager.SELECT_TITLE_DIV);
+        (_a = document.getElementById(this.elementId)) === null || _a === void 0 ? void 0 : _a.append(selectDiv);
+        (_b = document.getElementById(this.elementId)) === null || _b === void 0 ? void 0 : _b.append(additionalDiv);
+        (_c = document.getElementById(this.elementId)) === null || _c === void 0 ? void 0 : _c.append(titleDiv);
+        this.selectComponent = {
+            mainButton: new MountableComponent(selectDiv),
+            additionalButton: new MountableComponent(additionalDiv),
+            selectTitleButton: new MountableComponent(titleDiv)
+        };
+    }
+    createButton(options, config) {
+        this.button(this.selectComponent.mainButton, options, config);
+    }
+    addButton(options, config) {
+        this.button(this.selectComponent.additionalButton, options, config);
+    }
+    unmountButton() {
+        this.selectComponent.mainButton.unmount();
+        this.selectComponent.additionalButton.unmount();
+        this.selectComponent.selectTitleButton.unmount();
+    }
+    unmountAdditionalButton() {
+        this.selectComponent.additionalButton.unmount();
+        this.selectComponent.selectTitleButton.unmount();
+    }
+    button(button, options, config) {
+        var _a;
+        button.render(_jsx(SelectButton, { elementId: this.elementId, options: options, optionProps: config === null || config === void 0 ? void 0 : config.optionProps, addTitle: (_a = config === null || config === void 0 ? void 0 : config.addTitle) !== null && _a !== void 0 ? _a : false, defaultValue: config === null || config === void 0 ? void 0 : config.defaultValue, width: config === null || config === void 0 ? void 0 : config.width, dropdownTitle: config === null || config === void 0 ? void 0 : config.dropdownTitle, isAdditionalButton: config === null || config === void 0 ? void 0 : config.isAdditionalButton, renderTitle: this.renderTitle.bind(this) }));
+    }
+    renderTitle(title) {
+        this.selectComponent.selectTitleButton.render(_jsx(SelectButtonTitle, { title: title }));
+    }
+    createDiv(suffix) {
+        var _a;
+        const div = (_a = document.getElementById(this.elementId + suffix)) !== null && _a !== void 0 ? _a : document.createElement("div");
+        const id = this.elementId + suffix;
+        div.setAttribute("id", id);
+        div.style.display = "inline-block";
+        return div;
+    }
+}
+SelectButtonManager.MAIN_BUTTON_SUFFIX = "_buttonDiv";
+SelectButtonManager.ADDITIONAL_BUTTON_SUFFIX = "_additionalButtonDiv";
+SelectButtonManager.SELECT_TITLE_DIV = "_selectButtonTitleDiv";

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButtonTitle.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare class SelectButtonTitle extends React.Component<{
+    title: string;
+}> {
+    render(): JSX.Element;
+}

package/lib/RcsbFvWeb/RcsbFvComponents/SelectButtonTitle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export class SelectButtonTitle extends React.Component {
+    render() {
+        return (_jsx("div", { style: { marginLeft: 20 }, children: this.props.title }));
+    }
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/AlignmentBlockFactory.d.ts

@@ -0,0 +1,11 @@
+import { AlignmentResponse, TargetAlignment } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import { AlignmentRequestContextType } from "../RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
+import { BlockFactoryInterface } from "./BlockFactoryInterface";
+import { TrackFactoryInterface } from "../RcsbFvTrackFactory/TrackFactoryInterface";
+export declare class AlignmentBlockFactory implements BlockFactoryInterface<[AlignmentRequestContextType, AlignmentResponse], [AlignmentRequestContextType, TargetAlignment, AlignmentResponse, number]> {
+    readonly trackFactory: TrackFactoryInterface<[AlignmentRequestContextType, TargetAlignment]>;
+    readonly trackConfigModifier?: (alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment, alignmentResponse: AlignmentResponse, indexResponse: number) => Promise<Partial<RcsbFvRowConfigInterface>>;
+    constructor(alignmentTrackFactory: TrackFactoryInterface<[AlignmentRequestContextType, TargetAlignment]>, trackModifier?: (alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment, alignmentResponse: AlignmentResponse, indexResponse: number) => Promise<Partial<RcsbFvRowConfigInterface>>);
+    getBlock(alignmentRequestContext: AlignmentRequestContextType, alignmentData: AlignmentResponse): Promise<RcsbFvRowConfigInterface[]>;
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/AlignmentBlockFactory.js

@@ -0,0 +1,23 @@
+import { __awaiter } from "tslib";
+export class AlignmentBlockFactory {
+    constructor(alignmentTrackFactory, trackModifier) {
+        this.trackFactory = alignmentTrackFactory;
+        this.trackConfigModifier = trackModifier;
+    }
+    getBlock(alignmentRequestContext, alignmentData) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            alignmentRequestContext = Object.assign(Object.assign({}, alignmentRequestContext), { querySequence: (_a = alignmentData.query_sequence) !== null && _a !== void 0 ? _a : undefined });
+            if (!alignmentData.target_alignment)
+                return [];
+            return (yield Promise.all(alignmentData.target_alignment.map((alignment, index) => __awaiter(this, void 0, void 0, function* () {
+                var _b, _c;
+                if (alignmentRequestContext.filterByTargetContains != null && !((_b = alignment === null || alignment === void 0 ? void 0 : alignment.target_id) === null || _b === void 0 ? void 0 : _b.includes(alignmentRequestContext.filterByTargetContains)))
+                    return;
+                if ((alignment === null || alignment === void 0 ? void 0 : alignment.target_sequence) == null)
+                    return;
+                return Object.assign(Object.assign({}, yield this.trackFactory.getTrack(alignmentRequestContext, alignment)), yield ((_c = this.trackConfigModifier) === null || _c === void 0 ? void 0 : _c.call(this, alignmentRequestContext, alignment, alignmentData, index)));
+            })))).filter((x) => x != undefined);
+        });
+    }
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/AnnotationsBlockFactory.d.ts

@@ -0,0 +1,15 @@
+import { AnnotationFeatures } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import { AnnotationRequestContext } from "../../../RcsbCollectTools/AnnotationCollector/AnnotationCollectorInterface";
+import { BlockFactoryInterface } from "./BlockFactoryInterface";
+import { TrackFactoryInterface } from "../RcsbFvTrackFactory/TrackFactoryInterface";
+import { BlockManagerInterface } from "./BlockManager/BlockManagerInterface";
+import { TrackManagerInterface } from "./BlockManager/TrackManagerInterface";
+export declare class AnnotationsBlockFactory implements BlockFactoryInterface<[AnnotationRequestContext, AnnotationFeatures[]], [TrackManagerInterface]> {
+    private readonly annotationBlockManager;
+    private readonly annotationsBlockData;
+    readonly trackFactory: TrackFactoryInterface<[TrackManagerInterface]>;
+    readonly trackConfigModifier?: (trackManager: TrackManagerInterface) => Promise<Partial<RcsbFvRowConfigInterface>>;
+    constructor(annotationBlockManager: BlockManagerInterface<[AnnotationRequestContext, AnnotationFeatures[]]>, annotationTrackFactory: TrackFactoryInterface<[TrackManagerInterface]>, trackModifier?: (trackManager: TrackManagerInterface) => Promise<Partial<RcsbFvRowConfigInterface>>);
+    getBlock(annotationsRequestContext: AnnotationRequestContext, annotations: AnnotationFeatures[]): Promise<RcsbFvRowConfigInterface[]>;
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/AnnotationsBlockFactory.js

@@ -0,0 +1,19 @@
+import { __awaiter } from "tslib";
+export class AnnotationsBlockFactory {
+    constructor(annotationBlockManager, annotationTrackFactory, trackModifier) {
+        this.annotationsBlockData = new Array();
+        this.annotationBlockManager = annotationBlockManager;
+        this.trackFactory = annotationTrackFactory;
+        this.trackConfigModifier = trackModifier;
+    }
+    getBlock(annotationsRequestContext, annotations) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.annotationBlockManager.setData(annotationsRequestContext, annotations);
+            yield Promise.all(this.annotationBlockManager.getTracks().map((track) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                this.annotationsBlockData.push(Object.assign(Object.assign({}, yield this.trackFactory.getTrack(track)), yield ((_a = this.trackConfigModifier) === null || _a === void 0 ? void 0 : _a.call(this, track))));
+            })));
+            return this.annotationsBlockData;
+        });
+    }
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockFactoryInterface.d.ts

@@ -0,0 +1,7 @@
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import { TrackFactoryInterface } from "../RcsbFvTrackFactory/TrackFactoryInterface";
+export interface BlockFactoryInterface<T extends any[], S extends any[]> {
+    readonly trackFactory: TrackFactoryInterface<S>;
+    readonly trackConfigModifier?: (...args: S) => Promise<Partial<RcsbFvRowConfigInterface>>;
+    getBlock(...args: T): Promise<RcsbFvRowConfigInterface[]>;
+}

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockFactoryInterface.js

@@ -0,0 +1 @@
+export {};

package/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvBlockFactory/BlockManager/AnnotationBlockManager.d.ts

@@ -0,0 +1,21 @@
+import { AnnotationFeatures } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import { RcsbAnnotationConfig } from "../../../../RcsbAnnotationConfig/RcsbAnnotationConfig";
+import { PolymerEntityInstanceTranslate } from "../../../../RcsbUtils/Translators/PolymerEntityInstanceTranslate";
+import { AnnotationRequestContext } from "../../../../RcsbCollectTools/AnnotationCollector/AnnotationCollectorInterface";
+import { BlockManagerInterface } from "./BlockManagerInterface";
+import { TrackManagerFactoryInterface, TrackManagerInterface } from "./TrackManagerInterface";
+import { RcsbAnnotationConfigInterface } from "../../../../RcsbAnnotationConfig/AnnotationConfigInterface";
+export declare class AnnotationBlockManager implements BlockManagerInterface<[AnnotationRequestContext, AnnotationFeatures[]]> {
+    private readonly rcsbAnnotationConfig;
+    private readonly annotationTracks;
+    private readonly polymerEntityInstanceTranslator?;
+    private readonly trackManagerFactory;
+    constructor(trackManagerFactory: TrackManagerFactoryInterface<[string, RcsbAnnotationConfigInterface, PolymerEntityInstanceTranslate]>, rcsbAnnotationConfig: RcsbAnnotationConfig, polymerEntityInstanceTranslator?: PolymerEntityInstanceTranslate);
+    setData(requestConfig: AnnotationRequestContext, data: Array<AnnotationFeatures>): Promise<void>;
+    getTracks(): Array<TrackManagerInterface>;
+    private has;
+    private orderedTypes;
+    private processAnnotations;
+    private addFeature;
+    private mergeTracks;
+}