@rcsb/rcsb-saguaro-3d/lib/examples/single-chain/index.js

RCSB Molstar/Saguaro Web App

import { RcsbFv3DCustom } from "../../RcsbFv3D/RcsbFv3DCustom";
;
import { LoadMethod } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
const rowConfig = [
    {
        trackId: "sequenceTrack",
        trackHeight: 20,
        trackColor: "#F9F9F9",
        displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
        nonEmptyDisplay: true,
        rowTitle: "1ASH SEQUENCE",
        trackData: [
            {
                begin: 1,
                label: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
            }
        ]
    }, {
        trackId: "blockTrack",
        trackHeight: 20,
        trackColor: "#F9F9F9",
        displayType: "block" /* RcsbFvDisplayTypes.BLOCK */,
        displayColor: "#FF0000",
        rowTitle: "1ASH",
        trackData: [{
                begin: 30,
                end: 60
            }]
    }
];
const fvConfig = {
    boardId: "1ash_board",
    boardConfig: {
        range: {
            min: 1,
            max: 150
        },
        rowTitleWidth: 190,
        includeAxis: true
    },
    rowConfig: rowConfig,
    sequenceSelectionChangeCallback: (plugin, stateManager, sequenceRegion) => {
        stateManager.selectionState.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
        if (sequenceRegion.length > 0) {
            const regions = sequenceRegion.map(r => {
                var _a;
                return ({
                    modelId: "1ash_model",
                    labelAsymId: "A",
                    region: { begin: r.begin, end: (_a = r.end) !== null && _a !== void 0 ? _a : r.begin, source: "sequence" }
                });
            });
            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
            plugin.select(regions.map(r => (Object.assign(Object.assign({}, r), { begin: r.region.begin, end: r.region.end }))), "select", "set");
        }
        else {
            plugin.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
            plugin.resetCamera();
        }
    },
    sequenceElementClickCallback: (plugin, stateManager, d) => {
        var _a;
        if (d)
            plugin.cameraFocus("1ash_model", "A", d.begin, (_a = d.end) !== null && _a !== void 0 ? _a : d.begin);
    },
    sequenceHoverCallback: (plugin, stateManager, elements) => {
        if (elements == null || elements.length == 0)
            plugin.clearSelection("hover");
        else
            plugin.select(elements.map(e => {
                var _a;
                return ({
                    modelId: "1ash_model",
                    labelAsymId: "A",
                    begin: e.begin,
                    end: (_a = e.end) !== null && _a !== void 0 ? _a : e.begin
                });
            }), "hover", "set");
    },
    structureSelectionCallback: (plugin, pfv, stateManager) => {
        const sel = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "select");
        if (sel == null) {
            pfv.clearSelection("select");
            plugin.resetCamera();
        }
        else {
            pfv.setSelection({ elements: sel.regions, mode: "select" });
        }
    },
    structureHoverCallback: (plugin, pfv, stateManager) => {
        const sel = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "hover");
        if (sel == null)
            pfv.clearSelection("hover");
        else
            pfv.setSelection({ elements: sel.regions, mode: "hover" });
    }
};
const block = {
    blockId: "MyBlock_1",
    featureViewConfig: [fvConfig]
};
const customConfig = {
    blockConfig: [block]
};
const sequenceConfig = {
    title: "Single chain example",
    subtitle: "PDB entry with  single chain",
    config: customConfig
};
const molstarConfig = {
    loadConfig: {
        loadMethod: LoadMethod.loadPdbId,
        loadParams: {
            entryId: "1ash",
            id: "1ash_model"
        }
    },
    structureViewerConfig: {
        viewerProps: {
            showImportControls: true,
            showSessionControls: false
        }
    }
};
document.addEventListener("DOMContentLoaded", function (event) {
    const panel3d = new RcsbFv3DCustom({
        elementId: "pfv",
        structurePanelConfig: molstarConfig,
        sequencePanelConfig: sequenceConfig,
        cssConfig: {
            structurePanel: {
                minWidth: 800,
                minHeight: 800
            },
            sequencePanel: {
                minWidth: 800
            }
        }
    });
    panel3d.render();
});
//# sourceMappingURL=index.js.map