ability to hide controls by default in Viewer app

src/apps/viewer/index.ts

@@ -6,14 +6,39 @@
 
 import { createPlugin, DefaultPluginSpec } from 'mol-plugin';
 import './index.html'
+import { PluginContext } from 'mol-plugin/context';
+import { PluginCommands } from 'mol-plugin/command';
 require('mol-plugin/skin/light.scss')
 
-createPlugin(document.getElementById('app')!, {
-    ...DefaultPluginSpec,
-    layout: {
-        initial: {
-            isExpanded: true,
-            showControls: true
+function getParam(name: string, regex: string): string {
+    let r = new RegExp(`${name}=(${regex})[&]?`, 'i');
+    return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+}
+
+const hideControls = getParam('hide-controls', `[^&]+`) === '1';
+
+function init() {
+    const plugin = createPlugin(document.getElementById('app')!, {
+        ...DefaultPluginSpec,
+        layout: {
+            initial: {
+                isExpanded: true,
+                showControls: !hideControls
+            }
         }
+    });
+    trySetSnapshot(plugin);
+}
+
+async function trySetSnapshot(ctx: PluginContext) {
+    try {
+        const snapshotUrl = getParam('snapshot-url', `[^&]+`);
+        if (!snapshotUrl) return;
+        await PluginCommands.State.Snapshots.Fetch.dispatch(ctx, { url: snapshotUrl })
+    } catch (e) {
+        ctx.log.error('Failed to load snapshot.');
+        console.warn('Failed to load snapshot', e);
     }
-});
+}
+
+init();

src/mol-plugin/index.ts

@@ -9,7 +9,6 @@ import { PluginContext } from './context';
 import { Plugin } from './ui/plugin'
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { PluginCommands } from './command';
 import { PluginSpec } from './spec';
 import { StateTransforms } from './state/transforms';
 import { PluginBehaviors } from './behavior';
@@ -18,11 +17,6 @@ import { StateActions } from './state/actions';
 import { InitVolumeStreaming } from './behavior/dynamic/volume-streaming/transformers';
 import { StructureRepresentationInteraction } from './behavior/dynamic/selection/structure-representation-interaction';
 
-function getParam(name: string, regex: string): string {
-    let r = new RegExp(`${name}=(${regex})[&]?`, 'i');
-    return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
-}
-
 export const DefaultPluginSpec: PluginSpec = {
     actions: [
         PluginSpec.Action(StateActions.Structure.DownloadStructure),
@@ -71,19 +65,5 @@ export const DefaultPluginSpec: PluginSpec = {
 export function createPlugin(target: HTMLElement, spec?: PluginSpec): PluginContext {
     const ctx = new PluginContext(spec || DefaultPluginSpec);
     ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
-
-    trySetSnapshot(ctx);
-
     return ctx;
-}
-
-async function trySetSnapshot(ctx: PluginContext) {
-    try {
-        const snapshotUrl = getParam('snapshot-url', `[^&]+`);
-        if (!snapshotUrl) return;
-        await PluginCommands.State.Snapshots.Fetch.dispatch(ctx, { url: snapshotUrl })
-    } catch (e) {
-        ctx.log.error('Failed to load snapshot.');
-        console.warn('Failed to load snapshot', e);
-    }
 }

src/mol-plugin/layout.ts

@@ -58,7 +58,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
     private rootState: RootState | undefined = void 0;
     private expandedViewport: HTMLMetaElement;
 
-    setProps(props: PluginLayoutStateProps) {
+    setProps(props: Partial<PluginLayoutStateProps>) {
         this.updateState(props);
     }
 

src/mol-plugin/spec.ts

@@ -17,7 +17,7 @@ interface PluginSpec {
     animations?: PluginStateAnimation[],
     customParamEditors?: [StateAction | StateTransformer, StateTransformParameters.Class][],
     layout?: {
-        initial?: PluginLayoutStateProps,
+        initial?: Partial<PluginLayoutStateProps>,
         controls?: {
             left?: React.ComponentClass | 'none',
             right?: React.ComponentClass | 'none',