wip, createOrUpdate method for representations and visuals

src/apps/canvas/app.ts

@@ -6,7 +6,7 @@
 
 import Viewer from 'mol-view/viewer';
 import { getCifFromUrl, getModelsFromMmcif } from './util';
-import { StructureView } from './view';
+import { StructureView } from './structure-view';
 import { BehaviorSubject } from 'rxjs';
 
 export class App {
@@ -35,7 +35,7 @@ export class App {
         if (this.structureView) this.structureView.destroy()
         const cif = await getCifFromUrl(`https://files.rcsb.org/download/${id}.cif`)
         const models = await getModelsFromMmcif(cif)
-        this.structureView = await StructureView(this.viewer, models, { assembly: '1' })
+        this.structureView = await StructureView(this.viewer, models)
         this.pdbIdLoaded.next(this.structureView)
     }
 }

src/apps/canvas/component/app.tsx

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react'
-import { StructureView } from '../view';
+import { StructureView } from '../structure-view';
 import { App } from '../app';
 import { Viewport } from './viewport';
 import { StructureComponent } from './structure';

src/apps/canvas/component/structure.tsx

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react'
-import { StructureView } from '../view';
+import { StructureView } from '../structure-view';
 
 // export function FileInput (props: {
 //     accept: string
@@ -24,6 +24,8 @@ export interface StructureComponentProps {
 
 export interface StructureComponentState {
     label: string
+    modelId: number
+    modelIds: { id: number, label: string }[]
     assemblyId: string
     assemblyIds: { id: string, label: string }[]
     symmetryFeatureId: number
@@ -33,6 +35,8 @@ export interface StructureComponentState {
 export class StructureComponent extends React.Component<StructureComponentProps, StructureComponentState> {
     state = {
         label: this.props.structureView.label,
+        modelId: this.props.structureView.modelId,
+        modelIds: this.props.structureView.getModelIds(),
         assemblyId: this.props.structureView.assemblyId,
         assemblyIds: this.props.structureView.getAssemblyIds(),
         symmetryFeatureId: this.props.structureView.symmetryFeatureId,
@@ -45,6 +49,8 @@ export class StructureComponent extends React.Component<StructureComponentProps,
         this.setState({
             ...this.state,
             label: sv.label,
+            modelId: sv.modelId,
+            modelIds: sv.getModelIds(),
             assemblyId: sv.assemblyId,
             assemblyIds: sv.getAssemblyIds(),
             symmetryFeatureId: sv.symmetryFeatureId,
@@ -55,12 +61,15 @@ export class StructureComponent extends React.Component<StructureComponentProps,
     async update(state: Partial<StructureComponentState>) {
         const sv = this.props.structureView
 
+        if (state.modelId !== undefined) await sv.setModel(state.modelId)
         if (state.assemblyId !== undefined) await sv.setAssembly(state.assemblyId)
         if (state.symmetryFeatureId !== undefined) await sv.setSymmetryFeature(state.symmetryFeatureId)
 
         const newState = {
             ...this.state,
             label: sv.label,
+            modelId: sv.modelId,
+            modelIds: sv.getModelIds(),
             assemblyId: sv.assemblyId,
             assemblyIds: sv.getAssemblyIds(),
             symmetryFeatureId: sv.symmetryFeatureId,
@@ -70,8 +79,11 @@ export class StructureComponent extends React.Component<StructureComponentProps,
     }
 
     render() {
-        const { label, assemblyIds, symmetryFeatureIds } = this.state
+        const { label, modelIds, assemblyIds, symmetryFeatureIds } = this.state
 
+        const modelIdOptions = modelIds.map(m => {
+            return <option key={m.id} value={m.id}>{m.label}</option>
+        })
         const assemblyIdOptions = assemblyIds.map(a => {
             return <option key={a.id} value={a.id}>{a.label}</option>
         })
@@ -84,6 +96,17 @@ export class StructureComponent extends React.Component<StructureComponentProps,
                 <span>{label}</span>
             </div>
             <div>
+                <div>
+                    <span>Model</span>
+                    <select
+                        value={this.state.modelId}
+                        onChange={(e) => {
+                            this.update({ modelId: parseInt(e.target.value) })
+                        }}
+                    >
+                        {modelIdOptions}
+                    </select>
+                </div>
                 <div>
                     <span>Assembly</span>
                     <select

src/apps/canvas/index.ts

@@ -11,6 +11,7 @@ import './index.html'
 
 import { App } from './app';
 import { AppComponent } from './component/app';
+import { urlQueryParameter } from 'mol-util/url-query';
 
 const elm = document.getElementById('app') as HTMLElement
 if (!elm) throw new Error('Can not find element with id "app".')
@@ -18,4 +19,5 @@ if (!elm) throw new Error('Can not find element with id "app".')
 const app = new App()
 ReactDOM.render(React.createElement(AppComponent, { app }), elm);
 
-app.loadPdbId('2ONK')
+const pdbid = urlQueryParameter('pdbid')
+if (pdbid) app.loadPdbId(pdbid)

src/apps/canvas/view.ts → src/apps/canvas/structure-view.ts

@@ -6,7 +6,7 @@
 
 import { Model, Structure } from 'mol-model/structure';
 import { CartoonRepresentation } from 'mol-geo/representation/structure/representation/cartoon';
-// import { BallAndStickRepresentation } from 'mol-geo/representation/structure/representation/ball-and-stick';
+import { BallAndStickRepresentation } from 'mol-geo/representation/structure/representation/ball-and-stick';
 import { getStructureFromModel } from './util';
 import { AssemblySymmetry } from 'mol-model-props/rcsb/symmetry';
 import { ShapeRepresentation, ShapeProps } from 'mol-geo/representation/shape';
@@ -20,29 +20,31 @@ export interface StructureView {
     readonly assemblySymmetry: AssemblySymmetry | undefined
 
     readonly cartoon: CartoonRepresentation
-    // readonly ballAndStick: BallAndStickRepresentation
+    readonly ballAndStick: BallAndStickRepresentation
     readonly axes: ShapeRepresentation<ShapeProps>
 
     readonly modelId: number
     readonly assemblyId: string
     readonly symmetryFeatureId: number
 
-    setAssembly(assembly: string): Promise<void>
+    setModel(modelId: number): Promise<void>
+    getModelIds(): { id: number, label: string }[]
+    setAssembly(assemblyId: string): Promise<void>
     getAssemblyIds(): { id: string, label: string }[]
-    setSymmetryFeature(symmetryFeature: number): Promise<void>
+    setSymmetryFeature(symmetryFeatureId: number): Promise<void>
     getSymmetryFeatureIds(): { id: number, label: string }[]
 
     destroy: () => void
 }
 
 interface StructureViewProps {
-    assembly?: string
-    symmetryFeature?: number
+    assemblyId?: string
+    symmetryFeatureId?: number
 }
 
-export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>, props: StructureViewProps): Promise<StructureView> {
+export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>, props: StructureViewProps = {}): Promise<StructureView> {
     const cartoon = CartoonRepresentation()
-    // const ballAndStick = BallAndStickRepresentation()
+    const ballAndStick = BallAndStickRepresentation()
     const axes = ShapeRepresentation()
 
     let label: string
@@ -55,16 +57,24 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
     let symmetryFeatureId: number
 
     async function setModel(newModelId: number, newAssemblyId?: string, newSymmetryFeatureId?: number) {
+        console.log('setModel', newModelId)
         modelId = newModelId
-
         model = models[modelId]
         await AssemblySymmetry.attachFromCifOrAPI(model)
         assemblySymmetry = AssemblySymmetry.get(model)
-
         await setAssembly(newAssemblyId, newSymmetryFeatureId)
     }
 
+    function getModelIds() {
+        const modelIds: { id: number, label: string }[] = []
+        models.forEach((m, i) => {
+            modelIds.push({ id: i, label: `${i}: ${m.label} #${m.modelNum}` })
+        })
+        return modelIds
+    }
+
     async function setAssembly(newAssemblyId?: string, newSymmetryFeatureId?: number) {
+        console.log('setAssembly', newAssemblyId)
         if (newAssemblyId !== undefined) {
             assemblyId = newAssemblyId
         } else if (model && model.symmetry.assemblies.length) {
@@ -75,7 +85,6 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
             assemblyId = '-1'
         }
         await getStructure()
-        await createStructureRepr()
         await setSymmetryFeature(newSymmetryFeatureId)
     }
 
@@ -90,6 +99,7 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
     }
 
     async function setSymmetryFeature(newSymmetryFeatureId?: number) {
+        console.log('setSymmetryFeature', newSymmetryFeatureId)
         if (newSymmetryFeatureId !== undefined) {
             symmetryFeatureId = newSymmetryFeatureId
         } else if (assemblySymmetry) {
@@ -133,26 +143,27 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
 
     async function createStructureRepr() {
         if (structure) {
-            await cartoon.create(structure, {
+            console.log('createStructureRepr')
+            await cartoon.createOrUpdate({
                 colorTheme: { name: 'chain-id' },
                 sizeTheme: { name: 'uniform', value: 0.2 },
                 useFog: false // TODO fog not working properly
-            }).run()
+            }, structure).run()
 
-            // await ballAndStick.create(structure, {
-            //     colorTheme: { name: 'element-symbol' },
-            //     sizeTheme: { name: 'uniform', value: 0.1 },
-            //     useFog: false // TODO fog not working properly
-            // }).run()
+            await ballAndStick.createOrUpdate({
+                colorTheme: { name: 'element-symbol' },
+                sizeTheme: { name: 'uniform', value: 0.1 },
+                useFog: false // TODO fog not working properly
+            }, structure).run()
 
             viewer.center(structure.boundary.sphere.center)
         } else {
             cartoon.destroy()
-            // ballAndStick.destroy()
+            ballAndStick.destroy()
         }
 
         viewer.add(cartoon)
-        // viewer.add(ballAndStick)
+        viewer.add(ballAndStick)
     }
 
     async function createSymmetryRepr() {
@@ -162,11 +173,11 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
                 const axesShape = getAxesShape(symmetryFeatureId, assemblySymmetry)
                 if (axesShape) {
                     // getClusterColorTheme(symmetryFeatureId, assemblySymmetry)
-                    await axes.create(axesShape, {
+                    await axes.createOrUpdate({
                         colorTheme: { name: 'shape-group' },
                         // colorTheme: { name: 'uniform', value: Color(0xFFCC22) },
                         useFog: false // TODO fog not working properly
-                    }).run()
+                    }, axesShape).run()
                 } else {
                     axes.destroy()
                 }
@@ -180,7 +191,7 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
         viewer.requestDraw()
     }
 
-    await setModel(0, props.assembly, props.symmetryFeature)
+    await setModel(0, props.assemblyId, props.symmetryFeatureId)
 
     return {
         get label() { return label },
@@ -189,13 +200,15 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
         get assemblySymmetry() { return assemblySymmetry },
 
         cartoon,
-        // ballAndStick,
+        ballAndStick,
         axes,
 
         get modelId() { return modelId },
         get assemblyId() { return assemblyId },
         get symmetryFeatureId() { return symmetryFeatureId },
 
+        setModel,
+        getModelIds,
         setAssembly,
         getAssemblyIds,
         setSymmetryFeature,
@@ -203,12 +216,12 @@ export async function StructureView(viewer: Viewer, models: ReadonlyArray<Model>
 
         destroy: () => {
             viewer.remove(cartoon)
-            // viewer.remove(ballAndStick)
+            viewer.remove(ballAndStick)
             viewer.remove(axes)
             viewer.requestDraw()
 
             cartoon.destroy()
-            // ballAndStick.destroy()
+            ballAndStick.destroy()
             axes.destroy()
         }
     }

src/mol-geo/representation/index.ts

@@ -15,8 +15,7 @@ export interface RepresentationProps {}
 export interface Representation<D, P extends RepresentationProps = {}> {
     readonly renderObjects: ReadonlyArray<RenderObject>
     readonly props: Readonly<P>
-    create: (data: D, props?: Partial<P>) => Task<void>
-    update: (props: Partial<P>) => Task<void>
+    createOrUpdate: (props?: Partial<P>, data?: D) => Task<void>
     getLoci: (pickingId: PickingId) => Loci
     mark: (loci: Loci, action: MarkerAction) => void
     destroy: () => void
@@ -24,8 +23,7 @@ export interface Representation<D, P extends RepresentationProps = {}> {
 
 export interface Visual<D, P extends RepresentationProps = {}> {
     readonly renderObject: RenderObject | undefined
-    create: (ctx: RuntimeContext, data: D, props?: Partial<P>) => Promise<void>
-    update: (ctx: RuntimeContext, props: Partial<P>) => Promise<boolean>
+    createOrUpdate: (ctx: RuntimeContext, props?: Partial<P>, data?: D) => Promise<void>
     getLoci: (pickingId: PickingId) => Loci
     mark: (loci: Loci, action: MarkerAction) => void
     destroy: () => void

src/mol-geo/representation/shape/index.ts

@@ -37,17 +37,20 @@ export function ShapeRepresentation<P extends ShapeProps>(): ShapeRepresentation
     let _shape: Shape
     let _props: P
 
-    function create(shape: Shape, props: Partial<P> = {}) {
+    function createOrUpdate(props: Partial<P> = {}, shape?: Shape) {
         _props = Object.assign({}, DefaultShapeProps, _props, props)
-        _shape = shape
+        if (shape) _shape = shape
 
         return Task.create('ShapeRepresentation.create', async ctx => {
             renderObjects.length = 0
 
-            const mesh = shape.mesh
-            const locationIt = ShapeGroupIterator.fromShape(shape)
+            if (!_shape) return
+
+            const mesh = _shape.mesh
+            const locationIt = ShapeGroupIterator.fromShape(_shape)
             const { groupCount, instanceCount } = locationIt
 
+            const transform = createIdentityTransform()
             const color = createColors(locationIt, _props.colorTheme)
             const marker = createMarkers(instanceCount * groupCount)
             const counts = { drawCount: mesh.triangleCount * 3, groupCount, instanceCount }
@@ -55,7 +58,7 @@ export function ShapeRepresentation<P extends ShapeProps>(): ShapeRepresentation
             const values: MeshValues = {
                 ...getMeshData(mesh),
                 ...createMeshValues(_props, counts),
-                aTransform: createIdentityTransform(),
+                ...transform,
                 ...color,
                 ...marker,
 
@@ -68,18 +71,10 @@ export function ShapeRepresentation<P extends ShapeProps>(): ShapeRepresentation
         });
     }
 
-    function update(props: Partial<P>) {
-        return Task.create('ShapeRepresentation.update', async ctx => {
-            // TODO handle general update
-            // TODO check shape.colors.ref.version
-        })
-    }
-
     return {
         get renderObjects () { return renderObjects },
         get props () { return _props },
-        create,
-        update,
+        createOrUpdate,
         getLoci(pickingId: PickingId) {
             const { objectId, groupId } = pickingId
             if (_renderObject && _renderObject.id === objectId) {

src/mol-geo/representation/structure/complex-representation.ts

@@ -16,42 +16,18 @@ import { ComplexVisual } from './complex-visual';
 
 export function ComplexRepresentation<P extends StructureProps>(visualCtor: () => ComplexVisual<P>): StructureRepresentation<P> {
     let visual: ComplexVisual<P> | undefined
-
     let _props: P
-    let _structure: Structure
 
-    function create(structure: Structure, props: Partial<P> = {}) {
+    function createOrUpdate(props: Partial<P> = {}, structure?: Structure) {
         _props = Object.assign({}, DefaultStructureProps, _props, props, getQualityProps(props, structure))
-        _props.colorTheme.structure = structure
+        if (structure) _props.colorTheme.structure = structure
 
         return Task.create('Creating StructureRepresentation', async ctx => {
-            if (!_structure) {
-                visual = visualCtor()
-                await visual.create(ctx, structure, _props)
-            } else {
-                if (_structure.hashCode === structure.hashCode) {
-                    await update(_props)
-                } else {
-                    if (visual && !await visual.update(ctx, _props)) {
-                        await visual.create(ctx, structure, _props)
-                    }
-                }
-            }
-            _structure = structure
+            if (!visual) visual = visualCtor()
+            await visual.createOrUpdate(ctx, _props, structure)
         });
     }
 
-    function update(props: Partial<P>) {
-        return Task.create('Updating StructureRepresentation', async ctx => {
-            _props = Object.assign({}, DefaultStructureProps, _props, props, getQualityProps(props, _structure))
-            _props.colorTheme.structure = _structure
-
-            if (visual && !await visual.update(ctx, _props)) {
-                await visual.create(ctx, _structure, _props)
-            }
-        })
-    }
-
     function getLoci(pickingId: PickingId) {
         return visual ? visual.getLoci(pickingId) : EmptyLoci
     }
@@ -69,8 +45,7 @@ export function ComplexRepresentation<P extends StructureProps>(visualCtor: () =
             return visual && visual.renderObject ? [ visual.renderObject ] : []
         },
         get props() { return _props },
-        create,
-        update,
+        createOrUpdate,
         getLoci,
         mark,
         destroy

src/mol-geo/representation/structure/complex-visual.ts

@@ -44,52 +44,72 @@ export function ComplexMeshVisual<P extends ComplexMeshProps>(builder: ComplexMe
     let mesh: Mesh
     let currentStructure: Structure
     let locationIt: LocationIterator
+    let conformationHashCode: number
 
-    return {
-        get renderObject () { return renderObject },
-        async create(ctx: RuntimeContext, structure: Structure, props: Partial<P> = {}) {
-            currentProps = Object.assign({}, defaultProps, props)
-            currentStructure = structure
+    async function create(ctx: RuntimeContext, structure: Structure, props: Partial<P> = {}) {
+        currentProps = Object.assign({}, defaultProps, props)
+        currentStructure = structure
 
-            mesh = await createMesh(ctx, currentStructure, currentProps, mesh)
+        conformationHashCode = Structure.conformationHash(currentStructure)
+        mesh = await createMesh(ctx, currentStructure, currentProps, mesh)
 
-            locationIt = createLocationIterator(structure)
-            renderObject = createComplexMeshRenderObject(structure, mesh, locationIt, currentProps)
-        },
-        async update(ctx: RuntimeContext, props: Partial<P>) {
-            const newProps = Object.assign({}, currentProps, props)
+        locationIt = createLocationIterator(structure)
+        renderObject = createComplexMeshRenderObject(structure, mesh, locationIt, currentProps)
+    }
 
-            if (!renderObject) return false
+    async function update(ctx: RuntimeContext, props: Partial<P>) {
+        const newProps = Object.assign({}, currentProps, props)
 
-            locationIt.reset()
-            MeshUpdateState.reset(updateState)
-            setUpdateState(updateState, newProps, currentProps)
+        if (!renderObject) return false
 
-            if (!deepEqual(newProps.sizeTheme, currentProps.sizeTheme)) {
-                updateState.createMesh = true
-            }
+        locationIt.reset()
+        MeshUpdateState.reset(updateState)
+        setUpdateState(updateState, newProps, currentProps)
 
-            if (!deepEqual(newProps.colorTheme, currentProps.colorTheme)) {
-                updateState.updateColor = true
-            }
+        const newConformationHashCode = Structure.conformationHash(currentStructure)
+        if (newConformationHashCode !== conformationHashCode) {
+            conformationHashCode = newConformationHashCode
+            updateState.createMesh = true
+        }
 
-            //
+        if (!deepEqual(newProps.sizeTheme, currentProps.sizeTheme)) updateState.createMesh = true
+        if (!deepEqual(newProps.colorTheme, currentProps.colorTheme)) updateState.updateColor = true
+        // if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createMesh = true // TODO
 
-            if (updateState.createMesh) {
-                mesh = await createMesh(ctx, currentStructure, newProps, mesh)
-                ValueCell.update(renderObject.values.drawCount, mesh.triangleCount * 3)
-                updateState.updateColor = true
-            }
+        //
 
-            if (updateState.updateColor) {
-                createColors(locationIt, newProps.colorTheme, renderObject.values)
-            }
+        if (updateState.createMesh) {
+            mesh = await createMesh(ctx, currentStructure, newProps, mesh)
+            ValueCell.update(renderObject.values.drawCount, mesh.triangleCount * 3)
+            updateState.updateColor = true
+        }
+
+        if (updateState.updateColor) {
+            createColors(locationIt, newProps.colorTheme, renderObject.values)
+        }
 
-            updateMeshValues(renderObject.values, newProps)
-            updateRenderableState(renderObject.state, newProps)
+        updateMeshValues(renderObject.values, newProps)
+        updateRenderableState(renderObject.state, newProps)
+
+        currentProps = newProps
+        return true
+    }
 
-            currentProps = newProps
-            return true
+    return {
+        get renderObject () { return renderObject },
+        async createOrUpdate(ctx: RuntimeContext, props: Partial<P> = {}, structure?: Structure) {
+            if (!structure && !currentStructure) {
+                throw new Error('missing structure')
+            } else if (structure && (!currentStructure || !renderObject)) {
+                await create(ctx, structure, props)
+            } else if (structure && structure.hashCode !== currentStructure.hashCode) {
+                await create(ctx, structure, props)
+            } else {
+                if (structure && Structure.conformationHash(structure) !== Structure.conformationHash(currentStructure)) {
+                    currentStructure = structure
+                }
+                await update(ctx, props)
+            }
         },
         getLoci(pickingId: PickingId) {
             return renderObject ? getLoci(pickingId, currentStructure, renderObject.id) : EmptyLoci

src/mol-geo/representation/structure/index.ts

@@ -27,17 +27,20 @@ export const DefaultStructureMeshProps = {
 export type StructureMeshProps = typeof DefaultStructureMeshProps
 
 export interface MeshUpdateState {
+    updateTransform: boolean
     updateColor: boolean
     createMesh: boolean
 }
 export namespace MeshUpdateState {
     export function create(): MeshUpdateState {
         return {
+            updateTransform: false,
             updateColor: false,
             createMesh: false
         }
     }
     export function reset(state: MeshUpdateState) {
+        state.updateTransform = false
         state.updateColor = false
         state.createMesh = false
     }

src/mol-geo/representation/structure/representation/backbone.ts

@@ -30,16 +30,10 @@ export function BackboneRepresentation(): BackboneRepresentation {
         get props() {
             return { ...traceRepr.props }
         },
-        create: (structure: Structure, props: Partial<BackboneProps> = {}) => {
+        createOrUpdate: (props: Partial<BackboneProps> = {}, structure?: Structure) => {
             currentProps = Object.assign({}, DefaultBackboneProps, props)
             return Task.create('BackboneRepresentation', async ctx => {
-                await traceRepr.create(structure, currentProps).runInContext(ctx)
-            })
-        },
-        update: (props: Partial<BackboneProps>) => {
-            currentProps = Object.assign(currentProps, props)
-            return Task.create('Updating BackboneRepresentation', async ctx => {
-                await traceRepr.update(currentProps).runInContext(ctx)
+                await traceRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
             })
         },
         getLoci: (pickingId: PickingId) => {

src/mol-geo/representation/structure/representation/ball-and-stick.ts

@@ -39,20 +39,12 @@ export function BallAndStickRepresentation(): BallAndStickRepresentation {
         get props() {
             return { ...elmementRepr.props, ...intraLinkRepr.props, ...interLinkRepr.props }
         },
-        create: (structure: Structure, props: Partial<BallAndStickProps> = {}) => {
+        createOrUpdate: (props: Partial<BallAndStickProps> = {}, structure?: Structure) => {
             currentProps = Object.assign({}, DefaultBallAndStickProps, props)
             return Task.create('DistanceRestraintRepresentation', async ctx => {
-                await elmementRepr.create(structure, currentProps).runInContext(ctx)
-                await intraLinkRepr.create(structure, currentProps).runInContext(ctx)
-                await interLinkRepr.create(structure, currentProps).runInContext(ctx)
-            })
-        },
-        update: (props: Partial<BallAndStickProps>) => {
-            currentProps = Object.assign(currentProps, props)
-            return Task.create('Updating BallAndStickRepresentation', async ctx => {
-                await elmementRepr.update(currentProps).runInContext(ctx)
-                await intraLinkRepr.update(currentProps).runInContext(ctx)
-                await interLinkRepr.update(currentProps).runInContext(ctx)
+                await elmementRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await intraLinkRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await interLinkRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
             })
         },
         getLoci: (pickingId: PickingId) => {

src/mol-geo/representation/structure/representation/carbohydrate.ts

@@ -33,18 +33,11 @@ export function CarbohydrateRepresentation(): CarbohydrateRepresentation {
         get props() {
             return { ...carbohydrateSymbolRepr.props, ...carbohydrateLinkRepr.props }
         },
-        create: (structure: Structure, props: Partial<CarbohydrateProps> = {} as CarbohydrateProps) => {
+        createOrUpdate: (props: Partial<CarbohydrateProps> = {}, structure?: Structure) => {
             currentProps = Object.assign({}, DefaultCartoonProps, props)
             return Task.create('Creating CarbohydrateRepresentation', async ctx => {
-                await carbohydrateSymbolRepr.create(structure, currentProps).runInContext(ctx)
-                await carbohydrateLinkRepr.create(structure, currentProps).runInContext(ctx)
-            })
-        },
-        update: (props: Partial<CarbohydrateProps>) => {
-            currentProps = Object.assign(currentProps, props)
-            return Task.create('Updating CarbohydrateRepresentation', async ctx => {
-                await carbohydrateSymbolRepr.update(currentProps).runInContext(ctx)
-                await carbohydrateLinkRepr.update(currentProps).runInContext(ctx)
+                await carbohydrateSymbolRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await carbohydrateLinkRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
             })
         },
         getLoci: (pickingId: PickingId) => {

src/mol-geo/representation/structure/representation/cartoon.ts

@@ -41,22 +41,13 @@ export function CartoonRepresentation(): CartoonRepresentation {
         get props() {
             return { ...traceRepr.props, ...gapRepr.props, ...blockRepr.props }
         },
-        create: (structure: Structure, props: Partial<CartoonProps> = {}) => {
+        createOrUpdate: (props: Partial<CartoonProps> = {}, structure?: Structure) => {
             currentProps = Object.assign({}, DefaultCartoonProps, props)
             return Task.create('Creating CartoonRepresentation', async ctx => {
-                await traceRepr.create(structure, currentProps).runInContext(ctx)
-                await gapRepr.create(structure, currentProps).runInContext(ctx)
-                await blockRepr.create(structure, currentProps).runInContext(ctx)
-                await directionRepr.create(structure, currentProps).runInContext(ctx)
-            })
-        },
-        update: (props: Partial<CartoonProps>) => {
-            currentProps = Object.assign(currentProps, props)
-            return Task.create('Updating CartoonRepresentation', async ctx => {
-                await traceRepr.update(currentProps).runInContext(ctx)
-                await gapRepr.update(currentProps).runInContext(ctx)
-                await blockRepr.update(currentProps).runInContext(ctx)
-                await directionRepr.update(currentProps).runInContext(ctx)
+                await traceRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await gapRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await blockRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
+                await directionRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
             })
         },
         getLoci: (pickingId: PickingId) => {

src/mol-geo/representation/structure/representation/distance-restraint.ts

@@ -32,16 +32,10 @@ export function DistanceRestraintRepresentation(): DistanceRestraintRepresentati
         get props() {
             return { ...crossLinkRepr.props }
         },
-        create: (structure: Structure, props: Partial<DistanceRestraintProps> = {}) => {
+        createOrUpdate: (props: Partial<DistanceRestraintProps> = {}, structure?: Structure) => {
             currentProps = Object.assign({}, DefaultDistanceRestraintProps, props)
             return Task.create('DistanceRestraintRepresentation', async ctx => {
-                await crossLinkRepr.create(structure, currentProps).runInContext(ctx)
-            })
-        },
-        update: (props: Partial<DistanceRestraintProps>) => {
-            currentProps = Object.assign(currentProps, props)
-            return Task.create('Updating DistanceRestraintRepresentation', async ctx => {
-                await crossLinkRepr.update(currentProps).runInContext(ctx)
+                await crossLinkRepr.createOrUpdate(currentProps, structure).runInContext(ctx)
             })
         },
         getLoci: (pickingId: PickingId) => {

src/mol-geo/representation/structure/units-representation.ts

@@ -27,72 +27,80 @@ export function UnitsRepresentation<P extends StructureProps>(visualCtor: () =>
     let _structure: Structure
     let _groups: ReadonlyArray<Unit.SymmetryGroup>
 
-    function create(structure: Structure, props: Partial<P> = {}) {
+    function createOrUpdate(props: Partial<P> = {}, structure?: Structure) {
         _props = Object.assign({}, DefaultStructureProps, _props, props, getQualityProps(props, structure))
-        _props.colorTheme!.structure = structure
+        _props.colorTheme.structure = structure
 
-        return Task.create('Creating StructureRepresentation', async ctx => {
-            if (!_structure) {
+        return Task.create('Creating or updating StructureRepresentation', async ctx => {
+            if (!_structure && !structure) {
+                throw new Error('missing structure')
+            } else if (structure && !_structure) {
+                // First call with a structure, create visuals for each group.
                 _groups = structure.unitSymmetryGroups;
                 for (let i = 0; i < _groups.length; i++) {
                     const group = _groups[i];
                     const visual = visualCtor()
-                    await visual.create(ctx, group, _props)
+                    await visual.createOrUpdate(ctx, _props, group)
                     visuals.set(group.hashCode, { visual, group })
                 }
-            } else {
-                if (_structure.hashCode === structure.hashCode) {
-                    await update(_props)
-                } else {
-                    _groups = structure.unitSymmetryGroups;
-                    const newGroups: Unit.SymmetryGroup[] = []
-                    const oldUnitsVisuals = visuals
-                    visuals = new Map()
-                    for (let i = 0; i < _groups.length; i++) {
-                        const group = _groups[i];
-                        const visualGroup = oldUnitsVisuals.get(group.hashCode)
-                        if (visualGroup) {
-                            const { visual, group } = visualGroup
-                            if (!await visual.update(ctx, _props)) {
-                                await visual.create(ctx, group, _props)
-                            }
-                            oldUnitsVisuals.delete(group.hashCode)
-                        } else {
-                            newGroups.push(group)
-                            const visual = visualCtor()
-                            await visual.create(ctx, group, _props)
-                            visuals.set(group.hashCode, { visual, group })
-                        }
+            } else if (structure && _structure.hashCode !== structure.hashCode) {
+                // Tries to re-use existing visuals for the groups of the new structure.
+                // Creates additional visuals if needed, destroys left-over visuals.
+                _groups = structure.unitSymmetryGroups;
+                // const newGroups: Unit.SymmetryGroup[] = []
+                const oldVisuals = visuals
+                visuals = new Map()
+                for (let i = 0; i < _groups.length; i++) {
+                    const group = _groups[i];
+                    const visualGroup = oldVisuals.get(group.hashCode)
+                    if (visualGroup) {
+                        const { visual } = visualGroup
+                        await visual.createOrUpdate(ctx, _props, group)
+                        visuals.set(group.hashCode, { visual, group })
+                        oldVisuals.delete(group.hashCode)
+                    } else {
+                        // newGroups.push(group)
+                        const visual = visualCtor()
+                        await visual.createOrUpdate(ctx, _props, group)
+                        visuals.set(group.hashCode, { visual, group })
                     }
+                }
+                oldVisuals.forEach(({ visual }) => visual.destroy())
 
-                    // for new groups, re-use leftover visuals
-                    const unusedVisuals: UnitsVisual<P>[] = []
-                    oldUnitsVisuals.forEach(({ visual }) => unusedVisuals.push(visual))
-                    newGroups.forEach(async group => {
-                        const visual = unusedVisuals.pop() || visualCtor()
-                        await visual.create(ctx, group, _props)
-                        visuals.set(group.hashCode, { visual, group })
-                    })
-                    unusedVisuals.forEach(visual => visual.destroy())
+                // For new groups, re-use left-over visuals
+                // const unusedVisuals: UnitsVisual<P>[] = []
+                // oldVisuals.forEach(({ visual }) => unusedVisuals.push(visual))
+                // newGroups.forEach(async group => {
+                //     const visual = unusedVisuals.pop() || visualCtor()
+                //     await visual.createOrUpdate(ctx, _props, group)
+                //     visuals.set(group.hashCode, { visual, group })
+                // })
+                // unusedVisuals.forEach(visual => visual.destroy())
+            } else if (structure && _structure.hashCode === structure.hashCode) {
+                // Expects that for structures with the same hashCode,
+                // the unitSymmetryGroups are the same as well.
+                // Re-uses existing visuals for the groups of the new structure.
+                _groups = structure.unitSymmetryGroups;
+                for (let i = 0; i < _groups.length; i++) {
+                    const group = _groups[i];
+                    const visualGroup = visuals.get(group.hashCode)
+                    if (visualGroup) {
+                        await visualGroup.visual.createOrUpdate(ctx, _props, group)
+                        visualGroup.group = group
+                    } else {
+                        throw new Error(`expected to find visual for hashCode ${group.hashCode}`)
+                    }
                 }
+            } else {
+                // No new structure given, just update all visuals with new props.
+                visuals.forEach(async ({ visual, group }) => {
+                    await visual.createOrUpdate(ctx, _props, group)
+                })
             }
-            _structure = structure
+            if (structure) _structure = structure
         });
     }
 
-    function update(props: Partial<P>) {
-        return Task.create('Updating StructureRepresentation', async ctx => {
-            _props = Object.assign({}, DefaultStructureProps, _props, props, getQualityProps(props, _structure))
-            _props.colorTheme!.structure = _structure
-
-            visuals.forEach(async ({ visual, group }) => {
-                if (!await visual.update(ctx, _props)) {
-                    await visual.create(ctx, group, _props)
-                }
-            })
-        })
-    }
-
     function getLoci(pickingId: PickingId) {
         let loci: Loci = EmptyLoci
         visuals.forEach(({ visual }) => {
@@ -122,8 +130,7 @@ export function UnitsRepresentation<P extends StructureProps>(visualCtor: () =>
         get props() {
             return _props
         },
-        create,
-        update,
+        createOrUpdate,
         getLoci,
         mark,
         destroy

src/mol-geo/representation/structure/units-visual.ts

@@ -11,13 +11,14 @@ import { RuntimeContext } from 'mol-task';
 import { PickingId } from '../../util/picking';
 import { LocationIterator } from '../../util/location-iterator';
 import { Mesh } from '../../mesh/mesh';
-import { MarkerAction, applyMarkerAction } from '../../util/marker-data';
+import { MarkerAction, applyMarkerAction, createMarkers } from '../../util/marker-data';
 import { Loci, isEveryLoci, EmptyLoci } from 'mol-model/loci';
 import { MeshRenderObject } from 'mol-gl/render-object';
-import { createUnitsMeshRenderObject, createColors } from './visual/util/common';
-import { deepEqual, ValueCell } from 'mol-util';
+import { createUnitsMeshRenderObject, createColors, createTransforms } from './visual/util/common';
+import { deepEqual, ValueCell, UUID } from 'mol-util';
 import { updateMeshValues, updateRenderableState } from '../util';
 import { Interval } from 'mol-data/int';
+import { fillSerial } from 'mol-util/array';
 
 export interface UnitsVisual<P extends RepresentationProps = {}> extends Visual<Unit.SymmetryGroup, P> { }
 
@@ -45,56 +46,89 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
     let mesh: Mesh
     let currentGroup: Unit.SymmetryGroup
     let locationIt: LocationIterator
+    let currentConformationId: UUID
 
-    return {
-        get renderObject () { return renderObject },
-        async create(ctx: RuntimeContext, group: Unit.SymmetryGroup, props: Partial<P> = {}) {
-            currentProps = Object.assign({}, defaultProps, props)
-            currentGroup = group
+    async function create(ctx: RuntimeContext, group: Unit.SymmetryGroup, props: Partial<P> = {}) {
+        currentProps = Object.assign({}, defaultProps, props)
+        currentGroup = group
 
-            const unit = group.units[0]
-            mesh = currentProps.unitKinds.includes(unit.kind)
-                ? await createMesh(ctx, unit, currentProps, mesh)
-                : Mesh.createEmpty(mesh)
+        const unit = group.units[0]
+        currentConformationId = Unit.conformationId(unit)
+        mesh = currentProps.unitKinds.includes(unit.kind)
+            ? await createMesh(ctx, unit, currentProps, mesh)
+            : Mesh.createEmpty(mesh)
 
-            locationIt = createLocationIterator(group)
-            renderObject = createUnitsMeshRenderObject(group, mesh, locationIt, currentProps)
-        },
-        async update(ctx: RuntimeContext, props: Partial<P>) {
-            const newProps = Object.assign({}, currentProps, props)
-            const unit = currentGroup.units[0]
+        locationIt = createLocationIterator(group)
+        renderObject = createUnitsMeshRenderObject(group, mesh, locationIt, currentProps)
+    }
 
-            if (!renderObject) return false
+    async function update(ctx: RuntimeContext, props: Partial<P> = {}) {
+        if (!renderObject) return
 
-            locationIt.reset()
-            MeshUpdateState.reset(updateState)
-            setUpdateState(updateState, newProps, currentProps)
+        const newProps = Object.assign({}, currentProps, props)
+        const unit = currentGroup.units[0]
 
-            if (!deepEqual(newProps.sizeTheme, currentProps.sizeTheme)) {
-                updateState.createMesh = true
-            }
+        locationIt.reset()
+        MeshUpdateState.reset(updateState)
+        setUpdateState(updateState, newProps, currentProps)
 
-            if (!deepEqual(newProps.colorTheme, currentProps.colorTheme)) {
-                updateState.updateColor = true
-            }
+        const newConformationId = Unit.conformationId(unit)
+        if (newConformationId !== currentConformationId) {
+            currentConformationId = newConformationId
+            updateState.createMesh = true
+        }
 
-            //
+        if (currentGroup.units.length !== locationIt.instanceCount) updateState.updateTransform = true
 
-            if (updateState.createMesh) {
-                mesh = await createMesh(ctx, unit, newProps, mesh)
-                ValueCell.update(renderObject.values.drawCount, mesh.triangleCount * 3)
-                updateState.updateColor = true
-            }
+        if (!deepEqual(newProps.sizeTheme, currentProps.sizeTheme)) updateState.createMesh = true
+        if (!deepEqual(newProps.colorTheme, currentProps.colorTheme)) updateState.updateColor = true
+        if (!deepEqual(newProps.unitKinds, currentProps.unitKinds)) updateState.createMesh = true
 
-            if (updateState.updateColor) {
-                createColors(locationIt, newProps.colorTheme, renderObject.values)
-            }
+        //
 
-            updateMeshValues(renderObject.values, newProps)
-            updateRenderableState(renderObject.state, newProps)
+        if (updateState.updateTransform) {
+            locationIt = createLocationIterator(currentGroup)
+            const { instanceCount, groupCount } = locationIt
+            createTransforms(currentGroup, renderObject.values)
+            createMarkers(instanceCount * groupCount, renderObject.values)
+            ValueCell.update(renderObject.values.instanceCount, instanceCount)
+            ValueCell.update(renderObject.values.aInstance, fillSerial(new Float32Array(instanceCount))) // TODO
+            updateState.updateColor = true
+        }
 
-            currentProps = newProps
-            return true
+        if (updateState.createMesh) {
+            mesh = newProps.unitKinds.includes(unit.kind)
+                ? await createMesh(ctx, unit, newProps, mesh)
+                : Mesh.createEmpty(mesh)
+            ValueCell.update(renderObject.values.drawCount, mesh.triangleCount * 3)
+            updateState.updateColor = true
+        }
+
+        if (updateState.updateColor) {
+            createColors(locationIt, newProps.colorTheme, renderObject.values)
+        }
+
+        updateMeshValues(renderObject.values, newProps)
+        updateRenderableState(renderObject.state, newProps)
+
+        currentProps = newProps
+    }
+
+    return {
+        get renderObject () { return renderObject },
+        async createOrUpdate(ctx: RuntimeContext, props: Partial<P> = {}, group?: Unit.SymmetryGroup) {
+            if (!group && !currentGroup) {
+                throw new Error('missing group')
+            } else if (group && (!currentGroup || !renderObject)) {
+                await create(ctx, group, props)
+            } else if (group && group.hashCode !== currentGroup.hashCode) {
+                await create(ctx, group, props)
+            } else {
+                if (group && !areGroupsIdentical(group, currentGroup)) {
+                    currentGroup = group
+                }
+                await update(ctx, props)
+            }
         },
         getLoci(pickingId: PickingId) {
             return renderObject ? getLoci(pickingId, currentGroup, renderObject.id) : EmptyLoci
@@ -126,4 +160,11 @@ export function UnitsMeshVisual<P extends UnitsMeshProps>(builder: UnitsMeshVisu
             renderObject = undefined
         }
     }
+}
+
+function areGroupsIdentical(groupA: Unit.SymmetryGroup, groupB: Unit.SymmetryGroup) {
+    return (
+        groupA.units.length === groupB.units.length &&
+        Unit.conformationId(groupA.units[0]) === Unit.conformationId(groupB.units[0])
+    )
 }

src/mol-geo/representation/structure/visual/element-point.ts

@@ -22,6 +22,7 @@ import { MarkerAction, createMarkers } from '../../../util/marker-data';
 import { Vec3 } from 'mol-math/linear-algebra';
 import { fillSerial } from 'mol-util/array';
 import { SizeThemeProps } from 'mol-view/theme/size';
+import { LocationIterator } from '../../../util/location-iterator';
 
 export const DefaultPointProps = {
     ...DefaultStructureProps,
@@ -51,76 +52,72 @@ export default function PointVisual(): UnitsVisual<PointProps> {
     let renderObject: PointRenderObject | undefined
     let currentProps = DefaultPointProps
     let currentGroup: Unit.SymmetryGroup
+    let locationIt: LocationIterator
 
     let _units: ReadonlyArray<Unit>
     let _elements: SortedArray
 
     return {
         get renderObject () { return renderObject },
-        async create(ctx: RuntimeContext, group: Unit.SymmetryGroup, props: PointProps = {}) {
-            currentProps = Object.assign({}, DefaultPointProps, props)
-            currentGroup = group
-
-            _units = group.units
-            _elements = group.elements;
-
-            const { colorTheme, sizeTheme } = currentProps
-            const elementCount = _elements.length
-            const instanceCount = group.units.length
-
-            const locationIt = StructureElementIterator.fromGroup(group)
-
-            const vertices = createPointVertices(_units[0])
-            const transforms = createTransforms(group)
-            const color = createColors(locationIt, colorTheme)
-            const size = createSizes(locationIt, sizeTheme)
-            const marker = createMarkers(instanceCount * elementCount)
-
-            const values: PointValues = {
-                aPosition: ValueCell.create(vertices),
-                aGroup: ValueCell.create(fillSerial(new Float32Array(elementCount))),
-                aTransform: transforms,
-                aInstance: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
-                ...color,
-                ...marker,
-                ...size,
-
-                uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
-                uInstanceCount: ValueCell.create(instanceCount),
-                uGroupCount: ValueCell.create(group.elements.length),
-
-                drawCount: ValueCell.create(vertices.length / 3),
-                instanceCount: ValueCell.create(instanceCount),
-
-                dPointSizeAttenuation: ValueCell.create(true),
-                dUseFog: ValueCell.create(defaults(props.useFog, true)),
+        async createOrUpdate(ctx: RuntimeContext, props: PointProps = {}, group?: Unit.SymmetryGroup) {
+            if (!group && !currentGroup) {
+                throw new Error('missing group')
+            } else if (group && !currentGroup) {
+                currentProps = Object.assign({}, DefaultPointProps, props)
+                currentGroup = group
+                locationIt = StructureElementIterator.fromGroup(group)
+
+                _units = group.units
+                _elements = group.elements;
+
+                const { colorTheme, sizeTheme } = currentProps
+                const elementCount = _elements.length
+                const instanceCount = group.units.length
+
+                const vertices = createPointVertices(_units[0])
+                const transform = createTransforms(group)
+                const color = createColors(locationIt, colorTheme)
+                const size = createSizes(locationIt, sizeTheme)
+                const marker = createMarkers(instanceCount * elementCount)
+
+                const values: PointValues = {
+                    aPosition: ValueCell.create(vertices),
+                    aGroup: ValueCell.create(fillSerial(new Float32Array(elementCount))),
+                    aInstance: ValueCell.create(fillSerial(new Float32Array(instanceCount))),
+                    ...transform,
+                    ...color,
+                    ...marker,
+                    ...size,
+
+                    uAlpha: ValueCell.create(defaults(props.alpha, 1.0)),
+                    uInstanceCount: ValueCell.create(instanceCount),
+                    uGroupCount: ValueCell.create(group.elements.length),
+
+                    drawCount: ValueCell.create(vertices.length / 3),
+                    instanceCount: ValueCell.create(instanceCount),
+
+                    dPointSizeAttenuation: ValueCell.create(true),
+                    dUseFog: ValueCell.create(defaults(props.useFog, true)),
+                }
+                const state: RenderableState = {
+                    depthMask: defaults(props.depthMask, true),
+                    visible: defaults(props.visible, true)
+                }
+
+                renderObject = createPointRenderObject(values, state)
+            } else if (renderObject) {
+                const newProps = { ...currentProps, ...props }
+
+                if (!deepEqual(currentProps.colorTheme, newProps.colorTheme)) {
+                    createColors(locationIt, newProps.colorTheme, renderObject.values)
+                }
+
+                if (!deepEqual(currentProps.sizeTheme, newProps.sizeTheme)) {
+                    createSizes(locationIt, newProps.sizeTheme, renderObject.values)
+                }
+
+                currentProps = newProps
             }
-            const state: RenderableState = {
-                depthMask: defaults(props.depthMask, true),
-                visible: defaults(props.visible, true)
-            }
-
-            renderObject = createPointRenderObject(values, state)
-        },
-        async update(ctx: RuntimeContext, props: PointProps) {
-            if (!renderObject || !_units || !_elements) return false
-
-            const newProps = { ...currentProps, ...props }
-            if (deepEqual(currentProps, newProps)) {
-                console.log('props identical, nothing to change')
-                return true
-            }
-
-            if (!deepEqual(currentProps.colorTheme, newProps.colorTheme)) {
-                console.log('colorTheme changed', currentProps.colorTheme, newProps.colorTheme)
-            }
-
-            if (!deepEqual(currentProps.sizeTheme, newProps.sizeTheme)) {
-                console.log('sizeTheme changed', currentProps.sizeTheme, newProps.sizeTheme)
-            }
-
-            currentProps = newProps
-            return false
         },
         getLoci(pickingId: PickingId) {
             return renderObject ? getElementLoci(pickingId, currentGroup, renderObject.id) : EmptyLoci

src/mol-geo/representation/structure/visual/util/common.ts

@@ -15,21 +15,26 @@ import { LocationIterator } from '../../../../util/location-iterator';
 import { Mesh } from '../../../../mesh/mesh';
 import { MeshValues } from 'mol-gl/renderable';
 import { getMeshData } from '../../../../util/mesh-data';
-import { MeshProps, createMeshValues, createRenderableState, createIdentityTransform } from '../../../util';
+import { MeshProps, createMeshValues, createRenderableState, createIdentityTransform, TransformData } from '../../../util';
 import { StructureProps } from '../..';
 import { createMarkers } from '../../../../util/marker-data';
 import { createMeshRenderObject } from 'mol-gl/render-object';
 import { ColorThemeProps, ColorTheme } from 'mol-view/theme/color';
 import { SizeThemeProps, SizeTheme } from 'mol-view/theme/size';
 
-export function createTransforms({ units }: Unit.SymmetryGroup, transforms?: ValueCell<Float32Array>) {
+export function createTransforms({ units }: Unit.SymmetryGroup, transformData?: TransformData) {
     const unitCount = units.length
     const n = unitCount * 16
-    const array = transforms && transforms.ref.value.length >= n ? transforms.ref.value : new Float32Array(n)
+    const array = transformData && transformData.aTransform && transformData.aTransform.ref.value.length >= n ? transformData.aTransform.ref.value : new Float32Array(n)
     for (let i = 0; i < unitCount; i++) {
         Mat4.toArray(units[i].conformation.operator.matrix, array, i * 16)
     }
-    return transforms ? ValueCell.update(transforms, array) : ValueCell.create(array)
+    if (transformData) {
+        ValueCell.update(transformData.aTransform, array)
+        return transformData
+    } else {
+        return { aTransform: ValueCell.create(array) }
+    }
 }
 
 export function createColors(locationIt: LocationIterator, props: ColorThemeProps, colorData?: ColorData) {
@@ -54,7 +59,7 @@ export function createSizes(locationIt: LocationIterator, props: SizeThemeProps,
 
 type StructureMeshProps = Required<MeshProps & StructureProps>
 
-function _createMeshValues(transforms: ValueCell<Float32Array>, mesh: Mesh, locationIt: LocationIterator, props: StructureMeshProps): MeshValues {
+function _createMeshValues(transforms: TransformData, mesh: Mesh, locationIt: LocationIterator, props: StructureMeshProps): MeshValues {
     const { instanceCount, groupCount } = locationIt
     const color = createColors(locationIt, props.colorTheme)
     const marker = createMarkers(instanceCount * groupCount)
@@ -65,7 +70,7 @@ function _createMeshValues(transforms: ValueCell<Float32Array>, mesh: Mesh, loca
         ...getMeshData(mesh),
         ...color,
         ...marker,
-        aTransform: transforms,
+        ...transforms,
         elements: mesh.indexBuffer,
         ...createMeshValues(props, counts)
     }

src/mol-geo/representation/util.ts

@@ -29,10 +29,19 @@ export const DefaultMeshProps = {
 }
 export type MeshProps = typeof DefaultMeshProps
 
+export type TransformData = {
+    aTransform: ValueCell<Float32Array>,
+}
+
 const identityTransform = new Float32Array(16)
 Mat4.toArray(Mat4.identity(), identityTransform, 0)
-export function createIdentityTransform(transforms?: ValueCell<Float32Array>) {
-    return transforms ? ValueCell.update(transforms, identityTransform) : ValueCell.create(identityTransform)
+export function createIdentityTransform(transformData?: TransformData): TransformData {
+    if (transformData) {
+        ValueCell.update(transformData.aTransform, identityTransform)
+        return transformData
+    } else {
+        return { aTransform: ValueCell.create(identityTransform) }
+    }
 }
 
 type Counts = { drawCount: number, groupCount: number, instanceCount: number }
@@ -90,12 +99,12 @@ interface QualityProps {
     radialSegments: number
 }
 
-export function getQualityProps(props: Partial<QualityProps>, structure: Structure) {
+export function getQualityProps(props: Partial<QualityProps>, structure?: Structure) {
     let quality = defaults(props.quality, 'auto' as VisualQuality)
     let detail = 1
     let radialSegments = 12
 
-    if (quality === 'auto') {
+    if (quality === 'auto' && structure) {
         const score = structure.elementCount
         if (score > 500_000) {
             quality = 'lowest'

src/mol-geo/representation/volume/index.ts

@@ -27,25 +27,24 @@ export function VolumeRepresentation<P extends VolumeProps>(visualCtor: (volumeD
     let _volumeData: VolumeData
     let _props: P
 
-    function create(volumeData: VolumeData, props: Partial<P> = {}) {
+    function createOrUpdate(props: Partial<P> = {}, volumeData?: VolumeData) {
         _props = Object.assign({}, DefaultVolumeProps, _props, props)
         return Task.create('VolumeRepresentation.create', async ctx => {
-            _volumeData = volumeData
-            const visual = visualCtor(_volumeData)
-            await visual.create(ctx, _volumeData, props)
-            if (visual.renderObject) renderObjects.push(visual.renderObject)
+            if (volumeData) {
+                _volumeData = volumeData
+                const visual = visualCtor(_volumeData)
+                await visual.createOrUpdate(ctx, props, _volumeData)
+                if (visual.renderObject) renderObjects.push(visual.renderObject)
+            } else {
+                throw new Error('missing volumeData')
+            }
         });
     }
 
-    function update(props: Partial<P>) {
-        return Task.create('VolumeRepresentation.update', async ctx => {})
-    }
-
     return {
         get renderObjects () { return renderObjects },
         get props () { return _props },
-        create,
-        update,
+        createOrUpdate,
         getLoci(pickingId: PickingId) {
             // TODO
             return EmptyLoci

src/mol-geo/representation/volume/surface.ts

@@ -57,9 +57,11 @@ export default function SurfaceVisual(): VolumeVisual<SurfaceProps> {
 
     return {
         get renderObject () { return renderObject },
-        async create(ctx: RuntimeContext, volume: VolumeData, props: SurfaceProps = {}) {
+        async createOrUpdate(ctx: RuntimeContext, props: SurfaceProps = {}, volume?: VolumeData) {
             props = { ...DefaultSurfaceProps, ...props }
 
+            if (!volume) return
+
             const mesh = await computeVolumeSurface(volume, curProps.isoValue).runAsChild(ctx)
             if (!props.flatShaded) {
                 Mesh.computeNormalsImmediate(mesh)
@@ -97,10 +99,6 @@ export default function SurfaceVisual(): VolumeVisual<SurfaceProps> {
 
             renderObject = createMeshRenderObject(values, state)
         },
-        async update(ctx: RuntimeContext, props: SurfaceProps) {
-            // TODO
-            return false
-        },
         getLoci(pickingId: PickingId) {
             // TODO
             return EmptyLoci

src/mol-view/stage.ts

@@ -122,8 +122,8 @@ export class Stage {
         // this.loadMmcifUrl(`../../examples/1crn.cif`)
         // this.loadPdbid('5u0q') // mixed dna/rna in same polymer
         // this.loadPdbid('1xj9') // PNA (peptide nucleic acid)
-        this.loadPdbid('5eme') // PNA (peptide nucleic acid) and RNA
-        // this.loadPdbid('5eme') // temp
+        // this.loadPdbid('5eme') // PNA (peptide nucleic acid) and RNA
+        this.loadPdbid('2X3T') // temp
 
         // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000001.cif`) // ok
         // this.loadMmcifUrl(`../../../test/pdb-dev/PDBDEV_00000002.cif`) // ok

src/mol-view/state/transform.ts

@@ -99,7 +99,7 @@ export type StructureToSpacefill = StateTransform<StructureEntity, SpacefillEnti
 export const StructureToSpacefill: StructureToSpacefill = StateTransform.create('structure', 'spacefill', 'structure-to-spacefill',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<SpacefillProps> = {}) {
         const spacefillRepr = SpacefillRepresentation()
-        await spacefillRepr.create(structureEntity.value, props).run(ctx.log)
+        await spacefillRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(spacefillRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -110,7 +110,7 @@ export type StructureToBallAndStick = StateTransform<StructureEntity, BallAndSti
 export const StructureToBallAndStick: StructureToBallAndStick = StateTransform.create('structure', 'ballandstick', 'structure-to-ballandstick',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<BallAndStickProps> = {}) {
         const ballAndStickRepr = BallAndStickRepresentation()
-        await ballAndStickRepr.create(structureEntity.value, props).run(ctx.log)
+        await ballAndStickRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(ballAndStickRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -121,7 +121,7 @@ export type StructureToDistanceRestraint = StateTransform<StructureEntity, Dista
 export const StructureToDistanceRestraint: StructureToDistanceRestraint = StateTransform.create('structure', 'distancerestraint', 'structure-to-distancerestraint',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<DistanceRestraintProps> = {}) {
         const distanceRestraintRepr = DistanceRestraintRepresentation()
-        await distanceRestraintRepr.create(structureEntity.value, props).run(ctx.log)
+        await distanceRestraintRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(distanceRestraintRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -132,7 +132,7 @@ export type StructureToBackbone = StateTransform<StructureEntity, BackboneEntity
 export const StructureToBackbone: StructureToBackbone = StateTransform.create('structure', 'backbone', 'structure-to-backbone',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<BackboneProps> = {}) {
         const backboneRepr = BackboneRepresentation()
-        await backboneRepr.create(structureEntity.value, props).run(ctx.log)
+        await backboneRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(backboneRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -143,7 +143,7 @@ export type StructureToCartoon = StateTransform<StructureEntity, CartoonEntity,
 export const StructureToCartoon: StructureToCartoon = StateTransform.create('structure', 'cartoon', 'structure-to-cartoon',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<CartoonProps> = {}) {
         const cartoonRepr = CartoonRepresentation()
-        await cartoonRepr.create(structureEntity.value, props).run(ctx.log)
+        await cartoonRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(cartoonRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -154,7 +154,7 @@ export type StructureToCarbohydrate = StateTransform<StructureEntity, Carbohydra
 export const StructureToCarbohydrate: StructureToCarbohydrate = StateTransform.create('structure', 'carbohydrate', 'structure-to-cartoon',
     async function (ctx: StateContext, structureEntity: StructureEntity, props: Partial<CarbohydrateProps> = {}) {
         const carbohydrateRepr = CarbohydrateRepresentation()
-        await carbohydrateRepr.create(structureEntity.value, props).run(ctx.log)
+        await carbohydrateRepr.createOrUpdate(props, structureEntity.value).run(ctx.log)
         ctx.viewer.add(carbohydrateRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -165,7 +165,7 @@ export type SpacefillUpdate = StateTransform<SpacefillEntity, NullEntity, Partia
 export const SpacefillUpdate: SpacefillUpdate = StateTransform.create('spacefill', 'null', 'spacefill-update',
     async function (ctx: StateContext, spacefillEntity: SpacefillEntity, props: Partial<SpacefillProps> = {}) {
         const spacefillRepr = spacefillEntity.value
-        await spacefillRepr.update(props).run(ctx.log)
+        await spacefillRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(spacefillRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -176,7 +176,7 @@ export type BallAndStickUpdate = StateTransform<BallAndStickEntity, NullEntity,
 export const BallAndStickUpdate: BallAndStickUpdate = StateTransform.create('ballandstick', 'null', 'ballandstick-update',
     async function (ctx: StateContext, ballAndStickEntity: BallAndStickEntity, props: Partial<BallAndStickProps> = {}) {
         const ballAndStickRepr = ballAndStickEntity.value
-        await ballAndStickRepr.update(props).run(ctx.log)
+        await ballAndStickRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(ballAndStickRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -187,7 +187,7 @@ export type DistanceRestraintUpdate = StateTransform<DistanceRestraintEntity, Nu
 export const DistanceRestraintUpdate: DistanceRestraintUpdate = StateTransform.create('distancerestraint', 'null', 'distancerestraint-update',
     async function (ctx: StateContext, distanceRestraintEntity: DistanceRestraintEntity, props: Partial<DistanceRestraintProps> = {}) {
         const distanceRestraintRepr = distanceRestraintEntity.value
-        await distanceRestraintRepr.update(props).run(ctx.log)
+        await distanceRestraintRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(distanceRestraintRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -198,7 +198,7 @@ export type BackboneUpdate = StateTransform<BackboneEntity, NullEntity, Partial<
 export const BackboneUpdate: BackboneUpdate = StateTransform.create('backbone', 'null', 'backbone-update',
     async function (ctx: StateContext, backboneEntity: BackboneEntity, props: Partial<BackboneProps> = {}) {
         const backboneRepr = backboneEntity.value
-        await backboneRepr.update(props).run(ctx.log)
+        await backboneRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(backboneRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -209,7 +209,7 @@ export type CartoonUpdate = StateTransform<CartoonEntity, NullEntity, Partial<Ca
 export const CartoonUpdate: CartoonUpdate = StateTransform.create('cartoon', 'null', 'cartoon-update',
     async function (ctx: StateContext, cartoonEntity: CartoonEntity, props: Partial<CartoonProps> = {}) {
         const cartoonRepr = cartoonEntity.value
-        await cartoonRepr.update(props).run(ctx.log)
+        await cartoonRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(cartoonRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)
@@ -220,7 +220,7 @@ export type CarbohydrateUpdate = StateTransform<CarbohydrateEntity, NullEntity,
 export const CarbohydrateUpdate: CarbohydrateUpdate = StateTransform.create('carbohydrate', 'null', 'carbohydrate-update',
     async function (ctx: StateContext, carbohydrateEntity: CarbohydrateEntity, props: Partial<CarbohydrateProps> = {}) {
         const carbohydrateRepr = carbohydrateEntity.value
-        await carbohydrateRepr.update(props).run(ctx.log)
+        await carbohydrateRepr.createOrUpdate(props).run(ctx.log)
         ctx.viewer.add(carbohydrateRepr)
         ctx.viewer.requestDraw()
         console.log('stats', ctx.viewer.stats)