Merge branch 'master' of https://github.com/molstar/molstar

src/mol-plugin-state/manager/structure/component.ts

@@ -39,7 +39,7 @@ class StructureComponentManager extends PluginComponent<StructureComponentManage
     }
 
     get currentStructures() {
-        return this.plugin.managers.structure.hierarchy.state.current.structures;
+        return this.plugin.managers.structure.hierarchy.state.selection.structures;
     }
 
     get pivotStructure(): StructureRef | undefined {

src/mol-plugin-state/manager/structure/hierarchy.ts

@@ -12,7 +12,7 @@ import { StateTransform } from '../../../mol-state';
 
 interface StructureHierarchyManagerState {
     hierarchy: StructureHierarchy,
-    current: {
+    selection: {
         trajectories: ReadonlyArray<TrajectoryRef>,
         models: ReadonlyArray<ModelRef>,
         structures: ReadonlyArray<StructureRef>
@@ -21,11 +21,11 @@ interface StructureHierarchyManagerState {
 
 export class StructureHierarchyManager extends PluginComponent<StructureHierarchyManagerState> {
     readonly behaviors = {
-        current: this.ev.behavior({
+        changed: this.ev.behavior({
             hierarchy: this.state.hierarchy,
-            trajectories: this.state.current.trajectories,
-            models: this.state.current.models,
-            structures: this.state.current.structures
+            trajectories: this.state.selection.trajectories,
+            models: this.state.selection.models,
+            structures: this.state.selection.structures
         })
     }
 
@@ -37,22 +37,26 @@ export class StructureHierarchyManager extends PluginComponent<StructureHierarch
 
     get currentComponentGroups() {
         if (this._currentComponentGroups) return this._currentComponentGroups;
-        this._currentComponentGroups = StructureHierarchyManager.getComponentGroups(this.state.current.structures);
+        this._currentComponentGroups = StructureHierarchyManager.getComponentGroups(this.state.selection.structures);
         return this._currentComponentGroups;
     }
 
     private _currentSelectionSet: Set<string> | undefined = void 0;
-    get currentSeletionSet() {
+    get seletionSet() {
         if (this._currentSelectionSet) return this._currentSelectionSet;
         this._currentSelectionSet = new Set();
-        for (const r of this.state.current.trajectories) this._currentSelectionSet.add(r.cell.transform.ref);
-        for (const r of this.state.current.models) this._currentSelectionSet.add(r.cell.transform.ref);
-        for (const r of this.state.current.structures) this._currentSelectionSet.add(r.cell.transform.ref);
+        for (const r of this.state.selection.trajectories) this._currentSelectionSet.add(r.cell.transform.ref);
+        for (const r of this.state.selection.models) this._currentSelectionSet.add(r.cell.transform.ref);
+        for (const r of this.state.selection.structures) this._currentSelectionSet.add(r.cell.transform.ref);
         return this._currentSelectionSet;
     }
 
     get current() {
-        return this.state.current;
+        return this.state.hierarchy;
+    }
+
+    get selection() {
+        return this.state.selection;
     }
 
     private nextSelection: Set<StateTransform.Ref> = new Set();
@@ -90,21 +94,21 @@ export class StructureHierarchyManager extends PluginComponent<StructureHierarch
         this._currentSelectionSet = void 0;
 
         const { hierarchy } = update;
-        const trajectories = this.syncCurrent(hierarchy, this.state.current.trajectories, hierarchy.trajectories);
-        const models = this.syncCurrent(hierarchy, this.state.current.models, hierarchy.models);
-        const structures = this.syncCurrent(hierarchy, this.state.current.structures, hierarchy.structures);
+        const trajectories = this.syncCurrent(hierarchy, this.state.selection.trajectories, hierarchy.trajectories);
+        const models = this.syncCurrent(hierarchy, this.state.selection.models, hierarchy.models);
+        const structures = this.syncCurrent(hierarchy, this.state.selection.structures, hierarchy.structures);
 
         this.nextSelection.clear();
 
-        this.updateState({ hierarchy, current: { trajectories, models, structures }});
-        this.behaviors.current.next({ hierarchy, trajectories, models, structures });
+        this.updateState({ hierarchy, selection: { trajectories, models, structures } });
+        this.behaviors.changed.next({ hierarchy, trajectories, models, structures });
     }
 
     updateCurrent(refs: HierarchyRef[], action: 'add' | 'remove') {
         const hierarchy = this.state.hierarchy;
         const set = action === 'add'
-            ? SetUtils.union(this.currentSeletionSet, new Set(refs.map(r => r.cell.transform.ref)))
-            : SetUtils.difference(this.currentSeletionSet, new Set(refs.map(r => r.cell.transform.ref)));
+            ? SetUtils.union(this.seletionSet, new Set(refs.map(r => r.cell.transform.ref)))
+            : SetUtils.difference(this.seletionSet, new Set(refs.map(r => r.cell.transform.ref)));
 
         const trajectories = [];
         const models = [];
@@ -122,9 +126,13 @@ export class StructureHierarchyManager extends PluginComponent<StructureHierarch
 
         this._currentComponentGroups = void 0;
         this._currentSelectionSet = void 0;
-     
-        this.updateState({ current: { trajectories, models, structures }});
-        this.behaviors.current.next({ hierarchy, trajectories, models, structures });
+
+        // if (trajectories.length === 0 && hierarchy.trajectories.length > 0) trajectories.push(hierarchy.trajectories[0]);
+        // if (models.length === 0 && hierarchy.models.length > 0) models.push(hierarchy.models[0]);
+        // if (structures.length === 0 && hierarchy.structures.length > 0) structures.push(hierarchy.structures[0]);
+
+        this.updateState({ selection: { trajectories, models, structures } });
+        this.behaviors.changed.next({ hierarchy, trajectories, models, structures });
     }
 
     remove(refs: HierarchyRef[], canUndo?: boolean) {
@@ -134,22 +142,34 @@ export class StructureHierarchyManager extends PluginComponent<StructureHierarch
         return this.plugin.updateDataState(deletes, { canUndo: canUndo ? 'Remove' : false });
     }
 
-    createAllModels(trajectory: TrajectoryRef) {
+    createModels(trajectories: ReadonlyArray<TrajectoryRef>, kind: 'single' | 'all' = 'single') {
         return this.plugin.dataTransaction(async () => {
             this.nextSelection.clear();
 
-            this.nextSelection.add(trajectory.cell.transform.ref);
-            if (trajectory.models.length > 0) {
-                await this.clearTrajectory(trajectory);
-            }
+            for (const trajectory of trajectories) {
+                this.nextSelection.add(trajectory.cell.transform.ref);
+                if (trajectory.models.length > 0) {
+                    await this.clearTrajectory(trajectory);
+                }
 
-            const tr = trajectory.cell.obj?.data!;
-            for (let i = 0; i < tr.length; i++) {
-                const model = await this.plugin.builders.structure.createModel(trajectory.cell, { modelIndex: i }, { isCollapsed: true });
-                const structure = await this.plugin.builders.structure.createStructure(model, { name: 'deposited', params: { } });
-                this.nextSelection.add(model.ref);
-                this.nextSelection.add(structure.ref);
-                await this.plugin.builders.structure.representation.applyPreset(structure, 'auto', { globalThemeName: 'model-index' });
+                if (trajectory.models.length === 0) return;
+
+                const tr = trajectory.cell.obj?.data!;
+                if (kind === 'all' && tr.length > 1) {
+                    for (let i = 0; i < tr.length; i++) {
+                        const model = await this.plugin.builders.structure.createModel(trajectory.cell, { modelIndex: i }, { isCollapsed: true });
+                        const structure = await this.plugin.builders.structure.createStructure(model, { name: 'deposited', params: {} });
+                        this.nextSelection.add(model.ref);
+                        this.nextSelection.add(structure.ref);
+                        await this.plugin.builders.structure.representation.applyPreset(structure, 'auto', { globalThemeName: 'model-index' });
+                    }
+                } else {
+                    const model = await this.plugin.builders.structure.createModel(trajectory.cell, { modelIndex: 0 }, { isCollapsed: true });
+                    const structure = await this.plugin.builders.structure.createStructure(model);
+                    this.nextSelection.add(model.ref);
+                    this.nextSelection.add(structure.ref);
+                    await this.plugin.builders.structure.representation.applyPreset(structure, 'auto');
+                }
             }
         });
     }
@@ -165,7 +185,7 @@ export class StructureHierarchyManager extends PluginComponent<StructureHierarch
     constructor(private plugin: PluginContext) {
         super({
             hierarchy: StructureHierarchy(),
-            current: { trajectories: [], models: [], structures: [] }
+            selection: { trajectories: [], models: [], structures: [] }
         });
 
         plugin.state.data.events.changed.subscribe(e => {

src/mol-plugin-state/manager/structure/selection.ts

@@ -384,7 +384,7 @@ export class StructureSelectionManager extends PluginComponent<StructureSelectio
     }
 
     private get applicableStructures() {
-        return this.plugin.managers.structure.hierarchy.state.current.structures
+        return this.plugin.managers.structure.hierarchy.state.selection.structures
             .filter(s => !!s.cell.obj)
             .map(s => s.cell.obj!.data);
     }

src/mol-plugin-ui/controls/action-menu.tsx

@@ -200,7 +200,6 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         if (isItem(items)) return <Action item={items} onSelect={onSelect} current={current} multiselect={this.props.multiselect} />
 
         const { header } = this.state;
-
         return <>
             {header && (this.props.multiselect && this.state.isExpanded ? this.multiselectHeader : this.basicHeader)}
             <div className={this.props.noOffset ? void 0 : 'msp-control-offset'}>

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

@@ -31,7 +31,7 @@ export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
     params: P,
     values: any,
     onChange?: ParamsOnChange<PD.ValuesFor<P>>,
-    onChangeObject?: (values: PD.ValuesFor<P>, prev: PD.ValuesFor<P>) => void,
+    onChangeValues?: (values: PD.ValuesFor<P>, prev: PD.ValuesFor<P>) => void,
     isDisabled?: boolean,
     onEnter?: () => void
 }
@@ -39,9 +39,9 @@ export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
 export class ParameterControls<P extends PD.Params> extends React.PureComponent<ParameterControlsProps<P>> {
     onChange: ParamOnChange = (params) => {
         this.props.onChange?.(params, this.props.values);
-        if (this.props.onChangeObject) {
+        if (this.props.onChangeValues) {
             const values = { ...this.props.values, [params.name]: params.value };
-            this.props.onChangeObject(values, this.props.values);
+            this.props.onChangeValues(values, this.props.values);
         }
     }
 

src/mol-plugin-ui/left-panel.tsx

@@ -167,7 +167,7 @@ export class RemoveAllButton extends PluginUIComponent<{ }> {
 
     render() {
         const count = this.plugin.state.data.tree.children.get(StateTransform.RootRef).size;
-        if (count < 2) return null;
-        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} />;
+        if (count === 0) return null;
+        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} small />;
     }
 }

src/mol-plugin-ui/structure/components.tsx

@@ -55,7 +55,7 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
     }
 
     componentDidMount() {
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.current, c => this.setState({
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.changed, c => this.setState({
             action: this.state.action !== 'options' || c.structures.length === 0 ? void 0 : 'options',
             isEmpty: c.structures.length === 0
         }));
@@ -98,7 +98,7 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
         if (!item) return;
         const mng = this.plugin.managers.structure;
 
-        const structures = mng.hierarchy.state.current.structures;
+        const structures = mng.hierarchy.state.selection.structures;
         if (item.value === null) mng.component.clear(structures);
         else mng.component.applyPreset(structures, item.value as any);
     }
@@ -162,7 +162,7 @@ class AddComponentControls extends PurePluginUIComponent<AddComponentControlsPro
 
     render() {
         return <>
-            <ParameterControls params={this.state.params} values={this.state.values} onChangeObject={this.paramsChanged} />
+            <ParameterControls params={this.state.params} values={this.state.values} onChangeValues={this.paramsChanged} />
             <button className={`msp-btn msp-btn-block msp-btn-commit msp-btn-commit-on`} onClick={this.apply} style={{ marginTop: '1px' }}>
                 <Icon name='plus' /> Create Selection
             </button>
@@ -178,13 +178,13 @@ class ComponentOptionsControls extends PurePluginUIComponent<{ isDisabled: boole
     update = (options: StructureComponentManager.Options) => this.plugin.managers.structure.component.setOptions(options)
 
     render() {
-        return <ParameterControls params={StructureComponentManager.OptionsParams} values={this.plugin.managers.structure.component.state.options} onChangeObject={this.update} isDisabled={this.props.isDisabled} />;
+        return <ParameterControls params={StructureComponentManager.OptionsParams} values={this.plugin.managers.structure.component.state.options} onChangeValues={this.update} isDisabled={this.props.isDisabled} />;
     }
 }
 
 class ComponentListControls extends PurePluginUIComponent {
     get current() {
-        return this.plugin.managers.structure.hierarchy.behaviors.current;
+        return this.plugin.managers.structure.hierarchy.behaviors.changed;
     }
 
     componentDidMount() {
@@ -204,7 +204,7 @@ class ComponentListControls extends PurePluginUIComponent {
 
 class CurrentFocus extends PluginUIComponent {
     findInteraction() {
-        const xs = this.plugin.managers.structure.hierarchy.current.structures;
+        const xs = this.plugin.managers.structure.hierarchy.selection.structures;
         for (const s of xs) {
             if (s.currentFocus?.focus || s.currentFocus?.surroundings) return s.currentFocus;
         }

src/mol-plugin-ui/structure/measurements.tsx

@@ -206,7 +206,7 @@ class MeasurementsOptions extends PurePluginUIComponent<{}, { isDisabled: boolea
         const measurements = this.plugin.managers.structure.measurement.state;
 
         return <div className='msp-control-offset'>
-            <ParameterControls params={StructureMeasurementParams} values={measurements.options} onChangeObject={this.changed} isDisabled={this.state.isDisabled} />
+            <ParameterControls params={StructureMeasurementParams} values={measurements.options} onChangeValues={this.changed} isDisabled={this.state.isDisabled} />
         </div>;
     }
 }

src/mol-plugin-ui/structure/selection.tsx

@@ -54,7 +54,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
             this.forceUpdate()
         });
 
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.current, c => {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.changed, c => {
             const isEmpty = c.structures.length === 0;
             if (this.state.isEmpty !== isEmpty) {
                 this.setState({ isEmpty });
@@ -152,11 +152,14 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
     }
 
     renderControls() {
+        const stats = this.plugin.managers.structure.selection.stats
+        const empty = stats.structureCount === 0 || stats.elementCount === 0;
+
         return <>
-            <ParameterControls params={StructureSelectionParams} values={this.values} onChangeObject={this.setProps} />
+            <ParameterControls params={StructureSelectionParams} values={this.values} onChangeValues={this.setProps} />
             {this.controls}
             <div className='msp-control-row msp-row-text' style={{ marginTop: '6px' }}>
-                <button className='msp-btn msp-btn-block' onClick={this.focus} title='Click to Focus Selection'>
+                <button className='msp-btn msp-btn-block' onClick={this.focus} title='Click to Focus Selection' disabled={empty}>
                     <Icon name='focus-on-visual' style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>
@@ -188,7 +191,7 @@ class ApplyColorControls extends PurePluginUIComponent<ApplyColorControlsProps,
 
     render() {
         return <>
-            <ParameterControls params={this.params} values={this.state.values} onChangeObject={this.paramsChanged} />
+            <ParameterControls params={this.params} values={this.state.values} onChangeValues={this.paramsChanged} />
             <button className={`msp-btn msp-btn-block msp-btn-commit msp-btn-commit-on`} onClick={this.apply} style={{ marginTop: '1px' }}>
                 <Icon name='brush' /> Apply Coloring
             </button>

src/mol-plugin-ui/structure/source.tsx

@@ -8,7 +8,12 @@ import * as React from 'react';
 import { HierarchyRef, ModelRef, TrajectoryRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { CollapsableControls, CollapsableState } from '../base';
 import { ActionMenu } from '../controls/action-menu';
-import { Icon } from '../controls/icons';
+import { IconButton } from '../controls/common';
+import { ParameterControls } from '../controls/parameters';
+import { PluginCommands } from '../../mol-plugin/commands';
+import { StateTransforms } from '../../mol-plugin-state/transforms';
+import { memoize1 } from '../../mol-util/memoize';
+import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
 
 interface StructureSourceControlState extends CollapsableState {
     isBusy: boolean,
@@ -17,23 +22,44 @@ interface StructureSourceControlState extends CollapsableState {
 
 export class StructureSourceControls extends CollapsableControls<{}, StructureSourceControlState> {
     protected defaultState(): StructureSourceControlState {
-        return { 
-            header: 'Source',
+        return {
+            header: 'Structure',
             isCollapsed: false,
             isBusy: false
         };
     }
 
     componentDidMount() {
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.current, () => this.forceUpdate());
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.changed, () => this.forceUpdate());
         this.subscribe(this.plugin.behaviors.state.isBusy, v => {
             this.setState({ isBusy: v })
         });
     }
 
     private item = (ref: HierarchyRef) => {
-        const selected = this.plugin.managers.structure.hierarchy.currentSeletionSet;
-        return { label: ref.cell.obj?.label, selected: selected.has(ref.cell.transform.ref), value: [ref] } as ActionMenu.Item;
+        const selected = this.plugin.managers.structure.hierarchy.seletionSet;
+
+        let label;
+        switch (ref.kind) {
+            case 'model': {
+                const model = ref.cell.obj?.data;
+                if (model?.trajectoryInfo.size! > 1) {
+                    label = `${ref.cell.obj?.data.entryId} | Model ${model?.trajectoryInfo.index! + 1} of ${model?.trajectoryInfo.size}`;
+                }
+                label = `${ref.cell.obj?.data.entryId} | ${ref.cell.obj?.label}`; break;
+            }
+            case 'structure': {
+                const model = ref.cell.obj?.data.models[0];
+                if (model?.trajectoryInfo.size! > 1) {
+                    label = `${ref.cell.obj?.data.models[0].entryId} | ${ref.cell.obj?.label} (Model ${model?.trajectoryInfo.index! + 1} of ${model?.trajectoryInfo.size})`; break;
+                } else {
+                    label = `${ref.cell.obj?.data.models[0].entryId} | ${ref.cell.obj?.label}`; break;
+                }
+            }
+            default: label = ref.cell.obj?.label; break;
+        }
+        const item: ActionMenu.Item = { kind: 'item', label: label || ref.kind, selected: selected.has(ref.cell.transform.ref), value: [ref] };
+        return item;
     }
 
     getTrajectoryItems = (t: TrajectoryRef): ActionMenu.Items => {
@@ -44,7 +70,7 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
     private getModelItems = (m: ModelRef): ActionMenu.Items => {
         if (m.structures.length === 0) return this.item(m);
         if (m.structures.length === 1) {
-            const selected = this.plugin.managers.structure.hierarchy.currentSeletionSet;
+            const selected = this.plugin.managers.structure.hierarchy.seletionSet;
             const ref = m.structures[0];
             return { label: `${m.cell.obj?.label} | ${ref.cell.obj?.label}`, selected: selected.has(ref.cell.transform.ref), value: [m, ref] } as ActionMenu.Item;
         }
@@ -52,14 +78,44 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
     }
 
     get hierarchyItems() {
-        return this.plugin.managers.structure.hierarchy.state.current.trajectories.map(this.getTrajectoryItems);
+        const mng = this.plugin.managers.structure.hierarchy;
+        const { current } = mng;
+        const ret: ActionMenu.Items = [];
+
+        if (current.trajectories.length > 1) {
+            ret.push([
+                ActionMenu.Header('Trajectories'),
+                ...current.trajectories.map(this.item)
+            ]);
+        }
+
+        if (current.models.length > 1) {
+            ret.push([
+                ActionMenu.Header('Models'),
+                ...current.models.map(this.item)
+            ])
+        }
+
+        if (current.trajectories.length === 1 && current.models.length === 1) {
+            ret.push(...current.structures.map(this.item));
+        } else if (current.structures.length > 0) {
+            ret.push([
+                ActionMenu.Header('Structures'),
+                ...current.structures.map(this.item)
+            ]);
+        }
+
+        return ret;
+    }
+
+    get isEmpty() {
+        const { structures, models, trajectories } = this.plugin.managers.structure.hierarchy.current;
+        return trajectories.length === 0 && models.length === 0 && structures.length === 0;
     }
 
     get label() {
-        const { structures, models, trajectories } = this.plugin.managers.structure.hierarchy.state.current;
+        const { structures, models, trajectories } = this.plugin.managers.structure.hierarchy.state.selection;
 
-        // TODO: better labels
-        
         if (structures.length === 1) {
             const s = structures[0];
             if (s.model?.trajectory?.models && s.model.trajectory.models.length === 1) return s.cell.obj?.data.label;
@@ -68,18 +124,51 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         }
 
         if (structures.length > 1) {
-            return `${structures.length} structures`;
+            const p = structures[0];
+            const t = p?.model?.trajectory;
+            let sameTraj = true;
+            for (const s of structures) {
+                if (s?.model?.trajectory !== t) {
+                    sameTraj = false;
+                    break;
+                }
+            }
+
+            return sameTraj && t ? `${t.cell.obj?.label} | ${structures.length} structures` : `${structures.length} structures`;
         }
 
         if (models.length > 0) {
-            return `${models.length} model(s)`;
+            const t = models[0].trajectory;
+
+            if (models.length === 1) {
+                const model = models[0].cell.obj?.data;
+                if (model?.trajectoryInfo.size! > 1) {
+                    return `${t?.cell.obj?.label} | Model ${model?.trajectoryInfo.index! + 1} of ${model?.trajectoryInfo.size}`
+                } else {
+                    return `${t?.cell.obj?.label} | Model`
+                }
+            }
+
+            let sameTraj = true;
+            for (const m of models) {
+                if (m.trajectory !== t) {
+                    sameTraj = false;
+                    break;
+                }
+            }
+
+            return sameTraj ? `${t?.cell.obj?.label} | ${models.length} models` : `${models.length} models`;
         }
 
         if (trajectories.length > 0) {
-            return `${trajectories.length} trajectory(s)`;
+            return trajectories.length === 1 ? `${trajectories[0].cell.obj?.label} trajectory` : `${trajectories.length} trajectories`;
+        }
+
+        if (trajectories.length === 0 && models.length === 0 && structures.length === 0) {
+            return 'Nothing Loaded';
         }
 
-        return 'No structure loaded';
+        return 'Nothing Selected';
     }
 
     selectHierarchy: ActionMenu.OnSelectMany = (items) => {
@@ -96,10 +185,20 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
     toggleHierarchy = () => this.setState({ show: this.state.show !== 'hierarchy' ? 'hierarchy' : void 0 });
     toggleActions = () => this.setState({ show: this.state.show !== 'actions' ? 'actions' : void 0 });
 
-    get actions() {
-        const ret: ActionMenu.Items = [
-            ActionMenu.Item('Show all models', () => this.plugin.managers.structure.hierarchy.createAllModels(this.plugin.managers.structure.hierarchy.state.current.trajectories[0]))
-        ];
+    actions = memoize1((sel: StructureHierarchyManager['selection']) => this._actions);
+
+    get _actions() {
+        const ret: ActionMenu.Items = [];
+
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        if (selection.trajectories.some(t => t.cell.obj?.data.length! > 1)) {
+            ret.push(ActionMenu.Item('Load all models', () => this.plugin.managers.structure.hierarchy.createModels(selection.trajectories, 'all')));
+        }
+        if (selection.trajectories.some(t => t.models.length > 1)) {
+            ret.push(ActionMenu.Item('Load single model', () => this.plugin.managers.structure.hierarchy.createModels(selection.trajectories, 'single')));
+        }
+        
+        // TODO: remove actions?
         return ret;
     }
 
@@ -109,18 +208,57 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         (item?.value as any)();
     }
 
+    updateStructureModel = async (params: any) => {
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        const m = selection.structures[0].model!;
+        this.plugin.state.updateTransform(this.plugin.state.data, m.cell.transform.ref, params, 'Model Index');
+        // TODO: ?? PluginCommands.Camera.Reset(this.plugin);
+    }
+
+    get modelIndex() {
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        if (selection.structures.length !== 1) return null;
+        const m = selection.structures[0].model;
+        if (!m || m.cell.transform.transformer !== StateTransforms.Model.ModelFromTrajectory) return null;
+        if (m.cell.obj?.data.trajectoryInfo.size! <= 1) return null;
+
+        const params = m.cell.params?.definition;
+        if (!params) return null;
+
+        return <ParameterControls params={params} values={m.cell.params?.values} onChangeValues={this.updateStructureModel} isDisabled={this.state.isBusy} />
+    }
+
+    updateStructure = async (params: any) => {
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        const s = selection.structures[0];
+        await this.plugin.state.updateTransform(this.plugin.state.data, s.cell.transform.ref, params, 'Structure Type');
+        PluginCommands.Camera.Reset(this.plugin);
+    }
+
+    get structureType() {
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        if (selection.structures.length !== 1) return null;
+        const s = selection.structures[0];
+        const params = s.cell.params?.definition;
+        if (!params) return null;
+
+        return <ParameterControls params={params} values={s.cell.params?.values} onChangeValues={this.updateStructure} isDisabled={this.state.isBusy} />
+    }
+
     renderControls() {
+        const disabled = this.state.isBusy || this.isEmpty;
+        const actions = this.actions(this.plugin.managers.structure.hierarchy.selection);
         return <>
-            <div className='msp-flex-row' style={{ marginTop: '1px' }}>
-                <button className='msp-btn msp-form-control msp-flex-item' onClick={this.toggleHierarchy} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            <div className='msp-btn-row-group' style={{ marginTop: '1px' }}>
+                <button className='msp-btn msp-form-control msp-flex-item' onClick={this.toggleHierarchy} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} disabled={disabled}>
                     {this.label}
                 </button>
-                <button className='msp-btn msp-form-control msp-flex-item' onClick={this.toggleActions} style={{ flex: '0 0 40px', }}>
-                    <Icon name='dot-3' />
-                </button>
+                {actions.length > 0 && <IconButton customClass='msp-form-control' style={{ flex: '0 0 32px' }} onClick={this.toggleActions} icon='dot-3' title='Actions' toggleState={this.state.show === 'actions'} disabled={disabled} />}
             </div>
             {this.state.show === 'hierarchy' && <ActionMenu items={this.hierarchyItems} onSelect={this.selectHierarchy} multiselect />}
-            {this.state.show === 'actions' && <ActionMenu items={this.actions} onSelect={this.selectAction} />}
+            {this.state.show === 'actions' && <ActionMenu items={actions} onSelect={this.selectAction} />}
+            {this.modelIndex}
+            {this.structureType}
         </>;
     }
 }

src/mol-plugin/state.ts

@@ -96,9 +96,9 @@ class PluginState {
         return PluginCommands.State.Update(this.plugin, { state, tree });
     }
 
-    updateTransform(state: State, a: StateTransform.Ref, params: any) {
+    updateTransform(state: State, a: StateTransform.Ref, params: any, canUndo?: string | boolean) {
         const tree = state.build().to(a).update(params);
-        return PluginCommands.State.Update(this.plugin, { state, tree });
+        return PluginCommands.State.Update(this.plugin, { state, tree, options: { canUndo } });
     }
 
     dispose() {