Halaman utama Jelajahi Bantuan
Masuk
web
/
TmMolStar
3
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Issue #2: buttons for quick access of various test structures

cycle20 2 tahun lalu
induk
506957daa1
melakukan
9632590068
4 mengubah file dengan 69 tambahan dan 25 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 54 10
      src/apps/tm-viewer/index.html
  2. 13 13
      src/extensions/tmdet/behavior.ts
  3. 1 1
      src/extensions/tmdet/prop.ts
  4. 1 1
      src/extensions/tmdet/tmdet-color-theme.ts

+ 54 - 10
src/apps/tm-viewer/index.html
Tampilan Berkas 

@@ -33,26 +33,70 @@
 
                 width: 800px;
 
                 height: 600px;
 
             }
 
+
 
+            #controls {
 
+                position: absolute;
 
+                width: 150px;
 
+                bottom: 100px;
 
+                right: 50px;
 
+                z-index: 10;
 
+                font-family: sans-serif;
 
+                font-size: smaller;
 
+            }
 
+
 
+            #controls > button {
 
+                display: block;
 
+                width: 100%;
 
+                text-align: left;
 
+                margin: 5px 0px;
 
+            }
 
+
 
+            #controls > input, #controls > select {
 
+                width: 100%;
 
+                display: block;
 
+            }
 
         </style>
 
         <link rel="stylesheet" type="text/css" href="molstar.css" />
 
     </head>
 
     <body>
 
+         <div id="controls"></div>
 
         <div id="app"></div>
 
         <script type="text/javascript" src="./tm_molstar.js"></script>
 
         <script type="text/javascript">
 
+            // init viewer
 
             var viewer = new tm_molstar.Viewer('app', {
 
-                layoutShowControls: true,
 
+                layoutShowControls: false,
 
                 viewportShowExpand: true,
 
-                collapseLeftPanel: false
 
-            });
 
-            // Set PDB Id here
 
-            var pdbId = '1a0s';
 
-            pdbId = '2atk';
 
-            // pdbId = '1afo';
 
-            tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
 
-                structureUrl: `https://cs.litemol.org/${pdbId}/full`,
 
-                regionDescriptorUrl: `http://localhost:8000/build/data/${pdbId}.json`,
 
+                collapseLeftPanel: true
 
             });
 
+
 
+            function load(pdbId) {
 
+                    viewer.plugin.clear();
 
+                    tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {
 
+                    structureUrl: `https://cs.litemol.org/${pdbId}/full`,
 
+                    regionDescriptorUrl: `http://localhost:8000/build/data/${pdbId}.json`,
 
+                });
 
+            }
 
+
 
+            function $(id) { return document.getElementById(id); }
 
+
 
+            function addControl(label, action) {
 
+                var btn = document.createElement('button');
 
+                btn.onclick = action;
 
+                btn.innerText = label;
 
+                $('controls').appendChild(btn);
 
+            }
 
+
 
+            let idList = [
 
+                '1a0s', // PASSED
 
+                '2atk', // PASSED
 
+                '1afo', // PASSED
 
+                '1xl4', // PASSED
 
+                '1xl6', // PASSED
 
+                '4x8a', // TODO: something is very wrong with membrane planes
 
+                '6xvf', // TODO: something is very wrong with membrane planes
 
+            ];
 
+            idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));
 
         </script>
 
     </body>
 
 </html>

+ 13 - 13
src/extensions/tmdet/behavior.ts
Tampilan Berkas 

@@ -27,12 +27,13 @@ import { StripedResidues } from './coloring';
 
 import { TmDetColorThemeProvider } from './tmdet-color-theme';
 
 
 const Tag = MembraneOrientation.Tag;
 
+const TMDET_MEMBRANE_ORIENTATION = 'Membrane Orientation';
 
 
 export const TMDETMembraneOrientation = PluginBehavior.create<{ autoAttach: boolean }>({
 
     name: 'tmdet-membrane-orientation-prop',
 
     category: 'custom-props',
 
     display: {
 
-        name: 'Membrane Orientation',
 
+        name: TMDET_MEMBRANE_ORIENTATION,
 
         description: 'Data calculated with TMDET algorithm.'
 
     },
 
     ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean }> {
 
@@ -190,18 +191,16 @@ async function loadStructure(ctx: PluginUIContext, params: any, pdbtmDescriptor:
 
 
 //
 
 
-export { MembraneOrientation3D };
 
-
 
-type MembraneOrientation3D = typeof MembraneOrientation3D
 
+type MembraneOrientation3DType = typeof MembraneOrientation3D
 
 const MembraneOrientation3D = PluginStateTransform.BuiltIn({
 
-    name: 'membrane-orientation-3d',
 
+    name: Tag.Representation,
 
     display: {
 
-        name: 'Membrane Orientation',
 
+        name: TMDET_MEMBRANE_ORIENTATION,
 
         description: 'Membrane Orientation planes and rims. Data calculated with TMDET algorithm.'
 
     },
 
     from: PluginStateObject.Molecule.Structure,
 
     to: PluginStateObject.Shape.Representation3D,
 
-    params: (a) => {
 
+    params: () => {
 
         return {
 
             ...MembraneOrientationParams,
 
         };
 
@@ -211,7 +210,7 @@ const MembraneOrientation3D = PluginStateTransform.BuiltIn({
 
         return true;
 
     },
 
     apply({ a, params }, plugin: PluginContext) {
 
-        return Task.create('Membrane Orientation', async ctx => {
 
+        return Task.create(TMDET_MEMBRANE_ORIENTATION, async ctx => {
 
             await MembraneOrientationProvider.attach({ runtime: ctx, assetManager: plugin.managers.asset }, a.data);
 
             const repr = MembraneOrientationRepresentation({ webgl: plugin.canvas3d?.webgl, ...plugin.representation.structure.themes }, () => MembraneOrientationParams);
 
             await repr.createOrUpdate(params, a.data).runInContext(ctx);
 
@@ -219,7 +218,7 @@ const MembraneOrientation3D = PluginStateTransform.BuiltIn({
 
         });
 
     },
 
     update({ a, b, newParams }, plugin: PluginContext) {
 
-        return Task.create('Membrane Orientation', async ctx => {
 
+        return Task.create(TMDET_MEMBRANE_ORIENTATION, async ctx => {
 
             await MembraneOrientationProvider.attach({ runtime: ctx, assetManager: plugin.managers.asset }, a.data);
 
             const props = { ...b.data.repr.props, ...newParams };
 
             await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
 
@@ -235,7 +234,7 @@ const MembraneOrientation3D = PluginStateTransform.BuiltIn({
 
 export const MembraneOrientationPreset = StructureRepresentationPresetProvider({
 
     id: 'preset-membrane-orientation',
 
     display: {
 
-        name: 'Membrane Orientation', group: 'Annotation',
 
+        name: TMDET_MEMBRANE_ORIENTATION, group: 'Annotation',
 
         description: 'Shows orientation of membrane layers. Data calculated with TMDET algorithm.' // TODO add ' or obtained via RCSB PDB'
 
     },
 
     isApplicable(a) {
 
@@ -248,12 +247,13 @@ export const MembraneOrientationPreset = StructureRepresentationPresetProvider({
 
         if (!structureCell || !structure) return {};
 
 
         if (!MembraneOrientationProvider.get(structure).value) {
 
-            await plugin.runTask(Task.create('Membrane Orientation', async runtime => {
 
+            await plugin.runTask(Task.create(TMDET_MEMBRANE_ORIENTATION, async runtime => {
 
                 await MembraneOrientationProvider.attach({ runtime, assetManager: plugin.managers.asset }, structure);
 
             }));
 
         }
 
 
         const membraneOrientation = await tryCreateMembraneOrientation(plugin, structureCell);
 
+        // TODO: change colorTheme!!!
 
         const colorTheme = HydrophobicityColorThemeProvider.name as any;
 
         const preset = await PresetStructureRepresentations.auto.apply(ref, { ...params, theme: { globalName: colorTheme, focus: { name: colorTheme } } }, plugin);
 
 
@@ -261,9 +261,9 @@ export const MembraneOrientationPreset = StructureRepresentationPresetProvider({
 
     }
 
 });
 
 
-export function tryCreateMembraneOrientation(plugin: PluginContext, structure: StateObjectRef<PMS>, params?: StateTransformer.Params<MembraneOrientation3D>, initialState?: Partial<StateTransform.State>) {
 
+export function tryCreateMembraneOrientation(plugin: PluginContext, structure: StateObjectRef<PMS>, params?: StateTransformer.Params<MembraneOrientation3DType>, initialState?: Partial<StateTransform.State>) {
 
     const state = plugin.state.data;
 
     const membraneOrientation = state.build().to(structure)
 
-        .applyOrUpdateTagged('membrane-orientation-3d', MembraneOrientation3D, params, { state: initialState });
 
+        .applyOrUpdateTagged(Tag.Representation, MembraneOrientation3D, params, { state: initialState });
 
     return membraneOrientation.commit({ revertOnError: true });
 
 }

+ 1 - 1
src/extensions/tmdet/prop.ts
Tampilan Berkas 

@@ -59,7 +59,7 @@ namespace MembraneOrientation {
 
 }
 
 
 export const MembraneOrientationProvider: CustomStructureProperty.Provider<MembraneOrientationParams, MembraneOrientation> = CustomStructureProperty.createProvider({
 
-    label: 'Membrane Orientation',
 
+    label: 'TMDET Membrane Orientation Provider',
 
     descriptor: CustomPropertyDescriptor({
 
         name: 'tmdet_computed_membrane_orientation',
 
         symbols: MembraneOrientation.symbols,

+ 1 - 1
src/extensions/tmdet/tmdet-color-theme.ts
Tampilan Berkas 

@@ -58,7 +58,7 @@ function getColor(location: Location, chains: PDBTMChain[]): Color {
 
         const chainId = atomicHierarchy.chains.auth_asym_id.value(chainIdx).toString();
 
 
         color = residueColor(chainList, chainId, authId);
 
-        console.log(`chain: ${chainId} res: ${authId}`);
 
+        //console.log(`chain: ${chainId} res: ${authId}`);
 
     }
 
     return color;
 
 }