صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
web
/
TmMolStar
3
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

Issue #805: custom manager factory and TmFv3DCustom

cycle20 1 سال پیش
والد
69b8ea9129
کامیت
0602248af0
4فایلهای تغییر یافته به همراه207 افزوده شده و 35 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 37 0
      src/examples/assembly-tm/index.html
  2. 58 35
      src/examples/assembly-tm/index.ts
  3. 56 0
      src/examples/assembly-tm/tmdet-viewer/TmFv3DCustom.tsx
  4. 56 0
      src/examples/assembly-tm/tmdet-viewer/TmMolstarManagerFactory.ts

+ 37 - 0
src/examples/assembly-tm/index.html
مشاهده فایل 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>RCSB PDB 1D3D Viewer</title>
 
+    <script src="./tm-saguaro.js"></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>

+ 58 - 35
src/examples/assembly-tm/index.ts
مشاهده فایل 

@@ -1,42 +1,65 @@
 
-import {RcsbFv3DCustom, RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 
+import { RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 
 import { DebugUtil } from "./tmdet-extension/debug-utils";
 
 import { createFeatureViewerConfing } from "./FeatureViewConfig";
 
 import { registerRegionDescriptorData } from "./UniTmpHelper";
 
+import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
 
 
 export { DebugUtil };
 
 
-document.addEventListener("DOMContentLoaded", (event) => {
 
-    (async function(event) {
 
-
 
-        DebugUtil.enableLog();
 
-
 
-        const pdbEntry = "6f7h";
 
-        const labelAsymId = "C";
 
-        const params = {
 
-            side1: "Inside",
 
-            htpEntry: "AQP10_HUMAN",
 
-            pdbEntry: pdbEntry,
 
-            labelAsymId: labelAsymId,
 
-            pdbtmEntry: `${pdbEntry}_${labelAsymId}`
 
-        };
 
-
 
-        const descriptorUrl = `/${pdbEntry}.json`;
 
-        registerRegionDescriptorData(descriptorUrl, params.side1 as any);
 
-
 
-        const { sequenceConfig, molstarConfig } = await createFeatureViewerConfing(params);
 
-        const panel3dConfig: RcsbFv3DCustomInterface = {
 
-            elementId: "null",
 
-            sequencePanelConfig: sequenceConfig,
 
-            structurePanelConfig: molstarConfig
 
-        };
 
-        molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
 
-        (molstarConfig as any).loadConfig.loadParams.params = {
 
-            preset: { modelIndex: 0 }
 
-        }
 
-        DebugUtil.log('Panel config', panel3dConfig);
 
-
 
-        const panel3d = new RcsbFv3DCustom(panel3dConfig);
 
-        panel3d.render();
 
-
 
-    })();
 
+export function createViewer(configParams: any) {
 
+    document.addEventListener("DOMContentLoaded", (event) => {
 
+        (async function(event) {
 
+
 
+            DebugUtil.enableLog();
 
+
 
+            const panel3dConfig = await createConfig({
 
+                elementId: configParams.elementId,
 
+                pdbEntry: configParams.pdbEntry,
 
+                labelAsymId: configParams.labelAsymId,
 
+                side1: configParams.side1,
 
+                htpEntry: configParams.htpEntry,
 
+            });
 
+            DebugUtil.log('Panel config', panel3dConfig);
 
+
 
+            const panel3d = new TmFv3DCustom(panel3dConfig);
 
+            panel3d.render();
 
+
 
+        })();
 
+    });
 
+}
 
+
 
+async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface> {
 
+    const pdbEntry = configParams.pdbEntry;
 
+    const labelAsymId = configParams.labelAsymId;
 
+    const params = {
 
+        side1: configParams.side1,
 
+        htpEntry: configParams.htpEntry,
 
+        pdbEntry: configParams.pdbEntry,
 
+        labelAsymId: labelAsymId,
 
+        pdbtmEntry: `${pdbEntry}_${labelAsymId}`
 
+    };
 
+
 
+    const descriptorUrl = `/${pdbEntry}.json`;
 
+    registerRegionDescriptorData(descriptorUrl, params.side1 as any);
 
+
 
+    const { sequenceConfig, molstarConfig } = await createFeatureViewerConfing(params);
 
+    const panel3dConfig: RcsbFv3DCustomInterface = {
 
+        elementId: configParams.elementId,
 
+        sequencePanelConfig: sequenceConfig,
 
+        structurePanelConfig: molstarConfig
 
+    };
 
+    molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
 
+    (molstarConfig as any).loadConfig.loadParams.params = {
 
+        preset: { modelIndex: 0 }
 
+    }
 
+
 
+    return panel3dConfig;
 
+}
 
+
 
+createViewer({
 
+    elementId: "tmSaguaro",
 
+    pdbEntry: "6f7h",
 
+    labelAsymId: "C",
 
+    side1: "Inside",
 
+    htpEntry: "AQP10_HUMAN"
 
 });

+ 56 - 0
src/examples/assembly-tm/tmdet-viewer/TmFv3DCustom.tsx
مشاهده فایل 

@@ -0,0 +1,56 @@
 
+
 
+import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../../../RcsbFvStructure/RcsbFvStructure";
 
+import {CustomViewInterface} from "../../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 
+import uniqid from "uniqid";
 
+import {
 
+    LoadMolstarInterface,
 
+    LoadMolstarReturnType
 
+} from "../../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
+import {StructureViewer} from "../../../RcsbFvStructure/StructureViewers/StructureViewer";
 
+import {RcsbFv3DCssConfig} from "../../../RcsbFv3D/RcsbFv3DComponent";
 
+import {NullBehaviourObserver} from "../../../RcsbFvStructure/StructureViewerBehaviour/NullBehaviour";
 
+import {MolstarTools} from "../../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 
+import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 
+import {RcsbFv3DCustomAbstract} from "../../../RcsbFv3D/RcsbFv3DCustomAbstract";
 
+import { TmMolstarManagerFactory } from "./TmMolstarManagerFactory";
 
+
 
+export interface RcsbFv3DCustomInterface  {
 
+    elementId?: string;
 
+    structurePanelConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}>;
 
+    sequencePanelConfig: {
 
+        config: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>;
 
+        title?: string;
 
+        subtitle?: string;
 
+    }
 
+    cssConfig?: RcsbFv3DCssConfig;
 
+
 
+}
 
+
 
+export class TmFv3DCustom extends RcsbFv3DCustomAbstract<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> {
 
+
 
+    constructor(params: RcsbFv3DCustomInterface) {
 
+        const elementId: string = params.elementId ?? uniqid("TmDetFv3D_");
 
+        super({
 
+            elementId: elementId,
 
+            structureConfig: {
 
+                loadConfig: params.structurePanelConfig.loadConfig,
 
+                structureViewerConfig:{
 
+                    ...params.structurePanelConfig.structureViewerConfig,
 
+                    viewerElement:RcsbFvStructure.componentId(elementId),
 
+                }
 
+            },
 
+            sequenceConfig:{
 
+                ...params.sequencePanelConfig,
 
+            },
 
+            structureViewer:new StructureViewer<
 
+                LoadMolstarInterface<unknown,unknown>,
 
+                LoadMolstarReturnType,
 
+                {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
 
+            >( new TmMolstarManagerFactory(getModelIdFromTrajectory) ),
 
+            structureViewerBehaviourObserver: new NullBehaviourObserver<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>(),
 
+            cssConfig: params.cssConfig
 
+        });
 
+    }
 
+
 
+}

+ 56 - 0
src/examples/assembly-tm/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
 
+        }
 
+    }
 
+
 
+}