Issue #833: bugfix warning when css class not registered, set color to black

src/TmFv3DApp/UniTmpColor.ts

@@ -1,139 +0,0 @@
-/**
- * Copyright (C) 2023, Protein Bioinformatics Research Group, RCNS
- *
- * Licensed under CC BY-NC 4.0, see LICENSE file for more info.
- *
- * @author Gabor Tusnady <tusnady.gabor@ttk.hu>
- * @author Csongor Gerdan <gerdan.csongor@ttk.hu>
- */
-
-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 = [
-    'rgb(255,100,100)', // Side1
-    'rgb(100,100,255)', // Side2
-    'rgb(255,255,  0)', // TM alpha
-    'rgb(255,255,  0)', // TM beta
-    'rgb(255,127,  0)', // TM re-entrant loop
-    'rgb(0,255,    0)', // Interfacial Helix
-    'rgb(196,196,196)', // Unknow localization
-    'rgb(0,255,    0)', // Membrane Inside
-    'rgb(255, 0, 255)'  // Periplasm
-];
-
-const siteCssNames = [
-    "ult_side1",
-    "ult_side2",
-    "ult_alpha",
-    "ult_beta",
-    "ult_reentrant",
-    "ult_ifh",
-    "ult_unknown",
-    "ult_membins",
-    "ult_periplasm"
-];
-
-const locationCssMap = {
-    '1': { css: 'ult_side1', label: "Side1" },
-    '2': { css: 'ult_side2', label: "Side2" },
-    'B': { css: 'ult_beta', label: "Beta" },
-    'C': { css: 'ult_coil', label: "Coil" },
-    'F': { css: 'ult_ifh', label: "Interfacial helix" },
-    'H': { css: 'ult_alpha', label: "Alpha" },
-    'N': { css: 'ult_mebins', label: "Membins" },
-    'L': { css: 'ult_reentrant', label: "Re-entrant loop" },
-    'U': { css: 'ult_unknown', label: "Unknown" },
-    'M': { css: 'ult_membrane', label: "Membrane" },
-    'I': { css: 'ult_inside', label: "Inside" },
-    'O': { css: 'ult_outside', label: "Outside" },
-    'Q': { css: 'ult_not_inside', label: "Not Inside" },
-    'J': { css: 'ult_not_outside', label: "Not Outside" },
-    'W': { css: 'ult_not_membrane', label: "Not Membrane" },
-    'S': { css: 'ult_signal', label: "Signal" },
-    'P': { css: 'ult_propeptide', label: "Propeptide" },
-    'T': { css: 'ult_transit', label: "Transit" },
-    'K': { css: 'ult_cleavable', label: "Cleavable" },
-    'D': { css: 'ult_domain', label: "Domain" },
-    'E': { css: 'ult_periplasm', label: "Periplasm" }
-} as any;
-
-
-const regionColorMapFromCss = new Map();
-
-export function getColorByCssClass(cssClass: string): string {
-    return regionColorMapFromCss.get(cssClass);
-}
-
-export function getColorByLocation(location: string): string {
-    return getColorByCssClass(locationCssMap[location].css);
-}
-
-export function getLabelByLocation(location: string): string {
-    return locationCssMap[location].label;
-}
-
-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');
-    }
-
-    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");
-    if (side1 == "Inside") {
-        siteColors[SiteIndexes.Side1] = inside;
-        siteColors[SiteIndexes.Side2] = outside;
-    } else if (side1 == "Outside") {
-        siteColors[SiteIndexes.Side1] = outside;
-        siteColors[SiteIndexes.Side2] = 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: any = getStyleColor(value);
-        const key = styleRule.selectorText.slice(1);
-        regionColorMapFromCss.set(key, color);
-    }
-}
-
-function getStyleColor(cssColorText: string): any {
-    const values = cssColorText?.match(/\d+/g);
-    let intValues = values?.map(value => parseInt(value));
-    if (!intValues) {
-        intValues = [ 0, 0, 0 ];
-    }
-    return `rgb(${intValues[0]}, ${intValues[1]}, ${intValues[2]})`;
-}

src/TmFv3DApp/tmdet-extension/tmdet-color-theme.ts

@@ -259,5 +259,10 @@ function getStyleColor(cssColorText: string): Color {
 }
 
 export function getStyleColorString(cssClass: string): string {
-    return Color.toHexStyle(regionColorMapFromCss.get(cssClass));
+    let color = regionColorMapFromCss.get(cssClass);
+    if (!color) {
+        console.warn(`getStyleColorString: css class '${cssClass}' not found in registry`);
+        color = Color.fromRgb(0, 0, 0);
+    }
+    return Color.toHexStyle(color);
 }