Issue #638: colors from CSS rules

src/apps/tm-viewer/index.html

@@ -57,6 +57,15 @@
                 width: 100%;
                 display: block;
             }
+
+            .ult_inside {
+                fill: #f00;
+            }
+
+            .ult_outside {
+                fill: #00f;
+            }
+
         </style>
         <link rel="stylesheet" type="text/css" href="molstar.css" />
     </head>
@@ -75,8 +84,11 @@
 
             function load(pdbId) {
                 tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
-                    structureUrl: `https://files.rcsb.org/download/${pdbId}.cif`,
+                    //structureUrl: `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbId}_updated.cif`,
+                    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"
                 });
             }
 

src/extensions/tmdet/behavior.ts

@@ -35,11 +35,10 @@ import { applyTransformations, createMembraneOrientation } from './transformatio
 import { ComponentsType, PDBTMDescriptor, PMS } from './types';
 import { registerTmDetSymmetry } from './symmetry';
 import { TmDetLabelProvider } from './labeling';
-import { TmDetColorThemeProvider } from './tmdet-color-theme';
+import { TmDetColorThemeProvider, updateSiteColors } from './tmdet-color-theme';
 import { loadInitialSnapshot, rotateCamera, storeCameraSnapshot } from './camera';
 
 
-
 const Tag = MembraneOrientation.Tag;
 const TMDET_MEMBRANE_ORIENTATION = 'Membrane Orientation';
 
@@ -139,6 +138,7 @@ export async function loadWithUNITMPMembraneRepresentation(plugin: PluginUIConte
     loadInitialSnapshot(plugin); // load if there is a stored one
     setTimeout(() => { plugin.clear(); }, 100); // clear scene after some delay
 
+    updateSiteColors(params.side1);
 
     setTimeout(() => { (async () => {
         const pdbtmDescriptor: PDBTMDescriptor = await downloadRegionDescriptor(plugin, params);

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

@@ -69,6 +69,7 @@ const siteColors = [
     Color.fromArray([0,255,    0], 0)  // Membrane Inside
 ];
 
+const regionColorMapFromCss = new Map();
 
 function getColor(location: Location, chains: ChainList): Color {
     let color = DefaultResidueColor;
@@ -138,3 +139,53 @@ export const TmDetColorThemeProvider: ColorTheme.Provider<TmDetColorThemeParams,
     defaultValues: { pdbtmDescriptor: undefined },
     isApplicable: () => true,
 };
+
+
+
+// Colors from CSS rules
+
+function loadRegionColorsFromStyleSheets(prefix: string = 'ult_'): void {
+    const sheets: CSSStyleSheet[] = Array.from(document.styleSheets);
+    sheets.forEach((sheet: CSSStyleSheet) => {
+        const rules: CSSRule[] = Array.from(sheet.cssRules);
+        rules.forEach((rule: CSSRule) => fetchRule(rule, prefix));
+    });
+}
+
+export function updateSiteColors(side1: "Inside"|"Outside"|null): void {
+    if (!side1) {
+        return;
+    }
+    loadRegionColorsFromStyleSheets();
+    if (regionColorMapFromCss.size == 0) {
+        console.warn('Cannot read any region-related color rules');
+    }
+    const inside = regionColorMapFromCss.get("ult_inside");
+    const outside = regionColorMapFromCss.get("ult_outside");
+    if (side1 == "Inside") {
+        siteColors[0] = inside;
+        siteColors[1] = outside;
+    } else {
+        siteColors[0] = outside;
+        siteColors[1] = inside;
+    }
+}
+
+function fetchRule(rule: CSSRule, prefix: string) {
+    let styleRule = rule as CSSStyleRule;
+    if (styleRule.selectorText?.startsWith('.' + prefix)) {
+        const value = styleRule.style.getPropertyValue('fill');
+        const color: Color = getStyleColor(value);
+        const key = styleRule.selectorText.slice(1);
+        regionColorMapFromCss.set(key, color);
+    }
+}
+
+function getStyleColor(cssColorText: string): Color {
+    const values = cssColorText?.match(/\d+/g);
+    let intValues = values?.map(value => parseInt(value));
+    if (!intValues) {
+        intValues = [ 0, 0, 0 ];
+    }
+    return Color.fromArray(intValues, 0);
+}