Issue #877: load and transform with TM representation

src/TmImageRenderer/index.ts

@@ -16,14 +16,11 @@ import gl from 'gl';
 import pngjs from 'pngjs';
 import jpegjs from 'jpeg-js';
 
-import { Download, ParseCif } from '../mol-plugin-state/transforms/data';
-import { ModelFromTrajectory, StructureComponent, StructureFromModel, TrajectoryFromMmCif } from '../mol-plugin-state/transforms/model';
-import { StructureRepresentation3D } from '../mol-plugin-state/transforms/representation';
 import { HeadlessPluginContext } from '../mol-plugin/headless-plugin-context';
 import { DefaultPluginSpec } from '../mol-plugin/spec';
 import { ExternalModules, STYLIZED_POSTPROCESSING } from '../mol-plugin/util/headless-screenshot';
 import { setFSModule } from '../mol-util/data-source';
-import { MembraneOrientationPreset } from '../tmdet-extension/behavior';
+import { MembraneOrientationPreset, loadWithUNITMPMembraneRepresentation } from '../tmdet-extension/behavior';
 import { TmDetColorThemeProvider } from '../tmdet-extension/tmdet-color-theme';
 import { TmDetLabelProvider } from '../tmdet-extension/labeling';
 
@@ -45,7 +42,7 @@ function parseArguments(): Args {
 
 async function main() {
     const args = parseArguments();
-    const url = `https://www.ebi.ac.uk/pdbe/entry-files/download/${args.pdbId}.bcif`;
+    const url = `https://pdbtm.unitmp.org/api/v1/entry/${args.pdbId}.updated.cif`;
     console.log('PDB ID:', args.pdbId);
     console.log('Source URL:', url);
     console.log('Outputs:', args.outDirectory);
@@ -55,55 +52,40 @@ async function main() {
     const plugin = new HeadlessPluginContext(externalModules, DefaultPluginSpec(), { width: 800, height: 800 });
     await plugin.init();
 
-    let tree = plugin.state.behaviors.build();
 
 
+    //
+    // TMDET extension registration section
+    //
+    let tree = plugin.state.behaviors.build();
+
     plugin.builders.structure.representation.registerPreset(MembraneOrientationPreset);
     plugin.representation.structure.themes.colorThemeRegistry.add(TmDetColorThemeProvider);
     plugin.managers.lociLabels.addProvider(TmDetLabelProvider);
 
     await plugin.runTask(plugin.state.behaviors.updateTree(tree, { doNotUpdateCurrent: true, doNotLogTiming: true }));
+    await loadWithUNITMPMembraneRepresentation(plugin, {
+        structureUrl: "https://pdbtm.unitmp.org/api/v1/entry/1afo.updated.cif",
+        regionDescriptorUrl: "https://pdbtm.unitmp.org/api/v1/entry/1afo.json",
+        side1: "Outside"
+    });
+    //
+    // End of TMDET extension registration section
+    //
 
 
 
-
-    // Download and visualize data in the plugin
-    const update = plugin.build();
-    const structure = update.toRoot()
-        .apply(Download, { url, isBinary: true })
-        .apply(ParseCif)
-        .apply(TrajectoryFromMmCif)
-        .apply(ModelFromTrajectory)
-        .apply(StructureFromModel);
-    const polymer = structure.apply(StructureComponent, { type: { name: 'static', params: 'polymer' } });
-    const ligand = structure.apply(StructureComponent, { type: { name: 'static', params: 'ligand' } });
-    polymer.apply(StructureRepresentation3D, {
-        type: { name: 'cartoon', params: { alpha: 1 } },
-        colorTheme: { name: 'sequence-id', params: {} },
-    });
-    ligand.apply(StructureRepresentation3D, {
-        type: { name: 'ball-and-stick', params: { sizeFactor: 1 } },
-        colorTheme: { name: 'element-symbol', params: { carbonColor: { name: 'element-symbol', params: {} } } },
-        sizeTheme: { name: 'physical', params: {} },
-    });
-    await update.commit();
-
     // Export images
     fs.mkdirSync(args.outDirectory, { recursive: true });
-    await plugin.saveImage(path.join(args.outDirectory, 'basic.png'));
-    await plugin.saveImage(path.join(args.outDirectory, 'basic.jpg'));
-    await plugin.saveImage(path.join(args.outDirectory, 'large.png'), { width: 1600, height: 1200 });
-    await plugin.saveImage(path.join(args.outDirectory, 'large.jpg'), { width: 1600, height: 1200 });
-    await plugin.saveImage(path.join(args.outDirectory, 'stylized.png'), undefined, STYLIZED_POSTPROCESSING);
-    await plugin.saveImage(path.join(args.outDirectory, 'stylized.jpg'), undefined, STYLIZED_POSTPROCESSING);
-    await plugin.saveImage(path.join(args.outDirectory, 'stylized-compressed-jpg.jpg'), undefined, STYLIZED_POSTPROCESSING, undefined, 10);
-
-    // Export state loadable in Mol* Viewer
-    await plugin.saveStateSnapshot(path.join(args.outDirectory, 'molstar-state.molj'));
-
-    // Cleanup
-    await plugin.clear();
-    plugin.dispose();
+    setTimeout(async () => {
+            plugin.saveImage(path.join(args.outDirectory, 'stylized.jpg'), undefined, STYLIZED_POSTPROCESSING);
+            // Cleanup
+            await plugin.clear();
+            plugin.dispose();
+        },
+        5000
+    );
+
 }
 
 main();

src/tmdet-extension/behavior.ts

@@ -15,7 +15,7 @@
 
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { StructureRepresentationPresetProvider, PresetStructureRepresentations } from '../mol-plugin-state/builder/structure/representation-preset';
-import { StateObject, StateObjectRef, StateObjectCell, StateTransformer, StateTransform } from '../mol-state';
+import { StateObjectRef, StateTransformer, StateTransform, StateObjectSelector } from '../mol-state';
 import { Task } from '../mol-task';
 import { PluginBehavior } from '../mol-plugin/behavior';
 import { PluginStateObject, PluginStateTransform } from '../mol-plugin-state/objects';
@@ -29,13 +29,14 @@ import { GenericRepresentationRef } from '../mol-plugin-state/manager/structure/
 // TMDET imports
 import { MembraneOrientationRepresentationProvider, MembraneOrientationParams, MembraneOrientationRepresentation } from './representation';
 import { MembraneOrientationProvider, TmDetDescriptorCache, isTransmembrane as tmSymbol, setMembraneOrientation } from './prop';
-import { applyTransformations, createMembraneOrientation } from './transformation';
-import { ComponentsType, PDBTMDescriptor, PMS } from './types';
+import { createMembraneOrientation } from './transformation';
+import { PDBTMDescriptor, PMS } from './types';
 import { registerTmDetSymmetry } from './symmetry';
 import { TmDetLabelProvider } from './labeling';
 import { TmDetColorThemeProvider, updateSiteColors } from './tmdet-color-theme';
 //import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from './camera';
 import { DebugUtil } from './debug-utils';
+import { StateTransforms } from '../mol-plugin-state/transforms';
 
 const TMDET_MEMB_ORI_REPRESENTATION_TAG = 'tmdet-membrane-orientation-3d';
 const TMDET_MEMBRANE_ORIENTATION = 'TMDET Membrane Orientation';
@@ -150,8 +151,6 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginContext
 
         // 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
@@ -167,42 +166,6 @@ async function downloadRegionDescriptor(plugin: PluginContext, params: any): Pro
     return pdbtmDescriptor;
 }
 
-async function createStructureRepresentation(plugin: PluginContext, pdbtmDescriptor: any) {
-    // get the first structure of the first model
-    const structure: StateObjectRef<PMS> = plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
-    const components = await createStructureComponents(plugin, structure);
-
-    applyTransformations(plugin, pdbtmDescriptor);
-
-    await buildStructureRepresentation(plugin, pdbtmDescriptor, components);
-}
-
-async function createStructureComponents(plugin: PluginContext, structure: StateObjectCell<PMS, 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'),
-    };
-}
-
-async function buildStructureRepresentation(plugin: PluginContext, pdbtmDescriptor: PDBTMDescriptor, components: ComponentsType) {
-    const builder = plugin.builders.structure.representation;
-    const update = plugin.build();
-    if (components.polymer) {
-        builder.buildRepresentation(update, components.polymer, {
-                type: 'cartoon',
-                color: TmDetColorThemeProvider.name as any, colorParams: { pdbtmDescriptor }
-            },
-            { 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: PluginContext, params: any, pdbtmDescriptor: PDBTMDescriptor): Promise<void> {
 
     // replace original symmetry format function
@@ -228,6 +191,26 @@ async function loadStructure(ctx: PluginContext, params: any, pdbtmDescriptor: P
 
     const trajectory = await builders.structure.parseTrajectory(data, format);
 
+    const modelParams = { modelIndex: 0 };
+    const props = {
+        type: {
+            name: 'assembly' as const,
+            params: { id: '1' }
+        }
+    };
+
+    await ctx.state.data.build().to(trajectory)
+        .apply(StateTransforms.Model.ModelFromTrajectory, modelParams, { ref: 'model' })
+        .apply(StateTransforms.Model.StructureFromModel, props, { ref: 'assembly' })
+        .commit();
+
+    const builder = ctx.builders.structure;
+    const model = new StateObjectSelector(ctx.state.data.build().to('model').ref, ctx.state.data);
+    await builder.insertModelProperties(model.ref);
+    const structure = new StateObjectSelector(ctx.state.data.build().to('assembly').ref, ctx.state.data);
+    const structureProperties = await builder.insertStructureProperties(structure);
+    await ctx.builders.structure.representation.applyPreset<any>(structureProperties, MembraneOrientationPreset, {});
+
 
     // create membrane representation
     await builders.structure.hierarchy.applyPreset(
@@ -320,8 +303,8 @@ export const MembraneOrientationPreset = StructureRepresentationPresetProvider({
 
         const membraneOrientation = await tryCreateMembraneOrientation(plugin, structureCell);
         const colorTheme =  TmDetColorThemeProvider.name as any;
-        console.log('MembOriPreset apply params:', params);
-        console.log('MembOriPreset ref:', ref);
+        // console.log('MembOriPreset apply params:', params);
+        // console.log('MembOriPreset ref:', ref);
         const preset = await PresetStructureRepresentations.auto.apply(ref, { ...params, theme: { globalName: colorTheme, focus: { name: colorTheme } } }, plugin);
 
         return { components: preset.components, representations: { ...preset.representations, membraneOrientation } };

src/tmdet-extension/prop.ts

@@ -126,9 +126,8 @@ export const MembraneOrientationProvider: CustomStructureProperty.Provider<Membr
     },
     isApplicable: (data: Structure) => true,
     obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<MembraneOrientationProps>) => {
-        //DebugUtil.log('obtain:: DEBUG', data.customPropertyDescriptors);
-        console.log('MembraneOrientationProvider.obtain:: DEBUG descriptor:', TmDetDescriptorCache.get(data.model.entryId));
-        console.log('MembraneOrientationProvider.obtain:: DEBUG data:', data);
+        //console.log('MembraneOrientationProvider.obtain:: DEBUG descriptor:', TmDetDescriptorCache.get(data.model.entryId));
+        //console.log('MembraneOrientationProvider.obtain:: DEBUG data:', data);
         let result = membraneOrientation;
         return { value: result };
     }

src/tmdet-extension/symmetry.ts

@@ -65,7 +65,6 @@ function tmDetSymmetryFromMmCif(model: Model, pdbtmDescriptor: PDBTMDescriptor)
     console.log('Non-poly chains:', data.pdbx_nonpoly_scheme.asym_id.toArray());
 
     const updated_struct_oper_list = createPdbxStructOperList(structureOperations, data.pdbx_struct_oper_list);
-    console.log('Orig. struct oper list:', data.pdbx_struct_oper_list);
 
     return ModelSymmetry.fromData({
         symmetry: data.symmetry,

src/tmdet-extension/tmdet-color-theme.ts

@@ -204,6 +204,10 @@ export const TmDetColorThemeProvider: ColorTheme.Provider<TmDetColorThemeParams,
 // Colors from CSS rules
 
 function loadRegionColorsFromStyleSheets(prefix: string = 'ult_'): void {
+    if (typeof window === 'undefined') {
+        console.warn('There is no color load from stylesheets in non-browser environment');
+        return;
+    }
     const sheets: CSSStyleSheet[] = Array.from(document.styleSheets);
     sheets.forEach((sheet: CSSStyleSheet) => {
         const rules: CSSRule[] = Array.from(sheet.cssRules);