Issue #1: refactoring load function of viewer

src/apps/viewer/index.html

@@ -55,18 +55,12 @@
             });
 
             // Set PDB Id here
-            var regionDescriptors = {"pdb-id":"1afo","creation-date":"2021-09-03","is-transmembrane":1,"membrane-normal":{"x":0,"y":0,"z":17.5},"chains":[{"chain_id":"A","type":"alpha","seq":"VQLAHHFSEPEITLIIFGVMAGVIGTILLISYGIRRLIKK","regions":{"1":{"auth_ids":[62,63,64,65,66,67,68,69,70,71,72,73],"color":[255,0,0]},"H":{"auth_ids":[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95],"color":[255,255,0]},"2":{"auth_ids":[96,97,98,99,100,101],"color":[0,0,255]}}},{"chain_id":"B","type":"alpha","seq":"VQLAHHFSEPEITLIIFGVMAGVIGTILLISYGIRRLIKK","regions":{"1":{"auth_ids":[62,63,64,65,66,67,68,69,70,71,72,73],"color":[255,0,0]},"H":{"auth_ids":[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],"color":[255,255,0]},"2":{"auth_ids":[100,101],"color":[0,0,255]}}}]};
-            var pdbtmId = regionDescriptors["pdb-id"];
-            regionDescriptors.format = 'mmcif'
+            var pdbId = '1afo';
             function loadPdb() {
-                viewer.loadWithUNITMPMembraneRepresentation(
-                    // NOTE: Prepare CORS settings appropriately on backend
-                    //       or made this index.html accessible from the same
-                    //       origin (DOMAIN:PORT values).
-                    //`https://DOMAIN[:PORT]/api/pdbtm/${pdbtmId}/trpdb`,
-                    `https://cs.litemol.org/${pdbtmId}/full`,
-                    regionDescriptors
-                );
+                viewer.loadWithUNITMPMembraneRepresentation({
+                    structureUrl: `https://cs.litemol.org/${pdbId}/full`,
+                    regionDescriptorUrl: `http://localhost:8080/${pdbId}_regions.php`,
+                });
             }
         </script>
     </body>

src/apps/viewer/index.ts

@@ -13,7 +13,7 @@ import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
 import { DefaultPluginUISpec, PluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginConfig } from '../../mol-plugin/config';
 import { PluginSpec } from '../../mol-plugin/spec';
-import { StateBuilder, StateObjectRef } from '../../mol-state';
+import { StateBuilder, StateObject, StateObjectCell, StateObjectRef, StateTransform, StateTransformer } from '../../mol-state';
 import { Color } from '../../mol-util/color';
 import '../../mol-util/polyfill';
 import { ObjectKeys } from '../../mol-util/type-helpers';
@@ -27,6 +27,7 @@ import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { MembraneOrientation } from '../../extensions/tmdet/prop';
 import { MEMBRANE_STORAGE_KEY } from '../../extensions/tmdet/algorithm';
 import { Vec3 } from '../../mol-math/linear-algebra';
+import { StateObjectSelector } from "../../mol-state/object";
 
 require('mol-plugin-ui/skin/light.scss');
 
@@ -63,7 +64,11 @@ const DefaultViewerOptions = {
     emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
 };
 type ViewerOptions = typeof DefaultViewerOptions;
-
+type StructureComponentType = StateObjectSelector<
+        PluginStateObject.Molecule.Structure,
+        StateTransformer<StateObject<any, StateObject.Type<any>>,
+        StateObject<any, StateObject.Type<any>>, any>
+    > | undefined;
 
 export let membrane: MembraneOrientation;
 
@@ -76,72 +81,106 @@ export class Viewer {
 
     // //////////////////////////// UNITMP VIEWER PROTOTYPING SECTION
 
-    async loadWithUNITMPMembraneRepresentation(url: string, regionDescriptors: any) {
-        const membraneNormal: Vec3 = Vec3.fromObj(
-            regionDescriptors['membrane-normal']
-        );
-        membraneNormal[0] = membraneNormal[2];
-        membraneNormal[2] = 0;
-
-        console.log('DEBUG-01', membraneNormal);
-        const membrane: MembraneOrientation = {
-            planePoint1: Vec3.fromArray(Vec3.zero(), membraneNormal, 0),
-            planePoint2: Vec3.fromArray(Vec3.zero(), membraneNormal, 0),
-            centroid: Vec3.fromArray(
-                Vec3.zero(), [ 0, 0, 0 ], 0
-            ),
-            normalVector: membraneNormal,
-
-            // (NOTE: the TMDET extension calculates and sets it during applying preset)
-            radius: regionDescriptors[ 'radius' ]
-        };
-        membrane.planePoint2[0] *= -1;
+    async loadWithUNITMPMembraneRepresentation(params: any) {
+        const regionDescriptors: any = await this.downloadRegionDescriptor(params);
 
+        membrane = this.createMembraneOrientation(regionDescriptors);
 
         console.log('DEBUG-02', membrane.planePoint2);
 
         localStorage.setItem(MEMBRANE_STORAGE_KEY, JSON.stringify(membrane));
 
-        const isBinary = false;
+        // load structure
+        await this.loadStructure(params, regionDescriptors);
 
-        const data = await this.plugin.builders.data.download({
-            url, label: `UniTMP: ${regionDescriptors['pdb-id']}`, isBinary
-        }); // , { state: { isGhost: true } });
-        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, regionDescriptors.format);
-        // create membrane representation
-        await this.plugin.builders.structure.hierarchy.applyPreset(
-            trajectory, 'default', { representationPreset: 'preset-membrane-orientation' as any });
+        await this.createStructureRepresentation(regionDescriptors);
+
+        //
+        // reset the camera because the membranes render 1st and the structure might not be fully visible
+        //
+        requestAnimationFrame(() => this.plugin.canvas3d?.requestCameraReset());
+    }
+
+    private async downloadRegionDescriptor(params: any): Promise<any> {
+        const ctx = this.plugin;
+        // download
+        const downloadResult: string = await ctx.runTask(ctx.fetch({ url: params.regionDescriptorUrl })) as string;
+        const regionDescriptors: any = JSON.parse(downloadResult);
+        return regionDescriptors;
+    }
+
+    private async createStructureRepresentation(regionDescriptors: any) {
+        // get the first structure of the first model
+        const structure: StateObjectRef<PluginStateObject.Molecule.Structure> = this.plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
+        const components = await this.createStructureComponents(structure);
+
+        await this.buildStructureRepresentation(components);
+
+        regionDescriptors.chains.forEach((chain: any) => {
+
+            for (let regionKey in chain.regions) {
+                const regionUpdates = this.plugin.build();
+                const region = chain.regions[regionKey];
+                this.createRegionRepresentation(chain.chain_id, region, regionUpdates.to(structure));
+                regionUpdates.commit();
+            }
+
+        });
+    }
 
-        const structure: StateObjectRef<PluginStateObject.Molecule.Structure> =
-            this.plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
-        const components = {
+    private async createStructureComponents(structure: StateObjectCell<PluginStateObject.Molecule.Structure, StateTransform<StateTransformer<StateObject<any, StateObject.Type<any>>, StateObject<any, StateObject.Type<any>>, any>>>) {
+        return {
             polymer: await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'polymer'),
             ligand: await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'ligand'),
             water: await this.plugin.builders.structure.tryCreateComponentStatic(structure, 'water'),
         };
+    }
 
+    private async buildStructureRepresentation(components: { polymer: StructureComponentType; ligand: StructureComponentType; water: StructureComponentType }) {
         const builder = this.plugin.builders.structure.representation;
         const update = this.plugin.build();
-        if (components.polymer) builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { alpha: 0.5 } }, { tag: 'polymer' });
-        if (components.ligand) builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick' }, { tag: 'ligand' });
-        if (components.water) builder.buildRepresentation(update, components.water, { type: 'ball-and-stick', typeParams: { alpha: 0.6 } }, { tag: 'water' });
+        if (components.polymer)
+            builder.buildRepresentation(update, components.polymer, { type: 'cartoon', typeParams: { alpha: 0.5 } }, { tag: 'polymer' });
+        if (components.ligand)
+            builder.buildRepresentation(update, components.ligand, { type: 'ball-and-stick' }, { tag: 'ligand' });
+        if (components.water)
+            builder.buildRepresentation(update, components.water, { type: 'ball-and-stick', typeParams: { alpha: 0.6 } }, { tag: 'water' });
         await update.commit();
+    }
 
-        regionDescriptors.chains.forEach((chain: any) => {
+    private createMembraneOrientation(regionDescriptors: any): MembraneOrientation {
+        const membraneNormal: Vec3 = Vec3.fromObj(
+            regionDescriptors['membrane-normal']
+        );
+        membraneNormal[0] = membraneNormal[2];
+        membraneNormal[2] = 0;
 
-            for(let regionKey in chain.regions) {
-                const update = this.plugin.build();
-                const region = chain.regions[regionKey];
-                this.createRegionRepresentation(chain.chain_id, region, update.to(structure));
-                update.commit();
-            }
+        const membraneOrientation: MembraneOrientation = {
+            planePoint1: Vec3.fromArray(Vec3.zero(), membraneNormal, 0),
+            planePoint2: Vec3.fromArray(Vec3.zero(), membraneNormal, 0),
+            centroid: Vec3.fromArray(
+                Vec3.zero(), [0, 0, 0], 0
+            ),
+            normalVector: membraneNormal,
 
-        });
+            // (NOTE: the TMDET extension calculates and sets it during applying preset)
+            radius: regionDescriptors['radius']
+        };
+        membraneOrientation.planePoint2[0] *= -1;
+        return membraneOrientation;
+    }
 
-        //
-        // reset the camera because the membranes render 1st and the structure might not be fully visible
-        //
-        requestAnimationFrame(() => this.plugin.canvas3d?.requestCameraReset());
+    private async loadStructure(params: any, regionDescriptors: any) {
+        const builders = this.plugin.builders;
+        const data = await builders.data.download({
+            url: params.structureUrl,
+            label: `UniTMP: ${regionDescriptors['pdb-id']}`,
+            isBinary: false
+        }); // , { state: { isGhost: true } });
+        const trajectory = await builders.structure.parseTrajectory(data, 'mmcif');
+        // create membrane representation
+        await builders.structure.hierarchy.applyPreset(
+            trajectory, 'default', { representationPreset: 'preset-membrane-orientation' as any });
     }
 
     private createRegionRepresentation(chain: string, region: any, update: StateBuilder.To<any, any>) {

src/extensions/tmdet/prop.ts

@@ -51,7 +51,7 @@ namespace MembraneOrientation {
                 const membraneOrientation = MembraneOrientationProvider.get(structure).value;
                 if (!membraneOrientation) return 0;
                 Vec3.set(pos, x(ctx.element), y(ctx.element), z(ctx.element));
-                const { normalVector, planePoint1, planePoint2 } = membraneOrientation!;
+                const { normalVector, planePoint1, planePoint2 } = membraneOrientation;
                 return isInMembranePlane(pos, normalVector, planePoint1, planePoint2);
             })
     };
@@ -70,11 +70,11 @@ export const MembraneOrientationProvider: CustomStructureProperty.Provider<Membr
     isApplicable: (data: Structure) => true,
     obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<MembraneOrientationProps>) => {
         const p = { ...PD.getDefaultValues(MembraneOrientationParams), ...props };
-        return { value: await computeAnvil(ctx, data, p) };
+        return { value: await compute(ctx, data, p) };
     }
 });
 
-async function computeAnvil(ctx: CustomProperty.Context, data: Structure, props: Partial<TMDETProps>): Promise<MembraneOrientation> {
+async function compute(ctx: CustomProperty.Context, data: Structure, props: Partial<TMDETProps>): Promise<MembraneOrientation> {
     const p = { ...PD.getDefaultValues(TMDETParams), ...props };
-    return await computeTMDET(data, p).runInContext(ctx.runtime);
+    return computeTMDET(data, p).runInContext(ctx.runtime);
 }