|
|
@@ -8,84 +8,110 @@
|
|
|
import '../../mol-util/polyfill';
|
|
|
import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
|
|
|
import './index.html';
|
|
|
+import './embedded.html';
|
|
|
import './favicon.ico';
|
|
|
import { PluginContext } from '../../mol-plugin/context';
|
|
|
import { PluginCommands } from '../../mol-plugin/commands';
|
|
|
import { PluginSpec } from '../../mol-plugin/spec';
|
|
|
-import { DownloadStructure } from '../../mol-plugin-state/actions/structure';
|
|
|
+import { DownloadStructure, PdbDownloadProvider } from '../../mol-plugin-state/actions/structure';
|
|
|
import { PluginConfig } from '../../mol-plugin/config';
|
|
|
import { CellPack } from '../../extensions/cellpack';
|
|
|
import { RCSBAssemblySymmetry, RCSBValidationReport } from '../../extensions/rcsb';
|
|
|
import { PDBeStructureQualityReport } from '../../extensions/pdbe';
|
|
|
import { Asset } from '../../mol-util/assets';
|
|
|
+import { ObjectKeys } from '../../mol-util/type-helpers';
|
|
|
+import { PluginState } from '../../mol-plugin/state';
|
|
|
+import { DownloadDensity } from '../../mol-plugin-state/actions/volume';
|
|
|
+import { PluginLayoutControlsDisplay } from '../../mol-plugin/layout';
|
|
|
require('mol-plugin-ui/skin/light.scss');
|
|
|
|
|
|
-function getParam(name: string, regex: string): string {
|
|
|
- let r = new RegExp(`${name}=(${regex})[&]?`, 'i');
|
|
|
- return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
|
|
|
-}
|
|
|
+const Extensions = {
|
|
|
+ 'cellpack': PluginSpec.Behavior(CellPack),
|
|
|
+ 'pdbe-structure-quality-report': PluginSpec.Behavior(PDBeStructureQualityReport),
|
|
|
+ 'rcsb-assembly-symmetry': PluginSpec.Behavior(RCSBAssemblySymmetry),
|
|
|
+ 'rcsb-validation-report': PluginSpec.Behavior(RCSBValidationReport)
|
|
|
+};
|
|
|
|
|
|
-const hideControls = getParam('hide-controls', `[^&]+`) === '1';
|
|
|
+const DefaultViewerOptions = {
|
|
|
+ extensions: ObjectKeys(Extensions),
|
|
|
+ layoutIsExpanded: true,
|
|
|
+ layoutShowControls: true,
|
|
|
+ layoutShowRemoteState: true,
|
|
|
+ layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
|
|
|
+ layoutShowSequence: true,
|
|
|
+ layoutShowLog: true,
|
|
|
+ layoutShowLeftPanel: true,
|
|
|
|
|
|
-function init() {
|
|
|
- const spec: PluginSpec = {
|
|
|
- actions: [...DefaultPluginSpec.actions],
|
|
|
- behaviors: [
|
|
|
- ...DefaultPluginSpec.behaviors,
|
|
|
- PluginSpec.Behavior(CellPack),
|
|
|
- PluginSpec.Behavior(PDBeStructureQualityReport),
|
|
|
- PluginSpec.Behavior(RCSBAssemblySymmetry),
|
|
|
- PluginSpec.Behavior(RCSBValidationReport),
|
|
|
- ],
|
|
|
- animations: [...DefaultPluginSpec.animations || []],
|
|
|
- customParamEditors: DefaultPluginSpec.customParamEditors,
|
|
|
- layout: {
|
|
|
- initial: {
|
|
|
- isExpanded: true,
|
|
|
- showControls: !hideControls
|
|
|
+ viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
|
|
|
+ viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
|
|
|
+ viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,
|
|
|
+ pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,
|
|
|
+ volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
|
|
|
+ pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,
|
|
|
+ emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
|
|
|
+};
|
|
|
+type ViewerOptions = typeof DefaultViewerOptions;
|
|
|
+
|
|
|
+export class Viewer {
|
|
|
+ plugin: PluginContext
|
|
|
+
|
|
|
+ constructor(elementId: string, options: Partial<ViewerOptions> = {}) {
|
|
|
+ const o = { ...DefaultViewerOptions, ...options };
|
|
|
+
|
|
|
+ const spec: PluginSpec = {
|
|
|
+ actions: [...DefaultPluginSpec.actions],
|
|
|
+ behaviors: [
|
|
|
+ ...DefaultPluginSpec.behaviors,
|
|
|
+ ...o.extensions.map(e => Extensions[e]),
|
|
|
+ ],
|
|
|
+ animations: [...DefaultPluginSpec.animations || []],
|
|
|
+ customParamEditors: DefaultPluginSpec.customParamEditors,
|
|
|
+ layout: {
|
|
|
+ initial: {
|
|
|
+ isExpanded: o.layoutIsExpanded,
|
|
|
+ showControls: o.layoutShowControls,
|
|
|
+ controlsDisplay: o.layoutControlsDisplay,
|
|
|
+ },
|
|
|
+ controls: {
|
|
|
+ ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls,
|
|
|
+ top: o.layoutShowSequence ? undefined : 'none',
|
|
|
+ bottom: o.layoutShowLog ? undefined : 'none',
|
|
|
+ left: o.layoutShowLeftPanel ? undefined : 'none',
|
|
|
+ }
|
|
|
},
|
|
|
- controls: {
|
|
|
- ...DefaultPluginSpec.layout && DefaultPluginSpec.layout.controls
|
|
|
- }
|
|
|
- },
|
|
|
- config: DefaultPluginSpec.config
|
|
|
- };
|
|
|
- spec.config?.set(PluginConfig.Viewport.ShowExpand, false);
|
|
|
- const plugin = createPlugin(document.getElementById('app')!, spec);
|
|
|
- trySetSnapshot(plugin);
|
|
|
- tryLoadFromUrl(plugin);
|
|
|
-}
|
|
|
+ components: {
|
|
|
+ ...DefaultPluginSpec.components,
|
|
|
+ remoteState: o.layoutShowRemoteState ? 'default' : 'none',
|
|
|
+ },
|
|
|
+ config: DefaultPluginSpec.config
|
|
|
+ };
|
|
|
|
|
|
-async function trySetSnapshot(ctx: PluginContext) {
|
|
|
- try {
|
|
|
- const snapshotUrl = getParam('snapshot-url', `[^&]+`);
|
|
|
- const snapshotId = getParam('snapshot-id', `[^&]+`);
|
|
|
- if (!snapshotUrl && !snapshotId) return;
|
|
|
- // TODO parametrize the server
|
|
|
- const url = snapshotId
|
|
|
- ? `https://webchem.ncbr.muni.cz/molstar-state/get/${snapshotId}`
|
|
|
- : snapshotUrl;
|
|
|
- await PluginCommands.State.Snapshots.Fetch(ctx, { url });
|
|
|
- } catch (e) {
|
|
|
- ctx.log.error('Failed to load snapshot.');
|
|
|
- console.warn('Failed to load snapshot', e);
|
|
|
- }
|
|
|
-}
|
|
|
+ spec.config?.set(PluginConfig.Viewport.ShowExpand, o.viewportShowExpand);
|
|
|
+ spec.config?.set(PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode);
|
|
|
+ spec.config?.set(PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation);
|
|
|
+ spec.config?.set(PluginConfig.State.DefaultServer, o.pluginStateServer);
|
|
|
+ spec.config?.set(PluginConfig.State.CurrentServer, o.pluginStateServer);
|
|
|
+ spec.config?.set(PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer);
|
|
|
+ spec.config?.set(PluginConfig.Download.DefaultPdbProvider, o.pdbProvider);
|
|
|
+ spec.config?.set(PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider);
|
|
|
|
|
|
-async function tryLoadFromUrl(ctx: PluginContext) {
|
|
|
- const url = getParam('loadFromURL', '[^&]+').trim();
|
|
|
- try {
|
|
|
- if (!url) return;
|
|
|
+ const element = document.getElementById(elementId);
|
|
|
+ if (!element) throw new Error(`Could not get element with id '${elementId}'`);
|
|
|
+ this.plugin = createPlugin(element, spec);
|
|
|
+ }
|
|
|
|
|
|
- let format = 'cif', isBinary = false;
|
|
|
- switch (getParam('loadFromURLFormat', '[a-z]+').toLocaleLowerCase().trim()) {
|
|
|
- case 'pdb': format = 'pdb'; break;
|
|
|
- case 'mmbcif': isBinary = true; break;
|
|
|
- }
|
|
|
+ async setRemoteSnapshot(id: string) {
|
|
|
+ const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;
|
|
|
+ await PluginCommands.State.Snapshots.Fetch(this.plugin, { url });
|
|
|
+ }
|
|
|
|
|
|
- const params = DownloadStructure.createDefaultParams(void 0 as any, ctx);
|
|
|
+ async loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {
|
|
|
+ await PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });
|
|
|
+ }
|
|
|
|
|
|
- return ctx.runTask(ctx.state.data.applyAction(DownloadStructure, {
|
|
|
+ async loadStructureFromUrl(url: string, format = 'cif', isBinary = false) {
|
|
|
+ const params = DownloadStructure.createDefaultParams(undefined, this.plugin);
|
|
|
+ return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
|
|
|
source: {
|
|
|
name: 'url',
|
|
|
params: {
|
|
|
@@ -96,10 +122,54 @@ async function tryLoadFromUrl(ctx: PluginContext) {
|
|
|
}
|
|
|
}
|
|
|
}));
|
|
|
- } catch (e) {
|
|
|
- ctx.log.error(`Failed to load from URL (${url})`);
|
|
|
- console.warn(`Failed to load from URL (${url})`, e);
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-init();
|
|
|
+ async loadPdb(pdb: string) {
|
|
|
+ const params = DownloadStructure.createDefaultParams(undefined, this.plugin);
|
|
|
+ const provider = this.plugin.config.get(PluginConfig.Download.DefaultPdbProvider)!;
|
|
|
+ return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
|
|
|
+ source: {
|
|
|
+ name: 'pdb' as const,
|
|
|
+ params: {
|
|
|
+ provider: {
|
|
|
+ id: pdb,
|
|
|
+ server: {
|
|
|
+ name: provider,
|
|
|
+ params: PdbDownloadProvider[provider].defaultValue as any
|
|
|
+ }
|
|
|
+ },
|
|
|
+ options: params.source.params.options,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ async loadPdbDev(pdbDev: string) {
|
|
|
+ const params = DownloadStructure.createDefaultParams(undefined, this.plugin);
|
|
|
+ return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadStructure, {
|
|
|
+ source: {
|
|
|
+ name: 'pdb-dev' as const,
|
|
|
+ params: {
|
|
|
+ id: pdbDev,
|
|
|
+ options: params.source.params.options,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ async loadEmdb(emdb: string) {
|
|
|
+ const provider = this.plugin.config.get(PluginConfig.Download.DefaultEmdbProvider)!;
|
|
|
+ return this.plugin.runTask(this.plugin.state.data.applyAction(DownloadDensity, {
|
|
|
+ source: {
|
|
|
+ name: 'pdb-emd-ds' as const,
|
|
|
+ params: {
|
|
|
+ provider: {
|
|
|
+ id: emdb,
|
|
|
+ server: provider,
|
|
|
+ },
|
|
|
+ detail: 3,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }));
|
|
|
+ }
|
|
|
+}
|
Alexander Rose