Issue #683: 9 ult_ classes can overwrite default site colors

src/apps/tm-viewer/index.html

@@ -58,6 +58,10 @@
                 display: block;
             }
 
+            .ult_membins {
+                fill: #40E0D0;
+            }
+
             .ult_inside {
                 fill: #f00;
             }
@@ -90,7 +94,7 @@
                     structureUrl: `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbId}_updated.cif`,
                     //structureUrl: `https://www.ebi.ac.uk/pdbe/static/entry/download/${pdbId}-assembly-1.cif.gz`,
                     regionDescriptorUrl: `./tmdet-data/${pdbId}.json`,
-                    side1: "Inside"
+                    side1: "Periplasm"
                 });
             }
 

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

@@ -60,9 +60,17 @@ const DefaultResidueColor = ColorNames.lightgrey;
 enum SiteIndexes {
     Side1 = 0,
     Side2 = 1,
+    TmAlpha = 2,
+    TmBeta = 3,
+    TmReentrantLoop = 4,
+    InterfacialHelix = 5,
+    UnknownLocalization = 6,
+    MembraneInside = 7,
     Periplasm = 8
 };
 
+// Old default values - it is overwritten by ult_* CSS classes
+// See below updateSiteColors().
 const siteColors = [
     Color.fromArray([255,100,100], 0), // Side1
     Color.fromArray([100,100,255], 0), // Side2
@@ -75,6 +83,18 @@ const siteColors = [
     Color.fromArray([255, 0, 255], 0)  // Periplasm
 ];
 
+const siteCssNames = [
+    "ult_side1",
+    "ult_side2",
+    "ult_alpha",
+    "ult_beta",
+    "ult_reentrant",
+    "ult_ifh",
+    "ult_unknown",
+    "ult_membins",
+    "ult_periplasm"
+];
+
 const regionColorMapFromCss = new Map();
 
 function getColor(location: Location, chains: ChainList): Color {
@@ -181,10 +201,16 @@ export function updateSiteColors(side1: "Inside"|"Outside"|null): void {
     if (regionColorMapFromCss.size == 0) {
         console.warn('Cannot read any region-related color rules');
     }
+
+    siteCssNames.forEach((ultClassName, index) => {
+        const color = regionColorMapFromCss.get(ultClassName);
+        if (color != null) {
+            siteColors[index] = color;
+        }
+    });
+
     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[SiteIndexes.Side1] = inside;
         siteColors[SiteIndexes.Side2] = outside;