Issue #683: periplasm coloring added

src/extensions/tmdet/behavior.ts

@@ -142,6 +142,7 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIConte
 
     setTimeout(() => { (async () => {
         const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);
+        pdbtmDescriptor.side1 = params.side1;
         TmDetDescriptorCache.add(pdbtmDescriptor);
 
         membraneOrientation = createMembraneOrientation(pdbtmDescriptor);

src/extensions/tmdet/labeling.ts

@@ -42,7 +42,7 @@ export const TmDetLabelProvider: LociLabelProvider = {
 
             let chainList =  TmDetChainListCache.get(pdbId);
             if (!chainList) {
-                chainList = createResidueListsPerChain(descriptor.chains);
+                chainList = createResidueListsPerChain(descriptor.chains, descriptor.side1);
                 TmDetChainListCache.set(pdbId, chainList);
             }
 

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

@@ -41,7 +41,7 @@ export function TmDetColorTheme(
         descriptorChains = pdbtmDescriptor.chains;
     }
 
-    const chainList = createResidueListsPerChain(descriptorChains);
+    const chainList = createResidueListsPerChain(descriptorChains, pdbtmDescriptor.side1);
     if (pdbId) {
         TmDetChainListCache.set(pdbId, chainList);
     }
@@ -57,7 +57,12 @@ export function TmDetColorTheme(
 
 const DefaultResidueColor = ColorNames.lightgrey;
 
-//TODO: colors of not curated sites
+enum SiteIndexes {
+    Side1 = 0,
+    Side2 = 1,
+    Periplasm = 8
+};
+
 const siteColors = [
     Color.fromArray([255,100,100], 0), // Side1
     Color.fromArray([100,100,255], 0), // Side2
@@ -66,7 +71,8 @@ const siteColors = [
     Color.fromArray([255,127,  0], 0), // TM re-entrant loop
     Color.fromArray([0,255,    0], 0), // Interfacial Helix
     Color.fromArray([196,196,196], 0), // Unknow localization
-    Color.fromArray([0,255,    0], 0)  // Membrane Inside
+    Color.fromArray([0,255,    0], 0), // Membrane Inside
+    Color.fromArray([255, 0, 255], 0)  // Periplasm
 ];
 
 const regionColorMapFromCss = new Map();
@@ -101,15 +107,26 @@ export function getChainAndResidueIds(location: Location) {
     };
 }
 
-export function createResidueListsPerChain(chains: PDBTMChain[]) {
+export function createResidueListsPerChain(chains: PDBTMChain[], side1: string|null) {
     const chainList: ChainList = [];
 
     chains.forEach((chain: PDBTMChain) => {
-        chainList.push({ chainId: chain.chain_label, residues: [] });
+        const chainType = chain.additional_chain_annotations.type;
+        chainList.push({ chainId: chain.chain_label, type: chainType, residues: [] });
         chain.residues.forEach((residue) => {
+            let siteId = residue.site_data![0].site_id_ref - 1;
+            let siteColorId = siteId;
+            if (siteColorId == SiteIndexes.Side1
+                && ((chainType == 'alpha' && side1 == "Outside")
+                || (chainType == 'beta' && side1 == "Inside"))) {
+
+                siteColorId = SiteIndexes.Periplasm;
+            }
+
             chainList[chainList.length - 1].residues.push({
                 authId: residue.pdb_res_label,
-                siteId: residue.site_data![0].site_id_ref - 1
+                siteId: siteId,
+                siteColorId: siteColorId
             });
         });
     });
@@ -122,7 +139,7 @@ function residueColor(chains: ChainList, chainId: string, residueId: string): Co
 
     const residue = getResidue(chains, chainId, residueId);
     if (residue) {
-        color = siteColors[residue.siteId];
+        color = siteColors[residue.siteColorId];
     }
 
     return color;

src/extensions/tmdet/types.ts

@@ -13,9 +13,8 @@ import { StateObjectSelector } from "../../mol-state/object";
 
 export type PMS = PluginStateObject.Molecule.Structure;
 
-type PDBTMChainLabel = string;
 export type PDBTMChain = {
-    chain_label: PDBTMChainLabel,
+    chain_label: string,
     additional_chain_annotations: {
         type: string,
         num_tm: number
@@ -36,6 +35,7 @@ export type PDBTMTransformationMatrix = {
 };
 export type PDBTMDescriptor = {
     pdb_id: string,
+    side1: "Inside"|"Outside"|null,
     chains: PDBTMChain[],
     site: { site_id: number, label: string }[],
     additional_entry_annotations: {
@@ -49,8 +49,8 @@ export type PDBTMDescriptor = {
             matrix_list: {
                 matrix_id: string,
                 apply_to_chain_list: {
-                    chain_id: PDBTMChainLabel,
-                    new_chain_id: PDBTMChainLabel
+                    chain_id: string,
+                    new_chain_id: string
                 }[],
                 transformation_matrix: PDBTMTransformationMatrix
             }[]
@@ -69,18 +69,31 @@ export type ComponentsType = { polymer: StructureComponentType; ligand: Structur
 // for coloring and labeling
 export type ResidueItem = {
     authId: string|undefined,
-    siteId: number
+    siteId: number,     // for labels
+    siteColorId: number // for site colors
 };
-export type ChainList = {
+export type Chain = {
     chainId: string,
+    type: string,
     residues: ResidueItem[]
-}[];
+};
+export type ChainList = Chain[];
+
 export function getResidue(chains: ChainList, chainId: string, residueId: string): ResidueItem|undefined {
     let result = undefined;
-    const chain = chains.filter((chain) => chain.chainId === chainId)[0];
+    const chain = getChain(chains, chainId);
     if (chain) {
         result = chain.residues.filter((res) => res.authId === residueId)[0];
     }
 
     return result;
 }
+
+export function getChain(chains: ChainList, chainId: string): Chain|undefined {
+    let result = undefined;
+    const chain = chains.filter((chain) => chain.chainId === chainId)[0];
+    if (chain) {
+        result = chain;
+    }
+    return result;
+}