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
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,102 @@
+import { connect } from 'react-redux';
+import { CineDialog } from '@ohif/ui';
+import OHIF from '@ohif/core';
+import csTools from 'cornerstone-tools';
+// Our target output kills the `as` and "import" throws a keyword error
+// import { import as toolImport, getToolState } from 'cornerstone-tools';
+import cloneDeep from 'lodash.clonedeep';
+
+const toolImport = csTools.import;
+const scrollToIndex = toolImport('util/scrollToIndex');
+const { setViewportSpecificData } = OHIF.redux.actions;
+
+// Why do I need or care about any of this info?
+// A dispatch action should be able to pull this at the time of an event?
+// `isPlaying` and `cineFrameRate` might matter, but I think we can prop pass for those.
+const mapStateToProps = state => {
+  // Get activeViewport's `cine` and `stack`
+  const { viewportSpecificData, activeViewportIndex } = state.viewports;
+  const { cine, dom } = viewportSpecificData[activeViewportIndex] || {};
+
+  const cineData = cine || {
+    isPlaying: false,
+    cineFrameRate: 24,
+  };
+
+  // New props we're creating?
+  return {
+    activeEnabledElement: dom,
+    activeViewportCineData: cineData,
+    activeViewportIndex: state.viewports.activeViewportIndex,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    dispatchSetViewportSpecificData: (viewportIndex, data) => {
+      dispatch(setViewportSpecificData(viewportIndex, data));
+    },
+  };
+};
+
+const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
+  const {
+    activeEnabledElement,
+    activeViewportCineData,
+    activeViewportIndex,
+  } = propsFromState;
+
+  return {
+    cineFrameRate: activeViewportCineData.cineFrameRate,
+    isPlaying: activeViewportCineData.isPlaying,
+    onPlayPauseChanged: isPlaying => {
+      const cine = cloneDeep(activeViewportCineData);
+      cine.isPlaying = !cine.isPlaying;
+
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        cine,
+      });
+    },
+    onFrameRateChanged: frameRate => {
+      const cine = cloneDeep(activeViewportCineData);
+      cine.cineFrameRate = frameRate;
+
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        cine,
+      });
+    },
+    onClickNextButton: () => {
+      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      if (!stackData || !stackData.data || !stackData.data.length) return;
+      const { currentImageIdIndex, imageIds } = stackData.data[0];
+      if (currentImageIdIndex >= imageIds.length - 1) return;
+      scrollToIndex(activeEnabledElement, currentImageIdIndex + 1);
+    },
+    onClickBackButton: () => {
+      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      if (!stackData || !stackData.data || !stackData.data.length) return;
+      const { currentImageIdIndex } = stackData.data[0];
+      if (currentImageIdIndex === 0) return;
+      scrollToIndex(activeEnabledElement, currentImageIdIndex - 1);
+    },
+    onClickSkipToStart: () => {
+      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      if (!stackData || !stackData.data || !stackData.data.length) return;
+      scrollToIndex(activeEnabledElement, 0);
+    },
+    onClickSkipToEnd: () => {
+      const stackData = csTools.getToolState(activeEnabledElement, 'stack');
+      if (!stackData || !stackData.data || !stackData.data.length) return;
+      const lastIndex = stackData.data[0].imageIds.length - 1;
+      scrollToIndex(activeEnabledElement, lastIndex);
+    },
+  };
+};
+
+const ConnectedCineDialog = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(CineDialog);
+
+export default ConnectedCineDialog;
@@ -0,0 +1,13 @@
+import Header from '../components/Header/Header.js';
+import { connect } from 'react-redux';
+
+const mapStateToProps = state => {
+  return {
+    user: state.oidc && state.oidc.user,
+    isOpen: state.ui.userPreferencesModalOpen,
+  };
+};
+
+const ConnectedHeader = connect(mapStateToProps)(Header);
+
+export default ConnectedHeader;
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import LabellingOverlay from './LabellingOverlay';
+
+const mapStateToProps = state => {
+  if (!state.ui || !state.ui.labelling) {
+    return {
+      visible: false,
+    };
+  }
+
+  const labellingFlowData = state.ui.labelling;
+
+  return {
+    visible: false,
+    ...labellingFlowData,
+  };
+};
+
+const ConnectedLabellingOverlay = connect(
+  mapStateToProps,
+  null
+)(LabellingOverlay);
+
+export default ConnectedLabellingOverlay;
@@ -0,0 +1,41 @@
+import { LayoutButton } from '@ohif/ui';
+import OHIF from '@ohif/core';
+import { connect } from 'react-redux';
+
+const { setLayout } = OHIF.redux.actions;
+
+const mapStateToProps = state => {
+  return {
+    currentLayout: state.viewports.layout,
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    // TODO: Change if layout switched becomes more complex
+    onChange: selectedCell => {
+      let viewports = [];
+      const rows = selectedCell.row + 1;
+      const columns = selectedCell.col + 1;
+      const numViewports = rows * columns;
+      for (let i = 0; i < numViewports; i++) {
+        viewports.push({
+          height: `${100 / rows}%`,
+          width: `${100 / columns}%`,
+        });
+      }
+      const layout = {
+        viewports,
+      };
+
+      dispatch(setLayout(layout));
+    },
+  };
+};
+
+const ConnectedLayoutButton = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LayoutButton);
+
+export default ConnectedLayoutButton;
@@ -0,0 +1,36 @@
+import { LayoutManager } from '@ohif/ui';
+import { MODULE_TYPES } from '@ohif/core';
+import { connect } from 'react-redux';
+import { extensionManager } from './../App.js';
+
+const mapStateToProps = state => {
+  const availableViewportModules = {};
+  const viewportModules = extensionManager.modules[MODULE_TYPES.VIEWPORT];
+
+  viewportModules.forEach(moduleDefinition => {
+    availableViewportModules[moduleDefinition.extensionId] =
+      moduleDefinition.module;
+  });
+
+  // TODO: Use something like state.plugins.defaultPlugin[MODULE_TYPES.VIEWPORT]
+  let defaultPlugin;
+  if (viewportModules.length) {
+    defaultPlugin = viewportModules[0].extensionId;
+  }
+
+  return {
+    layout: state.viewports.layout,
+    activeViewportIndex: state.viewports.activeViewportIndex,
+    // TODO: rename `availableViewportModules`
+    availablePlugins: availableViewportModules,
+    // TODO: rename `defaultViewportModule`
+    defaultPlugin,
+  };
+};
+
+const ConnectedLayoutManager = connect(
+  mapStateToProps,
+  null
+)(LayoutManager);
+
+export default ConnectedLayoutManager;
@@ -0,0 +1,103 @@
+import OHIF from "@ohif/core";
+import PluginSwitch from "./PluginSwitch.js";
+import { commandsManager } from "./../App.js";
+import { connect } from "react-redux";
+
+const { setLayout } = OHIF.redux.actions;
+
+const mapStateToProps = state => {
+  const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
+
+  return {
+    activeViewportIndex,
+    viewportSpecificData,
+    layout
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setLayout: data => {
+      dispatch(setLayout(data));
+    }
+  };
+};
+
+/*function setSingleLayoutData(originalArray, viewportIndex, data) {
+  const viewports = originalArray.slice();
+  const layoutData = Object.assign({}, viewports[viewportIndex], data);
+
+  viewports[viewportIndex] = layoutData;
+
+  return viewports;
+}*/
+
+const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
+  //const { activeViewportIndex, layout } = propsFromState;
+  //const { setLayout } = propsFromDispatch;
+
+  // TODO: Do not display certain options if the current display set
+  // cannot be displayed using these view types
+  const buttons = [
+    /*{
+      text: 'Acquired',
+      type: 'command',
+      icon: 'bars',
+      active: false,
+      onClick: () => {
+        console.warn('Original Acquisition');
+
+        const layoutData = setSingleLayoutData(
+          layout.viewports,
+          activeViewportIndex,
+          { plugin: 'cornerstone' }
+        );
+
+        setLayout({ viewports: layoutData });
+      },
+    },
+    {
+      text: 'Axial',
+      icon: 'cube',
+      active: false,
+      onClick: () => {
+        commandsManager.runCommand('axial');
+      },
+    },
+    {
+      text: 'Sagittal',
+      icon: 'cube',
+      active: false,
+      onClick: () => {
+        commandsManager.runCommand('sagittal');
+      },
+    },
+    {
+      text: 'Coronal',
+      icon: 'cube',
+      active: false,
+      onClick: () => {
+        commandsManager.runCommand('coronal');
+      },
+    },*/
+    {
+      label: "2D MPR",
+      icon: "cube",
+      onClick: () => {
+        commandsManager.runCommand("mpr2d");
+      }
+    }
+  ];
+
+  return {
+    buttons
+  };
+};
+
+const ConnectedPluginSwitch = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps
+)(PluginSwitch);
+
+export default ConnectedPluginSwitch;
@@ -0,0 +1,40 @@
+import { connect } from 'react-redux';
+import { StudyBrowser } from '@ohif/ui';
+import cloneDeep from 'lodash.clonedeep';
+
+// TODO
+// - Determine in which display set is active from Redux (activeViewportIndex and layout viewportData)
+// - Pass in errors and stack loading progress from Redux
+const mapStateToProps = (state, ownProps) => {
+  // If we know that the stack loading progress details have changed,
+  // we can try to update the component state so that the thumbnail
+  // progress bar is updated
+  const stackLoadingProgressMap = state.loading.progress;
+  const studiesWithLoadingData = cloneDeep(ownProps.studies);
+
+  studiesWithLoadingData.forEach(study => {
+    study.thumbnails.forEach(data => {
+      const { displaySetInstanceUid } = data;
+      const stackId = `StackProgress:${displaySetInstanceUid}`;
+      const stackProgressData = stackLoadingProgressMap[stackId];
+
+      let stackPercentComplete = 0;
+      if (stackProgressData) {
+        stackPercentComplete = stackProgressData.percentComplete;
+      }
+
+      data.stackPercentComplete = stackPercentComplete;
+    });
+  });
+
+  return {
+    studies: studiesWithLoadingData,
+  };
+};
+
+const ConnectedStudyBrowser = connect(
+  mapStateToProps,
+  null
+)(StudyBrowser);
+
+export default ConnectedStudyBrowser;
@@ -0,0 +1,26 @@
+import { connect } from "react-redux";
+import StudyLoadingMonitor from "../components/StudyLoadingMonitor.js";
+import OHIF from "@ohif/core";
+
+const {
+  setStudyLoadingProgress,
+  clearStudyLoadingProgress
+} = OHIF.redux.actions;
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setStudyLoadingProgress: (progressId, progressData) => {
+      dispatch(setStudyLoadingProgress(progressId, progressData));
+    },
+    clearStudyLoadingProgress: progressId => {
+      dispatch(clearStudyLoadingProgress(progressId));
+    }
+  };
+};
+
+const ConnectedStudyLoadingMonitor = connect(
+  null,
+  mapDispatchToProps
+)(StudyLoadingMonitor);
+
+export default ConnectedStudyLoadingMonitor;
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import ToolContextMenu from './ToolContextMenu';
+
+const mapStateToProps = (state, ownProps) => {
+  if (!state.ui || !state.ui.contextMenu) {
+    return {
+      visible: false,
+    };
+  }
+
+  const { viewportIndex } = ownProps;
+  const toolContextMenuData = state.ui.contextMenu[viewportIndex];
+  let availableTools;
+
+  if (
+    state.extensions &&
+    state.extensions.cornerstone &&
+    state.extensions.cornerstone.availableTools
+  ) {
+    availableTools = state.extensions.cornerstone.availableTools;
+  }
+
+  return {
+    ...toolContextMenuData,
+    availableTools,
+  };
+};
+
+const ConnectedToolContextMenu = connect(
+  mapStateToProps,
+  null
+)(ToolContextMenu);
+
+export default ConnectedToolContextMenu;
@@ -0,0 +1,15 @@
+// TODO: REPLACE THIS WITH A CONTEXT PROVIDER
+// EVERYTHING IN `VIEWER.JS` COULD USE THIS FOR APPROPRIATE CONTEXT
+import ToolbarRow from './ToolbarRow';
+import { connect } from 'react-redux';
+import { getActiveContexts } from './../store/layout/selectors.js';
+
+const mapStateToProps = state => {
+  return {
+    activeContexts: getActiveContexts(state),
+  };
+};
+
+const ConnectedToolbarRow = connect(mapStateToProps)(ToolbarRow);
+
+export default ConnectedToolbarRow;
@@ -0,0 +1,30 @@
+import { connect } from "react-redux";
+import Viewer from "./Viewer.js";
+import OHIF from "@ohif/core";
+
+const { setTimepoints, setMeasurements } = OHIF.redux.actions;
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    viewports: state.viewports.viewportSpecificData,
+    activeViewportIndex: state.viewports.activeViewportIndex
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onTimepointsUpdated: timepoints => {
+      dispatch(setTimepoints(timepoints));
+    },
+    onMeasurementsUpdated: measurements => {
+      dispatch(setMeasurements(measurements));
+    }
+  };
+};
+
+const ConnectedViewer = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Viewer);
+
+export default ConnectedViewer;
@@ -0,0 +1,37 @@
+import OHIF from "@ohif/core";
+import ViewerMain from "./ViewerMain";
+import { connect } from "react-redux";
+
+const {
+  setViewportSpecificData,
+  clearViewportSpecificData
+} = OHIF.redux.actions;
+
+const mapStateToProps = state => {
+  const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
+
+  return {
+    activeViewportIndex,
+    layout,
+    viewportSpecificData,
+    viewports: state.viewports
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setViewportSpecificData: (viewportIndex, data) => {
+      dispatch(setViewportSpecificData(viewportIndex, data));
+    },
+    clearViewportSpecificData: () => {
+      dispatch(clearViewportSpecificData());
+    }
+  };
+};
+
+const ConnectedViewerMain = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ViewerMain);
+
+export default ConnectedViewerMain;
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js';
+
+const isActive = a => a.active === true;
+
+const mapStateToProps = state => {
+  const activeServer = state.servers.servers.find(isActive);
+
+  return {
+    server: activeServer,
+  };
+};
+
+const ConnectedViewerRetrieveStudyData = connect(
+  mapStateToProps,
+  null
+)(ViewerRetrieveStudyData);
+
+export default ConnectedViewerRetrieveStudyData;
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import LabellingManager from '../components/Labelling/LabellingManager';
+
+class LabellingOverlay extends Component {
+  static propTypes = {
+    visible: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    visible: false,
+  };
+
+  render() {
+    if (!this.props.visible) {
+      return null;
+    }
+
+    return <LabellingManager {...this.props} />;
+  }
+}
+
+export default LabellingOverlay;
@@ -0,0 +1,3 @@
+.icon-rotate-120 {
+  transform: rotate(120deg);
+}
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ExpandableToolMenu } from '@ohif/ui';
+import './PluginSwitch.css';
+
+class PluginSwitch extends Component {
+  static propTypes = {
+    buttons: PropTypes.array,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    return (
+      <div className="PluginSwitch">
+        <ExpandableToolMenu buttons={this.props.buttons} text={'View'} />
+      </div>
+    );
+  }
+}
+
+export default PluginSwitch;
@@ -0,0 +1,34 @@
+.ToolContextMenu {
+  position: absolute;
+  background-color: white;
+  border: 1px solid white;
+  border-radius: 5px;
+  z-index: 1000;
+  display: block;
+  width: 170px;
+}
+
+.ToolContextMenu > ul {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.ToolContextMenu > ul > li > button {
+  padding: 10px;
+  font-size: 14px;
+  border: none;
+  color: #516873;
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+  background: none;
+}
+
+.ToolContextMenu > ul > li > button:hover {
+  color: #16202b;
+}
+
+.ToolContextMenu > ul > li > button:active {
+  color: #79f9fe;
+}
@@ -0,0 +1,253 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+import getMeasurementLocationCallback from '../lib/getMeasurementLocationCallback';
+
+import './ToolContextMenu.css';
+
+const toolTypes = [
+  'Angle',
+  'Bidirectional',
+  'Length',
+  'FreehandMouse',
+  'EllipticalRoi',
+  'CircleRoi',
+  'RectangleRoi',
+];
+
+let defaultDropdownItems = [
+  {
+    actionType: 'Delete',
+    action: ({ nearbyToolData, eventData }) => {
+      const element = eventData.element;
+
+      cornerstoneTools.removeToolState(
+        element,
+        nearbyToolData.toolType,
+        nearbyToolData.tool
+      );
+      cornerstone.updateImage(element);
+    },
+  },
+  {
+    actionType: 'setLabel',
+    action: ({ nearbyToolData, eventData }) => {
+      const { tool } = nearbyToolData;
+
+      const options = {
+        skipAddLabelButton: true,
+        editLocation: true,
+      };
+
+      getMeasurementLocationCallback(eventData, tool, options);
+    },
+  },
+  {
+    actionType: 'setDescription',
+    action: ({ nearbyToolData, eventData }) => {
+      const { tool } = nearbyToolData;
+
+      const options = {
+        editDescriptionOnDialog: true,
+      };
+
+      getMeasurementLocationCallback(eventData, tool, options);
+    },
+  },
+];
+
+function getNearbyToolData(element, coords, toolTypes) {
+  const nearbyTool = {};
+  let pointNearTool = false;
+
+  toolTypes.forEach(toolType => {
+    const toolData = cornerstoneTools.getToolState(element, toolType);
+    if (!toolData) {
+      return;
+    }
+
+    toolData.data.forEach(function(data, index) {
+      // TODO: Fix this, it's ugly
+      let toolInterface = cornerstoneTools.getToolForElement(element, toolType);
+      if (!toolInterface) {
+        toolInterface = cornerstoneTools.getToolForElement(
+          element,
+          `${toolType}Tool`
+        );
+      }
+
+      if (!toolInterface) {
+        throw new Error('Tool not found.');
+      }
+
+      if (toolInterface.pointNearTool(element, data, coords)) {
+        pointNearTool = true;
+        nearbyTool.tool = data;
+        nearbyTool.index = index;
+        nearbyTool.toolType = toolType;
+      }
+    });
+
+    if (pointNearTool) {
+      return false;
+    }
+  });
+
+  return pointNearTool ? nearbyTool : undefined;
+}
+
+function getDropdownItems(eventData, isTouchEvent = false, availableTools) {
+  const nearbyToolData = getNearbyToolData(
+    eventData.element,
+    eventData.currentPoints.canvas,
+    toolTypes,
+    availableTools
+  );
+
+  // Annotate tools for touch events already have a press handle to edit it, has a better UX for deleting it
+  if (
+    isTouchEvent &&
+    nearbyToolData &&
+    nearbyToolData.toolType === 'arrowAnnotate'
+  ) {
+    return;
+  }
+
+  let dropdownItems = [];
+  if (nearbyToolData) {
+    defaultDropdownItems.forEach(function(item) {
+      item.params = {
+        eventData,
+        nearbyToolData,
+      };
+
+      if (item.actionType === 'Delete') {
+        item.text = 'Delete measurement';
+      }
+
+      if (item.actionType === 'setLabel') {
+        item.text = 'Relabel';
+      }
+
+      if (item.actionType === 'setDescription') {
+        item.text = `${
+          nearbyToolData.tool.description ? 'Edit' : 'Add'
+        } Description`;
+      }
+
+      dropdownItems.push(item);
+    });
+  }
+
+  return dropdownItems;
+}
+
+class ToolContextMenu extends Component {
+  static propTypes = {
+    isTouchEvent: PropTypes.bool.isRequired,
+    eventData: PropTypes.object,
+    onClose: PropTypes.func,
+    availableTools: PropTypes.array,
+    visible: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    visible: true,
+    isTouchEvent: false,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.mainElement = React.createRef();
+  }
+
+  render() {
+    if (!this.props.eventData) {
+      return null;
+    }
+
+    const { isTouchEvent, eventData, availableTools } = this.props;
+    const dropdownItems = getDropdownItems(
+      eventData,
+      isTouchEvent,
+      availableTools
+    );
+
+    // Skip if there is no dropdown item
+    if (!dropdownItems.length) {
+      return '';
+    }
+
+    const dropdownComponents = dropdownItems.map(item => {
+      const itemOnClick = event => {
+        item.action(item.params);
+        if (this.props.onClose) {
+          this.props.onClose();
+        }
+      };
+
+      return (
+        <li key={item.actionType}>
+          <button className="form-action" onClick={itemOnClick}>
+            <span key={item.actionType}>{item.text}</span>
+          </button>
+        </li>
+      );
+    });
+
+    const position = {
+      top: `${eventData.currentPoints.canvas.y}px`,
+      left: `${eventData.currentPoints.canvas.x}px`,
+    };
+
+    return (
+      <div className="ToolContextMenu" style={position} ref={this.mainElement}>
+        <ul className="bounded">{dropdownComponents}</ul>
+      </div>
+    );
+  }
+
+  componentDidMount = () => {
+    if (this.mainElement.current) {
+      this.updateElementPosition();
+    }
+  };
+
+  componentDidUpdate = () => {
+    if (this.mainElement.current) {
+      this.updateElementPosition();
+    }
+  };
+
+  updateElementPosition = () => {
+    const {
+      offsetParent,
+      offsetTop,
+      offsetHeight,
+      offsetWidth,
+      offsetLeft,
+    } = this.mainElement.current;
+
+    const { eventData } = this.props;
+
+    if (offsetTop + offsetHeight > offsetParent.offsetHeight) {
+      const offBoundPixels =
+        offsetTop + offsetHeight - offsetParent.offsetHeight;
+      const top = eventData.currentPoints.canvas.y - offBoundPixels;
+
+      this.mainElement.current.style.top = `${top > 0 ? top : 0}px`;
+    }
+
+    if (offsetLeft + offsetWidth > offsetParent.offsetWidth) {
+      const offBoundPixels =
+        offsetLeft + offsetWidth - offsetParent.offsetWidth;
+      const left = eventData.currentPoints.canvas.x - offBoundPixels;
+
+      this.mainElement.current.style.left = `${left > 0 ? left : 0}px`;
+    }
+  };
+}
+
+export default ToolContextMenu;
@@ -0,0 +1,17 @@
+.ToolbarRow {
+    border-bottom: var(--ui-border-thickness) solid var(--ui-border-color);
+    flex: 0 0 auto;
+    height: var(--toolbar-height);
+    padding-left: 1rem;
+    padding-right: 1rem;
+    position: relative;
+    transition: height 300ms ease;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+ToolbarRow.expanded {
+    height: calc(var(--toolbar-height) + var(--toolbar-drawer-height));
+}
+
@@ -0,0 +1,250 @@
+import './ToolbarRow.css';
+
+import React, { Component } from 'react';
+import {
+  ExpandableToolMenu,
+  RoundedButtonGroup,
+  ToolbarButton,
+} from '@ohif/ui';
+import { commandsManager, extensionManager } from './../App.js';
+
+import ConnectedCineDialog from './ConnectedCineDialog';
+import ConnectedLayoutButton from './ConnectedLayoutButton';
+import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
+import { MODULE_TYPES } from '@ohif/core';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class ToolbarRow extends Component {
+  // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
+  // closed if selected is null/undefined
+  static propTypes = {
+    isLeftSidePanelOpen: PropTypes.bool.isRequired,
+    isRightSidePanelOpen: PropTypes.bool.isRequired,
+    selectedLeftSidePanel: PropTypes.string.isRequired,
+    selectedRightSidePanel: PropTypes.string.isRequired,
+    handleSidePanelChange: PropTypes.func,
+    activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const toolbarButtonDefinitions = _getVisibleToolbarButtons.call(this);
+    // TODO:
+    // If it's a tool that can be active... Mark it as active?
+    // - Tools that are on/off?
+    // - Tools that can be bound to multiple buttons?
+
+    // Normal ToolbarButtons...
+    // Just how high do we need to hoist this state?
+    // Why ToolbarRow instead of just Toolbar? Do we have any others?
+    this.state = {
+      toolbarButtons: toolbarButtonDefinitions,
+      activeButtons: [],
+      isCineDialogOpen: false,
+    };
+
+    this._handleBuiltIn = _handleBuiltIn.bind(this);
+
+    const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
+    this.buttonGroups = {
+      left: [
+        // TODO: This should come from extensions, instead of being baked in
+        {
+          value: 'studies',
+          icon: 'th-large',
+          bottomLabel: this.props.t('Series'),
+        },
+      ],
+      right: [],
+    };
+
+    panelModules.forEach(panelExtension => {
+      const panelModule = panelExtension.module;
+      const defaultContexts = Array.from(panelModule.defaultContext);
+
+      // MENU OPTIONS
+      panelModule.menuOptions.forEach(menuOption => {
+        const contexts = Array.from(menuOption.context || defaultContexts);
+
+        const activeContextIncludesAnyPanelContexts = this.props.activeContexts.some(
+          actx => contexts.includes(actx)
+        );
+        if (activeContextIncludesAnyPanelContexts) {
+          const menuOptionEntry = {
+            value: menuOption.target,
+            icon: menuOption.icon,
+            bottomLabel: menuOption.label,
+          };
+          const from = menuOption.from || 'right';
+
+          this.buttonGroups[from].push(menuOptionEntry);
+        }
+      });
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    const activeContextsChanged =
+      prevProps.activeContexts !== this.props.activeContexts;
+
+    if (activeContextsChanged) {
+      this.setState({
+        toolbarButtons: _getVisibleToolbarButtons.call(this),
+      });
+    }
+  }
+
+  render() {
+    const buttonComponents = _getButtonComponents.call(
+      this,
+      this.state.toolbarButtons,
+      this.state.activeButtons
+    );
+
+    const cineDialogContainerStyle = {
+      display: this.state.isCineDialogOpen ? 'block' : 'none',
+      position: 'absolute',
+      top: '82px',
+      zIndex: 999,
+    };
+
+    const onPress = (side, value) => {
+      this.props.handleSidePanelChange(side, value);
+    };
+    const onPressLeft = onPress.bind(this, 'left');
+    const onPressRight = onPress.bind(this, 'right');
+
+    return (
+      <>
+        <div className="ToolbarRow">
+          <div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
+            <RoundedButtonGroup
+              options={this.buttonGroups.left}
+              value={this.props.selectedLeftSidePanel || ''}
+              onValueChanged={onPressLeft}
+            />
+          </div>
+          {buttonComponents}
+          <ConnectedLayoutButton />
+          <ConnectedPluginSwitch />
+          <div
+            className="pull-right m-t-1 rm-x-1"
+            style={{ marginLeft: 'auto' }}
+          >
+            {this.buttonGroups.right.length && (
+              <RoundedButtonGroup
+                options={this.buttonGroups.right}
+                value={this.props.selectedRightSidePanel || ''}
+                onValueChanged={onPressRight}
+              />
+            )}
+          </div>
+        </div>
+        <div className="CineDialogContainer" style={cineDialogContainerStyle}>
+          <ConnectedCineDialog />
+        </div>
+      </>
+    );
+  }
+}
+
+/**
+ * Determine which extension buttons should be showing, if they're
+ * active, and what their onClick behavior should be.
+ */
+function _getButtonComponents(toolbarButtons, activeButtons) {
+  return toolbarButtons.map((button, index) => {
+    let activeCommand = undefined;
+
+    if (button.buttons && button.buttons.length) {
+      // Iterate over button definitions and update `onClick` behavior
+      const childButtons = button.buttons.map(childButton => {
+        childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
+
+        if (activeButtons.indexOf(childButton.id) > -1) {
+          activeCommand = childButton.id;
+        }
+
+        return childButton;
+      });
+
+      return (
+        <ExpandableToolMenu
+          key={button.id}
+          text={button.label}
+          icon={button.icon}
+          buttons={childButtons}
+          activeCommand={activeCommand}
+        />
+      );
+    }
+    return (
+      <ToolbarButton
+        key={button.id}
+        label={button.label}
+        icon={button.icon}
+        onClick={_handleToolbarButtonClick.bind(this, button)}
+        isActive={activeButtons.includes(button.id)}
+      />
+    );
+  });
+}
+
+/**
+ * A handy way for us to handle different button types. IE. firing commands for
+ * buttons, or initiation built in behavior.
+ *
+ * @param {*} button
+ * @param {*} evt
+ * @param {*} props
+ */
+function _handleToolbarButtonClick(button, evt, props) {
+  if (button.commandName) {
+    const options = Object.assign({ evt }, button.commandOptions);
+    commandsManager.runCommand(button.commandName, options);
+  }
+
+  // TODO: Use Types ENUM
+  // TODO: We can update this to be a `getter` on the extension to query
+  //       For the active tools after we apply our updates?
+  if (button.type === 'setToolActive') {
+    this.setState({
+      activeButtons: [button.id],
+    });
+  } else if (button.type === 'builtIn') {
+    this._handleBuiltIn(button.options);
+  }
+}
+
+/**
+ *
+ */
+function _getVisibleToolbarButtons() {
+  const toolbarModules = extensionManager.modules[MODULE_TYPES.TOOLBAR];
+  const toolbarButtonDefinitions = [];
+
+  toolbarModules.forEach(extension => {
+    const { definitions, defaultContext } = extension.module;
+    definitions.forEach(definition => {
+      const context = definition.context || defaultContext;
+
+      if (this.props.activeContexts.includes(context)) {
+        toolbarButtonDefinitions.push(definition);
+      }
+    });
+  });
+
+  return toolbarButtonDefinitions;
+}
+
+function _handleBuiltIn({ behavior } = {}) {
+  if (behavior === 'CINE') {
+    this.setState({
+      isCineDialogOpen: !this.state.isCineDialogOpen,
+    });
+  }
+}
+
+export default withTranslation('Common')(ToolbarRow);
@@ -0,0 +1,10 @@
+#viewer {
+  background-color: black;
+  width: 100%;
+}
+
+.loadingTextDiv {
+  color: var(--text-secondary-color);
+  font-size: 30px;
+}
+
@@ -0,0 +1,377 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { MODULE_TYPES } from '@ohif/core';
+import OHIF from '@ohif/core';
+import moment from 'moment';
+import WhiteLabellingContext from '../WhiteLabellingContext.js';
+import ConnectedHeader from './ConnectedHeader.js';
+import ConnectedToolbarRow from './ConnectedToolbarRow.js';
+import ConnectedLabellingOverlay from './ConnectedLabellingOverlay';
+import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
+import ConnectedViewerMain from './ConnectedViewerMain.js';
+import SidePanel from './../components/SidePanel.js';
+import { extensionManager } from './../App.js';
+import UserManagerContext from '../UserManagerContext';
+import './Viewer.css';
+/**
+ * Inits OHIF Hanging Protocol's onReady.
+ * It waits for OHIF Hanging Protocol to be ready to instantiate the ProtocolEngine
+ * Hanging Protocol will use OHIF LayoutManager to render viewports properly
+ */
+/*const initHangingProtocol = () => {
+    // When Hanging Protocol is ready
+    HP.ProtocolStore.onReady(() => {
+
+        // Gets all StudyMetadata objects: necessary for Hanging Protocol to access study metadata
+        const studyMetadataList = OHIF.viewer.StudyMetadataList.all();
+
+        // Instantiate StudyMetadataSource: necessary for Hanging Protocol to get study metadata
+        const studyMetadataSource = new OHIF.studies.classes.OHIFStudyMetadataSource();
+
+        // Get prior studies map
+        const studyPriorsMap = OHIF.studylist.functions.getStudyPriorsMap(studyMetadataList);
+
+        // Creates Protocol Engine object with required arguments
+        const ProtocolEngine = new HP.ProtocolEngine(layoutManager, studyMetadataList, studyPriorsMap, studyMetadataSource);
+
+        // Sets up Hanging Protocol engine
+        HP.setEngine(ProtocolEngine);
+    });
+};*/
+
+/*const viewportUtils = OHIF.viewerbase.viewportUtils;
+
+OHIF.viewer.functionList = {
+    toggleCineDialog: viewportUtils.toggleCineDialog,
+    toggleCinePlay: viewportUtils.toggleCinePlay,
+    clearTools: viewportUtils.clearTools,
+    resetViewport: viewportUtils.resetViewport,
+    invert: viewportUtils.invert
+};*/
+
+class Viewer extends Component {
+  static propTypes = {
+    studies: PropTypes.array,
+    studyInstanceUids: PropTypes.array,
+    onTimepointsUpdated: PropTypes.func,
+    onMeasurementsUpdated: PropTypes.func,
+    // window.store.getState().viewports.viewportSpecificData
+    viewports: PropTypes.object.isRequired,
+    // window.store.getState().viewports.activeViewportIndex
+    activeViewportIndex: PropTypes.number.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    OHIF.measurements.MeasurementApi.setConfiguration({
+      dataExchange: {
+        retrieve: this.retrieveMeasurements,
+        store: this.storeMeasurements,
+      },
+    });
+
+    OHIF.measurements.TimepointApi.setConfiguration({
+      dataExchange: {
+        retrieve: this.retrieveTimepoints,
+        store: this.storeTimepoints,
+        remove: this.removeTimepoint,
+        update: this.updateTimepoint,
+        disassociate: this.disassociateStudy,
+      },
+    });
+  }
+
+  state = {
+    isLeftSidePanelOpen: true,
+    isRightSidePanelOpen: false,
+    selectedRightSidePanel: '',
+    selectedLeftSidePanel: 'studies', // TODO: Don't hardcode this
+    thumbnails: [],
+  };
+
+  retrieveMeasurements = (patientId, timepointIds) => {
+    OHIF.log.info('retrieveMeasurements');
+    // TODO: Retrieve the measurements from the latest available SR
+    return Promise.resolve();
+  };
+
+  storeMeasurements = (measurementData, timepointIds) => {
+    OHIF.log.info('storeMeasurements');
+    // TODO: Store the measurements into a new SR sent to the active server
+    return Promise.resolve();
+  };
+
+  retrieveTimepoints = filter => {
+    OHIF.log.info('retrieveTimepoints');
+
+    // Get the earliest and latest study date
+    let earliestDate = new Date().toISOString();
+    let latestDate = new Date().toISOString();
+    if (this.props.studies) {
+      latestDate = new Date('1000-01-01').toISOString();
+      this.props.studies.forEach(study => {
+        const studyDate = moment(study.studyDate, 'YYYYMMDD').toISOString();
+        if (studyDate < earliestDate) {
+          earliestDate = studyDate;
+        }
+        if (studyDate > latestDate) {
+          latestDate = studyDate;
+        }
+      });
+    }
+
+    // Return a generic timepoint
+    return Promise.resolve([
+      {
+        timepointType: 'baseline',
+        timepointId: 'TimepointId',
+        studyInstanceUids: this.props.studyInstanceUids,
+        patientId: filter.patientId,
+        earliestDate,
+        latestDate,
+        isLocked: false,
+      },
+    ]);
+  };
+
+  storeTimepoints = timepointData => {
+    OHIF.log.info('storeTimepoints');
+    return Promise.resolve();
+  };
+
+  updateTimepoint = (timepointData, query) => {
+    OHIF.log.info('updateTimepoint');
+    return Promise.resolve();
+  };
+
+  removeTimepoint = timepointId => {
+    OHIF.log.info('removeTimepoint');
+    return Promise.resolve();
+  };
+
+  disassociateStudy = (timepointIds, studyInstanceUid) => {
+    OHIF.log.info('disassociateStudy');
+    return Promise.resolve();
+  };
+
+  onTimepointsUpdated = timepoints => {
+    if (this.props.onTimepointsUpdated) {
+      this.props.onTimepointsUpdated(timepoints);
+    }
+  };
+
+  onMeasurementsUpdated = measurements => {
+    if (this.props.onMeasurementsUpdated) {
+      this.props.onMeasurementsUpdated(measurements);
+    }
+  };
+
+  componentDidMount() {
+    const { studies } = this.props;
+    const { TimepointApi, MeasurementApi } = OHIF.measurements;
+    const currentTimepointId = 'TimepointId';
+
+    const timepointApi = new TimepointApi(currentTimepointId, {
+      onTimepointsUpdated: this.onTimepointsUpdated,
+    });
+
+    const measurementApi = new MeasurementApi(timepointApi, {
+      onMeasurementsUpdated: this.onMeasurementsUpdated,
+    });
+
+    this.currentTimepointId = currentTimepointId;
+    this.timepointApi = timepointApi;
+    this.measurementApi = measurementApi;
+
+    if (studies) {
+      const patientId = studies[0] && studies[0].patientId;
+
+      timepointApi.retrieveTimepoints({ patientId });
+      measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
+
+      this.setState({
+        thumbnails: _mapStudiesToThumbnails(studies),
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.studies !== prevProps.studies) {
+      const { studies } = this.props;
+      const patientId = studies[0] && studies[0].patientId;
+      const currentTimepointId = this.currentTimepointId;
+
+      this.timepointApi.retrieveTimepoints({ patientId });
+      this.measurementApi.retrieveMeasurements(patientId, [currentTimepointId]);
+
+      this.setState({
+        thumbnails: _mapStudiesToThumbnails(studies),
+      });
+    }
+  }
+
+  render() {
+    let VisiblePanelLeft, VisiblePanelRight;
+    const panelExtensions = extensionManager.modules[MODULE_TYPES.PANEL];
+
+    panelExtensions.forEach(panelExt => {
+      panelExt.module.components.forEach(comp => {
+        if (comp.id === this.state.selectedRightSidePanel) {
+          VisiblePanelRight = comp.component;
+        } else if (comp.id === this.state.selectedLeftSidePanel) {
+          VisiblePanelLeft = comp.component;
+        }
+      });
+    });
+
+    return (
+      <>
+        {/* HEADER */}
+        <WhiteLabellingContext.Consumer>
+          {whiteLabelling => (
+            <UserManagerContext.Consumer>
+              {userManager => (
+                <ConnectedHeader home={false} userManager={userManager}>
+                  {whiteLabelling.logoComponent}
+                </ConnectedHeader>
+              )}
+            </UserManagerContext.Consumer>
+          )}
+        </WhiteLabellingContext.Consumer>
+
+        {/* TOOLBAR */}
+        <ConnectedToolbarRow
+          isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
+          isRightSidePanelOpen={this.state.isRightSidePanelOpen}
+          selectedLeftSidePanel={
+            this.state.isLeftSidePanelOpen
+              ? this.state.selectedLeftSidePanel
+              : ''
+          }
+          selectedRightSidePanel={
+            this.state.isRightSidePanelOpen
+              ? this.state.selectedRightSidePanel
+              : ''
+          }
+          handleSidePanelChange={(side, selectedPanel) => {
+            const sideClicked = side && side[0].toUpperCase() + side.slice(1);
+            const openKey = `is${sideClicked}SidePanelOpen`;
+            const selectedKey = `selected${sideClicked}SidePanel`;
+            const updatedState = Object.assign({}, this.state);
+
+            const isOpen = updatedState[openKey];
+            const prevSelectedPanel = updatedState[selectedKey];
+            // RoundedButtonGroup returns `null` if selected button is clicked
+            const isSameSelectedPanel =
+              prevSelectedPanel === selectedPanel || selectedPanel === null;
+
+            updatedState[selectedKey] = selectedPanel || prevSelectedPanel;
+
+            const isClosedOrShouldClose = !isOpen || isSameSelectedPanel;
+            if (isClosedOrShouldClose) {
+              updatedState[openKey] = !updatedState[openKey];
+            }
+
+            this.setState(updatedState);
+          }}
+        />
+
+        {/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
+        {/*<StudyPrefetcher studies={this.props.studies} />*/}
+
+        {/* VIEWPORTS + SIDEPANELS */}
+        <div className="FlexboxLayout">
+          {/* LEFT */}
+          <SidePanel from="left" isOpen={this.state.isLeftSidePanelOpen}>
+            {VisiblePanelLeft ? (
+              <VisiblePanelLeft
+                viewports={this.props.viewports}
+                activeIndex={this.props.activeViewportIndex}
+              />
+            ) : (
+              <ConnectedStudyBrowser studies={this.state.thumbnails} />
+            )}
+          </SidePanel>
+
+          {/* MAIN */}
+          <div className={classNames('main-content')}>
+            <ConnectedViewerMain studies={this.props.studies} />
+          </div>
+
+          {/* RIGHT */}
+          <SidePanel from="right" isOpen={this.state.isRightSidePanelOpen}>
+            {VisiblePanelRight && (
+              <VisiblePanelRight
+                viewports={this.props.viewports}
+                activeIndex={this.props.activeViewportIndex}
+              />
+            )}
+          </SidePanel>
+        </div>
+        <ConnectedLabellingOverlay />
+      </>
+    );
+  }
+}
+
+export default Viewer;
+
+/**
+ * What types are these? Why do we have "mapping" dropped in here instead of in
+ * a mapping layer?
+ *
+ * TODO[react]:
+ * - Add sorting of display sets
+ * - Add showStackLoadingProgressBar option
+ *
+ * @param {Study[]} studies
+ * @param {DisplaySet[]} studies[].displaySets
+ */
+const _mapStudiesToThumbnails = function(studies) {
+  return studies.map(study => {
+    const { studyInstanceUid } = study;
+
+    const thumbnails = study.displaySets.map(displaySet => {
+      const {
+        displaySetInstanceUid,
+        seriesDescription,
+        seriesNumber,
+        instanceNumber,
+        numImageFrames,
+      } = displaySet;
+
+      let imageId;
+      let altImageText;
+
+      if (displaySet.modality && displaySet.modality === 'SEG') {
+        // TODO: We want to replace this with a thumbnail showing
+        // the segmentation map on the image, but this is easier
+        // and better than what we have right now.
+        altImageText = 'SEG';
+      } else if (displaySet.images && displaySet.images.length) {
+        const imageIndex = Math.floor(displaySet.images.length / 2);
+
+        imageId = displaySet.images[imageIndex].getImageId();
+      } else {
+        altImageText = displaySet.modality ? displaySet.modality : 'UN';
+      }
+
+      return {
+        imageId,
+        altImageText,
+        displaySetInstanceUid,
+        seriesDescription,
+        seriesNumber,
+        instanceNumber,
+        numImageFrames,
+      };
+    });
+
+    return {
+      studyInstanceUid,
+      thumbnails,
+    };
+  });
+};
@@ -0,0 +1,15 @@
+.drag-drop-instructions {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drag-drop-instructions h3 {
+  color: var(--active-color);
+}
+
+.drag-drop-instructions h4 {
+  color: var(--text-secondary-color);
+}
@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import { metadata, utils } from '@ohif/core';
+
+import ConnectedViewer from './ConnectedViewer.js';
+import PropTypes from 'prop-types';
+import { extensionManager } from './../App.js';
+import Dropzone from 'react-dropzone';
+import filesToStudies from '../lib/filesToStudies';
+import './ViewerLocalFileData.css';
+import { withTranslation } from 'react-i18next';
+
+const { OHIFStudyMetadata } = metadata;
+const { studyMetadataManager, updateMetaDataManager } = utils;
+
+class ViewerLocalFileData extends Component {
+  static propTypes = {
+    studies: PropTypes.array,
+  };
+
+  state = {
+    studies: null,
+    loading: false,
+    error: null,
+  };
+
+  updateStudies = studies => {
+    // Render the viewer when the data is ready
+    studyMetadataManager.purge();
+
+    // Map studies to new format, update metadata manager?
+    const updatedStudies = studies.map(study => {
+      const studyMetadata = new OHIFStudyMetadata(
+        study,
+        study.studyInstanceUid
+      );
+      const sopClassHandlerModules =
+        extensionManager.modules['sopClassHandlerModule'];
+
+      study.displaySets =
+        study.displaySets ||
+        studyMetadata.createDisplaySets(sopClassHandlerModules);
+      studyMetadata.setDisplaySets(study.displaySets);
+
+      // Updates WADO-RS metaDataManager
+      updateMetaDataManager(study);
+
+      studyMetadataManager.add(studyMetadata);
+
+      return study;
+    });
+
+    this.setState({
+      studies: updatedStudies,
+    });
+  };
+
+  render() {
+    const onDrop = async acceptedFiles => {
+      this.setState({ loading: true });
+
+      const studies = await filesToStudies(acceptedFiles);
+      const updatedStudies = this.updateStudies(studies);
+
+      if (!updatedStudies) {
+        return;
+      }
+
+      this.setState({ studies: updatedStudies, loading: false });
+    };
+
+    if (this.state.error) {
+      return <div>Error: {JSON.stringify(this.state.error)}</div>;
+    }
+
+    return (
+      <Dropzone onDrop={onDrop}>
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
+            {this.state.studies ? (
+              <ConnectedViewer
+                studies={this.state.studies}
+                studyInstanceUids={
+                  this.state.studies &&
+                  this.state.studies.map(a => a.studyInstanceUid)
+                }
+              />
+            ) : (
+              <div className={'drag-drop-instructions'}>
+                <div className={'drag-drop-contents'}>
+                  {this.state.loading ? (
+                    <h3>{this.props.t('Loading...')}</h3>
+                  ) : (
+                    <>
+                      <h3>
+                        {this.props.t(
+                          'Drag and Drop DICOM files here to load them in the Viewer'
+                        )}
+                      </h3>
+                      <h4>
+                        {this.props.t(
+                          "Or click to load the browser's file selector"
+                        )}
+                      </h4>
+                    </>
+                  )}
+                </div>
+                <input {...getInputProps()} style={{ display: 'none' }} />
+              </div>
+            )}
+          </div>
+        )}
+      </Dropzone>
+    );
+  }
+}
+
+export default withTranslation('Common')(ViewerLocalFileData);
@@ -0,0 +1,21 @@
+#viewer {
+  height: calc(100% - var(--top-bar-height));
+}
+
+#viewer > .loadingTextDiv {
+  color: var(--text-secondary-color);
+  font-size: 30px;
+  height: 100%;
+  line-height: calc(100% - var(--top-bar-height));
+}
+
+.ViewerMain {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.ViewerMain > div {
+  width: 100%;
+  height: 100%;
+}
@@ -0,0 +1,182 @@
+import './ViewerMain.css';
+
+import { Component } from 'react';
+import ConnectedLayoutManager from './ConnectedLayoutManager.js';
+import ConnectedToolContextMenu from './ConnectedToolContextMenu.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class ViewerMain extends Component {
+  static propTypes = {
+    activeViewportIndex: PropTypes.number.isRequired,
+    studies: PropTypes.array,
+    viewportSpecificData: PropTypes.object.isRequired,
+    layout: PropTypes.object.isRequired,
+    setViewportSpecificData: PropTypes.func.isRequired,
+    clearViewportSpecificData: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      displaySets: [],
+    };
+
+    this.cachedViewportData = {};
+  }
+
+  getDisplaySets(studies) {
+    const displaySets = [];
+    studies.forEach(study => {
+      study.displaySets.forEach(dSet => {
+        if (!dSet.plugin) {
+          dSet.plugin = 'cornerstone';
+        }
+        displaySets.push(dSet);
+      });
+    });
+
+    return displaySets;
+  }
+
+  findDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
+    const study = studies.find(study => {
+      return study.studyInstanceUid === studyInstanceUid;
+    });
+
+    if (!study) {
+      return;
+    }
+
+    return study.displaySets.find(displaySet => {
+      return displaySet.displaySetInstanceUid === displaySetInstanceUid;
+    });
+  }
+
+  componentDidMount() {
+    // Add beforeUnload event handler to check for unsaved changes
+    //window.addEventListener('beforeunload', unloadHandlers.beforeUnload);
+
+    // Get all the display sets for the viewer studies
+    if (this.props.studies) {
+      const displaySets = this.getDisplaySets(this.props.studies);
+
+      this.setState({
+        displaySets,
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.studies !== prevProps.studies) {
+      const displaySets = this.getDisplaySets(this.props.studies);
+
+      this.setState({
+        displaySets,
+      });
+    }
+  }
+
+  getViewportData = () => {
+    const viewportData = [];
+    const { layout, viewportSpecificData } = this.props;
+
+    for (
+      let viewportIndex = 0;
+      viewportIndex < layout.viewports.length;
+      viewportIndex++
+    ) {
+      let displaySet = viewportSpecificData[viewportIndex];
+
+      // Use the cached display set in viewport if the new one is empty
+      if (displaySet && !displaySet.displaySetInstanceUid) {
+        displaySet = this.cachedViewportData[viewportIndex];
+      }
+
+      if (
+        displaySet &&
+        displaySet.studyInstanceUid &&
+        displaySet.displaySetInstanceUid
+      ) {
+        // Get missing fields from original display set
+        const originalDisplaySet = this.findDisplaySet(
+          this.props.studies,
+          displaySet.studyInstanceUid,
+          displaySet.displaySetInstanceUid
+        );
+        viewportData.push(Object.assign({}, originalDisplaySet, displaySet));
+      } else {
+        // If the viewport is empty, get one available in study
+        const { displaySets } = this.state;
+        displaySet = displaySets.find(
+          ds =>
+            !viewportData.some(
+              v => v.displaySetInstanceUid === ds.displaySetInstanceUid
+            )
+        );
+        viewportData.push(Object.assign({}, displaySet));
+      }
+    }
+
+    this.cachedViewportData = viewportData;
+
+    return viewportData;
+  };
+
+  setViewportData = ({ viewportIndex, item }) => {
+    const displaySet = this.findDisplaySet(
+      this.props.studies,
+      item.studyInstanceUid,
+      item.displaySetInstanceUid
+    );
+
+    this.props.setViewportSpecificData(viewportIndex, displaySet);
+  };
+
+  render() {
+    return (
+      <div className="ViewerMain">
+        {this.state.displaySets.length && (
+          <ConnectedLayoutManager
+            studies={this.props.studies}
+            viewportData={this.getViewportData()}
+            setViewportData={this.setViewportData}
+          >
+            {/* Children to add to each viewport that support children */}
+            <ConnectedToolContextMenu />
+          </ConnectedLayoutManager>
+        )}
+      </div>
+    );
+  }
+
+  componentWillUnmount() {
+    // Clear the entire viewport specific data
+    const { viewportSpecificData } = this.props;
+    Object.keys(viewportSpecificData).forEach(viewportIndex => {
+      this.props.clearViewportSpecificData(viewportIndex);
+    });
+
+    // TODO: These don't have to be viewer specific?
+    // Could qualify for other routes?
+    // hotkeys.destroy();
+
+    // Remove beforeUnload event handler...
+    //window.removeEventListener('beforeunload', unloadHandlers.beforeUnload);
+    // Destroy the synchronizer used to update reference lines
+    //OHIF.viewer.updateImageSynchronizer.destroy();
+    // TODO: Instruct all plugins to clean up themselves
+    //
+    // Clear references to all stacks in the StackManager
+    //StackManager.clearStacks();
+    // @TypeSafeStudies
+    // Clears OHIF.viewer.Studies collection
+    //OHIF.viewer.Studies.removeAll();
+    // @TypeSafeStudies
+    // Clears OHIF.viewer.StudyMetadataList collection
+    //OHIF.viewer.StudyMetadataList.removeAll();
+  }
+}
+
+export default ViewerMain;
@@ -0,0 +1,89 @@
+import React, { Component } from "react";
+import { metadata, studies, utils } from "@ohif/core";
+
+import ConnectedViewer from "./ConnectedViewer.js";
+import PropTypes from "prop-types";
+import { extensionManager } from "./../App.js";
+
+const { OHIFStudyMetadata } = metadata;
+const { retrieveStudiesMetadata } = studies;
+const { studyMetadataManager, updateMetaDataManager } = utils;
+
+class ViewerRetrieveStudyData extends Component {
+  static propTypes = {
+    studyInstanceUids: PropTypes.array.isRequired,
+    seriesInstanceUids: PropTypes.array,
+    server: PropTypes.object
+  };
+
+  state = {
+    studies: null,
+    error: null
+  };
+
+  async componentDidMount() {
+    // TODO: Avoid using timepoints here
+    //const params = { studyInstanceUids, seriesInstanceUids, timepointId, timepointsFilter={} };
+    const { studyInstanceUids, seriesInstanceUids, server } = this.props;
+
+    try {
+      const studies = await retrieveStudiesMetadata(
+        server,
+        studyInstanceUids,
+        seriesInstanceUids
+      );
+
+      // Render the viewer when the data is ready
+      // TODO: CLEAR THIS SOMEWHERE ELSE
+      studyMetadataManager.purge();
+
+      // Map studies to new format, update metadata manager?
+      const updatedStudies = studies.map(study => {
+        const studyMetadata = new OHIFStudyMetadata(
+          study,
+          study.studyInstanceUid
+        );
+        const sopClassHandlerModules =
+          extensionManager.modules["sopClassHandlerModule"];
+
+        study.displaySets =
+          study.displaySets ||
+          studyMetadata.createDisplaySets(sopClassHandlerModules);
+        studyMetadata.setDisplaySets(study.displaySets);
+
+        // Updates WADO-RS metaDataManager
+        updateMetaDataManager(study);
+
+        studyMetadataManager.add(studyMetadata);
+
+        return study;
+      });
+
+      this.setState({
+        studies: updatedStudies
+      });
+    } catch (err) {
+      this.setState({
+        error: true
+      });
+
+      // TODO: Handle gracefully instead of throwing?
+      throw new Error(err);
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <div>Error: {JSON.stringify(this.state.error)}</div>;
+    }
+
+    return (
+      <ConnectedViewer
+        studies={this.state.studies}
+        studyInstanceUids={this.props.studyInstanceUids}
+      />
+    );
+  }
+}
+
+export default ViewerRetrieveStudyData;