Home Explore Help
Sign In
web
/
TmMolStar
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Proteopedia wrapper fixes, ui fixes, animation tweaks

David Sehnal 6 years ago
parent
3f93eb11e3
commit
2e0e7ca7ed
6 changed files with 68 additions and 28 deletions
Split View Show Diff Stats
  1. 36 18
      src/examples/proteopedia-wrapper/index.html
  2. 20 0
      src/examples/proteopedia-wrapper/index.ts
  3. 2 0
      src/mol-plugin/context.ts
  4. 4 4
      src/mol-plugin/state/animation/built-in.ts
  5. 2 2
      src/mol-plugin/state/transforms/model.ts
  6. 4 4
      src/mol-plugin/ui/plugin.tsx

+ 36 - 18
src/examples/proteopedia-wrapper/index.html
View File 

@@ -47,7 +47,7 @@
 
     <body>
 
         <div id='controls'>
 
             <h3>Source</h3>
 
-            <input type='text' id='url' placeholder='url' />
 
+            <input type='text' id='url' placeholder='url' style='width: 400px' />
 
             <input type='text' id='assemblyId' placeholder='assembly id' />
 
             <select id='format'>
 
                 <option value='cif' selected>CIF</option>
 
@@ -57,7 +57,9 @@
 
         <div id="app"></div>
 
         <script>  
             // create an instance of the plugin
 
-            var MolStarProteopediaWrapper = new MolStarProteopediaWrapper();
 
+            var PluginWrapper = new MolStarProteopediaWrapper();
 
+
 
+            console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR);
 
 
             function $(id) { return document.getElementById(id); }
 
         
@@ -76,22 +78,22 @@
 
             // var format = 'pdb';
 
             // var assemblyId = 'deposited';
 
 
-            MolStarProteopediaWrapper.init('app' /** or document.getElementById('app') */);
 
-            MolStarProteopediaWrapper.setBackground(0xffffff);
 
-            MolStarProteopediaWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
-            MolStarProteopediaWrapper.toggleSpin();
 
+            PluginWrapper.init('app' /** or document.getElementById('app') */);
 
+            PluginWrapper.setBackground(0xffffff);
 
+            PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
+            PluginWrapper.toggleSpin();
 
 
-            MolStarProteopediaWrapper.events.modelInfo.subscribe(function (info) {
 
+            PluginWrapper.events.modelInfo.subscribe(function (info) {
 
                 console.log('Model Info', info);
 
             });
 
 
-            addControl('Load Asym Unit', () => MolStarProteopediaWrapper.load({ url: url, format: format }));
 
-            addControl('Load Assembly', () => MolStarProteopediaWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
 
+            addControl('Load Asym Unit', () => PluginWrapper.load({ url: url, format: format }));
 
+            addControl('Load Assembly', () => PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
 
 
             addSeparator();
 
 
             addHeader('Camera');
 
-            addControl('Toggle Spin', () => MolStarProteopediaWrapper.toggleSpin());
 
+            addControl('Toggle Spin', () => PluginWrapper.toggleSpin());
 
             
             addSeparator();
 
 
@@ -99,19 +101,35 @@
 
 
             // adjust this number to make the animation faster or slower
 
             // requires to "restart" the animation if changed
 
-            MolStarProteopediaWrapper.animate.modelIndex.maxFPS = 30;
 
+            PluginWrapper.animate.modelIndex.maxFPS = 30;
 
 
-            addControl('Play To End', () => MolStarProteopediaWrapper.animate.modelIndex.onceForward());
 
-            addControl('Play To Start', () => MolStarProteopediaWrapper.animate.modelIndex.onceBackward());
 
-            addControl('Play Palindrome', () => MolStarProteopediaWrapper.animate.modelIndex.palindrome());
 
-            addControl('Play Loop', () => MolStarProteopediaWrapper.animate.modelIndex.loop());
 
-            addControl('Stop', () => MolStarProteopediaWrapper.animate.modelIndex.stop());
 
+            addControl('Play To End', () => PluginWrapper.animate.modelIndex.onceForward());
 
+            addControl('Play To Start', () => PluginWrapper.animate.modelIndex.onceBackward());
 
+            addControl('Play Palindrome', () => PluginWrapper.animate.modelIndex.palindrome());
 
+            addControl('Play Loop', () => PluginWrapper.animate.modelIndex.loop());
 
+            addControl('Stop', () => PluginWrapper.animate.modelIndex.stop());
 
 
             addSeparator();
 
             addHeader('Misc');
 
 
-            addControl('Apply Evo Cons', () => MolStarProteopediaWrapper.coloring.evolutionaryConservation());
 
-            addControl('Default Visuals', () => MolStarProteopediaWrapper.updateStyle());
 
+            addControl('Apply Evo Cons', () => PluginWrapper.coloring.evolutionaryConservation());
 
+            addControl('Default Visuals', () => PluginWrapper.updateStyle());
 
+
 
+            addSeparator();
 
+            addHeader('State');
 
+
 
+            var snapshot;
 
+            addControl('Create Snapshot', () => {
 
+                snapshot = PluginWrapper.snapshot.get();
 
+                // could use JSON.stringify(snapshot) and upload the data
 
+            });
 
+            addControl('Apply Snapshot', () => {
 
+                if (!snapshot) return;
 
+                PluginWrapper.snapshot.set(snapshot);
 
+
 
+                // or download snapshot using fetch or ajax or whatever
 
+                // or PluginWrapper.snapshot.download(url);
 
+            });
 
 
             ////////////////////////////////////////////////////////

+ 20 - 0
src/examples/proteopedia-wrapper/index.ts
View File 

@@ -18,6 +18,7 @@ import { EvolutionaryConservation } from './annotation';
 
 import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo } from './helpers';
 
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 
 import { ControlsWrapper } from './ui/controls';
 
+import { PluginState } from 'mol-plugin/state';
 
 require('mol-plugin/skin/light.scss')
 
 
 class MolStarProteopediaWrapper {
 
@@ -199,6 +200,25 @@ class MolStarProteopediaWrapper {
 
             await PluginCommands.State.Update.dispatch(this.plugin, { state, tree });
 
         }
 
     }
 
+
 
+    snapshot = {
 
+        get: () => {
 
+            return this.plugin.state.getSnapshot();
 
+        },
 
+        set: (snapshot: PluginState.Snapshot) => {
 
+            return this.plugin.state.setSnapshot(snapshot);
 
+        },
 
+        download: async (url: string) => {
 
+            try {
 
+                const data = await this.plugin.runTask(this.plugin.fetch(url));
 
+                const snapshot = JSON.parse(data);
 
+                await this.plugin.state.setSnapshot(snapshot);
 
+            } catch (e) {
 
+                console.log(e);
 
+            }
 
+        }
 
+
 
+    }
 
 }
 
 
 (window as any).MolStarProteopediaWrapper = MolStarProteopediaWrapper;

+ 2 - 0
src/mol-plugin/context.ts
View File 

@@ -124,6 +124,8 @@ export class PluginContext {
 
      * This should be used in all transform related request so that it could be "spoofed" to allow
 
      * "static" access to resources.
 
      */
 
+    fetch(url: string, type?: 'string', body?: string): Task<string>
 
+    fetch(url: string, type?: 'binary', body?: string): Task<Uint8Array>
 
     fetch(url: string, type: 'string' | 'binary' = 'string', body?: string): Task<string | Uint8Array> {
 
         return ajaxGet({ url, type, body });
 
         // const req = await fetch(url, { referrerPolicy: 'origin-when-cross-origin' });

+ 4 - 4
src/mol-plugin/state/animation/built-in.ts
View File 

@@ -15,12 +15,12 @@ export const AnimateModelIndex = PluginStateAnimation.create({
 
     name: 'built-in.animate-model-index',
 
     display: { name: 'Animate Model Index' },
 
     params: () => ({
 
-        mode: PD.MappedStatic('once', {
 
-            once: PD.Group({ direction: PD.Select('forward', [['forward', 'Forward'], ['backward', 'Backward']]) }, { isFlat: true }),
 
+        mode: PD.MappedStatic('palindrome', {
 
             palindrome: PD.Group({ }),
 
             loop: PD.Group({ }),
 
-        }, { options: [['once', 'Once'], ['palindrome', 'Palindrome'], ['loop', 'Loop']] }),
 
-        maxFPS: PD.Numeric(3, { min: 0.5, max: 30, step: 0.5 })
 
+            once: PD.Group({ direction: PD.Select('palindrome', [['forward', 'Forward'], ['backward', 'Backward']]) }, { isFlat: true })
 
+        }, { options: [['palindrome', 'Palindrome'], ['loop', 'Loop'], ['once', 'Once']] }),
 
+        maxFPS: PD.Numeric(15, { min: 1, max: 30, step: 1 })
 
     }),
 
     initialState: () => ({} as { palindromeDirections?: { [id: string]: -1 | 1 | undefined } }),
 
     async apply(animState, t, ctx) {

+ 2 - 2
src/mol-plugin/state/transforms/model.ts
View File 

@@ -154,12 +154,12 @@ const StructureAssemblyFromModel = PluginStateTransform.BuiltIn({
 
 
             if (model.symmetry.assemblies.length === 0) {
 
                 if (id !== 'deposited') {
 
-                    plugin.log.warn(`Model '${a.label}' has no assembly, returning deposited structure.`);
 
+                    plugin.log.warn(`Model '${a.data.label}' has no assembly, returning deposited structure.`);
 
                 }
 
             } else {
 
                 asm = ModelSymmetry.findAssembly(model, id || '');
 
                 if (!asm) {
 
-                    plugin.log.warn(`Model '${a.label}' has no assembly called '${id}', returning deposited structure.`);
 
+                    plugin.log.warn(`Model '${a.data.label}' has no assembly called '${id}', returning deposited structure.`);
 
                 }
 
             }

+ 4 - 4
src/mol-plugin/ui/plugin.tsx
View File 

@@ -53,15 +53,15 @@ class Layout extends PluginUIComponent {
 
 
     render() {
 
         const layout = this.plugin.layout.state;
 
-        const spec = this.plugin.spec.layout && this.plugin.spec.layout.controls;
 
+        const controls = (this.plugin.spec.layout && this.plugin.spec.layout.controls) || { };
 
 
         return <div className='msp-plugin'>
 
             <div className={`msp-plugin-content ${layout.isExpanded ? 'msp-layout-expanded' : 'msp-layout-standard msp-layout-standard-outside'}`}>
 
                 <div className={layout.showControls ? 'msp-layout-hide-top' : 'msp-layout-hide-top msp-layout-hide-right msp-layout-hide-bottom msp-layout-hide-left'}>
 
                     {this.region('main', ViewportWrapper)}
 
-                    {layout.showControls && spec && spec.left !== 'none' && this.region('left', (spec && spec.left) || State)}
 
-                    {layout.showControls && spec && spec.right !== 'none' && this.region('right', (spec && spec.right) || ControlsWrapper)}
 
-                    {layout.showControls && spec && spec.bottom !== 'none' && this.region('bottom', (spec && spec.bottom) || Log)}
 
+                    {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || State)}
 
+                    {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}
 
+                    {layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)}
 
                 </div>
 
             </div>
 
         </div>;