Issue #967: eliminating tmdetMolstar module: separate molstar.js is not needed

src/Tm3DStandaloneApp/index.tsx

@@ -1,7 +1,5 @@
 import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
-import { loadWithUNITMPMembraneRepresentation } from "../TmFv3DApp/UniTmpHelper";
-import * as React from "react";
-import { TmViewer } from "./tmdet-viewer/TmViewer";
+import { TmViewerStandalone } from "./tmdet-viewer/TmViewerStandalone";
 import { ViewerProps } from "@rcsb/rcsb-molstar/build/src/viewer";
 import { TMDETMembraneOrientation } from "../TmFv3DApp/tmdet-extension/behavior";
 import { PluginSpec } from "molstar/lib/mol-plugin/spec";
@@ -9,19 +7,22 @@ import { PluginLayoutControlsDisplay } from "molstar/lib/mol-plugin/layout";
 import { PluginConfig } from "molstar/lib/mol-plugin/config";
 import { PluginContext } from "molstar/lib/mol-plugin/context";
 
-// customElements.define(TmFv1DElement.TagName, TmFv1DElement);
-
 const Extensions = {
     'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
 };
 
 const viewerParams: Partial<ViewerProps> = {
-        layoutIsExpanded: true,
+        layoutIsExpanded: false,
         layoutShowControls: true,
         layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
         layoutShowSequence: true,
         layoutShowLog: true,
 
+        showImportControls: true,
+        showSessionControls: true,
+        showStructureSourceControls: true,
+
+
         viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
         viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
         volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
@@ -39,7 +40,7 @@ function createTmdetViewer(elementId: string, configParams: any,
             (async function(event) {
 
                 DebugUtil.enableLog();
-                const viewer = new TmViewer(elementId, {
+                const viewer = new TmViewerStandalone(elementId, {
                     ...viewerProps,
                     layoutShowControls:false,
                     layoutShowSequence: true,
@@ -50,7 +51,7 @@ function createTmdetViewer(elementId: string, configParams: any,
                         }
                     }
                 });
-                await loadWithUNITMPMembraneRepresentation(viewer, configParams);
+                await viewer.loadWithUNITMPMembraneRepresentation(configParams);
                 if (callBack) {
                     callBack(viewer.plugin);
                 }
@@ -58,7 +59,7 @@ function createTmdetViewer(elementId: string, configParams: any,
         });
     } else {
         DebugUtil.enableLog();
-        const viewer = new TmViewer(elementId, {
+        const viewer = new TmViewerStandalone(elementId, {
             ...viewerProps,
             layoutShowControls:false,
             layoutShowSequence: true,
@@ -69,7 +70,7 @@ function createTmdetViewer(elementId: string, configParams: any,
                 }
             }
         });
-        loadWithUNITMPMembraneRepresentation(viewer, configParams);
+        viewer.loadWithUNITMPMembraneRepresentation(configParams);
         if (callBack) {
             callBack(viewer.plugin);
         }
@@ -77,7 +78,25 @@ function createTmdetViewer(elementId: string, configParams: any,
     }
 }
 
+function createMolstarViewer(elementId: string, viewerProps: Partial<ViewerProps> = viewerParams) {
+
+    return new TmViewerStandalone(elementId, {
+            ...viewerProps,
+            layoutShowControls:false,
+            layoutShowSequence: true,
+            showWelcomeToast: false,
+            canvas3d: {
+                multiSample: {
+                    mode: 'off'
+                }
+            }
+        },
+        false // with no TmdetViewer behaviour
+    );
+}
+
 export {
+    createMolstarViewer,
     createTmdetViewer,
     DebugUtil
 };

src/Tm3DStandaloneApp/tmdet-viewer/TmMolstarManagerFactory.ts

@@ -1,56 +0,0 @@
-import {ViewerManagerFactoryInterface} from "../../RcsbFvStructure/StructureViewerInterface";
-import {LoadMolstarInterface, MolstarActionManager} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
-import { ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
-import { TmViewer } from "./TmViewer";
-import {MolstarModelMapManager} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarModelMapManager";
-import {MolstarCallbackManager} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarCallbackManager";
-import {DataContainer} from "../../Utils/DataContainer";
-import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
-
-export class TmMolstarManagerFactory<P,L> implements ViewerManagerFactoryInterface<LoadMolstarInterface<P,L>,L,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> {
-
-    private readonly getModelIdFromTrajectory: (trajectory: L) => string|undefined;
-
-    constructor(getModelIdFromTrajectory: (trajectory: L) => string|undefined) {
-        this.getModelIdFromTrajectory = getModelIdFromTrajectory;
-    }
-
-    public getViewerManagerFactory(stateManager: RcsbFvStateInterface, viewerParams: {viewerElement: string | HTMLElement, viewerProps: Partial<ViewerProps>}) {
-        const loadingFlag: DataContainer<boolean> = new DataContainer(false);
-        const innerSelectionFlag: DataContainer<boolean> = new DataContainer(false);
-        const innerReprChangeFlag: DataContainer<boolean> = new DataContainer(false);
-        const viewer = new TmViewer(viewerParams.viewerElement, {
-            ...viewerParams.viewerProps,
-            layoutShowControls:false,
-            layoutShowSequence: true,
-            showWelcomeToast: false,
-            canvas3d: {
-                multiSample: {
-                    mode: 'off'
-                }
-            }
-        });
-        viewer.plugin.selectionMode = true;
-        const modelMapManager:MolstarModelMapManager<L> = new MolstarModelMapManager(viewer, this.getModelIdFromTrajectory);
-        const callbackManager: MolstarCallbackManager =  new MolstarCallbackManager({
-            viewer: viewer,
-            stateManager: stateManager,
-            loadingFlag: loadingFlag,
-            modelMapManager: modelMapManager,
-            innerSelectionFlag: innerSelectionFlag,
-            innerReprChangeFlag: innerReprChangeFlag
-        });
-        const actionManager = new MolstarActionManager<P,L>({
-            viewer: viewer,
-            modelMapManager: modelMapManager,
-            innerSelectionFlag: innerSelectionFlag,
-            innerReprChangeFlag: innerReprChangeFlag,
-            loadingFlag: loadingFlag
-        });
-        return {
-            actionManager,
-            callbackManager
-        }
-    }
-
-}

src/Tm3DStandaloneApp/tmdet-viewer/TmViewer.ts → src/Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone.ts

@@ -7,7 +7,7 @@
  * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
  */
 /**
- * Copyright (C) 2023, Protein Bioinformatics Research Group, RCNS
+ * Copyright (C) 2024, Protein Bioinformatics Research Group, HUN-REN RCNS
  *
  * Licensed under CC BY-NC 4.0, see LICENSE file for more info.
  *
@@ -16,24 +16,28 @@
  */
 
 import { Viewer, ViewerProps } from '@rcsb/rcsb-molstar/build/src/viewer';
-import { TmDetColorThemeProvider } from '../../TmFv3DApp/tmdet-extension/tmdet-color-theme';
+import { TmDetColorThemeProvider, updateSiteColors } from '../../TmFv3DApp/tmdet-extension/tmdet-color-theme';
 import { MembraneOrientationPreset } from '../../TmFv3DApp/tmdet-extension/behavior';
 import { TmDetLabelProvider } from '../../TmFv3DApp/tmdet-extension/labeling';
 import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
 import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
 import { Mat4 } from 'molstar/lib/commonjs/mol-math/linear-algebra';
 import { TrajectoryHierarchyPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset';
+import { registerRegionDescriptorData } from '../../TmFv3DApp/UniTmpHelper';
+import { TmDetRcsbPreset } from '../TmTrajectoryHierarchyPreset';
 
-export class TmViewer extends Viewer {
+export class TmViewerStandalone extends Viewer {
+
+    constructor(elementOrId: string | HTMLElement, props: Partial<ViewerProps> = {}, withTmDetBehaviour: boolean = true) {
 
-    constructor(elementOrId: string | HTMLElement, props: Partial<ViewerProps> = {}) {
-        console.log("TmViewer constructor");
         super(elementOrId, props);
 
-        this.initBehavior();
+        if (withTmDetBehaviour) {
+            this.initBehaviour();
+        }
     }
 
-    public async initBehavior() {
+    public async initBehaviour() {
         let tree = this.plugin.state.behaviors.build();
 
 
@@ -55,5 +59,21 @@ export class TmViewer extends Viewer {
         return super.loadStructureFromUrl(url, format, isBinary, config);
     }
 
-}
+    unselectChains(chains: string[]) {
+        console.log(TmDetColorThemeProvider);
+    }
+
+    async loadWithUNITMPMembraneRepresentation(params: any) {
+        setTimeout(() => { this.plugin.clear(); }, 100); // clear scene after some delay
+        updateSiteColors(params.side1);
+
+        setTimeout(() => { (async () => {
+            await registerRegionDescriptorData(params.regionDescriptorUrl, params.side1);
 
+            // load structure
+            this.loadStructureFromUrl(params.structureUrl, 'mmcif', false, { reprProvider: TmDetRcsbPreset });
+
+        })(); }, 500);
+    }
+
+}

src/TmFv3DApp/UniTmpHelper.ts

@@ -11,7 +11,7 @@ import { setMembraneOrientation, TmDetDescriptorCache } from "./tmdet-extension/
 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 { TmViewerStandalone } from "../Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone";
 import { TmDetRcsbPreset } from "../Tm3DStandaloneApp/TmTrajectoryHierarchyPreset";
 
 export async function fetchDescriptor(url: string) {
@@ -33,17 +33,3 @@ 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);
-}

src/TmFv3DApp/index.tsx

@@ -10,6 +10,9 @@ import { BlockSelectorManager, FeatureBlockInterface } from "../RcsbFvSequence/S
 import * as React from "react";
 import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import { PluginContext } from "molstar/lib/mol-plugin/context";
+import { TmViewerStandalone } from "../Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone";
+import { createMolstarViewer } from "../Tm3DStandaloneApp";
+import { createTmdetViewer } from "../Tm3DStandaloneApp";
 
 customElements.define(TmFv1DElement.TagName, TmFv1DElement);
 
@@ -157,5 +160,8 @@ export {
     createRcsb3DViewer,
     createRcsbFeatureViewer,
     downloadScreenshot,
-    TmFv1DElement
+    TmFv1DElement,
+    TmViewerStandalone, // from Tm3DStandaloneApp
+    createMolstarViewer,
+    createTmdetViewer
 };

webpack.tm-saguaro.config.js

@@ -45,7 +45,7 @@ const commonConfig = {
 const out_path = "build/TmFeatureViewer";
 const examples = [];
 
-examples.push(/*{
+examples.push({
     ...commonConfig,
     entry: {
         "tm-saguaro": './lib/TmFv3DApp/index.js'
@@ -58,20 +58,6 @@ examples.push(/*{
             type: 'umd'
         }
     }
-},*/
-{
-    ...commonConfig,
-    entry: {
-        "tmdet-molstar": './lib/Tm3DStandaloneApp/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path),
-        library: {
-            name: 'tmdetMolstar',
-            type: 'umd'
-        }
-    }
 });
 
 module.exports = examples;