TmMolStar/src/TmFv3DApp/index.ts

import { RcsbFv3DCustomInterface} from "../RcsbFv3D/RcsbFv3DCustom";
import { DebugUtil } from "./tmdet-extension/debug-utils";
import { createFeatureViewerConfing } from "./FeatureViewConfig";
import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
import { createRcsbFeatureViewer, TmFv1DElement } from "./tmdet-viewer/TmFv1DComponent";
import { RcsbFvDOMConstants } from "../RcsbFvConstants/RcsbFvConstants";

customElements.define("tm-saguaro-1d", TmFv1DElement);


function createRcsb3DViewer(configParams: any) {
    document.addEventListener("DOMContentLoaded", (event) => {
        (async function(event) {

            updateSiteColors(configParams.side1);
            DebugUtil.enableLog();

            const panel3dConfig = await createConfig(configParams);
            DebugUtil.log('Panel config', JSON.stringify(panel3dConfig));

            const panel3d = new TmFv3DCustom(panel3dConfig);
            panel3d.render();

            const sequenceViewerContainerId = panel3dConfig.sequencePanelConfig.config.customViewContainerId;
            if (sequenceViewerContainerId) {
                const destinationContainer = `${configParams.elementId}_${RcsbFvDOMConstants.PFV_APP_ID}`;
                console.log(sequenceViewerContainerId, destinationContainer);
                watchNodeChanges(destinationContainer, () => arrange(sequenceViewerContainerId, destinationContainer));
            }

        })();
    });
}

export function arrange(childId: string, parentId: string) {
    const child = document.getElementById(childId);
    if (!child) {
        console.warn(`DOM node '${childId}' not found`);
        return;
    }
    document.getElementById(parentId)?.appendChild(child);
    child.style.visibility = "visible";
}

async function watchNodeChanges(elementId: string, action: () => void, retryCount: number = 5) {

    const targetNode = document.getElementById(elementId);
    if (!targetNode) {
        console.warn(`DOM node not found with id '${elementId}'`);
        if (retryCount > 0) {
            console.warn("Retrying later");
            setTimeout(() => {
                console.log(`Running watchNodeChanges again with '${elementId}'`);
                watchNodeChanges(elementId, action, retryCount - 1);
            }, 500);
        }
        return;
    }

    action();
}

async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface> {
    const pdbEntry = configParams.pdbEntry;
    const labelAsymId = configParams.labelAsymId;
    const params: any = {
        title: configParams.title,
        subtitle: configParams.subtitle,
        side1: configParams.side1,
        htpEntry: configParams.htpEntry,
        pdbEntry: configParams.pdbEntry,
        structureUrl: configParams.structureUrl!,
        labelAsymId: labelAsymId,
        pdbtmEntry: `${pdbEntry}_${labelAsymId}`
    };

    if (pdbEntry) {
        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);
    }

    const { sequenceConfig, molstarConfig } = await createFeatureViewerConfing(params);
    const panel3dConfig: RcsbFv3DCustomInterface = {
        elementId: configParams.elementId,
        sequencePanelConfig: sequenceConfig,
        structurePanelConfig: molstarConfig
    };
    panel3dConfig.sequencePanelConfig.config.customViewContainerId = configParams.customViewContainerId;

    molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
    (molstarConfig as any).loadConfig.loadParams.params = {
        preset: { modelIndex: 0 }
    }

    return panel3dConfig;
}

export {
    DebugUtil,
    createRcsb3DViewer,
    createRcsbFeatureViewer,
    TmFv1DElement
};