首页 发现 帮助
登录
web
/
TmMolStar
3
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Issue #959: new TmMol* implementation

cycle20 5 月之前
父节点
4a5720d686
当前提交
f255083603
共有 6 个文件被更改，包括 363 次插入 和 1 次删除
分列视图 显示文件统计
  1. 80 0
      src/Tm3DStandaloneApp/TmTrajectoryHierarchyPreset.ts
  2. 89 0
      src/Tm3DStandaloneApp/index.html
  3. 64 0
      src/Tm3DStandaloneApp/index.tsx
  4. 56 0
      src/Tm3DStandaloneApp/tmdet-viewer/TmMolstarManagerFactory.ts
  5. 59 0
      src/Tm3DStandaloneApp/tmdet-viewer/TmViewer.ts
  6. 15 1
      webpack.tm-saguaro.config.js

+ 80 - 0
src/Tm3DStandaloneApp/TmTrajectoryHierarchyPreset.ts
查看文件 

@@ -0,0 +1,80 @@
 
+/**
 
+ * 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 '../TmFv3DApp/tmdet-extension/behavior';
 
+import { StateTransforms } from 'molstar/lib/mol-plugin-state/transforms';
 
+import { TmDetDescriptorCache } from '../TmFv3DApp/tmdet-extension/prop';
 
+import { registerTmDetSymmetry } from '../TmFv3DApp/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;
 
+    }
 
+});

+ 89 - 0
src/Tm3DStandaloneApp/index.html
查看文件 

@@ -0,0 +1,89 @@
 
+<!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>

+ 64 - 0
src/Tm3DStandaloneApp/index.tsx
查看文件 

@@ -0,0 +1,64 @@
 
+import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
 
+import { fetchDescriptor, registerRegionDescriptorData } from "../TmFv3DApp/UniTmpHelper";
 
+import { updateSiteColors } from "../TmFv3DApp/tmdet-extension/tmdet-color-theme";
 
+import * as React from "react";
 
+import { TmViewer } from "./tmdet-viewer/TmViewer";
 
+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 { ObjectKeys } from "molstar/lib/commonjs/mol-util/type-helpers";
 
+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,
 
+        layoutShowControls: true,
 
+        layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
 
+        layoutShowSequence: true,
 
+        layoutShowLog: 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 = true,
 
+    viewerProps: Partial<ViewerProps> = viewerParams) {
 
+
 
+    if (deferred) {
 
+        document.addEventListener("DOMContentLoaded", (event) => {
 
+            (async function(event) {
 
+
 
+                updateSiteColors(configParams.side1);
 
+                DebugUtil.enableLog();
 
+                const viewer = new TmViewer(elementId, {
 
+                    ...viewerProps,
 
+                    layoutShowControls:false,
 
+                    layoutShowSequence: true,
 
+                    showWelcomeToast: false,
 
+                    canvas3d: {
 
+                        multiSample: {
 
+                            mode: 'off'
 
+                        }
 
+                    }
 
+                });
 
+                callBack(viewer.plugin);
 
+            })();
 
+        });
 
+    }
 
+}
 
+
 
+export {
 
+    createTmdetViewer,
 
+    DebugUtil
 
+};

+ 56 - 0
src/Tm3DStandaloneApp/tmdet-viewer/TmMolstarManagerFactory.ts
查看文件 

@@ -0,0 +1,56 @@
 
+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
 
+        }
 
+    }
 
+
 
+}

+ 59 - 0
src/Tm3DStandaloneApp/tmdet-viewer/TmViewer.ts
查看文件 

@@ -0,0 +1,59 @@
 
+/**
 
+ * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
 
+ *
 
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
 
+ * @author Joan Segura <joan.segura@rcsb.org>
 
+ * @author Yana Rose <yana.rose@rcsb.org>
 
+ * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
 
+ */
 
+/**
 
+ * 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 { Viewer, ViewerProps } from '@rcsb/rcsb-molstar/build/src/viewer';
 
+import { TmDetColorThemeProvider } 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';
 
+
 
+export class TmViewer extends Viewer {
 
+
 
+    constructor(elementOrId: string | HTMLElement, props: Partial<ViewerProps> = {}) {
 
+        console.log("TmViewer constructor");
 
+        super(elementOrId, props);
 
+
 
+        this.initBehavior();
 
+    }
 
+
 
+    public async initBehavior() {
 
+        let tree = this.plugin.state.behaviors.build();
 
+
 
+
 
+        this.plugin.builders.structure.representation.registerPreset(MembraneOrientationPreset);
 
+        this.plugin.representation.structure.themes.colorThemeRegistry.add(TmDetColorThemeProvider);
 
+        this.plugin.managers.lociLabels.addProvider(TmDetLabelProvider);
 
+
 
+        await this.plugin.runTask(this.plugin.state.behaviors.updateTree(tree, { doNotUpdateCurrent: true, doNotLogTiming: true }));
 
+    }
 
+
 
+    loadStructureFromUrl<P, S>(url: string, format: BuiltInTrajectoryFormat, isBinary: boolean, config?: {
 
+        props?: PresetProps & {
 
+            dataLabel?: string;
 
+        };
 
+        matrix?: Mat4;
 
+        reprProvider?: TrajectoryHierarchyPresetProvider<P, S>;
 
+        params?: P;
 
+    }): Promise<any> {
 
+        return super.loadStructureFromUrl(url, format, isBinary, config);
 
+    }
 
+
 
+}
 
+

+ 15 - 1
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,6 +58,20 @@ 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;