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

Merge branch 'master' into volume

Alexander Rose 6 years ago
parent
4923e2991e 602ca31eb2
commit
3e0496e0fa
33 changed files with 338 additions and 188 deletions
Unified View Show Diff Stats
  1. 1 1
      package.json
  2. 65 8
      src/apps/basic-wrapper/index.html
  3. 12 0
      src/apps/basic-wrapper/index.ts
  4. 4 3
      src/mol-canvas3d/canvas3d.ts
  5. 14 11
      src/mol-canvas3d/controls/trackball.ts
  6. 1 1
      src/mol-plugin/behavior/static/state.ts
  7. 1 1
      src/mol-plugin/command.ts
  8. 17 21
      src/mol-plugin/component.ts
  9. 2 1
      src/mol-plugin/context.ts
  10. 14 6
      src/mol-plugin/layout.ts
  11. 1 1
      src/mol-plugin/state.ts
  12. 40 7
      src/mol-plugin/state/animation/built-in.ts
  13. 37 10
      src/mol-plugin/state/animation/manager.ts
  14. 6 6
      src/mol-plugin/state/animation/model.ts
  15. 14 18
      src/mol-plugin/state/camera.ts
  16. 10 15
      src/mol-plugin/state/snapshots.ts
  17. 19 4
      src/mol-plugin/state/transforms/model.ts
  18. 2 2
      src/mol-plugin/ui/base.tsx
  19. 5 5
      src/mol-plugin/ui/camera.tsx
  20. 4 4
      src/mol-plugin/ui/controls.tsx
  21. 7 1
      src/mol-plugin/ui/controls/parameters.tsx
  22. 24 17
      src/mol-plugin/ui/plugin.tsx
  23. 4 4
      src/mol-plugin/ui/state-tree.tsx
  24. 6 6
      src/mol-plugin/ui/state.tsx
  25. 7 7
      src/mol-plugin/ui/state/animation.tsx
  26. 3 3
      src/mol-plugin/ui/state/common.tsx
  27. 3 3
      src/mol-plugin/ui/task.tsx
  28. 10 10
      src/mol-plugin/ui/viewport.tsx
  29. 1 1
      src/mol-plugin/util/canvas3d-identify.ts
  30. 0 1
      src/mol-state/object.ts
  31. 1 9
      src/mol-state/state.ts
  32. 1 1
      src/mol-state/state/selection.ts
  33. 2 0
      webpack.config.js

+ 1 - 1
package.json
View File 

@@ -18,7 +18,7 @@
 
     "watch": "concurrently --kill-others \"npm:watch-ts\" \"npm:watch-extra\" \"npm:watch-webpack\"",
 
     "watch": "concurrently --kill-others \"npm:watch-ts\" \"npm:watch-extra\" \"npm:watch-webpack\"",
 
     "watch-ts": "tsc -watch",
 
     "watch-ts": "tsc -watch",
 
     "watch-extra": "cpx \"src/**/*.{vert,frag,glsl,scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ --watch",
 
     "watch-extra": "cpx \"src/**/*.{vert,frag,glsl,scss,woff,woff2,ttf,otf,eot,svg,html,gql}\" build/src/ --watch",
 
-    "build-webpack": "webpack --mode development",
 
+    "build-webpack": "webpack --mode production",
 
     "watch-webpack": "webpack -w --mode development",
 
     "watch-webpack": "webpack -w --mode development",
 
     "model-server": "node build/src/servers/model/server.js",
 
     "model-server": "node build/src/servers/model/server.js",
 
     "model-server-watch": "nodemon --watch build/src build/src/servers/model/server.js"
 
     "model-server-watch": "nodemon --watch build/src build/src/servers/model/server.js"

+ 65 - 8
src/apps/basic-wrapper/index.html
View File 

@@ -12,37 +12,94 @@
 
             }
 
             }
 
             #app {
 
             #app {
 
                 position: absolute;
 
                 position: absolute;
 
-                left: 100px;
 
+                left: 160px;
 
                 top: 100px;
 
                 top: 100px;
 
                 width: 600px;
 
                 width: 600px;
 
                 height: 600px;
 
                 height: 600px;
 
                 border: 1px solid #ccc;
 
                 border: 1px solid #ccc;
 
             }
 
             }
 
+
 
+            #controls {
 
+                position: absolute;
 
+                width: 130px;
 
+                top: 10px;
 
+                left: 10px;
 
+            }
 
+
 
+            #controls > button {
 
+                display: block;
 
+                width: 100%;
 
+                text-align: left;
 
+            }
 
+
 
+            #controls > hr {
 
+                margin: 5px 0;
 
+            }
 
         </style>
 
         </style>
 
         <link rel="stylesheet" type="text/css" href="app.css" />
 
         <link rel="stylesheet" type="text/css" href="app.css" />
 
         <script type="text/javascript" src="./index.js"></script>
 
         <script type="text/javascript" src="./index.js"></script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <button id='spin'>Toggle Spin</button>
 
-        <button id='asym'>Load Asym Unit</button>
 
-        <button id='asm'>Load Assemly 1</button>
 
+        <div id='controls'>
 
+
 
+        </div>
 
         <div id="app"></div>
 
         <div id="app"></div>
 
         <script>            
         <script>            
-            var pdbId = '5ire', assemblyId= '1';
 
+            var pdbId = '1grm', assemblyId= '1';
 
             var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
 
             var url = 'https://www.ebi.ac.uk/pdbe/static/entry/' + pdbId + '_updated.cif';
 
             var format = 'cif';
 
             var format = 'cif';
 
 
 
             // var url = 'https://www.ebi.ac.uk/pdbe/entry-files/pdb' + pdbId + '.ent';
 
             // var url = 'https://www.ebi.ac.uk/pdbe/entry-files/pdb' + pdbId + '.ent';
 
             // var format = 'pdb';
 
             // var format = 'pdb';
 
+            // var assemblyId = 'deposited';
 
 
 
             BasicMolStarWrapper.init('app' /** or document.getElementById('app') */);
 
             BasicMolStarWrapper.init('app' /** or document.getElementById('app') */);
 
             BasicMolStarWrapper.setBackground(0xffffff);
 
             BasicMolStarWrapper.setBackground(0xffffff);
 
             BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
             BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
             BasicMolStarWrapper.toggleSpin();
 
             BasicMolStarWrapper.toggleSpin();
 
 
 
-            document.getElementById('spin').onclick = () => BasicMolStarWrapper.toggleSpin();
 
-            document.getElementById('asym').onclick = () => BasicMolStarWrapper.load({ url: url, format: format });
 
-            document.getElementById('asm').onclick = () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId });
 
+            addHeader('Source');
 
+            addControl('Load Asym Unit', () => BasicMolStarWrapper.load({ url: url, format: format }));
 
+            addControl('Load Assembly 1', () => BasicMolStarWrapper.load({ url: url, format: format, assemblyId: assemblyId }));
 
+
 
+            addSeparator();
 
+
 
+            addHeader('Camera');
 
+            addControl('Toggle Spin', () => BasicMolStarWrapper.toggleSpin());
 
+            
+            addSeparator();
 
+
 
+            addHeader('Animation');
 
+
 
+            // adjust this number to make the animation faster or slower
 
+            // requires to "restart" the animation if changed
 
+            BasicMolStarWrapper.animate.modelIndex.maxFPS = 4;
 
+
 
+            addControl('Play To End', () => BasicMolStarWrapper.animate.modelIndex.onceForward());
 
+            addControl('Play To Start', () => BasicMolStarWrapper.animate.modelIndex.onceBackward());
 
+            addControl('Play Palindrome', () => BasicMolStarWrapper.animate.modelIndex.palindrome());
 
+            addControl('Play Loop', () => BasicMolStarWrapper.animate.modelIndex.loop());
 
+            addControl('Stop', () => BasicMolStarWrapper.animate.modelIndex.stop());
 
+
 
+            ////////////////////////////////////////////////////////
 
+
 
+            function addControl(label, action) {
 
+                var btn = document.createElement('button');
 
+                btn.onclick = action;
 
+                btn.innerText = label;
 
+                document.getElementById('controls').appendChild(btn);
 
+            }
 
+
 
+            function addSeparator() {
 
+                var hr = document.createElement('hr');
 
+                document.getElementById('controls').appendChild(hr);
 
+            }
 
+
 
+            function addHeader(header) {
 
+                var h = document.createElement('h3');
 
+                h.innerText = header;
 
+                document.getElementById('controls').appendChild(h);
 
+            }
 
         </script>
 
         </script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>

+ 12 - 0
src/apps/basic-wrapper/index.ts
View File 

@@ -13,6 +13,7 @@ import { StructureRepresentation3DHelpers } from 'mol-plugin/state/transforms/re
 
 import { Color } from 'mol-util/color';
 
 import { Color } from 'mol-util/color';
 
 import { StateTreeBuilder } from 'mol-state/tree/builder';
 
 import { StateTreeBuilder } from 'mol-state/tree/builder';
 
 import { PluginStateObject as PSO } from 'mol-plugin/state/objects';
 
 import { PluginStateObject as PSO } from 'mol-plugin/state/objects';
 
+import { AnimateModelIndex } from 'mol-plugin/state/animation/built-in';
 
 require('mol-plugin/skin/light.scss')
 
 require('mol-plugin/skin/light.scss')
 
 
 
 type SupportedFormats = 'cif' | 'pdb'
 
 type SupportedFormats = 'cif' | 'pdb'
 
@@ -98,6 +99,17 @@ class BasicWrapper {
 
         PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
 
         PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { trackball: { ...trackball, spin: !trackball.spin } } });
 
         if (!spinning) PluginCommands.Camera.Reset.dispatch(this.plugin, { });
 
         if (!spinning) PluginCommands.Camera.Reset.dispatch(this.plugin, { });
 
     }
 
     }
 
+
 
+    animate = {
 
+        modelIndex: {
 
+            maxFPS: 8,
 
+            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
 
+            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
 
+            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
 
+            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
 
+            stop: () => this.plugin.state.animation.stop()
 
+        }
 
+    }
 
 }
 
 }
 
 
 
 (window as any).BasicMolStarWrapper = new BasicWrapper();
 
 (window as any).BasicMolStarWrapper = new BasicWrapper();

+ 4 - 3
src/mol-canvas3d/canvas3d.ts
View File 

@@ -192,7 +192,7 @@ namespace Canvas3D {
 
             if (isIdentifying || isUpdating) return false
 
             if (isIdentifying || isUpdating) return false
 
 
 
             let didRender = false
 
             let didRender = false
 
-            controls.update()
 
+            controls.update(currentTime);
 
             // TODO: is this a good fix? Also, setClipping does not work if the user has manually set a clipping plane.
 
             // TODO: is this a good fix? Also, setClipping does not work if the user has manually set a clipping plane.
 
             if (!camera.transition.inTransition) setClipping();
 
             if (!camera.transition.inTransition) setClipping();
 
             const cameraChanged = camera.updateMatrices();
 
             const cameraChanged = camera.updateMatrices();
 
@@ -230,6 +230,7 @@ namespace Canvas3D {
 
         }
 
         }
 
 
 
         let forceNextDraw = false;
 
         let forceNextDraw = false;
 
+        let currentTime = 0;
 
 
 
         function draw(force?: boolean) {
 
         function draw(force?: boolean) {
 
             if (render('draw', !!force || forceNextDraw)) {
 
             if (render('draw', !!force || forceNextDraw)) {
 
@@ -246,8 +247,8 @@ namespace Canvas3D {
 
         }
 
         }
 
 
 
         function animate() {
 
         function animate() {
 
-            const t = now();
 
-            camera.transition.tick(t);
 
+            currentTime = now();
 
+            camera.transition.tick(currentTime);
 
             draw(false)
 
             draw(false)
 
             window.requestAnimationFrame(animate)
 
             window.requestAnimationFrame(animate)
 
         }
 
         }

+ 14 - 11
src/mol-canvas3d/controls/trackball.ts
View File 

@@ -39,12 +39,12 @@ interface TrackballControls {
 
     readonly props: Readonly<TrackballControlsProps>
 
     readonly props: Readonly<TrackballControlsProps>
 
     setProps: (props: Partial<TrackballControlsProps>) => void
 
     setProps: (props: Partial<TrackballControlsProps>) => void
 
 
 
-    update: () => void
 
+    update: (t: number) => void
 
     reset: () => void
 
     reset: () => void
 
     dispose: () => void
 
     dispose: () => void
 
 }
 
 }
 
 namespace TrackballControls {
 
 namespace TrackballControls {
 
-    export function create (input: InputObserver, object: Object3D & { target: Vec3 }, props: Partial<TrackballControlsProps> = {}): TrackballControls {
 
+    export function create(input: InputObserver, object: Object3D & { target: Vec3 }, props: Partial<TrackballControlsProps> = {}): TrackballControls {
 
         const p = { ...PD.getDefaultValues(TrackballControlsParams), ...props }
 
         const p = { ...PD.getDefaultValues(TrackballControlsParams), ...props }
 
 
 
         const viewport: Viewport = { x: 0, y: 0, width: 0, height: 0 }
 
         const viewport: Viewport = { x: 0, y: 0, width: 0, height: 0 }
 
@@ -131,7 +131,7 @@ namespace TrackballControls {
 
                 Vec3.normalize(rotAxis, Vec3.cross(rotAxis, rotMoveDir, _eye))
 
                 Vec3.normalize(rotAxis, Vec3.cross(rotAxis, rotMoveDir, _eye))
 
 
 
                 angle *= p.rotateSpeed;
 
                 angle *= p.rotateSpeed;
 
-                Quat.setAxisAngle(rotQuat, rotAxis, angle )
 
+                Quat.setAxisAngle(rotQuat, rotAxis, angle)
 
 
 
                 Vec3.transformQuat(_eye, _eye, rotQuat)
 
                 Vec3.transformQuat(_eye, _eye, rotQuat)
 
                 Vec3.transformQuat(object.up, object.up, rotQuat)
 
                 Vec3.transformQuat(object.up, object.up, rotQuat)
 
@@ -150,7 +150,7 @@ namespace TrackballControls {
 
             Vec2.copy(_movePrev, _moveCurr)
 
             Vec2.copy(_movePrev, _moveCurr)
 
         }
 
         }
 
 
 
-        function zoomCamera () {
 
+        function zoomCamera() {
 
             const factor = 1.0 + (_zoomEnd[1] - _zoomStart[1]) * p.zoomSpeed
 
             const factor = 1.0 + (_zoomEnd[1] - _zoomStart[1]) * p.zoomSpeed
 
             if (factor !== 1.0 && factor > 0.0) {
 
             if (factor !== 1.0 && factor > 0.0) {
 
                 Vec3.scale(_eye, _eye, factor)
 
                 Vec3.scale(_eye, _eye, factor)
 
@@ -207,9 +207,11 @@ namespace TrackballControls {
 
             }
 
             }
 
         }
 
         }
 
 
 
+        let lastUpdated = -1;
 
         /** Update the object's position, direction and up vectors */
 
         /** Update the object's position, direction and up vectors */
 
-        function update() {
 
-            if (p.spin) spin();
 
+        function update(t: number) {
 
+            if (lastUpdated === t) return;
 
+            if (p.spin) spin(t - lastUpdated);
 
 
 
             Vec3.sub(_eye, object.position, target)
 
             Vec3.sub(_eye, object.position, target)
 
 
 
@@ -226,6 +228,8 @@ namespace TrackballControls {
 
             if (Vec3.squaredDistance(lastPosition, object.position) > EPSILON.Value) {
 
             if (Vec3.squaredDistance(lastPosition, object.position) > EPSILON.Value) {
 
                 Vec3.copy(lastPosition, object.position)
 
                 Vec3.copy(lastPosition, object.position)
 
             }
 
             }
 
+
 
+            lastUpdated = t;
 
         }
 
         }
 
 
 
         /** Reset object's vectors and the target vector to their initial values */
 
         /** Reset object's vectors and the target vector to their initial values */
 
@@ -299,15 +303,14 @@ namespace TrackballControls {
 
         }
 
         }
 
 
 
         const _spinSpeed = Vec2.create(0.005, 0);
 
         const _spinSpeed = Vec2.create(0.005, 0);
 
-        function spin() {
 
-            _spinSpeed[0] = (p.spinSpeed || 0) / 1000;
 
+        function spin(deltaT: number) {
 
+            const frameSpeed = (p.spinSpeed || 0) / 1000;
 
+            _spinSpeed[0] = 60 * Math.min(Math.abs(deltaT), 1000 / 8) / 1000 * frameSpeed;
 
             if (!_isInteracting) Vec2.add(_moveCurr, _movePrev, _spinSpeed);
 
             if (!_isInteracting) Vec2.add(_moveCurr, _movePrev, _spinSpeed);
 
         }
 
         }
 
 
 
         // force an update at start
 
         // force an update at start
 
-        update();
 
-
 
-        if (props.spin) { spin(); }
 
+        update(0);
 
 
 
         return {
 
         return {
 
             viewport,
 
             viewport,

+ 1 - 1
src/mol-plugin/behavior/static/state.ts
View File 

@@ -51,7 +51,7 @@ export function SetCurrentObject(ctx: PluginContext) {
 
 }
 
 }
 
 
 
 export function Update(ctx: PluginContext) {
 
 export function Update(ctx: PluginContext) {
 
-    PluginCommands.State.Update.subscribe(ctx, ({ state, tree }) => ctx.runTask(state.updateTree(tree)));
 
+    PluginCommands.State.Update.subscribe(ctx, ({ state, tree, doNotLogTiming }) => ctx.runTask(state.updateTree(tree, doNotLogTiming)));
 
 }
 
 }
 
 
 
 export function ApplyAction(ctx: PluginContext) {
 
 export function ApplyAction(ctx: PluginContext) {

+ 1 - 1
src/mol-plugin/command.ts
View File 

@@ -17,7 +17,7 @@ export const PluginCommands = {
 
     State: {
 
     State: {
 
         SetCurrentObject: PluginCommand<{ state: State, ref: Transform.Ref }>(),
 
         SetCurrentObject: PluginCommand<{ state: State, ref: Transform.Ref }>(),
 
         ApplyAction: PluginCommand<{ state: State, action: StateAction.Instance, ref?: Transform.Ref }>(),
 
         ApplyAction: PluginCommand<{ state: State, action: StateAction.Instance, ref?: Transform.Ref }>(),
 
-        Update: PluginCommand<{ state: State, tree: State.Tree | State.Builder }>(),
 
+        Update: PluginCommand<{ state: State, tree: State.Tree | State.Builder, doNotLogTiming?: boolean }>(),
 
 
 
         RemoveObject: PluginCommand<{ state: State, ref: Transform.Ref }>(),
 
         RemoveObject: PluginCommand<{ state: State, ref: Transform.Ref }>(),

+ 17 - 21
src/mol-plugin/component.ts
View File 

@@ -4,41 +4,37 @@
 
  * @author David Sehnal <david.sehnal@gmail.com>
 
  * @author David Sehnal <david.sehnal@gmail.com>
 
  */
 
  */
 
 
 
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
 
-import { PluginContext } from './context';
 
 import { shallowMergeArray } from 'mol-util/object';
 
 import { shallowMergeArray } from 'mol-util/object';
 
+import { RxEventHelper } from 'mol-util/rx-event-helper';
 
 
 
 export class PluginComponent<State> {
 
 export class PluginComponent<State> {
 
-    private _state: BehaviorSubject<State>;
 
-    private _updated = new Subject();
 
+    private _ev: RxEventHelper;
 
 
 
-    updateState(...states: Partial<State>[]): boolean {
 
-        const latest = this.latestState;
 
+    protected get ev() {
 
+        return this._ev || (this._ev = RxEventHelper.create());
 
+    }
 
+
 
+    private _state: State;
 
+
 
+    protected updateState(...states: Partial<State>[]): boolean {
 
+        const latest = this.state;
 
         const s = shallowMergeArray(latest, states);
 
         const s = shallowMergeArray(latest, states);
 
         if (s !== latest) {
 
         if (s !== latest) {
 
-            this._state.next(s);
 
+            this._state = s;
 
             return true;
 
             return true;
 
         }
 
         }
 
         return false;
 
         return false;
 
     }
 
     }
 
 
 
-    get states() {
 
-        return <Observable<State>>this._state;
 
-    }
 
-
 
-    get latestState() {
 
-        return this._state.value;
 
-    }
 
-
 
-    get updated() {
 
-        return <Observable<{}>>this._updated;
 
+    get state() {
 
+        return this._state;
 
     }
 
     }
 
 
 
-    triggerUpdate() {
 
-        this._updated.next({});
 
+    dispose() {
 
+        if (this._ev) this._ev.dispose();
 
     }
 
     }
 
 
 
-    constructor(public context: PluginContext, initialState: State) {
 
-        this._state = new BehaviorSubject<State>(initialState);
 
+    constructor(initialState: State) {
 
+        this._state = initialState;
 
     }
 
     }
 
 }
 
 }

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

@@ -98,7 +98,7 @@ export class PluginContext {
 
     initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
 
     initViewer(canvas: HTMLCanvasElement, container: HTMLDivElement) {
 
         try {
 
         try {
 
             this.layout.setRoot(container);
 
             this.layout.setRoot(container);
 
-            if (this.spec.initialLayout) this.layout.updateState(this.spec.initialLayout);
 
+            if (this.spec.initialLayout) this.layout.setProps(this.spec.initialLayout);
 
             (this.canvas3d as Canvas3D) = Canvas3D.create(canvas, container);
 
             (this.canvas3d as Canvas3D) = Canvas3D.create(canvas, container);
 
             PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { backgroundColor: Color(0xFCFBF9) } });
 
             PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { backgroundColor: Color(0xFCFBF9) } });
 
             this.canvas3d.animate();
 
             this.canvas3d.animate();
 
@@ -140,6 +140,7 @@ export class PluginContext {
 
         this.ev.dispose();
 
         this.ev.dispose();
 
         this.state.dispose();
 
         this.state.dispose();
 
         this.tasks.dispose();
 
         this.tasks.dispose();
 
+        this.layout.dispose();
 
         this.disposed = true;
 
         this.disposed = true;
 
     }
 
     }

+ 14 - 6
src/mol-plugin/layout.ts
View File 

@@ -42,21 +42,29 @@ interface RootState {
 
 }
 
 }
 
 
 
 export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
 
 export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
 
+    readonly events = {
 
+        updated: this.ev()
 
+    }
 
+
 
     private updateProps(state: Partial<PluginLayoutStateProps>) {
 
     private updateProps(state: Partial<PluginLayoutStateProps>) {
 
-        let prevExpanded = !!this.latestState.isExpanded;
 
+        let prevExpanded = !!this.state.isExpanded;
 
         this.updateState(state);
 
         this.updateState(state);
 
         if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded) this.handleExpand();
 
         if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded) this.handleExpand();
 
 
 
-        this.triggerUpdate();
 
+        this.events.updated.next();
 
     }
 
     }
 
 
 
     private root: HTMLElement;
 
     private root: HTMLElement;
 
     private rootState: RootState | undefined = void 0;
 
     private rootState: RootState | undefined = void 0;
 
     private expandedViewport: HTMLMetaElement;
 
     private expandedViewport: HTMLMetaElement;
 
 
 
+    setProps(props: PluginLayoutStateProps) {
 
+        this.updateState(props);
 
+    }
 
+
 
     setRoot(root: HTMLElement) {
 
     setRoot(root: HTMLElement) {
 
         this.root = root;
 
         this.root = root;
 
-        if (this.latestState.isExpanded) this.handleExpand();
 
+        if (this.state.isExpanded) this.handleExpand();
 
     }
 
     }
 
 
 
     private getScrollElement() {
 
     private getScrollElement() {
 
@@ -72,7 +80,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
 
 
 
             if (!body || !head) return;
 
             if (!body || !head) return;
 
 
 
-            if (this.latestState.isExpanded) {
 
+            if (this.state.isExpanded) {
 
                 let children = head.children;
 
                 let children = head.children;
 
                 let hasExp = false;
 
                 let hasExp = false;
 
                 let viewports: HTMLElement[] = [];
 
                 let viewports: HTMLElement[] = [];
 
@@ -167,8 +175,8 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
 
         }
 
         }
 
     }
 
     }
 
 
 
-    constructor(context: PluginContext) {
 
-        super(context, { ...PD.getDefaultValues(PluginLayoutStateParams), ...context.spec.initialLayout });
 
+    constructor(private context: PluginContext) {
 
+        super({ ...PD.getDefaultValues(PluginLayoutStateParams), ...context.spec.initialLayout });
 
 
 
         PluginCommands.Layout.Update.subscribe(context, e => this.updateProps(e.state));
 
         PluginCommands.Layout.Update.subscribe(context, e => this.updateProps(e.state));

+ 1 - 1
src/mol-plugin/state.ts
View File 

@@ -23,7 +23,6 @@ class PluginState {
 
     readonly behaviorState: State;
 
     readonly behaviorState: State;
 
     readonly animation: PluginAnimationManager;
 
     readonly animation: PluginAnimationManager;
 
     readonly cameraSnapshots = new CameraSnapshotManager();
 
     readonly cameraSnapshots = new CameraSnapshotManager();
 
-
 
     readonly snapshots = new PluginStateSnapshotManager();
 
     readonly snapshots = new PluginStateSnapshotManager();
 
 
 
     readonly behavior = {
 
     readonly behavior = {
 
@@ -73,6 +72,7 @@ class PluginState {
 
         this.dataState.dispose();
 
         this.dataState.dispose();
 
         this.behaviorState.dispose();
 
         this.behaviorState.dispose();
 
         this.cameraSnapshots.dispose();
 
         this.cameraSnapshots.dispose();
 
+        this.animation.dispose();
 
     }
 
     }
 
 
 
     constructor(private plugin: import('./context').PluginContext) {
 
     constructor(private plugin: import('./context').PluginContext) {

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

@@ -9,13 +9,20 @@ import { PluginStateObject } from '../objects';
 
 import { StateTransforms } from '../transforms';
 
 import { StateTransforms } from '../transforms';
 
 import { StateSelection } from 'mol-state/state/selection';
 
 import { StateSelection } from 'mol-state/state/selection';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
-import { ParamDefinition } from 'mol-util/param-definition';
 
+import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 
 
 export const AnimateModelIndex = PluginStateAnimation.create({
 
 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: () => ({ maxFPS: ParamDefinition.Numeric(3, { min: 0.5, max: 30, step: 0.5 }) }),
 
-    initialState: () => ({ frame: 1 }),
 
+    params: () => ({
 
+        mode: PD.MappedStatic('once', {
 
+            once: PD.Group({ direction: PD.Select('forward', [['forward', 'Forward'], ['backward', 'Backward']]) }, { isFlat: true }),
 
+            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 })
 
+    }),
 
+    initialState: () => ({} as { palindromeDirections?: { [id: string]: -1 | 1 | undefined } }),
 
     async apply(animState, t, ctx) {
 
     async apply(animState, t, ctx) {
 
         // limit fps
 
         // limit fps
 
         if (t.current > 0 && t.current - t.lastApplied < 1000 / ctx.params.maxFPS) {
 
         if (t.current > 0 && t.current - t.lastApplied < 1000 / ctx.params.maxFPS) {
 
@@ -28,19 +35,45 @@ export const AnimateModelIndex = PluginStateAnimation.create({
 
 
 
         const update = state.build();
 
         const update = state.build();
 
 
 
+        const params = ctx.params;
 
+        const palindromeDirections = animState.palindromeDirections || { };
 
+        let isEnd = false;
 
+
 
         for (const m of models) {
 
         for (const m of models) {
 
             const parent = StateSelection.findAncestorOfType(state.tree, state.cells, m.transform.ref, [PluginStateObject.Molecule.Trajectory]);
 
             const parent = StateSelection.findAncestorOfType(state.tree, state.cells, m.transform.ref, [PluginStateObject.Molecule.Trajectory]);
 
             if (!parent || !parent.obj) continue;
 
             if (!parent || !parent.obj) continue;
 
             const traj = parent.obj as PluginStateObject.Molecule.Trajectory;
 
             const traj = parent.obj as PluginStateObject.Molecule.Trajectory;
 
             update.to(m.transform.ref).update(StateTransforms.Model.ModelFromTrajectory,
 
             update.to(m.transform.ref).update(StateTransforms.Model.ModelFromTrajectory,
 
                 old => {
 
                 old => {
 
-                    let modelIndex = animState.frame % traj.data.length;
 
-                    if (modelIndex < 0) modelIndex += traj.data.length;
 
+                    const len = traj.data.length;
 
+                    let dir: -1 | 1 = 1;
 
+                    if (params.mode.name === 'once') {
 
+                        dir = params.mode.params.direction === 'backward' ? -1 : 1;
 
+                        // if we are at start or end already, do nothing.
 
+                        if ((dir === -1 && old.modelIndex === 0) || (dir === 1 && old.modelIndex === len - 1)) {
 
+                            isEnd = true;
 
+                            return old;
 
+                        }
 
+                    } else if (params.mode.name === 'palindrome') {
 
+                        if (old.modelIndex === 0) dir = 1;
 
+                        else if (old.modelIndex === len - 1) dir = -1;
 
+                        else dir = palindromeDirections[m.transform.ref] || 1;
 
+                    }
 
+                    palindromeDirections[m.transform.ref] = dir;
 
+
 
+                    let modelIndex = (old.modelIndex + dir) % len;
 
+                    if (modelIndex < 0) modelIndex += len;
 
+
 
+                    isEnd = isEnd || (dir === -1 && modelIndex === 0) || (dir === 1 && modelIndex === len - 1);
 
+
 
                     return { modelIndex };
 
                     return { modelIndex };
 
                 });
 
                 });
 
         }
 
         }
 
 
 
-        await PluginCommands.State.Update.dispatch(ctx.plugin, { state, tree: update });
 
-        return { kind: 'next', state: { frame: animState.frame + 1 } };
 
+        await PluginCommands.State.Update.dispatch(ctx.plugin, { state, tree: update, doNotLogTiming: true });
 
+
 
+        if (params.mode.name === 'once' && isEnd) return { kind: 'finished' };
 
+        if (params.mode.name === 'palindrome') return { kind: 'next', state: { palindromeDirections } };
 
+        return { kind: 'next', state: {} };
 
     }
 
     }
 
 })
 
 })

+ 37 - 10
src/mol-plugin/state/animation/manager.ts
View File 

@@ -13,6 +13,7 @@ export { PluginAnimationManager }
 
 
 
 // TODO: pause functionality (this needs to reset if the state tree changes)
 
 // TODO: pause functionality (this needs to reset if the state tree changes)
 
 // TODO: handle unregistered animations on state restore
 
 // TODO: handle unregistered animations on state restore
 
+// TODO: better API
 
 
 
 class PluginAnimationManager extends PluginComponent<PluginAnimationManager.State> {
 
 class PluginAnimationManager extends PluginComponent<PluginAnimationManager.State> {
 
     private map = new Map<string, PluginStateAnimation>();
 
     private map = new Map<string, PluginStateAnimation>();
 
@@ -20,9 +21,17 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
     private _current: PluginAnimationManager.Current;
 
     private _current: PluginAnimationManager.Current;
 
     private _params?: PD.For<PluginAnimationManager.State['params']> = void 0;
 
     private _params?: PD.For<PluginAnimationManager.State['params']> = void 0;
 
 
 
+    readonly events = {
 
+        updated: this.ev()
 
+    };
 
+
 
     get isEmpty() { return this.animations.length === 0; }
 
     get isEmpty() { return this.animations.length === 0; }
 
     get current() { return this._current!; }
 
     get current() { return this._current!; }
 
 
 
+    private triggerUpdate() {
 
+        this.events.updated.next();
 
+    }
 
+
 
     getParams(): PD.Params {
 
     getParams(): PD.Params {
 
         if (!this._params) {
 
         if (!this._params) {
 
             this._params = {
 
             this._params = {
 
@@ -35,9 +44,9 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
     }
 
     }
 
 
 
     updateParams(newParams: Partial<PluginAnimationManager.State['params']>) {
 
     updateParams(newParams: Partial<PluginAnimationManager.State['params']>) {
 
-        this.updateState({ params: { ...this.latestState.params, ...newParams } });
 
-        const anim = this.map.get(this.latestState.params.current)!;
 
-        const params = anim.params(this.context);
 
+        this.updateState({ params: { ...this.state.params, ...newParams } });
 
+        const anim = this.map.get(this.state.params.current)!;
 
+        const params = anim.params(this.context) as PD.Params;
 
         this._current = {
 
         this._current = {
 
             anim,
 
             anim,
 
             params,
 
             params,
 
@@ -69,6 +78,16 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
         }
 
         }
 
     }
 
     }
 
 
 
+    play<P>(animation: PluginStateAnimation<P>, params: P) {
 
+        this.stop();
 
+        if (!this.map.has(animation.name)) {
 
+            this.register(animation);
 
+        }
 
+        this.updateParams({ current: animation.name });
 
+        this.updateCurrentParams(params);
 
+        this.start();
 
+    }
 
+
 
     start() {
 
     start() {
 
         this.updateState({ animationState: 'playing' });
 
         this.updateState({ animationState: 'playing' });
 
         this.triggerUpdate();
 
         this.triggerUpdate();
 
@@ -81,11 +100,19 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
     }
 
     }
 
 
 
     stop() {
 
     stop() {
 
+        if (typeof this._frame !== 'undefined') cancelAnimationFrame(this._frame);
 
         this.updateState({ animationState: 'stopped' });
 
         this.updateState({ animationState: 'stopped' });
 
         this.triggerUpdate();
 
         this.triggerUpdate();
 
     }
 
     }
 
 
 
+    get isAnimating() {
 
+        return this.state.animationState === 'playing';
 
+    }
 
+
 
+    private _frame: number | undefined = void 0;
 
     private animate = async (t: number) => {
 
     private animate = async (t: number) => {
 
+        this._frame = void 0;
 
+
 
         if (this._current.startedTime < 0) this._current.startedTime = t;
 
         if (this._current.startedTime < 0) this._current.startedTime = t;
 
         const newState = await this._current.anim.apply(
 
         const newState = await this._current.anim.apply(
 
             this._current.state,
 
             this._current.state,
 
@@ -97,17 +124,17 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
         } else if (newState.kind === 'next') {
 
         } else if (newState.kind === 'next') {
 
             this._current.state = newState.state;
 
             this._current.state = newState.state;
 
             this._current.lastTime = t - this._current.startedTime;
 
             this._current.lastTime = t - this._current.startedTime;
 
-            if (this.latestState.animationState === 'playing') requestAnimationFrame(this.animate);
 
+            if (this.state.animationState === 'playing') this._frame = requestAnimationFrame(this.animate);
 
         } else if (newState.kind === 'skip') {
 
         } else if (newState.kind === 'skip') {
 
-            if (this.latestState.animationState === 'playing') requestAnimationFrame(this.animate);
 
+            if (this.state.animationState === 'playing') this._frame = requestAnimationFrame(this.animate);
 
         }
 
         }
 
     }
 
     }
 
 
 
     getSnapshot(): PluginAnimationManager.Snapshot {
 
     getSnapshot(): PluginAnimationManager.Snapshot {
 
-        if (!this.current) return { state: this.latestState };
 
+        if (!this.current) return { state: this.state };
 
 
 
         return {
 
         return {
 
-            state: this.latestState,
 
+            state: this.state,
 
             current: {
 
             current: {
 
                 paramValues: this._current.paramValues,
 
                 paramValues: this._current.paramValues,
 
                 state: this._current.anim.stateSerialization ? this._current.anim.stateSerialization.toJSON(this._current.state) : this._current.state
 
                 state: this._current.anim.stateSerialization ? this._current.anim.stateSerialization.toJSON(this._current.state) : this._current.state
 
@@ -125,7 +152,7 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
                 ? this._current.anim.stateSerialization.fromJSON(snapshot.current.state)
 
                 ? this._current.anim.stateSerialization.fromJSON(snapshot.current.state)
 
                 : snapshot.current.state;
 
                 : snapshot.current.state;
 
             this.triggerUpdate();
 
             this.triggerUpdate();
 
-            if (this.latestState.animationState === 'playing') this.resume();
 
+            if (this.state.animationState === 'playing') this.resume();
 
         }
 
         }
 
     }
 
     }
 
 
 
@@ -135,8 +162,8 @@ class PluginAnimationManager extends PluginComponent<PluginAnimationManager.Stat
 
         requestAnimationFrame(this.animate);
 
         requestAnimationFrame(this.animate);
 
     }
 
     }
 
 
 
-    constructor(ctx: PluginContext) {
 
-        super(ctx, { params: { current: '' }, animationState: 'stopped' });
 
+    constructor(private context: PluginContext) {
 
+        super({ params: { current: '' }, animationState: 'stopped' });
 
     }
 
     }
 
 }
 
 }

+ 6 - 6
src/mol-plugin/state/animation/model.ts
View File 

@@ -12,11 +12,11 @@ export { PluginStateAnimation }
 
 // TODO: helpers for building animations (once more animations are added)
 
 // TODO: helpers for building animations (once more animations are added)
 
 //       for example "composite animation"
 
 //       for example "composite animation"
 
 
 
-interface PluginStateAnimation<P extends PD.Params = any, S = any> {
 
+interface PluginStateAnimation<P = any, S = any> {
 
     name: string,
 
     name: string,
 
     readonly display: { readonly name: string, readonly description?: string },
 
     readonly display: { readonly name: string, readonly description?: string },
 
-    params: (ctx: PluginContext) => P,
 
-    initialState(params: PD.Values<P>, ctx: PluginContext): S,
 
+    params: (ctx: PluginContext) => PD.For<P>,
 
+    initialState(params: P, ctx: PluginContext): S,
 
 
 
     /**
 
     /**
 
      * Apply the current frame and modify the state.
 
      * Apply the current frame and modify the state.
 
@@ -38,12 +38,12 @@ namespace PluginStateAnimation {
 
     }
 
     }
 
 
 
     export type ApplyResult<S> = { kind: 'finished' } | { kind: 'skip' } | { kind: 'next', state: S }
 
     export type ApplyResult<S> = { kind: 'finished' } | { kind: 'skip' } | { kind: 'next', state: S }
 
-    export interface Context<P extends PD.Params> {
 
-        params: PD.Values<P>,
 
+    export interface Context<P> {
 
+        params: P,
 
         plugin: PluginContext
 
         plugin: PluginContext
 
     }
 
     }
 
 
 
-    export function create<P extends PD.Params, S>(params: PluginStateAnimation<P, S>) {
 
+    export function create<P, S>(params: PluginStateAnimation<P, S>) {
 
         return params;
 
         return params;
 
     }
 
     }
 
 }
 
 }

+ 14 - 18
src/mol-plugin/state/camera.ts
View File 

@@ -7,57 +7,53 @@
 
 import { Camera } from 'mol-canvas3d/camera';
 
 import { Camera } from 'mol-canvas3d/camera';
 
 import { OrderedMap } from 'immutable';
 
 import { OrderedMap } from 'immutable';
 
 import { UUID } from 'mol-util';
 
 import { UUID } from 'mol-util';
 
-import { RxEventHelper } from 'mol-util/rx-event-helper';
 
+import { PluginComponent } from 'mol-plugin/component';
 
 
 
 export { CameraSnapshotManager }
 
 export { CameraSnapshotManager }
 
 
 
-class CameraSnapshotManager {
 
-    private ev = RxEventHelper.create();
 
-    private _entries = OrderedMap<string, CameraSnapshotManager.Entry>().asMutable();
 
-
 
+class CameraSnapshotManager extends PluginComponent<{ entries: OrderedMap<string, CameraSnapshotManager.Entry> }> {
 
     readonly events = {
 
     readonly events = {
 
         changed: this.ev()
 
         changed: this.ev()
 
     };
 
     };
 
 
 
-    get entries() { return this._entries; }
 
-
 
     getEntry(id: string) {
 
     getEntry(id: string) {
 
-        return this._entries.get(id);
 
+        return this.state.entries.get(id);
 
     }
 
     }
 
 
 
     remove(id: string) {
 
     remove(id: string) {
 
-        if (!this._entries.has(id)) return;
 
-        this._entries.delete(id);
 
+        if (!this.state.entries.has(id)) return;
 
+        this.updateState({ entries: this.state.entries.delete(id) });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
     add(e: CameraSnapshotManager.Entry) {
 
     add(e: CameraSnapshotManager.Entry) {
 
-        this._entries.set(e.id, e);
 
+        this.updateState({ entries: this.state.entries.set(e.id, e) });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
     clear() {
 
     clear() {
 
-        if (this._entries.size === 0) return;
 
-        this._entries = OrderedMap<string, CameraSnapshotManager.Entry>().asMutable();
 
+        if (this.state.entries.size === 0) return;
 
+        this.updateState({ entries: OrderedMap<string, CameraSnapshotManager.Entry>() });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
     getStateSnapshot(): CameraSnapshotManager.StateSnapshot {
 
     getStateSnapshot(): CameraSnapshotManager.StateSnapshot {
 
         const entries: CameraSnapshotManager.Entry[] = [];
 
         const entries: CameraSnapshotManager.Entry[] = [];
 
-        this._entries.forEach(e => entries.push(e!));
 
+        this.state.entries.forEach(e => entries.push(e!));
 
         return { entries };
 
         return { entries };
 
     }
 
     }
 
 
 
     setStateSnapshot(state: CameraSnapshotManager.StateSnapshot ) {
 
     setStateSnapshot(state: CameraSnapshotManager.StateSnapshot ) {
 
-        this._entries = OrderedMap<string, CameraSnapshotManager.Entry>().asMutable();
 
+        const entries = OrderedMap<string, CameraSnapshotManager.Entry>().asMutable();
 
         for (const e of state.entries) {
 
         for (const e of state.entries) {
 
-            this._entries.set(e.id, e);
 
+            entries.set(e.id, e);
 
         }
 
         }
 
+        this.updateState({ entries: entries.asImmutable() });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
-    dispose() {
 
-        this.ev.dispose();
 
+    constructor() {
 
+        super({ entries: OrderedMap<string, CameraSnapshotManager.Entry>() });
 
     }
 
     }
 
 }
 
 }

+ 10 - 15
src/mol-plugin/state/snapshots.ts
View File 

@@ -6,44 +6,39 @@
 
 
 
 import { OrderedMap } from 'immutable';
 
 import { OrderedMap } from 'immutable';
 
 import { UUID } from 'mol-util';
 
 import { UUID } from 'mol-util';
 
-import { RxEventHelper } from 'mol-util/rx-event-helper';
 
 import { PluginState } from '../state';
 
 import { PluginState } from '../state';
 
+import { PluginComponent } from 'mol-plugin/component';
 
 
 
 export { PluginStateSnapshotManager }
 
 export { PluginStateSnapshotManager }
 
 
 
-class PluginStateSnapshotManager {
 
-    private ev = RxEventHelper.create();
 
-    private _entries = OrderedMap<string, PluginStateSnapshotManager.Entry>().asMutable();
 
-
 
+class PluginStateSnapshotManager extends PluginComponent<{ entries: OrderedMap<string, PluginStateSnapshotManager.Entry> }> {
 
     readonly events = {
 
     readonly events = {
 
         changed: this.ev()
 
         changed: this.ev()
 
     };
 
     };
 
 
 
-    get entries() { return this._entries; }
 
-
 
     getEntry(id: string) {
 
     getEntry(id: string) {
 
-        return this._entries.get(id);
 
+        return this.state.entries.get(id);
 
     }
 
     }
 
 
 
     remove(id: string) {
 
     remove(id: string) {
 
-        if (!this._entries.has(id)) return;
 
-        this._entries.delete(id);
 
+        if (!this.state.entries.has(id)) return;
 
+        this.updateState({ entries: this.state.entries.delete(id) });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
     add(e: PluginStateSnapshotManager.Entry) {
 
     add(e: PluginStateSnapshotManager.Entry) {
 
-        this._entries.set(e.id, e);
 
+        this.updateState({ entries: this.state.entries.set(e.id, e) });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
     clear() {
 
     clear() {
 
-        if (this._entries.size === 0) return;
 
-        this._entries = OrderedMap<string, PluginStateSnapshotManager.Entry>().asMutable();
 
+        if (this.state.entries.size === 0) return;
 
+        this.updateState({ entries: OrderedMap<string, PluginStateSnapshotManager.Entry>() });
 
         this.events.changed.next();
 
         this.events.changed.next();
 
     }
 
     }
 
 
 
-    dispose() {
 
-        this.ev.dispose();
 
+    constructor() {
 
+        super({ entries: OrderedMap<string, PluginStateSnapshotManager.Entry>() });
 
     }
 
     }
 
 }
 
 }

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

@@ -24,6 +24,7 @@ import { volumeFromDensityServerData } from 'mol-model-formats/volume/density-se
 
 import { trajectoryFromMmCIF } from 'mol-model-formats/structure/mmcif';
 
 import { trajectoryFromMmCIF } from 'mol-model-formats/structure/mmcif';
 
 import { parsePDB } from 'mol-io/reader/pdb/parser';
 
 import { parsePDB } from 'mol-io/reader/pdb/parser';
 
 import { trajectoryFromPDB } from 'mol-model-formats/structure/pdb';
 
 import { trajectoryFromPDB } from 'mol-model-formats/structure/pdb';
 
+import { Assembly } from 'mol-model/structure/model/properties/symmetry';
 
 
 
 export { TrajectoryFromMmCif }
 
 export { TrajectoryFromMmCif }
 
 type TrajectoryFromMmCif = typeof TrajectoryFromMmCif
 
 type TrajectoryFromMmCif = typeof TrajectoryFromMmCif
 
@@ -143,12 +144,26 @@ const StructureAssemblyFromModel = PluginStateTransform.BuiltIn({
 
         return Task.create('Build Assembly', async ctx => {
 
         return Task.create('Build Assembly', async ctx => {
 
             const model = a.data;
 
             const model = a.data;
 
             let id = params.id;
 
             let id = params.id;
 
-            let asm = ModelSymmetry.findAssembly(model, id || '');
 
-            if (!!id && id !== 'deposited' && !asm) throw new Error(`Assembly '${id}' not found`);
 
+            let asm: Assembly | undefined = void 0;
 
+
 
+            // if no id is specified, use the 1st assembly.
 
+            if (!id && model.symmetry.assemblies.length !== 0) {
 
+                id = model.symmetry.assemblies[0].id;
 
+            }
 
+
 
+            if (model.symmetry.assemblies.length === 0) {
 
+                if (id !== 'deposited') {
 
+                    plugin.log.warn(`Model '${a.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.`);
 
+                }
 
+            }
 
 
 
             const base = Structure.ofModel(model);
 
             const base = Structure.ofModel(model);
 
-            if ((id && !asm) || model.symmetry.assemblies.length === 0) {
 
-                if (!!id && id !== 'deposited') plugin.log.warn(`Model '${a.label}' has no assembly, returning deposited structure.`);
 
+            if (!asm) {
 
                 const label = { label: a.data.label, description: structureDesc(base) };
 
                 const label = { label: a.data.label, description: structureDesc(base) };
 
                 return new SO.Molecule.Structure(base, label);
 
                 return new SO.Molecule.Structure(base, label);
 
             }
 
             }

+ 2 - 2
src/mol-plugin/ui/base.tsx
View File 

@@ -10,7 +10,7 @@ import { PluginContext } from '../context';
 
 
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
 
 
-export abstract class PluginComponent<P = {}, S = {}, SS = {}> extends React.Component<P, S, SS> {
 
+export abstract class PluginUIComponent<P = {}, S = {}, SS = {}> extends React.Component<P, S, SS> {
 
     static contextType = PluginReactContext;
 
     static contextType = PluginReactContext;
 
     readonly plugin: PluginContext;
 
     readonly plugin: PluginContext;
 
 
 
@@ -35,7 +35,7 @@ export abstract class PluginComponent<P = {}, S = {}, SS = {}> extends React.Com
 
     }
 
     }
 
 }
 
 }
 
 
 
-export abstract class PurePluginComponent<P = {}, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
 
+export abstract class PurePluginUIComponent<P = {}, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
 
     static contextType = PluginReactContext;
 
     static contextType = PluginReactContext;
 
     readonly plugin: PluginContext;
 
     readonly plugin: PluginContext;

+ 5 - 5
src/mol-plugin/ui/camera.tsx
View File 

@@ -6,11 +6,11 @@
 
 
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import * as React from 'react';
 
 import * as React from 'react';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 import { ParameterControls } from './controls/parameters';
 
 import { ParameterControls } from './controls/parameters';
 
 
 
-export class CameraSnapshots extends PluginComponent<{ }, { }> {
 
+export class CameraSnapshots extends PluginUIComponent<{ }, { }> {
 
     render() {
 
     render() {
 
         return <div>
 
         return <div>
 
             <div className='msp-section-header'>Camera Snapshots</div>
 
             <div className='msp-section-header'>Camera Snapshots</div>
 
@@ -20,7 +20,7 @@ export class CameraSnapshots extends PluginComponent<{ }, { }> {
 
     }
 
     }
 
 }
 
 }
 
 
 
-class CameraSnapshotControls extends PluginComponent<{ }, { name: string, description: string }> {
 
+class CameraSnapshotControls extends PluginUIComponent<{ }, { name: string, description: string }> {
 
     static Params = {
 
     static Params = {
 
         name: PD.Text(),
 
         name: PD.Text(),
 
         description: PD.Text()
 
         description: PD.Text()
 
@@ -48,7 +48,7 @@ class CameraSnapshotControls extends PluginComponent<{ }, { name: string, descri
 
     }
 
     }
 
 }
 
 }
 
 
 
-class CameraSnapshotList extends PluginComponent<{ }, { }> {
 
+class CameraSnapshotList extends PluginUIComponent<{ }, { }> {
 
     componentDidMount() {
 
     componentDidMount() {
 
         this.subscribe(this.plugin.events.state.cameraSnapshots.changed, () => this.forceUpdate());
 
         this.subscribe(this.plugin.events.state.cameraSnapshots.changed, () => this.forceUpdate());
 
     }
 
     }
 
@@ -65,7 +65,7 @@ class CameraSnapshotList extends PluginComponent<{ }, { }> {
 
 
 
     render() {
 
     render() {
 
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
 
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
 
-            {this.plugin.state.cameraSnapshots.entries.valueSeq().map(e =><li key={e!.id}>
 
+            {this.plugin.state.cameraSnapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></button>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></button>
 
                 <button onClick={this.remove(e!.id)} className='msp-btn msp-btn-link msp-state-list-remove-button'>
 
                 <button onClick={this.remove(e!.id)} className='msp-btn msp-btn-link msp-state-list-remove-button'>
 
                     <span className='msp-icon msp-icon-remove' />
 
                     <span className='msp-icon msp-icon-remove' />

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

@@ -7,10 +7,10 @@
 
 import * as React from 'react';
 
 import * as React from 'react';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { UpdateTrajectory } from 'mol-plugin/state/actions/basic';
 
 import { UpdateTrajectory } from 'mol-plugin/state/actions/basic';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 import { LociLabelEntry } from 'mol-plugin/util/loci-label-manager';
 
 import { LociLabelEntry } from 'mol-plugin/util/loci-label-manager';
 
 
 
-export class Controls extends PluginComponent<{ }, { }> {
 
+export class Controls extends PluginUIComponent<{ }, { }> {
 
     render() {
 
     render() {
 
         return <>
 
         return <>
 
 
 
@@ -18,7 +18,7 @@ export class Controls extends PluginComponent<{ }, { }> {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class TrajectoryControls extends PluginComponent {
 
+export class TrajectoryControls extends PluginUIComponent {
 
     render() {
 
     render() {
 
         return <div>
 
         return <div>
 
             <button className='msp-btn msp-btn-link' onClick={() => PluginCommands.State.ApplyAction.dispatch(this.plugin, {
 
             <button className='msp-btn msp-btn-link' onClick={() => PluginCommands.State.ApplyAction.dispatch(this.plugin, {
 
@@ -37,7 +37,7 @@ export class TrajectoryControls extends PluginComponent {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class LociLabelControl extends PluginComponent<{}, { entries: ReadonlyArray<LociLabelEntry> }> {
 
+export class LociLabelControl extends PluginUIComponent<{}, { entries: ReadonlyArray<LociLabelEntry> }> {
 
     state = { entries: [] }
 
     state = { entries: [] }
 
 
 
     componentDidMount() {
 
     componentDidMount() {

+ 7 - 1
src/mol-plugin/ui/controls/parameters.tsx
View File 

@@ -29,8 +29,10 @@ export class ParameterControls<P extends PD.Params> extends React.PureComponent<
 
     render() {
 
     render() {
 
         const params = this.props.params;
 
         const params = this.props.params;
 
         const values = this.props.values;
 
         const values = this.props.values;
 
+        const keys = Object.keys(params);
 
+        if (keys.length === 0) return null;
 
         return <div style={{ width: '100%' }}>
 
         return <div style={{ width: '100%' }}>
 
-            {Object.keys(params).map(key => {
 
+            {keys.map(key => {
 
                 const param = params[key];
 
                 const param = params[key];
 
                 if (param.isHidden) return null;
 
                 if (param.isHidden) return null;
 
                 const Control = controlFor(param);
 
                 const Control = controlFor(param);
 
@@ -434,6 +436,10 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>,
 
 
 
     render() {
 
     render() {
 
         const params = this.props.param.params;
 
         const params = this.props.param.params;
 
+
 
+        // Do not show if there are no params.
 
+        if (Object.keys(params).length === 0) return null;
 
+
 
         const label = this.props.param.label || camelCaseToWords(this.props.name);
 
         const label = this.props.param.label || camelCaseToWords(this.props.name);
 
 
 
         const controls = <ParameterControls params={params} onChange={this.onChangeParam} values={this.props.value} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />;
 
         const controls = <ParameterControls params={params} onChange={this.onChangeParam} values={this.props.value} onEnter={this.props.onEnter} isDisabled={this.props.isDisabled} />;

+ 24 - 17
src/mol-plugin/ui/plugin.tsx
View File 

@@ -9,7 +9,7 @@ import { PluginContext } from '../context';
 
 import { StateTree } from './state-tree';
 
 import { StateTree } from './state-tree';
 
 import { Viewport, ViewportControls } from './viewport';
 
 import { Viewport, ViewportControls } from './viewport';
 
 import { Controls, TrajectoryControls, LociLabelControl } from './controls';
 
 import { Controls, TrajectoryControls, LociLabelControl } from './controls';
 
-import { PluginComponent, PluginReactContext } from './base';
 
+import { PluginUIComponent, PluginReactContext } from './base';
 
 import { CameraSnapshots } from './camera';
 
 import { CameraSnapshots } from './camera';
 
 import { StateSnapshots } from './state';
 
 import { StateSnapshots } from './state';
 
 import { List } from 'immutable';
 
 import { List } from 'immutable';
 
@@ -39,9 +39,9 @@ export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
 
     }
 
     }
 
 }
 
 }
 
 
 
-class Layout extends PluginComponent {
 
+class Layout extends PluginUIComponent {
 
     componentDidMount() {
 
     componentDidMount() {
 
-        this.subscribe(this.plugin.layout.updated, () => this.forceUpdate());
 
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
 
     }
 
     }
 
 
 
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
 
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
 
@@ -53,7 +53,7 @@ class Layout extends PluginComponent {
 
     }
 
     }
 
 
 
     render() {
 
     render() {
 
-        const layout = this.plugin.layout.latestState;
 
+        const layout = this.plugin.layout.state;
 
         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'}>
 
@@ -73,7 +73,7 @@ class Layout extends PluginComponent {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class ViewportWrapper extends PluginComponent {
 
+export class ViewportWrapper extends PluginUIComponent {
 
     render() {
 
     render() {
 
         return <>
 
         return <>
 
             <Viewport />
 
             <Viewport />
 
@@ -91,7 +91,7 @@ export class ViewportWrapper extends PluginComponent {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class State extends PluginComponent {
 
+export class State extends PluginUIComponent {
 
     componentDidMount() {
 
     componentDidMount() {
 
         this.subscribe(this.plugin.state.behavior.kind, () => this.forceUpdate());
 
         this.subscribe(this.plugin.state.behavior.kind, () => this.forceUpdate());
 
     }
 
     }
 
@@ -113,18 +113,18 @@ export class State extends PluginComponent {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
 
+export class Log extends PluginUIComponent<{}, { entries: List<LogEntry> }> {
 
     private wrapper = React.createRef<HTMLDivElement>();
 
     private wrapper = React.createRef<HTMLDivElement>();
 
 
 
     componentDidMount() {
 
     componentDidMount() {
 
-        this.subscribe(this.plugin.events.log, () => this.setState({ entries: this.plugin.log.entries.takeLast(100).toList() }));
 
+        this.subscribe(this.plugin.events.log, () => this.setState({ entries: this.plugin.log.entries }));
 
     }
 
     }
 
 
 
     componentDidUpdate() {
 
     componentDidUpdate() {
 
         this.scrollToBottom();
 
         this.scrollToBottom();
 
     }
 
     }
 
 
 
-    state = { entries: this.plugin.log.entries.takeLast(100).toList() };
 
+    state = { entries: this.plugin.log.entries };
 
 
 
     private scrollToBottom() {
 
     private scrollToBottom() {
 
         const log = this.wrapper.current;
 
         const log = this.wrapper.current;
 
@@ -132,19 +132,26 @@ export class Log extends PluginComponent<{}, { entries: List<LogEntry> }> {
 
     }
 
     }
 
 
 
     render() {
 
     render() {
 
+        // TODO: ability to show full log
 
+        // showing more entries dramatically slows animations.
 
+        const maxEntries = 10;
 
+        const xs = this.state.entries, l = xs.size;
 
+        const entries: JSX.Element[] = [];
 
+        for (let i = Math.max(0, l - maxEntries), o = 0; i < l; i++) {
 
+            const e = xs.get(i);
 
+            entries.push(<li key={o++}>
 
+                <div className={'msp-log-entry-badge msp-log-entry-' + e!.type} />
 
+                <div className='msp-log-timestamp'>{formatTime(e!.timestamp)}</div>
 
+                <div className='msp-log-entry'>{e!.message}</div>
 
+            </li>);
 
+        }
 
         return <div ref={this.wrapper} className='msp-log' style={{ position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' }}>
 
         return <div ref={this.wrapper} className='msp-log' style={{ position: 'absolute', top: '0', right: '0', bottom: '0', left: '0', overflowY: 'auto' }}>
 
-            <ul className='msp-list-unstyled'>
 
-                {this.state.entries.map((e, i) => <li key={i}>
 
-                    <div className={'msp-log-entry-badge msp-log-entry-' + e!.type} />
 
-                    <div className='msp-log-timestamp'>{formatTime(e!.timestamp)}</div>
 
-                    <div className='msp-log-entry'>{e!.message}</div>
 
-                </li>)}
 
-            </ul>
 
+            <ul className='msp-list-unstyled'>{entries}</ul>
 
         </div>;
 
         </div>;
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class CurrentObject extends PluginComponent {
 
+export class CurrentObject extends PluginUIComponent {
 
     get current() {
 
     get current() {
 
         return this.plugin.state.behavior.currentObject.value;
 
         return this.plugin.state.behavior.currentObject.value;
 
     }
 
     }

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

@@ -8,16 +8,16 @@ import * as React from 'react';
 
 import { PluginStateObject } from 'mol-plugin/state/objects';
 
 import { PluginStateObject } from 'mol-plugin/state/objects';
 
 import { State, StateObject } from 'mol-state'
 
 import { State, StateObject } from 'mol-state'
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 
 
-export class StateTree extends PluginComponent<{ state: State }> {
 
+export class StateTree extends PluginUIComponent<{ state: State }> {
 
     render() {
 
     render() {
 
         const n = this.props.state.tree.root.ref;
 
         const n = this.props.state.tree.root.ref;
 
         return <StateTreeNode state={this.props.state} nodeRef={n} />;
 
         return <StateTreeNode state={this.props.state} nodeRef={n} />;
 
     }
 
     }
 
 }
 
 }
 
 
 
-class StateTreeNode extends PluginComponent<{ nodeRef: string, state: State }, { state: State, isCollapsed: boolean }> {
 
+class StateTreeNode extends PluginUIComponent<{ nodeRef: string, state: State }, { state: State, isCollapsed: boolean }> {
 
     is(e: State.ObjectEvent) {
 
     is(e: State.ObjectEvent) {
 
         return e.ref === this.props.nodeRef && e.state === this.props.state;
 
         return e.ref === this.props.nodeRef && e.state === this.props.state;
 
     }
 
     }
 
@@ -77,7 +77,7 @@ class StateTreeNode extends PluginComponent<{ nodeRef: string, state: State }, {
 
     }
 
     }
 
 }
 
 }
 
 
 
-class StateTreeNodeLabel extends PluginComponent<{ nodeRef: string, state: State }, { state: State, isCurrent: boolean, isCollapsed: boolean }> {
 
+class StateTreeNodeLabel extends PluginUIComponent<{ nodeRef: string, state: State }, { state: State, isCurrent: boolean, isCollapsed: boolean }> {
 
     is(e: State.ObjectEvent) {
 
     is(e: State.ObjectEvent) {
 
         return e.ref === this.props.nodeRef && e.state === this.props.state;
 
         return e.ref === this.props.nodeRef && e.state === this.props.state;
 
     }
 
     }

+ 6 - 6
src/mol-plugin/ui/state.tsx
View File 

@@ -6,14 +6,14 @@
 
 
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import * as React from 'react';
 
 import * as React from 'react';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 import { shallowEqual } from 'mol-util';
 
 import { shallowEqual } from 'mol-util';
 
 import { List } from 'immutable';
 
 import { List } from 'immutable';
 
 import { ParameterControls } from './controls/parameters';
 
 import { ParameterControls } from './controls/parameters';
 
 import { ParamDefinition as PD} from 'mol-util/param-definition';
 
 import { ParamDefinition as PD} from 'mol-util/param-definition';
 
 import { Subject } from 'rxjs';
 
 import { Subject } from 'rxjs';
 
 
 
-export class StateSnapshots extends PluginComponent<{ }, { serverUrl: string }> {
 
+export class StateSnapshots extends PluginUIComponent<{ }, { serverUrl: string }> {
 
     state = { serverUrl: 'https://webchem.ncbr.muni.cz/molstar-state' }
 
     state = { serverUrl: 'https://webchem.ncbr.muni.cz/molstar-state' }
 
 
 
     updateServerUrl = (serverUrl: string) => { this.setState({ serverUrl }) };
 
     updateServerUrl = (serverUrl: string) => { this.setState({ serverUrl }) };
 
@@ -31,7 +31,7 @@ export class StateSnapshots extends PluginComponent<{ }, { serverUrl: string }>
 
 // TODO: this is not nice: device some custom event system.
 
 // TODO: this is not nice: device some custom event system.
 
 const UploadedEvent = new Subject();
 
 const UploadedEvent = new Subject();
 
 
 
-class StateSnapshotControls extends PluginComponent<{ serverUrl: string, serverChanged: (url: string) => void }, { name: string, description: string, serverUrl: string, isUploading: boolean }> {
 
+class StateSnapshotControls extends PluginUIComponent<{ serverUrl: string, serverChanged: (url: string) => void }, { name: string, description: string, serverUrl: string, isUploading: boolean }> {
 
     state = { name: '', description: '', serverUrl: this.props.serverUrl, isUploading: false };
 
     state = { name: '', description: '', serverUrl: this.props.serverUrl, isUploading: false };
 
 
 
     static Params = {
 
     static Params = {
 
@@ -93,7 +93,7 @@ class StateSnapshotControls extends PluginComponent<{ serverUrl: string, serverC
 
     }
 
     }
 
 }
 
 }
 
 
 
-class LocalStateSnapshotList extends PluginComponent<{ }, { }> {
 
+class LocalStateSnapshotList extends PluginUIComponent<{ }, { }> {
 
     componentDidMount() {
 
     componentDidMount() {
 
         this.subscribe(this.plugin.events.state.snapshots.changed, () => this.forceUpdate());
 
         this.subscribe(this.plugin.events.state.snapshots.changed, () => this.forceUpdate());
 
     }
 
     }
 
@@ -110,7 +110,7 @@ class LocalStateSnapshotList extends PluginComponent<{ }, { }> {
 
 
 
     render() {
 
     render() {
 
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
 
         return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
 
-            {this.plugin.state.snapshots.entries.valueSeq().map(e =><li key={e!.id}>
 
+            {this.plugin.state.snapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></button>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></button>
 
                 <button onClick={this.remove(e!.id)} className='msp-btn msp-btn-link msp-state-list-remove-button'>
 
                 <button onClick={this.remove(e!.id)} className='msp-btn msp-btn-link msp-state-list-remove-button'>
 
                     <span className='msp-icon msp-icon-remove' />
 
                     <span className='msp-icon msp-icon-remove' />
 
@@ -121,7 +121,7 @@ class LocalStateSnapshotList extends PluginComponent<{ }, { }> {
 
 }
 
 }
 
 
 
 type RemoteEntry = { url: string, removeUrl: string, timestamp: number, id: string, name: string, description: string }
 
 type RemoteEntry = { url: string, removeUrl: string, timestamp: number, id: string, name: string, description: string }
 
-class RemoteStateSnapshotList extends PluginComponent<{ serverUrl: string }, { entries: List<RemoteEntry>, isFetching: boolean }> {
 
+class RemoteStateSnapshotList extends PluginUIComponent<{ serverUrl: string }, { entries: List<RemoteEntry>, isFetching: boolean }> {
 
     state = { entries: List<RemoteEntry>(), isFetching: false };
 
     state = { entries: List<RemoteEntry>(), isFetching: false };
 
 
 
     componentDidMount() {
 
     componentDidMount() {

+ 7 - 7
src/mol-plugin/ui/state/animation.tsx
View File 

@@ -5,12 +5,12 @@
 
  */
 
  */
 
 
 
 import * as React from 'react';
 
 import * as React from 'react';
 
-import { PluginComponent } from '../base';
 
+import { PluginUIComponent } from '../base';
 
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 
 
 
-export class AnimationControls extends PluginComponent<{ }> {
 
+export class AnimationControls extends PluginUIComponent<{ }> {
 
     componentDidMount() {
 
     componentDidMount() {
 
-        this.subscribe(this.plugin.state.animation.updated, () => this.forceUpdate());
 
+        this.subscribe(this.plugin.state.animation.events.updated, () => this.forceUpdate());
 
     }
 
     }
 
 
 
     updateParams: ParamOnChange = p => {
 
     updateParams: ParamOnChange = p => {
 
@@ -23,7 +23,7 @@ export class AnimationControls extends PluginComponent<{ }> {
 
 
 
     startOrStop = () => {
 
     startOrStop = () => {
 
         const anim = this.plugin.state.animation;
 
         const anim = this.plugin.state.animation;
 
-        if (anim.latestState.animationState === 'playing') anim.stop();
 
+        if (anim.state.animationState === 'playing') anim.stop();
 
         else anim.start();
 
         else anim.start();
 
     }
 
     }
 
 
 
@@ -31,17 +31,17 @@ export class AnimationControls extends PluginComponent<{ }> {
 
         const anim = this.plugin.state.animation;
 
         const anim = this.plugin.state.animation;
 
         if (anim.isEmpty) return null;
 
         if (anim.isEmpty) return null;
 
 
 
-        const isDisabled = anim.latestState.animationState === 'playing';
 
+        const isDisabled = anim.state.animationState === 'playing';
 
 
 
         return <div className='msp-animation-section'>
 
         return <div className='msp-animation-section'>
 
             <div className='msp-section-header'>Animations</div>
 
             <div className='msp-section-header'>Animations</div>
 
 
 
-            <ParameterControls params={anim.getParams()} values={anim.latestState.params} onChange={this.updateParams} isDisabled={isDisabled} />
 
+            <ParameterControls params={anim.getParams()} values={anim.state.params} onChange={this.updateParams} isDisabled={isDisabled} />
 
             <ParameterControls params={anim.current.params} values={anim.current.paramValues} onChange={this.updateCurrentParams} isDisabled={isDisabled} />
 
             <ParameterControls params={anim.current.params} values={anim.current.paramValues} onChange={this.updateCurrentParams} isDisabled={isDisabled} />
 
 
 
             <div className='msp-btn-row-group'>
 
             <div className='msp-btn-row-group'>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.startOrStop}>
 
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.startOrStop}>
 
-                    {anim.latestState.animationState === 'playing' ? 'Stop' : 'Start'}
 
+                    {anim.state.animationState === 'playing' ? 'Stop' : 'Start'}
 
                 </button>
 
                 </button>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

+ 3 - 3
src/mol-plugin/ui/state/common.tsx
View File 

@@ -6,7 +6,7 @@
 
 
 
 import { State, Transform, Transformer } from 'mol-state';
 
 import { State, Transform, Transformer } from 'mol-state';
 
 import * as React from 'react';
 
 import * as React from 'react';
 
-import { PurePluginComponent } from '../base';
 
+import { PurePluginUIComponent } from '../base';
 
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 
 import { StateAction } from 'mol-state/action';
 
 import { StateAction } from 'mol-state/action';
 
 import { PluginContext } from 'mol-plugin/context';
 
 import { PluginContext } from 'mol-plugin/context';
 
@@ -15,7 +15,7 @@ import { Subject } from 'rxjs';
 
 
 
 export { StateTransformParameters, TransformContolBase };
 
 export { StateTransformParameters, TransformContolBase };
 
 
 
-class StateTransformParameters extends PurePluginComponent<StateTransformParameters.Props> {
 
+class StateTransformParameters extends PurePluginUIComponent<StateTransformParameters.Props> {
 
     validate(params: any) {
 
     validate(params: any) {
 
         // TODO
 
         // TODO
 
         return void 0;
 
         return void 0;
 
@@ -97,7 +97,7 @@ namespace TransformContolBase {
 
     }
 
     }
 
 }
 
 }
 
 
 
-abstract class TransformContolBase<P, S extends TransformContolBase.ControlState> extends PurePluginComponent<P, S> {
 
+abstract class TransformContolBase<P, S extends TransformContolBase.ControlState> extends PurePluginUIComponent<P, S> {
 
     abstract applyAction(): Promise<void>;
 
     abstract applyAction(): Promise<void>;
 
     abstract getInfo(): StateTransformParameters.Props['info'];
 
     abstract getInfo(): StateTransformParameters.Props['info'];
 
     abstract getHeader(): Transformer.Definition['display'];
 
     abstract getHeader(): Transformer.Definition['display'];

+ 3 - 3
src/mol-plugin/ui/task.tsx
View File 

@@ -5,13 +5,13 @@
 
  */
 
  */
 
 
 
 import * as React from 'react';
 
 import * as React from 'react';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 import { OrderedMap } from 'immutable';
 
 import { OrderedMap } from 'immutable';
 
 import { TaskManager } from 'mol-plugin/util/task-manager';
 
 import { TaskManager } from 'mol-plugin/util/task-manager';
 
 import { filter } from 'rxjs/operators';
 
 import { filter } from 'rxjs/operators';
 
 import { Progress } from 'mol-task';
 
 import { Progress } from 'mol-task';
 
 
 
-export class BackgroundTaskProgress extends PluginComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
 
+export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
 
     componentDidMount() {
 
     componentDidMount() {
 
         this.subscribe(this.plugin.events.task.progress.pipe(filter(e => e.level !== 'none')), e => {
 
         this.subscribe(this.plugin.events.task.progress.pipe(filter(e => e.level !== 'none')), e => {
 
             this.setState({ tracked: this.state.tracked.set(e.id, e) })
 
             this.setState({ tracked: this.state.tracked.set(e.id, e) })
 
@@ -30,7 +30,7 @@ export class BackgroundTaskProgress extends PluginComponent<{ }, { tracked: Orde
 
     }
 
     }
 
 }
 
 }
 
 
 
-class ProgressEntry extends PluginComponent<{ event: TaskManager.ProgressEvent }> {
 
+class ProgressEntry extends PluginUIComponent<{ event: TaskManager.ProgressEvent }> {
 
     render() {
 
     render() {
 
         const root = this.props.event.progress.root;
 
         const root = this.props.event.progress.root;
 
         const subtaskCount = countSubtasks(this.props.event.progress.root) - 1;
 
         const subtaskCount = countSubtasks(this.props.event.progress.root) - 1;

+ 10 - 10
src/mol-plugin/ui/viewport.tsx
View File 

@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 
 import * as React from 'react';
 
 import { ButtonsType } from 'mol-util/input/input-observer';
 
 import { ButtonsType } from 'mol-util/input/input-observer';
 
 import { Canvas3dIdentifyHelper } from 'mol-plugin/util/canvas3d-identify';
 
 import { Canvas3dIdentifyHelper } from 'mol-plugin/util/canvas3d-identify';
 
-import { PluginComponent } from './base';
 
+import { PluginUIComponent } from './base';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { PluginCommands } from 'mol-plugin/command';
 
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
 import { ParameterControls } from './controls/parameters';
 
 import { ParameterControls } from './controls/parameters';
 
@@ -20,7 +20,7 @@ interface ViewportState {
 
     noWebGl: boolean
 
     noWebGl: boolean
 
 }
 
 }
 
 
 
-export class ViewportControls extends PluginComponent {
 
+export class ViewportControls extends PluginUIComponent {
 
     state = {
 
     state = {
 
         isSettingsExpanded: false
 
         isSettingsExpanded: false
 
     }
 
     }
 
@@ -35,11 +35,11 @@ export class ViewportControls extends PluginComponent {
 
     }
 
     }
 
 
 
     toggleControls = () => {
 
     toggleControls = () => {
 
-        PluginCommands.Layout.Update.dispatch(this.plugin, { state: { showControls: !this.plugin.layout.latestState.showControls } });
 
+        PluginCommands.Layout.Update.dispatch(this.plugin, { state: { showControls: !this.plugin.layout.state.showControls } });
 
     }
 
     }
 
 
 
     toggleExpanded = () => {
 
     toggleExpanded = () => {
 
-        PluginCommands.Layout.Update.dispatch(this.plugin, { state: { isExpanded: !this.plugin.layout.latestState.isExpanded } });
 
+        PluginCommands.Layout.Update.dispatch(this.plugin, { state: { isExpanded: !this.plugin.layout.state.isExpanded } });
 
     }
 
     }
 
 
 
     setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
 
     setSettings = (p: { param: PD.Base<any>, name: string, value: any }) => {
 
@@ -55,7 +55,7 @@ export class ViewportControls extends PluginComponent {
 
             this.forceUpdate();
 
             this.forceUpdate();
 
         });
 
         });
 
 
 
-        this.subscribe(this.plugin.layout.updated, () => {
 
+        this.subscribe(this.plugin.layout.events.updated, () => {
 
             this.forceUpdate();
 
             this.forceUpdate();
 
         });
 
         });
 
     }
 
     }
 
@@ -73,15 +73,15 @@ export class ViewportControls extends PluginComponent {
 
         // TODO: show some icons dimmed etc..
 
         // TODO: show some icons dimmed etc..
 
         return <div className={'msp-viewport-controls'}>
 
         return <div className={'msp-viewport-controls'}>
 
             <div className='msp-viewport-controls-buttons'>
 
             <div className='msp-viewport-controls-buttons'>
 
-                {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.latestState.showControls)}
 
-                {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.latestState.isExpanded)}
 
+                {this.icon('tools', this.toggleControls, 'Toggle Controls', this.plugin.layout.state.showControls)}
 
+                {this.icon('expand-layout', this.toggleExpanded, 'Toggle Expanded', this.plugin.layout.state.isExpanded)}
 
                 {this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}
 
                 {this.icon('settings', this.toggleSettingsExpanded, 'Settings', this.state.isSettingsExpanded)}
 
                 {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
 
                 {this.icon('reset-scene', this.resetCamera, 'Reset Camera')}
 
             </div>
 
             </div>
 
             {this.state.isSettingsExpanded &&
 
             {this.state.isSettingsExpanded &&
 
             <div className='msp-viewport-controls-scene-options'>
 
             <div className='msp-viewport-controls-scene-options'>
 
                 <ControlGroup header='Layout' initialExpanded={true}>
 
                 <ControlGroup header='Layout' initialExpanded={true}>
 
-                    <ParameterControls params={PluginLayoutStateParams} values={this.plugin.layout.latestState} onChange={this.setLayout} />
 
+                    <ParameterControls params={PluginLayoutStateParams} values={this.plugin.layout.state} onChange={this.setLayout} />
 
                 </ControlGroup>
 
                 </ControlGroup>
 
                 <ControlGroup header='Viewport' initialExpanded={true}>
 
                 <ControlGroup header='Viewport' initialExpanded={true}>
 
                     <ParameterControls params={Canvas3DParams} values={this.plugin.canvas3d.props} onChange={this.setSettings} />
 
                     <ParameterControls params={Canvas3DParams} values={this.plugin.canvas3d.props} onChange={this.setSettings} />
 
@@ -91,7 +91,7 @@ export class ViewportControls extends PluginComponent {
 
     }
 
     }
 
 }
 
 }
 
 
 
-export class Viewport extends PluginComponent<{ }, ViewportState> {
 
+export class Viewport extends PluginUIComponent<{ }, ViewportState> {
 
     private container = React.createRef<HTMLDivElement>();
 
     private container = React.createRef<HTMLDivElement>();
 
     private canvas = React.createRef<HTMLCanvasElement>();
 
     private canvas = React.createRef<HTMLCanvasElement>();
 
 
 
@@ -128,7 +128,7 @@ export class Viewport extends PluginComponent<{ }, ViewportState> {
 
             idHelper.select(x, y);
 
             idHelper.select(x, y);
 
         });
 
         });
 
 
 
-        this.subscribe(this.plugin.layout.updated, () => {
 
+        this.subscribe(this.plugin.layout.events.updated, () => {
 
             setTimeout(this.handleResize, 50);
 
             setTimeout(this.handleResize, 50);
 
         });
 
         });
 
     }
 
     }

+ 1 - 1
src/mol-plugin/util/canvas3d-identify.ts
View File 

@@ -52,7 +52,7 @@ export class Canvas3dIdentifyHelper {
 
     }
 
     }
 
 
 
     private animate: (t: number) => void = t => {
 
     private animate: (t: number) => void = t => {
 
-        if (this.inside && t - this.prevT > 1000 / this.maxFps) {
 
+        if (!this.ctx.state.animation.isAnimating && this.inside && t - this.prevT > 1000 / this.maxFps) {
 
             this.prevT = t;
 
             this.prevT = t;
 
             this.currentIdentifyT = t;
 
             this.currentIdentifyT = t;
 
             this.identify(false, t);
 
             this.identify(false, t);

+ 0 - 1
src/mol-state/object.ts
View File 

@@ -59,7 +59,6 @@ interface StateObjectCell<T = StateObject> {
 
     // Which object was used as a parent to create data in this cell
 
     // Which object was used as a parent to create data in this cell
 
     sourceRef: Transform.Ref | undefined,
 
     sourceRef: Transform.Ref | undefined,
 
 
 
-    version: string
 
     status: StateObjectCell.Status,
 
     status: StateObjectCell.Status,
 
 
 
     params: {
 
     params: {

+ 1 - 9
src/mol-state/state.ts
View File 

@@ -8,7 +8,6 @@ import { StateObject, StateObjectCell } from './object';
 
 import { StateTree } from './tree';
 
 import { StateTree } from './tree';
 
 import { Transform } from './transform';
 
 import { Transform } from './transform';
 
 import { Transformer } from './transformer';
 
 import { Transformer } from './transformer';
 
-import { UUID } from 'mol-util';
 
 import { RuntimeContext, Task } from 'mol-task';
 
 import { RuntimeContext, Task } from 'mol-task';
 
 import { StateSelection } from './state/selection';
 
 import { StateSelection } from './state/selection';
 
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 
 import { RxEventHelper } from 'mol-util/rx-event-helper';
 
@@ -184,7 +183,6 @@ class State {
 
             sourceRef: void 0,
 
             sourceRef: void 0,
 
             obj: rootObject,
 
             obj: rootObject,
 
             status: 'ok',
 
             status: 'ok',
 
-            version: root.version,
 
             errorText: void 0,
 
             errorText: void 0,
 
             params: {
 
             params: {
 
                 definition: {},
 
                 definition: {},
 
@@ -350,7 +348,7 @@ function findUpdateRoots(cells: Map<Transform.Ref, StateObjectCell>, tree: State
 
 
 
 function findUpdateRootsVisitor(n: Transform, _: any, s: { roots: Ref[], cells: Map<Ref, StateObjectCell> }) {
 
 function findUpdateRootsVisitor(n: Transform, _: any, s: { roots: Ref[], cells: Map<Ref, StateObjectCell> }) {
 
     const cell = s.cells.get(n.ref);
 
     const cell = s.cells.get(n.ref);
 
-    if (!cell || cell.version !== n.version || cell.status === 'error') {
 
+    if (!cell || cell.transform.version !== n.version || cell.status === 'error') {
 
         s.roots.push(n.ref);
 
         s.roots.push(n.ref);
 
         return false;
 
         return false;
 
     }
 
     }
 
@@ -406,7 +404,6 @@ function initCellsVisitor(transform: Transform, _: any, { ctx, added }: InitCell
 
         transform,
 
         transform,
 
         sourceRef: void 0,
 
         sourceRef: void 0,
 
         status: 'pending',
 
         status: 'pending',
 
-        version: UUID.create22(),
 
         errorText: void 0,
 
         errorText: void 0,
 
         params: void 0
 
         params: void 0
 
     };
 
     };
 
@@ -556,7 +553,6 @@ async function updateNode(ctx: UpdateContext, currentRef: Ref): Promise<UpdateNo
 
 
 
     // special case for Root
 
     // special case for Root
 
     if (current.transform.ref === Transform.RootRef) {
 
     if (current.transform.ref === Transform.RootRef) {
 
-        current.version = transform.version;
 
         return { action: 'none' };
 
         return { action: 'none' };
 
     }
 
     }
 
 
 
@@ -574,7 +570,6 @@ async function updateNode(ctx: UpdateContext, currentRef: Ref): Promise<UpdateNo
 
         current.params = params;
 
         current.params = params;
 
         const obj = await createObject(ctx, currentRef, transform.transformer, parent, params.values);
 
         const obj = await createObject(ctx, currentRef, transform.transformer, parent, params.values);
 
         current.obj = obj;
 
         current.obj = obj;
 
-        current.version = transform.version;
 
 
 
         return { ref: currentRef, action: 'created', obj };
 
         return { ref: currentRef, action: 'created', obj };
 
     } else {
 
     } else {
 
@@ -591,14 +586,11 @@ async function updateNode(ctx: UpdateContext, currentRef: Ref): Promise<UpdateNo
 
                 const oldObj = current.obj;
 
                 const oldObj = current.obj;
 
                 const newObj = await createObject(ctx, currentRef, transform.transformer, parent, newParams);
 
                 const newObj = await createObject(ctx, currentRef, transform.transformer, parent, newParams);
 
                 current.obj = newObj;
 
                 current.obj = newObj;
 
-                current.version = transform.version;
 
                 return { ref: currentRef, action: 'replaced', oldObj, obj: newObj };
 
                 return { ref: currentRef, action: 'replaced', oldObj, obj: newObj };
 
             }
 
             }
 
             case Transformer.UpdateResult.Updated:
 
             case Transformer.UpdateResult.Updated:
 
-                current.version = transform.version;
 
                 return { ref: currentRef, action: 'updated', obj: current.obj! };
 
                 return { ref: currentRef, action: 'updated', obj: current.obj! };
 
             default:
 
             default:
 
-                current.version = transform.version;
 
                 return { action: 'none' };
 
                 return { action: 'none' };
 
         }
 
         }
 
     }
 
     }

+ 1 - 1
src/mol-state/state/selection.ts
View File 

@@ -29,7 +29,7 @@ namespace StateSelection {
 
     }
 
     }
 
 
 
     function isObj(arg: any): arg is StateObjectCell {
 
     function isObj(arg: any): arg is StateObjectCell {
 
-        return (arg as StateObjectCell).version !== void 0 && (arg as StateObjectCell).transform !== void 0;
 
+        return (arg as StateObjectCell).transform !== void 0 && (arg as StateObjectCell).status !== void 0;
 
     }
 
     }
 
 
 
     function isBuilder(arg: any): arg is Builder {
 
     function isBuilder(arg: any): arg is Builder {

+ 2 - 0
webpack.config.js
View File 

@@ -49,6 +49,8 @@ const sharedConfig = {
 
         }),
 
         }),
 
         new webpack.DefinePlugin({
 
         new webpack.DefinePlugin({
 
             __PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
 
             __PLUGIN_VERSION_TIMESTAMP__: webpack.DefinePlugin.runtimeValue(() => `${new Date().valueOf()}`, true),
 
+            // include this for production version of React
 
+            // 'process.env.NODE_ENV': JSON.stringify('production')
 
         }),
 
         }),
 
         new MiniCssExtractPlugin({ filename: 'app.css' })
 
         new MiniCssExtractPlugin({ filename: 'app.css' })
 
     ],
 
     ],