Issue #832: 1D viewer creation func: createRcsbFeatureViewer

src/TmFv3DApp/index.ts

@@ -3,6 +3,8 @@ import { DebugUtil } from "./tmdet-extension/debug-utils";
 import { createFeatureViewerConfing } 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";
 
 function createViewer(configParams: any) {
     document.addEventListener("DOMContentLoaded", (event) => {
@@ -54,4 +56,39 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
     return panel3dConfig;
 }
 
-export { DebugUtil, createViewer };
+/**
+ * Create an Rcsb Saguaro 1D viewer instance.
+ *
+ * @param elementId id of parent element
+ * @param url source of JSON config
+ * @param side1 side1 paramter to update site colors, if it is needed
+ */
+async function createRcsbFeatureViewer(params: {
+    elementId: string, url: string, side1: string, trackWidth?: number, rowTitleWidth?: number }) {
+
+    updateSiteColors(params.side1 as any);
+
+    const featureTracks = await fetchDescriptor(params.url);
+    const blockConfig = featureTracks.blockConfig;
+    const boardConfig = blockConfig[0].featureViewConfig[0].boardConfig;
+    boardConfig.trackWidth = params.trackWidth ?? 600;
+    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);
+            }
+        });
+    });
+
+    const pfv = new RcsbFv({
+        boardConfigData: boardConfig,
+        rowConfigData: rowConfig,
+        elementId: params.elementId
+    });
+}
+
+export { DebugUtil, createViewer, createRcsbFeatureViewer };

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

@@ -256,3 +256,7 @@ function getStyleColor(cssColorText: string): Color {
     }
     return Color.fromArray(intValues, 0);
 }
+
+export function getStyleColorString(cssClass: string): string {
+    return Color.toHexStyle(regionColorMapFromCss.get(cssClass));
+}