mol-plugin: state tree button tweaks

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

@@ -152,19 +152,14 @@
     bottom: 0;
 }
 
-.msp-left-panel-controls-button-data {
-    position: relative;
-    height: $row-height;
-
-    > div {
-        position: absolute;
-        width: 6px;
-        height: 6px;
-        background: $entity-color-Group;
-        border-radius: 3px;
-        right: 6px;
-        bottom: 6px;
-    }
+.msp-left-panel-controls-button-data-dirty {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background: $entity-color-Group;
+    border-radius: 3px;
+    right: 6px;
+    bottom: 6px;
 }
 
 .msp-left-panel-controls {

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

@@ -237,12 +237,15 @@ export function IconButton(props: {
     toggleState?: boolean,
     disabled?: boolean,
     customClass?: string,
-    'data-id'?: string
+    style?: React.CSSProperties,
+    'data-id'?: string,
+    extraContent?: JSX.Element
 }) {
     let className = `msp-btn-link msp-btn-icon${props.isSmall ? '-small' : ''}${props.customClass ? ' ' + props.customClass : ''}`;
     if (typeof props.toggleState !== 'undefined') className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
-    return <button className={className} onClick={props.onClick} title={props.title} disabled={props.disabled} data-id={props['data-id']}>
+    return <button className={className} onClick={props.onClick} title={props.title} disabled={props.disabled} data-id={props['data-id']} style={props.style}>
         <span className={`msp-icon msp-icon-${props.icon}`}/>
+        {props.extraContent}
     </button>;
 }
 

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

@@ -104,6 +104,7 @@ class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void
     componentDidMount() {
         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, tab => {
             if (this.tab === 'data') this.setState({ changed: false });
+            else this.forceUpdate();
         });
 
         this.subscribe(this.plugin.state.dataState.events.changed, state => {
@@ -112,11 +113,9 @@ class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void
     }
 
     render() {
-        return <div className='msp-left-panel-controls-button-data'>
-            <IconButton icon='flow-tree' toggleState={this.tab === 'data'} onClick={() => this.props.set('data')} title='State Tree' />
-            {this.state.changed && <div />}
-        </div>;
-
+        return <IconButton
+            icon='flow-tree' toggleState={this.tab === 'data'} onClick={() => this.props.set('data')} title='State Tree' 
+            style={{ position: 'relative' }} extraContent={this.state.changed ? <div className='msp-left-panel-controls-button-data-dirty' /> : void 0} />;
     }
 }