more label tweaks

- show entity in locilabel-provider for single-entity loci
- better category handling in focus ui

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

@@ -24,7 +24,7 @@ interface StructureFocusManagerState {
     history: FocusEntry[]
 }
 
-const HISTORY_CAPACITY = 4;
+const HISTORY_CAPACITY = 8;
 
 export class StructureFocusManager extends StatefulPluginComponent<StructureFocusManagerState> {
 
@@ -39,14 +39,12 @@ export class StructureFocusManager extends StatefulPluginComponent<StructureFocu
     get current() { return this.state.current; }
     get history() { return this.state.history; }
 
-    /** Adds to history without `.category` */
     private tryAddHistory(entry: FocusEntry) {
-        const { label, loci } = entry
-        if (StructureElement.Loci.isEmpty(loci)) return;
+        if (StructureElement.Loci.isEmpty(entry.loci)) return;
 
         let idx = 0, existingEntry: FocusEntry | undefined = void 0;
         for (const e of this.state.history) {
-            if (StructureElement.Loci.areEqual(e.loci, loci)) {
+            if (StructureElement.Loci.areEqual(e.loci, entry.loci)) {
                 existingEntry = e;
                 break;
             }
@@ -56,12 +54,12 @@ export class StructureFocusManager extends StatefulPluginComponent<StructureFocu
         if (existingEntry) {
             // move to top, use new
             arrayRemoveAtInPlace(this.state.history, idx);
-            this.state.history.unshift({ label, loci });
+            this.state.history.unshift(entry);
             this.events.historyUpdated.next();
             return;
         }
 
-        this.state.history.unshift({ label, loci });
+        this.state.history.unshift(entry);
         if (this.state.history.length > HISTORY_CAPACITY) this.state.history.pop();
 
         this.events.historyUpdated.next();

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

@@ -71,7 +71,8 @@ export namespace ActionMenu {
             const catName = category?.(x);
             const l = label ? label(x) : '' + x;
             const v = value ? value(x) : x;
-            const d = description ? description(x) : '' + x;
+            const d = description ? description(x) :
+                typeof x === 'string' ? x : undefined;
 
             let cat: (ActionMenu.Item | ActionMenu.Header)[] | undefined;
             if (!!catName) {
@@ -79,7 +80,7 @@ export namespace ActionMenu {
 
                 cat = cats.get(catName);
                 if (!cat) {
-                    cat = [ActionMenu.Header(catName)];
+                    cat = [ActionMenu.Header(catName, { description: catName })];
                     cats.set(catName, cat);
                     items.push(cat);
                 }
@@ -185,7 +186,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         const { header, hasCurrent } = this.state;
 
         return <div className='msp-flex-row msp-control-group-header'>
-            <Button icon={this.state.isExpanded ? 'collapse' : 'expand'} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? header?.description : ''}`}>
+            <Button icon={this.state.isExpanded ? 'collapse' : 'expand'} flex noOverflow onClick={this.toggleExpanded} title={`Click to ${this.state.isExpanded ? 'collapse' : 'expand'}.${header?.description ? ` ${header?.description}` : ''}`}>
                 {hasCurrent ? <b>{header?.label}</b> : header?.label}
             </Button>
             <Button icon='check' flex onClick={this.selectAll} style={{ flex: '0 0 50px', textAlign: 'right' }}>

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

@@ -118,7 +118,7 @@ class ComponentEditorControls extends PurePluginUIComponent<{}, ComponentEditorC
             <div className='msp-flex-row'>
                 <ToggleButton icon='bookmarks' label='Preset' title='Apply a representation preset for the current structure(s).' toggle={this.togglePreset} isSelected={this.state.action === 'preset'} disabled={this.isDisabled} />
                 <ToggleButton icon='plus' label='Add' title='Add a new representation component for a selection.' toggle={this.toggleAdd} isSelected={this.state.action === 'add'} disabled={this.isDisabled} />
-                <ToggleButton icon='cog' label='' title='Options that are applied to all representations.' style={{ flex: '0 0 40px', padding: 0 }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
+                <ToggleButton icon='cog' label='' title='Options that are applied to all applicable representations.' style={{ flex: '0 0 40px', padding: 0 }} toggle={this.toggleOptions} isSelected={this.state.action === 'options'} disabled={this.isDisabled} />
                 <IconButton className='msp-flex-item' flex='40px' onClick={this.undo} disabled={!this.state.canUndo || this.isDisabled} icon='back' title={undoTitle} />
             </div>
             {this.state.action === 'preset' && this.presetControls}

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

@@ -115,10 +115,12 @@ export class StructureFocusControls extends PluginUIComponent<{}, StructureFocus
         const { history } = this.plugin.managers.structure.focus
         if (history.length > 0) {
             historyItems.push([
-                ActionMenu.Header('History'),
+                ActionMenu.Header('History', { description: 'Previously focused on items.' }),
                 ...ActionMenu.createItems(history, {
                     label: f => f.label,
-                    category: f => f.category
+                    description: f => {
+                        return f.label !== f.category ? `${f.category} | ${f.label}` : f.label
+                    }
                 })
             ])
         }
@@ -131,10 +133,11 @@ export class StructureFocusControls extends PluginUIComponent<{}, StructureFocus
                 const entries = getFocusEntries(d)
                 if (entries.length > 0) {
                     presetItems.push([
-                        ActionMenu.Header(d.label),
+                        ActionMenu.Header(d.label, { description: d.label }),
                         ...ActionMenu.createItems(entries, {
                             label: f => f.label,
-                            category: f => f.category
+                            category: f => f.category,
+                            description: f => f.label
                         })
                     ])
                 }

src/mol-plugin/behavior/dynamic/representation.ts

@@ -16,7 +16,7 @@ import { ButtonsType, ModifiersKeys } from '../../../mol-util/input/input-observ
 import { Binding } from '../../../mol-util/binding';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { EmptyLoci, Loci, isEmptyLoci } from '../../../mol-model/loci';
-import { Structure } from '../../../mol-model/structure';
+import { Structure, StructureElement, StructureProperties } from '../../../mol-model/structure';
 import { arrayMax } from '../../../mol-util/array';
 import { Representation } from '../../../mol-repr/representation';
 import { LociLabel } from '../../../mol-plugin-state/manager/loci-label';
@@ -175,7 +175,17 @@ export const DefaultLociLabelProvider = PluginBehavior.create({
     category: 'interaction',
     ctor: class implements PluginBehavior<undefined> {
         private f = {
-            label: (loci: Loci) => lociLabel(loci),
+            label: (loci: Loci) => {
+                const label: string[] = []
+                if (StructureElement.Loci.is(loci) && loci.elements.length === 1) {
+                    const { unit: u } = loci.elements[0]
+                    const l = StructureElement.Location.create(loci.structure, u, u.elements[0])
+                    const name = StructureProperties.entity.pdbx_description(l).join(', ')
+                    label.push(name)
+                }
+                label.push(lociLabel(loci))
+                return label.join('</br>')
+            },
             group: (label: LociLabel) => label.toString().replace(/Model [0-9]+/g, 'Models')
         };
         register() { this.ctx.managers.lociLabels.addProvider(this.f); }