ui tweaks

src/mol-plugin-ui/base.tsx

@@ -5,11 +5,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
+import { ArrowDropDown, ArrowRight } from '@material-ui/icons';
 import * as React from 'react';
 import { Observable, Subscription } from 'rxjs';
 import { PluginContext } from '../mol-plugin/context';
 import { Button } from './controls/common';
-import { ArrowRight, ArrowDropDown } from '@material-ui/icons';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
@@ -76,7 +76,7 @@ export type CollapsableState = {
     header: string,
     description?: string,
     isHidden?: boolean,
-    brand?: { name: string, accent: 'cyan' | 'red' | 'gray' | 'green' | 'purple' | 'blue' | 'orange' }
+    brand?: { name: string, /* svg?: React.FC, */ accent: 'cyan' | 'red' | 'gray' | 'green' | 'purple' | 'blue' | 'orange' }
 }
 
 export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends PluginUIComponent<P & CollapsableProps, S & CollapsableState, SS> {
@@ -105,6 +105,7 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
                 <Button icon={this.state.brand ? void 0 : this.state.isCollapsed ? ArrowRight : ArrowDropDown} noOverflow onClick={this.toggleCollapsed}
                     className={this.state.brand ? `msp-transform-header-brand msp-transform-header-brand-${this.state.brand.accent}` : void 0} title={`Click to ${this.state.isCollapsed ? 'expand' : 'collapse'}`}>
                     {this.state.brand && <div className={`msp-accent-bg-${this.state.brand.accent}`}>{this.state.brand.name}</div>}
+                    {/* {this.state.brand?.svg && <Icon svg={this.state.brand?.svg} inline />} */}
                     {this.state.header}
                     <small style={{ margin: '0 6px' }}>{this.state.isCollapsed ? '' : this.state.description}</small>
                 </Button>

src/mol-plugin-ui/camera.tsx

@@ -1,77 +0,0 @@
-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author David Sehnal <david.sehnal@gmail.com>
- */
-
-import { Code, DeleteOutlined } from '@material-ui/icons';
-import * as React from 'react';
-import { PluginCommands } from '../mol-plugin/commands';
-import { ParamDefinition as PD } from '../mol-util/param-definition';
-import { PluginUIComponent } from './base';
-import { Button, IconButton } from './controls/common';
-import { Icon } from './controls/icons';
-import { ParameterControls } from './controls/parameters';
-
-export class CameraSnapshots extends PluginUIComponent<{ }, { }> {
-    render() {
-        return <div>
-            <div className='msp-section-header'><Icon svg={Code} /> Camera Snapshots</div>
-            <CameraSnapshotControls />
-            <CameraSnapshotList />
-        </div>;
-    }
-}
-
-class CameraSnapshotControls extends PluginUIComponent<{ }, { name: string, description: string }> {
-    static Params = {
-        name: PD.Text(),
-        description: PD.Text()
-    }
-    state = PD.getDefaultValues(CameraSnapshotControls.Params);
-
-    add = () => {
-        PluginCommands.Camera.Snapshots.Add(this.plugin, this.state);
-        this.setState({ name: '', description: '' });
-    }
-
-    clear = () => {
-        PluginCommands.Camera.Snapshots.Clear(this.plugin, {});
-    }
-
-    render() {
-        return <div>
-            <ParameterControls params={CameraSnapshotControls.Params} values={this.state} onEnter={this.add} onChange={p => this.setState({ [p.name]: p.value } as any)}  />
-
-            <div className='msp-flex-row'>
-                <Button onClick={this.add}>Add</Button>
-                <Button onClick={this.clear}>Clear</Button>
-            </div>
-        </div>;
-    }
-}
-
-class CameraSnapshotList extends PluginUIComponent<{ }, { }> {
-    componentDidMount() {
-        this.subscribe(this.plugin.events.state.cameraSnapshots.changed, () => this.forceUpdate());
-    }
-
-    apply(id: string) {
-        return () => PluginCommands.Camera.Snapshots.Apply(this.plugin, { id });
-    }
-
-    remove(id: string) {
-        return () => {
-            PluginCommands.Camera.Snapshots.Remove(this.plugin, { id });
-        };
-    }
-
-    render() {
-        return <ul style={{ listStyle: 'none' }} className='msp-state-list'>
-            {this.plugin.state.cameraSnapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
-                <Button onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></Button>
-                <IconButton svg={DeleteOutlined} onClick={this.remove(e!.id)} className='msp-state-list-remove-button' />
-            </li>)}
-        </ul>;
-    }
-}

src/mol-plugin-ui/controls.tsx

@@ -5,7 +5,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Build, NavigateBefore, NavigateNext, PlayArrow, SkipPrevious, Stop, Subscriptions } from '@material-ui/icons';
+import { Build, NavigateBefore, NavigateNext, PlayArrow, SkipPrevious, Stop, SubscriptionsOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
 import { LociLabel } from '../mol-plugin-state/manager/loci-label';
@@ -83,26 +83,12 @@ export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: bo
         action: UpdateTrajectory.create({ action: 'advance', by: 1 })
     });
 
-    // stopAnimation = () => {
-    //     this.plugin.state.animation.stop();
-    // }
-
-    // playAnimation = () => {
-    //     const anim = this.plugin.state.animation;
-    //     if (anim.state.params.current === AnimateModelIndex.name) {
-    //         anim.start();
-    //     } else {
-    //         anim.play(AnimateModelIndex, ParamDefinition.getDefaultValues(AnimateModelIndex.params(this.plugin) as any as ParamDefinition.Params))
-    //     }
-    // }
-
     render() {
         const isAnimating = this.plugin.behaviors.state.isAnimating.value;
 
         if (!this.state.show || (isAnimating && !this.state.label)) return null;
 
         return <div className='msp-traj-controls'>
-            {/* <IconButton icon={isAnimating ? 'stop' : 'play'} title={isAnimating ? 'Stop' : 'Play'} onClick={isAnimating ? this.stopAnimation : this.playAnimation} /> */}
             {!isAnimating && <IconButton svg={SkipPrevious} title='First Model' onClick={this.reset} disabled={isAnimating} />}
             {!isAnimating && <IconButton svg={NavigateBefore} title='Previous Model' onClick={this.prev} disabled={isAnimating} />}
             {!isAnimating && <IconButton svg={NavigateNext} title='Next Model' onClick={this.next} disabled={isAnimating} />}
@@ -236,8 +222,8 @@ export class AnimationViewportControls extends PluginUIComponent<{}, { isEmpty:
         return <div className='msp-animation-viewport-controls'>
             <div>
                 <div className='msp-semi-transparent-background' />
-                <IconButton svg={isAnimating || isPlaying ? Stop : Subscriptions} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
-                    onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded}
+                <IconButton svg={isAnimating || isPlaying ? Stop : SubscriptionsOutlined} transparent title={isAnimating ? 'Stop' : 'Select Animation'}
+                    onClick={isAnimating || isPlaying ? this.stop : this.toggleExpanded} toggleState={this.state.isExpanded}
                     disabled={isAnimating || isPlaying ? false : this.state.isBusy || this.state.isPlaying || this.state.isEmpty} />
             </div>
             {(this.state.isExpanded && !this.state.isBusy) && <div className='msp-animation-viewport-controls-select'>

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

@@ -25,6 +25,8 @@ export function Union() { return _union; }
 export function Subtract() { return _subtract; }
 export function Intersect() { return _intersect; }
 export function SetSvg() { return _set; }
+// export function MoleculeSvg() { return _molecule; }
+// export function RulerSvg() { return _ruler; }
 
 const circleLeft = <circle r="6px" id="circle-left" cy="12px" cx="8px" strokeWidth="0.5" />;
 const circleRight = <circle r="6px" id="circle-right" cy="12px" cx="16px" strokeWidth="0.5" />;
@@ -80,4 +82,48 @@ const _set = <svg width="24px" height="24px" viewBox="0 0 24 24">
         <use href="#circle-left" className="msp-shape-empty" />
         <use href="#circle-right" className="msp-shape-filled" />
     </g>
-</svg>;
+</svg>;
+
+// const _molecule = <svg width="18px" height="18px" viewBox="0 0 299.463 299.463">
+//     <g>
+//         <g>
+//             <path d="M256.851,173.832v-48.201c22.916-4.918,34.151-30.668,22.556-50.771c-11.547-20.004-39.486-23.251-55.242-5.844
+// 			l-41.746-24.106C189.618,22.603,172.861,0,149.734,0c-23.132,0-39.881,22.609-32.685,44.911L75.305,69.016
+// 			C59.522,51.586,31.597,54.88,20.061,74.863c-11.63,20.163-0.298,45.862,22.557,50.769v48.2
+// 			c-22.821,4.898-34.195,30.591-22.556,50.771c11.529,19.972,39.454,23.285,55.242,5.845l41.746,24.106
+// 			c-7.199,22.308,9.559,44.911,32.685,44.911c23.132,0,39.88-22.609,32.685-44.911l41.745-24.106
+// 			c15.817,17.469,43.73,14.099,55.242-5.844c0,0,0-0.001,0.001-0.002c4.587-7.953,5.805-17.213,3.431-26.076
+// 			C279.392,185.657,269.129,176.461,256.851,173.832z M249.62,72.088c20.568,0,27.428,27.191,10.008,37.239
+// 			c-0.003,0.002-0.006,0.003-0.009,0.005c-10.04,5.81-22.85,1.762-27.877-8.475C225.206,87.548,234.938,72.088,249.62,72.088z
+// 			 M149.734,14.4c11.005,0,19.958,8.954,19.958,19.959c0,11.127-9.077,19.958-19.958,19.958c-10.95,0-19.958-8.9-19.958-19.958
+// 			C129.776,23.354,138.729,14.4,149.734,14.4z M39.84,109.328c-17.451-10.067-10.534-37.24,10.01-37.24
+// 			c15.311,0,24.922,16.653,17.251,29.942C61.681,111.397,49.517,114.925,39.84,109.328z M59.802,224.702
+// 			c-9.535,5.503-21.768,2.229-27.268-7.298c-7.639-13.242,1.887-29.945,17.236-29.945c0.013,0,0.027,0,0.04,0
+// 			C70.07,187.48,77.49,214.469,59.802,224.702z M149.734,285.062c-11.005,0-19.958-8.954-19.958-19.958
+// 			c0-11.127,9.077-19.958,19.958-19.958c10.954,0,19.958,8.903,19.958,19.958C169.693,276.109,160.74,285.062,149.734,285.062z
+// 			 M216.953,217.982l-41.727,24.095c-13.778-15.22-37.459-14.94-50.983,0l-41.728-24.096c6.196-19.289-5.541-39.835-25.498-44.149
+// 			V125.63c19.752-4.268,31.762-24.65,25.498-44.149l41.727-24.095c13.629,15.055,37.32,15.093,50.983,0l41.728,24.096
+// 			c-6.196,19.29,5.534,39.835,25.498,44.149v48.202C222.61,178.123,210.721,198.581,216.953,217.982z M266.935,217.404
+// 			c-5.501,9.528-17.732,12.802-27.261,7.302c-17.682-10.23-10.301-37.247,10.032-37.247
+// 			C264.984,187.459,274.602,204.112,266.935,217.404z"/>
+//         </g>
+//     </g>
+// </svg>;
+
+// const _ruler = <svg viewBox="0 0 508.073 508.073" width="18px" height="18px">
+//     <g>
+//         <g>
+//             <path d="M470.459,378.925c-0.7-2.1-1.9-4-3.4-5.5l-113.9-113.9l149.8-149.8c10-10,2.6-17.3,0-19.9l-85.7-85.7
+// 			c-5.5-5.5-14.4-5.5-19.9,0l-149.8,149.8l-134.7-134.7c-25.5-25.5-67.8-25.6-93.4,0c-25.8,25.8-25.8,67.7,0,93.5l134.6,134.7
+// 			l-149.9,149.9c-5.5,5.5-5.5,14.4,0,19.9l85.6,85.7c2.6,2.6,10,10,19.9,0l150-149.9l113.9,113.9c1.5,1.5,3.4,2.7,5.5,3.4
+// 			l110.4,36.9c6,2,10.7,0.3,14.4-3.4c3.8-3.8,5.1-9.4,3.4-14.4L470.459,378.925z M276.159,165.225l29.9,29.9
+// 			c5.5,5.5,14.4,5.5,19.9,0c5-5,5.5-14.4,0-19.9l-29.9-29.9l23.7-23.7l13,13c5.5,5.5,14.4,5.5,19.9,0c5.2-5.2,6.2-13.7,0-19.9
+// 			l-13-13l23.7-23.7l29.4,29.4c5.5,5.5,14.4,5.5,19.9,0c5.6-5.6,5.5-14.4,0-19.9l-29.4-29.5l24-24l65.8,65.7l-139.8,139.9
+// 			l-65.8-65.8L276.159,165.225z M39.359,92.825c-14.8-14.8-14.8-38.8,0-53.6c14.1-14.1,38.8-14.7,53.6,0l15.5,15.5l-53.6,53.6
+// 			L39.359,92.825z M99.759,473.025l-65.7-65.7l24-24l13.2,13.2c5.5,5.5,14.4,5.6,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-13.1-13.3
+// 			l23.7-23.7l29.6,29.6c6.2,6.2,14.7,5.2,19.9,0c5.5-5.5,5.5-14.4,0-19.9l-29.6-29.6l23.7-23.7l13.2,13.2c5.5,5.5,14.9,5,19.9,0
+// 			c5.5-5.5,5.5-14.4,0-19.9l-13.2-13.2l8.8-8.8l65.8,65.7L99.759,473.025z M74.759,128.225l53.6-53.6l308.7,308.7l-53.6,53.6
+// 			L74.759,128.225z M409.659,450.725l41.3-41.3l20.7,61.9L409.659,450.725z"/>
+//         </g>
+//     </g>
+// </svg>;

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

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { AccountTree, DeleteOutlined, HelpOutline, Home, Save, Tune } from '@material-ui/icons';
+import { AccountTreeOutlined, DeleteOutlined, HelpOutline, HomeOutlined, SaveOutlined, Tune } from '@material-ui/icons';
 import * as React from 'react';
 import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
 import { PluginCommands } from '../mol-plugin/commands';
@@ -52,12 +52,12 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
     tabs: { [K in LeftPanelTabName]: JSX.Element } = {
         'none': <></>,
         'root': <>
-            <SectionHeader icon={Home} title='Home' />
+            <SectionHeader icon={HomeOutlined} title='Home' />
             <StateObjectActions state={this.plugin.state.data} nodeRef={StateTransform.RootRef} hideHeader={true} initiallyCollapsed={true} alwaysExpandFirst={true} />
             {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots listOnly /> }
         </>,
         'data': <>
-            <SectionHeader icon={AccountTree} title={<><RemoveAllButton /> State Tree</>} />
+            <SectionHeader icon={AccountTreeOutlined} title={<><RemoveAllButton /> State Tree</>} />
             <StateTree state={this.plugin.state.data} />
         </>,
         'states': <StateSnapshots />,
@@ -74,13 +74,11 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
     render() {
         const tab = this.state.tab;
 
-        // TODO: show "changed dot" next to the 'data' tab icon indicating the state has changed.
         return <div className='msp-left-panel-controls'>
             <div className='msp-left-panel-controls-buttons'>
-                <IconButton svg={Home} toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
-                {/* <IconButton icon='flow-tree' toggleState={tab === 'data'} onClick={() => this.set('data')} title='State Tree' /> */}
+                <IconButton svg={HomeOutlined} toggleState={tab === 'root'} transparent onClick={() => this.set('root')} title='Home' />
                 <DataIcon set={this.set} />
-                <IconButton svg={Save} toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
+                <IconButton svg={SaveOutlined} toggleState={tab === 'states'} transparent onClick={() => this.set('states')} title='Plugin State' />
                 <IconButton svg={HelpOutline} toggleState={tab === 'help'} transparent onClick={() => this.set('help')} title='Help' />
                 <div className='msp-left-panel-controls-buttons-bottom'>
                     <IconButton svg={Tune} toggleState={tab === 'settings'} transparent onClick={() => this.set('settings')} title='Settings' />
@@ -113,7 +111,7 @@ class DataIcon extends PluginUIComponent<{ set: (tab: LeftPanelTabName) => void
 
     render() {
         return <IconButton
-            svg={AccountTree} toggleState={this.tab === 'data'} transparent onClick={() => this.props.set('data')} title='State Tree'
+            svg={AccountTreeOutlined} toggleState={this.tab === 'data'} transparent 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} />;
     }
 }
@@ -146,7 +144,7 @@ class FullSettings extends PluginUIComponent {
     }
 }
 
-export class RemoveAllButton extends PluginUIComponent<{ }> {
+class RemoveAllButton extends PluginUIComponent<{ }> {
     componentDidMount() {
         this.subscribe(this.plugin.events.state.cell.created, e => {
             if (e.cell.transform.parent === StateTransform.RootRef) this.forceUpdate();

src/mol-plugin-ui/plugin.tsx

@@ -185,76 +185,4 @@ export class Log extends PluginUIComponent<{}, { entries: List<LogEntry> }> {
             <ul className='msp-list-unstyled'>{entries}</ul>
         </div>;
     }
-}
-
-// export class CurrentObject extends PluginUIComponent {
-//     get current() {
-//         return this.plugin.state.behavior.currentObject.value;
-//     }
-
-//     componentDidMount() {
-//         this.subscribe(this.plugin.state.behavior.currentObject, o => {
-//             this.forceUpdate();
-//         });
-
-//         this.subscribe(this.plugin.behaviors.layout.leftPanelTabName, o => {
-//             this.forceUpdate();
-//         });
-
-//         this.subscribe(this.plugin.events.state.object.updated, ({ ref, state }) => {
-//             const current = this.current;
-//             if (current.ref !== ref || current.state !== state) return;
-//             this.forceUpdate();
-//         });
-//     }
-
-//     render() {
-//         const tabName = this.plugin.behaviors.layout.leftPanelTabName.value;
-//         if (tabName !== 'data' && tabName !== 'settings') return null;
-
-//         const current = this.current;
-//         const ref = current.ref;
-//         if (ref === StateTransform.RootRef) return null;
-
-//         const cell = current.state.cells.get(ref)!;
-//         const transform = cell.transform;
-
-//         let showActions = true;
-//         if (ref === StateTransform.RootRef) {
-//             const children = current.state.tree.children.get(ref);
-//             showActions = children.size !== 0;
-//         }
-
-//         if (!showActions) return null;
-
-//         const actions = cell.status === 'ok' && <StateObjectActionSelect state={current.state} nodeRef={ref} plugin={this.plugin} />
-
-//         if (cell.status === 'error') {
-//             return <>
-//                 <SectionHeader icon='flow-cascade' title={`${cell.obj?.label || transform.transformer.definition.display.name}`} desc={transform.transformer.definition.display.name} />
-//                 <UpdateTransformControl state={current.state} transform={transform} customHeader='none' />
-//                 {actions}
-//             </>;
-//         }
-
-//         if (cell.status !== 'ok') return null;
-
-//         const decoratorChain = StateTreeSpine.getDecoratorChain(this.current.state, this.current.ref);
-//         const parent = decoratorChain[decoratorChain.length - 1];
-
-//         let decorators: JSX.Element[] | undefined = decoratorChain.length > 1 ? [] : void 0;
-//         for (let i = decoratorChain.length - 2; i >= 0; i--) {
-//             const d = decoratorChain[i];
-//             decorators!.push(<ExpandGroup key={`${d.transform.transformer.id}-${i}`} header={d.transform.transformer.definition.display.name}>
-//                 <UpdateTransformControl state={current.state} transform={d.transform} customHeader='none' />
-//             </ExpandGroup>);
-//         }
-
-//         return <>
-//             <SectionHeader icon='flow-cascade' title={`${parent.obj?.label || parent.transform.transformer.definition.display.name}`} desc={parent.transform.transformer.definition.display.name} />
-//             <UpdateTransformControl state={current.state} transform={parent.transform} customHeader='none' />
-//             {decorators && <div className='msp-controls-section'>{decorators}</div>}
-//             {actions}
-//         </>;
-//     }
-// }
+}

src/mol-plugin-ui/skin/base/components/controls-base.scss

@@ -333,5 +333,5 @@ select.msp-form-control:-moz-focusring {
 }
 
 .msp-icon-inline {
-    margin-right: 6px;
+    margin-right: 8px;
 }

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

@@ -228,7 +228,7 @@
     font-weight: bold;
     background: $default-background;
     overflow: hidden;
-    border-bottom: 1px solid $color-accent-orange; // TODO separate color
+    // border-bottom: 1px solid $color-accent-orange;
     cursor: default;
 
     > .msp-icon {

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

@@ -7,20 +7,8 @@
 import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
-import { Icon } from '../controls/icons';
 import { Button } from '../controls/common';
-import { Code, PlayArrow } from '@material-ui/icons';
-
-export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
-    render() {
-        const anim = this.plugin.state.animation;
-        if (anim.isEmpty) return null;
-        return <div className='msp-controls-section'>
-            <div className='msp-section-header'><Icon svg={Code} /> Animations</div>
-            <AnimationControls />
-        </div>;
-    }
-}
+import { PlayArrow } from '@material-ui/icons';
 
 export class AnimationControls extends PluginUIComponent<{ onStart?: () => void }> {
     componentDidMount() {

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

@@ -189,7 +189,6 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
     }
 
     renderApply() {
-        // const showBack = this.isUpdate() && !(this.state.busy || this.state.isInitial);
         const canApply = this.canApply();
 
         if (this.props.autoHideApply && (!canApply || this.canAutoApply(this.state.params))) return null;

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

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { ArrowDownward, ArrowUpward, CloudUpload, DeleteOutlined, Save, SwapHoriz } from '@material-ui/icons';
+import { ArrowDownward, ArrowUpward, CloudUpload, DeleteOutlined, SwapHoriz, SaveOutlined } from '@material-ui/icons';
 import { OrderedMap } from 'immutable';
 import * as React from 'react';
 import { PluginCommands } from '../../mol-plugin/commands';
@@ -31,7 +31,7 @@ export class StateSnapshots extends PluginUIComponent<{ }> {
 
     render() {
         return <div>
-            <SectionHeader icon={Save} title='Plugin State' />
+            <SectionHeader icon={SaveOutlined} title='Plugin State' />
             <LocalStateSnapshots />
             <LocalStateSnapshotList />
             {this.plugin.spec.components?.remoteState !== 'none' && <RemoteStateSnapshots />}

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

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { ArrowDropDown, ArrowRight, Close, DeleteOutlined, Home, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
+import { ArrowDropDown, ArrowRight, Close, DeleteOutlined, HomeOutlined, VisibilityOffOutlined, VisibilityOutlined } from '@material-ui/icons';
 import * as React from 'react';
 import { debounceTime, filter } from 'rxjs/operators';
 import { PluginStateObject } from '../../mol-plugin-state/objects';
@@ -44,7 +44,7 @@ export class StateTree extends PluginUIComponent<{ state: State }, { showActions
         if (this.state.showActions) {
             return <div style={{ margin: '10px', cursor: 'default' }}>
                 <p>Nothing to see here.</p>
-                <p>Structures can be loaded from the <Icon svg={Home} /> tab.</p>
+                <p>Structures can be loaded from the <Icon svg={HomeOutlined} /> tab.</p>
             </div>;
         }
         return <StateTreeNode cell={this.props.state.cells.get(ref)!} depth={0} />;

src/mol-plugin-ui/task.tsx

@@ -33,7 +33,6 @@ export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: Or
 }
 
 class ProgressEntry extends PluginUIComponent<{ event: TaskManager.ProgressEvent }> {
-
     abort = () => {
         this.plugin.requestTaskAbort(this.props.event.progress, 'User Request');
     }