Issue #683: periplasm site coloring fix

src/apps/tm-viewer/index.html

@@ -66,6 +66,9 @@
                 fill: #00f;
             }
 
+            .ult_periplasm {
+                fill: #f0f;
+            }
         </style>
         <link rel="stylesheet" type="text/css" href="molstar.css" />
     </head>

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

@@ -116,11 +116,16 @@ export function createResidueListsPerChain(chains: PDBTMChain[], side1: string|n
         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;
+            if (chainType == "beta") {
+                if (side1 == "Periplasm" && siteColorId == SiteIndexes.Side1) {
+                    siteColorId = SiteIndexes.Periplasm;
+                } else if (side1 == "Outside") {
+                    if (siteColorId == SiteIndexes.Side1) {
+                        siteColorId = SiteIndexes.Side2;
+                    } else if(siteColorId == SiteIndexes.Side2) {
+                        siteColorId = SiteIndexes.Periplasm;
+                    }
+                }
             }
 
             chainList[chainList.length - 1].residues.push({
@@ -179,12 +184,14 @@ export function updateSiteColors(side1: "Inside"|"Outside"|null): void {
     }
     const inside = regionColorMapFromCss.get("ult_inside");
     const outside = regionColorMapFromCss.get("ult_outside");
+    const periplasm = regionColorMapFromCss.get("ult_periplasm");
+    siteColors[SiteIndexes.Periplasm] = periplasm;
     if (side1 == "Inside") {
-        siteColors[0] = inside;
-        siteColors[1] = outside;
+        siteColors[SiteIndexes.Side1] = inside;
+        siteColors[SiteIndexes.Side2] = outside;
     } else {
-        siteColors[0] = outside;
-        siteColors[1] = inside;
+        siteColors[SiteIndexes.Side1] = outside;
+        siteColors[SiteIndexes.Side2] = inside;
     }
 }