ソースを参照

wip: general settings, volume controls, structure settings

Alexander Rose 5 年 前
コミット
37b9801241

+ 1 - 1
package-lock.json

@@ -3980,7 +3980,7 @@
             }
         },
         "molstar": {
-            "version": "0.2.5",
+            "version": "file:../molstar",
             "dev": true,
             "requires": {
                 "@types/argparse": "^1.0.36",

+ 1 - 1
package.json

@@ -38,7 +38,7 @@
         "css-loader": "^3.1.0",
         "extra-watch-webpack-plugin": "^1.0.3",
         "file-loader": "^4.1.0",
-        "molstar": "^0.2.5",
+        "molstar": "../molstar",
         "mini-css-extract-plugin": "^0.8.0",
         "node-fetch": "^2.6.0",
         "node-sass": "^4.12.0",

+ 4 - 0
src/structure-viewer/helpers.ts

@@ -7,6 +7,9 @@
 
 import { BuiltInStructureRepresentationsName } from 'molstar/lib/mol-repr/structure/registry';
 import { BuiltInColorThemeName } from 'molstar/lib/mol-theme/color';
+import Expression from 'molstar/lib/mol-script/language/expression';
+import { Structure, StructureSelection, QueryContext } from 'molstar/lib/mol-model/structure';
+import { compile } from 'molstar/lib/mol-script/runtime/query/compiler';
 
 export type SupportedFormats = 'cif' | 'pdb'
 export interface LoadParams {
@@ -28,6 +31,7 @@ export namespace RepresentationStyle {
 }
 
 export enum StateElements {
+    Trajectory = 'trajectory',
     Model = 'model',
     ModelProps = 'model-props',
     Assembly = 'assembly',

+ 9 - 9
src/structure-viewer/index.html

@@ -24,24 +24,24 @@
     <body>
         <div id="app"></div>
         <script>
+            function getQueryParam(id) {
+                const a = new RegExp(id + '=([^&#=]*)', 'i')
+                const m = a.exec(window.location.search)
+                return m ? decodeURIComponent(m[1]) : undefined
+            }
+
             // create an instance of the plugin
             var viewer = new app.StructureViewer();
 
             function $(id) { return document.getElementById(id); }
 
-            var pdbId = '1cbs', assemblyId= 'deposited';
+            var pdbId = getQueryParam('pdbId') || '3pqr'
+            var assemblyId = getQueryParam('assemblyId') || 'deposited';
             var url = 'https://files.rcsb.org/download/' + pdbId + '.cif';
             var format = 'cif';
 
-            var representationStyle = {
-                sequence: { coloring: 'polymer-id' }, // or just { }
-                hetGroups: { kind: 'ball-and-stick' }, // or 'spacefill
-                water: { hide: true },
-                snfg3d: { hide: false }
-            };
-
             viewer.init('app', { });
-            viewer.load({ url: url, format: format, assemblyId: assemblyId, representationStyle: representationStyle });
+            viewer.load({ url: url, format: format, assemblyId: assemblyId });
         </script>
     </body>
 </html>

+ 37 - 145
src/structure-viewer/index.ts

@@ -11,22 +11,19 @@ import { PluginContext } from 'molstar/lib/mol-plugin/context';
 import { PluginCommands } from 'molstar/lib/mol-plugin/command';
 import { PluginBehaviors } from 'molstar/lib/mol-plugin/behavior';
 import { StateTransforms } from 'molstar/lib/mol-plugin/state/transforms';
-import { StructureRepresentation3DHelpers } from 'molstar/lib/mol-plugin/state/transforms/representation';
-import { PluginStateObject as PSO, PluginStateObject } from 'molstar/lib/mol-plugin/state/objects';
+import { PluginStateObject as PSO } from 'molstar/lib/mol-plugin/state/objects';
 import { AnimateModelIndex } from 'molstar/lib/mol-plugin/state/animation/built-in';
-import { StateBuilder, StateObject, StateSelection } from 'molstar/lib/mol-state';
-import { LoadParams, SupportedFormats, RepresentationStyle, StateElements } from './helpers';
+import { StateBuilder, StateSelection } from 'molstar/lib/mol-state';
+import { LoadParams, SupportedFormats, StateElements } from './helpers';
 import { ControlsWrapper } from './ui/controls';
 import { Scheduler } from 'molstar/lib/mol-task';
-import { MolScriptBuilder as MS } from 'molstar/lib/mol-script/language/builder';
-import { BuiltInStructureRepresentations } from 'molstar/lib/mol-repr/structure/registry';
-import { BuiltInColorThemes } from 'molstar/lib/mol-theme/color';
-import { BuiltInSizeThemes } from 'molstar/lib/mol-theme/size';
-import { ColorNames } from 'molstar/lib/mol-util/color/tables';
 import { InitVolumeStreaming, CreateVolumeStreamingInfo } from 'molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers';
 import { ParamDefinition } from 'molstar/lib/mol-util/param-definition';
 import { PluginSpec } from 'molstar/lib/mol-plugin/spec';
 import { StructureRepresentationInteraction } from 'molstar/lib/mol-plugin/behavior/dynamic/selection/structure-representation-interaction';
+import { StructureSelectionQueries as Q } from 'molstar/lib/mol-plugin/util/structure-selection-helper';
+import { Model } from 'molstar/lib/mol-model/structure';
+import { MolScriptBuilder as MS } from 'molstar/lib/mol-script/language/builder';
 require('molstar/lib/mol-plugin/skin/light.scss')
 
 export class StructureViewer {
@@ -72,8 +69,8 @@ export class StructureViewer {
 
     private model(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats, assemblyId: string) {
         const parsed = format === 'cif'
-            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif)
-            : b.apply(StateTransforms.Model.TrajectoryFromPDB);
+            ? b.apply(StateTransforms.Data.ParseCif).apply(StateTransforms.Model.TrajectoryFromMmCif, {}, { ref: StateElements.Trajectory })
+            : b.apply(StateTransforms.Model.TrajectoryFromPDB, {}, { ref: StateElements.Trajectory });
 
         return parsed
             .apply(StateTransforms.Model.ModelFromTrajectory, { modelIndex: 0 }, { ref: StateElements.Model });
@@ -85,91 +82,15 @@ export class StructureViewer {
         const s = model
             .apply(StateTransforms.Model.StructureAssemblyFromModel, { id: assemblyId || 'deposited' }, { ref: StateElements.Assembly });
 
-        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-sequence' }, { ref: StateElements.Sequence });
-        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'atomic-het' }, { ref: StateElements.Het });
-        s.apply(StateTransforms.Model.StructureComplexElement, { type: 'water' }, { ref: StateElements.Water });
-
         return s;
     }
 
-    private visual(_style?: RepresentationStyle, partial?: boolean) {
-        const structure = this.getObj<PluginStateObject.Molecule.Structure>(StateElements.Assembly);
-        if (!structure) return;
-
-        const style = _style || { };
-
-        const update = this.state.build();
-
-        if (!partial || (partial && style.sequence)) {
-            const root = update.to(StateElements.Sequence);
-            if (style.sequence && style.sequence.hide) {
-                root.delete(StateElements.SequenceVisual);
-            } else {
-                root.applyOrUpdate(StateElements.SequenceVisual, StateTransforms.Representation.StructureRepresentation3D,
-                    StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                        (style.sequence && style.sequence.kind) || 'cartoon',
-                        (style.sequence && style.sequence.coloring) || 'unit-index', structure));
-            }
-        }
-
-        if (!partial || (partial && style.hetGroups)) {
-            const root = update.to(StateElements.Het);
-            if (style.hetGroups && style.hetGroups.hide) {
-                root.delete(StateElements.HetVisual);
-            } else {
-                if (style.hetGroups && style.hetGroups.hide) {
-                    root.delete(StateElements.HetVisual);
-                } else {
-                    root.applyOrUpdate(StateElements.HetVisual, StateTransforms.Representation.StructureRepresentation3D,
-                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                            (style.hetGroups && style.hetGroups.kind) || 'ball-and-stick',
-                            (style.hetGroups && style.hetGroups.coloring), structure));
-                }
-            }
-        }
-
-        if (!partial || (partial && style.carbs)) {
-            const root = update.to(StateElements.Het);
-            if (style.hetGroups && style.hetGroups.hide) {
-                root.delete(StateElements.HetVisual);
-            } else {
-                if (style.carbs && style.carbs.hide) {
-                    root.delete(StateElements.HetCarbs);
-                } else {
-                    root.applyOrUpdate(StateElements.HetCarbs, StateTransforms.Representation.StructureRepresentation3D,
-                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin, 'carbohydrate', void 0, structure));
-                }
-            }
-        }
-
-        if (!partial || (partial && style.water)) {
-            const root = update.to(StateElements.Water);
-            if (style.water && style.water.hide) {
-                root.delete(StateElements.WaterVisual);
-            } else {
-                root.applyOrUpdate(StateElements.WaterVisual, StateTransforms.Representation.StructureRepresentation3D,
-                        StructureRepresentation3DHelpers.getDefaultParamsWithTheme(this.plugin,
-                            (style.water && style.water.kind) || 'ball-and-stick',
-                            (style.water && style.water.coloring), structure, { alpha: 0.51 }));
-            }
-        }
-
-        return update;
-    }
-
-    private getObj<T extends StateObject>(ref: string): T['data'] {
-        const state = this.state;
-        const cell = state.select(ref)[0];
-        if (!cell || !cell.obj) return void 0;
-        return (cell.obj as T).data;
-    }
-
     private applyState(tree: StateBuilder) {
         return PluginCommands.State.Update.dispatch(this.plugin, { state: this.plugin.state.dataState, tree });
     }
 
     private loadedParams: LoadParams = { url: '', format: 'cif', assemblyId: '' };
-    async load({ url, format = 'cif', assemblyId = '', representationStyle }: LoadParams) {
+    async load({ url, format = 'cif', assemblyId = '' }: LoadParams) {
         let loadType: 'full' | 'update' = 'full';
 
         const state = this.plugin.state.dataState;
@@ -192,7 +113,7 @@ export class StructureViewer {
             await this.applyState(tree);
         }
 
-        await this.updateStyle(representationStyle);
+        await this.updateStyle();
 
         this.loadedParams = { url, format, assemblyId };
         Scheduler.setImmediate(() => PluginCommands.Camera.Reset.dispatch(this.plugin, { }));
@@ -200,19 +121,37 @@ export class StructureViewer {
         this.experimentalData.init()
     }
 
-    async updateStyle(style?: RepresentationStyle, partial?: boolean) {
-        const tree = this.visual(style, partial);
-        if (!tree) return;
-        await PluginCommands.State.Update.dispatch(this.plugin, { state: this.plugin.state.dataState, tree });
+    async updateStyle() {
+        const { structureRepresentation: rep } = this.plugin.helpers
+        await rep.setFromExpression('add', 'cartoon', Q.all)
+        await rep.setFromExpression('add', 'carbohydrate', Q.all)
+        await rep.setFromExpression('add', 'ball-and-stick', MS.struct.modifier.union([
+            MS.struct.combinator.merge([ Q.ligandsPlusConnected, Q.branchedConnectedOnly, Q.water ])
+        ]))
     }
 
     experimentalData = {
         init: async () => {
-            const asm = this.state.select(StateElements.Assembly)[0].obj!;
-            const params = ParamDefinition.getDefaultValues(InitVolumeStreaming.definition.params!(asm, this.plugin));
-            params.behaviorRef = StateElements.VolumeStreaming;
-            params.defaultView = 'box';
-            await this.plugin.runTask(this.state.applyAction(InitVolumeStreaming, params, StateElements.Assembly));
+            const model = this.state.select(StateElements.Model)[0].obj;
+            const asm = this.state.select(StateElements.Assembly)[0].obj;
+            if (!model || !asm) return
+
+            const m = model.data as Model
+            const hasXrayMap = m.sourceData.data.pdbx_database_status.status_code_sf.value(0) === 'REL'
+            let hasEmMap = false
+            for (let i = 0, il = m.sourceData.data.pdbx_database_related._rowCount; i < il; ++i) {
+                if (m.sourceData.data.pdbx_database_related.db_name.value(i).toUpperCase() === 'EMDB') {
+                    hasEmMap = true
+                    break
+                }
+            }
+
+            if (hasXrayMap || hasEmMap) {
+                const params = ParamDefinition.getDefaultValues(InitVolumeStreaming.definition.params!(asm, this.plugin));
+                params.behaviorRef = StateElements.VolumeStreaming;
+                params.defaultView = 'selection-box';
+                await this.plugin.runTask(this.state.applyAction(InitVolumeStreaming, params, StateElements.Assembly));
+            }
         },
         remove: () => {
             const r = this.state.select(StateSelection.Generators.ofTransformer(CreateVolumeStreamingInfo))[0];
@@ -220,51 +159,4 @@ export class StructureViewer {
             PluginCommands.State.RemoveObject.dispatch(this.plugin, { state: this.state, ref: r.transform.ref });
         }
     }
-
-    hetGroups = {
-        reset: () => {
-            const update = this.state.build().delete(StateElements.HetGroupFocus);
-            PluginCommands.State.Update.dispatch(this.plugin, { state: this.state, tree: update });
-            PluginCommands.Camera.Reset.dispatch(this.plugin, { });
-        },
-        focusFirst: async (resn: string) => {
-            if (!this.state.transforms.has(StateElements.Assembly)) return;
-
-            const update = this.state.build();
-
-            update.delete(StateElements.HetGroupFocus);
-
-            const surroundings = MS.struct.modifier.includeSurroundings({
-                0: MS.struct.filter.first([
-                    MS.struct.generator.atomGroups({
-                        'residue-test': MS.core.rel.eq([MS.struct.atomProperty.macromolecular.label_comp_id(), resn]),
-                        'group-by': MS.struct.atomProperty.macromolecular.residueKey()
-                    })
-                ]),
-                radius: 5,
-                'as-whole-residues': true
-            });
-
-            const sel = update.to(StateElements.Assembly)
-                .apply(StateTransforms.Model.StructureSelection, { label: resn, query: surroundings }, { ref: StateElements.HetGroupFocus });
-
-            sel.apply(StateTransforms.Representation.StructureRepresentation3D, this.createSurVisualParams());
-
-            await PluginCommands.State.Update.dispatch(this.plugin, { state: this.state, tree: update });
-
-            const focus = (this.state.select(StateElements.HetGroupFocus)[0].obj as PluginStateObject.Molecule.Structure).data;
-            const sphere = focus.boundary.sphere;
-            const snapshot = this.plugin.canvas3d.camera.getFocus(sphere.center, 0.75 * sphere.radius);
-            PluginCommands.Camera.SetSnapshot.dispatch(this.plugin, { snapshot, durationMs: 250 });
-        }
-    }
-
-    private createSurVisualParams() {
-        const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
-        return StructureRepresentation3DHelpers.createParams(this.plugin, asm.data, {
-            repr: BuiltInStructureRepresentations['ball-and-stick'],
-            color: [BuiltInColorThemes.uniform, () => ({ value: ColorNames.gray })],
-            size: [BuiltInSizeThemes.uniform, () => ({ value: 0.33 } )]
-        });
-    }
 }

+ 211 - 4
src/structure-viewer/ui/controls.tsx

@@ -8,11 +8,18 @@ import * as React from 'react';
 import { PluginUIComponent } from 'molstar/lib/mol-plugin/ui/base';
 import { PluginContextContainer } from 'molstar/lib/mol-plugin/ui/plugin';
 import { TransformUpdaterControl } from 'molstar/lib/mol-plugin/ui/state/update-transform';
+import { StructureToolsWrapper } from 'molstar/lib/mol-plugin/ui/controls';
 import { StateElements } from '../helpers';
 import { ParameterControls } from 'molstar/lib/mol-plugin/ui/controls/parameters';
 import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
 import { PluginCommands } from 'molstar/lib/mol-plugin/command';
 import { Canvas3DParams } from 'molstar/lib/mol-canvas3d/canvas3d';
+import { StateObject, StateBuilder } from 'molstar/lib/mol-state';
+import { PluginStateObject } from 'molstar/lib/mol-plugin/state/objects';
+import { StateTransforms } from 'molstar/lib/mol-plugin/state/transforms';
+import { Structure } from 'molstar/lib/mol-model/structure';
+import { StructureSelectionQueries as Q } from 'molstar/lib/mol-plugin/util/structure-selection-helper';
+import { MolScriptBuilder as MS } from 'molstar/lib/mol-script/language/builder';
 
 export class ControlsWrapper extends PluginUIComponent {
     componentDidMount() {
@@ -23,8 +30,14 @@ export class ControlsWrapper extends PluginUIComponent {
     render() {
         return <div className='msp-scrollable-container msp-right-controls'>
             <PluginContextContainer plugin={this.plugin}>
-                <GeneralSettings/>
-                <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} />
+                <GeneralSettings />
+                <StructureControls
+                    trajectoryRef={StateElements.Trajectory}
+                    modelRef={StateElements.Model}
+                    assemblyRef={StateElements.Assembly}
+                />
+                <TransformUpdaterControl nodeRef={StateElements.VolumeStreaming} header={{ name: 'Volume Controls', description: '' }} />
+                <StructureToolsWrapper />
             </PluginContextContainer>
         </div>;
     }
@@ -33,7 +46,10 @@ export class ControlsWrapper extends PluginUIComponent {
 //
 
 const GeneralSettingsParams = {
-    spin: Canvas3DParams.trackball.params.spin
+    spin: Canvas3DParams.trackball.params.spin,
+    backgroundColor: Canvas3DParams.renderer.params.backgroundColor,
+    renderStyle: PD.Select('glossy', [['toon', 'Toon'], ['matte', 'Matte'], ['glossy', 'Glossy'], ['metallic', 'Metallic']]),
+    occlusion: PD.Boolean(false),
 }
 
 type GeneralSettingsState = { isCollapsed?: boolean }
@@ -43,12 +59,65 @@ class GeneralSettings<P, S extends GeneralSettingsState> extends PluginUICompone
         if (p.name === 'spin') {
             const trackball = this.plugin.canvas3d.props.trackball;
             PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { trackball: { ...trackball, spin: p.value } } });
+        } else if (p.name === 'backgroundColor') {
+            const renderer = this.plugin.canvas3d.props.renderer;
+            console.log(p.value)
+            PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: { renderer: { ...renderer, backgroundColor: p.value } } });
+        } else if (p.name === 'renderStyle') {
+            const postprocessing = this.plugin.canvas3d.props.postprocessing;
+            const renderer = this.plugin.canvas3d.props.renderer;
+            if (p.value === 'toon') {
+                PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
+                    postprocessing: { ...postprocessing, outlineEnable: true, },
+                    renderer: { ...renderer, lightIntensity: 0, ambientIntensity: 1, roughness: 0.4, metalness: 0 }
+                } });
+            } else if (p.value === 'matte') {
+                PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
+                    postprocessing: { ...postprocessing, outlineEnable: false, },
+                    renderer: { ...renderer, lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 1, metalness: 0 }
+                } });
+            } else if (p.value === 'glossy') {
+                PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
+                    postprocessing: { ...postprocessing, outlineEnable: false, },
+                    renderer: { ...renderer, lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.4, metalness: 0 }
+                } });
+            } else if (p.value === 'metallic') {
+                PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
+                    postprocessing: { ...postprocessing, outlineEnable: false, },
+                    renderer: { ...renderer, lightIntensity: 0.6, ambientIntensity: 0.4, roughness: 0.6, metalness: 0.4 }
+                } });
+            }
+        } else if (p.name === 'occlusion') {
+            const postprocessing = this.plugin.canvas3d.props.postprocessing;
+            PluginCommands.Canvas3D.SetSettings.dispatch(this.plugin, { settings: {
+                postprocessing: { ...postprocessing, occlusionEnable: p.value },
+            } });
         }
     }
 
     get values () {
+        let renderStyle = 'custom'
+        const postprocessing = this.plugin.canvas3d.props.postprocessing;
+        const renderer = this.plugin.canvas3d.props.renderer;
+        if (postprocessing.outlineEnable) {
+            if (renderer.lightIntensity === 0 && renderer.ambientIntensity === 1 && renderer.roughness === 0.4 && renderer.metalness === 0) {
+                renderStyle = 'toon'
+            }
+        } else if (renderer.lightIntensity === 0.6 && renderer.ambientIntensity === 0.4) {
+            if (renderer.roughness === 1 && renderer.metalness === 0) {
+                renderStyle = 'matte'
+            } else if (renderer.roughness === 0.4 && renderer.metalness === 0) {
+                renderStyle = 'glossy'
+            } else if (renderer.roughness === 0.6 && renderer.metalness === 0.4) {
+                renderStyle = 'metallic'
+            }
+        }
+
         return {
-            spin: this.plugin.canvas3d.props.trackball.spin
+            spin: this.plugin.canvas3d.props.trackball.spin,
+            backgroundColor: this.plugin.canvas3d.props.renderer.backgroundColor,
+            renderStyle,
+            occlusion: this.plugin.canvas3d.props.postprocessing.occlusionEnable
         }
     }
 
@@ -80,4 +149,142 @@ class GeneralSettings<P, S extends GeneralSettingsState> extends PluginUICompone
             }
         </div> : null;
     }
+}
+
+//
+
+type StructureControlsState = { isCollapsed?: boolean }
+type StructureControlsProps = {
+    trajectoryRef: string
+    modelRef: string
+    assemblyRef: string
+}
+
+class StructureControls<P extends StructureControlsProps, S extends StructureControlsState> extends PluginUIComponent<P, S> {
+    private applyState(tree: StateBuilder) {
+        return PluginCommands.State.Update.dispatch(this.plugin, { state: this.plugin.state.dataState, tree });
+    }
+
+    onChange = async (p: { param: PD.Base<any>, name: string, value: any }) => {
+        console.log(p.name, p.value)
+        const state = this.plugin.state.dataState;
+        const tree = state.build();
+        if (p.name === 'assembly') {
+            tree.to(StateElements.Assembly).update(
+                StateTransforms.Model.StructureAssemblyFromModel,
+                props => ({ ...props, id: p.value })
+            );
+            await this.applyState(tree);
+
+            const { structureRepresentation: rep } = this.plugin.helpers
+            await rep.setFromExpression('add', 'cartoon', Q.all)
+            await rep.setFromExpression('add', 'carbohydrate', Q.all)
+            await rep.setFromExpression('add', 'ball-and-stick', MS.struct.modifier.union([
+                MS.struct.combinator.merge([ Q.ligandsPlusConnected, Q.branchedConnectedOnly, Q.water ])
+            ]))
+        } else if (p.name === 'model') {
+            tree.to(StateElements.Model).update(
+                StateTransforms.Model.ModelFromTrajectory,
+                props => ({ ...props, modelIndex: p.value })
+            );
+            await this.applyState(tree);
+        }
+    }
+
+    getParams = () => {
+        const trajectory = this.getTrajectory()
+        const model = this.getModel()
+        const assembly = this.getAssembly()
+
+        const modelOptions: [number, string][] = []
+        if (trajectory) {
+            for (let i = 0, il = trajectory.length; i < il; ++i) {
+                modelOptions.push([i, `${i + 1}`])
+            }
+        }
+
+        const assemblyOptions: [string, string][] = [['deposited', 'deposited']]
+        let modelValue = 0
+        if (model) {
+            if (trajectory) modelValue = trajectory.indexOf(model)
+            const { assemblies } = model.symmetry
+            for (let i = 0, il = assemblies.length; i < il; ++i) {
+                const a = assemblies[i]
+                assemblyOptions.push([a.id, `${a.id}: ${a.details}`])
+            }
+        }
+
+        let assemblyValue = 'deposited'
+        if (assembly) {
+            assemblyValue = assembly.units[0].conformation.operator.assembly.id
+        }
+
+        return {
+            assembly: PD.Select(assemblyValue, assemblyOptions),
+            model: PD.Select(modelValue, modelOptions),
+            symmetry: PD.Select('todo', [['todo', 'todo']]),
+        }
+    }
+
+    get values () {
+        return {
+
+        }
+    }
+
+    componentDidMount() {
+        const { trajectoryRef, modelRef, assemblyRef } = this.props
+        this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
+            if ((trajectoryRef !== ref && modelRef !== ref && assemblyRef !== ref) || this.plugin.state.dataState !== state) return;
+            this.forceUpdate();
+        });
+    }
+
+    toggleExpanded = () => {
+        this.setState({ isCollapsed: !this.state.isCollapsed });
+    }
+
+    state = {
+        isCollapsed: false
+    } as Readonly<S>
+
+    private getObj<T extends StateObject>(ref: string): T['data'] | undefined {
+        const state = this.plugin.state.dataState;
+        const cell = state.select(ref)[0];
+        if (!cell || !cell.obj) return void 0;
+        return (cell.obj as T).data;
+    }
+
+    private getTrajectory() {
+        return this.getObj<PluginStateObject.Molecule.Trajectory>(this.props.trajectoryRef)
+    }
+    private getModel() {
+        return this.getObj<PluginStateObject.Molecule.Model>(this.props.modelRef)
+    }
+    private getAssembly() {
+        return this.getObj<PluginStateObject.Molecule.Structure>(this.props.assemblyRef)
+    }
+
+    render() {
+        const trajectory = this.getTrajectory()
+        const model = this.getModel()
+        const assembly = this.getAssembly()
+
+        if (!trajectory || !model || !assembly) return null;
+
+        const wrapClass = this.state.isCollapsed
+            ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
+            : 'msp-transform-wrapper';
+
+        return this.plugin.canvas3d ? <div className={wrapClass}>
+            <div className='msp-transform-header'>
+                <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
+                    Structure Settings
+                </button>
+            </div>
+            {!this.state.isCollapsed &&
+                <ParameterControls params={this.getParams()} values={this.values} onChange={this.onChange} />
+            }
+        </div> : null;
+    }
 }