mol-plugin: fixes

package.json

@@ -69,7 +69,7 @@
     "cpx": "^1.5.0",
     "css-loader": "^3.2.0",
     "extra-watch-webpack-plugin": "^1.0.3",
-    "file-loader": "^4.2.0",
+    "file-loader": "^4.3.0",
     "fs-extra": "^8.1.0",
     "graphql-code-generator": "^0.18.2",
     "graphql-codegen-time": "^0.18.2",
@@ -83,8 +83,8 @@
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^8.0.0",
     "simple-git": "^1.126.0",
-    "style-loader": "^1.0.0",
-    "ts-jest": "^24.1.0",
+    "style-loader": "^1.0.1",
+    "ts-jest": "^24.2.0",
     "tslint": "^5.20.1",
     "typescript": "^3.7.2",
     "webpack": "^4.41.2",
@@ -97,8 +97,8 @@
     "@types/express": "^4.17.2",
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.9",
-    "@types/node-fetch": "^2.5.3",
-    "@types/react": "^16.9.11",
+    "@types/node-fetch": "^2.5.4",
+    "@types/react": "^16.9.13",
     "@types/react-dom": "^16.9.4",
     "@types/swagger-ui-dist": "3.0.3",
     "argparse": "^1.0.10",

src/mol-plugin/state/actions/structure.ts

@@ -156,12 +156,10 @@ const DownloadStructure = StateAction.build({
 })(({ params, state }, plugin: PluginContext) => Task.create('Download Structure', async ctx => {
     plugin.behaviors.layout.leftPanelTabName.next('data');
 
-    const b = state.build();
     const src = params.source;
     let downloadParams: StateTransformer.Params<Download>[];
     let supportProps = false, asTrajectory = false, format: StructureFormat = 'cif';
 
-
     switch (src.name) {
         case 'url':
             downloadParams = [{ url: src.params.url, isBinary: src.params.isBinary }];
@@ -207,7 +205,7 @@ const DownloadStructure = StateAction.build({
     const createRepr = !params.source.params.structure.noRepresentation;
 
     if (downloadParams.length > 0 && asTrajectory) {
-        const traj = createSingleTrajectoryModel(downloadParams, b);
+        const traj = createSingleTrajectoryModel(downloadParams, state.build());
         const struct = createStructure(traj, supportProps, src.params.structure.type);
         await state.updateTree(struct, { revertIfAborted: true }).runInContext(ctx);
         if (createRepr) {
@@ -215,7 +213,7 @@ const DownloadStructure = StateAction.build({
         }
     } else {
         for (const download of downloadParams) {
-            const data = b.toRoot().apply(StateTransforms.Data.Download, download, { state: { isGhost: true } });
+            const data = state.build().toRoot().apply(StateTransforms.Data.Download, download, { state: { isGhost: true } });
             const traj = createModelTree(data, format);
 
             const struct = createStructure(traj, supportProps, src.params.structure.type);

src/mol-plugin/state/representation/structure.ts

@@ -23,7 +23,7 @@ export class StructureRepresentationManager {
     private providers: StructureRepresentationProvider[] = [];
     private providerMap: Map<string, StructureRepresentationProvider> = new Map();
 
-    readonly defaultProvider = PresetStructureReprentations.default;
+    readonly defaultProvider = PresetStructureReprentations.auto;
 
     hasProvider(s: Structure) {
         for (const p of this.providers) {

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

@@ -301,7 +301,7 @@ export function Options(options: [string, string][]) {
     return options.map(([value, label]) => <option key={value} value={value}>{label}</option>)
 }
 
-export function SectionHeader(props: { icon?: string, title: string, desc?: string}) {
+export function SectionHeader(props: { icon?: string, title: string | JSX.Element, desc?: string}) {
     return <div className='msp-section-header'>
         {props.icon && <Icon name={props.icon} />}
         {props.title} <small>{props.desc}</small>

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

@@ -58,7 +58,7 @@ export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTab
             <RemoteStateSnapshots listOnly />
         </>,
         'data': <>
-        <SectionHeader icon='flow-tree' title='State Tree' />
+            <SectionHeader icon='flow-tree' title={<><RemoveAllButton /> State Tree</>} />
             <StateTree state={this.plugin.state.dataState} />
         </>,
         'states': <StateSnapshots />,
@@ -145,3 +145,26 @@ class FullSettings extends PluginUIComponent {
         </>
     }
 }
+
+export class RemoveAllButton extends PluginUIComponent<{ }> {
+    componentDidMount() {
+        this.subscribe(this.plugin.events.state.cell.created, e => {
+            if (e.cell.transform.parent === StateTransform.RootRef) this.forceUpdate();
+        });
+
+        this.subscribe(this.plugin.events.state.cell.removed, e => {
+            if (e.parent === StateTransform.RootRef) this.forceUpdate();
+        });
+    }
+
+    remove = (e: React.MouseEvent<HTMLElement>) => {
+        e.preventDefault();
+        PluginCommands.State.RemoveObject.dispatch(this.plugin, { state: this.plugin.state.dataState, ref: StateTransform.RootRef });
+    }
+
+    render() {
+        const count = this.plugin.state.dataState.tree.children.get(StateTransform.RootRef).size;
+        if (count < 2) return null;
+        return <IconButton icon='remove' onClick={this.remove} title={'Remove All'} style={{ display: 'inline-block' }} />;
+    }
+}