plugin: added customStructureControls renamed genericRepresentationControls

src/mol-plugin-ui/controls.tsx

@@ -264,16 +264,32 @@ export class LociLabels extends PluginUIComponent<{}, { entries: ReadonlyArray<L
     }
 }
 
+export class CustomStructureControls extends PluginUIComponent {
+    componentDidMount() {
+        this.subscribe(this.plugin.state.behaviors.events.changed, () => this.forceUpdate());
+    }
+
+    render() {
+        const controls: JSX.Element[] = []
+        this.plugin.customStructureControls.forEach((Controls, key) => {
+            controls.push(<Controls key={key} />)
+        })
+        return controls.length > 0 ? <>{controls}</> : null
+    }
+}
+
 export class DefaultStructureTools extends PluginUIComponent {
     render() {
         return <>
-            <div className='msp-section-header'><Icon name='tools' /> Structure Tools</div>
+            <div className='msp-section-header'><Icon name='tools' />Structure Tools</div>
 
             <StructureSourceControls />
             <StructureSelectionControls />
-            <StructureComponentControls />
             <StructureMeasurementsControls />
+            <StructureComponentControls />
             <VolumeStreamingControls />
+
+            <CustomStructureControls />
         </>;
     }
 }

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

@@ -19,6 +19,7 @@ import { UpdateTransformControl } from '../state/update-transform';
 import { PluginContext } from '../../mol-plugin/context';
 import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { StructureHierarchyManager } from '../../mol-plugin-state/manager/structure/hierarchy';
+import { GenericEntryListControls } from './generic';
 
 interface StructureComponentControlState extends CollapsableState {
     isDisabled: boolean
@@ -39,6 +40,7 @@ export class StructureComponentControls extends CollapsableControls<{}, Structur
         return <>
             <ComponentEditorControls />
             <ComponentListControls />
+            <GenericEntryListControls />
         </>;
     }
 }
@@ -206,6 +208,8 @@ class ComponentListControls extends PurePluginUIComponent {
     }
 }
 
+
+
 type StructureComponentEntryActions = 'action' | 'remove'
 
 class StructureComponentGroup extends PurePluginUIComponent<{ group: StructureComponentRef[] }, { action?: StructureComponentEntryActions }> {

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

@@ -13,6 +13,52 @@ import { PurePluginUIComponent } from '../base';
 import { IconButton } from '../controls/common';
 import { UpdateTransformControl } from '../state/update-transform';
 
+export class GenericEntryListControls extends PurePluginUIComponent {
+    get current() {
+        return this.plugin.managers.structure.hierarchy.behaviors.selection;
+    }
+
+    componentDidMount() {
+        this.subscribe(this.current, () => this.forceUpdate());
+    }
+
+    get unitcell() {
+        const { selection } = this.plugin.managers.structure.hierarchy;
+        if (selection.structures.length === 0) return null;
+
+        const refs = [];
+        for (const s of selection.structures) {
+            const model = s.model;
+            if (model?.unitcell && model.unitcell?.cell.obj) refs.push(model.unitcell);
+        }
+        if (refs.length === 0) return null;
+
+        return <GenericEntry refs={refs} labelMultiple='Unitcells' />;
+    }
+
+    get customControls(): JSX.Element[] | null {
+        const controls: JSX.Element[] = []
+        this.plugin.genericRepresentationControls.forEach((provider, key) => {
+            const [refs, labelMultiple] = provider(this.plugin.managers.structure.hierarchy.selection)
+            if (refs.length > 0) {
+                controls.push(<div key={key}>
+                    <GenericEntry refs={refs} labelMultiple={labelMultiple} />
+                </div>)
+            }
+        })
+        return controls.length > 0 ? controls : null
+    }
+
+    render() {
+        return <>
+            <div style={{ marginTop: '6px' }}>
+                {this.unitcell}
+                {this.customControls}
+            </div>
+        </>
+    }
+}
+
 export class GenericEntry<T extends HierarchyRef> extends PurePluginUIComponent<{ refs: T[], labelMultiple?: string }, { showOptions: boolean }> {
     state = { showOptions: false }
 

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

@@ -13,7 +13,6 @@ import { IconButton } from '../controls/common';
 import { ParameterControls } from '../controls/parameters';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
-import { GenericEntry } from './generic';
 
 interface StructureSourceControlState extends CollapsableState {
     isBusy: boolean,
@@ -244,33 +243,6 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
         return <ParameterControls params={params} values={s.cell.params?.values} onChangeValues={this.updateStructure} isDisabled={this.state.isBusy} />
     }
 
-    get unitcell() {
-        const { selection } = this.plugin.managers.structure.hierarchy;
-        if (selection.structures.length === 0) return null;
-
-        const refs = [];
-        for (const s of selection.structures) {
-            const model = s.model;
-            if (model?.unitcell && model.unitcell?.cell.obj) refs.push(model.unitcell);
-        }
-        if (refs.length === 0) return null;
-
-        return <GenericEntry refs={refs} labelMultiple='Unitcells' />;
-    }
-
-    get customControls(): JSX.Element[] | null {
-        const controls: JSX.Element[] = []
-        this.plugin.customSourceControls.forEach((provider, key) => {
-            const [refs, labelMultiple] = provider(this.plugin.managers.structure.hierarchy.selection)
-            if (refs.length > 0) {
-                controls.push(<div key={key}>
-                    <GenericEntry refs={refs} labelMultiple={labelMultiple} />
-                </div>)
-            }
-        })
-        return controls.length > 0 ? controls : null
-    }
-
     renderControls() {
         const disabled = this.state.isBusy || this.isEmpty;
         const presets = this.presetActions;
@@ -286,10 +258,6 @@ export class StructureSourceControls extends CollapsableControls<{}, StructureSo
             {this.state.show === 'presets' && <ActionMenu items={presets} onSelect={this.applyPreset} />}
             {this.modelIndex}
             {this.structureType}
-            <div style={{ marginTop: '6px' }}>
-                {this.unitcell}
-                {this.customControls}
-            </div>
         </>;
     }
 }

src/mol-plugin/context.ts

@@ -51,6 +51,7 @@ import { ViewportScreenshotHelper } from './util/viewport-screenshot';
 import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
 import { Representation } from '../mol-repr/representation';
 import { HierarchyRef } from '../mol-plugin-state/manager/structure/hierarchy-state';
+import { PluginUIComponent } from '../mol-plugin-ui/base';
 
 export class PluginContext {
     private disposed = false;
@@ -144,7 +145,9 @@ export class PluginContext {
     readonly customModelProperties = new CustomProperty.Registry<Model>();
     readonly customStructureProperties = new CustomProperty.Registry<Structure>();
     readonly customParamEditors = new Map<string, StateTransformParameters.Class>();
-    readonly customSourceControls = new Map<string, (selection: StructureHierarchyManager['selection']) => [HierarchyRef[], string]>();
+
+    readonly customStructureControls = new Map<string, { new (): PluginUIComponent<any, any, any> }>();
+    readonly genericRepresentationControls = new Map<string, (selection: StructureHierarchyManager['selection']) => [HierarchyRef[], string]>();
 
     readonly helpers = {
         substructureParent: new SubstructureParentHelper(this),