fix typos

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

@@ -68,6 +68,6 @@
     display: block;
 }
 
-.msp-contols-section {
+.msp-controls-section {
     margin-bottom: $control-spacing;
 }
\ No newline at end of file

src/mol-plugin/ui/plugin.tsx

@@ -19,7 +19,7 @@ import { StateTree } from './state/tree';
 import { BackgroundTaskProgress } from './task';
 import { Viewport, ViewportControls } from './viewport';
 import { StateTransform } from '../../mol-state';
-import { UpdateTransformContol } from './state/update-transform';
+import { UpdateTransformControl } from './state/update-transform';
 
 export class Plugin extends React.Component<{ plugin: PluginContext }, {}> {
 
@@ -227,7 +227,7 @@ export class CurrentObject extends PluginUIComponent {
         if (!showActions) return null;
 
         return <>
-            {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformContol state={current.state} transform={transform} /> }
+            {(cell.status === 'ok' || cell.status === 'error') && <UpdateTransformControl state={current.state} transform={transform} /> }
             {cell.status === 'ok' && <StateObjectActions state={current.state} nodeRef={ref} initiallyColapsed />}
         </>;
     }

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

@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 import { PluginUIComponent } from '../base';
-import { ApplyActionContol } from './apply-action';
+import { ApplyActionControl } from './apply-action';
 import { State } from '../../../mol-state';
 import { Icon } from '../controls/common';
 
@@ -38,7 +38,7 @@ export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRe
 
         return <div className='msp-state-actions'>
             {!this.props.hideHeader && <div className='msp-section-header'><Icon name='code' /> {`Actions (${display})`}</div> }
-            {actions.map((act, i) => <ApplyActionContol plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} initiallyCollapsed={this.props.initiallyColapsed} />)}
+            {actions.map((act, i) => <ApplyActionControl plugin={this.plugin} key={`${act.id}`} state={state} action={act} nodeRef={ref} initiallyCollapsed={this.props.initiallyColapsed} />)}
         </div>;
     }
 }
\ No newline at end of file

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

@@ -13,7 +13,7 @@ export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
     render() {
         const anim = this.plugin.state.animation;
         if (anim.isEmpty) return null;
-        return <div className='msp-contols-section'>
+        return <div className='msp-controls-section'>
             <div className='msp-section-header'><Icon name='code' /> Animations</div>
             <AnimationControls />
         </div>

src/mol-plugin/ui/state/apply-action.tsx

@@ -8,12 +8,12 @@ import { PluginCommands } from '../../../mol-plugin/command';
 import { PluginContext } from '../../../mol-plugin/context';
 import { State, StateTransform, StateAction } from '../../../mol-state';
 import { memoizeLatest } from '../../../mol-util/memoize';
-import { StateTransformParameters, TransformContolBase } from './common';
+import { StateTransformParameters, TransformControlBase } from './common';
 import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 
-export { ApplyActionContol };
+export { ApplyActionControl };
 
-namespace ApplyActionContol {
+namespace ApplyActionControl {
     export interface Props {
         plugin: PluginContext,
         nodeRef: StateTransform.Ref,
@@ -32,7 +32,7 @@ namespace ApplyActionContol {
     }
 }
 
-class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, ApplyActionContol.ComponentState> {
+class ApplyActionControl extends TransformControlBase<ApplyActionControl.Props, ApplyActionControl.ComponentState> {
     applyAction() {
         return PluginCommands.State.ApplyAction.dispatch(this.plugin, {
             state: this.props.state,
@@ -53,7 +53,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App
 
     state = { ref: this.props.nodeRef, version: this.props.state.transforms.get(this.props.nodeRef).version, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
 
-    static getDerivedStateFromProps(props: ApplyActionContol.Props, state: ApplyActionContol.ComponentState) {
+    static getDerivedStateFromProps(props: ApplyActionControl.Props, state: ApplyActionControl.ComponentState) {
         if (props.nodeRef === state.ref) return null;
         const version = props.state.transforms.get(props.nodeRef).version;
         if (version === state.version) return null;
@@ -63,7 +63,7 @@ class ApplyActionContol extends TransformContolBase<ApplyActionContol.Props, App
             ? PD.getDefaultValues(props.action.definition.params(source, props.plugin))
             : { };
 
-        const newState: Partial<ApplyActionContol.ComponentState> = {
+        const newState: Partial<ApplyActionControl.ComponentState> = {
             ref: props.nodeRef,
             version,
             params,

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

@@ -13,7 +13,7 @@ import { ParamDefinition as PD } from '../../../mol-util/param-definition';
 import { Subject } from 'rxjs';
 import { Icon } from '../controls/common';
 
-export { StateTransformParameters, TransformContolBase };
+export { StateTransformParameters, TransformControlBase };
 
 class StateTransformParameters extends PurePluginUIComponent<StateTransformParameters.Props> {
     validate(params: any) {
@@ -89,7 +89,7 @@ namespace StateTransformParameters {
     }
 }
 
-namespace TransformContolBase {
+namespace TransformControlBase {
     export interface ComponentState {
         params: any,
         error?: string,
@@ -99,7 +99,7 @@ namespace TransformContolBase {
     }
 }
 
-abstract class TransformContolBase<P, S extends TransformContolBase.ComponentState> extends PurePluginUIComponent<P, S> {
+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'];

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

@@ -6,14 +6,14 @@
 
 import { State, StateTransform, StateTransformer } from '../../../mol-state';
 import { memoizeLatest } from '../../../mol-util/memoize';
-import { StateTransformParameters, TransformContolBase } from './common';
+import { StateTransformParameters, TransformControlBase } from './common';
 import { Observable } from 'rxjs';
 import * as React from 'react';
 import { PluginUIComponent } from '../base';
 
-export { UpdateTransformContol, TransformUpdaterControl };
+export { UpdateTransformControl, TransformUpdaterControl };
 
-namespace UpdateTransformContol {
+namespace UpdateTransformControl {
     export interface Props {
         transform: StateTransform,
         state: State,
@@ -22,12 +22,12 @@ namespace UpdateTransformContol {
         customHeader?: StateTransformer.Definition['display']
     }
 
-    export interface ComponentState extends TransformContolBase.ComponentState {
+    export interface ComponentState extends TransformControlBase.ComponentState {
         transform: StateTransform
     }
 }
 
-class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Props, UpdateTransformContol.ComponentState> {
+class UpdateTransformControl extends TransformControlBase<UpdateTransformControl.Props, UpdateTransformControl.ComponentState> {
     applyAction() { return this.plugin.updateTransform(this.props.state, this.props.transform.ref, this.state.params); }
     getInfo() { return this._getInfo(this.props.transform); }
     getTransformerId() { return this.props.transform.transformer.id; }
@@ -70,12 +70,12 @@ class UpdateTransformContol extends TransformContolBase<UpdateTransformContol.Pr
 
     private _getInfo = memoizeLatest((t: StateTransform) => StateTransformParameters.infoFromTransform(this.plugin, this.props.state, t));
 
-    state: UpdateTransformContol.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
+    state: UpdateTransformControl.ComponentState = { transform: this.props.transform, error: void 0, isInitial: true, params: this.getInfo().initialValues, busy: false, isCollapsed: this.props.initiallyCollapsed };
 
-    static getDerivedStateFromProps(props: UpdateTransformContol.Props, state: UpdateTransformContol.ComponentState) {
+    static getDerivedStateFromProps(props: UpdateTransformControl.Props, state: UpdateTransformControl.ComponentState) {
         if (props.transform === state.transform) return null;
         const cell = props.state.cells.get(props.transform.ref)!;
-        const newState: Partial<UpdateTransformContol.ComponentState> = {
+        const newState: Partial<UpdateTransformControl.ComponentState> = {
             transform: props.transform,
             params: (cell.params && cell.params.values) || { },
             isInitial: true,
@@ -101,6 +101,6 @@ class TransformUpdaterControl extends PluginUIComponent<{ nodeRef: string, initi
         if (!cell || (cell.status !== 'ok' && cell.status !== 'error')) return null;
 
         const transform = cell.transform;
-        return <UpdateTransformContol state={state} transform={transform} initiallyCollapsed={this.props.initiallyCollapsed} customHeader={this.props.header} />;
+        return <UpdateTransformControl state={state} transform={transform} initiallyCollapsed={this.props.initiallyCollapsed} customHeader={this.props.header} />;
     }
 }
\ No newline at end of file