Added .visual.interactivityFocus method

Author: midlik

CHANGELOG.md

@@ -2,6 +2,7 @@
 All notable changes to this project will be documented in this file, following the suggestions of [Keep a CHANGELOG](http://keepachangelog.com/). This project adheres to [Semantic Versioning](http://semver.org/) for its most widely used - and defacto - public interfaces.
 
 ## [Unreleased]
+- `.visual.interactivityFocus` method
 
 ## [v3.3.2] - 2024-11-25
 - Fixed Domain Annotations crashing when no domains available

index.html

@@ -109,6 +109,14 @@ <h4>Focus</h4>
                     Focus on Chain A:14-18
                 </button>
 
+                <h4>Interactivity focus</h4>
+                <button onclick="viewerInstance.visual.interactivityFocus({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }] });">
+                    Int. focus on Chain A:14-18
+                </button>
+                <button onclick="viewerInstance.visual.interactivityFocus({ data: [] });">
+                    Int. unfocus
+                </button>
+
                 <h4>Highlight</h4>
                 <button onclick="viewerInstance.visual.highlight({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }], color: '#ffff00' })">
                     Highlight Chain A:14-18
@@ -139,6 +147,7 @@ <h4>Selection</h4>
                 <button onclick="viewerInstance.visual.select({ data: [
                         { struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00', sideChain: true }, 
                         { struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: '#88ff00', representation: 'spacefill', representationColor: '#ff00ff' }]})">
+                    Select Chain B:1-6, B:15-20, with representations
                 </button>
                 <br>
                 <button onclick="viewerInstance.visual.select({ data: [{ uniprot_accession: 'P02070', start_uniprot_residue_number: 122, end_uniprot_residue_number: 142, color: '#ff00ff' }], nonSelectedColor: '#ffffff' })">

src/app/viewer.ts

@@ -694,6 +694,18 @@ export class PDBeMolstarPlugin {
             this.plugin.managers.camera.focusLoci(loci);
         },
 
+        /** Apply interactive focus behavior on the part of the structure defined by `data` (i.e. emulate user clicking on a substructure).
+         * This includes behaviors like "show non-covalent interactions" or "show streamed volume data"
+         * but not camera adjustment (call `.visual.focus` for that).
+         * If `data` contains more items, focus on the union of those.
+         * If `structureId` or `structureNumber` is provided, use the specified structure (numbered from 1!);
+         * otherwise use the last added structure. */
+        interactivityFocus: async (params: { data: QueryParam[], structureId?: string, structureNumber?: number }) => {
+            const structureNumberOrId = params.structureId ?? params.structureNumber;
+            const loci = this.getLociForParams(params.data, structureNumberOrId);
+            this.plugin.managers.structure.focus.setFromLoci(loci);
+        },
+
         /** Trigger highlight on the part of the structure defined by `data`
          * (this will look the same as when the user hovers over a part of the structure).
          * If `focus`, also zoom on the highlighted part.