Issue #833: refactoring: annotationData parameter added

src/TmFv3DApp/FeatureViewConfig.ts

@@ -20,7 +20,7 @@ import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
 
 import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
-import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
+import { getStyleColorString, updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 import { TmDetRcsbPreset } from "./TmTrajectoryHierarchyPreset";
 import { TmRowTitleComponent } from "./tmdet-viewer/TmRowTitleComponent";
 
@@ -77,6 +77,7 @@ export async function createFeatureViewerConfing(params: TmFvConfigParams) {
             emptyFvConfigCallbacks(fvConfig);
         }
         setExternalRowTitleComponent(fvConfig.rowConfig, structureRowClickHandler);
+        setRegionColors(fvConfig.rowConfig);
     }));
 
     return { sequenceConfig: sequenceConfig, molstarConfig: molstarConfig };
@@ -167,3 +168,19 @@ function setExternalRowTitleComponent(rows: RcsbFvRowConfigInterface[], titleCli
 function structureRowClickHandler(e: React.MouseEvent) {
     console.warn('TODO: implement structureRowClickHandler()');
 }
+
+/**
+ * Set region colors based on values read from CSS rules (ult_* classes) and
+ * updated based on side1 parameter.
+ * @param rows
+ */
+export function setRegionColors(rows: RcsbFvRowConfigInterface[]) {
+    rows.forEach((track: RcsbFvRowConfigInterface) => {
+        track.displayConfig?.forEach(region => {
+            const css = (region as any).css;
+            if (css) {
+                region.displayColor = getStyleColorString(css);
+            }
+        });
+    });
+}

src/TmFv3DApp/UniTmpHelper.ts

@@ -13,11 +13,16 @@ import { DebugUtil } from "./tmdet-extension/debug-utils";
 
 export async function fetchDescriptor(url: string) {
     const response = await fetch(url);
-    const descriptor = await response.json();
+    const descriptor = await response.json().catch((e) => {
+        console.error(`fetchDescriptor: JSON parsing of ${url} failed`, e);
+    });
     return descriptor;
 }
 
 export async function registerRegionDescriptorData(url: string, side1: "Inside"|"Outside"|null) {
+    if (!side1) {
+        console.error('registerRegionDescriptorData: side1 is undefined or null');
+    }
     const pdbtmDescriptor: PDBTMDescriptor = await fetchDescriptor(url);
     pdbtmDescriptor.side1 = side1;
     TmDetDescriptorCache.add(pdbtmDescriptor);

src/TmFv3DApp/index.html

@@ -18,7 +18,8 @@
           pdbEntry: "6bms",
           labelAsymId: "A",
           side1: "Inside",
-          configData: "./zdh15_saguaro_6bms_A.json"
+          configData: "./zdh15_saguaro_6bms_A.json",
+          annotationData: "./6bms.json"
         },
         "7khm_A": {
           title: 'TmSaguaro Example II',
@@ -27,7 +28,8 @@
           pdbEntry: "7khm",
           labelAsymId: "A",
           side1: "Outside",
-          configData: "./zdh15_saguaro_7khm_A.json"
+          configData: "./zdh15_saguaro_7khm_A.json",
+          annotationData: "./7khm.json"
         },
         "7khm_B": {
           title: 'TmSaguaro Example III',
@@ -36,13 +38,14 @@
           pdbEntry: "7khm",
           labelAsymId: "B",
           side1: "Outside",
-          configData: "./zdh15_saguaro_7khm_B.json"
+          configData: "./zdh15_saguaro_7khm_B.json",
+          annotationData: "./7khm.json"
         }
       };
       var item = getParam("entry", ".+_.+", "6bms_A");
       console.log(configs);
       console.log("itwem:", item);
-      tmSaguaro.createViewer(configs[item]);
+      tmSaguaro.createRcsb3DViewer(configs[item]);
     </script>
 </head>
 <style>

src/TmFv3DApp/index.ts

@@ -1,15 +1,16 @@
 import { RcsbFv3DCustomInterface} from "../RcsbFv3D/RcsbFv3DCustom";
 import { DebugUtil } from "./tmdet-extension/debug-utils";
-import { createFeatureViewerConfing } from "./FeatureViewConfig";
+import { createFeatureViewerConfing, setRegionColors } from "./FeatureViewConfig";
 import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
 import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
-import { RcsbFv, RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro";
-import { getStyleColorString, updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
+import { RcsbFv } from "@rcsb/rcsb-saguaro";
+import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 
-function createViewer(configParams: any) {
+function createRcsb3DViewer(configParams: any) {
     document.addEventListener("DOMContentLoaded", (event) => {
         (async function(event) {
 
+            updateSiteColors(configParams.side1 as any);
             DebugUtil.enableLog();
 
             const panel3dConfig = await createConfig(configParams);
@@ -35,10 +36,11 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
     };
 
     if (pdbEntry) {
-        const descriptorUrl = `/${pdbEntry}.json`;
-        registerRegionDescriptorData(descriptorUrl, params.side1);
+        console.log('annotation data:', configParams.annotationData);
+        await registerRegionDescriptorData(configParams.annotationData, params.side1);
     }
     if (configParams.configData) {
+        console.log('config data:', configParams.configData);
         params.fvConfigData = await fetchDescriptor(configParams.configData);
     }
 
@@ -75,20 +77,14 @@ async function createRcsbFeatureViewer(params: {
     boardConfig.rowTitleWidth = params.rowTitleWidth ?? 160;
 
     const rowConfig = blockConfig[0].featureViewConfig[0].rowConfig;
-    rowConfig.forEach((track: RcsbFvRowConfigInterface) => {
-        track.displayConfig?.forEach(region => {
-            const css = (region as any).css;
-            if (css) {
-                region.displayColor = getStyleColorString(css);
-            }
-        });
-    });
+    setRegionColors(rowConfig);
 
     const pfv = new RcsbFv({
         boardConfigData: boardConfig,
         rowConfigData: rowConfig,
         elementId: params.elementId
     });
+    return pfv;
 }
 
-export { DebugUtil, createViewer, createRcsbFeatureViewer };
+export { DebugUtil, createRcsb3DViewer, createRcsbFeatureViewer };

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

@@ -213,6 +213,7 @@ function loadRegionColorsFromStyleSheets(prefix: string = 'ult_'): void {
 
 export function updateSiteColors(side1: "Inside"|"Outside"|null): void {
     if (!side1) {
+        console.error('updateSiteColors: side1 is undefined or null');
         return;
     }
     loadRegionColorsFromStyleSheets();