Issue #1: load functions moved into extension file

src/apps/viewer/index.html

@@ -57,7 +57,7 @@
             // Set PDB Id here
             var pdbId = '1afo';
             function loadPdb() {
-                viewer.loadWithUNITMPMembraneRepresentation({
+                molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
                     structureUrl: `https://cs.litemol.org/${pdbId}/full`,
                     regionDescriptorUrl: `http://localhost:8080/${pdbId}_regions.php`,
                 });

src/apps/viewer/index.ts

@@ -6,33 +6,23 @@
  */
 
 import { TMDETMembraneOrientation } from '../../extensions/tmdet/behavior';
-import { StateTransforms } from '../../mol-plugin-state/transforms';
 import { createPlugin } from '../../mol-plugin-ui';
 import { PluginUIContext } from '../../mol-plugin-ui/context';
 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, 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';
 import './embedded.html';
 import './favicon.ico';
 import './index.html';
-import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
-import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
-import { Expression } from '../../mol-script/language/expression';
-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');
 
 export { PLUGIN_VERSION as version } from '../../mol-plugin/version';
 export { setDebugMode, setProductionMode } from '../../mol-util/debug';
+export { loadWithUNITMPMembraneRepresentation } from '../../extensions/tmdet/behavior';
 
 const Extensions = {
     'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
@@ -64,155 +54,10 @@ 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;
 
 export class Viewer {
     plugin: PluginUIContext
 
-
-
-
-
-    // //////////////////////////// UNITMP VIEWER PROTOTYPING SECTION
-
-    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));
-
-        // load structure
-        await this.loadStructure(params, regionDescriptors);
-
-        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();
-            }
-
-        });
-    }
-
-    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' });
-        await update.commit();
-    }
-
-    private createMembraneOrientation(regionDescriptors: any): MembraneOrientation {
-        const membraneNormal: Vec3 = Vec3.fromObj(
-            regionDescriptors['membrane-normal']
-        );
-        membraneNormal[0] = membraneNormal[2];
-        membraneNormal[2] = 0;
-
-        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;
-    }
-
-    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>) {
-        const regionLabel: string = `${chain} | ${region.name}`;
-        const color: Color = Color.fromArray(region.color, 0);
-        const query: Expression = this.getQuery(chain, region.auth_ids as number[]);
-
-        // based on https://github.com/molstar/molstar/issues/209
-        update
-            .apply(StateTransforms.Model.StructureSelectionFromExpression, { label: regionLabel, expression: query })
-            .apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, update.selector.data, {
-                color: 'uniform',
-                colorParams: { value: color }
-            }));
-    }
-
-    private getQuery(chainId: string, auth_array: number[]): Expression {
-        const query: Expression =
-            MS.struct.generator.atomGroups({
-                'residue-test': MS.core.set.has([MS.set( ...auth_array ), MS.ammp('auth_seq_id')]),
-                'chain-test': MS.core.rel.eq([chainId, MS.ammp('label_asym_id')])
-            });
-        return query;
-    }
-
-    // //////////////////////////// END OF PROTOTYPING SECTION
-
-
-
-
-
-
     constructor(elementOrId: string | HTMLElement, options: Partial<ViewerOptions> = {}) {
         const o = { ...DefaultViewerOptions, ...options };
         const defaultSpec = DefaultPluginUISpec();
@@ -271,6 +116,7 @@ export class Viewer {
             : elementOrId;
         if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);
         this.plugin = createPlugin(element, spec);
+
     }
 
     handleResize() {

src/extensions/tmdet/algorithm.ts

@@ -49,16 +49,9 @@ export const TMDETParams = {
 export type TMDETParams = typeof TMDETParams
 export type TMDETProps = PD.Values<TMDETParams>
 
-/**
- * Implements:
- * Membrane positioning for high- and low-resolution protein structures through a binary classification approach
- * Guillaume Postic, Yassine Ghouzam, Vincent Guiraud, and Jean-Christophe Gelly
- * Protein Engineering, Design & Selection, 2015, 1–5
- * doi: 10.1093/protein/gzv063
- */
 export function computeTMDET(structure: Structure, props: TMDETProps) {
     return Task.create('Compute Membrane Orientation', async runtime => {
-        return await calculate(runtime, structure, props);
+        return calculate(runtime, structure, props);
     });
 }
 

src/extensions/tmdet/behavior.ts

@@ -8,7 +8,7 @@
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { StructureRepresentationPresetProvider, PresetStructureRepresentations } from '../../mol-plugin-state/builder/structure/representation-preset';
 import { MembraneOrientationProvider, MembraneOrientation } from './prop';
-import { StateObjectRef, StateTransformer, StateTransform } from '../../mol-state';
+import { StateObject, StateObjectRef, StateObjectCell, StateTransformer, StateTransform, StateBuilder } from '../../mol-state';
 import { Task } from '../../mol-task';
 import { PluginBehavior } from '../../mol-plugin/behavior';
 import { MembraneOrientationRepresentationProvider, MembraneOrientationParams, MembraneOrientationRepresentation } from './representation';
@@ -19,6 +19,15 @@ import { DefaultQueryRuntimeTable } from '../../mol-script/runtime/query/compile
 import { StructureSelectionQuery, StructureSelectionCategory } from '../../mol-plugin-state/helpers/structure-selection-query';
 import { MolScriptBuilder as MS } from '../../mol-script/language/builder';
 import { GenericRepresentationRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
+import { Expression } from '../../mol-script/language/expression';
+import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { Color } from '../../mol-util/color';
+import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
+import { PluginUIContext } from '../../mol-plugin-ui/context';
+import { StateObjectSelector } from "../../mol-state/object";
+import { MEMBRANE_STORAGE_KEY } from '../../extensions/tmdet/algorithm';
+import { Vec3 } from '../../mol-math/linear-algebra';
+
 
 const Tag = MembraneOrientation.Tag;
 
@@ -94,6 +103,143 @@ export const isTransmembrane = StructureSelectionQuery('Residues Embedded in Mem
     }
 });
 
+// //////////////////////////// TMDET VIEWER FUNCTIONS
+
+let membrane: MembraneOrientation;
+
+
+export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIContext, params: any) {
+    const regionDescriptors: any = await downloadRegionDescriptor(plugin, params);
+
+    membrane = createMembraneOrientation(regionDescriptors);
+
+    console.log('DEBUG-02', membrane.planePoint2);
+
+    localStorage.setItem(MEMBRANE_STORAGE_KEY, JSON.stringify(membrane));
+
+    // load structure
+    await loadStructure(plugin, params, regionDescriptors);
+
+    await createStructureRepresentation(plugin, regionDescriptors);
+
+    //
+    // reset the camera because the membranes render 1st and the structure might not be fully visible
+    //
+    requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
+}
+
+function createMembraneOrientation(regionDescriptors: any): MembraneOrientation {
+    const membraneNormal: Vec3 = Vec3.fromObj(
+        regionDescriptors['membrane-normal']
+    );
+    membraneNormal[0] = membraneNormal[2];
+    membraneNormal[2] = 0;
+
+    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;
+}
+
+async function createStructureRepresentation(plugin: PluginUIContext, regionDescriptors: any) {
+    // get the first structure of the first model
+    const structure: StateObjectRef<PluginStateObject.Molecule.Structure> = plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
+    const components = await createStructureComponents(plugin, structure);
+
+    await buildStructureRepresentation(plugin, components);
+
+    regionDescriptors.chains.forEach((chain: any) => {
+
+        for (let regionKey in chain.regions) {
+            const regionUpdates = plugin.build();
+            const region = chain.regions[regionKey];
+            createRegionRepresentation(plugin, chain.chain_id, region, regionUpdates.to(structure));
+            regionUpdates.commit();
+        }
+
+    });
+}
+
+async function createStructureComponents(plugin: PluginUIContext, structure: StateObjectCell<PluginStateObject.Molecule.Structure, StateTransform<StateTransformer<StateObject<any, StateObject.Type<any>>, StateObject<any, StateObject.Type<any>>, any>>>) {
+    return {
+        polymer: await plugin.builders.structure.tryCreateComponentStatic(structure, 'polymer'),
+        ligand: await plugin.builders.structure.tryCreateComponentStatic(structure, 'ligand'),
+        water: await plugin.builders.structure.tryCreateComponentStatic(structure, 'water'),
+    };
+}
+
+function createRegionRepresentation(plugin: PluginUIContext, chain: string, region: any, update: StateBuilder.To<any, any>) {
+    const regionLabel: string = `${chain} | ${region.name}`;
+    const color: Color = Color.fromArray(region.color, 0);
+    const query: Expression = getQuery(chain, region.auth_ids as number[]);
+
+    // based on https://github.com/molstar/molstar/issues/209
+    update
+        .apply(StateTransforms.Model.StructureSelectionFromExpression, { label: regionLabel, expression: query })
+        .apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(plugin, update.selector.data, {
+            color: 'uniform',
+            colorParams: { value: color }
+        }));
+}
+
+type StructureComponentType = StateObjectSelector<
+        PluginStateObject.Molecule.Structure,
+        StateTransformer<StateObject<any, StateObject.Type<any>>,
+        StateObject<any, StateObject.Type<any>>, any>
+    > | undefined;
+
+async function buildStructureRepresentation(plugin: PluginUIContext, components: { polymer: StructureComponentType; ligand: StructureComponentType; water: StructureComponentType }) {
+    const builder = plugin.builders.structure.representation;
+    const update = 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' });
+    await update.commit();
+}
+
+async function loadStructure(ctx: PluginUIContext, params: any, regionDescriptors: any): Promise<void> {
+    const builders = ctx.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 });
+}
+
+function getQuery(chainId: string, auth_array: number[]): Expression {
+    const query: Expression =
+        MS.struct.generator.atomGroups({
+            'residue-test': MS.core.set.has([MS.set( ...auth_array ), MS.ammp('auth_seq_id')]),
+            'chain-test': MS.core.rel.eq([chainId, MS.ammp('label_asym_id')])
+        });
+    return query;
+}
+
+async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {
+    // run a fetch task
+    const downloadResult: string = await plugin.runTask(plugin.fetch({ url: params.regionDescriptorUrl })) as string;
+    const regionDescriptors: any = JSON.parse(downloadResult);
+    return regionDescriptors;
+}
+
+// //////////////////////////// END OF TMDET VIEWER SECTION
+
 //
 
 export { MembraneOrientation3D };

src/extensions/tmdet/prop.ts

@@ -66,10 +66,15 @@ export const MembraneOrientationProvider: CustomStructureProperty.Provider<Membr
     }),
     type: 'root',
     defaultParams: MembraneOrientationParams,
-    getParams: (data: Structure) => MembraneOrientationParams,
+//    getParams: (data: Structure) => MembraneOrientationParams,
+    getParams: function(data: Structure) {
+        window.console.log('getParams:: DEBUG', MembraneOrientationParams);
+        return MembraneOrientationParams;
+    },
     isApplicable: (data: Structure) => true,
     obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<MembraneOrientationProps>) => {
         const p = { ...PD.getDefaultValues(MembraneOrientationParams), ...props };
+        window.console.log('obtain:: DEBUG', data.customPropertyDescriptors);
         return { value: await compute(ctx, data, p) };
     }
 });