wip refactoring RepresentationState

src/apps/basic-wrapper/index.ts

@@ -123,7 +123,7 @@ class BasicWrapper {
         applyStripes: async () => {
             const state = this.plugin.state.dataState;
 
-            const visuals = state.selectQ(q => q.ofType(PluginStateObject.Molecule.Representation3D).filter(c => c.transform.transformer === StateTransforms.Representation.StructureRepresentation3D));
+            const visuals = state.selectQ(q => q.ofType(PluginStateObject.Molecule.Structure.Representation3D).filter(c => c.transform.transformer === StateTransforms.Representation.StructureRepresentation3D));
             const tree = state.build();
             const colorTheme = { name: StripedResidues.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(StripedResidues.Descriptor.name).defaultValues };
 

src/examples/proteopedia-wrapper/index.ts

@@ -190,7 +190,7 @@ class MolStarProteopediaWrapper {
 
             const state = this.state;
 
-            // const visuals = state.selectQ(q => q.ofType(PluginStateObject.Molecule.Representation3D).filter(c => c.transform.transformer === StateTransforms.Representation.StructureRepresentation3D));
+            // const visuals = state.selectQ(q => q.ofType(PluginStateObject.Molecule.Structure.Representation3D).filter(c => c.transform.transformer === StateTransforms.Representation.StructureRepresentation3D));
             const tree = state.build();
             const colorTheme = { name: EvolutionaryConservation.Descriptor.name, params: this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.get(EvolutionaryConservation.Descriptor.name).defaultValues };
 

src/mol-canvas3d/canvas3d.ts

@@ -52,7 +52,7 @@ interface Canvas3D {
 
     add: (repr: Representation.Any) => void
     remove: (repr: Representation.Any) => void
-    update: () => void
+    update: (repr?: Representation.Any, keepBoundingSphere?: boolean) => void
     clear: () => void
 
     // draw: (force?: boolean) => void
@@ -357,7 +357,14 @@ namespace Canvas3D {
                     reprCount.next(reprRenderObjects.size)
                 }
             },
-            update: () => scene.update(void 0, false),
+            update: (repr, keepSphere) => {
+                if (repr) {
+                    if (!reprRenderObjects.has(repr)) return;
+                    scene.update(repr.renderObjects, !!keepSphere);
+                } else {
+                    scene.update(void 0, !!keepSphere)
+                }
+            },
             clear: () => {
                 reprRenderObjects.clear()
                 scene.clear()

src/mol-model/structure/structure/util/unit-transforms.ts

@@ -15,9 +15,11 @@ export class StructureUnitTransforms {
     /** maps unit.id to offset of transform in unitTransforms */
     private unitOffsetMap = IntMap.Mutable<number>();
     private groupIndexMap = IntMap.Mutable<number>();
+    private size: number;
 
     constructor(readonly structure: Structure) {
         this.unitTransforms = new Float32Array(structure.units.length * 16)
+        this.size = structure.units.length
         fillIdentityTransform(this.unitTransforms, structure.units.length)
         let groupOffset = 0
         for (let i = 0, il = structure.unitSymmetryGroups.length; i <il; ++i) {
@@ -32,6 +34,10 @@ export class StructureUnitTransforms {
         }
     }
 
+    reset() {
+        fillIdentityTransform(this.unitTransforms, this.size);
+    }
+
     setTransform(matrix: Mat4, unit: Unit) {
         Mat4.toArray(matrix, this.unitTransforms, this.unitOffsetMap.get(unit.id))
     }

src/mol-plugin/behavior/dynamic/animation.ts

@@ -63,7 +63,7 @@ export const StructureAnimation = PluginBehavior.create<StructureAnimationProps>
         rotate(rad: number) {
             this.updatedUnitTransforms.clear()
             const state = this.ctx.state.dataState
-            const reprs = state.selectQ(q => q.rootsOfType(PluginStateObject.Molecule.Representation3D))
+            const reprs = state.selectQ(q => q.rootsOfType(PluginStateObject.Molecule.Structure.Representation3D))
             Mat4.rotate(this.rotMat, this.tmpMat, rad, this.rotVec)
             for (const r of reprs) {
                 if (!SO.isRepresentation3D(r.obj)) return
@@ -90,8 +90,8 @@ export const StructureAnimation = PluginBehavior.create<StructureAnimationProps>
                     this.updatedUnitTransforms.add(structure.obj)
                 }
 
-                r.obj.data.setState({ unitTransforms })
-                this.ctx.canvas3d.add(r.obj.data)
+                r.obj.data.repr.setState({ unitTransforms })
+                this.ctx.canvas3d.add(r.obj.data.repr)
             }
             this.ctx.canvas3d.requestDraw(true)
         }
@@ -111,7 +111,7 @@ export const StructureAnimation = PluginBehavior.create<StructureAnimationProps>
         explode(p: number) {
             this.updatedUnitTransforms.clear()
             const state = this.ctx.state.dataState
-            const reprs = state.selectQ(q => q.rootsOfType(PluginStateObject.Molecule.Representation3D));
+            const reprs = state.selectQ(q => q.rootsOfType(PluginStateObject.Molecule.Structure.Representation3D));
             for (const r of reprs) {
                 if (!SO.isRepresentation3D(r.obj)) return
                 const structure = getRootStructure(r, state)
@@ -134,8 +134,8 @@ export const StructureAnimation = PluginBehavior.create<StructureAnimationProps>
                     this.updatedUnitTransforms.add(structure.obj)
                 }
 
-                r.obj.data.setState({ unitTransforms })
-                this.ctx.canvas3d.add(r.obj.data)
+                r.obj.data.repr.setState({ unitTransforms })
+                this.ctx.canvas3d.add(r.obj.data.repr)
             }
             this.ctx.canvas3d.requestDraw(true)
         }

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

@@ -26,7 +26,6 @@ import { compile } from 'mol-script/runtime/query/compiler';
 import { Overpaint } from 'mol-theme/overpaint';
 import { parseMolScript } from 'mol-script/language/parser';
 import { transpileMolScript } from 'mol-script/script/mol-script/symbols';
-import { SymmetryOperator } from 'mol-math/geometry';
 
 export const HighlightLoci = PluginBehavior.create({
     name: 'representation-highlight-loci',
@@ -137,7 +136,7 @@ export namespace ExplodeRepresentation3D {
 
     export class Behavior implements PluginBehavior<Params> {
         private currentT = 0;
-        private repr: StateObjectTracker<PluginStateObject.Molecule.Representation3D>;
+        private repr: StateObjectTracker<PluginStateObject.Molecule.Structure.Representation3D>;
         private structure: StateObjectTracker<PluginStateObject.Molecule.Structure>;
         private transforms: StructureUnitTransforms;
 
@@ -151,7 +150,7 @@ export namespace ExplodeRepresentation3D {
         }
 
         register(ref: string): void {
-            this.repr.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Representation3D]));
+            this.repr.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Structure.Representation3D]));
             this.structure.setQuery(StateSelection.Generators.byRef(ref).rootOfType([PluginStateObject.Molecule.Structure]));
             this.update(this.params);
         }
@@ -185,8 +184,8 @@ export namespace ExplodeRepresentation3D {
 
             // TODO: where to handle unitTransforms composition?
             // Manually or inside the representation? "inside" would better compose with future additions.
-            this.repr.data.setState({ unitTransforms: this.transforms });
-            this.ctx.canvas3d.add(this.repr.data);
+            this.repr.data.repr.setState({ unitTransforms: this.transforms });
+            this.ctx.canvas3d.add(this.repr.data.repr);
             this.ctx.canvas3d.requestDraw(true);
 
             return true;
@@ -226,7 +225,7 @@ export namespace ColorRepresentation3D {
 
     export class Behavior implements PluginBehavior<Params> {
         private currentColorMappings: ColorMappings = [];
-        private repr: StateObjectTracker<PluginStateObject.Molecule.Representation3D>;
+        private repr: StateObjectTracker<PluginStateObject.Molecule.Structure.Representation3D>;
         private structure: StateObjectTracker<PluginStateObject.Molecule.Structure>;
 
         private updateData() {
@@ -236,7 +235,7 @@ export namespace ColorRepresentation3D {
         }
 
         register(ref: string): void {
-            this.repr.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Representation3D]));
+            this.repr.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Structure.Representation3D]));
             this.structure.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Structure]));
             this.update(this.params);
         }
@@ -272,8 +271,8 @@ export namespace ColorRepresentation3D {
 
         private applyLayers(layers: Overpaint.Layers): boolean {
             if (!this.repr.data) return true;
-            this.repr.data.setOverpaint(layers)
-            this.ctx.canvas3d.add(this.repr.data);
+            this.repr.data.repr.setOverpaint(layers)
+            this.ctx.canvas3d.add(this.repr.data.repr);
             this.ctx.canvas3d.requestDraw(true);
             return true;
         }
@@ -291,67 +290,4 @@ export namespace ColorRepresentation3D {
     }
 
     export class Obj extends PluginStateObject.CreateBehavior<Behavior>({ name: 'Color Representation3D Behavior' }) { }
-}
-
-export namespace UnwindAssemblyRepresentation3D {
-    export const Params = {
-        t: PD.Numeric(0, { min: 0, max: 1, step: 0.01 })
-    }
-    export type Params = PD.Values<typeof Params>
-
-    export class Behavior implements PluginBehavior<Params> {
-        private currentT = 0;
-        private repr: StateObjectTracker<PluginStateObject.Molecule.Representation3D>;
-        private structure: StateObjectTracker<PluginStateObject.Molecule.Structure>;
-        private transforms: StructureUnitTransforms;
-
-        private updateData() {
-            const reprUpdated = this.repr.update();
-            const strUpdated = this.structure.update();
-            if (strUpdated && this.structure.data) {
-                this.transforms = new StructureUnitTransforms(this.structure.data);
-            }
-            return reprUpdated || strUpdated;
-        }
-
-        register(ref: string): void {
-            this.repr.setQuery(StateSelection.Generators.byRef(ref).ancestorOfType([PluginStateObject.Molecule.Representation3D]));
-            this.structure.setQuery(StateSelection.Generators.byRef(ref).rootOfType([PluginStateObject.Molecule.Structure]));
-            this.update(this.params);
-        }
-
-        private transMat = Mat4.zero();
-
-        update(params: Params): boolean | Promise<boolean> {
-            if (!this.updateData() && params.t === this.currentT) return false;
-            this.currentT = params.t;
-            if (!this.structure.data || !this.repr.data) return true;
-
-            const structure = this.structure.data;
-            for (let i = 0, _i = structure.units.length; i < _i; i++) {
-                const u = structure.units[i];
-                SymmetryOperator.lerpFromIdentity(this.transMat, u.conformation.operator, this.currentT);
-                this.transforms.setTransform(this.transMat, u);
-            }
-
-            this.repr.data.setState({ unitTransforms: this.transforms });
-            this.ctx.canvas3d.add(this.repr.data);
-            this.ctx.canvas3d.requestDraw(true);
-
-            return true;
-        }
-
-        unregister(): void {
-            this.update({ t: 0 })
-            this.repr.cell = void 0;
-            this.structure.cell = void 0;
-        }
-
-        constructor(private ctx: PluginContext, private params: Params) {
-            this.repr = new StateObjectTracker(ctx.state.dataState);
-            this.structure = new StateObjectTracker(ctx.state.dataState);
-        }
-    }
-
-    export class Obj extends PluginStateObject.CreateBehavior<Behavior>({ name: 'Explode Representation3D Behavior' }) { }
 }

src/mol-plugin/behavior/dynamic/volume-streaming/transformers.ts

@@ -179,7 +179,7 @@ const VolumeStreamingVisual = PluginStateTransform.BuiltIn({
         const repr = provider.factory({ webgl: plugin.canvas3d.webgl, ...plugin.volumeRepresentation.themeCtx }, provider.getParams)
         repr.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: channel.data }, params))
         await repr.createOrUpdate(props, channel.data).runInContext(ctx);
-        return new SO.Volume.Representation3D(repr, { label: `${Math.round(channel.isoValue.relativeValue * 100) / 100} σ [${srcParams.channel}]` });
+        return new SO.Volume.Representation3D({ repr, source: a }, { label: `${Math.round(channel.isoValue.relativeValue * 100) / 100} σ [${srcParams.channel}]` });
     }),
     update: ({ a, b, oldParams, newParams }, plugin: PluginContext) => Task.create('Volume Representation', async ctx => {
         // TODO : check if params/underlying data/etc have changed; maybe will need to export "data" or some other "tag" in the Representation for this to work
@@ -189,9 +189,9 @@ const VolumeStreamingVisual = PluginStateTransform.BuiltIn({
         if (!channel) return StateTransformer.UpdateResult.Unchanged;
 
         const params = createVolumeProps(a.data, newParams.channel);
-        const props = { ...b.data.props, ...params.type.params };
-        b.data.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: channel.data }, params))
-        await b.data.createOrUpdate(props, channel.data).runInContext(ctx);
+        const props = { ...b.data.repr.props, ...params.type.params };
+        b.data.repr.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: channel.data }, params))
+        await b.data.repr.createOrUpdate(props, channel.data).runInContext(ctx);
         return StateTransformer.UpdateResult.Updated;
     })
 });

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

@@ -11,6 +11,7 @@ import { State } from 'mol-state';
 
 export function registerDefault(ctx: PluginContext) {
     SyncRepresentationToCanvas(ctx);
+    SyncStructureRepresentation3DState(ctx); // should be AFTER SyncRepresentationToCanvas
     UpdateRepresentationVisibility(ctx);
 }
 
@@ -20,44 +21,65 @@ export function SyncRepresentationToCanvas(ctx: PluginContext) {
     const events = ctx.state.dataState.events;
     events.object.created.subscribe(e => {
         if (!SO.isRepresentation3D(e.obj)) return;
-        updateVisibility(e, e.obj.data);
-        e.obj.data.setState({ syncManually: true });
-        ctx.canvas3d.add(e.obj.data);
+        updateVisibility(e, e.obj.data.repr);
+        e.obj.data.repr.setState({ syncManually: true });
+        ctx.canvas3d.add(e.obj.data.repr);
 
         if (reprCount === 0) ctx.canvas3d.resetCamera();
         reprCount++;
     });
     events.object.updated.subscribe(e => {
         if (e.oldObj && SO.isRepresentation3D(e.oldObj)) {
-            ctx.canvas3d.remove(e.oldObj.data);
+            ctx.canvas3d.remove(e.oldObj.data.repr);
             ctx.canvas3d.requestDraw(true);
-            e.oldObj.data.destroy();
+            e.oldObj.data.repr.destroy();
         }
 
         if (!SO.isRepresentation3D(e.obj)) {
             return;
         }
 
-        updateVisibility(e, e.obj.data);
+        updateVisibility(e, e.obj.data.repr);
         if (e.action === 'recreate') {
-            e.obj.data.setState({ syncManually: true });
+            e.obj.data.repr.setState({ syncManually: true });
         }
-        ctx.canvas3d.add(e.obj.data);
+        ctx.canvas3d.add(e.obj.data.repr);
     });
     events.object.removed.subscribe(e => {
         if (!SO.isRepresentation3D(e.obj)) return;
-        ctx.canvas3d.remove(e.obj.data);
+        ctx.canvas3d.remove(e.obj.data.repr);
         ctx.canvas3d.requestDraw(true);
-        e.obj.data.destroy();
+        e.obj.data.repr.destroy();
         reprCount--;
     });
 }
 
+
+export function SyncStructureRepresentation3DState(ctx: PluginContext) {
+    // TODO: figure out how to do transform composition here?
+    const events = ctx.state.dataState.events;
+    events.object.created.subscribe(e => {
+        if (!SO.Molecule.Structure.Representation3DState.is(e.obj)) return;
+        const data = e.obj.data as SO.Molecule.Structure.Representation3DStateData;
+        data.source.data.repr.setState(data.state);
+        ctx.canvas3d.update(data.source.data.repr);
+        ctx.canvas3d.requestDraw(true);
+    });
+    events.object.updated.subscribe(e => {
+        if (!SO.Molecule.Structure.Representation3DState.is(e.obj)) return;
+        const data = e.obj.data as SO.Molecule.Structure.Representation3DStateData;
+        data.source.data.repr.setState(data.state);
+        ctx.canvas3d.update(data.source.data.repr);
+        ctx.canvas3d.requestDraw(true);
+    });
+}
+
+
 export function UpdateRepresentationVisibility(ctx: PluginContext) {
     ctx.state.dataState.events.cell.stateUpdated.subscribe(e => {
         const cell = e.state.cells.get(e.ref)!;
         if (!SO.isRepresentation3D(cell.obj)) return;
-        updateVisibility(e, cell.obj.data);
+        updateVisibility(e, cell.obj.data.repr);
         ctx.canvas3d.requestDraw(true);
     })
 }

src/mol-plugin/state/animation/built-in.ts

@@ -10,7 +10,6 @@ import { StateTransforms } from '../transforms';
 import { StateSelection } from 'mol-state';
 import { PluginCommands } from 'mol-plugin/command';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
-import { UnwindAssemblyRepresentation3D } from 'mol-plugin/behavior/dynamic/representation';
 
 export const AnimateModelIndex = PluginStateAnimation.create({
     name: 'built-in.animate-model-index',
@@ -93,7 +92,8 @@ export const AnimateAssemblyUnwind = PluginStateAnimation.create({
     initialState: () => ({ t: 0 }),
     async apply(animState, t, ctx) {
         const state = ctx.plugin.state.dataState;
-        const anims = state.selectQ(q => q.ofType(UnwindAssemblyRepresentation3D.Obj));
+        const anims = state.selectQ(q => q.rootsOfType(PluginStateObject.Molecule.Structure.Representation3DState)
+            .filter(c => c.transform.transformer === StateTransforms.Representation.UnwindStructureAssemblyRepresentation3D));
 
         if (anims.length === 0) {
             // nothing more to do here

src/mol-plugin/state/animation/helpers.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+
+import { SymmetryOperator } from 'mol-math/geometry';
+import { Mat4 } from 'mol-math/linear-algebra';
+import { Structure } from 'mol-model/structure';
+import { StructureUnitTransforms } from 'mol-model/structure/structure/util/unit-transforms';
+
+const _unwindMatrix = Mat4.zero();
+export function unwindStructureAssebmly(structure: Structure, unitTransforms: StructureUnitTransforms, t: number) {
+    for (let i = 0, _i = structure.units.length; i < _i; i++) {
+        const u = structure.units[i];
+        SymmetryOperator.lerpFromIdentity(_unwindMatrix, u.conformation.operator, t);
+        unitTransforms.setTransform(_unwindMatrix, u);
+    }
+}

src/mol-plugin/state/objects.ts

@@ -10,7 +10,7 @@ import { Model as _Model, Structure as _Structure } from 'mol-model/structure';
 import { VolumeData } from 'mol-model/volume';
 import { PluginBehavior } from 'mol-plugin/behavior/behavior';
 import { Representation } from 'mol-repr/representation';
-import { StructureRepresentation } from 'mol-repr/structure/representation';
+import { StructureRepresentation, StructureRepresentationState } from 'mol-repr/structure/representation';
 import { VolumeRepresentation } from 'mol-repr/volume/representation';
 import { StateObject, StateTransformer } from 'mol-state';
 import { Ccp4File } from 'mol-io/reader/ccp4/schema';
@@ -27,7 +27,7 @@ export namespace PluginStateObject {
 
     export const Create = StateObject.factory<TypeInfo>();
 
-    export function isRepresentation3D(o?: Any): o is StateObject<Representation.Any, TypeInfo> {
+    export function isRepresentation3D(o?: Any): o is StateObject<Representation3DData<Representation.Any>, TypeInfo> {
         return !!o && o.type.typeClass === 'Representation3D';
     }
 
@@ -35,8 +35,9 @@ export namespace PluginStateObject {
         return !!o && o.type.typeClass === 'Behavior';
     }
 
-    export function CreateRepresentation3D<T extends Representation.Any>(type: { name: string }) {
-        return Create<T>({ ...type, typeClass: 'Representation3D' })
+    export interface Representation3DData<T extends Representation.Any, S extends StateObject = StateObject> { repr: T, source: S }
+    export function CreateRepresentation3D<T extends Representation.Any, S extends StateObject = StateObject>(type: { name: string }) {
+        return Create<Representation3DData<T, S>>({ ...type, typeClass: 'Representation3D' });
     }
 
     export function CreateBehavior<T extends PluginBehavior>(type: { name: string }) {
@@ -80,8 +81,12 @@ export namespace PluginStateObject {
         export class Trajectory extends Create<ReadonlyArray<_Model>>({ name: 'Trajectory', typeClass: 'Object' }) { }
         export class Model extends Create<_Model>({ name: 'Model', typeClass: 'Object' }) { }
         export class Structure extends Create<_Structure>({ name: 'Structure', typeClass: 'Object' }) { }
-        export class Representation3D extends CreateRepresentation3D<StructureRepresentation<any> | ShapeRepresentation<any, any, any>>({ name: 'Structure 3D' }) { }
-        export class Representation3DState extends Create<{}>({ name: 'Structure 3D State', typeClass: 'Object' }) { }
+
+        export namespace Structure {
+            export class Representation3D extends CreateRepresentation3D<StructureRepresentation<any> | ShapeRepresentation<any, any, any>, Structure>({ name: 'Structure 3D' }) { }
+            export interface Representation3DStateData { source: Representation3D, state: Partial<StructureRepresentationState>, info?: unknown }
+            export class Representation3DState extends Create<Representation3DStateData>({ name: 'Structure 3D State', typeClass: 'Object' }) { }
+        }
     }
 
     export namespace Volume {

src/mol-plugin/state/transforms/representation.ts

@@ -7,7 +7,7 @@
 
 import { Structure } from 'mol-model/structure';
 import { VolumeData, VolumeIsoValue } from 'mol-model/volume';
-import { ExplodeRepresentation3D, ColorRepresentation3D, UnwindAssemblyRepresentation3D } from 'mol-plugin/behavior/dynamic/representation';
+import { ExplodeRepresentation3D, ColorRepresentation3D } from 'mol-plugin/behavior/dynamic/representation';
 import { PluginContext } from 'mol-plugin/context';
 import { RepresentationProvider } from 'mol-repr/representation';
 import { BuiltInStructureRepresentationsName } from 'mol-repr/structure/registry';
@@ -25,6 +25,8 @@ import { Text } from 'mol-geo/geometry/text/text';
 import { ColorNames } from 'mol-util/color/tables';
 import { getLabelRepresentation } from 'mol-plugin/util/structure-labels';
 import { ShapeRepresentation } from 'mol-repr/shape/representation';
+import { StructureUnitTransforms } from 'mol-model/structure/structure/util/unit-transforms';
+import { unwindStructureAssebmly } from '../animation/helpers';
 
 export { StructureRepresentation3D }
 export { StructureRepresentation3DHelpers }
@@ -118,7 +120,7 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
     name: 'structure-representation-3d',
     display: '3D Representation',
     from: SO.Molecule.Structure,
-    to: SO.Molecule.Representation3D,
+    to: SO.Molecule.Structure.Representation3D,
     params: (a, ctx: PluginContext) => {
         const { registry, themeCtx } = ctx.structureRepresentation
         const type = registry.get(registry.default.name);
@@ -173,15 +175,15 @@ const StructureRepresentation3D = PluginStateTransform.BuiltIn({
             repr.setTheme(createTheme(plugin.structureRepresentation.themeCtx, { structure: a.data }, params))
             // TODO set initial state, repr.setState({})
             await repr.createOrUpdate(props, a.data).runInContext(ctx);
-            return new SO.Molecule.Representation3D(repr, { label: provider.label });
+            return new SO.Molecule.Structure.Representation3D({ repr, source: a } , { label: provider.label });
         });
     },
     update({ a, b, oldParams, newParams }, plugin: PluginContext) {
         return Task.create('Structure Representation', async ctx => {
             if (newParams.type.name !== oldParams.type.name) return StateTransformer.UpdateResult.Recreate;
-            const props = { ...b.data.props, ...newParams.type.params }
-            b.data.setTheme(createTheme(plugin.structureRepresentation.themeCtx, { structure: a.data }, newParams));
-            await b.data.createOrUpdate(props, a.data).runInContext(ctx);
+            const props = { ...b.data.repr.props, ...newParams.type.params }
+            b.data.repr.setTheme(createTheme(plugin.structureRepresentation.themeCtx, { structure: a.data }, newParams));
+            await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
             return StateTransformer.UpdateResult.Updated;
         });
     }
@@ -193,7 +195,7 @@ const StructureLabels3D = PluginStateTransform.BuiltIn({
     name: 'structure-labels-3d',
     display: '3D Labels',
     from: SO.Molecule.Structure,
-    to: SO.Molecule.Representation3D,
+    to: SO.Molecule.Structure.Representation3D,
     params: {
         // TODO: other targets
         target: PD.MappedStatic('residues', {
@@ -219,12 +221,12 @@ const StructureLabels3D = PluginStateTransform.BuiltIn({
     apply({ a, params }) {
         return Task.create('Structure Labels', async ctx => {
             const repr = await getLabelRepresentation(ctx, a.data, params);
-            return new SO.Molecule.Representation3D(repr, { label: `Labels`, description: params.target.name });
+            return new SO.Molecule.Structure.Representation3D({ repr, source: a }, { label: `Labels`, description: params.target.name });
         });
     },
     update({ a, b, newParams }) {
         return Task.create('Structure Labels', async ctx => {
-            await getLabelRepresentation(ctx, a.data, newParams, b.data as ShapeRepresentation<any, any, any>);
+            await getLabelRepresentation(ctx, a.data, newParams, b.data.repr as ShapeRepresentation<any, any, any>);
             return StateTransformer.UpdateResult.Updated;
         });
     }
@@ -234,30 +236,37 @@ type UnwindStructureAssemblyRepresentation3D = typeof UnwindStructureAssemblyRep
 const UnwindStructureAssemblyRepresentation3D = PluginStateTransform.BuiltIn({
     name: 'unwind-structure-assembly-representation-3d',
     display: 'Unwind Assembly 3D Representation',
-    from: SO.Molecule.Representation3D,
-    to: UnwindAssemblyRepresentation3D.Obj,
-    params: UnwindAssemblyRepresentation3D.Params
+    from: SO.Molecule.Structure.Representation3D,
+    to: SO.Molecule.Structure.Representation3DState,
+    params: { t: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }) }
 })({
     canAutoUpdate() {
         return true;
     },
-    apply({ params }, plugin: PluginContext) {
-        return new UnwindAssemblyRepresentation3D.Obj(new UnwindAssemblyRepresentation3D.Behavior(plugin, params), { label: `Unwind T = ${params.t.toFixed(2)}` });
+    apply({ a, params }, plugin: PluginContext) {
+        const structure = a.data.source.data;
+        const unitTransforms = new StructureUnitTransforms(structure);
+        unwindStructureAssebmly(structure, unitTransforms, params.t);
+        return new SO.Molecule.Structure.Representation3DState({ state: { unitTransforms }, info: structure, source: a }, { label: `Unwind T = ${params.t.toFixed(2)}` });
     },
-    update({ b, newParams }) {
-        return Task.create('Update Unwind', async () => {
-            const updated = await b.data.update(newParams);
-            b.label = `Unwind T = ${newParams.t.toFixed(2)}`;
-            return updated ? StateTransformer.UpdateResult.Updated : StateTransformer.UpdateResult.Unchanged;
-        });
+    update({ a, b, newParams, oldParams }) {
+        const structure = b.data.info as Structure;
+        if (a.data.source.data !== structure) return StateTransformer.UpdateResult.Recreate;
+        if (oldParams.t === newParams.t) return StateTransformer.UpdateResult.Unchanged;
+        const unitTransforms = b.data.state.unitTransforms!;
+        unwindStructureAssebmly(structure, unitTransforms, newParams.t);
+        b.label = `Unwind T = ${newParams.t.toFixed(2)}`;
+        b.data.source = a;
+        return StateTransformer.UpdateResult.Updated;
     }
 });
 
+
 type ExplodeStructureRepresentation3D = typeof ExplodeStructureRepresentation3D
 const ExplodeStructureRepresentation3D = PluginStateTransform.BuiltIn({
     name: 'explode-structure-representation-3d',
     display: 'Explode 3D Representation',
-    from: SO.Molecule.Representation3D,
+    from: SO.Molecule.Structure.Representation3D,
     to: ExplodeRepresentation3D.Obj,
     params: ExplodeRepresentation3D.Params
 })({
@@ -280,7 +289,7 @@ type ColorStructureRepresentation3D = typeof ColorStructureRepresentation3D
 const ColorStructureRepresentation3D = PluginStateTransform.BuiltIn({
     name: 'color-structure-representation-3d',
     display: 'Color 3D Representation',
-    from: SO.Molecule.Representation3D,
+    from: SO.Molecule.Structure.Representation3D,
     to: ColorRepresentation3D.Obj,
     params: ColorRepresentation3D.Params
 })({
@@ -391,15 +400,15 @@ const VolumeRepresentation3D = PluginStateTransform.BuiltIn({
             repr.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: a.data }, params))
             // TODO set initial state, repr.setState({})
             await repr.createOrUpdate(props, a.data).runInContext(ctx);
-            return new SO.Volume.Representation3D(repr, { label: provider.label, description: VolumeRepresentation3DHelpers.getDescription(props) });
+            return new SO.Volume.Representation3D({ repr, source: a }, { label: provider.label, description: VolumeRepresentation3DHelpers.getDescription(props) });
         });
     },
     update({ a, b, oldParams, newParams }, plugin: PluginContext) {
         return Task.create('Volume Representation', async ctx => {
             if (newParams.type.name !== oldParams.type.name) return StateTransformer.UpdateResult.Recreate;
-            const props = { ...b.data.props, ...newParams.type.params }
-            b.data.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: a.data }, newParams))
-            await b.data.createOrUpdate(props, a.data).runInContext(ctx);
+            const props = { ...b.data.repr.props, ...newParams.type.params }
+            b.data.repr.setTheme(createTheme(plugin.volumeRepresentation.themeCtx, { volume: a.data }, newParams))
+            await b.data.repr.createOrUpdate(props, a.data).runInContext(ctx);
             b.description = VolumeRepresentation3DHelpers.getDescription(props)
             return StateTransformer.UpdateResult.Updated;
         });