"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var rowConfig = [ { trackId: "sequenceTrack", trackHeight: 20, trackColor: "#F9F9F9", displayType: "sequence" /* SEQUENCE */, nonEmptyDisplay: true, rowTitle: "1ASH SEQUENCE", trackData: [ { begin: 1, value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR" } ] }, { trackId: "blockTrack", trackHeight: 20, trackColor: "#F9F9F9", displayType: "block" /* BLOCK */, displayColor: "#FF0000", rowTitle: "1ASH", trackData: [{ begin: 30, end: 60 }] } ]; var fvConfig = { boardId: "1ash_board", boardConfig: { range: { min: 1, max: 150 }, rowTitleWidth: 190, includeAxis: true }, rowConfig: rowConfig, sequenceSelectionChangeCallback: function (plugin, stateManager, sequenceRegion) { stateManager.selectionState.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" }); if (sequenceRegion.length > 0) { var regions = sequenceRegion.map(function (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(function (r) { return (__assign(__assign({}, r), { begin: r.region.begin, end: r.region.end })); }), "select", "set"); } else { plugin.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" }); plugin.resetCamera(); } }, sequenceElementClickCallback: function (plugin, stateManager, d) { var _a; if (d != null) plugin.cameraFocus("1ash_model", "A", d.begin, (_a = d.end) !== null && _a !== void 0 ? _a : d.begin); }, sequenceHoverCallback: function (plugin, stateManager, elements) { if (elements == null || elements.length == 0) plugin.clearSelection("hover"); else plugin.select(elements.map(function (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: function (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: function (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"}); } } }; var block = { blockId: "MyBlock_1", featureViewConfig: [fvConfig] }; var customConfig = { blockConfig: [block] }; var sequenceConfig = { title: "Single chain example", subtitle: "PDB entry with single chain", config: customConfig }; var molstarConfig = { loadConfig: { loadMethod: "loadPdbId", loadParams: { entryId: "1ash", id: "1ash_model" } }, structureViewerConfig: { viewerProps:{ showImportControls: true, showSessionControls: false } }, }; document.addEventListener("DOMContentLoaded", function (event) { var panel3d = new RcsbFv3D.custom({ elementId: "pfv", structurePanelConfig: molstarConfig, sequencePanelConfig: sequenceConfig, cssConfig: { structurePanel: { minWidth: 800, minHeight: 800 }, sequencePanel: { minWidth: 800 } } }); panel3d.render(); });