pdbe-molstar 3.3.0 → 3.3.2

package/lib/styles/pdbe-molstar/_index.scss

@@ -119,9 +119,14 @@
         .pdbemolstar-state-gallery-state-button {
             height: 24px;
             line-height: 24px;
+            padding-inline: 5px;
             text-align: left;
             overflow: hidden;
-            text-overflow: ellipsis,
+            text-overflow: ellipsis;
+
+            .msp-icon {
+                margin-right: 3px;
+            }
         }
 
         .pdbemolstar-state-gallery-legend {
@@ -152,9 +157,11 @@
         }
 
         .pdbemolstar-state-gallery-title {
-            padding: 5px;
+            margin: 5px;
+            min-height: 2.9em; // Enough for one normal line + one <small> line
             display: flex;
             flex-direction: row;
+            align-items: center;
             text-align: center;
             font-weight: bold;
 

package/lib/viewer.d.ts

@@ -6,6 +6,7 @@ import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hie
 import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { Color } from 'molstar/lib/mol-util/color/color';
 import * as Foldseek from './extensions/foldseek';
+import { StateGalleryManager } from './extensions/state-gallery/manager';
 import { StateGalleryControls } from './extensions/state-gallery/ui';
 import { LoadParams, QueryParam } from './helpers';
 import { AnyColor, InitParams } from './spec';
@@ -73,11 +74,7 @@ export declare class PDBeMolstarPlugin {
     /** Helper methods related to canvas and layout */
     canvas: {
         /** Set canvas background color. */
-        setBgColor: (color?: {
-            r: number;
-            g: number;
-            b: number;
-        }) => Promise<void>;
+        setBgColor: (color?: AnyColor) => Promise<void>;
         /** Set controls panel visibility. Without `isVisible` parameter, toggle controls panel visibility. */
         toggleControls: (isVisible?: boolean) => void;
         /** Set full-screen mode on or off. Without `isExpanded` parameter, toggle full-screen mode. */
@@ -136,7 +133,8 @@ export declare class PDBeMolstarPlugin {
             keepRepresentations?: boolean;
         }) => Promise<void>;
         /** Remove any coloring and extra representations previously added by the `select` method.
-         * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
+         * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure;
+         * if not provided, will apply to all loaded structures.
          * If `keepColors`, current residue coloring is preserved. If `keepRepresentations`, current added representations are preserved. */
         clearSelection: (structureNumberOrId?: number | string, options?: {
             keepColors?: boolean;
@@ -152,7 +150,7 @@ export declare class PDBeMolstarPlugin {
             structureNumber?: number;
         }) => Promise<void>;
         /** Remove any custom tooltips added by the `tooltips` method. */
-        clearTooltips: (structureNumberOrId?: number) => Promise<void>;
+        clearTooltips: (structureNumberOrId?: number | string) => Promise<void>;
         /** Set highlight and/or selection color.
          * Highlight color is used when the user hovers over a part of the structure or when applying the `highlight` method.
          * Selection color is used when creating selections with Selection Mode (the mouse cursor icon) and is not related to the color used by the `select` method. */
@@ -181,7 +179,7 @@ export declare class PDBeMolstarPlugin {
     static extensions: {
         Foldseek: typeof Foldseek;
         StateGallery: {
-            StateGalleryManager: typeof import("./extensions/state-gallery/manager").StateGalleryManager;
+            StateGalleryManager: typeof StateGalleryManager;
             StateGalleryCustomState: (plugin: PluginContext) => Partial<import("./extensions/state-gallery/behavior").StateGalleryCustomState>;
             UI: {
                 StateGalleryControls: typeof StateGalleryControls;

package/lib/viewer.js

@@ -43,6 +43,7 @@ const custom_events_1 = require("./custom-events");
 const behavior_4 = require("./domain-annotations/behavior");
 const Foldseek = tslib_1.__importStar(require("./extensions/foldseek"));
 const behavior_5 = require("./extensions/state-gallery/behavior");
+const manager_1 = require("./extensions/state-gallery/manager");
 const ui_1 = require("./extensions/state-gallery/ui");
 const helpers_1 = require("./helpers");
 const plugin_custom_state_1 = require("./plugin-custom-state");
@@ -75,7 +76,7 @@ class PDBeMolstarPlugin {
         this.canvas = {
             /** Set canvas background color. */
             setBgColor: (color) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                if (!color)
+                if (color === undefined || color === null)
                     return;
                 yield this.canvas.applySettings({ color });
             }),
@@ -265,7 +266,8 @@ class PDBeMolstarPlugin {
                 }
             }),
             /** Remove any coloring and extra representations previously added by the `select` method.
-             * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
+             * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure;
+             * if not provided, will apply to all loaded structures.
              * If `keepColors`, current residue coloring is preserved. If `keepRepresentations`, current added representations are preserved. */
             clearSelection: (structureNumberOrId, options) => tslib_1.__awaiter(this, void 0, void 0, function* () {
                 // Structure list to apply to
@@ -520,7 +522,7 @@ class PDBeMolstarPlugin {
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(camera_1.FocusLoci, { bindings: this.initParams.focusBindings }));
             }
             // Create/ Initialise Plugin
-            const onBeforeUIRender = (plugin) => {
+            const onBeforeUIRender = (plugin) => tslib_1.__awaiter(this, void 0, void 0, function* () {
                 // This needs to run after the plugin is created but before the UI is rendered
                 (0, plugin_custom_state_1.PluginCustomState)(plugin).initParams = Object.assign({}, this.initParams);
                 (0, plugin_custom_state_1.PluginCustomState)(plugin).events = {
@@ -528,7 +530,15 @@ class PDBeMolstarPlugin {
                     superpositionInit: this._ev(),
                     isBusy: this._ev(),
                 };
-            };
+                if (this.initParams.galleryView && this.initParams.moleculeId) {
+                    try {
+                        yield manager_1.StateGalleryManager.create(plugin, this.initParams.moleculeId); // sets extension custom state
+                    }
+                    catch (err) {
+                        console.error(`Failed to initialize StateGalleryManager for entry ${this.initParams.moleculeId}.\n${err}`);
+                    }
+                }
+            });
             if (Array.isArray(target)) {
                 this.targetElement = (0, split_ui_1.resolveHTMLElement)(target[0].target);
                 this.plugin = yield (0, split_ui_1.createPluginSplitUI)({
@@ -569,6 +579,9 @@ class PDBeMolstarPlugin {
                 // Initialise superposition
                 (0, superposition_1.initSuperposition)(this.plugin, this.events.loadComplete);
             }
+            else if (this.initParams.galleryView) {
+                // Do nothing, StateGalleryManager initialized in onBeforeUIRender
+            }
             else {
                 // Load Molecule CIF or coordQuery and Parse
                 const dataSource = this.getMoleculeSrcUrl();
@@ -714,10 +727,9 @@ class PDBeMolstarPlugin {
                             representationPreset: 'auto',
                         });
                         structRef = this.plugin.state.data.selectQ(q => q.byRef(data.ref).subtree().ofType(objects_1.PluginStateObject.Molecule.Structure))[0].transform.ref;
-                        if (this.initParams.hideStructure.length > 0 || this.initParams.visualStyle) {
-                            yield this.deleteStructureComponents(structRef, this.initParams.hideStructure);
-                            yield this.applyVisualStyles(structRef, this.initParams.visualStyle);
-                        }
+                        yield this.deleteStructureComponents(structRef, this.initParams.hideStructure);
+                        yield this.applyVisualStyles(structRef, this.initParams.visualStyle);
+                        yield commands_1.PluginCommands.Camera.Reset(this.plugin, { durationMs: fullLoad ? 0 : undefined });
                     }
                     else {
                         const model = yield this.plugin.builders.structure.createModel(trajectory);
@@ -786,12 +798,14 @@ class PDBeMolstarPlugin {
      * E.g. `styles={polymer:'putty',nonStandard:'ball-and-stick'}` - apply only putty to polymer, only ball-and-stick to non-standard residues, leave other components untouched.
      * E.g. `styles='ball-and-stick'` - apply only ball-and-stick to all components. */
     applyVisualStyles(structureRef, styles) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
             if (styles === undefined)
                 return;
             const components = this.plugin.state.data.selectQ(q => q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent));
             const compStyles = (0, spec_2.resolveVisualStyleSpec)(styles);
+            const addedReprs = [];
+            const update = this.plugin.build();
             for (const comp of components) {
                 const compType = (0, helpers_1.getComponentTypeFromTags)((_a = comp.obj) === null || _a === void 0 ? void 0 : _a.tags);
                 if (compType === undefined)
@@ -799,16 +813,23 @@ class PDBeMolstarPlugin {
                 const compStyle = compStyles[compType];
                 if (compStyle === undefined)
                     continue;
-                const update = this.plugin.build();
                 const existingReprs = this.plugin.state.data.selectQ(q => q.byValue(comp).subtree().withTransformer(representation_1.StructureRepresentation3D));
                 for (const repr of existingReprs) {
                     update.delete(repr);
                 }
                 const newReprProps = (0, structure_representation_params_1.createStructureRepresentationParams)(this.plugin, (_b = comp.obj) === null || _b === void 0 ? void 0 : _b.data, Object.assign({ color: this.defaultColorTheme() }, compStyle));
-                const newRepr = yield update.to(comp).apply(representation_1.StructureRepresentation3D, newReprProps).commit();
-                if (((_d = (_c = newRepr.cell) === null || _c === void 0 ? void 0 : _c.params) === null || _d === void 0 ? void 0 : _d.values.type.name) !== compStyle.type) {
-                    yield this.plugin.build().delete(newRepr).commit(); // sometimes Molstar applies different repr type than requested (especially for water), we must remove such unwanted reprs
+                const newRepr = update.to(comp).apply(representation_1.StructureRepresentation3D, newReprProps).selector;
+                addedReprs.push({ style: compStyle, repr: newRepr });
+            }
+            yield update.commit();
+            // Sometimes Molstar applies different repr type than requested (especially for water), we must remove such unwanted reprs:
+            const rubbishReprs = addedReprs.filter(r => { var _a, _b; return ((_b = (_a = r.repr.cell) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.values.type.name) !== r.style.type; });
+            if (rubbishReprs.length > 0) {
+                const update = this.plugin.build();
+                for (const r of rubbishReprs) {
+                    update.delete(r.repr);
                 }
+                yield update.commit();
             }
         });
     }
@@ -819,6 +840,8 @@ class PDBeMolstarPlugin {
     deleteStructureComponents(structureRef, deleteComponents) {
         var _a, _b;
         return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            if (deleteComponents.length === 0)
+                return;
             const comps = this.plugin.state.data.selectQ(q => q.byRef(structureRef).subtree().withTransformer(model_1.StructureComponent));
             const deleteTags = deleteComponents.flatMap(comp => { var _a; return (_a = helpers_1.StructureComponentTags[comp]) !== null && _a !== void 0 ? _a : []; });
             const update = this.plugin.build();
@@ -829,7 +852,9 @@ class PDBeMolstarPlugin {
                     update.delete(comp);
                 }
             }
-            yield update.commit();
+            if (update.editInfo.count > 0) {
+                yield update.commit();
+            }
         });
     }
     /** Get loci corresponding to a selection within a structure.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdbe-molstar",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "Molstar implementation for PDBe",
   "main": "index.js",
   "scripts": {
@@ -55,19 +55,19 @@
     "babel-loader": "^8.2.5",
     "concurrently": "^7.3.0",
     "cpx2": "^7.0.1",
-    "css-loader": "^6.7.1",
+    "css-loader": "^7.1.2",
     "eslint": "^9.9.0",
     "file-loader": "^6.2.0",
     "http-server": "^14.1.0",
     "mini-css-extract-plugin": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
+    "sass": "^1.80.4",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
     "typescript": "^4.6.4",
     "typescript-eslint": "^8.2.0",
-    "webpack": "^5.89.0",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
@@ -78,7 +78,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "lit": "^3.1.1",
-    "molstar": "4.5.0",
+    "molstar": "4.8.0",
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
     "vm-browserify": "^1.1.2"