Chore/kill yalc with fire (#629)

* init

* more shifting

* Move @babel dependencies up to workspace root

* Begin updating dependent libraries to use sync'd webpack builds w/ watches

* Commit changes before a long weekend

* Split packages into platform and extensions

* Consolidate how/where we specify file/module type entrypoints

* Make it possible to pass in extensions as App props

* Resolve viewer's modules

* Target for UMD bundle

* Add Webpack Stylus loader

* Provide WebPack build options for microscopy, vtk, and ui

* Better entrypoint for extensions

* Push changes up to switch PCs

* Fix ESM symlink build for Viewers

* Shift docs to root

* Specify additional lerna config props

* Begin providing basic readme info

* Rename example extension folder

* Shift links to bottom of doc

* First attempt at a netlify deploy preview

* Attempt to fix deploy preview build

* push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands

* Try to use global gitbook-cli

* Export node_modules path

* More agressive with modifying PATH

* Follow deploy log output advice

* try again to set bin path

* Try swapping bash with a new shell

* Try bash -l instead of exec bash

* Annd let's try again

* and again

* We may have figured it out johnny, boy

* We need to pull cornerstone-wado-image-loader files from hoisted node_modules

* Attempt to fix ticks/escapes

* Change copy syntax; try running tests on viewers from root for circleci

* Lower version to match circleci image

* Try alternative jest-canvas-mock location and version file syntax

* Run version command instead of calling node directly

* Try alternative jest transform

* Set path and enable workspaces

* Add codecov flags

* Use cpx so our copying finishes?

* Get all platform unit tests to run

* Run and report individually and in parallel

* Try once relying on codecov yaml to split w/ flags

* Add projects to split by flags

* Generate separate reports

* Trigger codecov after everything has finished running; these may not support flags

* Use recommended flags from issue comments for codecov

* Fix typo

* Remove clear flag

* Shift back to calling codecov from root

* Generate example for codecov issue

* Try fixing paths

* Simplify

* Try using codecov orb

* Bump circleci version

* Upload core and viewer

* Use full string paths

* Remove individual codecov calls

* Fix dir

* Combine files before upload

* Escape anchors

* tryfix syntax

* Escape string literal

* Combine lines to reduce path

* long paths

* Use home alias

* Fix filename

* Try to see the contents of our cat'd file

* Also upload `core`

* Try running with aliased folder

* Fix path; split PR and Merge unit tests into separate jobs

* Set default threshold

* Fix typo

* Changing to scoped package names

* Adding note

* Catch more updates

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.0
 - @ohif/extension-dicom-html@0.0.4-alpha.0
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0
 - @ohif/extension-dicom-pdf@0.0.8-alpha.0
 - @ohif/extension-vtk@0.1.4-alpha.0
 - @ohif/core@0.11.1-alpha.0
 - @ohif/i18n@0.2.3-alpha.0
 - @ohif/ui@0.2.18-alpha.0
 - @ohif/viewer@0.0.22-alpha.0

* Clean up primary readme

* Support for dev and dev:* commands

* Shift build command; satisfy default PWA build

* Remove old scripts

* Clean up UI to set webpack scripts

* Tidy up project links

* Clean duplicate code in UI project

* Update UI project's docs

* Clean up ui and i18n config

* Reduce duplicate code in `@ohif/core`

* Fix @ohif/ui versions

* bump @ohif/core versions

* Redux testkit dep

* Remove unused/duplicate config files for projects/packages

* ohif-core --> @ohif/core

* Safer publish command

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.1
 - @ohif/extension-dicom-html@0.0.4-alpha.1
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1
 - @ohif/extension-dicom-pdf@0.0.8-alpha.1
 - @ohif/extension-vtk@0.1.4-alpha.1
 - @ohif/core@0.11.1-alpha.1
 - @ohif/i18n@0.2.3-alpha.1
 - @ohif/ui@0.2.18-alpha.1
 - @ohif/viewer@0.0.22-alpha.1

* test version bump

* Add global prettier config

* chore(release): publish %s [skip ci]

 - @ohif/viewer@0.0.22-alpha.2

* test lerna publish

* Update package.jsons

* Fix build scripts

* catch changes

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.2
 - @ohif/extension-dicom-html@0.0.4-alpha.2
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2
 - @ohif/extension-dicom-pdf@0.0.8-alpha.2
 - @ohif/extension-vtk@0.1.4-alpha.2
 - @ohif/core@0.11.1-alpha.2
 - @ohif/i18n@0.2.3-alpha.2
 - @ohif/ui@0.2.18-alpha.2
 - @ohif/viewer@0.0.22-alpha.3

* fix eslint issues caused by eslint 6 and our react-app config

* Publish with canary tag

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.3
 - @ohif/extension-dicom-html@0.0.4-alpha.3
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3
 - @ohif/extension-dicom-pdf@0.0.8-alpha.3
 - @ohif/extension-vtk@0.1.4-alpha.3
 - @ohif/core@0.11.1-alpha.3
 - @ohif/i18n@0.2.3-alpha.3
 - @ohif/ui@0.2.18-alpha.3
 - @ohif/viewer@0.0.22-alpha.4

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.4
 - @ohif/extension-dicom-html@0.0.4-alpha.4
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4
 - @ohif/extension-dicom-pdf@0.0.8-alpha.4
 - @ohif/extension-vtk@0.1.4-alpha.4
 - @ohif/core@0.11.1-alpha.4
 - @ohif/i18n@0.2.3-alpha.4
 - @ohif/ui@0.2.18-alpha.4
 - @ohif/viewer@0.0.22-alpha.5

* Simplify build

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.5
 - @ohif/extension-dicom-html@0.0.4-alpha.5
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5
 - @ohif/extension-dicom-pdf@0.0.8-alpha.5
 - @ohif/extension-vtk@0.1.4-alpha.5
 - @ohif/core@0.11.1-alpha.5
 - @ohif/i18n@0.2.3-alpha.5
 - @ohif/ui@0.2.18-alpha.5
 - @ohif/viewer@0.0.22-alpha.6

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.6
 - @ohif/extension-dicom-html@0.0.4-alpha.6
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6
 - @ohif/extension-dicom-pdf@0.0.8-alpha.6
 - @ohif/extension-vtk@0.1.4-alpha.6
 - @ohif/core@0.11.1-alpha.6
 - @ohif/i18n@0.2.3-alpha.6
 - @ohif/ui@0.2.18-alpha.6
 - @ohif/viewer@0.0.22-alpha.7

* Split version and publish

* chore(release): publish %s [skip ci]

 - @ohif/extension-cornerstone@0.0.39-alpha.7
 - @ohif/extension-dicom-html@0.0.4-alpha.7
 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7
 - @ohif/extension-dicom-pdf@0.0.8-alpha.7
 - @ohif/extension-vtk@0.1.4-alpha.7
 - @ohif/core@0.11.1-alpha.7
 - @ohif/i18n@0.2.3-alpha.7
 - @ohif/ui@0.2.18-alpha.7
 - @ohif/viewer@0.0.22-alpha.8

* Try simplify netlify build

* react-viewerbase --> @ohif/ui

* add test for stylus loader

* Try new way to specify publish path

* Use an output folder that won't be ignored

* Try move command

* fiddle with paths

* Dig for some information

* Make sure we're in root for our commands

* Remove discovery

* Setup script-tag example

* Fix typo

* Move config folder

* Update cornerstone extension to use shared/root webpack configs

* capture changes

* Update extension webpack configs

* Don't check in docz output

* Fix babel runtime resolution issue

* Simplify ui build steps

* Push in progress

* Shift directories

* Get viewer dev path to work

* Fix viewer commonjs build

* Fix build pwa config for viewers

* Make sure our package specific command can be called from root

* Update notes

* Fix imports and misc. merge notes

* Bump wado-image-loader version

* Switch up commands to remove webworkers copy

* Fix CI config

* Fix more broken package references

* Add react-dropzone

* Persist so e2e test can use

* Fix lockfile

* Use cypress orb to simplify CI

* Fix config

* Try again

* Install yarn latest for orb

* Install yarn a different way

* Wait on correct port

* Run tests in viewer project

* Fix cypress config

* Make Cypress happier - use default location

* Simplify e2e testing

* Capture UI changes since fork

* Catch core up

* Grab latest deps after merge

* Fix broken import

* Make sure cornerstone-wado-image-loader resolves to 3+

* Note regarding orbs

* Fix refresh on 404 routes

* Fix odd error for cornerstone-wado-image-loader

* Different target for UMD

* Simplify dev script

* Try to get fancy with netlify output

* Let's do it again

* Try to fix measurementTools issue

* See if we can get our lerna magic to work on merge to monorepo branch

platform/ui/src/viewer/ExpandableToolMenu.js

@@ -0,0 +1,136 @@
+import './ExpandableToolMenu.styl';
+
+import { OverlayTrigger } from '../components/overlayTrigger';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ToolbarButton from './ToolbarButton.js';
+import { Tooltip } from '../components/tooltip';
+
+class ExpandableToolMenu extends React.Component {
+  static propTypes = {
+    /** Button label */
+    label: PropTypes.string.isRequired,
+    /** Array of buttons to render when expanded */
+    buttons: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        icon: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.shape({
+            name: PropTypes.string.isRequired,
+          }),
+        ]),
+      })
+    ).isRequired,
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        name: PropTypes.string.isRequired,
+      }),
+    ]),
+    onGroupMenuClick: PropTypes.func,
+    activeCommand: PropTypes.string,
+  };
+
+  static defaultProps = {
+    buttons: [],
+    icon: 'ellipse-circle',
+    label: 'More',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false,
+    };
+  }
+
+  toolbarMenuOverlay = () => (
+    <Tooltip
+      placement="bottom"
+      className="tooltip-toolbar-overlay"
+      id={`${Math.random()}_tooltip-toolbar-overlay}`}
+    >
+      {this.getButtons()}
+    </Tooltip>
+  );
+
+  getButtons = () => {
+    return this.props.buttons.map((button, index) => {
+      return (
+        <ToolbarButton
+          key={index}
+          {...button}
+          isActive={button.id === this.props.activeCommand}
+        />
+      );
+    });
+  };
+
+  isActive = () => {
+    let isActive = false;
+    if (this.props.activeCommand) {
+      this.props.buttons.forEach(button => {
+        if (this.props.activeCommand === button.id) {
+          isActive = true;
+        }
+      });
+    }
+
+    return isActive;
+  };
+
+  activeIcon = () => {
+    if (this.props.activeCommand) {
+      return (
+        this.props.buttons.find(btn => this.props.activeCommand === btn.id)
+          .icon || this.props.icon
+      );
+    }
+
+    return this.props.icon;
+  };
+
+  onExpandableToolClick = () => {
+    if (this.props.onGroupMenuClick) {
+      this.props.onGroupMenuClick();
+    }
+    this.setState({
+      isExpanded: !this.state.isExpanded,
+    });
+  };
+
+  onOverlayHide = () => {
+    this.setState({
+      isExpanded: false,
+    });
+  };
+
+  render() {
+    return (
+      <OverlayTrigger
+        key="menu-button"
+        trigger="click"
+        placement="bottom"
+        rootClose={true}
+        handleHide={this.onOverlayHide}
+        onClick={this.onExpandableToolClick}
+        overlay={this.toolbarMenuOverlay()}
+      >
+        <ToolbarButton
+          key="menu-button"
+          type="tool"
+          label={this.props.label}
+          icon={this.activeIcon()}
+          className={'toolbar-button expandableToolMenu'}
+          isActive={this.isActive()}
+          isExpandable={true}
+          isExpanded={this.state.isExpanded}
+        />
+      </OverlayTrigger>
+    );
+  }
+}
+
+export default ExpandableToolMenu;

platform/ui/src/viewer/ExpandableToolMenu.styl

@@ -0,0 +1,136 @@
+.toolbarOverlay
+  border 2px solid var(--ui-border-color-dark)
+  padding 5px
+
+.tooltip-toolbar-overlay
+  margin-top 40px
+  background-color: var(--primary-background-color);
+  border: 1px solid var(--default-color);
+  border-radius: 8px;
+
+  .tooltip-arrow
+    display none
+  .tooltip-inner
+    max-width: unset
+    background: none
+
+.tooltip
+  position: absolute
+  z-index: 1070
+  display: block
+  font-style: normal
+  font-weight: normal
+  letter-spacing: normal
+  line-break: auto
+  line-height: 1.42857143
+  text-align: left
+  text-align: start
+  text-decoration: none
+  text-shadow: none
+  text-transform: none
+  white-space: normal
+  word-break: normal
+  word-spacing: normal
+  word-wrap: normal
+  font-size: 12px
+  opacity: 0
+
+  &.in
+    opacity: 0.9
+
+  &.top
+    margin-top: -3px
+    padding: 5px 0
+
+    .tooltip-arrow
+      bottom: 0
+      left: 50%
+      margin-left: -5px
+      border-width: 5px 5px 0
+      border-top-color: #000
+
+  &.right
+    margin-left: 3px
+    padding: 0 5px
+
+    .tooltip-arrow
+      top: 50%
+      left: 0
+      margin-top: -5px
+      border-width: 5px 5px 5px 0
+      border-right-color: #000
+
+  &.bottom
+    margin-top: 3px
+    padding: 5px 0
+
+    .tooltip-arrow
+      top: 0
+      left: 50%
+      margin-left: -5px
+      border-width: 0 5px 5px
+      border-bottom-color: #000
+
+  &.left
+    margin-left: -3px
+    padding: 0 5px
+
+    .tooltip-arrow
+      top: 50%
+      right: 0
+      margin-top: -5px
+      border-width: 5px 0 5px 5px
+      border-left-color: #000
+
+  &.top-left .tooltip-arrow
+    bottom: 0
+    right: 5px
+    margin-bottom: -5px
+    border-width: 5px 5px 0
+    border-top-color: #000
+
+  &.top-right .tooltip-arrow
+    bottom: 0
+    left: 5px
+    margin-bottom: -5px
+    border-width: 5px 5px 0
+    border-top-color: #000
+
+  &.bottom-left .tooltip-arrow
+    top: 0
+    right: 5px
+    margin-top: -5px
+    border-width: 0 5px 5px
+    border-bottom-color: #000
+
+  &.bottom-right .tooltip-arrow
+    top: 0
+    left: 5px
+    margin-top: -5px
+    border-width: 0 5px 5px
+    border-bottom-color: #000
+
+.tooltip-inner
+  max-width: 200px
+  padding: 3px 8px
+  color: #fff
+  text-align: center
+  background-color: #000
+  border-radius: 4px
+
+.tooltip-arrow
+  position: absolute
+  width: 0
+  height: 0
+  border-color: transparent
+  border-style: solid
+
+.fade
+  opacity: 0
+  -webkit-transition: opacity 0.15s linear
+  -o-transition: opacity 0.15s linear
+  transition: opacity 0.15s linear
+
+.fade.in
+  opacity: 1
+

platform/ui/src/viewer/PlayClipButton.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+import { Icon } from './../elements/Icon';
+import PropTypes from 'prop-types';
+
+export default class PlayClipButton extends Component {
+  static propTypes = {
+    isPlaying: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    isPlaying: false,
+  };
+
+  render() {
+    const iconName = this.props.isPlaying ? 'stop' : 'play';
+
+    return (
+      <div className="btn-group">
+        <button
+          id="playClip"
+          type="button"
+          className="imageViewerCommand btn btn-sm btn-default"
+          data-container="body"
+          data-toggle="tooltip"
+          data-placement="bottom"
+          title="Play/Stop Clip"
+        >
+          <Icon name={iconName} />
+        </button>
+        <button
+          id="toggleCineDialog"
+          type="button"
+          className="imageViewerCommand btn btn-sm btn-default"
+          data-container="body"
+          data-toggle="tooltip"
+          data-placement="bottom"
+          title="Toggle CINE Dialog"
+        >
+          <Icon name="youtube" />
+        </button>
+      </div>
+    );
+  }
+}

platform/ui/src/viewer/PresetToggle.js

@@ -0,0 +1,78 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ToolbarButton from './ToolbarButton.js';
+
+const wLPresetIDs = [
+  'setWLPresetSoftTissue',
+  'setWLPresetLung',
+  'setWLPresetLiver',
+  'setWLPresetBrain',
+];
+
+export default class PresetToggle extends Component {
+  static propTypes = {
+    buttons: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        icon: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.shape({
+            name: PropTypes.string.isRequired,
+          }),
+        ]),
+      })
+    ).isRequired,
+    setToolActive: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      presetSelected: null,
+    };
+  }
+  render() {
+    /*const items = this.props.buttons.map((item, index) => {
+      return <ToolbarButton key={index} {...item} click={this.onClick} />;
+    });*/
+
+    const wlPresetItems = this.props.buttons.map((button, index) => {
+      if (wLPresetIDs.includes(button.command)) {
+        return <ToolbarButton key={index} {...button} click={this.onClick} />;
+      }
+      return '';
+    });
+
+    const toolItems = this.props.buttons.map((button, index) => {
+      if (!wLPresetIDs.includes(button.command)) {
+        return <ToolbarButton key={index} {...button} click={this.onClick} />;
+      }
+      return '';
+    });
+
+    const selectedButton = this.props.buttons.find(button => {
+      return button.id === this.state.selected;
+    });
+
+    return (
+      <div className="PresetToggle">
+        <div className="wlPresets">{wlPresetItems}</div>
+        <div className="tools">{toolItems}</div>
+        <span className="presetSelected">
+          LEVELS:
+          {selectedButton ? selectedButton.label : 'Manual'}
+        </span>
+      </div>
+    );
+  }
+
+  onClick = id => {
+    const buttonItem = this.props.buttons.find(button => button.command === id);
+
+    this.setState({
+      selected: buttonItem.id,
+    });
+  };
+}

platform/ui/src/viewer/SimpleToolbarButton.js

@@ -0,0 +1,31 @@
+import { Icon } from './../elements/Icon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+
+export function SimpleToolbarButton(props) {
+  const className = classnames(props.className, 'btn btn-sm btn-default');
+
+  return (
+    <button
+      id={props.id}
+      type="button"
+      className={className}
+      data-container="body"
+      data-toggle="tooltip"
+      data-placement="bottom"
+      title={props.title}
+    >
+      {props.icon && <Icon name={props.icon} />}
+    </button>
+  );
+}
+
+SimpleToolbarButton.propTypes = {
+  icon: PropTypes.string,
+  title: PropTypes.string,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  onClick: PropTypes.func,
+};
+export default SimpleToolbarButton;

platform/ui/src/viewer/Toolbar.js

@@ -0,0 +1,151 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SimpleToolbarButton from './SimpleToolbarButton';
+import PlayClipButton from './PlayClipButton';
+import { LayoutButton } from './../components/layoutButton';
+
+// TODO: This should not be built in the `@ohif/ui` component
+function getDefaultButtonData() {
+  var buttonData = [
+    {
+      id: 'wwwc',
+      title: 'WW/WC',
+      className: 'imageViewerTool',
+      icon: 'sun',
+    },
+    {
+      id: 'wwwcRegion',
+      title: 'Window by Region',
+      className: 'imageViewerTool',
+      icon: 'stop',
+    },
+    {
+      id: 'magnify',
+      title: 'Magnify',
+      className: 'imageViewerTool',
+      icon: 'circle',
+    },
+    {
+      id: 'annotate',
+      title: 'Annotation',
+      className: 'imageViewerTool',
+      icon: 'arrows-alt-h',
+    },
+    {
+      id: 'invert',
+      title: 'Invert',
+      className: 'imageViewerCommand',
+      icon: 'adjust',
+    },
+    {
+      id: 'zoom',
+      title: 'Zoom',
+      className: 'imageViewerTool',
+      icon: 'search-plus',
+    },
+    {
+      id: 'pan',
+      title: 'Pan',
+      className: 'imageViewerTool',
+      icon: 'arrows',
+    },
+    {
+      id: 'stackScroll',
+      title: 'Stack Scroll',
+      className: 'imageViewerTool',
+      icon: 'bars',
+    },
+    {
+      id: 'length',
+      title: 'Length Measurement',
+      className: 'imageViewerTool',
+      icon: 'arrows-alt-v',
+    },
+    {
+      id: 'angle',
+      title: 'Angle Measurement',
+      className: 'imageViewerTool',
+      icon: 'fa fa-angle-left',
+    },
+    {
+      id: 'dragProbe',
+      title: 'Pixel Probe',
+      className: 'imageViewerTool',
+      icon: 'fa fa-dot-circle-o',
+    },
+    {
+      id: 'ellipticalRoi',
+      title: 'Elliptical ROI',
+      className: 'imageViewerTool',
+      icon: 'circle-o',
+    },
+    {
+      id: 'rectangleRoi',
+      title: 'Rectangle ROI',
+      className: 'imageViewerTool',
+      icon: 'square-o',
+    },
+    {
+      id: 'resetViewport',
+      title: 'Reset Viewport',
+      className: 'imageViewerCommand',
+      icon: 'reset',
+    },
+    {
+      id: 'clearTools',
+      title: 'Clear tools',
+      className: 'imageViewerCommand',
+      icon: 'trash',
+    },
+  ];
+  return buttonData;
+}
+
+export default class Toolbar extends Component {
+  static propTypes = {
+    buttons: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+        icon: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.shape({
+            name: PropTypes.string.isRequired,
+          }),
+        ]),
+      })
+    ).isRequired,
+    includeLayoutButton: PropTypes.bool.isRequired,
+    includePlayClipButton: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    buttons: getDefaultButtonData(),
+    includeLayoutButton: true,
+    includePlayClipButton: true,
+  };
+
+  render() {
+    var maybePlayClipButton;
+    if (this.props.includePlayClipButton) {
+      maybePlayClipButton = <PlayClipButton />;
+    }
+
+    var maybeLayoutButton;
+    if (this.props.includeLayoutButton) {
+      maybeLayoutButton = <LayoutButton />;
+    }
+
+    return (
+      <div id="toolbar">
+        <div className="btn-group">
+          {this.props.buttons.map((button, i) => {
+            return <SimpleToolbarButton {...button} key={i} />;
+          })}
+          {maybePlayClipButton}
+          {maybeLayoutButton}
+        </div>
+      </div>
+    );
+  }
+}

platform/ui/src/viewer/ToolbarButton.js

@@ -0,0 +1,64 @@
+import './toolbar-button.styl';
+
+import { Icon } from './../elements/Icon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { withTranslation } from '../utils/LanguageProvider';
+
+export function ToolbarButton(props) {
+  const { isActive, icon, labelWhenActive, onClick, t } = props;
+  const className = classnames(props.className, { active: isActive });
+  const iconProps = typeof icon === 'string' ? { name: icon } : icon;
+  const label = isActive && labelWhenActive ? labelWhenActive : props.label;
+
+  const arrowIconName = props.isExpanded ? 'caret-up' : 'caret-down';
+  const arrowIcon = props.isExpandable && (
+    <Icon name={arrowIconName} className="expand-caret" />
+  );
+
+  const handleClick = event => {
+    if (onClick) {
+      onClick(event, props);
+    }
+  };
+
+  return (
+    <div className={className} onClick={handleClick}>
+      {iconProps && <Icon {...iconProps} />}
+      <div className="toolbar-button-label">
+        {t(label)}
+        {arrowIcon}
+      </div>
+    </div>
+  );
+}
+
+ToolbarButton.propTypes = {
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  /** Display label for button */
+  label: PropTypes.string.isRequired,
+  /** Alternative text to show when button is active */
+  labelWhenActive: PropTypes.string,
+  className: PropTypes.string.isRequired,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }),
+  ]),
+  onClick: PropTypes.func,
+  /** Determines if we show expandable 'caret' symbol */
+  isExpandable: PropTypes.bool,
+  /** Direction of expandable 'caret' symbol */
+  isExpanded: PropTypes.bool,
+  t: PropTypes.func.isRequired,
+};
+
+ToolbarButton.defaultProps = {
+  isActive: false,
+  className: 'toolbar-button',
+};
+
+export default withTranslation('Buttons')(ToolbarButton);

platform/ui/src/viewer/ViewportErrorIndicator.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function ViewportErrorIndicator(props) {
+  return (
+    <div
+      className="loadingIndicator"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        margin: 'auto',
+        textAlign: 'center',
+        pointerEvents: 'none',
+      }}
+    >
+      <p>Error</p>
+      <p className="description">An error has occurred.</p>
+      <p className="details">{props.details}</p>
+    </div>
+  );
+}
+
+ViewportErrorIndicator.propTypes = {
+  details: PropTypes.string,
+};
+
+export default ViewportErrorIndicator;

platform/ui/src/viewer/ViewportLoadingIndicator.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function ViewportLoadingIndicator(props) {
+  return (
+    <div
+      className="loadingIndicator"
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        margin: 'auto',
+        textAlign: 'center',
+        pointerEvents: 'none',
+      }}
+    >
+      Loading {props.percentComplete}
+    </div>
+  );
+}
+
+ViewportLoadingIndicator.propTypes = {
+  percentComplete: PropTypes.number,
+};
+
+export default ViewportLoadingIndicator;

platform/ui/src/viewer/toolbar-button.styl

@@ -0,0 +1,33 @@
+.toolbar-button
+  height: 48px;
+  color: var(--default-color);
+  float: left;
+  text-align: center;
+  padding: 0 10px;
+  cursor: pointer;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Chrome and Opera */
+
+  .toolbar-button-label
+    font-size: 12px;
+    font-weight: 500;
+
+  .expand-caret
+    width: 8px;
+    height: 8px;
+    transform: translate(2px, 2px);
+
+  svg
+    height: 21px;
+    width: 21px;
+    margin: 2px;
+
+  &:hover
+    color: var(--hover-color);
+
+  &.active, &:active
+    color: var(--active-color);