updated visuals & qol improvements

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## Unreleased
+### Added
+- Dedicated ligand viewer for the visualization of CCD/BIRD entries
+
 ## [2.7.4] - 2023-08-23
 ### Added
 - Motif preset: Show global structure

package-lock.json

@@ -11,7 +11,7 @@
             "dependencies": {
                 "@types/react": "^18.2.21",
                 "@types/react-dom": "^18.2.7",
-                "molstar": "file://../molstar/molstar-3.38.3.tgz",
+                "molstar": "^3.39.0",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "rxjs": "^7.8.1",
@@ -479,9 +479,9 @@
             "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
         },
         "node_modules/@types/node": {
-            "version": "16.18.39",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.39.tgz",
-            "integrity": "sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ=="
+            "version": "16.18.48",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.48.tgz",
+            "integrity": "sha512-mlaecDKQ7rIZrYD7iiKNdzFb6e/qD5I9U1rAhq+Fd+DWvYVs+G2kv74UFHmSOlg5+i/vF3XxuR522V4u8BqO+Q=="
         },
         "node_modules/@types/node-fetch": {
             "version": "2.6.4",
@@ -3821,9 +3821,9 @@
             }
         },
         "node_modules/immutable": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-            "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+            "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
         },
         "node_modules/import-fresh": {
             "version": "3.3.0",
@@ -4862,16 +4862,15 @@
             "optional": true
         },
         "node_modules/molstar": {
-            "version": "3.38.3",
-            "resolved": "file:../molstar/molstar-3.38.3.tgz",
-            "integrity": "sha512-yEzSfzKOE1JrhRej9EwM8qihnXpqZuodo/hl6p0+MbmHLEdpCuBlA5ZMSxM8tN4ZMHWmm5JN3MC3gs4E+DctQA==",
-            "license": "MIT",
+            "version": "3.39.0",
+            "resolved": "https://registry.npmjs.org/molstar/-/molstar-3.39.0.tgz",
+            "integrity": "sha512-NImqUi7ZBJpfCBFaV33lAcyRydPuaV2aiQVDDESdn8xU08mHz9ahHtYWSefs2BE0jvWRgptXVKh0NXdsIY7iBg==",
             "dependencies": {
                 "@types/argparse": "^2.0.10",
                 "@types/benchmark": "^2.1.2",
                 "@types/compression": "1.7.2",
                 "@types/express": "^4.17.17",
-                "@types/node": "^16.18.38",
+                "@types/node": "^16.18.47",
                 "@types/node-fetch": "^2.6.4",
                 "@types/swagger-ui-dist": "3.30.1",
                 "argparse": "^2.0.1",
@@ -4881,11 +4880,11 @@
                 "express": "^4.18.2",
                 "h264-mp4-encoder": "^1.0.12",
                 "immer": "^9.0.21",
-                "immutable": "^4.3.0",
-                "node-fetch": "^2.6.12",
+                "immutable": "^4.3.4",
+                "node-fetch": "^2.7.0",
                 "rxjs": "^7.8.1",
-                "swagger-ui-dist": "^5.1.0",
-                "tslib": "^2.6.0",
+                "swagger-ui-dist": "^5.4.2",
+                "tslib": "^2.6.2",
                 "util.promisify": "^1.1.2",
                 "xhr2": "^0.2.1"
             },
@@ -7751,9 +7750,9 @@
             "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
         },
         "@types/node": {
-            "version": "16.18.39",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.39.tgz",
-            "integrity": "sha512-8q9ZexmdYYyc5/cfujaXb4YOucpQxAV4RMG0himLyDUOEr8Mr79VrqsFI+cQ2M2h89YIuy95lbxuYjxT4Hk4kQ=="
+            "version": "16.18.48",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.48.tgz",
+            "integrity": "sha512-mlaecDKQ7rIZrYD7iiKNdzFb6e/qD5I9U1rAhq+Fd+DWvYVs+G2kv74UFHmSOlg5+i/vF3XxuR522V4u8BqO+Q=="
         },
         "@types/node-fetch": {
             "version": "2.6.4",
@@ -10328,9 +10327,9 @@
             "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
         },
         "immutable": {
-            "version": "4.3.0",
-            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-            "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+            "version": "4.3.4",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+            "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
         },
         "import-fresh": {
             "version": "3.3.0",
@@ -11105,14 +11104,15 @@
             "optional": true
         },
         "molstar": {
-            "version": "file:../molstar/molstar-3.38.3.tgz",
-            "integrity": "sha512-yEzSfzKOE1JrhRej9EwM8qihnXpqZuodo/hl6p0+MbmHLEdpCuBlA5ZMSxM8tN4ZMHWmm5JN3MC3gs4E+DctQA==",
+            "version": "3.39.0",
+            "resolved": "https://registry.npmjs.org/molstar/-/molstar-3.39.0.tgz",
+            "integrity": "sha512-NImqUi7ZBJpfCBFaV33lAcyRydPuaV2aiQVDDESdn8xU08mHz9ahHtYWSefs2BE0jvWRgptXVKh0NXdsIY7iBg==",
             "requires": {
                 "@types/argparse": "^2.0.10",
                 "@types/benchmark": "^2.1.2",
                 "@types/compression": "1.7.2",
                 "@types/express": "^4.17.17",
-                "@types/node": "^16.18.38",
+                "@types/node": "^16.18.47",
                 "@types/node-fetch": "^2.6.4",
                 "@types/swagger-ui-dist": "3.30.1",
                 "argparse": "^2.0.1",
@@ -11123,13 +11123,13 @@
                 "gl": "^6.0.2",
                 "h264-mp4-encoder": "^1.0.12",
                 "immer": "^9.0.21",
-                "immutable": "^4.3.0",
+                "immutable": "^4.3.4",
                 "jpeg-js": "^0.4.4",
-                "node-fetch": "^2.6.12",
+                "node-fetch": "^2.7.0",
                 "pngjs": "^6.0.0",
                 "rxjs": "^7.8.1",
-                "swagger-ui-dist": "^5.1.0",
-                "tslib": "^2.6.0",
+                "swagger-ui-dist": "^5.4.2",
+                "tslib": "^2.6.2",
                 "util.promisify": "^1.1.2",
                 "xhr2": "^0.2.1"
             }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rcsb/rcsb-molstar",
-    "version": "2.7.4",
+    "version": "2.8.0-dev.0",
     "description": "RCSB PDB apps and props based on Mol*.",
     "homepage": "https://github.com/molstar/rcsb-molstar#readme",
     "repository": {
@@ -62,7 +62,7 @@
     "dependencies": {
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
-        "molstar": "file://../molstar/molstar-3.38.3.tgz",
+        "molstar": "^3.39.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rxjs": "^7.8.1",

src/viewer/index.ts

@@ -10,7 +10,7 @@
 import { BehaviorSubject } from 'rxjs';
 import { Plugin } from 'molstar/lib/mol-plugin-ui/plugin';
 import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
-import { ViewerState, CollapsedState, ModelUrlProvider, LigandUrlProvider, LigandViewerState } from './types';
+import { ViewerState, CollapsedState, ModelUrlProvider, LigandUrlProvider, LigandViewerState, LoadParams } from './types';
 import { PluginSpec } from 'molstar/lib/mol-plugin/spec';
 
 import { ColorNames } from 'molstar/lib/mol-util/color/names';
@@ -147,7 +147,7 @@ const DefaultLigandViewerProps = {
 
     extensions: ObjectKeys(LigandExtensions),
     layoutIsExpanded: false,
-    layoutShowControls: true,
+    layoutShowControls: false,
     layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
     layoutShowSequence: false,
     layoutShowLog: false,
@@ -431,7 +431,12 @@ export class LigandViewer {
                 },
                 camera: {
                     // desirable for alignment view so that the display doesn't "jump around" as more structures get loaded
-                    manualReset: o.manualReset
+                    manualReset: o.manualReset,
+                    helper: {
+                        axes: {
+                            name: 'off', params: {}
+                        }
+                    }
                 }
             },
             components: {
@@ -446,10 +451,10 @@ export class LigandViewer {
                 remoteState: 'none',
             },
             config: [
+                [PluginConfig.VolumeStreaming.Enabled, false],
                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                 [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
                 [PluginConfig.Viewport.ShowAnimation, false],
-                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
                 [PluginConfig.Download.DefaultPdbProvider, 'rcsb'],
                 [PluginConfig.Download.DefaultEmdbProvider, 'rcsb'],
                 [PluginConfig.Structure.DefaultRepresentationPreset, PresetStructureRepresentations.auto.id],
@@ -515,27 +520,35 @@ export class LigandViewer {
         for (const provider of this.ligandUrlProviders) {
             try {
                 const p = provider(id);
-                await this.customState.modelLoader.load<any, any>({ fileOrUrl: p.url, format: p.format, isBinary: p.isBinary }, undefined, undefined, ChemicalCompontentTrajectoryHierarchyPreset, { shownCoordinateType: this.customState.shownCoordinateType });
-                await this.syncHydrogenState();
-
-                for (const s of this._plugin.managers.structure.hierarchy.current.structures) {
-                    for (const c of s.components) {
-                        const isHidden = c.cell.state.isHidden === true || !this.customState.showLabels;
-                        await this._plugin.builders.structure.representation.addRepresentation(c.cell, { type: 'label', typeParams: { level: 'element', ignoreHydrogens: this.customState.ignoreHydrogens } }, { initialState: { isHidden } });
-                    }
-                }
+                await this.load({ fileOrUrl: p.url, format: p.format, isBinary: p.isBinary });
             } catch (e) {
                 console.warn(`loading '${id}' failed with '${e}', trying next ligand-loader-provider`);
             }
         }
     }
 
+    async loadLigandFromUrl(url: string, format: BuiltInTrajectoryFormat, isBinary: boolean) {
+        await this.load({ fileOrUrl: url, format, isBinary });
+    }
+
+    private async load(p: LoadParams) {
+        await this.customState.modelLoader.load<any, any>(p, undefined, undefined, ChemicalCompontentTrajectoryHierarchyPreset, { shownCoordinateType: this.customState.shownCoordinateType, representationPresetParams: { theme: { carbonColor: 'element-symbol' } } });
+        await this.syncHydrogenState();
+
+        for (const s of this._plugin.managers.structure.hierarchy.current.structures) {
+            for (const c of s.components) {
+                const isHidden = c.cell.state.isHidden === true || !this.customState.showLabels;
+                await this._plugin.builders.structure.representation.addRepresentation(c.cell, { type: 'label', typeParams: { level: 'element', fontQuality: 4, borderColor: ColorNames.black, ignoreHydrogens: this.customState.ignoreHydrogens } }, { initialState: { isHidden } });
+            }
+        }
+    }
+
     async toggleHydrogen() {
         this.customState.ignoreHydrogens = !this.customState.ignoreHydrogens;
         await this.syncHydrogenState();
     }
 
-    async syncHydrogenState() {
+    private async syncHydrogenState() {
         const update = this._plugin.build();
         for (const s of this._plugin.managers.structure.hierarchy.current.structures) {
             for (const c of s.components) {
@@ -547,6 +560,7 @@ export class LigandViewer {
             }
         }
         await update.commit();
+        this._plugin.managers.camera.reset(undefined, 100);
     }
 
     async toggleLabels() {
@@ -554,7 +568,7 @@ export class LigandViewer {
         await this.syncLabelState();
     }
 
-    async syncLabelState() {
+    private async syncLabelState() {
         for (const s of this._plugin.managers.structure.hierarchy.current.structures) {
             for (const c of s.components) {
                 if (c.cell.state.isHidden) continue;
@@ -564,5 +578,6 @@ export class LigandViewer {
                 }
             }
         }
+        this._plugin.managers.camera.reset(undefined, 100);
     }
 }