mol-plugin: cleaner object update UI

src/mol-plugin/skin/base/components/temp.scss

@@ -14,11 +14,16 @@
     // border-right: $control-spacing solid $entity-color-Group; // TODO separate color
     border-bottom: 1px solid $entity-color-Group; // TODO separate color
     // border-bottom: 1px solid $entity-color-Group; // TODO separate color
+    cursor: default;
 
     > .msp-icon {
         display: block;
         float: left;
     }
+
+    > small {
+        font-weight: normal;
+    }
 }
 
 .msp-current-header {

src/mol-plugin/skin/base/icons.scss

@@ -219,4 +219,8 @@
 .msp-icon-help-circle-collapse:before {
 	width: 2.5em !important;
 	content: "\e81d\0020\e883";
+}
+
+.msp-icon-flow-cascade:before {
+	content: "\e8d8";
 }

src/mol-plugin/ui/plugin.tsx

@@ -23,6 +23,7 @@ import { UpdateTransformControl } from './state/update-transform';
 import { SequenceView } from './sequence';
 import { Toasts } from './toast';
 import { ImageControls } from './image';
+import { Icon } from './controls/common';
 
 export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
     region(kind: 'left' | 'right' | 'bottom' | 'main', element: JSX.Element) {
@@ -246,7 +247,13 @@ export class CurrentObject extends PluginUIComponent {
         if (!showActions) return null;
 
         return <>
-            {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformControl state={current.state} transform={transform} /> }
+            {(cell.status === 'ok' || cell.status === 'error') && <>
+                <div className='msp-section-header' style={{ margin: '0 0 -1px 0' }}>
+                    <Icon name='flow-cascade' />
+                    {`${cell.obj?.label || transform.transformer.definition.display.name}`} <small>{transform.transformer.definition.display.name}</small>
+                </div>
+                <UpdateTransformControl state={current.state} transform={transform} customHeader='none' />
+            </> }
             {cell.status === 'ok' && <StateObjectActions state={current.state} nodeRef={ref} initiallyCollapsed />}
         </>;
     }

src/mol-plugin/ui/state/common.tsx

@@ -102,7 +102,7 @@ namespace TransformControlBase {
 abstract class TransformControlBase<P, S extends TransformControlBase.ComponentState> extends PurePluginUIComponent<P, S> {
     abstract applyAction(): Promise<void>;
     abstract getInfo(): StateTransformParameters.Props['info'];
-    abstract getHeader(): StateTransformer.Definition['display'];
+    abstract getHeader(): StateTransformer.Definition['display'] | 'none';
     abstract canApply(): boolean;
     abstract getTransformerId(): string;
     abstract canAutoApply(newParams: any): boolean;
@@ -187,12 +187,12 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
 
         const { a, b } = this.getSourceAndTarget();
         return <div className={wrapClass}>
-            <div className='msp-transform-header'>
-                <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleExpanded} title={display.description}>
-                    <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
+            {display !== 'none' && <div className='msp-transform-header'>
+                <button className={`msp-btn msp-btn-block${isEmpty ? '' : ' msp-btn-collapse'}`} onClick={this.toggleExpanded} title={display.description}>
+                    {!isEmpty && <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />}
                     {display.name}
                 </button>
-            </div>
+            </div>}
             {!isEmpty && !this.state.isCollapsed && <>
                 <ParamEditor info={info} a={a} b={b} events={this.events} params={this.state.params} isDisabled={this.state.busy} />
 

src/mol-plugin/ui/state/update-transform.tsx

@@ -19,7 +19,7 @@ namespace UpdateTransformControl {
         state: State,
         toggleCollapsed?: Observable<any>,
         initiallyCollapsed?: boolean,
-        customHeader?: StateTransformer.Definition['display']
+        customHeader?: StateTransformer.Definition['display'] | 'none'
     }
 
     export interface ComponentState extends TransformControlBase.ComponentState {