@rcsb/rcsb-saguaro-3d
Version:
RCSB Molstar/Saguaro Web App
249 lines • 8.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { RcsbFv3DCustom } from "../../RcsbFv3D/RcsbFv3DCustom";
import { LoadMethod } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
const rowConfigChainA = [
{
trackId: "sequenceTrack",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
nonEmptyDisplay: true,
rowTitle: "CHAIN A",
trackData: [
{
begin: 1,
label: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
}
]
}, {
trackId: "blockTrack",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "block" /* RcsbFvDisplayTypes.BLOCK */,
displayColor: "#76ae91",
rowTitle: "FEATURE",
trackData: [{
begin: 20,
end: 25
}, {
begin: 150,
end: 160
}]
}
];
const rowConfigChainB = [
{
trackId: "sequenceTrack",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
nonEmptyDisplay: true,
rowTitle: "CHAIN B",
trackData: [
{
begin: 1,
label: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
}
]
}, {
trackId: "blockTrack",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "block" /* RcsbFvDisplayTypes.BLOCK */,
displayColor: "#f17070",
rowTitle: "FEATURE",
trackData: [{
begin: 20,
end: 50
}]
}
];
const fvConfigChainA = {
boardId: "1acb.A_board",
boardConfig: {
range: {
min: 1,
max: 245
},
rowTitleWidth: 190,
includeAxis: true
},
rowConfig: rowConfigChainA,
sequenceSelectionChangeCallback: (plugin, stateManager, sequenceRegion) => {
stateManager.selectionState.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
if (sequenceRegion.length > 0) {
const regions = sequenceRegion.map(r => {
var _a;
return ({
modelId: "1acb_board",
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", "add");
}
else {
plugin.resetCamera();
}
},
sequenceElementClickCallback: (plugin, stateManager, d) => {
var _a;
if (d)
plugin.cameraFocus("1acb_board", "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: "1acb_board",
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("1acb_board", "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("1acb_board", "A", "hover");
if (sel == null)
pfv.clearSelection("hover");
else
pfv.setSelection({ elements: sel.regions, mode: "hover" });
}
};
const fvConfigChainB = {
boardId: "1acb.B_board",
boardConfig: {
range: {
min: 1,
max: 70
},
rowTitleWidth: 190,
includeAxis: true
},
rowConfig: rowConfigChainB,
sequenceSelectionChangeCallback: (plugin, stateManager, sequenceRegion) => {
stateManager.selectionState.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
if (sequenceRegion.length > 0) {
const regions = sequenceRegion.map(r => {
var _a;
return ({
modelId: "1acb_board",
labelAsymId: "B",
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", "add");
}
else {
plugin.resetCamera();
}
},
sequenceElementClickCallback: (plugin, stateManager, d) => {
var _a;
if (d)
plugin.cameraFocus("1acb_board", "B", 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: "1acb_board",
labelAsymId: "B",
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("1acb_board", "B", "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("1acb_board", "B", "hover");
if (sel == null)
pfv.clearSelection("hover");
else
pfv.setSelection({ elements: sel.regions, mode: "hover" });
}
};
const blockChainA = {
blockId: "chainA",
featureViewConfig: [fvConfigChainA]
};
const blockChainB = {
blockId: "chainB",
featureViewConfig: [fvConfigChainB]
};
const blockSelectorElement = (blockSelectorManager) => {
return (_jsx("div", { children: _jsxs("select", { onChange: (e) => {
blockSelectorManager.setActiveBlock(e.target.value);
}, children: [_jsx("option", { value: "chainA", children: "Chain A" }), _jsx("option", { value: "chainB", children: "Chain B" })] }) }));
};
const customConfig = {
blockConfig: [blockChainA, blockChainB],
blockSelectorElement: blockSelectorElement
};
const sequenceConfig = {
title: "Multiple chains example",
subtitle: "PDB entry with two chains",
config: customConfig
};
const molstarConfig = {
loadConfig: {
loadMethod: LoadMethod.loadPdbId,
loadParams: {
entryId: "1acb",
id: "1acb_board"
}
},
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