Skip to content
Snippets Groups Projects
Commit 2e0e7ca7 authored by David Sehnal's avatar David Sehnal
Browse files

Proteopedia wrapper fixes, ui fixes, animation tweaks

parent 3f93eb11
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/examples/proteopedia-wrapper/index.html
+ 36
− 18
View file @ 2e0e7ca7
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<body> <body>
<div id='controls'> <div id='controls'>
<h3>Source</h3> <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' /> <input type='text' id='assemblyId' placeholder='assembly id' />
<select id='format'> <select id='format'>
<option value='cif' selected>CIF</option> <option value='cif' selected>CIF</option>
...@@ -57,7 +57,9 @@ ...@@ -57,7 +57,9 @@
<div id="app"></div> <div id="app"></div>
<script> <script>
// create an instance of the plugin // 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); } function $(id) { return document.getElementById(id); }
...@@ -76,22 +78,22 @@ ...@@ -76,22 +78,22 @@
// var format = 'pdb'; // var format = 'pdb';
// var assemblyId = 'deposited'; // var assemblyId = 'deposited';
MolStarProteopediaWrapper.init('app' /** or document.getElementById('app') */); PluginWrapper.init('app' /** or document.getElementById('app') */);
MolStarProteopediaWrapper.setBackground(0xffffff); PluginWrapper.setBackground(0xffffff);
MolStarProteopediaWrapper.load({ url: url, format: format, assemblyId: assemblyId }); PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId });
MolStarProteopediaWrapper.toggleSpin(); PluginWrapper.toggleSpin();
MolStarProteopediaWrapper.events.modelInfo.subscribe(function (info) { PluginWrapper.events.modelInfo.subscribe(function (info) {
console.log('Model Info', info); console.log('Model Info', info);
}); });
addControl('Load Asym Unit', () => MolStarProteopediaWrapper.load({ url: url, format: format })); addControl('Load Asym Unit', () => PluginWrapper.load({ url: url, format: format }));
addControl('Load Assembly', () => MolStarProteopediaWrapper.load({ url: url, format: format, assemblyId: assemblyId })); addControl('Load Assembly', () => PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
addSeparator(); addSeparator();
addHeader('Camera'); addHeader('Camera');
addControl('Toggle Spin', () => MolStarProteopediaWrapper.toggleSpin()); addControl('Toggle Spin', () => PluginWrapper.toggleSpin());
addSeparator(); addSeparator();
...@@ -99,19 +101,35 @@ ...@@ -99,19 +101,35 @@
// adjust this number to make the animation faster or slower // adjust this number to make the animation faster or slower
// requires to "restart" the animation if changed // 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 End', () => PluginWrapper.animate.modelIndex.onceForward());
addControl('Play To Start', () => MolStarProteopediaWrapper.animate.modelIndex.onceBackward()); addControl('Play To Start', () => PluginWrapper.animate.modelIndex.onceBackward());
addControl('Play Palindrome', () => MolStarProteopediaWrapper.animate.modelIndex.palindrome()); addControl('Play Palindrome', () => PluginWrapper.animate.modelIndex.palindrome());
addControl('Play Loop', () => MolStarProteopediaWrapper.animate.modelIndex.loop()); addControl('Play Loop', () => PluginWrapper.animate.modelIndex.loop());
addControl('Stop', () => MolStarProteopediaWrapper.animate.modelIndex.stop()); addControl('Stop', () => PluginWrapper.animate.modelIndex.stop());
addSeparator(); addSeparator();
addHeader('Misc'); addHeader('Misc');
addControl('Apply Evo Cons', () => MolStarProteopediaWrapper.coloring.evolutionaryConservation()); addControl('Apply Evo Cons', () => PluginWrapper.coloring.evolutionaryConservation());
addControl('Default Visuals', () => MolStarProteopediaWrapper.updateStyle()); 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);
});
//////////////////////////////////////////////////////// ////////////////////////////////////////////////////////
......
src/examples/proteopedia-wrapper/index.ts
+ 20
− 0
View file @ 2e0e7ca7
...@@ -18,6 +18,7 @@ import { EvolutionaryConservation } from './annotation'; ...@@ -18,6 +18,7 @@ import { EvolutionaryConservation } from './annotation';
import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo } from './helpers'; import { LoadParams, SupportedFormats, RepresentationStyle, ModelInfo } from './helpers';
import { RxEventHelper } from 'mol-util/rx-event-helper'; import { RxEventHelper } from 'mol-util/rx-event-helper';
import { ControlsWrapper } from './ui/controls'; import { ControlsWrapper } from './ui/controls';
import { PluginState } from 'mol-plugin/state';
require('mol-plugin/skin/light.scss') require('mol-plugin/skin/light.scss')
class MolStarProteopediaWrapper { class MolStarProteopediaWrapper {
...@@ -199,6 +200,25 @@ class MolStarProteopediaWrapper { ...@@ -199,6 +200,25 @@ class MolStarProteopediaWrapper {
await PluginCommands.State.Update.dispatch(this.plugin, { state, tree }); 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; (window as any).MolStarProteopediaWrapper = MolStarProteopediaWrapper;
\ No newline at end of file
src/mol-plugin/context.ts
+ 2
− 0
View file @ 2e0e7ca7
...@@ -124,6 +124,8 @@ export class PluginContext { ...@@ -124,6 +124,8 @@ export class PluginContext {
* This should be used in all transform related request so that it could be "spoofed" to allow * This should be used in all transform related request so that it could be "spoofed" to allow
* "static" access to resources. * "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> { fetch(url: string, type: 'string' | 'binary' = 'string', body?: string): Task<string | Uint8Array> {
return ajaxGet({ url, type, body }); return ajaxGet({ url, type, body });
// const req = await fetch(url, { referrerPolicy: 'origin-when-cross-origin' }); // const req = await fetch(url, { referrerPolicy: 'origin-when-cross-origin' });
......
src/mol-plugin/state/animation/built-in.ts
+ 4
− 4
View file @ 2e0e7ca7
...@@ -15,12 +15,12 @@ export const AnimateModelIndex = PluginStateAnimation.create({ ...@@ -15,12 +15,12 @@ export const AnimateModelIndex = PluginStateAnimation.create({
name: 'built-in.animate-model-index', name: 'built-in.animate-model-index',
display: { name: 'Animate Model Index' }, display: { name: 'Animate Model Index' },
params: () => ({ params: () => ({
mode: PD.MappedStatic('once', { mode: PD.MappedStatic('palindrome', {
once: PD.Group({ direction: PD.Select('forward', [['forward', 'Forward'], ['backward', 'Backward']]) }, { isFlat: true }),
palindrome: PD.Group({ }), palindrome: PD.Group({ }),
loop: PD.Group({ }), loop: PD.Group({ }),
}, { options: [['once', 'Once'], ['palindrome', 'Palindrome'], ['loop', 'Loop']] }), once: PD.Group({ direction: PD.Select('palindrome', [['forward', 'Forward'], ['backward', 'Backward']]) }, { isFlat: true })
maxFPS: PD.Numeric(3, { min: 0.5, max: 30, step: 0.5 }) }, { 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 } }), initialState: () => ({} as { palindromeDirections?: { [id: string]: -1 | 1 | undefined } }),
async apply(animState, t, ctx) { async apply(animState, t, ctx) {
......
src/mol-plugin/state/transforms/model.ts
+ 2
− 2
View file @ 2e0e7ca7
...@@ -154,12 +154,12 @@ const StructureAssemblyFromModel = PluginStateTransform.BuiltIn({ ...@@ -154,12 +154,12 @@ const StructureAssemblyFromModel = PluginStateTransform.BuiltIn({
if (model.symmetry.assemblies.length === 0) { if (model.symmetry.assemblies.length === 0) {
if (id !== 'deposited') { 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 { } else {
asm = ModelSymmetry.findAssembly(model, id || ''); asm = ModelSymmetry.findAssembly(model, id || '');
if (!asm) { 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.`);
} }
} }
......
src/mol-plugin/ui/plugin.tsx
+ 4
− 4
View file @ 2e0e7ca7
...@@ -53,15 +53,15 @@ class Layout extends PluginUIComponent { ...@@ -53,15 +53,15 @@ class Layout extends PluginUIComponent {
render() { render() {
const layout = this.plugin.layout.state; 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'> return <div className='msp-plugin'>
<div className={`msp-plugin-content ${layout.isExpanded ? 'msp-layout-expanded' : 'msp-layout-standard msp-layout-standard-outside'}`}> <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'}> <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)} {this.region('main', ViewportWrapper)}
{layout.showControls && spec && spec.left !== 'none' && this.region('left', (spec && spec.left) || State)} {layout.showControls && controls.left !== 'none' && this.region('left', controls.left || State)}
{layout.showControls && spec && spec.right !== 'none' && this.region('right', (spec && spec.right) || ControlsWrapper)} {layout.showControls && controls.right !== 'none' && this.region('right', controls.right || ControlsWrapper)}
{layout.showControls && spec && spec.bottom !== 'none' && this.region('bottom', (spec && spec.bottom) || Log)} {layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || Log)}
</div> </div>
</div> </div>
</div>; </div>;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment