Issue #2: transformation issue mitigated

* Improved debugability
* Camera settings is still not working

src/apps/tm-viewer/index.html

@@ -104,6 +104,12 @@
                 viewer.plugin.clear();
                 tm_molstar.loadInitialSnapshot(viewer.plugin)
             });
+
+            // Debug section
+            var dbg = tm_molstar.DebugUtil;
+            dbg.init(viewer.plugin);
+            console.log("'dbg' object has been initialized. Functions can be accessed via it.");
+
         </script>
     </body>
 </html>

src/extensions/tmdet/behavior.ts

@@ -110,12 +110,9 @@ export const isTransmembrane = StructureSelectionQuery('Residues Embedded in Mem
 
 
 
-
-
-
-
-
+//
 // //////////////////////////// TMDET VIEWER FUNCTIONS
+//
 
 
 
@@ -139,7 +136,7 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIConte
     //
     // reset the camera because the membranes render 1st and the structure might not be fully visible
     //
-    //requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset());
+    requestAnimationFrame(() => plugin.canvas3d?.requestCameraReset({ durationMs: 1000 }));
 }
 
 async function downloadRegionDescriptor(plugin: PluginUIContext, params: any): Promise<any> {
@@ -205,24 +202,13 @@ async function loadStructure(ctx: PluginUIContext, params: any, pdbtmDescriptor:
 
 
 
-
-
+//
 // //////////////////////////// END OF TMDET VIEWER SECTION
-
 //
 
 
 
 
-
-
-
-
-
-
-
-
-
 type MembraneOrientation3DType = typeof MembraneOrientation3D
 const MembraneOrientation3D = PluginStateTransform.BuiltIn({
     name: Tag.Representation,

src/extensions/tmdet/camera.ts

@@ -20,7 +20,7 @@ export function loadInitialSnapshot(plugin: PluginUIContext): void {
     }
 }
 
-export function rotateCamera(plugin: PluginUIContext): void {
+export function rotateCamera(plugin: PluginUIContext) {
     function rot90q(v: Vec3, axis: Vec3 = Vec3.create(1, 0, 0)): Vec3 {
         const q = Quat.setAxisAngle(Quat(), axis, -Math.PI/2);
         return Vec3.transformQuat(Vec3(), v, q);
@@ -44,5 +44,4 @@ export function rotateCamera(plugin: PluginUIContext): void {
     };
 
     PluginCommands.Camera.Reset(plugin, { snapshot: newSnapshot, durationMs: 1000 });
-    //requestAnimationFrame(() => this.plugin.canvas3d?.requestCameraReset({ snapshot: newSnapshot }));
 }

src/extensions/tmdet/coloring.ts

@@ -19,8 +19,8 @@ export const StripedResidues = CustomElementProperty.create<number>({
     label: 'TMDet Topology Colors',
     name: 'tmdet-topology-colors',
     getData(model: Model) {
-        console.log('getData', model.atomicHierarchy.residueAtomSegments);
-        console.log('getData: auth_comp_id', model.atomicHierarchy.atoms.auth_comp_id.toArray());
+        // console.log('getData', model.atomicHierarchy.residueAtomSegments);
+        // console.log('getData: auth_comp_id', model.atomicHierarchy.atoms.auth_comp_id.toArray());
         const map = new Map<ElementIndex, number>();
         const residueIndex = model.atomicHierarchy.residueAtomSegments.index;
         for (let i = 0, _i = model.atomicHierarchy.atoms._rowCount; i < _i; i++) {
@@ -28,7 +28,7 @@ export const StripedResidues = CustomElementProperty.create<number>({
             const value = (residueId === 310) ? 2 : residueId % 2;
             map.set(i as ElementIndex, value);
         }
-        console.log('map', map);
+        // console.log('map', map);
         return { value: map };
     },
     coloring: {

src/extensions/tmdet/debug-utils.ts

@@ -3,8 +3,13 @@ import { Mat4, Vec3 } from "../../mol-math/linear-algebra";
 import { MmcifFormat } from "../../mol-model-formats/structure/mmcif";
 import { Model } from "../../mol-model/structure";
 import { AtomicConformation } from "../../mol-model/structure/model/properties/atomic";
+import { createStructureRepresentationParams } from "../../mol-plugin-state/helpers/structure-representation-params";
+import { StateTransforms } from "../../mol-plugin-state/transforms";
 import { PluginUIContext } from "../../mol-plugin-ui/context";
-import { transformationForStateTransform } from "./transformation";
+import { Expression } from "../../mol-script/language/expression";
+import { Color } from "../../mol-util/color";
+import { TmDetDescriptorCache } from "./prop";
+import { getChainExpression as GCE, getCurrentHierarchy as GCH, transformationForStateTransform, transformWholeModel } from "./transformation";
 import { PDBTMTransformationMatrix } from "./types";
 
 export namespace DebugUtil {
@@ -33,9 +38,18 @@ export namespace DebugUtil {
     // structure utils
     //
 
+    export const getChainExpression = GCE;
 
     export function getCellOfFirstStructure() {
-        return plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
+        return getCell();
+    }
+
+    export function getCell(structureIndex: number = 0, modelIndex: number = 0) {
+        return getCurrentHierarchy().models[structureIndex].structures[modelIndex].cell;
+    }
+
+    export function getCurrentHierarchy() {
+        return GCH(plugin);
     }
 
     export function getModelOfFirstStructure() {
@@ -81,4 +95,39 @@ export namespace DebugUtil {
             }
         }
     }
+
+
+    export function getCachesOfEachStructure() {
+        let sIndex = 0;
+        getCurrentHierarchy().structures.forEach(struct => {
+            let cIndex = 0;
+            struct.components.forEach(component => {
+                console.log(`struct: ${sIndex}; component: ${cIndex}`, component.cell.cache);
+                cIndex++;
+            });
+            sIndex++;
+        });
+    }
+
+    export function color(expression: Expression, color: number[], structureIndex: number = 0, modelIndex: number = 0) {
+        const structure = getCell(structureIndex, modelIndex);
+        const stateBuilder = plugin.build().to(structure);
+        stateBuilder.apply(
+            StateTransforms.Model.StructureSelectionFromExpression,
+            { expression: expression }
+        )
+        .apply(
+            StateTransforms.Representation.StructureRepresentation3D,
+            createStructureRepresentationParams(plugin, structure.obj?.data, {
+                type: 'ball-and-stick',
+                color: 'uniform', colorParams: { value: Color.fromArray(color, 0) }
+            })
+        );
+        stateBuilder.commit();
+    }
+
+    export function transform(entityId: string) {
+        const tmx = TmDetDescriptorCache.get(entityId)?.additional_entry_annotations.membrane.transformation_matrix;
+        transformWholeModel(plugin, tmx!);
+    }
 }

src/extensions/tmdet/prop.ts

@@ -97,14 +97,14 @@ export const MembraneOrientationProvider: CustomStructureProperty.Provider<Membr
     defaultParams: MembraneOrientationParams,
 //    getParams: (data: Structure) => MembraneOrientationParams,
     getParams: function(data: Structure) {
-        window.console.log('getParams:: DEBUG', MembraneOrientationParams);
+        //window.console.log('getParams:: DEBUG', MembraneOrientationParams);
         return MembraneOrientationParams;
     },
     isApplicable: (data: Structure) => true,
     obtain: async (ctx: CustomProperty.Context, data: Structure, props: Partial<MembraneOrientationProps>) => {
-        window.console.log('obtain:: DEBUG', data.customPropertyDescriptors);
+        //window.console.log('obtain:: DEBUG', data.customPropertyDescriptors);
         let result = membraneOrientation;
-        console.log("RESULT of 'obtain:'", result);
+        //console.log("RESULT of 'obtain:'", result);
         return { value: result };
     }
 });

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

@@ -30,7 +30,6 @@ export function TmDetColorTheme(
     if (pdbtmDescriptor) {
         descriptorChains = pdbtmDescriptor.chains;
     }
-    console.log('TmDetColorTheme dataCtx & chains', ctx, descriptorChains);
 
     return {
         factory: TmDetColorTheme,
@@ -70,7 +69,6 @@ function getColor(location: Location, chains: PDBTMChain[]): Color {
         const chainId = atomicHierarchy.chains.auth_asym_id.value(chainIdx).toString();
 
         color = residueColor(chainList, chainId, authId);
-        //console.log(`chain: ${chainId} res: ${authId}`);
     }
     return color;
 }
@@ -120,7 +118,7 @@ export const TmDetColorThemeProvider: ColorTheme.Provider<TmDetColorThemeParams,
     label: 'TMDet Topology Theme',
     category: 'TMDet',
     factory: TmDetColorTheme,
-    getParams: (ctx: ThemeDataContext) => ({ pdbtmDescriptor: { isOptional: true } }),
+    getParams: () => ({ pdbtmDescriptor: { isOptional: true } }),
     defaultValues: { pdbtmDescriptor: undefined },
     isApplicable: () => true,
 };

src/extensions/tmdet/transformation.ts

@@ -12,72 +12,99 @@ import { TmDetColorThemeProvider } from './tmdet-color-theme';
 export async function applyTransformations(plugin: PluginUIContext, pdbtmDescriptor: PDBTMDescriptor) {
     const annotations = pdbtmDescriptor.additional_entry_annotations;
 
-    console.log('BIOMX', annotations.biomatrix);
+    const membraneTransformation = transformationForStateTransform(pdbtmDescriptor.additional_entry_annotations.membrane.transformation_matrix);
+
     if (annotations.biomatrix) {
         annotations.biomatrix.matrix_list.forEach(function(mx) {
-            mx.apply_to_chain_list.forEach(function(chainPair) {
+            mx.apply_to_chain_list.forEach(async function(chainPair) {
                 let id  = chainPair.chain_id;
-                chainTransformation(plugin, pdbtmDescriptor, mx.transformation_matrix, id);
+                let newId = chainPair.new_chain_id;
+                const mtx = transformationForStateTransform(mx.transformation_matrix);
+                const composedTransformation = Mat4.mul(Mat4(), membraneTransformation, mtx);
+                chainTransformation(plugin, composedTransformation, id, newId);
+                // await plugin.runTask(Task.create(`TMDET: Transform '${id}' into '${newId}'`, async () => {
+                //     chainTransformation(plugin, mx.transformation_matrix, id, newId);
+                // }));
             });
         });
     }
 
-    // membrane transformation
-    const membraneTransformation = transformationForStateTransform(pdbtmDescriptor.additional_entry_annotations.membrane.transformation_matrix);
-    const structure: StateObjectRef<PMS> = plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
-    const update: StateBuilder.To<any, any> = plugin.build().to(structure);
+    transformWholeModel(plugin, pdbtmDescriptor.additional_entry_annotations.membrane.transformation_matrix);
+    // await plugin.runTask(Task.create(`TMDET: Apply membrane transformation`, async () => {
+    //     transformWholeModel(plugin, pdbtmDescriptor.additional_entry_annotations.membrane.transformation_matrix);
+    // }));
 
-    update
-        .apply(StateTransforms.Model.TransformStructureConformation, {
-            "transform": { name: "matrix", params: { data: membraneTransformation, transpose: false } }
-        })
-        .apply(
-            StateTransforms.Representation.StructureRepresentation3D,
-            createStructureRepresentationParams(plugin, structure.obj?.data, {
-                type: 'cartoon',
-                color: TmDetColorThemeProvider.name as any, colorParams: { pdbtmDescriptor }
-            })
-        );
-    update.commit();
+}
 
+export function transformWholeModel(plugin: PluginUIContext, membraneMatrix: PDBTMTransformationMatrix) {
+    //
+    // membrane transformation
+    //
+    const membraneTransformation = transformationForStateTransform(membraneMatrix);
+
+    // transform each component
+    console.log("STRUCTURES", getCurrentHierarchy(plugin).structures);
+    getCurrentHierarchy(plugin).structures[0].components.forEach(component => {
+        const structure: StateObjectRef<PMS> = component.cell;
+        const update: StateBuilder.To<any, any> = plugin.build().to(structure);
+
+        const label = component.cell.obj!.label.toUpperCase();
+        console.log("memb.transform of ", label, component.cell.obj?.id);
+        // console.log(`${label} component.cell.obj:`, component.cell.obj);
+        // console.log(`${label} component:`, component);
+
+        update
+            .apply(StateTransforms.Model.TransformStructureConformation, {
+                "transform": { name: "matrix", params: { data: membraneTransformation, transpose: false } }
+            })
+            .apply(
+                StateTransforms.Representation.StructureRepresentation3D,
+                createStructureRepresentationParams(plugin, structure.obj?.data, {
+                    type: 'cartoon',
+                    color: TmDetColorThemeProvider.name as any //, colorParams: { pdbtmDescriptor }
+                })
+            );
+        update.commit();
+    });
 }
 
 /**
- * Sets color of specified chain to red.
+ * Perform transformation on a chain.
  *
  * @param plugin UI context
- * @param pdbtmDescriptor TM-specific information
  * @param transformationMatrix 4x4 matrix describes transformation and translation
  * @param chainId Id of chain to be selected for transformation
  */
- export function chainTransformation(plugin: PluginUIContext, pdbtmDescriptor: PDBTMDescriptor, transformationMatrix: PDBTMTransformationMatrix, chainId: string): void {
+export function chainTransformation(plugin: PluginUIContext, transformationMatrix: Mat4, chainId: string, newId: string): void {
     const query: Expression = getChainExpression(chainId);
 
-    const transformation = transformationForStateTransform(transformationMatrix);
+//    const transformation = transformationForStateTransform(transformationMatrix);
+    const transformation = transformationMatrix;
     const structure: StateObjectRef<PMS> = plugin.managers.structure.hierarchy.current.models[0].structures[0].cell;
     const update: StateBuilder.To<any, any> = plugin.build().to(structure);
 
     update
         .apply(
             StateTransforms.Model.StructureSelectionFromExpression,
-            { label: chainId, expression: query }
+            { label: newId, expression: query }
         )
         .apply(StateTransforms.Model.TransformStructureConformation, {
             "transform": { name: "matrix", params: { data: transformation, transpose: false } }
         })
         .apply(
             StateTransforms.Representation.StructureRepresentation3D,
-            createStructureRepresentationParams(plugin, update.selector.data, {
+            createStructureRepresentationParams(plugin, structure.obj?.data, {
                 type: 'cartoon',
-                color: TmDetColorThemeProvider.name as any, colorParams: { pdbtmDescriptor }
+                color: TmDetColorThemeProvider.name as any //, colorParams: { pdbtmDescriptor }
             })
         );
     update.commit();
+    console.log(`${chainId}->${newId} DONE`);
 }
 
-function vadd(a: Vec3, b: Vec3): Vec3 {
-    return Vec3.add(Vec3.zero(), a, b);
-}
+// function vadd(a: Vec3, b: Vec3): Vec3 {
+//     return Vec3.add(Vec3.zero(), a, b);
+// }
 
 function vneg(u: Vec3): Vec3 {
     return Vec3.negate(Vec3.zero(), u);
@@ -136,3 +163,7 @@ export function getChainExpression(chainId: string): Expression {
         });
     return query;
 }
+
+export function getCurrentHierarchy(plugin: PluginUIContext) {
+    return plugin.managers.structure.hierarchy.current;
+}