show current selection desc in StructureComponentControls header

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

@@ -227,4 +227,29 @@ export namespace StructureHierarchyManager {
 
         return groups;
     }
+
+    export function getSelectedStructuresDescription(plugin: PluginContext) {
+        const { structures } = plugin.managers.structure.hierarchy.state.selection;
+        if (structures.length === 0) return '';
+
+        if (structures.length === 1) {
+            const s = structures[0];
+            const entryId = s.cell.obj?.data.models[0].entryId;
+            if (s.model?.trajectory?.models && s.model.trajectory.models.length === 1) return entryId;
+            if (s.model) return `${s.model.cell.obj?.label} | ${entryId}`;
+            return entryId;
+        }
+
+        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`;
+    }
 }

src/mol-plugin-ui/base.tsx

@@ -70,7 +70,7 @@ export type _State<C extends React.Component> = C extends React.Component<any, i
 //
 
 export type CollapsableProps = { initiallyCollapsed?: boolean, header?: string }
-export type CollapsableState = { isCollapsed: boolean, header: string, isHidden?: boolean }
+export type CollapsableState = { isCollapsed: boolean, header: string, description?: string, isHidden?: boolean }
 
 export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends PluginUIComponent<P & CollapsableProps, S & CollapsableState, SS> {
     toggleCollapsed = () => {
@@ -89,9 +89,10 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
 
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleCollapsed}>
+                <button className='msp-btn msp-btn-block msp-btn-collapse msp-no-overflow' onClick={this.toggleCollapsed}>
                     <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />
                     {this.state.header}
+                    <small style={{ margin: '0 6px' }}>{this.state.isCollapsed ? '' : this.state.description}</small>
                 </button>
             </div>
             {!this.state.isCollapsed && this.renderControls()}

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

@@ -77,12 +77,12 @@ export namespace ActionMenu {
             } else {
                 cat = items as any;
             }
-            
+
             cat!.push({ kind: 'item', label: l, value: v, icon: icon ? icon(x) : void 0, selected: selected ? selected(x) : void 0 });
         }
         return items as ActionMenu.Items;
     }
-    
+
     type Opt = ParamDefinition.Select<any>['options'][0];
     const _selectOptions = { value: (o: Opt) => o[0], label: (o: Opt) => o[1], category: (o: Opt) => o[2] };
 
@@ -127,7 +127,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const header = isItems(props.items) && isHeader(props.items[0]) ? props.items[0] : void 0;
 
         const hasCurrent = header?.isIndependent
-            ? false 
+            ? false
             : props.multiselect
                 ? ActionMenu.hasSelectedItem(props.items)
                 : (!!props.current && !!ActionMenu.findItem(props.items, props.current.value)) || ActionMenu.hasSelectedItem(props.items);
@@ -214,9 +214,9 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
 }
 
 const Action: React.FC<{
-    item: ActionMenu.Item, 
-    onSelect: ActionMenu.OnSelect | ActionMenu.OnSelectMany, 
-    multiselect: boolean | undefined, 
+    item: ActionMenu.Item,
+    onSelect: ActionMenu.OnSelect | ActionMenu.OnSelectMany,
+    multiselect: boolean | undefined,
     current: ActionMenu.Item | undefined }> = ({ item, onSelect, current, multiselect }) => {
     const isCurrent = current === item;
     return  <button className='msp-btn msp-btn-block msp-form-control msp-action-menu-button msp-no-overflow' onClick={() => onSelect(multiselect ? [item] : item as any)} disabled={item.disabled}>

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

@@ -18,6 +18,7 @@ import { ParameterControls } from '../controls/parameters';
 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';
 
 interface StructureComponentControlState extends CollapsableState {
     isDisabled: boolean
@@ -28,6 +29,12 @@ export class StructureComponentControls extends CollapsableControls<{}, Structur
         return { header: 'Representation', isCollapsed: false, isDisabled: false };
     }
 
+    componentDidMount() {
+        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, c => this.setState({
+            description: StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)
+        }));
+    }
+
     renderControls() {
         return <>
             <ComponentEditorControls />