@rcsb/rcsb-saguaro-3d
Version:
RCSB Molstar/Saguaro Web App
144 lines (143 loc) • 4.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const RcsbFv3DCustom_1 = require("../../RcsbFv3D/RcsbFv3DCustom");
;
const MolstarActionManager_1 = require("../../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: MolstarActionManager_1.LoadMethod.loadPdbId,
loadParams: {
entryId: "1ash",
id: "1ash_model"
}
},
structureViewerConfig: {
viewerProps: {
showImportControls: true,
showSessionControls: false
}
}
};
document.addEventListener("DOMContentLoaded", function (event) {
const panel3d = new RcsbFv3DCustom_1.RcsbFv3DCustom({
elementId: "pfv",
structurePanelConfig: molstarConfig,
sequencePanelConfig: sequenceConfig,
cssConfig: {
structurePanel: {
minWidth: 800,
minHeight: 800
},
sequencePanel: {
minWidth: 800
}
}
});
panel3d.render();
});