From ef6792585836f06b8da29210f68ed442844a456f Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Fri, 6 Dec 2019 23:25:26 +0100
Subject: [PATCH] added mol-plugin-ui

---
 README.md                                      |  1 +
 src/apps/basic-wrapper/controls.tsx            |  4 ++--
 .../proteopedia-wrapper/ui/controls.tsx        | 10 +++++-----
 src/{mol-plugin/ui => mol-plugin-ui}/base.tsx  |  2 +-
 .../ui => mol-plugin-ui}/camera.tsx            |  4 ++--
 .../ui => mol-plugin-ui}/controls.tsx          | 14 +++++++-------
 .../ui => mol-plugin-ui}/controls/color.tsx    |  8 ++++----
 .../ui => mol-plugin-ui}/controls/common.tsx   |  2 +-
 .../ui => mol-plugin-ui}/controls/legend.tsx   |  4 ++--
 .../line-graph/line-graph-component.tsx        |  2 +-
 .../controls/line-graph/point-component.tsx    |  2 +-
 .../controls/parameters.tsx                    | 14 +++++++-------
 .../ui => mol-plugin-ui}/controls/slider.tsx   |  2 +-
 .../ui => mol-plugin-ui}/custom/volume.tsx     | 12 ++++++------
 src/{mol-plugin/ui => mol-plugin-ui}/image.tsx |  4 ++--
 .../ui => mol-plugin-ui}/left-panel.tsx        | 10 +++++-----
 .../ui => mol-plugin-ui}/plugin.tsx            |  8 ++++----
 .../ui => mol-plugin-ui}/sequence.tsx          | 14 +++++++-------
 .../ui => mol-plugin-ui}/sequence/chain.ts     | 10 +++++-----
 .../ui => mol-plugin-ui}/sequence/element.ts   | 10 +++++-----
 .../ui => mol-plugin-ui}/sequence/hetero.ts    | 10 +++++-----
 .../ui => mol-plugin-ui}/sequence/polymer.ts   | 14 +++++++-------
 .../ui => mol-plugin-ui}/sequence/sequence.tsx | 12 ++++++------
 .../ui => mol-plugin-ui}/sequence/wrapper.ts   | 10 +++++-----
 .../ui => mol-plugin-ui}/state/actions.tsx     |  4 ++--
 .../ui => mol-plugin-ui}/state/animation.tsx   |  0
 .../state/apply-action.tsx                     | 10 +++++-----
 .../ui => mol-plugin-ui}/state/common.tsx      |  6 +++---
 .../ui => mol-plugin-ui}/state/snapshots.tsx   | 12 ++++++------
 .../ui => mol-plugin-ui}/state/tree.tsx        |  6 +++---
 .../state/update-transform.tsx                 |  4 ++--
 .../structure/representation.tsx               | 18 +++++++++---------
 .../structure/selection.tsx                    | 12 ++++++------
 src/{mol-plugin/ui => mol-plugin-ui}/task.tsx  |  4 ++--
 src/{mol-plugin/ui => mol-plugin-ui}/toast.tsx |  2 +-
 .../ui => mol-plugin-ui}/viewport.tsx          |  6 +++---
 .../ui => mol-plugin-ui}/viewport/help.tsx     |  8 ++++----
 .../viewport/simple-settings.tsx               | 10 +++++-----
 src/mol-plugin/context.ts                      |  2 +-
 src/mol-plugin/index.ts                        |  4 ++--
 src/mol-plugin/spec.ts                         |  2 +-
 41 files changed, 147 insertions(+), 146 deletions(-)
 rename src/{mol-plugin/ui => mol-plugin-ui}/base.tsx (98%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/camera.tsx (95%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls.tsx (95%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/color.tsx (94%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/common.tsx (99%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/legend.tsx (94%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/line-graph/line-graph-component.tsx (99%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/line-graph/point-component.tsx (95%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/parameters.tsx (98%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/controls/slider.tsx (99%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/custom/volume.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/image.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/left-panel.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/plugin.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/chain.ts (91%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/element.ts (89%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/hetero.ts (94%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/polymer.ts (93%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/sequence.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/sequence/wrapper.ts (74%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/actions.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/animation.tsx (100%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/apply-action.tsx (89%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/common.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/snapshots.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/tree.tsx (98%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/state/update-transform.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/structure/representation.tsx (91%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/structure/selection.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/task.tsx (95%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/toast.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/viewport.tsx (97%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/viewport/help.tsx (96%)
 rename src/{mol-plugin/ui => mol-plugin-ui}/viewport/simple-settings.tsx (95%)

diff --git a/README.md b/README.md
index f96cf0f4d..dbd22ed6e 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ The core of Mol* currently consists of these modules (see under `src/`):
 - `mol-state` State representation tree with state saving and automatic updates.
 - `mol-app` Components for builduing UIs.
 - `mol-plugin` Allow to define modular Mol* plugin instances utilizing `mol-state` and `mol-canvas3d`.
+- `mol-plugin-ui` React based user interface for the Mol* plugin. Some components of the UI are usable outside the main plugin and can be integrated to 3rd party solutions.
 - `mol-util` Useful things that do not fit elsewhere.
 
 Moreover, the project contains the imlementation of `servers`, including
diff --git a/src/apps/basic-wrapper/controls.tsx b/src/apps/basic-wrapper/controls.tsx
index 6fdcfdd1a..c45a76010 100644
--- a/src/apps/basic-wrapper/controls.tsx
+++ b/src/apps/basic-wrapper/controls.tsx
@@ -4,9 +4,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { PluginUIComponent } from '../../mol-plugin/ui/base';
+import { PluginUIComponent } from '../../mol-plugin-ui/base';
 import * as React from 'react';
-import { TransformUpdaterControl } from '../../mol-plugin/ui/state/update-transform';
+import { TransformUpdaterControl } from '../../mol-plugin-ui/state/update-transform';
 
 export class BasicWrapperControls extends PluginUIComponent {
 
diff --git a/src/examples/proteopedia-wrapper/ui/controls.tsx b/src/examples/proteopedia-wrapper/ui/controls.tsx
index df7938cc3..abe14b371 100644
--- a/src/examples/proteopedia-wrapper/ui/controls.tsx
+++ b/src/examples/proteopedia-wrapper/ui/controls.tsx
@@ -6,12 +6,12 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { PluginUIComponent } from '../../../mol-plugin/ui/base';
-import { CurrentObject, PluginContextContainer } from '../../../mol-plugin/ui/plugin';
-import { AnimationControls } from '../../../mol-plugin/ui/state/animation';
-import { CameraSnapshots } from '../../../mol-plugin/ui/camera';
+import { PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { CurrentObject, PluginContextContainer } from '../../../mol-plugin-ui/plugin';
+import { AnimationControls } from '../../../mol-plugin-ui/state/animation';
+import { CameraSnapshots } from '../../../mol-plugin-ui/camera';
 import { PluginContext } from '../../../mol-plugin/context';
-import { TransformUpdaterControl } from '../../../mol-plugin/ui/state/update-transform';
+import { TransformUpdaterControl } from '../../../mol-plugin-ui/state/update-transform';
 import { StateElements } from '../helpers';
 
 export class ControlsWrapper extends PluginUIComponent {
diff --git a/src/mol-plugin/ui/base.tsx b/src/mol-plugin-ui/base.tsx
similarity index 98%
rename from src/mol-plugin/ui/base.tsx
rename to src/mol-plugin-ui/base.tsx
index b62d1b1bb..d377417ad 100644
--- a/src/mol-plugin/ui/base.tsx
+++ b/src/mol-plugin-ui/base.tsx
@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import { Observable, Subscription } from 'rxjs';
-import { PluginContext } from '../context';
+import { PluginContext } from '../mol-plugin/context';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
diff --git a/src/mol-plugin/ui/camera.tsx b/src/mol-plugin-ui/camera.tsx
similarity index 95%
rename from src/mol-plugin/ui/camera.tsx
rename to src/mol-plugin-ui/camera.tsx
index f09ae177c..e1b9a0a85 100644
--- a/src/mol-plugin/ui/camera.tsx
+++ b/src/mol-plugin-ui/camera.tsx
@@ -4,10 +4,10 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { PluginCommands } from '../../mol-plugin/command';
+import { PluginCommands } from '../mol-plugin/command';
 import * as React from 'react';
 import { PluginUIComponent } from './base';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { ParameterControls } from './controls/parameters';
 import { Icon } from './controls/common';
 
diff --git a/src/mol-plugin/ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
similarity index 95%
rename from src/mol-plugin/ui/controls.tsx
rename to src/mol-plugin-ui/controls.tsx
index 01d83565c..147b9c8d2 100644
--- a/src/mol-plugin/ui/controls.tsx
+++ b/src/mol-plugin-ui/controls.tsx
@@ -6,15 +6,15 @@
  */
 
 import * as React from 'react';
-import { PluginCommands } from '../../mol-plugin/command';
-import { UpdateTrajectory } from '../../mol-plugin/state/actions/structure';
+import { PluginCommands } from '../mol-plugin/command';
+import { UpdateTrajectory } from '../mol-plugin/state/actions/structure';
 import { PluginUIComponent } from './base';
-import { LociLabelEntry } from '../../mol-plugin/util/loci-label-manager';
+import { LociLabelEntry } from '../mol-plugin/util/loci-label-manager';
 import { IconButton, Icon } from './controls/common';
-import { PluginStateObject } from '../../mol-plugin/state/objects';
-import { StateTransforms } from '../../mol-plugin/state/transforms';
-import { StateTransformer } from '../../mol-state';
-import { ModelFromTrajectory } from '../../mol-plugin/state/transforms/model';
+import { PluginStateObject } from '../mol-plugin/state/objects';
+import { StateTransforms } from '../mol-plugin/state/transforms';
+import { StateTransformer } from '../mol-state';
+import { ModelFromTrajectory } from '../mol-plugin/state/transforms/model';
 import { AnimationControls } from './state/animation';
 import { StructureRepresentationControls } from './structure/representation';
 import { StructureSelectionControls } from './structure/selection';
diff --git a/src/mol-plugin/ui/controls/color.tsx b/src/mol-plugin-ui/controls/color.tsx
similarity index 94%
rename from src/mol-plugin/ui/controls/color.tsx
rename to src/mol-plugin-ui/controls/color.tsx
index f3c3b894e..4cd1c7762 100644
--- a/src/mol-plugin/ui/controls/color.tsx
+++ b/src/mol-plugin-ui/controls/color.tsx
@@ -5,14 +5,14 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Color } from '../../../mol-util/color';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-import { camelCaseToWords, stringToWords } from '../../../mol-util/string';
+import { Color } from '../../mol-util/color';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { camelCaseToWords, stringToWords } from '../../mol-util/string';
 import * as React from 'react';
 import { _Props, _State } from '../base';
 import { ParamProps } from './parameters';
 import { TextInput } from './common';
-import { DefaultColorSwatch } from '../../../mol-util/color/swatches';
+import { DefaultColorSwatch } from '../../mol-util/color/swatches';
 
 export class CombinedColorControl extends React.PureComponent<ParamProps<PD.Color>, { isExpanded: boolean }> {
     state = { isExpanded: false }
diff --git a/src/mol-plugin/ui/controls/common.tsx b/src/mol-plugin-ui/controls/common.tsx
similarity index 99%
rename from src/mol-plugin/ui/controls/common.tsx
rename to src/mol-plugin-ui/controls/common.tsx
index 25dd284f7..c345eb5d8 100644
--- a/src/mol-plugin/ui/controls/common.tsx
+++ b/src/mol-plugin-ui/controls/common.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react';
-import { Color } from '../../../mol-util/color';
+import { Color } from '../../mol-util/color';
 import { PurePluginUIComponent } from '../base';
 
 export class ControlGroup extends React.Component<{
diff --git a/src/mol-plugin/ui/controls/legend.tsx b/src/mol-plugin-ui/controls/legend.tsx
similarity index 94%
rename from src/mol-plugin/ui/controls/legend.tsx
rename to src/mol-plugin-ui/controls/legend.tsx
index 93463cef9..1243de1a7 100644
--- a/src/mol-plugin/ui/controls/legend.tsx
+++ b/src/mol-plugin-ui/controls/legend.tsx
@@ -4,10 +4,10 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Color } from '../../../mol-util/color';
+import { Color } from '../../mol-util/color';
 import * as React from 'react';
 import { _Props, _State } from '../base';
-import { Legend as LegendData, ScaleLegend as ScaleLegendData, TableLegend as TableLegendData } from '../../../mol-util/legend';
+import { Legend as LegendData, ScaleLegend as ScaleLegendData, TableLegend as TableLegendData } from '../../mol-util/legend';
 
 export type LegendProps<L extends LegendData> = { legend: L }
 export type Legend = React.ComponentClass<LegendProps<any>>
diff --git a/src/mol-plugin/ui/controls/line-graph/line-graph-component.tsx b/src/mol-plugin-ui/controls/line-graph/line-graph-component.tsx
similarity index 99%
rename from src/mol-plugin/ui/controls/line-graph/line-graph-component.tsx
rename to src/mol-plugin-ui/controls/line-graph/line-graph-component.tsx
index 70fafe032..f623e05c9 100644
--- a/src/mol-plugin/ui/controls/line-graph/line-graph-component.tsx
+++ b/src/mol-plugin-ui/controls/line-graph/line-graph-component.tsx
@@ -6,7 +6,7 @@
 import PointComponent from './point-component';
 
 import * as React from 'react';
-import { Vec2 } from '../../../../mol-math/linear-algebra';
+import { Vec2 } from '../../../mol-math/linear-algebra';
 
 interface LineGraphComponentState {
     points: Vec2[],
diff --git a/src/mol-plugin/ui/controls/line-graph/point-component.tsx b/src/mol-plugin-ui/controls/line-graph/point-component.tsx
similarity index 95%
rename from src/mol-plugin/ui/controls/line-graph/point-component.tsx
rename to src/mol-plugin-ui/controls/line-graph/point-component.tsx
index c05f2d9ea..191bc8f9f 100644
--- a/src/mol-plugin/ui/controls/line-graph/point-component.tsx
+++ b/src/mol-plugin-ui/controls/line-graph/point-component.tsx
@@ -1,7 +1,7 @@
 
 import * as React from 'react';
 
-import { Vec2 } from '../../../../mol-math/linear-algebra';
+import { Vec2 } from '../../../mol-math/linear-algebra';
 
 export default class PointComponent extends React.Component<any, {show: boolean}> {
     constructor(props: any) {
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
similarity index 98%
rename from src/mol-plugin/ui/controls/parameters.tsx
rename to src/mol-plugin-ui/controls/parameters.tsx
index fdb4f2810..a942c1243 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin-ui/controls/parameters.tsx
@@ -5,19 +5,19 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Vec2, Vec3 } from '../../../mol-math/linear-algebra';
-import { Color } from '../../../mol-util/color';
-import { ColorListName, getColorListFromName } from '../../../mol-util/color/lists';
-import { memoize1 } from '../../../mol-util/memoize';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-import { camelCaseToWords } from '../../../mol-util/string';
+import { Vec2, Vec3 } from '../../mol-math/linear-algebra';
+import { Color } from '../../mol-util/color';
+import { ColorListName, getColorListFromName } from '../../mol-util/color/lists';
+import { memoize1 } from '../../mol-util/memoize';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { camelCaseToWords } from '../../mol-util/string';
 import * as React from 'react';
 import LineGraphComponent from './line-graph/line-graph-component';
 import { Slider, Slider2 } from './slider';
 import { NumericInput, IconButton, ControlGroup } from './common';
 import { _Props, _State } from '../base';
 import { legendFor } from './legend';
-import { Legend as LegendData } from '../../../mol-util/legend';
+import { Legend as LegendData } from '../../mol-util/legend';
 import { CombinedColorControl, ColorValueOption, ColorOptions } from './color';
 
 export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
diff --git a/src/mol-plugin/ui/controls/slider.tsx b/src/mol-plugin-ui/controls/slider.tsx
similarity index 99%
rename from src/mol-plugin/ui/controls/slider.tsx
rename to src/mol-plugin-ui/controls/slider.tsx
index 5648d6824..f393f43e6 100644
--- a/src/mol-plugin/ui/controls/slider.tsx
+++ b/src/mol-plugin-ui/controls/slider.tsx
@@ -7,7 +7,7 @@
 
 import * as React from 'react'
 import { NumericInput } from './common';
-import { noop } from '../../../mol-util';
+import { noop } from '../../mol-util';
 
 export class Slider extends React.Component<{
     min: number,
diff --git a/src/mol-plugin/ui/custom/volume.tsx b/src/mol-plugin-ui/custom/volume.tsx
similarity index 96%
rename from src/mol-plugin/ui/custom/volume.tsx
rename to src/mol-plugin-ui/custom/volume.tsx
index 7083ddba0..95fd9cec4 100644
--- a/src/mol-plugin/ui/custom/volume.tsx
+++ b/src/mol-plugin-ui/custom/volume.tsx
@@ -7,15 +7,15 @@
 import { PluginUIComponent } from '../base';
 import { StateTransformParameters } from '../state/common';
 import * as React from 'react';
-import { VolumeStreaming } from '../../../mol-plugin/behavior/dynamic/volume-streaming/behavior';
+import { VolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/behavior';
 import { ExpandableGroup } from '../controls/common';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { Slider } from '../controls/slider';
-import { VolumeIsoValue, VolumeData } from '../../../mol-model/volume';
-import { Vec3 } from '../../../mol-math/linear-algebra';
-import { ColorNames } from '../../../mol-util/color/names';
-import { toPrecision } from '../../../mol-util/number';
+import { VolumeIsoValue, VolumeData } from '../../mol-model/volume';
+import { Vec3 } from '../../mol-math/linear-algebra';
+import { ColorNames } from '../../mol-util/color/names';
+import { toPrecision } from '../../mol-util/number';
 
 const ChannelParams = {
     color: PD.Color(ColorNames.black, { description: 'Display color of the volume.' }),
diff --git a/src/mol-plugin/ui/image.tsx b/src/mol-plugin-ui/image.tsx
similarity index 97%
rename from src/mol-plugin/ui/image.tsx
rename to src/mol-plugin-ui/image.tsx
index fa62c67f9..854ce21f7 100644
--- a/src/mol-plugin/ui/image.tsx
+++ b/src/mol-plugin-ui/image.tsx
@@ -6,9 +6,9 @@
 
 import * as React from 'react';
 import { CollapsableControls, CollapsableState } from './base';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { ParameterControls } from './controls/parameters';
-import { setCanvasSize } from '../../mol-canvas3d/util';
+import { setCanvasSize } from '../mol-canvas3d/util';
 
 interface ImageControlsState extends CollapsableState {
     showPreview: boolean
diff --git a/src/mol-plugin/ui/left-panel.tsx b/src/mol-plugin-ui/left-panel.tsx
similarity index 96%
rename from src/mol-plugin/ui/left-panel.tsx
rename to src/mol-plugin-ui/left-panel.tsx
index 811f40255..25a962f15 100644
--- a/src/mol-plugin/ui/left-panel.tsx
+++ b/src/mol-plugin-ui/left-panel.tsx
@@ -9,14 +9,14 @@ import { PluginUIComponent } from './base';
 import { StateTree } from './state/tree';
 import { IconButton, SectionHeader } from './controls/common';
 import { StateObjectActions } from './state/actions';
-import { StateTransform } from '../../mol-state';
-import { PluginCommands } from '../command';
+import { StateTransform } from '../mol-state';
+import { PluginCommands } from '../mol-plugin/command';
 import { ParameterControls } from './controls/parameters';
-import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { StateSnapshots, RemoteStateSnapshots } from './state/snapshots';
 import { HelpContent } from './viewport/help';
-import { LeftPanelTabName } from '../layout';
+import { LeftPanelTabName } from '../mol-plugin/layout';
 
 export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTabName }> {
     state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
diff --git a/src/mol-plugin/ui/plugin.tsx b/src/mol-plugin-ui/plugin.tsx
similarity index 97%
rename from src/mol-plugin/ui/plugin.tsx
rename to src/mol-plugin-ui/plugin.tsx
index fc8a0356d..7a7eb0cd2 100644
--- a/src/mol-plugin/ui/plugin.tsx
+++ b/src/mol-plugin-ui/plugin.tsx
@@ -6,16 +6,16 @@
  */
 
 import { List } from 'immutable';
-import { formatTime } from '../../mol-util';
-import { LogEntry } from '../../mol-util/log-entry';
+import { formatTime } from '../mol-util';
+import { LogEntry } from '../mol-util/log-entry';
 import * as React from 'react';
-import { PluginContext } from '../context';
+import { PluginContext } from '../mol-plugin/context';
 import { PluginReactContext, PluginUIComponent } from './base';
 import { LociLabels, TrajectoryViewportControls, StateSnapshotViewportControls, AnimationViewportControls, StructureToolsWrapper } from './controls';
 import { StateObjectActionSelect } from './state/actions';
 import { BackgroundTaskProgress } from './task';
 import { Viewport, ViewportControls } from './viewport';
-import { StateTransform } from '../../mol-state';
+import { StateTransform } from '../mol-state';
 import { UpdateTransformControl } from './state/update-transform';
 import { SequenceView } from './sequence';
 import { Toasts } from './toast';
diff --git a/src/mol-plugin/ui/sequence.tsx b/src/mol-plugin-ui/sequence.tsx
similarity index 96%
rename from src/mol-plugin/ui/sequence.tsx
rename to src/mol-plugin-ui/sequence.tsx
index 183f8fd58..1ab7f214f 100644
--- a/src/mol-plugin/ui/sequence.tsx
+++ b/src/mol-plugin-ui/sequence.tsx
@@ -7,20 +7,20 @@
 
 import * as React from 'react'
 import { PluginUIComponent } from './base';
-import { PluginStateObject as PSO } from '../state/objects';
+import { PluginStateObject as PSO } from '../mol-plugin/state/objects';
 import { Sequence } from './sequence/sequence';
-import { Structure, StructureElement, StructureProperties as SP, Unit } from '../../mol-model/structure';
+import { Structure, StructureElement, StructureProperties as SP, Unit } from '../mol-model/structure';
 import { SequenceWrapper } from './sequence/wrapper';
 import { PolymerSequenceWrapper } from './sequence/polymer';
-import { StructureElementSelectionManager } from '../util/structure-element-selection';
-import { MarkerAction } from '../../mol-util/marker-action';
+import { StructureElementSelectionManager } from '../mol-plugin/util/structure-element-selection';
+import { MarkerAction } from '../mol-util/marker-action';
 import { PureSelectControl } from './controls/parameters';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { HeteroSequenceWrapper } from './sequence/hetero';
-import { State, StateSelection } from '../../mol-state';
+import { State, StateSelection } from '../mol-state';
 import { ChainSequenceWrapper } from './sequence/chain';
 import { ElementSequenceWrapper } from './sequence/element';
-import { elementLabel } from '../../mol-theme/label';
+import { elementLabel } from '../mol-theme/label';
 
 const MaxDisplaySequenceLength = 5000
 
diff --git a/src/mol-plugin/ui/sequence/chain.ts b/src/mol-plugin-ui/sequence/chain.ts
similarity index 91%
rename from src/mol-plugin/ui/sequence/chain.ts
rename to src/mol-plugin-ui/sequence/chain.ts
index 727d5b47d..b3e53700e 100644
--- a/src/mol-plugin/ui/sequence/chain.ts
+++ b/src/mol-plugin-ui/sequence/chain.ts
@@ -4,12 +4,12 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Structure, StructureElement, StructureProperties } from '../../../mol-model/structure';
+import { Structure, StructureElement, StructureProperties } from '../../mol-model/structure';
 import { SequenceWrapper, StructureUnit } from './wrapper';
-import { OrderedSet, Interval } from '../../../mol-data/int';
-import { Loci } from '../../../mol-model/loci';
-import { ColorNames } from '../../../mol-util/color/names';
-import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
+import { OrderedSet, Interval } from '../../mol-data/int';
+import { Loci } from '../../mol-model/loci';
+import { ColorNames } from '../../mol-util/color/names';
+import { MarkerAction, applyMarkerAction } from '../../mol-util/marker-action';
 
 export class ChainSequenceWrapper extends SequenceWrapper<StructureUnit> {
     private label: string
diff --git a/src/mol-plugin/ui/sequence/element.ts b/src/mol-plugin-ui/sequence/element.ts
similarity index 89%
rename from src/mol-plugin/ui/sequence/element.ts
rename to src/mol-plugin-ui/sequence/element.ts
index c1a881361..f0c26d408 100644
--- a/src/mol-plugin/ui/sequence/element.ts
+++ b/src/mol-plugin-ui/sequence/element.ts
@@ -4,12 +4,12 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Structure, StructureElement } from '../../../mol-model/structure';
+import { Structure, StructureElement } from '../../mol-model/structure';
 import { SequenceWrapper, StructureUnit } from './wrapper';
-import { OrderedSet, Interval } from '../../../mol-data/int';
-import { Loci } from '../../../mol-model/loci';
-import { ColorNames } from '../../../mol-util/color/names';
-import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
+import { OrderedSet, Interval } from '../../mol-data/int';
+import { Loci } from '../../mol-model/loci';
+import { ColorNames } from '../../mol-util/color/names';
+import { MarkerAction, applyMarkerAction } from '../../mol-util/marker-action';
 
 export class ElementSequenceWrapper extends SequenceWrapper<StructureUnit> {
     private unitIndices: Map<number, Interval<StructureElement.UnitIndex>>
diff --git a/src/mol-plugin/ui/sequence/hetero.ts b/src/mol-plugin-ui/sequence/hetero.ts
similarity index 94%
rename from src/mol-plugin/ui/sequence/hetero.ts
rename to src/mol-plugin-ui/sequence/hetero.ts
index b677c0808..ee3411faa 100644
--- a/src/mol-plugin/ui/sequence/hetero.ts
+++ b/src/mol-plugin-ui/sequence/hetero.ts
@@ -4,12 +4,12 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Structure, StructureElement, ResidueIndex, Unit } from '../../../mol-model/structure';
+import { Structure, StructureElement, ResidueIndex, Unit } from '../../mol-model/structure';
 import { SequenceWrapper, StructureUnit } from './wrapper';
-import { OrderedSet, Segmentation, Interval, SortedArray } from '../../../mol-data/int';
-import { Loci } from '../../../mol-model/loci';
-import { ColorNames } from '../../../mol-util/color/names';
-import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
+import { OrderedSet, Segmentation, Interval, SortedArray } from '../../mol-data/int';
+import { Loci } from '../../mol-model/loci';
+import { ColorNames } from '../../mol-util/color/names';
+import { MarkerAction, applyMarkerAction } from '../../mol-util/marker-action';
 
 export class HeteroSequenceWrapper extends SequenceWrapper<StructureUnit> {
     private readonly unitMap: Map<number, Unit>
diff --git a/src/mol-plugin/ui/sequence/polymer.ts b/src/mol-plugin-ui/sequence/polymer.ts
similarity index 93%
rename from src/mol-plugin/ui/sequence/polymer.ts
rename to src/mol-plugin-ui/sequence/polymer.ts
index 8b799205b..1402a8888 100644
--- a/src/mol-plugin/ui/sequence/polymer.ts
+++ b/src/mol-plugin-ui/sequence/polymer.ts
@@ -4,14 +4,14 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { StructureSelection, StructureQuery, Structure, Queries, StructureProperties as SP, StructureElement, Unit } from '../../../mol-model/structure';
+import { StructureSelection, StructureQuery, Structure, Queries, StructureProperties as SP, StructureElement, Unit } from '../../mol-model/structure';
 import { SequenceWrapper, StructureUnit } from './wrapper';
-import { OrderedSet, Interval, SortedArray } from '../../../mol-data/int';
-import { Loci } from '../../../mol-model/loci';
-import { Sequence } from '../../../mol-model/sequence';
-import { MissingResidues } from '../../../mol-model/structure/model/properties/common';
-import { ColorNames } from '../../../mol-util/color/names';
-import { MarkerAction, applyMarkerAction, applyMarkerActionAtPosition } from '../../../mol-util/marker-action';
+import { OrderedSet, Interval, SortedArray } from '../../mol-data/int';
+import { Loci } from '../../mol-model/loci';
+import { Sequence } from '../../mol-model/sequence';
+import { MissingResidues } from '../../mol-model/structure/model/properties/common';
+import { ColorNames } from '../../mol-util/color/names';
+import { MarkerAction, applyMarkerAction, applyMarkerActionAtPosition } from '../../mol-util/marker-action';
 
 export class PolymerSequenceWrapper extends SequenceWrapper<StructureUnit> {
     private readonly unitMap: Map<number, Unit>
diff --git a/src/mol-plugin/ui/sequence/sequence.tsx b/src/mol-plugin-ui/sequence/sequence.tsx
similarity index 97%
rename from src/mol-plugin/ui/sequence/sequence.tsx
rename to src/mol-plugin-ui/sequence/sequence.tsx
index fed58afc6..f1ef4b5ff 100644
--- a/src/mol-plugin/ui/sequence/sequence.tsx
+++ b/src/mol-plugin-ui/sequence/sequence.tsx
@@ -7,15 +7,15 @@
 
 import * as React from 'react'
 import { PluginUIComponent } from '../base';
-import { Interactivity } from '../../util/interactivity';
-import { MarkerAction } from '../../../mol-util/marker-action';
-import { ButtonsType, ModifiersKeys, getButtons, getModifiers, getButton } from '../../../mol-util/input/input-observer';
+import { Interactivity } from '../../mol-plugin/util/interactivity';
+import { MarkerAction } from '../../mol-util/marker-action';
+import { ButtonsType, ModifiersKeys, getButtons, getModifiers, getButton } from '../../mol-util/input/input-observer';
 import { SequenceWrapper } from './wrapper';
-import { StructureElement, StructureProperties, Unit } from '../../../mol-model/structure';
+import { StructureElement, StructureProperties, Unit } from '../../mol-model/structure';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import { Color } from '../../../mol-util/color';
-import { OrderedSet } from '../../../mol-data/int';
+import { Color } from '../../mol-util/color';
+import { OrderedSet } from '../../mol-data/int';
 
 type SequenceProps = {
     sequenceWrapper: SequenceWrapper.Any,
diff --git a/src/mol-plugin/ui/sequence/wrapper.ts b/src/mol-plugin-ui/sequence/wrapper.ts
similarity index 74%
rename from src/mol-plugin/ui/sequence/wrapper.ts
rename to src/mol-plugin-ui/sequence/wrapper.ts
index acbc8ed17..af84608b1 100644
--- a/src/mol-plugin/ui/sequence/wrapper.ts
+++ b/src/mol-plugin-ui/sequence/wrapper.ts
@@ -4,11 +4,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Interval } from '../../../mol-data/int';
-import { Loci, isEveryLoci } from '../../../mol-model/loci';
-import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
-import { StructureElement, Structure, Unit } from '../../../mol-model/structure';
-import { Color } from '../../../mol-util/color';
+import { Interval } from '../../mol-data/int';
+import { Loci, isEveryLoci } from '../../mol-model/loci';
+import { MarkerAction, applyMarkerAction } from '../../mol-util/marker-action';
+import { StructureElement, Structure, Unit } from '../../mol-model/structure';
+import { Color } from '../../mol-util/color';
 
 export type StructureUnit = { structure: Structure, units: Unit[] }
 
diff --git a/src/mol-plugin/ui/state/actions.tsx b/src/mol-plugin-ui/state/actions.tsx
similarity index 97%
rename from src/mol-plugin/ui/state/actions.tsx
rename to src/mol-plugin-ui/state/actions.tsx
index c7c353a90..7ec479d73 100644
--- a/src/mol-plugin/ui/state/actions.tsx
+++ b/src/mol-plugin-ui/state/actions.tsx
@@ -7,9 +7,9 @@
 import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ApplyActionControl } from './apply-action';
-import { State, StateAction } from '../../../mol-state';
+import { State, StateAction } from '../../mol-state';
 import { Icon } from '../controls/common';
-import { PluginContext } from '../../context';
+import { PluginContext } from '../../mol-plugin/context';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {
     get current() {
diff --git a/src/mol-plugin/ui/state/animation.tsx b/src/mol-plugin-ui/state/animation.tsx
similarity index 100%
rename from src/mol-plugin/ui/state/animation.tsx
rename to src/mol-plugin-ui/state/animation.tsx
diff --git a/src/mol-plugin/ui/state/apply-action.tsx b/src/mol-plugin-ui/state/apply-action.tsx
similarity index 89%
rename from src/mol-plugin/ui/state/apply-action.tsx
rename to src/mol-plugin-ui/state/apply-action.tsx
index dea9d1613..d95015060 100644
--- a/src/mol-plugin/ui/state/apply-action.tsx
+++ b/src/mol-plugin-ui/state/apply-action.tsx
@@ -4,12 +4,12 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-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 { 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, TransformControlBase } from './common';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 
 export { ApplyActionControl };
 
diff --git a/src/mol-plugin/ui/state/common.tsx b/src/mol-plugin-ui/state/common.tsx
similarity index 97%
rename from src/mol-plugin/ui/state/common.tsx
rename to src/mol-plugin-ui/state/common.tsx
index fe20b8a19..2165b7ff2 100644
--- a/src/mol-plugin/ui/state/common.tsx
+++ b/src/mol-plugin-ui/state/common.tsx
@@ -4,12 +4,12 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { State, StateTransform, StateTransformer, StateAction, StateObject } from '../../../mol-state';
+import { State, StateTransform, StateTransformer, StateAction, StateObject } from '../../mol-state';
 import * as React from 'react';
 import { PurePluginUIComponent } from '../base';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
-import { PluginContext } from '../../../mol-plugin/context';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { PluginContext } from '../../mol-plugin/context';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Subject } from 'rxjs';
 import { Icon } from '../controls/common';
 
diff --git a/src/mol-plugin/ui/state/snapshots.tsx b/src/mol-plugin-ui/state/snapshots.tsx
similarity index 97%
rename from src/mol-plugin/ui/state/snapshots.tsx
rename to src/mol-plugin-ui/state/snapshots.tsx
index fac58cc1d..a74699a32 100644
--- a/src/mol-plugin/ui/state/snapshots.tsx
+++ b/src/mol-plugin-ui/state/snapshots.tsx
@@ -4,17 +4,17 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { PluginCommands } from '../../command';
+import { PluginCommands } from '../../mol-plugin/command';
 import * as React from 'react';
 import { PluginUIComponent, PurePluginUIComponent } from '../base';
-import { shallowEqual } from '../../../mol-util';
+import { shallowEqual } from '../../mol-util';
 import { OrderedMap } from 'immutable';
 import { ParameterControls } from '../controls/parameters';
-import { ParamDefinition as PD} from '../../../mol-util/param-definition';
-import { PluginState } from '../../state';
-import { urlCombine } from '../../../mol-util/url';
+import { ParamDefinition as PD} from '../../mol-util/param-definition';
+import { PluginState } from '../../mol-plugin/state';
+import { urlCombine } from '../../mol-util/url';
 import { IconButton, Icon, SectionHeader } from '../controls/common';
-import { formatTimespan } from '../../../mol-util/now';
+import { formatTimespan } from '../../mol-util/now';
 
 export class StateSnapshots extends PluginUIComponent<{ }> {
     downloadToFile = () => {
diff --git a/src/mol-plugin/ui/state/tree.tsx b/src/mol-plugin-ui/state/tree.tsx
similarity index 98%
rename from src/mol-plugin/ui/state/tree.tsx
rename to src/mol-plugin-ui/state/tree.tsx
index 0c4a07629..9304c209d 100644
--- a/src/mol-plugin/ui/state/tree.tsx
+++ b/src/mol-plugin-ui/state/tree.tsx
@@ -5,9 +5,9 @@
  */
 
 import * as React from 'react';
-import { PluginStateObject } from '../../../mol-plugin/state/objects';
-import { State, StateObject, StateTransform, StateObjectCell } from '../../../mol-state'
-import { PluginCommands } from '../../../mol-plugin/command';
+import { PluginStateObject } from '../../mol-plugin/state/objects';
+import { State, StateObject, StateTransform, StateObjectCell } from '../../mol-state'
+import { PluginCommands } from '../../mol-plugin/command';
 import { PluginUIComponent, _Props, _State } from '../base';
 import { Icon } from '../controls/common';
 
diff --git a/src/mol-plugin/ui/state/update-transform.tsx b/src/mol-plugin-ui/state/update-transform.tsx
similarity index 97%
rename from src/mol-plugin/ui/state/update-transform.tsx
rename to src/mol-plugin-ui/state/update-transform.tsx
index 7e3a896c5..a901b20c5 100644
--- a/src/mol-plugin/ui/state/update-transform.tsx
+++ b/src/mol-plugin-ui/state/update-transform.tsx
@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { State, StateTransform, StateTransformer } from '../../../mol-state';
-import { memoizeLatest } from '../../../mol-util/memoize';
+import { State, StateTransform, StateTransformer } from '../../mol-state';
+import { memoizeLatest } from '../../mol-util/memoize';
 import { StateTransformParameters, TransformControlBase } from './common';
 import { Observable } from 'rxjs';
 import * as React from 'react';
diff --git a/src/mol-plugin/ui/structure/representation.tsx b/src/mol-plugin-ui/structure/representation.tsx
similarity index 91%
rename from src/mol-plugin/ui/structure/representation.tsx
rename to src/mol-plugin-ui/structure/representation.tsx
index 07fd61a6b..63629702f 100644
--- a/src/mol-plugin/ui/structure/representation.tsx
+++ b/src/mol-plugin-ui/structure/representation.tsx
@@ -6,18 +6,18 @@
 
 import * as React from 'react';
 import { PluginUIComponent, CollapsableState, CollapsableProps } from '../base';
-import { Structure, StructureElement } from '../../../mol-model/structure';
-import { isEmptyLoci } from '../../../mol-model/loci';
+import { Structure, StructureElement } from '../../mol-model/structure';
+import { isEmptyLoci } from '../../mol-model/loci';
 import { ParameterControls } from '../controls/parameters';
-import { Color } from '../../../mol-util/color';
+import { Color } from '../../mol-util/color';
 import { ButtonSelect, Options } from '../controls/common'
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-import { VisualQuality, VisualQualityOptions } from '../../../mol-geo/geometry/base';
-import { StructureRepresentationPresets as P } from '../../util/structure-representation-helper';
-import { camelCaseToWords } from '../../../mol-util/string';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { VisualQuality, VisualQualityOptions } from '../../mol-geo/geometry/base';
+import { StructureRepresentationPresets as P } from '../../mol-plugin/util/structure-representation-helper';
+import { camelCaseToWords } from '../../mol-util/string';
 import { CollapsableControls } from '../base';
-import { StateSelection, StateObject } from '../../../mol-state';
-import { PluginStateObject } from '../../state/objects';
+import { StateSelection, StateObject } from '../../mol-state';
+import { PluginStateObject } from '../../mol-plugin/state/objects';
 import { ColorOptions } from '../controls/color';
 
 interface BaseStructureRepresentationControlsState {
diff --git a/src/mol-plugin/ui/structure/selection.tsx b/src/mol-plugin-ui/structure/selection.tsx
similarity index 96%
rename from src/mol-plugin/ui/structure/selection.tsx
rename to src/mol-plugin-ui/structure/selection.tsx
index 26634a3ed..89402f959 100644
--- a/src/mol-plugin/ui/structure/selection.tsx
+++ b/src/mol-plugin-ui/structure/selection.tsx
@@ -6,14 +6,14 @@
 
 import * as React from 'react';
 import { CollapsableControls, CollapsableState } from '../base';
-import { StructureSelectionQueries, SelectionModifier } from '../../util/structure-selection-helper';
+import { StructureSelectionQueries, SelectionModifier } from '../../mol-plugin/util/structure-selection-helper';
 import { ButtonSelect, Options } from '../controls/common';
-import { PluginCommands } from '../../command';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
-import { Interactivity } from '../../util/interactivity';
+import { PluginCommands } from '../../mol-plugin/command';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { Interactivity } from '../../mol-plugin/util/interactivity';
 import { ParameterControls } from '../controls/parameters';
-import { stripTags } from '../../../mol-util/string';
-import { StructureElement } from '../../../mol-model/structure';
+import { stripTags } from '../../mol-util/string';
+import { StructureElement } from '../../mol-model/structure';
 
 const SSQ = StructureSelectionQueries
 const DefaultQueries: (keyof typeof SSQ)[] = [
diff --git a/src/mol-plugin/ui/task.tsx b/src/mol-plugin-ui/task.tsx
similarity index 95%
rename from src/mol-plugin/ui/task.tsx
rename to src/mol-plugin-ui/task.tsx
index 81c73ff9b..dbfbd8192 100644
--- a/src/mol-plugin/ui/task.tsx
+++ b/src/mol-plugin-ui/task.tsx
@@ -7,9 +7,9 @@
 import * as React from 'react';
 import { PluginUIComponent } from './base';
 import { OrderedMap } from 'immutable';
-import { TaskManager } from '../../mol-plugin/util/task-manager';
+import { TaskManager } from '../mol-plugin/util/task-manager';
 import { filter } from 'rxjs/operators';
-import { Progress } from '../../mol-task';
+import { Progress } from '../mol-task';
 import { IconButton } from './controls/common';
 
 export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
diff --git a/src/mol-plugin/ui/toast.tsx b/src/mol-plugin-ui/toast.tsx
similarity index 96%
rename from src/mol-plugin/ui/toast.tsx
rename to src/mol-plugin-ui/toast.tsx
index d32abccc7..ff5384d0f 100644
--- a/src/mol-plugin/ui/toast.tsx
+++ b/src/mol-plugin-ui/toast.tsx
@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 import { PluginUIComponent } from './base';
-import { PluginToastManager } from '../state/toast';
+import { PluginToastManager } from '../mol-plugin/state/toast';
 import { IconButton } from './controls/common';
 
 class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }> {
diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin-ui/viewport.tsx
similarity index 97%
rename from src/mol-plugin/ui/viewport.tsx
rename to src/mol-plugin-ui/viewport.tsx
index e1a948618..f7225df55 100644
--- a/src/mol-plugin/ui/viewport.tsx
+++ b/src/mol-plugin-ui/viewport.tsx
@@ -6,9 +6,9 @@
  */
 
 import * as React from 'react';
-import { resizeCanvas } from '../../mol-canvas3d/util';
-import { PluginCommands } from '../../mol-plugin/command';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { resizeCanvas } from '../mol-canvas3d/util';
+import { PluginCommands } from '../mol-plugin/command';
+import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { PluginUIComponent } from './base';
 import { ControlGroup, IconButton } from './controls/common';
 import { SimpleSettingsControl } from './viewport/simple-settings';
diff --git a/src/mol-plugin/ui/viewport/help.tsx b/src/mol-plugin-ui/viewport/help.tsx
similarity index 96%
rename from src/mol-plugin/ui/viewport/help.tsx
rename to src/mol-plugin-ui/viewport/help.tsx
index d7b9adc88..10059480f 100644
--- a/src/mol-plugin/ui/viewport/help.tsx
+++ b/src/mol-plugin-ui/viewport/help.tsx
@@ -5,11 +5,11 @@
  */
 
 import * as React from 'react';
-import { Binding } from '../../../mol-util/binding';
+import { Binding } from '../../mol-util/binding';
 import { PluginUIComponent } from '../base';
-import { StateTransformer, StateSelection } from '../../../mol-state';
-import { SelectLoci } from '../../behavior/dynamic/representation';
-import { StructureRepresentationInteraction } from '../../behavior/dynamic/selection/structure-representation-interaction';
+import { StateTransformer, StateSelection } from '../../mol-state';
+import { SelectLoci } from '../../mol-plugin/behavior/dynamic/representation';
+import { StructureRepresentationInteraction } from '../../mol-plugin/behavior/dynamic/selection/structure-representation-interaction';
 import { Icon } from '../controls/common';
 
 function getBindingsList(bindings: { [k: string]: Binding }) {
diff --git a/src/mol-plugin/ui/viewport/simple-settings.tsx b/src/mol-plugin-ui/viewport/simple-settings.tsx
similarity index 95%
rename from src/mol-plugin/ui/viewport/simple-settings.tsx
rename to src/mol-plugin-ui/viewport/simple-settings.tsx
index 8a51cbbd8..2062c6f4c 100644
--- a/src/mol-plugin/ui/viewport/simple-settings.tsx
+++ b/src/mol-plugin-ui/viewport/simple-settings.tsx
@@ -6,13 +6,13 @@
  */
 
 import * as React from 'react';
-import { Canvas3DParams } from '../../../mol-canvas3d/canvas3d';
-import { PluginCommands } from '../../command';
-import { ColorNames } from '../../../mol-util/color/names';
+import { Canvas3DParams } from '../../mol-canvas3d/canvas3d';
+import { PluginCommands } from '../../mol-plugin/command';
+import { ColorNames } from '../../mol-util/color/names';
 import { ParameterControls } from '../controls/parameters';
-import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { PluginUIComponent } from '../base';
-import { Color } from '../../../mol-util/color';
+import { Color } from '../../mol-util/color';
 
 const SimpleSettingsParams = {
     spin: Canvas3DParams.trackball.params.spin,
diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts
index bba778050..47d7c334b 100644
--- a/src/mol-plugin/context.ts
+++ b/src/mol-plugin/context.ts
@@ -27,7 +27,7 @@ import { PluginLayout, LeftPanelTabName } from './layout';
 import { PluginSpec } from './spec';
 import { PluginState } from './state';
 import { DataFormatRegistry } from './state/actions/data-format';
-import { StateTransformParameters } from './ui/state/common';
+import { StateTransformParameters } from '../mol-plugin-ui/state/common';
 import { LociLabelEntry, LociLabelManager } from './util/loci-label-manager';
 import { TaskManager } from './util/task-manager';
 import { PLUGIN_VERSION, PLUGIN_VERSION_DATE } from './version';
diff --git a/src/mol-plugin/index.ts b/src/mol-plugin/index.ts
index 38d51836e..4ab0afb74 100644
--- a/src/mol-plugin/index.ts
+++ b/src/mol-plugin/index.ts
@@ -6,7 +6,7 @@
  */
 
 import { PluginContext } from './context';
-import { Plugin } from './ui/plugin'
+import { Plugin } from '../mol-plugin-ui/plugin'
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { PluginSpec } from './spec';
@@ -17,7 +17,7 @@ import { StateActions } from './state/actions';
 import { InitVolumeStreaming, BoxifyVolumeStreaming, CreateVolumeStreamingBehavior } from './behavior/dynamic/volume-streaming/transformers';
 import { StructureRepresentationInteraction } from './behavior/dynamic/selection/structure-representation-interaction';
 import { TransformStructureConformation } from './state/actions/structure';
-import { VolumeStreamingCustomControls } from './ui/custom/volume';
+import { VolumeStreamingCustomControls } from '../mol-plugin-ui/custom/volume';
 
 export const DefaultPluginSpec: PluginSpec = {
     actions: [
diff --git a/src/mol-plugin/spec.ts b/src/mol-plugin/spec.ts
index ad1370a53..61c9a21f9 100644
--- a/src/mol-plugin/spec.ts
+++ b/src/mol-plugin/spec.ts
@@ -6,7 +6,7 @@
  */
 
 import { StateTransformer, StateAction } from '../mol-state';
-import { StateTransformParameters } from './ui/state/common';
+import { StateTransformParameters } from '../mol-plugin-ui/state/common';
 import { PluginLayoutStateProps } from './layout';
 import { PluginStateAnimation } from './state/animation/model';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
-- 
GitLab