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
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/examples/proteopedia-wrapper/index.html
+ 36
− 18
View file @ 2e0e7ca7
......@@ -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);
});
////////////////////////////////////////////////////////
......
src/examples/proteopedia-wrapper/index.ts
+ 20
− 0
View file @ 2e0e7ca7
......@@ -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;
\ No newline at end of file
src/mol-plugin/context.ts
+ 2
− 0
View file @ 2e0e7ca7
......@@ -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' });
......
src/mol-plugin/state/animation/built-in.ts
+ 4
− 4
View file @ 2e0e7ca7
......@@ -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) {
......
src/mol-plugin/state/transforms/model.ts
+ 2
− 2
View file @ 2e0e7ca7
......@@ -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.`);
}
}
......
src/mol-plugin/ui/plugin.tsx
+ 4
− 4
View file @ 2e0e7ca7
......@@ -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>;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment