molstar 3.0.0-dev.3 → 3.0.0-dev.7

package/lib/apps/viewer/index.js

@@ -10,19 +10,24 @@ import { CellPack } from '../../extensions/cellpack';
 import { DnatcoConfalPyramids } from '../../extensions/dnatco';
 import { G3DFormat, G3dProvider } from '../../extensions/g3d/format';
 import { GeometryExport } from '../../extensions/geo-export';
+import { MAQualityAssessment } from '../../extensions/model-archive/quality-assessment/behavior';
+import { QualityAssessmentPLDDTPreset, QualityAssessmentQmeanPreset } from '../../extensions/model-archive/quality-assessment/behavior';
+import { QualityAssessment } from '../../extensions/model-archive/quality-assessment/prop';
 import { Mp4Export } from '../../extensions/mp4-export';
 import { PDBeStructureQualityReport } from '../../extensions/pdbe';
 import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
 import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
 import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
+import { PresetStructureRepresentations, StructureRepresentationPresetProvider } from '../../mol-plugin-state/builder/structure/representation-preset';
 import { createVolumeRepresentationParams } from '../../mol-plugin-state/helpers/volume-representation-params';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
 import { TrajectoryFromModelAndCoordinates } from '../../mol-plugin-state/transforms/model';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginConfig } from '../../mol-plugin/config';
 import { PluginSpec } from '../../mol-plugin/spec';
+import { StateObjectRef } from '../../mol-state';
 import { Asset } from '../../mol-util/assets';
 import '../../mol-util/polyfill';
 import { ObjectKeys } from '../../mol-util/type-helpers';
@@ -44,7 +49,8 @@ var Extensions = {
     'anvil-membrane-orientation': PluginSpec.Behavior(ANVILMembraneOrientation),
     'g3d': PluginSpec.Behavior(G3DFormat),
     'mp4-export': PluginSpec.Behavior(Mp4Export),
-    'geo-export': PluginSpec.Behavior(GeometryExport)
+    'geo-export': PluginSpec.Behavior(GeometryExport),
+    'ma-quality-assessment': PluginSpec.Behavior(MAQualityAssessment),
 };
 var DefaultViewerOptions = {
     customFormats: CustomFormats,
@@ -75,57 +81,78 @@ var DefaultViewerOptions = {
     emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
 };
 var Viewer = /** @class */ (function () {
-    function Viewer(elementOrId, options) {
-        if (options === void 0) { options = {}; }
-        var _a;
-        var o = __assign(__assign({}, DefaultViewerOptions), options);
-        var defaultSpec = DefaultPluginUISpec();
-        var spec = {
-            actions: defaultSpec.actions,
-            behaviors: __spreadArray(__spreadArray([], defaultSpec.behaviors, true), o.extensions.map(function (e) { return Extensions[e]; }), true),
-            animations: __spreadArray([], defaultSpec.animations || [], true),
-            customParamEditors: defaultSpec.customParamEditors,
-            customFormats: o === null || o === void 0 ? void 0 : o.customFormats,
-            layout: {
-                initial: {
-                    isExpanded: o.layoutIsExpanded,
-                    showControls: o.layoutShowControls,
-                    controlsDisplay: o.layoutControlsDisplay,
-                    regionState: {
-                        bottom: 'full',
-                        left: o.collapseLeftPanel ? 'collapsed' : 'full',
-                        right: o.collapseRightPanel ? 'hidden' : 'full',
-                        top: 'full',
-                    }
-                },
-            },
-            components: __assign(__assign({}, defaultSpec.components), { controls: __assign(__assign({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none' }),
-            config: [
-                [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
-                [PluginConfig.General.PixelScale, o.pixelScale],
-                [PluginConfig.General.PickScale, o.pickScale],
-                [PluginConfig.General.PickPadding, o.pickPadding],
-                [PluginConfig.General.EnableWboit, o.enableWboit],
-                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
-                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
-                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
-                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
-                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
-                [PluginConfig.State.DefaultServer, o.pluginStateServer],
-                [PluginConfig.State.CurrentServer, o.pluginStateServer],
-                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
-                [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],
-                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
-                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider]
-            ]
-        };
-        var element = typeof elementOrId === 'string'
-            ? document.getElementById(elementOrId)
-            : elementOrId;
-        if (!element)
-            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
-        this.plugin = createPlugin(element, spec);
+    function Viewer(plugin) {
+        this.plugin = plugin;
     }
+    Viewer.create = function (elementOrId, options) {
+        var _a;
+        if (options === void 0) { options = {}; }
+        return __awaiter(this, void 0, void 0, function () {
+            var o, defaultSpec, spec, element, plugin;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        o = __assign(__assign({}, DefaultViewerOptions), options);
+                        defaultSpec = DefaultPluginUISpec();
+                        spec = {
+                            actions: defaultSpec.actions,
+                            behaviors: __spreadArray(__spreadArray([], defaultSpec.behaviors, true), o.extensions.map(function (e) { return Extensions[e]; }), true),
+                            animations: __spreadArray([], defaultSpec.animations || [], true),
+                            customParamEditors: defaultSpec.customParamEditors,
+                            customFormats: o === null || o === void 0 ? void 0 : o.customFormats,
+                            layout: {
+                                initial: {
+                                    isExpanded: o.layoutIsExpanded,
+                                    showControls: o.layoutShowControls,
+                                    controlsDisplay: o.layoutControlsDisplay,
+                                    regionState: {
+                                        bottom: 'full',
+                                        left: o.collapseLeftPanel ? 'collapsed' : 'full',
+                                        right: o.collapseRightPanel ? 'hidden' : 'full',
+                                        top: 'full',
+                                    }
+                                },
+                            },
+                            components: __assign(__assign({}, defaultSpec.components), { controls: __assign(__assign({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none' }),
+                            config: [
+                                [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
+                                [PluginConfig.General.PixelScale, o.pixelScale],
+                                [PluginConfig.General.PickScale, o.pickScale],
+                                [PluginConfig.General.PickPadding, o.pickPadding],
+                                [PluginConfig.General.EnableWboit, o.enableWboit],
+                                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
+                                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
+                                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                                [PluginConfig.State.DefaultServer, o.pluginStateServer],
+                                [PluginConfig.State.CurrentServer, o.pluginStateServer],
+                                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
+                                [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],
+                                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
+                                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                                [PluginConfig.Structure.DefaultRepresentationPreset, ViewerAutoPreset.id],
+                            ]
+                        };
+                        element = typeof elementOrId === 'string'
+                            ? document.getElementById(elementOrId)
+                            : elementOrId;
+                        if (!element)
+                            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
+                        return [4 /*yield*/, createPluginUI(element, spec, {
+                                onBeforeUIRender: function (plugin) {
+                                    // the preset needs to be added before the UI renders otherwise
+                                    // "Download Structure" wont be able to pick it up
+                                    plugin.builders.structure.representation.registerPreset(ViewerAutoPreset);
+                                }
+                            })];
+                    case 1:
+                        plugin = _b.sent();
+                        return [2 /*return*/, new Viewer(plugin)];
+                }
+            });
+        });
+    };
     Viewer.prototype.setRemoteSnapshot = function (id) {
         var url = "".concat(this.plugin.config.get(PluginConfig.State.CurrentServer), "/get/").concat(id);
         return PluginCommands.State.Snapshots.Fetch(this.plugin, { url: url });
@@ -241,6 +268,30 @@ var Viewer = /** @class */ (function () {
             }
         }));
     };
+    Viewer.prototype.loadAlphaFoldDb = function (afdb) {
+        var params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'alphafolddb',
+                params: {
+                    id: afdb,
+                    options: __assign(__assign({}, params.source.params.options), { representation: 'preset-structure-representation-ma-quality-assessment-plddt' }),
+                }
+            }
+        }));
+    };
+    Viewer.prototype.loadModelArchive = function (id) {
+        var params = DownloadStructure.createDefaultParams(this.plugin.state.data.root.obj, this.plugin);
+        return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
+            source: {
+                name: 'modelarchive',
+                params: {
+                    id: id,
+                    options: params.source.params.options,
+                }
+            }
+        }));
+    };
     /**
      * @example Load X-ray density from volume server
         viewer.loadVolumeFromUrl({
@@ -427,4 +478,40 @@ var Viewer = /** @class */ (function () {
     return Viewer;
 }());
 export { Viewer };
+export var ViewerAutoPreset = StructureRepresentationPresetProvider({
+    id: 'preset-structure-representation-viewer-auto',
+    display: {
+        name: 'Automatic (w/ Annotation)', group: 'Annotation',
+        description: 'Show standard automatic representation but colored by quality assessment (if available in the model).'
+    },
+    isApplicable: function (a) {
+        return (!!a.data.models.some(function (m) { return QualityAssessment.isApplicable(m, 'pLDDT'); }) ||
+            !!a.data.models.some(function (m) { return QualityAssessment.isApplicable(m, 'qmean'); }));
+    },
+    params: function () { return StructureRepresentationPresetProvider.CommonParams; },
+    apply: function (ref, params, plugin) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var structureCell, structure;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+                        structure = (_a = structureCell === null || structureCell === void 0 ? void 0 : structureCell.obj) === null || _a === void 0 ? void 0 : _a.data;
+                        if (!structureCell || !structure)
+                            return [2 /*return*/, {}];
+                        if (!!!structure.models.some(function (m) { return QualityAssessment.isApplicable(m, 'pLDDT'); })) return [3 /*break*/, 2];
+                        return [4 /*yield*/, QualityAssessmentPLDDTPreset.apply(ref, params, plugin)];
+                    case 1: return [2 /*return*/, _b.sent()];
+                    case 2:
+                        if (!!!structure.models.some(function (m) { return QualityAssessment.isApplicable(m, 'qmean'); })) return [3 /*break*/, 4];
+                        return [4 /*yield*/, QualityAssessmentQmeanPreset.apply(ref, params, plugin)];
+                    case 3: return [2 /*return*/, _b.sent()];
+                    case 4: return [4 /*yield*/, PresetStructureRepresentations.auto.apply(ref, params, plugin)];
+                    case 5: return [2 /*return*/, _b.sent()];
+                }
+            });
+        });
+    }
+});
 //# sourceMappingURL=index.js.map

package/lib/cli/cifschema/index.d.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * Copyright (c) 2017-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/cli/cifschema/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * Copyright (c) 2017-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2017-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -23,7 +23,7 @@ function getDicNamespace(block) {
 function runGenerateSchemaMmcif(name, fieldNamesPath, typescript, out, moldbImportPath, addAliases) {
     if (typescript === void 0) { typescript = false; }
     return __awaiter(this, void 0, void 0, function () {
-        var mmcifDic, ihmDic, carbBranchDic, carbCompDic, mmcifDicVersion, ihmDicVersion, carbDicVersion, version, frames, schema;
+        var mmcifDic, ihmDic, maDic, mmcifDicVersion, ihmDicVersion, maDicVersion, version, frames, schema;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, ensureMmcifDicAvailable()];
@@ -42,30 +42,22 @@ function runGenerateSchemaMmcif(name, fieldNamesPath, typescript, out, moldbImpo
                     ihmDic = _a.sent();
                     if (ihmDic.isError)
                         throw ihmDic;
-                    return [4 /*yield*/, ensureCarbBranchDicAvailable()];
+                    return [4 /*yield*/, ensureMaDicAvailable()];
                 case 5:
                     _a.sent();
-                    return [4 /*yield*/, parseCifText(fs.readFileSync(CARB_BRANCH_DIC_PATH, 'utf8')).run()];
+                    return [4 /*yield*/, parseCifText(fs.readFileSync(MA_DIC_PATH, 'utf8')).run()];
                 case 6:
-                    carbBranchDic = _a.sent();
-                    if (carbBranchDic.isError)
-                        throw carbBranchDic;
-                    return [4 /*yield*/, ensureCarbCompDicAvailable()];
-                case 7:
-                    _a.sent();
-                    return [4 /*yield*/, parseCifText(fs.readFileSync(CARB_COMP_DIC_PATH, 'utf8')).run()];
-                case 8:
-                    carbCompDic = _a.sent();
-                    if (carbCompDic.isError)
-                        throw carbCompDic;
+                    maDic = _a.sent();
+                    if (maDic.isError)
+                        throw maDic;
                     mmcifDicVersion = getDicVersion(mmcifDic.result.blocks[0]);
                     ihmDicVersion = getDicVersion(ihmDic.result.blocks[0]);
-                    carbDicVersion = 'draft';
-                    version = "Dictionary versions: mmCIF ".concat(mmcifDicVersion, ", IHM ").concat(ihmDicVersion, ", CARB ").concat(carbDicVersion, ".");
-                    frames = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], mmcifDic.result.blocks[0].saveFrames, true), ihmDic.result.blocks[0].saveFrames, true), carbBranchDic.result.blocks[0].saveFrames, true), carbCompDic.result.blocks[0].saveFrames, true);
+                    maDicVersion = getDicVersion(maDic.result.blocks[0]);
+                    version = "Dictionary versions: mmCIF ".concat(mmcifDicVersion, ", IHM ").concat(ihmDicVersion, ", MA ").concat(maDicVersion, ".");
+                    frames = __spreadArray(__spreadArray(__spreadArray([], mmcifDic.result.blocks[0].saveFrames, true), ihmDic.result.blocks[0].saveFrames, true), maDic.result.blocks[0].saveFrames, true);
                     schema = generateSchema(frames);
                     return [4 /*yield*/, runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases)];
-                case 9:
+                case 7:
                     _a.sent();
                     return [2 /*return*/];
             }
@@ -249,20 +241,10 @@ function ensureIhmDicAvailable() {
         }
     }); });
 }
-function ensureCarbBranchDicAvailable() {
-    return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, ensureDicAvailable(CARB_BRANCH_DIC_PATH, CARB_BRANCH_DIC_URL)];
-            case 1:
-                _a.sent();
-                return [2 /*return*/];
-        }
-    }); });
-}
-function ensureCarbCompDicAvailable() {
+function ensureMaDicAvailable() {
     return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, ensureDicAvailable(CARB_COMP_DIC_PATH, CARB_COMP_DIC_URL)];
+            case 0: return [4 /*yield*/, ensureDicAvailable(MA_DIC_PATH, MA_DIC_URL)];
             case 1:
                 _a.sent();
                 return [2 /*return*/];
@@ -319,10 +301,8 @@ var MMCIF_DIC_PATH = "".concat(DIC_DIR, "/mmcif_pdbx_v50.dic");
 var MMCIF_DIC_URL = 'http://mmcif.wwpdb.org/dictionaries/ascii/mmcif_pdbx_v50.dic';
 var IHM_DIC_PATH = "".concat(DIC_DIR, "/ihm-extension.dic");
 var IHM_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/IHM-dictionary/master/ihm-extension.dic';
-var CARB_BRANCH_DIC_PATH = "".concat(DIC_DIR, "/entity_branch-extension.dic");
-var CARB_BRANCH_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/entity_branch-extension.dic';
-var CARB_COMP_DIC_PATH = "".concat(DIC_DIR, "/chem_comp-extension.dic");
-var CARB_COMP_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/chem_comp-extension.dic';
+var MA_DIC_PATH = "".concat(DIC_DIR, "/ma-extension.dic");
+var MA_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/MA-dictionary/master/mmcif_ma.dic';
 var CIF_CORE_DIC_PATH = "".concat(DIC_DIR, "/cif_core.dic");
 var CIF_CORE_DIC_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/cif_core.dic';
 var CIF_CORE_ENUM_PATH = "".concat(DIC_DIR, "/templ_enum.cif");

package/lib/commonjs/apps/docking-viewer/index.d.ts

@@ -14,7 +14,8 @@ export { setDebugMode, setProductionMode } from '../../mol-util/debug';
 export { Viewer as DockingViewer };
 declare class Viewer {
     plugin: PluginUIContext;
-    constructor(elementOrId: string | HTMLElement, colors?: Color[], showButtons?: boolean);
+    constructor(plugin: PluginUIContext);
+    static create(elementOrId: string | HTMLElement, colors?: Color[], showButtons?: boolean): Promise<Viewer>;
     loadStructuresFromUrlsAndMerge(sources: {
         url: string;
         format: BuiltInTrajectoryFormat;

package/lib/commonjs/apps/docking-viewer/index.js

@@ -51,82 +51,95 @@ var DefaultViewerOptions = {
     emdbProvider: config_1.PluginConfig.Download.DefaultEmdbProvider.defaultValue,
 };
 var Viewer = /** @class */ (function () {
-    function Viewer(elementOrId, colors, showButtons) {
-        var _this = this;
+    function Viewer(plugin) {
+        this.plugin = plugin;
+    }
+    Viewer.create = function (elementOrId, colors, showButtons) {
+        var _a;
         if (colors === void 0) { colors = [(0, color_1.Color)(0x992211), (0, color_1.Color)(0xDDDDDD)]; }
         if (showButtons === void 0) { showButtons = true; }
-        var _a;
-        var o = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultViewerOptions), {
-            layoutIsExpanded: false,
-            layoutShowControls: false,
-            layoutShowRemoteState: false,
-            layoutShowSequence: true,
-            layoutShowLog: false,
-            layoutShowLeftPanel: true,
-            viewportShowExpand: true,
-            viewportShowControls: false,
-            viewportShowSettings: false,
-            viewportShowSelectionMode: false,
-            viewportShowAnimation: false,
-        });
-        var defaultSpec = (0, spec_1.DefaultPluginUISpec)();
-        var spec = {
-            actions: defaultSpec.actions,
-            behaviors: [
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.HighlightLoci, { mark: false }),
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.DefaultLociLabelProvider),
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Camera.FocusLoci),
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.StructureInfo),
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.Interactions),
-                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.SecondaryStructure),
-            ],
-            animations: defaultSpec.animations,
-            customParamEditors: defaultSpec.customParamEditors,
-            layout: {
-                initial: {
-                    isExpanded: o.layoutIsExpanded,
-                    showControls: o.layoutShowControls,
-                    controlsDisplay: o.layoutControlsDisplay,
-                },
-            },
-            components: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultSpec.components), { controls: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
-                    view: viewport_1.ViewportComponent
-                } }),
-            config: [
-                [config_1.PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
-                [config_1.PluginConfig.Viewport.ShowControls, o.viewportShowControls],
-                [config_1.PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
-                [config_1.PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
-                [config_1.PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
-                [config_1.PluginConfig.State.DefaultServer, o.pluginStateServer],
-                [config_1.PluginConfig.State.CurrentServer, o.pluginStateServer],
-                [config_1.PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
-                [config_1.PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
-                [config_1.PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
-                [viewport_1.ShowButtons, showButtons]
-            ]
-        };
-        var element = typeof elementOrId === 'string'
-            ? document.getElementById(elementOrId)
-            : elementOrId;
-        if (!element)
-            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
-        this.plugin = (0, mol_plugin_ui_1.createPlugin)(element, spec);
-        this.plugin.customState = {
-            colorPalette: {
-                name: 'colors',
-                params: { list: { colors: colors } }
-            }
-        };
-        this.plugin.behaviors.canvas3d.initialized.subscribe(function (v) {
-            if (v) {
-                commands_1.PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: {
-                        renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.canvas3d.props.renderer), { backgroundColor: names_1.ColorNames.white }),
-                        camera: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
-                    } });
-            }
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var o, defaultSpec, spec, element, plugin;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        o = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultViewerOptions), {
+                            layoutIsExpanded: false,
+                            layoutShowControls: false,
+                            layoutShowRemoteState: false,
+                            layoutShowSequence: true,
+                            layoutShowLog: false,
+                            layoutShowLeftPanel: true,
+                            viewportShowExpand: true,
+                            viewportShowControls: false,
+                            viewportShowSettings: false,
+                            viewportShowSelectionMode: false,
+                            viewportShowAnimation: false,
+                        });
+                        defaultSpec = (0, spec_1.DefaultPluginUISpec)();
+                        spec = {
+                            actions: defaultSpec.actions,
+                            behaviors: [
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.HighlightLoci, { mark: false }),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.DefaultLociLabelProvider),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Camera.FocusLoci),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.StructureInfo),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.Interactions),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.SecondaryStructure),
+                            ],
+                            animations: defaultSpec.animations,
+                            customParamEditors: defaultSpec.customParamEditors,
+                            layout: {
+                                initial: {
+                                    isExpanded: o.layoutIsExpanded,
+                                    showControls: o.layoutShowControls,
+                                    controlsDisplay: o.layoutControlsDisplay,
+                                },
+                            },
+                            components: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultSpec.components), { controls: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
+                                    view: viewport_1.ViewportComponent
+                                } }),
+                            config: [
+                                [config_1.PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                                [config_1.PluginConfig.Viewport.ShowControls, o.viewportShowControls],
+                                [config_1.PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
+                                [config_1.PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                                [config_1.PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                                [config_1.PluginConfig.State.DefaultServer, o.pluginStateServer],
+                                [config_1.PluginConfig.State.CurrentServer, o.pluginStateServer],
+                                [config_1.PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
+                                [config_1.PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
+                                [config_1.PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                                [viewport_1.ShowButtons, showButtons]
+                            ]
+                        };
+                        element = typeof elementOrId === 'string'
+                            ? document.getElementById(elementOrId)
+                            : elementOrId;
+                        if (!element)
+                            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
+                        return [4 /*yield*/, (0, mol_plugin_ui_1.createPluginUI)(element, spec)];
+                    case 1:
+                        plugin = _b.sent();
+                        plugin.customState = {
+                            colorPalette: {
+                                name: 'colors',
+                                params: { list: { colors: colors } }
+                            }
+                        };
+                        plugin.behaviors.canvas3d.initialized.subscribe(function (v) {
+                            if (v) {
+                                commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
+                                        renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer), { backgroundColor: names_1.ColorNames.white }),
+                                        camera: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
+                                    } });
+                            }
+                        });
+                        return [2 /*return*/, new Viewer(plugin)];
+                }
+            });
         });
-    }
+    };
     Viewer.prototype.loadStructuresFromUrlsAndMerge = function (sources) {
         return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
             var structures, _i, sources_1, _a, url, format, isBinary, data_1, trajectory, model, modelProperties, structure_2, structureProperties_1, dependsOn, data, structure, structureProperties;

package/lib/commonjs/apps/docking-viewer/viewport.js

@@ -40,7 +40,8 @@ function occlusionStyle(plugin) {
                         blurKernelSize: 13
                     } }, outline: { name: 'on', params: {
                         scale: 1.0,
-                        threshold: 0.33
+                        threshold: 0.33,
+                        color: (0, color_1.Color)(0x0000),
                     } } })
         } });
 }