Issue #2: labeling

src/apps/tm-viewer/index.html

@@ -90,13 +90,14 @@
             }
 
             let idList = [
-                '1afo', // TODO: something is wrong with the rotation
-                '1a0s', // TODO: wrong rotation
+                '1afo', // PASSED
+                '1a0s', // PASSED
                 '2atk', // PASSED
                 '1xl4', // PASSED
                 '1xl6', // PASSED
-                '4x8a', // TODO: something is very wrong with membrane planes
-                '6xvf', // TODO: something is very wrong with membrane planes
+                '4x8a', // PASSED
+                '6xvf', // TODO: slightly wrong membrane planes:
+                        // their angle with Z-axis is not 90
             ];
             idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));
             addControl('Reset', () => {

src/extensions/tmdet/behavior.ts

@@ -26,7 +26,7 @@ import { MembraneOrientationProvider, MembraneOrientation, TmDetDescriptorCache
 import { applyTransformations, createMembraneOrientation } from './transformation';
 import { ComponentsType, PDBTMDescriptor, PMS } from './types';
 import { registerTmDetSymmetry } from './symmetry';
-import { StripedResidues } from './coloring';
+import { LabeledResidues } from './labeling';
 import { TmDetColorThemeProvider } from './tmdet-color-theme';
 import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from './camera';
 
@@ -53,10 +53,9 @@ export const TMDETMembraneOrientation = PluginBehavior.create<{ autoAttach: bool
             this.ctx.representation.structure.registry.add(MembraneOrientationRepresentationProvider);
             this.ctx.query.structure.registry.add(isTransmembrane);
 
-            this.ctx.representation.structure.themes.colorThemeRegistry.add(StripedResidues.colorThemeProvider!);
             this.ctx.representation.structure.themes.colorThemeRegistry.add(TmDetColorThemeProvider);
-            this.ctx.managers.lociLabels.addProvider(StripedResidues.labelProvider!);
-            this.ctx.customModelProperties.register(StripedResidues.propertyProvider, true);
+            this.ctx.managers.lociLabels.addProvider(LabeledResidues.labelProvider!);
+            this.ctx.customModelProperties.register(LabeledResidues.propertyProvider, true);
 
 
             this.ctx.genericRepresentationControls.set(Tag.Representation, selection => {

src/extensions/tmdet/coloring.ts

@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-import { CustomElementProperty } from '../../mol-model-props/common/custom-element-property';
-import { Model, ElementIndex } from '../../mol-model/structure';
-import { Color } from '../../mol-util/color';
-
-const ColorMap = [
-    Color(0xff0000),
-    Color(0x0000ff),
-    Color(0xffff00)
-];
-
-export const StripedResidues = CustomElementProperty.create<number>({
-    label: 'TMDet Topology Colors',
-    name: 'tmdet-topology-colors',
-    getData(model: Model) {
-        // DebugUtil.log('getData', model.atomicHierarchy.residueAtomSegments);
-        // DebugUtil.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++) {
-            const residueId = residueIndex[i];
-            const value = (residueId === 310) ? 2 : residueId % 2;
-            map.set(i as ElementIndex, value);
-        }
-        // DebugUtil.log('map', map);
-        return { value: map };
-    },
-    coloring: {
-        getColor(e) { return ColorMap[e]; },
-        defaultColor: Color(0x777777)
-    },
-    getLabel(e) {
-        return e === 0 ? 'Odd stripe' : 'Even stripe';
-    }
-});

src/extensions/tmdet/labeling.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { DebugUtil } from '../../apps/tm-viewer';
+import { CustomElementProperty } from '../../mol-model-props/common/custom-element-property';
+import { Model, ElementIndex } from '../../mol-model/structure';
+import { TmDetDescriptorCache } from './prop';
+import { createResidueListsPerChain } from './tmdet-color-theme';
+import { ChainList } from './types';
+
+const siteLabels = [
+    "Side1",
+    "Side2",
+    "TM alpha",
+    "TM beta",
+    "TM re-entrant loop",
+    "Interfacial Helix",
+    "Unknown localization",
+    "Membrane Inside"
+];
+const DefaultResidueLabel = 6; // Unknown localization
+
+
+export const LabeledResidues = CustomElementProperty.create<number>({
+    label: 'TMDet Topology Site Labels',
+    name: 'tmdet-topology-site-labels',
+    getData(model: Model) {
+        DebugUtil.log('start getData', model.label, model.entryId);
+
+        const map = new Map<ElementIndex, number>();
+        const descriptor = TmDetDescriptorCache.get(model.entryId);
+        if (!descriptor) {
+            return { value: map };
+        }
+
+        const getSiteId = function(chains: ChainList, residueId: string): number {
+            // TODO: integrate with the coloring version
+            let label = DefaultResidueLabel;
+
+            for (let chain of chains) {
+                const residue = chain.residues.filter((res) => res.authId === residueId)[0];
+                if (residue) {
+                    label = residue.siteId;
+                    break;
+                }
+            }
+            //const chain = chains.filter((chain) => chain.chainId === chainId)[0];
+            // if (chain) {
+            //     const residue = chain.residues.filter((res) => res.authId === residueId)[0];
+            //     if (residue) {
+            //         label = siteLabels[residue.siteId];
+            //     }
+            // }
+
+            return label;
+        };
+
+        const chainList = createResidueListsPerChain(descriptor.chains);
+        DebugUtil.log('getData', model.atomicHierarchy.chainAtomSegments);
+        // DebugUtil.log('getData: auth_comp_id', model.atomicHierarchy.atoms.auth_comp_id.toArray());
+        const residueIndex = model.atomicHierarchy.residueAtomSegments.index;
+        for (let i = 0, _i = model.atomicHierarchy.atoms._rowCount; i < _i; i++) {
+            const residueIdx = residueIndex[i];
+            const authId = model.atomicHierarchy.residues.auth_seq_id.value(residueIdx).toString();
+    
+            map.set(i as ElementIndex, getSiteId(chainList, authId));
+        }
+        DebugUtil.log('end of getData');
+        return { value: map };
+    },
+    getLabel(e) {
+        return siteLabels[e];
+    }
+});

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

@@ -5,7 +5,7 @@ import { Color } from '../../mol-util/color';
 import { ColorNames } from '../../mol-util/color/names';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Location } from '../../mol-model/location';
-import { PDBTMChain } from './types';
+import { ChainList, PDBTMChain } from './types';
 import { TmDetDescriptorCache } from './prop';
 
 
@@ -73,15 +73,7 @@ function getColor(location: Location, chains: PDBTMChain[]): Color {
     return color;
 }
 
-type ChainList = {
-    chainId: string,
-    residues: {
-        authId: string|undefined,
-        siteId: number
-    }[]
-}[];
-
-function createResidueListsPerChain(chains: PDBTMChain[]) {
+export function createResidueListsPerChain(chains: PDBTMChain[]) {
     const chainList: ChainList = [];
 
     chains.forEach((chain: PDBTMChain) => {

src/extensions/tmdet/types.ts

@@ -55,4 +55,13 @@ type StructureComponentType = StateObjectSelector<
         StateObject<any, StateObject.Type<any>>, any>
     > | undefined;
 
-export type ComponentsType = { polymer: StructureComponentType; ligand: StructureComponentType; water: StructureComponentType };
+export type ComponentsType = { polymer: StructureComponentType; ligand: StructureComponentType; water: StructureComponentType };
+
+// for coloring and labeling
+export type ChainList = {
+    chainId: string,
+    residues: {
+        authId: string|undefined,
+        siteId: number
+    }[]
+}[];