Issue #2: preliminary camera operations moved into loadWithUNITMPMembraneRepresentation

src/apps/tm-viewer/index.html

@@ -74,13 +74,10 @@
             });
 
             function load(pdbId) {
-                viewer.plugin.clear();
-                tm_molstar.loadInitialSnapshot(viewer.plugin);
-                setTimeout(() =>
                 tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
                     structureUrl: `https://cs.litemol.org/${pdbId}/full`,
                     regionDescriptorUrl: `http://localhost:8000/build/data/${pdbId}.json`,
-                }), 100);
+                });
             }
 
             function $(id) { return document.getElementById(id); }

src/extensions/tmdet/behavior.ts

@@ -7,11 +7,9 @@
 
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { StructureRepresentationPresetProvider, PresetStructureRepresentations } from '../../mol-plugin-state/builder/structure/representation-preset';
-import { MembraneOrientationProvider, MembraneOrientation, TmDetDescriptorCache } from './prop';
 import { StateObject, StateObjectRef, StateObjectCell, StateTransformer, StateTransform } from '../../mol-state';
 import { Task } from '../../mol-task';
 import { PluginBehavior } from '../../mol-plugin/behavior';
-import { MembraneOrientationRepresentationProvider, MembraneOrientationParams, MembraneOrientationRepresentation } from './representation';
 import { PluginStateObject, PluginStateTransform } from '../../mol-plugin-state/objects';
 import { PluginContext } from '../../mol-plugin/context';
 import { DefaultQueryRuntimeTable } from '../../mol-script/runtime/query/compiler';
@@ -19,12 +17,20 @@ import { StructureSelectionQuery, StructureSelectionCategory } from '../../mol-p
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { GenericRepresentationRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
+
+
+
+// TMDET imports
+import { MembraneOrientationRepresentationProvider, MembraneOrientationParams, MembraneOrientationRepresentation } from './representation';
+import { MembraneOrientationProvider, MembraneOrientation, TmDetDescriptorCache } from './prop';
 import { applyTransformations, createMembraneOrientation } from './transformation';
 import { ComponentsType, PDBTMDescriptor, PMS } from './types';
 import { registerTmDetSymmetry } from './symmetry';
 import { StripedResidues } from './coloring';
 import { TmDetColorThemeProvider } from './tmdet-color-theme';
-import { rotateCamera, storeCameraSnapshot } from './camera'; // loadInitialSnapshot
+import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from './camera';
+
+
 
 const Tag = MembraneOrientation.Tag;
 const TMDET_MEMBRANE_ORIENTATION = 'Membrane Orientation';
@@ -120,22 +126,28 @@ export const isTransmembrane = StructureSelectionQuery('Residues Embedded in Mem
 export let membraneOrientation: MembraneOrientation;
 
 export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIContext, params: any) {
-    storeCameraSnapshot(plugin);
+    storeCameraSnapshot(plugin); // store if it is not stored yet
+
+    loadInitialSnapshot(plugin); // load if there is a stored one
+    setTimeout(() => plugin.clear(), 100); // clear scene after some delay
+
 
-    const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);
-    TmDetDescriptorCache.add(pdbtmDescriptor);
+    setTimeout(async () => {
+        const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);
+        TmDetDescriptorCache.add(pdbtmDescriptor);
 
-    membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
+        membraneOrientation = createMembraneOrientation(pdbtmDescriptor);
 
-    // load structure
-    await loadStructure(plugin, params, pdbtmDescriptor);
-    // cartoon, colors etc.
-    await createStructureRepresentation(plugin, pdbtmDescriptor);
+        // load structure
+        await loadStructure(plugin, params, pdbtmDescriptor);
+        // cartoon, colors etc.
+        await createStructureRepresentation(plugin, pdbtmDescriptor);
 
-    //
-    // It also resets the camera because the membranes render 1st and the structure might not be fully visible
-    //
-    rotateCamera(plugin);
+        //
+        // It also resets the camera because the membranes render 1st and the structure might not be fully visible
+        //
+        rotateCamera(plugin);
+    }, 500);
 }
 
 async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {

src/extensions/tmdet/camera.ts

@@ -17,11 +17,8 @@ export function loadInitialSnapshot(plugin: PluginUIContext): void {
     if (!initialSnapshot) {
         DebugUtil.log('initialSnapshot is undefined');
     } else {
-        DebugUtil.log('initialSnapshot:', initialSnapshot);
+        DebugUtil.log('Loading initial snapshot:', initialSnapshot);
         PluginCommands.Camera.Reset(plugin, { snapshot: initialSnapshot });
-        DebugUtil.log('before settimeout');
-        setTimeout(() => { DebugUtil.log('in settimeout') }, 2000);
-        DebugUtil.log('after settimeout');
     }
 }
 
@@ -48,12 +45,9 @@ export async function rotateCamera(plugin: PluginUIContext) {
     };
     const duration = 100;
     PluginCommands.Camera.Reset(plugin, { snapshot: newSnapshot, durationMs: duration }).then(() => {
-        DebugUtil.log('on reset fulfill');
         setTimeout(()=> {
-            DebugUtil.log('In setTimeout');
             requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
-        }, duration * 1.5);
-        DebugUtil.log('after setTimeout');
+        }, duration + 50); // The 2nd reset needs some delay
     });
 
 }