mol-plugin: basic spec support

src/mol-plugin/behavior/static/representation.ts

@@ -18,8 +18,6 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) {
         ctx.canvas3d.add(e.obj.data);
         ctx.canvas3d.requestDraw(true);
 
-        console.log(e.obj.data);
-
         // TODO: update visiblity
     });
     events.object.updated.subscribe(e => {

src/mol-plugin/context.ts

@@ -4,25 +4,24 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Transformer, Transform, State } from 'mol-state';
 import { Canvas3D } from 'mol-canvas3d/canvas3d';
-import { StateTransforms } from './state/transforms';
-import { PluginStateObject as SO } from './state/objects';
-import { RxEventHelper } from 'mol-util/rx-event-helper';
-import { PluginState } from './state';
-import { PluginCommand, PluginCommands } from './command';
-import { Task } from 'mol-task';
-import { merge } from 'rxjs';
-import { PluginBehaviors, BuiltInPluginBehaviors } from './behavior';
-import { Loci, EmptyLoci } from 'mol-model/loci';
+import { EmptyLoci, Loci } from 'mol-model/loci';
 import { Representation } from 'mol-repr/representation';
-import { CreateStructureFromPDBe } from './state/actions/basic';
-import { LogEntry } from 'mol-util/log-entry';
-import { TaskManager } from './util/task-manager';
 import { StructureRepresentationRegistry } from 'mol-repr/structure/registry';
+import { State, Transform, Transformer } from 'mol-state';
+import { Task } from 'mol-task';
 import { ColorTheme } from 'mol-theme/color';
 import { SizeTheme } from 'mol-theme/size';
 import { ThemeRegistryContext } from 'mol-theme/theme';
+import { LogEntry } from 'mol-util/log-entry';
+import { RxEventHelper } from 'mol-util/rx-event-helper';
+import { merge } from 'rxjs';
+import { BuiltInPluginBehaviors } from './behavior';
+import { PluginCommand, PluginCommands } from './command';
+import { PluginSpec } from './spec';
+import { PluginState } from './state';
+import { PluginStateObject as SO } from './state/objects';
+import { TaskManager } from './util/task-manager';
 
 export class PluginContext {
     private disposed = false;
@@ -120,24 +119,20 @@ export class PluginContext {
         merge(this.state.dataState.events.log, this.state.behaviorState.events.log).subscribe(e => this.events.log.next(e));
     }
 
-    async _test_initBehaviors() {
-        const tree = this.state.behaviorState.tree.build()
-            .toRoot().apply(PluginBehaviors.Representation.HighlightLoci, { ref: PluginBehaviors.Representation.HighlightLoci.id })
-            .toRoot().apply(PluginBehaviors.Representation.SelectLoci, { ref: PluginBehaviors.Representation.SelectLoci.id })
-            .getTree();
+    async initBehaviors() {
+        const tree = this.state.behaviorState.tree.build();
+
+        for (const b of this.spec.behaviors) {
+            tree.toRoot().apply(b.transformer, b.defaultParams || { }, { ref: b.transformer.id });
+        }
 
         await this.runTask(this.state.behaviorState.update(tree));
     }
 
-    _test_initDataActions() {
-        this.state.dataState.actions
-            .add(CreateStructureFromPDBe)
-            .add(StateTransforms.Data.Download)
-            .add(StateTransforms.Data.ParseCif)
-            .add(StateTransforms.Model.CreateStructureAssembly)
-            .add(StateTransforms.Model.CreateStructure)
-            .add(StateTransforms.Model.CreateModelFromTrajectory)
-            .add(StateTransforms.Visuals.CreateStructureRepresentation);
+    initDataActions() {
+        for (const a of this.spec.actions) {
+            this.state.dataState.actions.add(a.action);
+        }
     }
 
     applyTransform(state: State, a: Transform.Ref, transformer: Transformer, params: any) {
@@ -169,12 +164,12 @@ export class PluginContext {
         });
     }
 
-    constructor() {
+    constructor(public spec: PluginSpec) {
         this.initEvents();
         this.initBuiltInBehavior();
 
-        this._test_initBehaviors();
-        this._test_initDataActions();
+        this.initBehaviors();
+        this.initDataActions();
     }
 
     // logger = ;

src/mol-plugin/index.ts

@@ -9,14 +9,34 @@ import { Plugin } from './ui/plugin'
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { PluginCommands } from './command';
+import { PluginSpec } from './spec';
+import { CreateStructureFromPDBe } from './state/actions/basic';
+import { StateTransforms } from './state/transforms';
+import { PluginBehaviors } from './behavior';
 
 function getParam(name: string, regex: string): string {
     let r = new RegExp(`${name}=(${regex})[&]?`, 'i');
     return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
 }
 
+const DefaultSpec: PluginSpec = {
+    actions: [
+        PluginSpec.Action(CreateStructureFromPDBe),
+        PluginSpec.Action(StateTransforms.Data.Download),
+        PluginSpec.Action(StateTransforms.Data.ParseCif),
+        PluginSpec.Action(StateTransforms.Model.CreateStructureAssembly),
+        PluginSpec.Action(StateTransforms.Model.CreateStructure),
+        PluginSpec.Action(StateTransforms.Model.CreateModelFromTrajectory),
+        PluginSpec.Action(StateTransforms.Visuals.CreateStructureRepresentation)
+    ],
+    behaviors: [
+        PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci),
+        PluginSpec.Behavior(PluginBehaviors.Representation.SelectLoci)
+    ]
+}
+
 export function createPlugin(target: HTMLElement): PluginContext {
-    const ctx = new PluginContext();
+    const ctx = new PluginContext(DefaultSpec);
     ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
 
     try {

src/mol-plugin/ui/controls/parameters.tsx

@@ -64,11 +64,12 @@ export class ParamWrapper extends React.PureComponent<ParamWrapperProps> {
     }
 
     render() {
-        return <div>
-            <span title={this.props.param.description}>{this.props.param.label}</span>
-            <div>
+        return <div style={{ padding: '0 3px', borderBottom: '1px solid #ccc' }}>
+            <div style={{ lineHeight: '20px', float: 'left' }} title={this.props.param.description}>{this.props.param.label}</div>
+            <div style={{ float: 'left', marginLeft: '5px' }}>
                 <this.props.control value={this.props.value} param={this.props.param} onChange={this.onChange} onEnter={this.props.onEnter} isEnabled={this.props.isEnabled} />
             </div>
+            <div style={{ clear: 'both' }} />
         </div>;
     }
 }