Issue #877: further tm build stuff + clean ups

package.json

@@ -17,14 +17,17 @@
     "jest": "jest",
     "build": "npm run build-tsc && npm run build-extra && npm run build-webpack",
     "build-tm": "npm run build-tsc && npm run build-extra && npm run build-webpack-tm",
+    "build-tm-renderer": "npm run build-tsc-renderer && npm run build-webpack-tm-renderer",
     "clean": "node ./scripts/clean.js",
     "rebuild": "npm run clean && npm run build",
     "build-viewer": "npm run build-tsc && npm run build-extra && npm run build-webpack-viewer",
     "build-tsc": "concurrently \"tsc --incremental\" \"tsc --build tsconfig.commonjs.json --incremental\"",
+    "build-tsc-renderer": "concurrently \"tsc --incremental\" \"tsc --build tsconfig.renderer.json --incremental\"",
     "build-extra": "cpx \"src/**/*.{scss,html,ico,jpg}\" lib/",
     "build-webpack": "webpack --mode production --config ./webpack.config.production.js",
     "build-webpack-viewer": "webpack --mode production --config ./webpack.config.viewer.js",
     "build-webpack-tm": "webpack --mode production --config ./webpack.config.tm-viewer.js",
+    "build-webpack-tm-renderer": "webpack --mode production --config ./webpack.config.tm-renderer.js",
     "watch": "concurrently -c \"green,green,gray,gray\" --names \"tsc,srv,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-servers\" \"npm:watch-extra\" \"npm:watch-webpack\"",
     "watch-viewer": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer\"",
     "watch-viewer-debug": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer-debug\"",

src/TmFv3DApp/TmTrajectoryHierarchyPreset.ts

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-/**
- * Copyright (C) 2023, Protein Bioinformatics Research Group, RCNS
- *
- * Licensed under CC BY-NC 4.0, see LICENSE file for more info.
- *
- * @author Gabor Tusnady <tusnady.gabor@ttk.hu>
- * @author Csongor Gerdan <gerdan.csongor@ttk.hu>
- */
-
-import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
-import { TrajectoryHierarchyPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset';
-import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects';
-import {
-    StateObjectSelector,
-    StateObjectRef,
-} from 'molstar/lib/mol-state';
-import { MembraneOrientationPreset } from './tmdet-extension/behavior';
-import { StateTransforms } from 'molstar/lib/mol-plugin-state/transforms';
-import { TmDetDescriptorCache } from './tmdet-extension/prop';
-import { registerTmDetSymmetry } from './tmdet-extension/symmetry';
-import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
-
-const RcsbParams = () => ({
-    preset: PD.Value<PresetProps>({ kind: 'standard', assemblyId: '' }, { isHidden: true })
-});
-
-export const TmDetRcsbPreset = TrajectoryHierarchyPresetProvider({
-    id: 'tmdet-preset-trajectory-rcsb',
-    display: { name: 'TMDET RCSB Preset' },
-    isApplicable: () => true,
-    params: RcsbParams,
-    async apply(trajectory: StateObjectRef<PluginStateObject.Molecule.Trajectory>, params, plugin) {
-        console.log('TMDET RCSB PRESET: apply start', params);
-        const entryId = (trajectory as any).obj?.data.representative.entryId;
-        console.log('TRAJECTORY entry ID:', entryId);
-        const descriptor = TmDetDescriptorCache.get(entryId);
-        registerTmDetSymmetry(descriptor!);
-
-        const modelParams = { modelIndex: 0 };
-
-        const props = {
-            type: {
-                name: 'assembly' as const,
-                params: { id: '1' }
-            }
-        };
-
-        await plugin.state.data.build().to(trajectory)
-            .apply(StateTransforms.Model.ModelFromTrajectory, modelParams, { ref: 'model' })
-            .apply(StateTransforms.Model.StructureFromModel, props, { ref: 'assembly' })
-            .commit();
-
-        const builder = plugin.builders.structure;
-        const model = new StateObjectSelector(plugin.state.data.build().to('model').ref, plugin.state.data);
-        const modelProperties = await builder.insertModelProperties(model.ref);
-        const structure = new StateObjectSelector(plugin.state.data.build().to('assembly').ref, plugin.state.data);
-        const structureProperties = await builder.insertStructureProperties(structure);
-        const representation = await plugin.builders.structure.representation.applyPreset<any>(structureProperties, MembraneOrientationPreset, {});
-
-
-        (window as any).plugin = plugin;
-
-        const result = {
-            model,
-            modelProperties,
-            unitcell: undefined,
-            structure,
-            structureProperties,
-            representation
-        };
-        console.log('TmDetRcsbPreset apply result', result);
-
-        return result;
-    }
-});

src/TmFv3DApp/index.html

@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>RCSB PDB 1D3D Viewer</title>
-    <script src="./tm-saguaro.js"></script>
-    <script defer type="module">
-      function getParam(name, regex, defaultValue) {
-          var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
-          return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || defaultValue);
-      }
-
-      var configs = {
-        "6bms_A": {
-          title: 'TmSaguaro Example',
-          subtitle: 'ZDH15 data',
-          elementId: "tmSaguaro",
-          pdbEntry: "6bms",
-          labelAsymId: "A",
-          side1: "Inside",
-          configData: "./zdh15_saguaro_6bms_A.json",
-          annotationData: "./6bms.json"
-        },
-        "7khm_A": {
-          title: 'TmSaguaro Example II',
-          subtitle: 'ZDH15 data',
-          elementId: "tmSaguaro",
-          pdbEntry: "7khm",
-          labelAsymId: "A",
-          side1: "Outside",
-          configData: "./zdh15_saguaro_7khm_A.json",
-          annotationData: "./7khm.json"
-        },
-        "7khm_B": {
-          title: 'TmSaguaro Example III',
-          subtitle: 'ZDH15 data',
-          elementId: "tmSaguaro",
-          pdbEntry: "7khm",
-          labelAsymId: "B",
-          side1: "Outside",
-          configData: "./zdh15_saguaro_7khm_B.json",
-          annotationData: "./7khm.json"
-        },
-        "3pcv_A": {
-          title: 'TmSaguaro Example IV',
-          subtitle: '3pcv data',
-          elementId: "tmSaguaro",
-          pdbEntry: "3pcv",
-          labelAsymId: "A",
-          side1: "Outside",
-          configData: "./3pcv_saguaro_A.json",
-          annotationData: "./3pcv.json"
-        }
-      };
-      var item = getParam("entry", ".+_.+", "3pcv_A");
-      console.log("Selected config item:", item);
-      tmSaguaro.createRcsb3DViewer(configs[item]);
-    </script>
-</head>
-<style>
-    .ult_side1 { fill: #f88; }
-    .ult_side2 { fill: #88f; }
-    .ult_beta { fill: #ff0; }
-    .ult_coil { fill: #ff0; }
-    .ult_ifh { fill: #0f0; }
-    .ult_alpha { fill: #ff0; }
-    .ult_mebins { fill: #f0f; }
-    .ult_reentrant { fill: #f80; }
-    .ult_unknown { fill: #aaa; }
-    .ult_membrane { fill: #ff0; }
-    .ult_inside { fill: #f00; }
-    .ult_outside { fill: #00f; }
-    .ult_not_inside { fill: #08f; }
-    .ult_not_outside { fill: #f04; }
-    .ult_not_membrane { fill: #f0f; }
-    .ult_signal { fill: #000; }
-    .ult_propeptide { fill: #000; }
-    .ult_transit { fill: #000; }
-    .ult_cleavable { fill: #000; }
-    .ult_domain { fill: #aaf; }
-    .ult_periplasm { fill: #f0f; }
-  </style>
-<body>
-
-<div id="select" ></div>
-<div id="selectBis" ></div>
-
-</body>
-</html>

src/TmFv3DApp/index.tsx

@@ -1,132 +0,0 @@
-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";
-import { BlockSelectorManager, FeatureBlockInterface } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
-import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
-
-customElements.define(TmFv1DElement.TagName, 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;
-    panel3dConfig.sequencePanelConfig.config.selectorContainerId = configParams.selectorContainerId;
-    panel3dConfig.sequencePanelConfig.config.blockSelectorElement = createBlockSelectorCreator(
-        sequenceConfig.config.blockConfig as Array<BlockConfigType>
-    );
-    panel3dConfig.sequencePanelConfig.config.blockChangeCallback = () => window.dispatchEvent(new Event('resize'));
-
-    molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
-    (molstarConfig as any).loadConfig.loadParams.params = {
-        preset: { modelIndex: 0 }
-    }
-
-    return panel3dConfig;
-}
-
-type BlockSelectorCreator = (blockSelectorManager: BlockSelectorManager) => JSX.Element;
-type BlockConfigType = FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>;
-
-function createBlockSelectorCreator(blockConfigs: Array<BlockConfigType>): BlockSelectorCreator {
-    return (blockSelectorManager: BlockSelectorManager) => {
-        return (
-            <select onChange={(e)=>{blockSelectorManager.setActiveBlock(e.target.value)}}>
-            {
-                blockConfigs.map((el) =>
-                    (<option key={el.blockId} value={el.blockId}>{el.blockShortName}</option>))
-            }
-            </select>
-        );
-    };
-}
-
-export {
-    DebugUtil,
-    createRcsb3DViewer,
-    createRcsbFeatureViewer,
-    TmFv1DElement
-};

webpack.config.tm-renderer.js

@@ -0,0 +1,5 @@
+const common = require('./webpack.config.common.js');
+const createNodeEntryPoint = common.createNodeEntryPoint;
+module.exports = [
+    createNodeEntryPoint('index', 'commonjs/TmImageRenderer', 'tmRenderer')
+];