TmMolStar/src/Tm3DStandaloneApp/index.tsx

import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
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";
import { PluginLayoutControlsDisplay } from "molstar/lib/mol-plugin/layout";
import { PluginConfig } from "molstar/lib/mol-plugin/config";
import { PluginContext } from "molstar/lib/mol-plugin/context";

const Extensions = {
    'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
};

const viewerParams: Partial<ViewerProps> = {
        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,

};

function createTmdetViewer(elementId: string, configParams: any,
    callBack: (ctx:PluginContext) => {},
    deferred: boolean,
    viewerProps: Partial<ViewerProps> = viewerParams) {

    if (deferred) {
        document.addEventListener("DOMContentLoaded", (event) => {
            console.log('DOMContentLoaded', deferred);
            (async function(event) {

                DebugUtil.enableLog();
                const viewer = new TmViewerStandalone(elementId, {
                    ...viewerProps,
                    layoutShowControls:false,
                    layoutShowSequence: true,
                    showWelcomeToast: false,
                    canvas3d: {
                        multiSample: {
                            mode: 'off'
                        }
                    }
                });
                await viewer.loadWithUNITMPMembraneRepresentation(configParams);
                if (callBack) {
                    callBack(viewer.plugin);
                }
            })();
        });
    } else {
        DebugUtil.enableLog();
        const viewer = new TmViewerStandalone(elementId, {
            ...viewerProps,
            layoutShowControls:false,
            layoutShowSequence: true,
            showWelcomeToast: false,
            canvas3d: {
                multiSample: {
                    mode: 'off'
                }
            }
        });
        viewer.loadWithUNITMPMembraneRepresentation(configParams);
        if (callBack) {
            callBack(viewer.plugin);
        }
        return viewer;
    }
}

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
};