Merge pull request #9 from molstar/dev-sb-selection-visuals

Update motif visuals

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@rcsb/rcsb-molstar",
-    "version": "2.7.3",
+    "version": "2.7.4-dev.3",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@rcsb/rcsb-molstar",
-            "version": "2.7.3",
+            "version": "2.7.4-dev.3",
             "license": "MIT",
             "dependencies": {
                 "@types/react": "^18.2.20",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rcsb/rcsb-molstar",
-    "version": "2.7.3",
+    "version": "2.7.4-dev.3",
     "description": "RCSB PDB apps and props based on Mol*.",
     "homepage": "https://github.com/molstar/rcsb-molstar#readme",
     "repository": {

src/viewer/helpers/model.ts

@@ -65,6 +65,12 @@ export class ModelLoader {
             const structureCell = StateObjectRef.resolveAndCheck(this.plugin.state.data, selector?.structure);
             structureCell?.obj?.data && ModelExport.setStructureName(structureCell?.obj?.data, props?.dataLabel || '');
 
+            // TODO is this the best place for this functionality?
+            if (props?.kind === 'motif') {
+                const group = this.plugin.managers.structure.hierarchy.currentComponentGroups[0];
+                this.plugin.managers.camera.focusSpheres(group, e => e.cell.obj?.data.boundary.sphere, { durationMs: 0 });
+            }
+
             return selector;
         }
 

src/viewer/helpers/preset.ts

@@ -225,8 +225,8 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
             // TODO should ASM_1 be the default, seems like we'd run into problems when selecting ligands that are e.g. ambiguous with asym_id & seq_id alone?
             const targets = normalizeTargets(p.targets, structure!.obj.data);
             let selectionExpressions = createSelectionExpressions(p.label || model.data!.entryId, targets);
-            const globalExpressions = createSelectionExpressions(p.label || model.data!.entryId); // global reps, to be hidden
-            selectionExpressions = selectionExpressions.concat(globalExpressions.map(e => { return { ...e, isHidden: true }; }));
+            const globalExpressions = createSelectionExpressions(p.label || model.data!.entryId);
+            selectionExpressions = selectionExpressions.concat(globalExpressions.map(e => { return { ...e, alpha: 0.21 }; }));
 
             if (p.color) {
                 selectionExpressions = selectionExpressions.map(e => { return { ...e, color: p.color }; });
@@ -278,6 +278,7 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
             representation = await plugin.builders.structure.representation.applyPreset(structureProperties!, 'auto', presetParams);
         }
 
+        // TODO align with 'motif'?
         if ((p.kind === 'feature' || p.kind === 'feature-density') && structure?.obj) {
             let loci = targetToLoci(p.target, structure!.obj.data);
             // if requested: then don't force first residue

src/viewer/helpers/selection.ts

@@ -60,7 +60,8 @@ export type SelectionExpression = {
     label: string
     expression: Expression
     isHidden?: boolean,
-    color?: number
+    color?: number,
+    alpha?: number
 };
 
 /**

src/viewer/helpers/superpose/preset.ts

@@ -43,6 +43,9 @@ export const RcsbSuperpositionRepresentationPreset = StructureRepresentationPres
             if (expr.type === 'cartoon') {
                 Object.assign(typeProps, { ...cartoonProps });
             }
+            if (typeof expr?.alpha !== 'undefined') {
+                Object.assign(typeProps, { alpha: expr.alpha });
+            }
 
             const reprProps = {
                 type: expr.type,

src/viewer/index.html

@@ -63,6 +63,8 @@
                 showMembraneOrientationPreset: true,
                 showNakbColorTheme: true,
                 detachedFromSierra: true, // needed when running without sierra
+                pickingAlphaThreshold: 0.2,
+                manualReset: true
             })
 
             // load pdbId or url
@@ -766,9 +768,6 @@
                                 ]
                             }
                         }]);
-                    })
-                    .then(function() {
-                        viewer.resetCamera(0)
                     });
             }
 
@@ -790,8 +789,8 @@
                         });
                     })
                     .then(function() {
-                        const url = 'https://alphafold.ebi.ac.uk/files/AF-F1Q6S1-F1-model_v4.cif';
-                        const label = 'AF-F1Q6S1-F1 @ 0.23 RMSD';
+                        const url = 'https://models.rcsb.org/af_aff1q6s1f1.bcif';
+                        const label = 'AF_AFF1Q6S1F1 @ 0.23 RMSD';
                         const targets = [
                             // AF target must be devoid of struct_oper_id
                             { labelAsymId: 'A', labelSeqId: 260 },
@@ -801,10 +800,7 @@
                             { labelAsymId: 'A', labelSeqId: 344 }
                         ];
                         const matrix = [-0.471, 0.856, 0.215, 0, 0.405, -0.007, 0.914, 0, 0.784, 0.518, -0.343, 0, 54.981, 65.575, 12.287, 1];
-                        return viewer.loadStructureFromUrl(url, 'mmcif', false, { props: { kind: 'motif', label, targets }, matrix });
-                    })
-                    .then(function() {
-                        viewer.resetCamera(0)
+                        return viewer.loadStructureFromUrl(url, 'mmcif', true, { props: { kind: 'motif', label, targets }, matrix });
                     });
             }
 

src/viewer/index.ts

@@ -116,6 +116,8 @@ const DefaultViewerProps = {
     volumeStreamingServer: 'https://maps.rcsb.org/',
 
     backgroundColor: ColorNames.white,
+    manualReset: false, // switch to 'true' for 'motif' preset
+    pickingAlphaThreshold: 0.5, // lower to 0.2 to accommodate 'motif' preset
     showWelcomeToast: true
 };
 export type ViewerProps = typeof DefaultViewerProps & { canvas3d: PartialCanvas3DProps }
@@ -153,7 +155,12 @@ export class Viewer {
                 renderer: {
                     ...defaultSpec.canvas3d?.renderer,
                     ...o.canvas3d?.renderer,
-                    backgroundColor: o.backgroundColor
+                    backgroundColor: o.backgroundColor,
+                    pickingAlphaThreshold: o.pickingAlphaThreshold
+                },
+                camera: {
+                    // desirable for alignment view so that the display doesn't "jump around" as more structures get loaded
+                    manualReset: o.manualReset
                 }
             },
             components: {
@@ -293,7 +300,7 @@ export class Viewer {
         for (const { pdbId, config } of args) {
             out.push(await this.loadPdbId(pdbId, config));
         }
-        this.resetCamera(0);
+        if (!this.plugin.spec.canvas3d?.camera?.manualReset) this.resetCamera(0);
         return out;
     }