added mol-plugin-ui

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

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 {
 

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 {

src/mol-plugin/ui/base.tsx → 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);
 

src/mol-plugin/ui/camera.tsx → 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';
 

src/mol-plugin/ui/controls.tsx → 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';

src/mol-plugin/ui/controls/color.tsx → 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 }

src/mol-plugin/ui/controls/common.tsx → 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<{

src/mol-plugin/ui/controls/legend.tsx → 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>>

src/mol-plugin/ui/controls/line-graph/line-graph-component.tsx → 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[],

src/mol-plugin/ui/controls/line-graph/point-component.tsx → 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) {

src/mol-plugin/ui/controls/parameters.tsx → 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> {

src/mol-plugin/ui/controls/slider.tsx → 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,

src/mol-plugin/ui/custom/volume.tsx → 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.' }),

src/mol-plugin/ui/image.tsx → 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

src/mol-plugin/ui/left-panel.tsx → 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 };

src/mol-plugin/ui/plugin.tsx → 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';

src/mol-plugin/ui/sequence.tsx → 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
 

src/mol-plugin/ui/sequence/chain.ts → 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

src/mol-plugin/ui/sequence/element.ts → 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>>

src/mol-plugin/ui/sequence/hetero.ts → 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>

src/mol-plugin/ui/sequence/polymer.ts → 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>

src/mol-plugin/ui/sequence/sequence.tsx → 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,

src/mol-plugin/ui/sequence/wrapper.ts → 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[] }
 

src/mol-plugin/ui/state/actions.tsx → 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() {

src/mol-plugin/ui/state/apply-action.tsx → 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 };
 

src/mol-plugin/ui/state/common.tsx → 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';
 

src/mol-plugin/ui/state/snapshots.tsx → 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 = () => {

src/mol-plugin/ui/state/tree.tsx → 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';
 

src/mol-plugin/ui/state/update-transform.tsx → 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';

src/mol-plugin/ui/structure/representation.tsx → 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 {

src/mol-plugin/ui/structure/selection.tsx → 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)[] = [

src/mol-plugin/ui/task.tsx → 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> }> {

src/mol-plugin/ui/toast.tsx → 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 }> {

src/mol-plugin/ui/viewport.tsx → 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';

src/mol-plugin/ui/viewport/help.tsx → 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 }) {

src/mol-plugin/ui/viewport/simple-settings.tsx → 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,

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';

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: [

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';