Issue #959: loadWithUNITMPMembraneRepresentation added + some fixes

src/Tm3DStandaloneApp/index.tsx

@@ -1,6 +1,5 @@
 import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
-import { fetchDescriptor, registerRegionDescriptorData } from "../TmFv3DApp/UniTmpHelper";
-import { updateSiteColors } from "../TmFv3DApp/tmdet-extension/tmdet-color-theme";
+import { loadWithUNITMPMembraneRepresentation } from "../TmFv3DApp/UniTmpHelper";
 import * as React from "react";
 import { TmViewer } from "./tmdet-viewer/TmViewer";
 import { ViewerProps } from "@rcsb/rcsb-molstar/build/src/viewer";
@@ -8,7 +7,6 @@ import { TMDETMembraneOrientation } from "../TmFv3DApp/tmdet-extension/behavior"
 import { PluginSpec } from "molstar/lib/mol-plugin/spec";
 import { PluginLayoutControlsDisplay } from "molstar/lib/mol-plugin/layout";
 import { PluginConfig } from "molstar/lib/mol-plugin/config";
-import { ObjectKeys } from "molstar/lib/commonjs/mol-util/type-helpers";
 import { PluginContext } from "molstar/lib/mol-plugin/context";
 
 // customElements.define(TmFv1DElement.TagName, TmFv1DElement);
@@ -32,14 +30,14 @@ const viewerParams: Partial<ViewerProps> = {
 
 function createTmdetViewer(elementId: string, configParams: any,
     callBack: (ctx:PluginContext) => {},
-    deferred: boolean = true,
+    deferred: boolean,
     viewerProps: Partial<ViewerProps> = viewerParams) {
 
     if (deferred) {
         document.addEventListener("DOMContentLoaded", (event) => {
+            console.log('DOMContentLoaded', deferred);
             (async function(event) {
 
-                updateSiteColors(configParams.side1);
                 DebugUtil.enableLog();
                 const viewer = new TmViewer(elementId, {
                     ...viewerProps,
@@ -52,9 +50,30 @@ function createTmdetViewer(elementId: string, configParams: any,
                         }
                     }
                 });
-                callBack(viewer.plugin);
+                await loadWithUNITMPMembraneRepresentation(viewer, configParams);
+                if (callBack) {
+                    callBack(viewer.plugin);
+                }
             })();
         });
+    } else {
+        DebugUtil.enableLog();
+        const viewer = new TmViewer(elementId, {
+            ...viewerProps,
+            layoutShowControls:false,
+            layoutShowSequence: true,
+            showWelcomeToast: false,
+            canvas3d: {
+                multiSample: {
+                    mode: 'off'
+                }
+            }
+        });
+        loadWithUNITMPMembraneRepresentation(viewer, configParams);
+        if (callBack) {
+            callBack(viewer.plugin);
+        }
+        return viewer;
     }
 }
 

src/TmFv3DApp/UniTmpHelper.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (C) 2023, Protein Bioinformatics Research Group, RCNS
+ * Copyright (C) 2024, Protein Bioinformatics Research Group, RCNS
  *
  * Licensed under CC BY-NC 4.0, see LICENSE file for more info.
  *
@@ -10,6 +10,9 @@ import { PDBTMDescriptor } from "./tmdet-extension/types";
 import { setMembraneOrientation, TmDetDescriptorCache } from "./tmdet-extension/prop";
 import { createMembraneOrientation } from "./tmdet-extension/transformation";
 import { DebugUtil } from "./tmdet-extension/debug-utils";
+import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
+import { TmViewer } from "../Tm3DStandaloneApp/tmdet-viewer/TmViewer";
+import { TmDetRcsbPreset } from "../Tm3DStandaloneApp/TmTrajectoryHierarchyPreset";
 
 export async function fetchDescriptor(url: string) {
     const response = await fetch(url);
@@ -30,3 +33,17 @@ export async function registerRegionDescriptorData(url: string, side1: "Inside"|
     setMembraneOrientation(membraneOrientation);
     DebugUtil.log('TMDET Membrane Orientation Params:', membraneOrientation);
 }
+
+
+export async function loadWithUNITMPMembraneRepresentation(viewer: TmViewer, params: any) {
+    setTimeout(() => { viewer.plugin.clear(); }, 100); // clear scene after some delay
+    updateSiteColors(params.side1);
+
+    setTimeout(() => { (async () => {
+        await registerRegionDescriptorData(params.regionDescriptorUrl, params.side1);
+
+        // load structure
+        viewer.loadStructureFromUrl(params.structureUrl, 'mmcif', false, { reprProvider: TmDetRcsbPreset });
+
+    })(); }, 500);
+}