updated visuals & qol improvements

molstar · Sep 4, 2023 · e93967e · e93967e
1 parent 9eceadb
commit e93967e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 46 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/viewer/index.ts b/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,14 +560,15 @@ export class LigandViewer {
             }
         }
         await update.commit();
+        this._plugin.managers.camera.reset(undefined, 100);
     }
 
     async toggleLabels() {
         this.customState.showLabels = !this.customState.showLabels;
         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);
     }
 }