chore(release): publish [skip ci]

- @ohif/extension-cornerstone@1.7.0 - @ohif/extension-vtk@0.54.0 - @ohif/core@1.13.0 - @ohif/ui@0.65.0 - @ohif/viewer@2.11.0
feat: Add new annotate tool using new dialog service (#1211 )
2019-11-25 22:16:35 +00:00 · 2019-11-25 17:13:42 -05:00 · 2019-11-25 15:50:36 +00:00 · 2019-11-25 10:45:37 -05:00 · 2019-11-20 19:17:36 +00:00 · 2019-11-20 14:15:10 -05:00
76 changed files with 3006 additions and 589 deletions
@@ -2,7 +2,7 @@
 name: "\U0001F41B Bug report"
 about: Create a report to help us improve
 title: ''
-labels: 'Community: Report :bug:'
+labels: 'Community: Report :bug:, Awaiting Reproduction, Triage :white_flag:'
 assignees: ''
 ---

@@ -2,7 +2,7 @@
 name: "\U0001F680 Feature request"
 about: Suggest an idea for this project
 title: ''
-labels: 'Community: Request :hand:'
+labels: 'Community: Request :hand:, Triage :white_flag:'
 assignees: ''
 ---

@@ -2,7 +2,7 @@
 name: "\U0001F917 Support Question"
 about: "I have a question \U0001F4AC"
 title: ''
-labels: 'Community: Question :question:'
+labels: 'Community: Question :question:, Triage :white_flag:'
 assignees: ''
 ---

@@ -15,7 +15,7 @@ exemptLabels:
  - 'Task: Refactor 🛠'
  - 'Task: Tests :microscope:'
  - 'PR: Awaiting Review 👀'
-  - 'Triage 🏳️'
+  - 'Triage :white_flag:'
  - 'Announcement 🎉'
 # Label to use when marking an issue as stale
 staleLabel: 'Stale :baguette_bread:'
@@ -1,5 +1,6 @@
 # OHIF Viewers

+- [Our Process](our-process.md)
 - Essentials
  - [Getting Started](essentials/getting-started.md)
  - [Installation](essentials/installation.md)
@@ -7,8 +7,8 @@ like to discuss the changes you intend to make to clarify where or how they
 should be implemented, please don't hesitate to create a new issue. At a
 minimum, you may want to read the following documentation:

- [Essentials: Getting Started](./essentials/getting-started.md)
- [Advanced: Architecture](./advanced/architecture.md)
+- [Essentials: Getting Started](/essentials/getting-started.md)
+- [Advanced: Architecture](/advanced/architecture.md)

 Pull requests that are:

@@ -0,0 +1,109 @@
+# Our Process
+
+Our process is a living, breathing thing. We strive to have regular [retrospectives][retrospective] that help us
+shape and adapt our process to our team's current needs. This document attempts to capture the broad strokes of
+that process in an effort to:
+
+- Strengthen community member involvement and understanding
+- Welcome feedback and helpful suggestions
+
+
+## Overview
+
+- [Issue Triage](#issue-triage)
+- [Issue Curation ("backlog grooming")](#issue-curation-backlog-grooming)
+- [Contributions (Pull Requests)](#contributions-pull-requests)
+- [Releases](#releases)
+
+
+_Include issue lifecycle diagram_
+
+## Issue Triage
+
+[GitHub issues][gh-issues] are the best way to provide feedback, ask questions, and suggest changes to the OHIF Viewer's core
+team. Community issues generally fall into one of three categories, and are marked with a `triage` label when created.
+
+
+|Issue Template Name     | Description                                                                             |
+|------------------------|-----------------------------------------------------------------------------------------|
+|Community: Report 🐛  | Describe a new issue; Provide steps to reproduce; Expected versus actual result?         |
+|Community: Request ✋  | Describe a proposed new feature. Why should it be implemented? What is the impact/value? |
+|Community: Question ❓ | Seek clarification or assistance relevant to the repository.                             | 
+
+_table 1. issue template names and descriptions_
+
+Issues that require `triage` are akin to support tickets. As this is often our first contact with would-be adopters and
+contributors, it's important that we strive for timely responses and satisfactory resolutions. We attempt to accomplish this
+by:
+
+1. Responding to issues requiring `triage` at least once a week
+2. Create new "official issues" from "community issues"
+3. Provide clear guidance and next steps (when applicable)
+4. Regularly clean up old (stale) issues
+
+> :pencil: Less obviously, patterns in the issues being reported can highlight areas that need improvement. For example, users often have
+difficulty navigating CORS issues when deploying the OHIF Viewer -- how do we best reduce our ticket volume for this issue?
+
+### Backlogged Issues
+
+Community issues serve as vehicles of discussion that lead us to "backlogged issues". Backlogged issues are the distilled and actionable information extracted from community issues. They contain the scope and requirements necessary for hand-off to a core-team (or community) contributor ^_^
+
+|Category| Description| Labels|
+|--------|-----| ---------|
+| Bugs   | An issue with steps that produce a bug (an unexpected result). | [Bug: Verified 🐛][label-bug] |
+| Stories| A feature/enhancement with a clear benefit, boundaries, and requirements. | [Story 🙌][label-story] |
+| Tasks  | Changes that improve [UX], [DX], or test coverage; but don't impact application behavior | [Task: CI/Tooling 🤖][label-tooling], [Task: Docs 📖][label-docs], [Task: Refactor 🛠][label-refactor], [Task: Tests 🔬][label-tests] |
+
+_table 2. backlogged issue types ([full list of labels][gh-labels])_
+
+
+## Issue Curation (["backlog grooming"][groom-backlog])
+
+If a [GitHub issue][gh-issues] has a `bug`, `story`, or `task` label; it's on our backlog. If an issue is on our backlog, it means we are, at the very least, committed to reviewing any community drafted Pull Requests to complete the issue. If you're interested in seeing an issue completed but don't know where to start, please don't hesitate to leave a comment!
+
+While we don't yet have a long-term or quarterly road map, we do regularly add items to our ["Active Development" GitHub Project Board][gh-board]. Items on this project board are either in active development by Core Team members, or queued up for development as in-progress items are completed.
+
+> :pencil: Want to contribute but not sure where to start? Check out [Up for grabs][label-grabs] issues and our [Contributing documentation][contributing-docs]
+
+## Contributions (Pull Requests)
+
+Incoming Pull Requests (PRs) are triaged using the following labels. Code review is performed on all PRs where the bug fix or added functionality is deemed appropriate:
+
+- PR: Bug Fix - Describes a PR filed to address a Bug.
+- PR: Draft - Describes a PR filed to gather early feedback from the core team, but which is not intended for merging in the short term.
+- Awaiting Response - Describes a PR where the core team is waiting for additional information from the author. This may occur before or after code review.
+- Awaiting Review -  Describes a PR where the core team has not yet performed a code review.
+- Awaiting Revisions - Following code review, this label is applied until the author has made sufficient changes.
+
+We rely on GitHub Checks and integrations with third party services to evaluate changes in code quality and test coverage. Tests must pass before a PR can be merged to master, and code quality and test coverage must not changed by a significant margin. For some repositories, visual screenshot-based tests are also included, and video recordings of end-to-end tests are stored for later review.
+
+[You can read more about our continous integration efforts here](/continous-integration.md)
+
+## Releases
+
+Releases are made automatically based on the type of commits which have been merged (major.minor.patch). Releases are automatically pushed to NPM. Release notes are automatically generated. Users can subscribe to GitHub and NPM releases.
+
+Important announcements are made on GitHub, tagged as Announcement, and pinned so that they remain at the top of the Issue page.
+
+The Core team occasionally performs full manual testing to begin the process of releasing a Stable version. Once testing is complete, the known issues are addressed and a Stable version 
+
+
+<!--
+  LINKS
+-->
+
+<!-- prettier-ignore-start -->
+[groom-backlog]: https://www.agilealliance.org/glossary/backlog-grooming
+[retrospective]: https://www.atlassian.com/team-playbook/plays/retrospective
+[gh-issues]: https://github.com/OHIF/Viewers/issues/new/choose
+[gh-labels]: https://github.com/OHIF/Viewers/labels
+[label-story]: https://github.com/OHIF/Viewers/labels/Story%20%3Araised_hands%3A
+[label-tooling]: https://github.com/OHIF/Viewers/labels/Task%3A%20CI%2FTooling%20%3Arobot%3A
+[label-docs]: https://github.com/OHIF/Viewers/labels/Task%3A%20Docs%20%3Abook%3A
+[label-refactor]: https://github.com/OHIF/Viewers/labels/Task%3A%20Refactor%20%3Ahammer_and_wrench%3A
+[label-tests]: https://github.com/OHIF/Viewers/labels/Task%3A%20Tests%20%3Amicroscope%3A
+[label-bug]: https://github.com/OHIF/Viewers/labels/Bug%3A%20Verified%20%3Abug%3A
+[gh-board]: https://github.com/OHIF/Viewers/projects/4
+[label-grabs]: https://github.com/OHIF/Viewers/issues?q=is%3Aissue+is%3Aopen+label%3A%22Up+For+Grabs+%3Araising_hand_woman%3A%22
+[contributing-docs]: https://docs.ohif.org/contributing/
+<!-- prettier-ignore-end -->
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.7.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.6.0...@ohif/extension-cornerstone@1.7.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.5.1...@ohif/extension-cornerstone@1.6.0) (2019-11-19)
+
+
+### Features
+
+* New dialog service ([#1202](https://github.com/OHIF/Viewers/issues/1202)) ([f65639c](https://github.com/OHIF/Viewers/commit/f65639c2b0dab01decd20cab2cef4263cb4fab37))
+
+
+
+
+
 ## [1.5.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.5.0...@ohif/extension-cornerstone@1.5.1) (2019-11-15)

 **Note:** Version bump only for package @ohif/extension-cornerstone
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-cornerstone",
-  "version": "1.5.1",
+  "version": "1.7.0",
  "description": "OHIF extension for Cornerstone",
  "author": "OHIF",
  "license": "MIT",
@@ -32,7 +32,7 @@
    "@ohif/ui": "^0.50.0",
    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dcmjs": "^0.6.1",
    "dicom-parser": "^1.8.3",
@@ -3,6 +3,7 @@ import cornerstone from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
 import initCornerstoneTools from './initCornerstoneTools.js';
 import queryString from 'query-string';
+import { SimpleDialog } from '@ohif/ui';

 function fallbackMetaDataProvider(type, imageId) {
  if (!imageId.includes('wado?requestType=WADO')) {
@@ -29,6 +30,28 @@ cornerstone.metaData.addProvider(fallbackMetaDataProvider, -1);
 * @param {Object|Array} configuration.csToolsConfig
 */
 export default function init({ servicesManager, configuration = {} }) {
+  const { UIDialogService } = servicesManager.services;
+  const callInputDialog = (data, event, callback) => {
+    let dialogId = UIDialogService.create({
+      content: SimpleDialog.InputDialog,
+      defaultPosition: {
+        x: (event && event.currentPoints.canvas.x) || 0,
+        y: (event && event.currentPoints.canvas.y) || 0,
+      },
+      showOverlay: true,
+      contentProps: {
+        title: 'Enter your annotation',
+        label: 'New label',
+        measurementData: data ? { description: data.text } : {},
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onSubmit: value => {
+          callback(value);
+          UIDialogService.dismiss({ id: dialogId });
+        },
+      },
+    });
+  };
+
  const { csToolsConfig } = configuration;
  const { StackManager } = OHIF.utils;
  const metadataProvider = new OHIF.cornerstone.MetadataProvider();
@@ -62,7 +85,6 @@ export default function init({ servicesManager, configuration = {} }) {
    ZoomTouchPinchTool,
    // Annotations
    EraserTool,
-    ArrowAnnotateTool,
    BidirectionalTool,
    LengthTool,
    AngleTool,
@@ -85,7 +107,6 @@ export default function init({ servicesManager, configuration = {} }) {
    ZoomTouchPinchTool,
    // Annotations
    EraserTool,
-    ArrowAnnotateTool,
    BidirectionalTool,
    LengthTool,
    AngleTool,
@@ -99,6 +120,15 @@ export default function init({ servicesManager, configuration = {} }) {

  tools.forEach(tool => csTools.addTool(tool));

+  csTools.addTool(csTools.ArrowAnnotateTool, {
+    configuration: {
+      getTextCallback: (callback, eventDetails) =>
+        callInputDialog(null, eventDetails, callback),
+      changeTextCallback: (data, eventDetails, callback) =>
+        callInputDialog(data, eventDetails, callback),
+    },
+  });
+
  csTools.setToolActive('Pan', { mouseButtonMask: 4 });
  csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
  csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });
@@ -23,6 +23,17 @@ const TOOLBAR_BUTTON_TYPES = {
  BUILT_IN: 'builtIn',
 };

+const TOOLBAR_BUTTON_BEHAVIORS = {
+  CINE: 'CINE',
+  DOWNLOAD_SCREEN_SHOT: 'DOWNLOAD_SCREEN_SHOT',
+};
+
+/* TODO: Export enums through a extension manager. */
+const enums = {
+  TOOLBAR_BUTTON_TYPES,
+  TOOLBAR_BUTTON_BEHAVIORS,
+};
+
 const definitions = [
  {
    id: 'StackScroll',
@@ -102,7 +113,7 @@ const definitions = [
    //
    type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
    options: {
-      behavior: 'CINE',
+      behavior: TOOLBAR_BUTTON_BEHAVIORS.CINE,
    },
  },
  {
@@ -220,7 +231,8 @@ const definitions = [
        //
        type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
        options: {
-          behavior: 'DOWNLOAD_SCREEN_SHOT',
+          behavior: TOOLBAR_BUTTON_BEHAVIORS.DOWNLOAD_SCREEN_SHOT,
+          togglable: true,
        },
      },
    ],
@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [0.54.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.13...@ohif/extension-vtk@0.54.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [0.53.13](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.12...@ohif/extension-vtk@0.53.13) (2019-11-25)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.12](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.11...@ohif/extension-vtk@0.53.12) (2019-11-20)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.11](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.10...@ohif/extension-vtk@0.53.11) (2019-11-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.53.10](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.9...@ohif/extension-vtk@0.53.10) (2019-11-19)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.53.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.53.8...@ohif/extension-vtk@0.53.9) (2019-11-18)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "0.53.9",
+  "version": "0.54.0",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@@ -52,9 +52,9 @@
    "react-vtkjs-viewport": "^0.3.9"
  },
  "devDependencies": {
-    "@ohif/core": "^1.10.0",
-    "@ohif/ui": "^0.62.4",
-    "cornerstone-tools": "^4.0.9",
+    "@ohif/core": "^1.13.0",
+    "@ohif/ui": "^0.65.0",
+    "cornerstone-tools": "^4.8.0",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dcmjs": "^0.6.1",
    "dicom-parser": "^1.8.3",
@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [1.13.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.12.0...@ohif/core@1.13.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+# [1.12.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.11.0...@ohif/core@1.12.0) (2019-11-19)
+
+
+### Features
+
+* New dialog service ([#1202](https://github.com/OHIF/Viewers/issues/1202)) ([f65639c](https://github.com/OHIF/Viewers/commit/f65639c2b0dab01decd20cab2cef4263cb4fab37))
+
+
+
+
+
+# [1.11.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.10.0...@ohif/core@1.11.0) (2019-11-19)
+
+
+### Features
+
+* Issue 879 viewer route query param not filtering but promoting ([#1141](https://github.com/OHIF/Viewers/issues/1141)) ([b17f753](https://github.com/OHIF/Viewers/commit/b17f753e6222045252ef885e40233681541a32e1)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
 # [1.10.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.9.1...@ohif/core@1.10.0) (2019-11-15)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/core",
-  "version": "1.10.0",
+  "version": "1.13.0",
  "description": "Generic business logic for web-based medical imaging applications",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -32,7 +32,7 @@
  },
  "peerDependencies": {
    "cornerstone-core": "^2.2.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dicom-parser": "^1.8.3"
  },
@@ -19,7 +19,11 @@ import ui from './ui';
 import user from './user.js';
 import utils from './utils/';

-import { createUINotificationService, createUIModalService } from './services';
+import {
+  createUINotificationService,
+  createUIModalService,
+  createUIDialogService,
+} from './services';

 const OHIF = {
  MODULE_TYPES,
@@ -48,6 +52,7 @@ const OHIF = {
  //
  createUINotificationService,
  createUIModalService,
+  createUIDialogService,
 };

 export {
@@ -76,6 +81,7 @@ export {
  //
  createUINotificationService,
  createUIModalService,
+  createUIDialogService,
 };

 export { OHIF };
@@ -12,6 +12,7 @@ describe('Top level exports', () => {
      //
      'createUINotificationService',
      'createUIModalService',
+      'createUIDialogService',
      //
      'utils',
      'studies',
@@ -0,0 +1,119 @@
+/**
+ * A UI Element Position
+ *
+ * @typedef {Object} ElementPosition
+ * @property {number} top -
+ * @property {number} left -
+ * @property {number} right -
+ * @property {number} bottom -
+ */
+
+/**
+ * UI Dialog
+ *
+ * @typedef {Object} DialogProps
+ * @property {string} id The dialog id.
+ * @property {ReactElement|HTMLElement} content The dialog content.
+ * @property {Object} contentProps The dialog content props.
+ * @property {boolean} [isDraggable=true] Controls if dialog content is draggable or not.
+ *  @property {boolean} [showOverlay=false] Controls dialog overlay.
+ * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+ * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
+ * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+ * @property {Function} onStop Called when dragging stops.
+ * @property {Function} onDrag Called while dragging.
+ */
+
+const uiDialogServicePublicAPI = {
+  name: 'UIDialogService',
+  dismiss,
+  dismissAll,
+  create,
+  setServiceImplementation,
+};
+
+const uiDialogServiceImplementation = {
+  _dismiss: () => console.warn('dismiss() NOT IMPLEMENTED'),
+  _dismissAll: () => console.warn('dismissAll() NOT IMPLEMENTED'),
+  _create: () => console.warn('create() NOT IMPLEMENTED'),
+};
+
+function createUIDialogService() {
+  return uiDialogServicePublicAPI;
+}
+
+/**
+ * Show a new UI dialog;
+ *
+ * @param {DialogProps} props { id, content, contentProps, onStart, onDrag, onStop, isDraggable, showOverlay, defaultPosition, position }
+ */
+function create({
+  id,
+  content,
+  contentProps,
+  onStart,
+  onDrag,
+  onStop,
+  isDraggable = true,
+  showOverlay = false,
+  defaultPosition,
+  position,
+}) {
+  return uiDialogServiceImplementation._create({
+    id,
+    content,
+    contentProps,
+    onStart,
+    onDrag,
+    onStop,
+    isDraggable,
+    showOverlay,
+    defaultPosition,
+    position,
+  });
+}
+
+/**
+ * Destroys all dialogs, if any
+ *
+ * @returns void
+ */
+function dismissAll() {
+  return uiDialogServiceImplementation._dismissAll();
+}
+
+/**
+ * Destroy the dialog, if currently created
+ *
+ * @returns void
+ */
+function dismiss({ id }) {
+  return uiDialogServiceImplementation._dismiss({ id });
+}
+
+/**
+ *
+ *
+ * @param {*} {
+ *   dismiss: dismissImplementation,
+ *   dismissAll: dismissAllImplementation,
+ *   create: createImplementation,
+ * }
+ */
+function setServiceImplementation({
+  dismiss: dismissImplementation,
+  dismissAll: dismissAllImplementation,
+  create: createImplementation,
+}) {
+  if (dismissImplementation) {
+    uiDialogServiceImplementation._dismiss = dismissImplementation;
+  }
+  if (dismissAllImplementation) {
+    uiDialogServiceImplementation._dismissAll = dismissAllImplementation;
+  }
+  if (createImplementation) {
+    uiDialogServiceImplementation._create = createImplementation;
+  }
+}
+
+export default createUIDialogService;
@@ -1,21 +1,14 @@
-/**
- * A UI Element
- *
- * @typedef {ReactElement|HTMLElement} Modal
- */
-
 /**
 * UI Modal
 *
 * @typedef {Object} ModalProps
- * @property {string} [header=null] -
- * @property {string} [footer=null] -
- * @property {string} [backdrop=false] -
- * @property {string} [keyboard=false] -
- * @property {number} [show=true] -
- * @property {string} [closeButton=true] -
- * @property {string} [title=null] - 'Modal Title'
- * @property {boolean} [customClassName=null] - '.ModalClass'
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
 */

 const uiModalServicePublicAPI = {
@@ -37,23 +30,26 @@ function createUIModalService() {
 /**
 * Show a new UI modal;
 *
- * @param {Modal} component React component
- * @param {ModalProps} props { header, footer, backdrop, keyboard, show, closeButton, title, customClassName }
+ * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
 */
-function show(
-  component,
-  props = {
-    header: null,
-    footer: null,
-    backdrop: false,
-    keyboard: false,
-    show: true,
-    closeButton: true,
-    title: null,
-    customClassName: null,
-  }
-) {
-  return uiModalServiceImplementation._show(component, props);
+function show({
+  content = null,
+  contentProps = null,
+  shouldCloseOnEsc = false,
+  isOpen = true,
+  closeButton = true,
+  title = null,
+  customClassName = null,
+}) {
+  return uiModalServiceImplementation._show({
+    content,
+    contentProps,
+    shouldCloseOnEsc,
+    isOpen,
+    closeButton,
+    title,
+    customClassName,
+  });
 }

 /**
@@ -1,5 +1,11 @@
 import ServicesManager from './ServicesManager.js';
 import createUINotificationService from './UINotificationService';
 import createUIModalService from './UIModalService';
+import createUIDialogService from './UIDialogService';

-export { createUINotificationService, createUIModalService, ServicesManager };
+export {
+  createUINotificationService,
+  createUIModalService,
+  createUIDialogService,
+  ServicesManager,
+};
@@ -40,7 +40,7 @@ export default class RetrieveMetadataLoader {
        if (result && result.length) {
          break; // closes iterator in case data is retrieved successfully
        }
-      } catch (e) {}
+      } catch (e) { }
    }

    if (loaders.next().done && !result) {
@@ -51,8 +51,8 @@ export default class RetrieveMetadataLoader {
  }

  // Methods to be overwrite
-  async configLoad() {}
-  async preLoad() {}
-  async load(preLoadData) {}
-  async posLoad(loadData) {}
+  async configLoad() { }
+  async preLoad() { }
+  async load(preLoadData) { }
+  async posLoad(loadData) { }
 }
@@ -0,0 +1,413 @@
+import DICOMWeb from '../DICOMWeb/';
+
+const WADOProxy = {
+  convertURL: (url, server) => {
+    // TODO: Remove all WADOProxy stuff from this file
+    return url;
+  },
+};
+function parseFloatArray(obj) {
+  const result = [];
+
+  if (!obj) {
+    return result;
+  }
+
+  const objs = obj.split('\\');
+  for (let i = 0; i < objs.length; i++) {
+    result.push(parseFloat(objs[i]));
+  }
+
+  return result;
+}
+
+/**
+ * Create a plain JS object that describes a study (a study descriptor object)
+ * @param {Object} server Object with server configuration parameters
+ * @param {Object} aSopInstance a SOP Instance from which study information will be added
+ */
+function createStudy(server, aSopInstance) {
+  // TODO: Pass a reference ID to the server instead of including the URLs here
+  return {
+    seriesList: [],
+    seriesMap: Object.create(null),
+    seriesLoader: null,
+    wadoUriRoot: server.wadoUriRoot,
+    wadoRoot: server.wadoRoot,
+    qidoRoot: server.qidoRoot,
+    patientName: DICOMWeb.getName(aSopInstance['00100010']),
+    patientId: DICOMWeb.getString(aSopInstance['00100020']),
+    patientAge: DICOMWeb.getNumber(aSopInstance['00101010']),
+    patientSize: DICOMWeb.getNumber(aSopInstance['00101020']),
+    patientWeight: DICOMWeb.getNumber(aSopInstance['00101030']),
+    accessionNumber: DICOMWeb.getString(aSopInstance['00080050']),
+    studyDate: DICOMWeb.getString(aSopInstance['00080020']),
+    modalities: DICOMWeb.getString(aSopInstance['00080061']),
+    studyDescription: DICOMWeb.getString(aSopInstance['00081030']),
+    imageCount: DICOMWeb.getString(aSopInstance['00201208']),
+    studyInstanceUid: DICOMWeb.getString(aSopInstance['0020000D']),
+    institutionName: DICOMWeb.getString(aSopInstance['00080080']),
+  };
+}
+
+/** Returns a WADO url for an instance
+ *
+ * @param studyInstanceUid
+ * @param seriesInstanceUid
+ * @param sopInstanceUid
+ * @returns  {string}
+ */
+function buildInstanceWadoUrl(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid
+) {
+  // TODO: This can be removed, since DICOMWebClient has the same function. Not urgent, though
+  const params = [];
+
+  params.push('requestType=WADO');
+  params.push(`studyUID=${studyInstanceUid}`);
+  params.push(`seriesUID=${seriesInstanceUid}`);
+  params.push(`objectUID=${sopInstanceUid}`);
+  params.push('contentType=application/dicom');
+  params.push('transferSyntax=*');
+
+  const paramString = params.join('&');
+
+  return `${server.wadoUriRoot}?${paramString}`;
+}
+
+function buildInstanceWadoRsUri(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid
+) {
+  return `${server.wadoRoot}/studies/${studyInstanceUid}/series/${seriesInstanceUid}/instances/${sopInstanceUid}`;
+}
+
+function buildInstanceFrameWadoRsUri(
+  server,
+  studyInstanceUid,
+  seriesInstanceUid,
+  sopInstanceUid,
+  frame
+) {
+  const baseWadoRsUri = buildInstanceWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  frame = frame != null || 1;
+
+  return `${baseWadoRsUri}/frames/${frame}`;
+}
+
+function getFrameIncrementPointer(element) {
+  const frameIncrementPointerNames = {
+    '00181065': 'frameTimeVector',
+    '00181063': 'frameTime',
+  };
+
+  if (!element || !element.Value || !element.Value.length) {
+    return;
+  }
+
+  const value = element.Value[0];
+  return frameIncrementPointerNames[value];
+}
+
+function getRadiopharmaceuticalInfo(instance) {
+  const modality = DICOMWeb.getString(instance['00080060']);
+
+  if (modality !== 'PT') {
+    return;
+  }
+
+  const radiopharmaceuticalInfo = instance['00540016'];
+  if (
+    radiopharmaceuticalInfo === undefined ||
+    !radiopharmaceuticalInfo.Value ||
+    !radiopharmaceuticalInfo.Value.length
+  ) {
+    return;
+  }
+
+  const firstPetRadiopharmaceuticalInfo = radiopharmaceuticalInfo.Value[0];
+  return {
+    radiopharmaceuticalStartTime: DICOMWeb.getString(
+      firstPetRadiopharmaceuticalInfo['00181072']
+    ),
+    radionuclideTotalDose: DICOMWeb.getNumber(
+      firstPetRadiopharmaceuticalInfo['00181074']
+    ),
+    radionuclideHalfLife: DICOMWeb.getNumber(
+      firstPetRadiopharmaceuticalInfo['00181075']
+    ),
+  };
+}
+
+/**
+ * Parses the SourceImageSequence, if it exists, in order
+ * to return a ReferenceSOPInstanceUID. The ReferenceSOPInstanceUID
+ * is used to refer to this image in any accompanying DICOM-SR documents.
+ *
+ * @param instance
+ * @returns {String} The ReferenceSOPInstanceUID
+ */
+function getSourceImageInstanceUid(instance) {
+  // TODO= Parse the whole Source Image Sequence
+  // This is a really poor workaround for now.
+  // Later we should probably parse the whole sequence.
+  var SourceImageSequence = instance['00082112'];
+  if (
+    SourceImageSequence &&
+    SourceImageSequence.Value &&
+    SourceImageSequence.Value.length &&
+    SourceImageSequence.Value[0]['00081155'].Value
+  ) {
+    return SourceImageSequence.Value[0]['00081155'].Value[0];
+  }
+}
+
+async function makeSOPInstance(server, study, instance) {
+  const { studyInstanceUid } = study;
+  const seriesInstanceUid = DICOMWeb.getString(instance['0020000E']);
+  let series = study.seriesMap[seriesInstanceUid];
+
+  if (!series) {
+    series = {
+      seriesInstanceUid,
+      seriesDescription: DICOMWeb.getString(instance['0008103E']),
+      modality: DICOMWeb.getString(instance['00080060']),
+      seriesNumber: DICOMWeb.getNumber(instance['00200011']),
+      seriesDate: DICOMWeb.getString(instance['00080021']),
+      seriesTime: DICOMWeb.getString(instance['00080031']),
+      instances: [],
+    };
+    study.seriesMap[seriesInstanceUid] = series;
+    study.seriesList.push(series);
+  }
+
+  const sopInstanceUid = DICOMWeb.getString(instance['00080018']);
+  const wadouri = buildInstanceWadoUrl(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const baseWadoRsUri = buildInstanceWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+  const wadorsuri = buildInstanceFrameWadoRsUri(
+    server,
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid
+  );
+
+  const sopInstance = {
+    imageType: DICOMWeb.getString(instance['00080008']),
+    sopClassUid: DICOMWeb.getString(instance['00080016']),
+    modality: DICOMWeb.getString(instance['00080060']),
+    sopInstanceUid,
+    instanceNumber: DICOMWeb.getNumber(instance['00200013']),
+    imagePositionPatient: DICOMWeb.getString(instance['00200032']),
+    imageOrientationPatient: DICOMWeb.getString(instance['00200037']),
+    frameOfReferenceUID: DICOMWeb.getString(instance['00200052']),
+    sliceLocation: DICOMWeb.getNumber(instance['00201041']),
+    samplesPerPixel: DICOMWeb.getNumber(instance['00280002']),
+    photometricInterpretation: DICOMWeb.getString(instance['00280004']),
+    planarConfiguration: DICOMWeb.getNumber(instance['00280006']),
+    rows: DICOMWeb.getNumber(instance['00280010']),
+    columns: DICOMWeb.getNumber(instance['00280011']),
+    pixelSpacing: DICOMWeb.getString(instance['00280030']),
+    pixelAspectRatio: DICOMWeb.getString(instance['00280034']),
+    bitsAllocated: DICOMWeb.getNumber(instance['00280100']),
+    bitsStored: DICOMWeb.getNumber(instance['00280101']),
+    highBit: DICOMWeb.getNumber(instance['00280102']),
+    pixelRepresentation: DICOMWeb.getNumber(instance['00280103']),
+    smallestPixelValue: DICOMWeb.getNumber(instance['00280106']),
+    largestPixelValue: DICOMWeb.getNumber(instance['00280107']),
+    windowCenter: DICOMWeb.getString(instance['00281050']),
+    windowWidth: DICOMWeb.getString(instance['00281051']),
+    rescaleIntercept: DICOMWeb.getNumber(instance['00281052']),
+    rescaleSlope: DICOMWeb.getNumber(instance['00281053']),
+    rescaleType: DICOMWeb.getNumber(instance['00281054']),
+    sourceImageInstanceUid: getSourceImageInstanceUid(instance),
+    laterality: DICOMWeb.getString(instance['00200062']),
+    viewPosition: DICOMWeb.getString(instance['00185101']),
+    acquisitionDateTime: DICOMWeb.getString(instance['0008002A']),
+    numberOfFrames: DICOMWeb.getNumber(instance['00280008']),
+    frameIncrementPointer: getFrameIncrementPointer(instance['00280009']),
+    frameTime: DICOMWeb.getNumber(instance['00181063']),
+    frameTimeVector: parseFloatArray(DICOMWeb.getString(instance['00181065'])),
+    sliceThickness: DICOMWeb.getNumber(instance['00180050']),
+    spacingBetweenSlices: DICOMWeb.getString(instance['00180088']),
+    lossyImageCompression: DICOMWeb.getString(instance['00282110']),
+    derivationDescription: DICOMWeb.getString(instance['00282111']),
+    lossyImageCompressionRatio: DICOMWeb.getString(instance['00282112']),
+    lossyImageCompressionMethod: DICOMWeb.getString(instance['00282114']),
+    echoNumber: DICOMWeb.getString(instance['00180086']),
+    contrastBolusAgent: DICOMWeb.getString(instance['00180010']),
+    radiopharmaceuticalInfo: getRadiopharmaceuticalInfo(instance),
+    baseWadoRsUri: baseWadoRsUri,
+    wadouri: WADOProxy.convertURL(wadouri, server),
+    wadorsuri: WADOProxy.convertURL(wadorsuri, server),
+    wadoRoot: server.wadoRoot,
+    imageRendering: server.imageRendering,
+    thumbnailRendering: server.thumbnailRendering,
+  };
+
+  // Get additional information if the instance uses "PALETTE COLOR" photometric interpretation
+  if (sopInstance.photometricInterpretation === 'PALETTE COLOR') {
+    const redPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281101'])
+    );
+    const greenPaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281102'])
+    );
+    const bluePaletteColorLookupTableDescriptor = parseFloatArray(
+      DICOMWeb.getString(instance['00281103'])
+    );
+    const palettes = await getPaletteColors(
+      server,
+      instance,
+      redPaletteColorLookupTableDescriptor
+    );
+
+    if (palettes) {
+      if (palettes.uid) {
+        sopInstance.paletteColorLookupTableUID = palettes.uid;
+      }
+
+      sopInstance.redPaletteColorLookupTableData = palettes.red;
+      sopInstance.greenPaletteColorLookupTableData = palettes.green;
+      sopInstance.bluePaletteColorLookupTableData = palettes.blue;
+      sopInstance.redPaletteColorLookupTableDescriptor = redPaletteColorLookupTableDescriptor;
+      sopInstance.greenPaletteColorLookupTableDescriptor = greenPaletteColorLookupTableDescriptor;
+      sopInstance.bluePaletteColorLookupTableDescriptor = bluePaletteColorLookupTableDescriptor;
+    }
+  }
+
+  series.instances.push(sopInstance);
+  return sopInstance;
+}
+
+function getPaletteColor(server, instance, tag, lutDescriptor) {
+  const numLutEntries = lutDescriptor[0];
+  const bits = lutDescriptor[2];
+
+  let uri = WADOProxy.convertURL(instance[tag].BulkDataURI, server);
+
+  // TODO: Workaround for dcm4chee behind SSL-terminating proxy returning
+  // incorrect bulk data URIs
+  if (server.wadoRoot.indexOf('https') === 0 && !uri.includes('https')) {
+    uri = uri.replace('http', 'https');
+  }
+
+  const config = {
+    url: server.wadoRoot, //BulkDataURI is absolute, so this isn't used
+    headers: DICOMWeb.getAuthorizationHeader(server),
+  };
+  const dicomWeb = new api.DICOMwebClient(config);
+  const options = {
+    BulkDataURI: uri,
+  };
+
+  const readUInt16 = (byteArray, position) => {
+    return byteArray[position] + byteArray[position + 1] * 256;
+  };
+
+  const arrayBufferToPaletteColorLUT = result => {
+    const arraybuffer = result[0];
+    const byteArray = new Uint8Array(arraybuffer);
+    const lut = [];
+
+    for (let i = 0; i < numLutEntries; i++) {
+      if (bits === 16) {
+        lut[i] = readUInt16(byteArray, i * 2);
+      } else {
+        lut[i] = byteArray[i];
+      }
+    }
+
+    return lut;
+  };
+
+  return dicomWeb.retrieveBulkData(options).then(arrayBufferToPaletteColorLUT);
+}
+
+/**
+ * Fetch palette colors for instances with "PALETTE COLOR" photometricInterpretation.
+ *
+ * @param server {Object} Current server;
+ * @param instance {Object} The retrieved instance metadata;
+ * @returns {String} The ReferenceSOPInstanceUID
+ */
+async function getPaletteColors(server, instance, lutDescriptor) {
+  let paletteUID = DICOMWeb.getString(instance['00281199']);
+
+  return new Promise((resolve, reject) => {
+    let entry;
+    if (paletteColorCache.isValidUID(paletteUID)) {
+      entry = paletteColorCache.get(paletteUID);
+
+      if (entry) {
+        return resolve(entry);
+      }
+    }
+
+    // no entry in cache... Fetch remote data.
+    const r = getPaletteColor(server, instance, '00281201', lutDescriptor);
+    const g = getPaletteColor(server, instance, '00281202', lutDescriptor);
+    const b = getPaletteColor(server, instance, '00281203', lutDescriptor);
+
+    const promises = [r, g, b];
+
+    Promise.all(promises).then(args => {
+      entry = {
+        red: args[0],
+        green: args[1],
+        blue: args[2],
+      };
+
+      // when paletteUID is present, the entry can be cached...
+      entry.uid = paletteUID;
+      paletteColorCache.add(entry);
+
+      resolve(entry);
+    });
+  });
+}
+
+/**
+ * Add a list of SOP Instances to a given study object descriptor
+ * @param {Object} server Object with server configuration parameters
+ * @param {Object} study The study descriptor to which the given SOP instances will be added
+ * @param {Array} sopInstanceList A list of SOP instance objects
+ */
+async function addInstancesToStudy(server, study, sopInstanceList) {
+  return Promise.all(
+    sopInstanceList.map(function(sopInstance) {
+      return makeSOPInstance(server, study, sopInstance);
+    })
+  );
+}
+
+const createStudyFromSOPInstanceList = async (server, sopInstanceList) => {
+  if (Array.isArray(sopInstanceList) && sopInstanceList.length > 0) {
+    const firstSopInstance = sopInstanceList[0];
+    const study = createStudy(server, firstSopInstance);
+    await addInstancesToStudy(server, study, sopInstanceList);
+    return study;
+  }
+  throw new Error('Failed to create study out of provided SOP instance list');
+};
+
+export { createStudyFromSOPInstanceList, addInstancesToStudy };
@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [0.65.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.2...@ohif/ui@0.65.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [0.64.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.1...@ohif/ui@0.64.2) (2019-11-25)
+
+
+### Bug Fixes
+
+* Issue branch from danny experimental changes pr 1128 ([#1150](https://github.com/OHIF/Viewers/issues/1150)) ([a870b3c](https://github.com/OHIF/Viewers/commit/a870b3cc6056cf824af422e46f1ad674910b534e)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+## [0.64.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.64.0...@ohif/ui@0.64.1) (2019-11-20)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
+# [0.64.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.63.0...@ohif/ui@0.64.0) (2019-11-19)
+
+
+### Features
+
+* New dialog service ([#1202](https://github.com/OHIF/Viewers/issues/1202)) ([f65639c](https://github.com/OHIF/Viewers/commit/f65639c2b0dab01decd20cab2cef4263cb4fab37))
+
+
+
+
+
+# [0.63.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.62.4...@ohif/ui@0.63.0) (2019-11-19)
+
+
+### Features
+
+* Issue 879 viewer route query param not filtering but promoting ([#1141](https://github.com/OHIF/Viewers/issues/1141)) ([b17f753](https://github.com/OHIF/Viewers/commit/b17f753e6222045252ef885e40233681541a32e1)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
 ## [0.62.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.62.3...@ohif/ui@0.62.4) (2019-11-18)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/ui",
-  "version": "0.62.4",
+  "version": "0.65.0",
  "description": "A set of React components for Medical Imaging Viewers",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -52,7 +52,9 @@
    "react-dnd": "9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-touch-backend": "^9.4.0",
+    "react-draggable": "^4.1.0",
    "react-i18next": "^10.11.0",
+    "react-modal": "^3.11.1",
    "react-with-direction": "1.3.0"
  },
  "devDependencies": {
@@ -1,7 +1,7 @@
 import './CineDialog.styl';

 import React, { PureComponent } from 'react';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 import { Icon } from './../../elements/Icon';
 import PropTypes from 'prop-types';

@@ -58,7 +58,7 @@ const AboutContent = () => {
  );

  return (
-    <div data-cy="about-modal">
+    <div className="AboutContent" data-cy="about-modal">
      <div className="btn-group">
        <a
          className="btn btn-default"
@@ -189,7 +189,7 @@ const ViewportDownloadForm = ({
  };

  return (
-    <>
+    <div className="ViewportDownloadForm">
      <div className="title">
        {t(
          'Please specify the dimensions, filename, and desired type for the output image.'
@@ -284,10 +284,6 @@ const ViewportDownloadForm = ({
          className="viewport-preview"
          src={viewportPreview.src}
          alt="Viewport Preview"
-          style={{
-            height: viewportPreview.height,
-            width: viewportPreview.width,
-          }}
        />
      </div>

@@ -303,7 +299,7 @@ const ViewportDownloadForm = ({
          </button>
        </div>
      </div>
-    </>
+    </div>
  );
 };

@@ -3,15 +3,13 @@
@import '../../../design/styles/common/button.styl'

 .ViewportDownloadForm
-  color: var(--text-secondary-color);
-  filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
-  border: none;
-  border-radius: 8px;
-  width: inherit;
-  padding: 15px;
-  background: transparent;
+  display: flex;
+  flex-direction: column;
  z-index: 1080 !important;

+  input, select
+    max-height: 30px;
+
  .title
    margin: 0;
    font-weight: bold;
@@ -67,6 +65,7 @@
    padding: 10px;
    border-radius: 5px;
    align-self: center;
+    margin-bottom: 20px;
    @media screen and (max-width: 1023px)
      width: 100%;
      justify-content: center;
@@ -90,7 +89,6 @@

  .actions
    display: flex;
-    height: 60px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import i18n from '@ohif/i18n';

 import './LanguageSwitcher.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 const LanguageSwitcher = () => {
  const getCurrentLanguage = (language = i18n.language) =>
@@ -1,7 +1,7 @@
 import './MeasurementTable.styl';

 import React, { Component } from 'react';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 import { Icon } from './../../elements/Icon';
 import { MeasurementTableItem } from './MeasurementTableItem.js';
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 import { Icon } from './../../elements/Icon';
 import { OverlayTrigger } from './../overlayTrigger';
@@ -1,64 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactBootstrapModal from 'react-bootstrap-modal';
+import Modal from 'react-modal';
 import classNames from 'classnames';

+import './OHIFModal.styl';
+
+const customStyle = {
+  overlay: {
+    zIndex: 1071,
+    backgroundColor: 'rgb(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+Modal.setAppElement(document.getElementById('root'));
+
 const OHIFModal = ({
  className,
  closeButton,
-  backdrop,
-  keyboard,
-  show,
+  shouldCloseOnEsc,
+  isOpen,
  title,
-  onHide,
-  footer: Footer,
-  header: Header,
+  onClose,
  children,
-}) => (
-  <ReactBootstrapModal
-    className={classNames('modal fade themed in', className)}
-    backdrop={backdrop}
-    keyboard={keyboard}
-    show={show}
-    large={true}
-    title={title}
-    onHide={onHide}
-  >
-    {(Header || title) && (
-      <ReactBootstrapModal.Header closeButton={closeButton}>
-        {title && (
-          <ReactBootstrapModal.Title>{title}</ReactBootstrapModal.Title>
-        )}
-        {Header && <Header hide={onHide} />}
-      </ReactBootstrapModal.Header>
-    )}
-    <ReactBootstrapModal.Body>{children}</ReactBootstrapModal.Body>
-    {Footer && (
-      <ReactBootstrapModal.Footer>
-        <Footer hide={onHide} />
-      </ReactBootstrapModal.Footer>
-    )}
-  </ReactBootstrapModal>
-);
+}) => {
+  const renderHeader = () => {
+    return (
+      title && (
+        <div className="OHIFModal__header">
+          <h4>{title}</h4>
+          {closeButton && (
+            <button data-cy="close-button" onClick={onClose}>
+              ×
+            </button>
+          )}
+        </div>
+      )
+    );
+  };
+
+  return (
+    <Modal
+      className={classNames('OHIFModal', className)}
+      shouldCloseOnEsc={shouldCloseOnEsc}
+      isOpen={isOpen}
+      title={title}
+      style={customStyle}
+    >
+      <>
+        {renderHeader()}
+        <div className="OHIFModal__content">{children}</div>
+      </>
+    </Modal>
+  );
+};

 OHIFModal.propTypes = {
  className: PropTypes.string,
  closeButton: PropTypes.bool,
-  backdrop: PropTypes.bool,
-  keyboard: PropTypes.bool,
-  show: PropTypes.bool,
+  shouldCloseOnEsc: PropTypes.bool,
+  isOpen: PropTypes.bool,
  title: PropTypes.string,
-  onHide: PropTypes.func,
-  footer: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]),
-  header: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-    PropTypes.func,
-  ]),
+  onClose: PropTypes.func,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
@@ -0,0 +1,67 @@
+.OHIFModal
+  background-color: var(--ui-gray-darker)
+  border-color: var(--ui-border-color)
+  color: var(--text-secondary-color)
+  border-radius: 6px
+  border: 0
+  color: var(--text-primary-color)
+  position: relative
+  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5)
+  box-shadow: 0 3px 9px rgba(0,0,0,.5);
+  background-clip: padding-box
+  outline: 0
+
+  @media (min-width: 320px)
+    width: 78%
+    min-width: 300px
+
+  @media (min-width: 768px)
+    width: 600px
+
+  @media (min-width: 992px)
+    width: 900px
+
+  &__content
+    padding: 20px
+    max-height: 90vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar
+      display: none;
+
+  &__header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    border-bottom-width: 3px
+    border-bottom-style: solid
+    border-bottom-color: #000000
+    padding: 20px
+    position: relative
+
+    h4
+      color: var(--text-secondary-color)
+      font-size: 20px
+      font-weight: 500
+      line-height: 24px
+      padding-right: 24px
+      margin: 0
+
+    button
+      cursor: pointer
+      margin: -10px 0 0 0
+      padding: 0
+      background-color: transparent
+      border: none
+      color: var(--text-secondary-color)
+      font-size: 25px
+      font-weight: lighter
+
+      &:active,
+      &:focus,
+      &:focus:active
+        background-image: none
+        outline: 0
+        box-shadow: none
@@ -3,7 +3,7 @@ import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Overlay as BaseOverlay } from 'react-overlays';
 import elementType from 'prop-types-extra/lib/elementType';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 import Fade from './Fade';

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, useState } from 'react';
 import PropTypes from 'prop-types';
+import { TextInput } from '@ohif/ui';

 import './SimpleDialog.styl';

@@ -21,6 +22,31 @@ class SimpleDialog extends Component {
    rootClass: '',
  };

+  static InputDialog = ({ onSubmit, defaultValue, title, label, onClose }) => {
+    const [value, setValue] = useState(defaultValue);
+
+    const onSubmitHandler = () => {
+      onSubmit(value);
+    };
+
+    return (
+      <div className="InputDialog">
+        <SimpleDialog
+          headerTitle={title}
+          onClose={onClose}
+          onConfirm={onSubmitHandler}
+        >
+          <TextInput
+            type="text"
+            value={value}
+            onChange={event => setValue(event.target.value)}
+            label={label}
+          />
+        </SimpleDialog>
+      </div>
+    );
+  };
+
  render() {
    return (
      <React.Fragment>
@@ -1,6 +1,10 @@
@import './../../design/styles/common/button.styl'
@import './../../design/styles/common/global.styl'

+.InputDialog
+  .simpleDialog
+    position: relative
+
 .simpleDialog
  position: fixed;
  top: 0px;
@@ -1,7 +1,7 @@
 import React from 'react';
 import SnackbarItem from './SnackbarItem';
 import './Snackbar.css';
-import { useSnackbarContext } from '../../utils/SnackbarProvider';
+import { useSnackbarContext } from '../../contextProviders';

 const SnackbarContainer = () => {
  const { snackbarItems, hide } = useSnackbarContext();
@@ -102,14 +102,14 @@ function ImageThumbnail(props) {
        {shouldRenderToCanvas() ? (
          <canvas ref={canvasRef} width={width} height={height} />
        ) : (
-          <img
-            className="static-image"
-            src={imageSrc}
-            //width={this.props.width}
-            height={height}
-            alt={''}
-          />
-        )}
+            <img
+              className="static-image"
+              src={imageSrc}
+              //width={this.props.width}
+              height={height}
+              alt={''}
+            />
+          )}
      </div>
      {loadingOrError}
      {showStackLoadingProgressBar && (
@@ -3,11 +3,22 @@ import './StudyList.styl';
 import React from 'react';
 import classNames from 'classnames';
 import TableSearchFilter from './TableSearchFilter.js';
-import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { useTranslation } from 'react-i18next';

+const getContentFromUseMediaValue = (
+  displaySize,
+  contentArrayMap,
+  defaultContent
+) => {
+  const content =
+    displaySize in contentArrayMap
+      ? contentArrayMap[displaySize]
+      : defaultContent;
+
+  return content;
+};
 /**
 *
 *
@@ -24,9 +35,10 @@ function StudyList(props) {
    filterValues,
    onFilterChange: handleFilterChange,
    onSelectItem: handleSelectItem,
-    t,
    studyListDateFilterNumDays,
+    displaySize,
  } = props;
+  const { t, ready: translationsAreReady } = useTranslation('StudyList');

  const largeTableMeta = [
    {
@@ -69,13 +81,13 @@ function StudyList(props) {

  const mediumTableMeta = [
    {
-      displayText: 'Patient / MRN',
+      displayText: `${t('Patient')} / ${t('MRN')}`,
      fieldName: 'patientNameOrId',
      inputType: 'text',
      size: 250,
    },
    {
-      displayText: 'Description',
+      displayText: t('Description'),
      fieldName: 'accessionOrModalityOrDescription',
      inputType: 'text',
      size: 350,
@@ -90,16 +102,16 @@ function StudyList(props) {

  const smallTableMeta = [
    {
-      displayText: 'Search',
+      displayText: t('Search'),
      fieldName: 'allFields',
      inputType: 'text',
      size: 100,
    },
  ];

-  const tableMeta = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-    [largeTableMeta, mediumTableMeta, smallTableMeta],
+  const tableMeta = getContentFromUseMediaValue(
+    displaySize,
+    { large: largeTableMeta, medium: mediumTableMeta, small: smallTableMeta },
    smallTableMeta
  );

@@ -107,7 +119,7 @@ function StudyList(props) {
    .map(field => field.size)
    .reduce((prev, next) => prev + next);

-  return (
+  return translationsAreReady ? (
    <table className="table table--striped table--hoverable">
      <colgroup>
        {tableMeta.map((field, i) => {
@@ -176,11 +188,12 @@ function StudyList(props) {
              studyDescription={study.studyDescription || ''}
              studyInstanceUid={study.studyInstanceUid}
              t={t}
+              displaySize={displaySize}
            />
          ))}
      </tbody>
    </table>
-  );
+  ) : null;
 }

 StudyList.propTypes = {
@@ -205,9 +218,12 @@ StudyList.propTypes = {
    patientNameOrId: PropTypes.string.isRequired,
    accessionOrModalityOrDescription: PropTypes.string.isRequired,
    allFields: PropTypes.string.isRequired,
+    studyDateTo: PropTypes.any,
+    studyDateFrom: PropTypes.any,
  }).isRequired,
  onFilterChange: PropTypes.func.isRequired,
  studyListDateFilterNumDays: PropTypes.number,
+  displaySize: PropTypes.string,
 };

 StudyList.defaultProps = {};
@@ -224,6 +240,7 @@ function TableRow(props) {
    studyInstanceUid,
    onClick: handleClick,
    t,
+    displaySize,
  } = props;

  const largeRowTemplate = (
@@ -360,9 +377,13 @@ function TableRow(props) {
    </tr>
  );

-  const rowTemplate = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
-    [largeRowTemplate, mediumRowTemplate, smallRowTemplate],
+  const rowTemplate = getContentFromUseMediaValue(
+    displaySize,
+    {
+      large: largeRowTemplate,
+      medium: mediumRowTemplate,
+      small: smallRowTemplate,
+    },
    smallRowTemplate
  );

@@ -378,11 +399,11 @@ TableRow.propTypes = {
  studyDate: PropTypes.string.isRequired,
  studyDescription: PropTypes.string.isRequired,
  studyInstanceUid: PropTypes.string.isRequired,
+  displaySize: PropTypes.string,
 };

 TableRow.defaultProps = {
  isHighlighted: false,
 };

-const connectedComponent = withTranslation('StudyList')(StudyList);
-export { connectedComponent as StudyList };
+export { StudyList };
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Icon } from './../../elements/Icon';
 // TODO: useTranslation
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 function StudyListLoadingText({ t: translate }) {
  return (
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import './PaginationArea.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 class TablePagination extends PureComponent {
  static defaultProps = {
@@ -6,6 +6,22 @@ import CustomDateRangePicker from './CustomDateRangePicker.js';
 import { Icon } from './../../elements/Icon';
 import { useTranslation } from 'react-i18next';

+const getDateEntry = (datePicked, rangeDatePicked) => {
+  return rangeDatePicked || datePicked || null;
+};
+
+const getDateEntryFromRange = (today, numOfDays, edge = 'start') => {
+  if (typeof numOfDays !== 'number') {
+    return;
+  }
+
+  if (edge === 'end') {
+    return today;
+  } else {
+    today.subtract(numOfDays, 'days');
+  }
+};
+
 function TableSearchFilter(props) {
  const {
    meta,
@@ -17,20 +33,30 @@ function TableSearchFilter(props) {
    // TODO: Rename
    studyListDateFilterNumDays,
  } = props;
+
+  const { studyDateTo, studyDateFrom } = values || {};
  const [focusedInput, setFocusedInput] = useState(null);
-  const [t] = useTranslation(); // 'Common'?
+  const { t, ready: translationsAreReady } = useTranslation('Common');

  const sortIcons = ['sort', 'sort-up', 'sort-down'];
  const sortIconForSortField =
    sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
+
  const today = moment();
  const lastWeek = moment().subtract(7, 'day');
  const lastMonth = moment().subtract(1, 'month');
-  const defaultStartDate = moment().subtract(
+
+  const defaultStartDate = getDateEntryFromRange(
+    today,
    studyListDateFilterNumDays,
-    'days'
+    'start'
  );
-  const defaultEndDate = today;
+  const defaultEndDate = getDateEntryFromRange(
+    today,
+    studyListDateFilterNumDays,
+    'end'
+  );
+
  const studyDatePresets = [
    {
      text: t('Today'),
@@ -49,56 +75,59 @@ function TableSearchFilter(props) {
    },
  ];

-  return meta.map((field, i) => {
-    const { displayText, fieldName, inputType } = field;
-    const isSortField = sortFieldName === fieldName;
-    const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
+  return translationsAreReady
+    ? meta.map((field, i) => {
+        const { displayText, fieldName, inputType } = field;
+        const isSortField = sortFieldName === fieldName;
+        const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];

-    return (
-      <th key={`${fieldName}-${i}`}>
-        <label
-          htmlFor={`filter-${fieldName}`}
-          onClick={() => onSort(fieldName)}
-        >
-          {`${displayText} `}
-          <Icon name={sortIcon} style={{ fontSize: '12px' }} />
-        </label>
-        {inputType === 'text' && (
-          <input
-            type="text"
-            id={`filter-${fieldName}`}
-            className="form-control studylist-search"
-            value={values[fieldName]}
-            onChange={e => onValueChange(fieldName, e.target.value)}
-          />
-        )}
-        {inputType === 'date-range' && (
-          // https://github.com/airbnb/react-dates
-          <CustomDateRangePicker
-            // Required
-            startDate={studyListDateFilterNumDays ? defaultStartDate : null}
-            startDateId="start-date"
-            endDate={studyListDateFilterNumDays ? defaultEndDate : null}
-            endDateId="end-date"
-            // TODO: We need a dynamic way to determine which fields values to update
-            onDatesChange={({ startDate, endDate, preset = false }) => {
-              onValueChange('studyDateFrom', startDate);
-              onValueChange('studyDateTo', endDate);
-            }}
-            focusedInput={focusedInput}
-            onFocusChange={updatedVal => setFocusedInput(updatedVal)}
-            // Optional
-            numberOfMonths={1} // For med and small screens? 2 for large?
-            showClearDates={true}
-            anchorDirection="left"
-            presets={studyDatePresets}
-            hideKeyboardShortcutsPanel={true}
-            isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
-          />
-        )}
-      </th>
-    );
-  });
+        return (
+          <th key={`${fieldName}-${i}`}>
+            <label
+              htmlFor={`filter-${fieldName}`}
+              onClick={() => onSort(fieldName)}
+            >
+              {`${displayText}`}
+              <Icon name={sortIcon} style={{ fontSize: '12px' }} />
+            </label>
+            {inputType === 'text' && (
+              <input
+                type="text"
+                id={`filter-${fieldName}`}
+                className="form-control studylist-search"
+                value={values[fieldName]}
+                onChange={e => onValueChange(fieldName, e.target.value)}
+              />
+            )}
+            {inputType === 'date-range' && (
+              // https://github.com/airbnb/react-dates
+              <CustomDateRangePicker
+                // Required
+                startDate={getDateEntry(studyDateTo, defaultStartDate)}
+                startDateId="start-date"
+                endDate={getDateEntry(studyDateFrom, defaultEndDate)}
+                endDateId="end-date"
+                autoFocus={false}
+                // TODO: We need a dynamic way to determine which fields values to update
+                onDatesChange={({ startDate, endDate, preset = false }) => {
+                  onValueChange('studyDateTo', startDate);
+                  onValueChange('studyDateFrom', endDate);
+                }}
+                focusedInput={focusedInput}
+                onFocusChange={updatedVal => setFocusedInput(updatedVal)}
+                // Optional
+                numberOfMonths={1} // For med and small screens? 2 for large?
+                showClearDates={true}
+                anchorDirection="left"
+                presets={studyDatePresets}
+                hideKeyboardShortcutsPanel={true}
+                isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
+              />
+            )}
+          </th>
+        );
+      })
+    : null;
 }

 TableSearchFilter.propTypes = {
@@ -1,7 +1,5 @@
 .HotKeysPreferences
  display: flex;
-  margin-right: -15px;
-  margin-left: -15px;

  .column
    width: 50%;
@@ -90,8 +90,8 @@ export class UserPreferences extends Component {

  render() {
    return (
-      <div>
-        <div className="dialog-separator-after">
+      <div className="UserPreferences">
+        <div className="UserPreferences__selector">
          <ul className="nav nav-tabs">
            <li
              onClick={() => {
@@ -3,23 +3,27 @@
@import './../../design/styles/common/state.styl'
@import './../../design/styles/common/global.styl'

-.modal-body
-  overflow: hidden
+.UserPreferences
+  display: flex
+  flex-direction: column

-.errorMessage
-  color: var(--state-error-text)
-  font-size: 10px
-  text-transform: uppercase;
+  &__selector
+    border-bottom: 3px solid black

-.form-content
-  border-bottom: 3px solid var(--primary-background-color)
-  margin-bottom: 20px
-  margin-left: -22px
-  margin-right: -22px
-  max-height: 70vh
-  overflow-y: auto
-  padding: 22px
-  min-height: 500px
+  .errorMessage
+    color: var(--state-error-text)
+    font-size: 10px
+    text-transform: uppercase;

-.popover
-  width: 300px
+  .form-content
+    border-bottom: 3px solid var(--primary-background-color)
+    margin-bottom: 20px
+    margin-left: -20px
+    margin-right: -20px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 20px
+    min-height: 500px
+
+  .popover
+    width: 300px
@@ -2,7 +2,7 @@ import './UserPreferencesForm.styl';

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';

 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';
@@ -67,15 +67,24 @@ class UserPreferencesForm extends Component {
        <div className="footer">
          <button
            className="btn btn-danger pull-left"
+            data-cy="reset-default-btn"
            onClick={this.props.onResetToDefaults}
          >
            {this.props.t('Reset to Defaults')}
          </button>
          <div>
-            <div onClick={this.props.onClose} className="btn btn-default">
+            <div
+              onClick={this.props.onClose}
+              className="btn btn-default"
+              data-cy="cancel-btn"
+            >
              {this.props.t('Cancel')}
            </div>
-            <button className="btn btn-primary" onClick={this.save}>
+            <button
+              className="btn btn-primary"
+              data-cy="save-btn"
+              onClick={this.save}
+            >
              {this.props.t('Save')}
            </button>
          </div>
@@ -16,7 +16,6 @@
  .footer
    display: flex
    flex-direction: row
-    padding-bottom: 20px
    justify-content: space-between

    div
@@ -0,0 +1,242 @@
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import Draggable from 'react-draggable';
+import classNames from 'classnames';
+
+import { utils } from '@ohif/core';
+
+import './DialogProvider.styl';
+
+const DialogContext = createContext(null);
+
+export const useDialog = () => useContext(DialogContext);
+
+const DialogProvider = ({ children, service }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dialogs, setDialogs] = useState([]);
+  const [lastDialogPosition, setLastDialogPosition] = useState(null);
+
+  /**
+   * Sets the implementation of a dialog service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ create, dismiss, dismissAll });
+    }
+  }, [create, dismiss, service]);
+
+  /**
+   * UI Dialog
+   *
+   * @typedef {Object} DialogProps
+   * @property {string} id The dialog id.
+   * @property {DialogContent} content The dialog content.
+   * @property {Object} contentProps The dialog content props.
+   * @property {boolean} isDraggable Controls if dialog content is draggable or not.
+   * @property {boolean} showOverlay Controls dialog overlay.
+   * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at.
+   * @property {ElementPosition} position If this property is present, the item becomes 'controlled' and is not responsive to user input.
+   * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel.
+   * @property {Function} onStop Called when dragging stops.
+   * @property {Function} onDrag Called while dragging.
+   */
+
+  /**
+   * Creates a new dialog and return its id.
+   *
+   * @param {DialogProps} props The dialog props.
+   * @returns The new dialog id.
+   */
+  const create = useCallback(props => {
+    const { id } = props;
+
+    let dialogId = id;
+    if (!dialogId) {
+      dialogId = utils.guid();
+    }
+
+    setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]);
+
+    return dialogId;
+  }, []);
+
+  /**
+   * Dismisses the dialog with a given id.
+   *
+   * @param {Object} props -
+   * @property {string} props.id The dialog id.
+   * @returns void
+   */
+  const dismiss = useCallback(({ id }) => {
+    setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id));
+  }, []);
+
+  /**
+   * Dismisses all dialogs.
+   *
+   * @returns void
+   */
+  const dismissAll = () => {
+    setDialogs([]);
+  };
+
+  /**
+   * Indicate if there are no dialogs present.
+   *
+   * @returns True if no dialogs are present.
+   */
+  const isEmpty = () => dialogs && dialogs.length < 1;
+
+  /**
+   * Moves the dialog to the foreground if clicked.
+   *
+   * @param {string} id The dialog id.
+   * @returns void
+   */
+  const _bringToFront = id => {
+    setDialogs(dialogs => {
+      const topDialog = dialogs.find(dialog => dialog.id === id);
+      return topDialog
+        ? [...dialogs.filter(dialog => dialog.id !== id), topDialog]
+        : [];
+    });
+  };
+
+  const renderDialogs = () =>
+    dialogs.map(dialog => {
+      const {
+        id,
+        content: DialogContent,
+        contentProps,
+        position,
+        defaultPosition,
+        isDraggable = true,
+        onStart,
+        onStop,
+        onDrag,
+      } = dialog;
+
+      return (
+        <Draggable
+          key={id}
+          disabled={!isDraggable}
+          position={position}
+          defaultPosition={lastDialogPosition || defaultPosition}
+          bounds="parent"
+          onStart={event => {
+            const e = event || window.event;
+            const target = e.target || e.srcElement;
+            const BLACKLIST = [
+              'SVG',
+              'BUTTON',
+              'PATH',
+              'INPUT',
+              'SPAN',
+              'LABEL',
+            ];
+            if (BLACKLIST.includes(target.tagName.toUpperCase())) {
+              return false;
+            }
+
+            if (validCallback(onStart)) {
+              return onStart(event);
+            }
+          }}
+          onStop={event => {
+            setIsDragging(false);
+
+            if (validCallback(onStop)) {
+              return onStop(event);
+            }
+          }}
+          onDrag={event => {
+            setIsDragging(true);
+            _bringToFront(id);
+            _updateLastDialogPosition(id);
+
+            if (validCallback(onDrag)) {
+              return onDrag(event);
+            }
+          }}
+        >
+          <div
+            id={`draggableItem-${id}`}
+            className={classNames('DraggableItem', isDragging && 'dragging')}
+            style={{ zIndex: '999', position: 'absolute' }}
+            onClick={() => _bringToFront(id)}
+          >
+            <DialogContent {...dialog} {...contentProps} />
+          </div>
+        </Draggable>
+      );
+    });
+
+  /**
+   * Update the last dialog position to be used as the new default position.
+   *
+   * @returns void
+   */
+  const _updateLastDialogPosition = dialogId => {
+    const draggableItemBounds = document
+      .querySelector(`#draggableItem-${dialogId}`)
+      .getBoundingClientRect();
+    setLastDialogPosition({
+      x: draggableItemBounds.x,
+      y: draggableItemBounds.y,
+    });
+  };
+
+  const validCallback = callback => callback && typeof callback === 'function';
+
+  return (
+    <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
+      <div className="DraggableArea">
+        {dialogs.some(dialog => dialog.showOverlay) ? (
+          <div className="Overlay active">{renderDialogs()}</div>
+        ) : (
+          renderDialogs()
+        )}
+      </div>
+      {children}
+    </DialogContext.Provider>
+  );
+};
+
+/**
+ *
+ * High Order Component to use the dialog methods through a Class Component
+ *
+ */
+export const withDialog = Component => {
+  return function WrappedComponent(props) {
+    const { create, dismiss, dismissAll, isEmpty } = useDialog();
+    return (
+      <Component {...props} dialog={{ create, dismiss, dismissAll, isEmpty }} />
+    );
+  };
+};
+
+DialogProvider.defaultProps = {
+  service: null,
+};
+
+DialogProvider.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.func,
+  ]).isRequired,
+  service: PropTypes.shape({
+    setServiceImplementation: PropTypes.func,
+  }),
+};
+
+export default DialogProvider;
@@ -0,0 +1,22 @@
+.DraggableItem
+  div
+    cursor: grab !important
+
+.DraggableItem.dragging
+  div
+    cursor: grabbing !important
+
+.DraggableArea, .Overlay
+  width: 100%
+  height: 100%
+  position: absolute
+
+.Overlay.active
+  position: fixed
+  z-index: 999
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  overflow: auto
+  background: rgba(0,0,0,.1)
@@ -13,17 +13,28 @@ const { Provider } = ModalContext;

 export const useModal = () => useContext(ModalContext);

+/**
+ * UI Modal
+ *
+ * @typedef {Object} ModalProps
+ * @property {ReactElement|HTMLElement} [content=null] Modal content.
+ * @property {Object} [contentProps=null] Modal content props.
+ * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
+ * @property {boolean} [closeButton=true] Should the modal body render the close button.
+ * @property {string} [title=null] Should the modal render the title independently of the body content.
+ * @property {string} [customClassName=null] The custom class to style the modal.
+ */
+
 const ModalProvider = ({ children, modal: Modal, service }) => {
  const DEFAULT_OPTIONS = {
-    component: null /* The component instance inside the modal. */,
-    header: null /* The content inside the modal header. */,
-    footer: null /* The content inside the modal footer. */,
-    backdrop: false /* Should the modal render a backdrop overlay. */,
-    keyboard: false /* Modal is dismissible via the esc key. */,
-    show: true /* Make the Modal visible or hidden. */,
-    closeButton: true /* Should the modal body render the close button. */,
-    title: null /* Should the modal render the title independently of the body content. */,
-    customClassName: null /* The custom class to style the modal. */,
+    content: null,
+    contentProps: null,
+    shouldCloseOnEsc: false,
+    isOpen: true,
+    closeButton: true,
+    title: null,
+    customClassName: '',
  };

  const [options, setOptions] = useState(DEFAULT_OPTIONS);
@@ -42,13 +53,12 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
  /**
   * Show the modal and override its configuration props.
   *
+   * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
   * @returns void
   */
-  const show = useCallback(
-    (component, props = {}) =>
-      setOptions(Object.assign({}, options, props, { component })),
-    [options]
-  );
+  const show = useCallback(props => setOptions({ ...options, ...props }), [
+    options,
+  ]);

  /**
   * Hide the modal and set its properties to default.
@@ -59,26 +69,28 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
    DEFAULT_OPTIONS,
  ]);

-  const { component: Component } = options;
+  const {
+    content: ModalContent,
+    contentProps,
+    isOpen,
+    title,
+    customClassName,
+    shouldCloseOnEsc,
+    closeButton,
+  } = options;

  return (
    <Provider value={{ show, hide }}>
-      {options.component && (
+      {ModalContent && (
        <Modal
-          className={classNames(
-            options.customClassName,
-            options.component.className
-          )}
-          backdrop={options.backdrop}
-          keyboard={options.keyboard}
-          show={options.show}
-          title={options.title}
-          closeButton={options.closeButton}
-          footer={options.footer}
-          header={options.header}
-          onHide={hide}
+          className={classNames(customClassName, ModalContent.className)}
+          shouldCloseOnEsc={shouldCloseOnEsc}
+          isOpen={isOpen}
+          title={title}
+          closeButton={closeButton}
+          onClose={hide}
        >
-          <Component {...options} show={show} hide={hide} />
+          <ModalContent {...contentProps} show={show} hide={hide} />
        </Modal>
      )}
      {children}
@@ -86,6 +98,18 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
  );
 };

+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    const { show, hide } = useModal();
+    return <Component {...props} modal={{ show, hide }} />;
+  };
+};
+
 ModalProvider.defaultProps = {
  service: null,
 };
@@ -105,18 +129,6 @@ ModalProvider.propTypes = {
  }),
 };

-/**
- * Higher Order Component to use the modal methods through a Class Component.
- *
- * @returns
- */
-export const withModal = Component => {
-  return function WrappedComponent(props) {
-    const { show, hide } = useModal();
-    return <Component {...props} modal={{ show, hide }} />;
-  };
-};
-
 export default ModalProvider;

 export const ModalConsumer = ModalContext.Consumer;
@@ -0,0 +1,20 @@
+export {
+  default as ModalProvider,
+  useModal,
+  withModal,
+  ModalConsumer,
+} from './ModalProvider.js';
+export {
+  default as SnackbarProvider,
+  useSnackbarContext,
+  withSnackbar,
+} from './SnackbarProvider.js';
+export {
+  default as LanguageProvider,
+  withTranslation,
+} from './LanguageProvider.js';
+export {
+  default as DialogProvider,
+  withDialog,
+  useDialog,
+} from './DialogProvider.js';
@@ -1,4 +1,4 @@
-import useMedia from './useMedia.js';
+import { useMedia } from './useMedia.js';
 import useDebounce from './useDebounce.js';

 export { useDebounce, useMedia };
@@ -1,54 +1,178 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import isEqual from 'lodash.isequal';
+/**
+ * Get display size value for matched mediaQueryList
+ * @param {MediaQueryList[]} mediaQueryMap - Array of mappings, containing MediaQueryLists
+ * @param {Array} mediaTypesAliases - Array of strings representing each mediaQueryAlias.
+ * @param {string} defaultDisplaySize - default display size value. Fallback value.
+ */
+const getDisplaySize = (
+  mediaQueryMap,
+  mediaTypesAliases,
+  defaultDisplaySize
+) => {
+  if ((!mediaTypesAliases && !defaultDisplaySize) || !mediaQueryMap) {
+    return;
+  }
+
+  // Get index of first media query that matches
+  const index = mediaQueryMap.findIndex(mql => mql.matches);
+
+  // Return related value or defaultDisplaySize if none
+  return index >= 0 && typeof mediaTypesAliases[index] !== 'undefined'
+    ? mediaTypesAliases[index]
+    : defaultDisplaySize;
+};
+/**
+ * Map each window MediaQueryLists
+ * @param {Array} mediaQueriesStringList - array of string media queries to be parsed
+ */
+const getMediaQueryMap = mediaQueriesStringList => {
+  return (
+    mediaQueriesStringList &&
+    mediaQueriesStringList.map(q => window.matchMedia(q))
+  );
+};
+
+const getMediaTypeAlias = (mediaQuery, state) => {
+  const { media } = mediaQuery;
+  const { mediaQueriesStringList, mediaTypesAliases } = state;
+
+  const index = mediaQueriesStringList.findIndex(originalMediaQuery => {
+    const { media: toCompareMedia } = window.matchMedia(originalMediaQuery);
+    return toCompareMedia === media;
+  });
+
+  return mediaTypesAliases[index];
+};

 /**
+ * Hook to get current displaySize value.
+ *
+ * Its state changes and also displaySize value changes in case viewport is resized.
+ * Its state changes in case mediaQueriesStringList or mediaTypesAliases changes.
+ *
+ * Current hook only offers displayMedia size, it wont expose method to change its state.
+ * @param {Array} mediaQueriesStringList - array of string media queries to be parsed
+ * @param {Array} mediaTypesAliases - array of aliases. Each value represents one mediaQueryList from array mediaQueriesStringList
+ * @param {String} defaultMediaType - default mediaTypeAlias
+ * @returns {String} current displayMedia size based on viewport size.
+ *
+ * @example <caption>Example to getDisplayMedia Size based on viewport size</caption>
+ *
+ *    const displaySize = useMedia(
+ *    ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
+ *    // Value to return for matched media query
+ *    ['large', 'medium', 'small'],
+ *      // Default value
+ *    'medium');
+ *
+ *  const currentDisplaySize = useMedia();
 *
- * @example <caption></caption>
- * const currentViewportSize = useMedia(
- *  // Media queries
- *  ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
- *  // Value to return for matched media query
- *  ['large', 'medium', 'small'],
- *  // Default value
- *  'medium'
- * );
- * @param {string[]} queries
- * @param {*} values
- * @param {*} defaultValue
- * @returns
 */
-function useMedia(queries, values, defaultValue) {
-  // Array containing a media query list for each query
-  const mediaQueryLists = queries.map(q => window.matchMedia(q));
+const useMedia = (
+  mediaQueriesStringList,
+  mediaTypesAliases,
+  defaultMediaType
+) => {
+  // MediaQuery.state is the source of truth. This hook will be dependent on it.
+  const [state, setState] = useState(() => {
+    const _mediaQueryMap = getMediaQueryMap(mediaQueriesStringList);
+    const _displaySize = getDisplaySize(
+      _mediaQueryMap,
+      mediaTypesAliases,
+      defaultMediaType
+    );

-  // Function that gets value based on matching media query
-  const getValue = () => {
-    // Get index of first media query that matches
-    const index = mediaQueryLists.findIndex(mql => mql.matches);
+    return {
+      mediaQueryMap: _mediaQueryMap,
+      displaySize: _displaySize,
+      mediaQueriesStringList,
+      mediaTypesAliases,
+      defaultMediaType,
+    };
+  });
+  let mount = useRef(false);

-    // Return related value or defaultValue if none
-    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
+  const updateDisplaySize = displaySize => {
+    if (mount.current) {
+      setState({ ...state, displaySize });
+    }
  };

-  // State and setter for matched value
-  const [value, setValue] = useState(getValue);
+  const updateState = value => {
+    const {
+      mediaQueriesStringList,
+      mediaTypesAliases,
+      defaultMediaType,
+    } = value;

-  useEffect(
-    () => {
-      // Event listener callback
-      // Note: By defining getValue outside of useEffect we ensure that it has ...
-      // ... current values of hook args (as this hook callback is created once on mount).
-      const handler = () => setValue(getValue);
+    const mediaQueryMap = getMediaQueryMap(mediaQueriesStringList);
+    const displaySize = getDisplaySize(
+      mediaQueryMap,
+      mediaTypesAliases,
+      defaultMediaType
+    );
+    // immutable state
+    // last chance to avoid setState of unmount component
+    if (mount.current) {
+      setState({
+        ...state,
+        mediaQueriesStringList,
+        mediaTypesAliases,
+        displaySize,
+        mediaQueryMap,
+      });
+    }
+  };

-      // Set a listener for each media query with above handler as callback.
-      mediaQueryLists.forEach(mql => mql.addListener(handler));
+  const onMediaQueryChange = useCallback(mediaQuery => {
+    if (mediaQuery.matches) {
+      const nextDisplaySize = getMediaTypeAlias(mediaQuery, state);
+      updateDisplaySize(nextDisplaySize);
+    }
+  }, []);

-      // Remove listeners on cleanup
-      return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
-    },
-    [] // Empty array ensures effect is only run on mount and unmount
-  );
+  // update state of MediaQuery in case mediaQueriesStringList or mediaTypesAliases has changed
+  useEffect(() => {
+    const {
+      mediaQueriesStringList: _mediaQueriesStringList,
+      mediaTypesAliases: _mediaTypesAliases,
+    } = state;
+    if (
+      (mediaQueriesStringList &&
+        !isEqual(mediaQueriesStringList, _mediaQueriesStringList)) ||
+      (mediaTypesAliases && !isEqual(mediaTypesAliases, _mediaTypesAliases))
+    ) {
+      updateState({
+        mediaQueriesStringList,
+        mediaTypesAliases,
+      });
+    }
+  }, [mediaQueriesStringList, mediaTypesAliases]);

-  return value;
-}
+  // re-assign window resizing listeners
+  useEffect(() => {
+    const { mediaQueryMap } = state;
+    mediaQueryMap.forEach(mql => {
+      mql.removeListener(onMediaQueryChange);
+      mql.addListener(onMediaQueryChange);
+    });
+  }, [state.mediaQueryMap]);

-export default useMedia;
+  useEffect(() => {
+    mount.current = true;
+
+    return () => {
+      mount.current = false;
+      const { mediaQueryMap } = state;
+      mediaQueryMap.forEach(mql => {
+        mql.removeListener(onMediaQueryChange);
+      });
+    };
+  }, []);
+
+  return state.displaySize;
+};
+
+export { useMedia };
@@ -49,15 +49,18 @@ import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
 import Toolbar from './viewer/Toolbar.js';
 import ToolbarButton from './viewer/ToolbarButton.js';
 import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
-import SnackbarProvider, {
+import {
+  SnackbarProvider,
  useSnackbarContext,
  withSnackbar,
-} from './utils/SnackbarProvider';
-import ModalProvider, {
+  DialogProvider,
+  useDialog,
+  withDialog,
+  ModalProvider,
+  ModalConsumer,
  useModal,
  withModal,
-  ModalConsumer,
-} from './utils/ModalProvider';
+} from './contextProviders';

 export {
  // Elements
@@ -111,6 +114,9 @@ export {
  ModalConsumer,
  withModal,
  OHIFModal,
+  DialogProvider,
+  withDialog,
+  useDialog,
  // Hooks
  useDebounce,
  useMedia,
@@ -4,7 +4,7 @@ import { Icon } from './../elements/Icon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { withTranslation } from '../utils/LanguageProvider';
+import { withTranslation } from '../contextProviders';

 export function ToolbarButton(props) {
  const { isActive, icon, labelWhenActive, onClick, t } = props;
@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [2.11.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.2...@ohif/viewer@2.11.0) (2019-11-25)
+
+
+### Features
+
+* Add new annotate tool using new dialog service ([#1211](https://github.com/OHIF/Viewers/issues/1211)) ([8fd3af1](https://github.com/OHIF/Viewers/commit/8fd3af1e137e793f1b482760a22591c64a072047))
+
+
+
+
+
+## [2.10.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.1...@ohif/viewer@2.10.2) (2019-11-25)
+
+
+### Bug Fixes
+
+* Issue branch from danny experimental changes pr 1128 ([#1150](https://github.com/OHIF/Viewers/issues/1150)) ([a870b3c](https://github.com/OHIF/Viewers/commit/a870b3cc6056cf824af422e46f1ad674910b534e)), closes [#1161](https://github.com/OHIF/Viewers/issues/1161) [#1164](https://github.com/OHIF/Viewers/issues/1164) [#1177](https://github.com/OHIF/Viewers/issues/1177) [#1179](https://github.com/OHIF/Viewers/issues/1179) [#1180](https://github.com/OHIF/Viewers/issues/1180) [#1181](https://github.com/OHIF/Viewers/issues/1181) [#1182](https://github.com/OHIF/Viewers/issues/1182) [#1183](https://github.com/OHIF/Viewers/issues/1183) [#1184](https://github.com/OHIF/Viewers/issues/1184) [#1185](https://github.com/OHIF/Viewers/issues/1185)
+
+
+
+
+
+## [2.10.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.10.0...@ohif/viewer@2.10.1) (2019-11-20)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+# [2.10.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.9.0...@ohif/viewer@2.10.0) (2019-11-19)
+
+
+### Features
+
+* New dialog service ([#1202](https://github.com/OHIF/Viewers/issues/1202)) ([f65639c](https://github.com/OHIF/Viewers/commit/f65639c2b0dab01decd20cab2cef4263cb4fab37))
+
+
+
+
+
+# [2.9.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.8.5...@ohif/viewer@2.9.0) (2019-11-19)
+
+
+### Features
+
+* Issue 879 viewer route query param not filtering but promoting ([#1141](https://github.com/OHIF/Viewers/issues/1141)) ([b17f753](https://github.com/OHIF/Viewers/commit/b17f753e6222045252ef885e40233681541a32e1)), closes [#1118](https://github.com/OHIF/Viewers/issues/1118)
+
+
+
+
+
 ## [2.8.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.8.4...@ohif/viewer@2.8.5) (2019-11-18)


@@ -85,6 +85,7 @@ describe('OHIF Cornerstone Hotkeys', () => {
    cy.get('@layoutBtn').click();
    //Select 3 viewports
    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+    cy.waitViewportImageLoading();

    // Press multiples hotkeys on viewport #1
    cy.get('body').type('VL+++I');
@@ -1,14 +1,14 @@
 //We are keeping the hardcoded results values for the study list tests
 //this is intended to be running in a controled docker environment with test data.
-describe('OHIF Study List', function() {
-  context('Desktop resolution', function() {
-    beforeEach(function() {
+describe('OHIF Study List', function () {
+  context('Desktop resolution', function () {
+    beforeEach(function () {
      cy.viewport(1750, 720);
      cy.openStudyList();
      cy.initStudyListAliasesOnDesktop();
    });

-    it('searches Patient Name with exact string', function() {
+    it('searches Patient Name with exact string', function () {
      cy.get('@patientName').type('Juno');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -18,7 +18,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches MRN with exact string', function() {
+    it('searches MRN with exact string', function () {
      cy.get('@MRN').type('ProstateX-0000');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -28,7 +28,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Accession with exact string', function() {
+    it('searches Accession with exact string', function () {
      cy.get('@accessionNumber').type('fpcben98890');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -38,7 +38,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Modality with camel case', function() {
+    it('searches Modality with camel case', function () {
      cy.get('@modalities').type('Mr');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -48,7 +48,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Description with exact string', function() {
+    it('searches Description with exact string', function () {
      cy.get('@studyDescription').type('CHEST');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -58,7 +58,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('changes rows per page and checks the study count', function() {
+    it('changes rows per page and checks the study count', function () {
      //Show rows per page options
      const pageRows = [25, 50, 100];

@@ -100,14 +100,14 @@ describe('OHIF Study List', function() {
    // });
  });

-  context('Tablet resolution', function() {
-    beforeEach(function() {
+  context('Tablet resolution', function () {
+    beforeEach(function () {
      cy.viewport(1000, 660);
      cy.openStudyList();
      cy.initStudyListAliasesOnTablet();
    });

-    it('searches Patient Name with exact string', function() {
+    it('searches Patient Name with exact string', function () {
      cy.get('@patientNameOrMRN').type('Juno');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -117,7 +117,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches MRN with with exact string', function() {
+    it('searches MRN with with exact string', function () {
      cy.get('@patientNameOrMRN').type('ProstateX-0000');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -127,7 +127,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Modality with exact string', function() {
+    it('searches Modality with exact string', function () {
      cy.get('@accessionModalityDescription').type('MR');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -137,7 +137,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Accession with exact string', function() {
+    it('searches Accession with exact string', function () {
      cy.get('@accessionModalityDescription').type('fpcben98890');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -147,7 +147,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('searches Description with exact string', function() {
+    it('searches Description with exact string', function () {
      cy.get('@accessionModalityDescription').type('CHEST');
      //Wait result list to be displayed
      cy.waitStudyList();
@@ -157,7 +157,7 @@ describe('OHIF Study List', function() {
      });
    });

-    it('changes rows per page and checks the study count', function() {
+    it('changes rows per page and checks the study count', function () {
      //Show rows per page options
      const pageRows = [25, 50, 100];

@@ -273,7 +273,7 @@ describe('OHIF Study Viewer Page', function() {
    cy.get('[data-cy="about-item-menu"]')
      .first()
      .click();
-    cy.get('.modal-content')
+    cy.get('[data-cy="about-modal"]')
      .as('aboutOverlay')
      .should('be.visible');

@@ -296,7 +296,7 @@ describe('OHIF Study Viewer Page', function() {
    cy.percyCanvasSnapshot('About modal - Should display modal');

    //close modal
-    cy.get('.close').click();
+    cy.get('[data-cy="close-button"]').click();
    cy.get('@aboutOverlay').should('not.be.enabled');
  });
 });
@@ -0,0 +1,601 @@
+describe('OHIF User Preferences', () => {
+  context('Study List Page', function() {
+    before(() => {
+      cy.visit('/');
+    });
+
+    beforeEach(() => {
+      // Open User Preferences modal
+      cy.openPreferences();
+      cy.initPreferencesModalAliases();
+    });
+
+    it('checks displayed information on User Preferences modal', function() {
+      cy.get('@preferencesModal').should('contain.text', 'User Preferences');
+      cy.get('@userPreferencesHotkeysTab')
+        .should('have.text', 'Hotkeys')
+        .and('have.class', 'active');
+      cy.get('@userPreferencesGeneralTab').should('have.text', 'General');
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .should('have.text', 'Reset to Defaults');
+      cy.get('@cancelBtn').should('have.text', 'Cancel');
+      cy.get('@saveBtn').should('have.text', 'Save');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study Viewer page'
+      );
+      cy.get('[data-cy="close-button"]').click();
+    });
+
+    it('checks translation by selecting Spanish language', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - General tab initial state in Study Viewer page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - General tab initial state in Study Viewer page'
+      );
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'Acerca de');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+    });
+
+    it('checks if user can cancel the language selection and application will be in English', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Select Spanish and Cancel
+      cy.get('#language-select').select('Spanish');
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      // Once the issue is fixed, the following code should be uncommented
+      // // Header should be kept in English
+      // cy.get('.research-use')
+      //   .scrollIntoView()
+      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+      //
+      // // Options menu should be translated
+      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+      //
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'About');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferences');
+    });
+
+    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+    // Once the issue is fixed, the following code should be uncommented
+    // it('checks if user can restore to default the language selection and application will be in English', function() {
+    //   cy.get('@userPreferencesGeneralTab')
+    //     .click()
+    //     .should('have.class', 'active');
+
+    //   // Language dropdown should be displayed
+    //   cy.get('#language-select').should('be.visible');
+
+    //   // Select Spanish and Save
+    //   cy.get('#language-select').select('Spanish');
+    //   cy.get('@saveBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    //   //Open Preferences again
+    //   cy.openPreferences();
+
+    //   // Go to general tab
+    //   cy.get('@userPreferencesGeneralTab').click();
+
+    //   cy.get('@restoreBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    // Header should be in English
+    // cy.get('.research-use')
+    //   .scrollIntoView()
+    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+    //
+    // Options menu should be in English
+    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .first()
+    //     .should('have.text', 'About');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .should('have.text', 'Preferences');
+    //  });
+
+    it('checks if Preferences set in Study List Page will be consistent on Viewer Page', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Rotate Right', '{shift}Q');
+      // Save new hotkey
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      // Go to General tab
+      cy.get('@userPreferencesGeneralTab').click();
+
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Go to Study Viewer page
+      cy.openStudy('MISTER^MR');
+      cy.waitDicomImage();
+      cy.expectMinimumThumbnails(5);
+      cy.initCommonElementsAliases();
+
+      // Check if application is in Spanish
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]')
+        .should('have.text', 'Opciones')
+        .click();
+      cy.get('[data-cy="about-item-menu"]')
+        .first()
+        .should('contain.text', 'Acerca de');
+      cy.get('[data-cy="options-menu"]').click(); //Close Options overlay
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+
+      // Check if new hotkey is working on viewport
+      cy.get('body').type('{shift}Q', { release: false });
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+    });
+  });
+
+  context('Study Viewer Page', function() {
+    before(() => {
+      cy.openStudy('MISTER^MR');
+      cy.expectMinimumThumbnails(5);
+    });
+
+    beforeEach(() => {
+      cy.initCommonElementsAliases();
+      cy.resetViewport();
+
+      cy.resetUserHoktkeyPreferences();
+      // Open User Preferences modal
+      cy.openPreferences();
+    });
+
+    it('checks displayed information on User Preferences modal', function() {
+      cy.get('@preferencesModal').should('contain.text', 'User Preferences');
+      cy.get('@userPreferencesHotkeysTab')
+        .should('have.text', 'Hotkeys')
+        .and('have.class', 'active');
+      cy.get('@userPreferencesGeneralTab').should('have.text', 'General');
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .should('have.text', 'Reset to Defaults');
+      cy.get('@cancelBtn').should('have.text', 'Cancel');
+      cy.get('@saveBtn').should('have.text', 'Save');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study List page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - Hotkeys tab initial state in Study List page'
+      );
+      cy.get('[data-cy="close-button"]').click(); //close User Preferences modal
+    });
+
+    it('checks translation by selecting Spanish language', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Visual comparison
+      cy.screenshot(
+        'User Preferences Modal - General tab initial state in Study List page'
+      );
+      cy.percyCanvasSnapshot(
+        'User Preferences Modal - General tab initial state in Study List page'
+      );
+      // Select Spanish and Save
+      cy.get('#language-select').select('Spanish');
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Header should be translated to Spanish
+      cy.get('.research-use')
+        .scrollIntoView()
+        .should('have.text', 'SOLO USO PARA INVESTIGACIÓN');
+
+      // Options menu should be translated
+      cy.get('[data-cy="options-menu"]').should('have.text', 'Opciones');
+
+      //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      //Once the issue is fixed, the following code should be uncommented
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'Acerca de');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferencias');
+    });
+
+    it('checks if user can cancel the language selection and application will be in English', function() {
+      cy.get('@userPreferencesGeneralTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Language dropdown should be displayed
+      cy.get('#language-select').should('be.visible');
+
+      // Select Spanish and Cancel
+      cy.get('#language-select').select('Spanish');
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+      // Once the issue is fixed, the following code should be uncommented
+      // // Header should be kept in English
+      // cy.get('.research-use')
+      //   .scrollIntoView()
+      //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+      //
+      // // Options menu should be translated
+      // cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+      //
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .first()
+      //   .should('have.text', 'About');
+      // cy.get('[data-cy="about-item-menu"]')
+      //   .last()
+      //   .should('have.text', 'Preferences');
+    });
+
+    // TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+    // Once the issue is fixed, the following code should be uncommented
+    // it('checks if user can restore to default the language selection and application will be in English', function() {
+    //   cy.get('@userPreferencesGeneralTab')
+    //     .click()
+    //     .should('have.class', 'active');
+
+    //   // Language dropdown should be displayed
+    //   cy.get('#language-select').should('be.visible');
+
+    //   // Select Spanish and Save
+    //   cy.get('#language-select').select('Spanish');
+    //   cy.get('@saveBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    //   //Open Preferences again
+    //   cy.get('[data-cy="options-menu"]')
+    //     .scrollIntoView()
+    //     .click();
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .click();
+
+    //   // Go to general tab
+    //   cy.get('@userPreferencesGeneralTab').click();
+
+    //   cy.get('@restoreBtn')
+    //     .scrollIntoView()
+    //     .click();
+
+    // Header should be in English
+    // cy.get('.research-use')
+    //   .scrollIntoView()
+    //   .should('have.text', 'INVESTIGATIONAL USE ONLY');
+    //
+    // Options menu should be in English
+    //   cy.get('[data-cy="options-menu"]').should('have.text', 'Options');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .first()
+    //     .should('have.text', 'About');
+    //   cy.get('[data-cy="about-item-menu"]')
+    //     .last()
+    //     .should('have.text', 'Preferences');
+    //});
+
+    it('checks new hotkeys for "Rotate Right" and "Rotate Left"', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{shift}{rightarrow}'
+      );
+      // Set new hotkey for 'Rotate Left' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Left',
+        '{shift}{leftarrow}'
+      );
+
+      //Save new hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      //Rotate Right with new Hotkey
+      cy.get('body').type('{shift}{rightarrow}');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+
+      //Rotate Left with new Hotkey
+      cy.get('body').type('{shift}{leftarrow}');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+    });
+
+    it('checks new hotkeys for "Next" and "Previous" Image on Viewport', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab')
+        .click()
+        .should('have.class', 'active');
+
+      // Set new hotkey for 'Next Image Viewport' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Next Image Viewport',
+        '{shift}{rightarrow}'
+      );
+
+      // Set new hotkey for 'Previous Image Viewport' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Previous Image Viewport',
+        '{shift}{leftarrow}'
+      );
+
+      // Save new hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Set 3 viewports layout
+      cy.setLayout(3, 1);
+      cy.waitViewportImageLoading();
+
+      // Rotate Right and Invert colors on Viewport #1
+      cy.get('body').type('RI');
+      // Check that image was rotated
+      cy.get('@viewportInfoMidTop').should('contains.text', 'R');
+
+      //Move to Next Viewport
+      cy.get('body').type('{shift}{rightarrow}');
+      // Rotate Left and Invert colors on Viewport #2
+      cy.get('body').type('LI');
+      // Get overlay information from viewport #2
+      cy.get(
+        ':nth-child(2) > .viewport-wrapper > .viewport-element > .ViewportOrientationMarkers.noselect > .top-mid.orientation-marker'
+      ).as('viewport2InfoMidTop');
+      // Check that image was rotated
+      cy.get('@viewport2InfoMidTop').should('contains.text', 'P');
+
+      //Move to Previous Viewport
+      cy.get('body').type('{shift}{leftarrow}');
+      // Reset viewport #1 with spacebar hotkey
+      cy.get('body').type(' ');
+      cy.get('@viewportInfoMidTop').should('contains.text', 'A');
+
+      // Visual comparison
+      cy.screenshot('Viewport Navigation - 2nd viewport inverted and rotated');
+      cy.percyCanvasSnapshot(
+        'Viewport Navigation - 2nd viewport inverted and rotated'
+      );
+      // Set 1 viewport layout
+      cy.setLayout(1, 1);
+    });
+
+    it('checks error message when duplicated hotkeys are inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set duplicated hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{rightarrow}'
+      );
+
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should(
+            'have.text',
+            '"Next Image Viewport" is already using the "right" shortcut.'
+          );
+      });
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks error message when invalid hotkey is inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set invalid hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Rotate Right', '{ctrl}Z');
+
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should('have.text', '"ctrl+z" shortcut combination is not allowed');
+      });
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks error message when only modifier keys are inserted', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set invalid modifier key: ctrl
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{ctrl}');
+      // Check error message
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Zoom Out') // label we're looking for
+          .parent()
+          .find('.errorMessage')
+          .as('errorMsg')
+          .should(
+            'have.text',
+            "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+          );
+      });
+
+      // Set invalid modifier key: shift
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{shift}');
+      // Check error message
+      cy.get('@errorMsg').should(
+        'have.text',
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+      );
+
+      // Set invalid modifier key: alt
+      cy.setNewHotkeyShortcutOnUserPreferencesModal('Zoom Out', '{alt}');
+      // Check error message
+      cy.get('@errorMsg').should(
+        'have.text',
+        "It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
+      );
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+    });
+
+    it('checks if user can cancel changes made on User Preferences Hotkeys tab', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{ctrl}{shift}S'
+      );
+
+      //Cancel hotkeys
+      cy.get('@cancelBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Check that hotkey for 'Rotate Right' function was not changed
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('input')
+          .should('have.value', 'r');
+      });
+      cy.get('[data-cy="close-button"]').click();
+    });
+
+    it('checks if user can reset to default values on User Preferences Hotkeys tab', function() {
+      // Go go hotkeys tab
+      cy.get('@userPreferencesHotkeysTab').click();
+
+      // Set new hotkey for 'Rotate Right' function
+      cy.setNewHotkeyShortcutOnUserPreferencesModal(
+        'Rotate Right',
+        '{ctrl}{shift}S'
+      );
+
+      //Save hotkeys
+      cy.get('@saveBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Restore Default hotkeys
+      cy.get('@restoreBtn')
+        .scrollIntoView()
+        .click();
+
+      // Open User Preferences modal again
+      cy.openPreferences();
+
+      //Check that hotkey for 'Rotate Right' function was not changed
+      cy.get('.HotKeysPreferences').within(() => {
+        cy.contains('Rotate Right') // label we're looking for
+          .parent()
+          .find('input')
+          .should('have.value', 'r');
+      });
+      cy.get('[data-cy="close-button"]').click();
+    });
+  });
+});
@@ -81,6 +81,7 @@ describe('OHIF VTK Extension', () => {
    );
  });

+  /* TODO: Non-deterministic behavior (const expectedText = 'W: 350 L: -1044';)
  it('checks WWWC tool', () => {
    cy.get('@wwwcBtn').click();

@@ -92,7 +93,7 @@ describe('OHIF VTK Extension', () => {
      .trigger('mousemove', 'top', { which: 1 })
      .trigger('mouseup', { which: 1 })
      .then(() => {
-        const expectedText = 'W: 350 L: -1044';
+        const expectedText = 'W: 350 L: 40';
        cy.get('.ViewportOverlay > div.bottom-right.overlay-element').should(
          'contains.text',
          expectedText
@@ -102,7 +103,7 @@ describe('OHIF VTK Extension', () => {
    // Visual comparison
    cy.screenshot('VTK WWWC tool - Canvas should be bright');
    cy.percyCanvasSnapshot('VTK WWWC tool - Canvas should be bright');
-  });
+  }); */

  it('checks Rotate tool', () => {
    cy.get('@rotateBtn').click();
@@ -77,3 +77,17 @@ export function initStudyListAliasesOnTablet() {
  cy.get('#end-date').as('studyListEndDate');
  cy.get('[data-cy="study-list-results"] > tr').as('searchResult');
 }
+
+//Creating aliases for User Preferences modal
+export function initPreferencesModalAliases() {
+  cy.get('.OHIFModal').as('preferencesModal');
+  cy.get('.nav-link')
+    .first()
+    .as('userPreferencesHotkeysTab');
+  cy.get('.nav-link')
+    .last()
+    .as('userPreferencesGeneralTab');
+  cy.get('[data-cy="reset-default-btn"]').as('restoreBtn');
+  cy.get('[data-cy="cancel-btn"]').as('cancelBtn');
+  cy.get('[data-cy="save-btn"]').as('saveBtn');
+}
@@ -7,6 +7,7 @@ import {
  initVTKToolsAliases,
  initStudyListAliasesOnDesktop,
  initStudyListAliasesOnTablet,
+  initPreferencesModalAliases,
 } from './aliases.js';

 // ***********************************************
@@ -102,6 +103,13 @@ Cypress.Commands.add('waitVTKReformatting', () => {
  });
 });

+Cypress.Commands.add('waitViewportImageLoading', () => {
+  // Wait for finish loading
+  cy.get('[data-cy="viewprt-grid"]', { timeout: 20000 }).should($grid => {
+    expect($grid).not.to.contain.text('Load');
+  });
+});
+
 /**
 * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
 * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)
@@ -200,10 +208,10 @@ Cypress.Commands.add('waitDicomImage', (timeout = 20000) => {

 //Command to reset and clear all the changes made to the viewport
 Cypress.Commands.add('resetViewport', () => {
-  cy.initCornerstoneToolsAliases();
-
  //Click on More button
-  cy.get('@moreBtn').click();
+  cy.get('.expandableToolMenu')
+    .as('moreBtn')
+    .click();
  //Verify if overlay is displayed
  cy.get('body').then(body => {
    if (body.find('.tooltip-toolbar-overlay').length == 0) {
@@ -215,7 +223,9 @@ Cypress.Commands.add('resetViewport', () => {
    .as('clearBtn')
    .click();
  //Click on Reset button
-  cy.get('@resetBtn').click();
+  cy.get('.ToolbarRow > :nth-child(9)')
+    .as('resetBtn')
+    .click();
 });

 Cypress.Commands.add('imageZoomIn', () => {
@@ -359,9 +369,7 @@ Cypress.Commands.add('percyCanvasSnapshot', (name, options = {}) => {
 });

 Cypress.Commands.add('setLayout', (columns = 1, rows = 1) => {
-  cy.get('.toolbar-button-label')
-    .contains('Layout')
-    .click();
+  cy.get('.btn-group > .toolbar-button').click();

  cy.get('.layoutChooser')
    .find('tr')
@@ -410,3 +418,50 @@ function canvasToImage(selectorOrEl) {
  canvas.parentElement.appendChild(image);
  canvas.style = 'display: none';
 }
+
+//Initialize aliases for User Preferences modal
+Cypress.Commands.add('initPreferencesModalAliases', () => {
+  initPreferencesModalAliases();
+});
+
+Cypress.Commands.add('openPreferences', () => {
+  cy.log('Open User Preferences Modal');
+  // Open User Preferences modal
+  cy.get('[data-cy="options-menu"]')
+    .scrollIntoView()
+    .click()
+    .then(() => {
+      cy.get('[data-cy="about-item-menu"]')
+        .last()
+        .click()
+        .wait(200);
+    });
+});
+
+Cypress.Commands.add('resetUserHoktkeyPreferences', () => {
+  // Open User Preferences modal
+  cy.openPreferences();
+
+  cy.initPreferencesModalAliases();
+
+  cy.log('Reset to Default Preferences');
+  cy.get('@restoreBtn').click();
+
+  //TODO: the following code is blocked by issue 1193: https://github.com/OHIF/Viewers/issues/1193
+  //Once the issue is fixed, the following code should be uncommented
+  //cy.get('@saveBtn').click();
+});
+
+Cypress.Commands.add(
+  'setNewHotkeyShortcutOnUserPreferencesModal',
+  (function_label, shortcut) => {
+    // Within scopes all `.get` and `.contains` to within the matched elements
+    // dom instead of checking from document
+    cy.get('.HotKeysPreferences').within(() => {
+      cy.contains(function_label) // label we're looking for
+        .parent()
+        .find('input') // closest input to that label
+        .type(shortcut, { force: true }); // Set new shortcut for that function
+    });
+  }
+);
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/viewer",
-  "version": "2.8.5",
+  "version": "2.11.0",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -45,20 +45,20 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.10.0",
+    "@ohif/core": "^1.13.0",
    "@ohif/extension-cornerstone": "^2.0.0",
    "@ohif/extension-dicom-html": "^1.0.1",
    "@ohif/extension-dicom-microscopy": "^0.50.6",
    "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^0.53.9",
+    "@ohif/extension-vtk": "^0.54.0",
    "@ohif/i18n": "^0.52.1",
-    "@ohif/ui": "^0.62.4",
+    "@ohif/ui": "^0.65.0",
    "@tanem/react-nprogress": "^1.1.25",
    "classnames": "^2.2.6",
    "core-js": "^3.2.1",
    "cornerstone-core": "^2.2.8",
    "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "^4.0.9",
+    "cornerstone-tools": "^4.8.0",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dcmjs": "^0.6.1",
    "dicom-parser": "^1.8.3",
@@ -3,6 +3,7 @@ window.config = {
  routerBasename: '/',
  extensions: [],
  showStudyList: true,
+  filterQueryParam: false,
  servers: {
    dicomWeb: [
      {
@@ -1,7 +1,18 @@
+import React, { Component } from 'react';
+import { OidcProvider } from 'redux-oidc';
+import { I18nextProvider } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
+import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
 import { hot } from 'react-hot-loader/root';

-// TODO: This should not be here
-import './config';
+import {
+  SnackbarProvider,
+  ModalProvider,
+  DialogProvider,
+  OHIFModal,
+} from '@ohif/ui';

 import {
  CommandsManager,
@@ -10,44 +21,48 @@ import {
  HotkeysManager,
  createUINotificationService,
  createUIModalService,
+  createUIDialogService,
  utils,
 } from '@ohif/core';
-import React, { Component } from 'react';
+
+import i18n from '@ohif/i18n';
+
+// TODO: This should not be here
+import './config';
+
+/** Utils */
 import {
  getUserManagerForOpenIdConnectClient,
  initWebWorkers,
 } from './utils/index.js';

-import { I18nextProvider } from 'react-i18next';
-
-// ~~ EXTENSIONS
+/** Extensions */
 import { GenericViewerCommands, MeasurementsPanel } from './appExtensions';
-import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
-import OHIFStandaloneViewer from './OHIFStandaloneViewer';
-import { OidcProvider } from 'redux-oidc';
-import PropTypes from 'prop-types';
-import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { getActiveContexts } from './store/layout/selectors.js';
-import i18n from '@ohif/i18n';
-import store from './store';
-import { SnackbarProvider, ModalProvider, OHIFModal } from '@ohif/ui';

-// Contexts
+/** Viewer */
+import OHIFStandaloneViewer from './OHIFStandaloneViewer';
+
+/** Store */
+import { getActiveContexts } from './store/layout/selectors.js';
+import store from './store';
+
+/** Contexts */
 import WhiteLabellingContext from './context/WhiteLabellingContext';
 import UserManagerContext from './context/UserManagerContext';
 import AppContext from './context/AppContext';

-// ~~~~ APP SETUP
+/** ~~~~~~~~~~~~~ Application Setup */
 const commandsManagerConfig = {
  getAppState: () => store.getState(),
  getActiveContexts: () => getActiveContexts(store.getState()),
 };

-// Services
+/** Services */
 const UINotificationService = createUINotificationService();
 const UIModalService = createUIModalService();
+const UIDialogService = createUIDialogService();

+/** Managers */
 const commandsManager = new CommandsManager(commandsManagerConfig);
 const hotkeysManager = new HotkeysManager(commandsManager);
 const servicesManager = new ServicesManager();
@@ -55,7 +70,7 @@ const extensionManager = new ExtensionManager({
  commandsManager,
  servicesManager,
 });
-// ~~~~ END APP SETUP
+/** ~~~~~~~~~~~~~ End Application Setup */

 // TODO[react] Use a provider when the whole tree is React
 window.store = store;
@@ -72,6 +87,7 @@ class App extends Component {
        id: PropTypes.string.isRequired,
      })
    ),
+    hotkeys: PropTypes.array,
  };

  static defaultProps = {
@@ -91,7 +107,7 @@ class App extends Component {
    const { servers, extensions, hotkeys, oidc } = props;

    this.initUserManager(oidc);
-    _initServices([UINotificationService, UIModalService]);
+    _initServices([UINotificationService, UIModalService, UIDialogService]);
    _initExtensions(extensions, hotkeys);
    _initServers(servers);
    initWebWorkers();
@@ -114,12 +130,14 @@ class App extends Component {
                  <Router basename={routerBasename}>
                    <WhiteLabellingContext.Provider value={whiteLabelling}>
                      <SnackbarProvider service={UINotificationService}>
-                        <ModalProvider
-                          modal={OHIFModal}
-                          service={UIModalService}
-                        >
-                          <OHIFStandaloneViewer userManager={userManager} />
-                        </ModalProvider>
+                        <DialogProvider service={UIDialogService}>
+                          <ModalProvider
+                            modal={OHIFModal}
+                            service={UIModalService}
+                          >
+                            <OHIFStandaloneViewer userManager={userManager} />
+                          </ModalProvider>
+                        </DialogProvider>
                      </SnackbarProvider>
                    </WhiteLabellingContext.Provider>
                  </Router>
@@ -138,9 +156,11 @@ class App extends Component {
            <Router basename={routerBasename}>
              <WhiteLabellingContext.Provider value={whiteLabelling}>
                <SnackbarProvider service={UINotificationService}>
-                  <ModalProvider modal={OHIFModal} service={UIModalService}>
-                    <OHIFStandaloneViewer />
-                  </ModalProvider>
+                  <DialogProvider service={UIDialogService}>
+                    <ModalProvider modal={OHIFModal} service={UIModalService}>
+                      <OHIFStandaloneViewer />
+                    </ModalProvider>
+                  </DialogProvider>
                </SnackbarProvider>
              </WhiteLabellingContext.Provider>
            </Router>
@@ -8,6 +8,7 @@ import {
  getResetLabellingAndContextMenu,
 } from './labelingFlowCallbacks.js';
 import throttle from 'lodash.throttle';
+import { SimpleDialog } from '@ohif/ui';

 // TODO: This only works because we have a hard dependency on this extension
 // We need to decouple and make stuff like this possible w/o bundling this at
@@ -35,6 +36,28 @@ const MEASUREMENT_ACTION_MAP = {
 * @param {*} configuration
 */
 export default function init({ servicesManager, configuration = {} }) {
+  const { UIDialogService } = servicesManager.services;
+  const callInputDialog = (data, event, callback) => {
+    let dialogId = UIDialogService.create({
+      content: SimpleDialog.InputDialog,
+      defaultPosition: {
+        x: (event && event.currentPoints.canvas.x) || 0,
+        y: (event && event.currentPoints.canvas.y) || 0,
+      },
+      showOverlay: true,
+      contentProps: {
+        title: 'Enter your annotation',
+        label: 'New label',
+        defaultValue: data ? data.text : '',
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        onSubmit: value => {
+          callback(value);
+          UIDialogService.dismiss({ id: dialogId });
+        },
+      },
+    });
+  };
+
  // If these tools were already added by a different extension, we want to replace
  // them with the same tools that have an alternative configuration. By passing in
  // our custom `getMeasurementLocationCallback`, we can...
@@ -90,6 +113,10 @@ export default function init({ servicesManager, configuration = {} }) {
  csTools.addTool(csTools.ArrowAnnotateTool, {
    configuration: {
      getMeasurementLocationCallback: toolLabellingFlowCallback,
+      getTextCallback: (callback, eventDetails) =>
+        callInputDialog(null, eventDetails, callback),
+      changeTextCallback: (data, eventDetails, callback) =>
+        callInputDialog(data, eventDetails, callback),
    },
  });

@@ -36,20 +36,15 @@ class Header extends Component {
  }

  loadOptions() {
-    const {
-      t,
-      user,
-      userManager,
-      modal: { show },
-    } = this.props;
+    const { t, user, userManager, modal } = this.props;
    this.options = [
      {
        title: t('About'),
        icon: { name: 'info' },
        onClick: () =>
-          show(AboutContent, {
+          modal.show({
+            content: AboutContent,
            title: t('OHIF Viewer - About'),
-            customClassName: 'AboutContent',
          }),
      },
      {
@@ -58,7 +53,8 @@ class Header extends Component {
          name: 'user',
        },
        onClick: () =>
-          show(ConnectedUserPreferencesForm, {
+          modal.show({
+            content: ConnectedUserPreferencesForm,
            title: t('User Preferences'),
          }),
      },
@@ -1,6 +1,10 @@
 import { connect } from 'react-redux';
 import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js';
+import OHIF from "@ohif/core";

+const {
+  clearViewportSpecificData
+} = OHIF.redux.actions;
 const isActive = a => a.active === true;

 const mapStateToProps = state => {
@@ -10,10 +14,17 @@ const mapStateToProps = state => {
    server: activeServer,
  };
 };
+const mapDispatchToProps = dispatch => {
+  return {
+    clearViewportSpecificData: () => {
+      dispatch(clearViewportSpecificData());
+    }
+  };
+};

 const ConnectedViewerRetrieveStudyData = connect(
  mapStateToProps,
-  null
+  mapDispatchToProps
 )(ViewerRetrieveStudyData);

 export default ConnectedViewerRetrieveStudyData;
@@ -7,6 +7,7 @@ import {
  RoundedButtonGroup,
  ToolbarButton,
  withModal,
+  withDialog,
 } from '@ohif/ui';

 import './ToolbarRow.css';
@@ -45,7 +46,6 @@ class ToolbarRow extends Component {
    this.state = {
      toolbarButtons: toolbarButtonDefinitions,
      activeButtons: [],
-      isCineDialogOpen: false,
    };

    this._handleBuiltIn = _handleBuiltIn.bind(this);
@@ -106,13 +106,6 @@ class ToolbarRow extends Component {
      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);
    };
@@ -145,9 +138,6 @@ class ToolbarRow extends Component {
            )}
          </div>
        </div>
-        <div className="CineDialogContainer" style={cineDialogContainerStyle}>
-          <ConnectedCineDialog />
-        </div>
      </>
    );
  }
@@ -160,7 +150,8 @@ function _getCustomButtonComponent(button, activeButtons) {
  // Check if its a valid customComponent. Later on an CustomToolbarComponent interface could be implemented.
  if (isValidComponent) {
    const parentContext = this;
-    const isActive = activeButtons.includes(button.id);
+    const activeButtonsIds = activeButtons.map(button => button.id);
+    const isActive = activeButtonsIds.includes(button.id);

    return (
      <CustomComponent
@@ -168,7 +159,7 @@ function _getCustomButtonComponent(button, activeButtons) {
        toolbarClickCallback={_handleToolbarButtonClick.bind(this)}
        button={button}
        key={button.id}
-        activeButtons={activeButtons}
+        activeButtons={activeButtonsIds}
        isActive={isActive}
      />
    );
@@ -181,7 +172,7 @@ function _getExpandableButtonComponent(button, activeButtons) {
  const childButtons = button.buttons.map(childButton => {
    childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);

-    if (activeButtons.indexOf(childButton.id) > -1) {
+    if (activeButtons.map(button => button.id).indexOf(childButton.id) > -1) {
      activeCommand = childButton.id;
    }

@@ -206,7 +197,7 @@ function _getDefaultButtonComponent(button, activeButtons) {
      label={button.label}
      icon={button.icon}
      onClick={_handleToolbarButtonClick.bind(this, button)}
-      isActive={activeButtons.includes(button.id)}
+      isActive={activeButtons.map(button => button.id).includes(button.id)}
    />
  );
 }
@@ -241,6 +232,8 @@ function _getButtonComponents(toolbarButtons, activeButtons) {
 * @param {*} props
 */
 function _handleToolbarButtonClick(button, evt, props) {
+  const { activeButtons } = this.state;
+
  if (button.commandName) {
    const options = Object.assign({ evt }, button.commandOptions);
    commandsManager.runCommand(button.commandName, options);
@@ -250,11 +243,12 @@ function _handleToolbarButtonClick(button, evt, props) {
  // 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],
-    });
+    const toggables = activeButtons.filter(
+      ({ options }) => options && !options.togglable
+    );
+    this.setState({ activeButtons: [...toggables, button] });
  } else if (button.type === 'builtIn') {
-    this._handleBuiltIn(button.options);
+    this._handleBuiltIn(button);
  }
 }

@@ -279,21 +273,48 @@ function _getVisibleToolbarButtons() {
  return toolbarButtonDefinitions;
 }

-function _handleBuiltIn({ behavior } = {}) {
-  if (behavior === 'CINE') {
-    this.setState({
-      isCineDialogOpen: !this.state.isCineDialogOpen,
-    });
+function _handleBuiltIn(button) {
+  /* TODO: Keep cine button active until its unselected. */
+  const { dialog, modal, t } = this.props;
+  const { dialogId } = this.state;
+  const { id, options } = button;
+
+  if (options.behavior === 'CINE') {
+    if (dialogId) {
+      dialog.dismiss({ id: dialogId });
+      this.setState(state => ({
+        dialogId: null,
+        activeButtons: [
+          ...state.activeButtons.filter(button => button.id !== id),
+        ],
+      }));
+    } else {
+      const spacing = 20;
+      const { x, y } = document
+        .querySelector(`.ViewerMain`)
+        .getBoundingClientRect();
+      const newDialogId = dialog.create({
+        content: ConnectedCineDialog,
+        defaultPosition: {
+          x: x + spacing || 0,
+          y: y + spacing || 0,
+        },
+      });
+      this.setState(state => ({
+        dialogId: newDialogId,
+        activeButtons: [...state.activeButtons, button],
+      }));
+    }
  }

-  if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    this.props.modal.show(ConnectedViewportDownloadForm, {
-      title: this.props.t('Download High Quality Image'),
-      customClassName: 'ViewportDownloadForm',
+  if (options.behavior === 'DOWNLOAD_SCREEN_SHOT') {
+    modal.show({
+      content: ConnectedViewportDownloadForm,
+      title: t('Download High Quality Image'),
    });
  }
 }

 export default withTranslation(['Common', 'ViewportDownloadForm'])(
-  withModal(ToolbarRow)
+  withModal(withDialog(ToolbarRow))
 );
@@ -1,191 +1,346 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { metadata, studies, utils, log } from '@ohif/core';

 import ConnectedViewer from './ConnectedViewer.js';
 import PropTypes from 'prop-types';
 import { extensionManager } from './../App.js';
-import { withSnackbar } from '@ohif/ui';
+import { useSnackbarContext } from '@ohif/ui';

 const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata;
 const { retrieveStudiesMetadata, deleteStudyMetadataPromise } = studies;
-const { studyMetadataManager, updateMetaDataManager } = utils;
+const { studyMetadataManager, updateMetaDataManager, makeCancelable } = utils;

-class ViewerRetrieveStudyData extends Component {
-  static propTypes = {
-    studyInstanceUids: PropTypes.array.isRequired,
-    seriesInstanceUids: PropTypes.array,
-    server: PropTypes.object,
+// Contexts
+import AppContext from '../context/AppContext';
+
+const _promoteToFront = (list, value, searchMethod) => {
+  let response = [...list];
+  let promoted = false;
+  const index = response.findIndex(searchMethod.bind(undefined, value));
+
+  if (index > 0) {
+    const first = response.splice(index, 1);
+    response = [...first, ...response];
+  }
+
+  if (index >= 0) {
+    promoted = true;
+  }
+
+  return {
+    promoted,
+    data: response,
  };
+};

-  constructor(props) {
-    super(props);
-    this.abortSeriesLoad = false;
-    this.seriesLoadStats = Object.create(null);
-    this.state = {
-      studies: null,
-      error: null,
-    };
+/**
+ * Promote series to front if find found equivalent on filters object
+ * @param {Object} study - study reference to promote series against
+ * @param {Object} [filters] - Object containing filters to be applied
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+ * @param {boolean} isFilterStrategy - if filtering by query param strategy ON
+ */
+const _promoteList = (study, studyMetadata, filters, isFilterStrategy) => {
+  let promoted = false;
+  // Promote only if no filter should be applied
+  if (!isFilterStrategy) {
+    _sortStudyDisplaySet(study, studyMetadata);
+    promoted = _promoteStudyDisplaySet(study, studyMetadata, filters);
  }

-  async loadStudies() {
-    try {
-      const { server, studyInstanceUids, seriesInstanceUids } = this.props;
-      const filters = {};
+  return promoted;
+};

-      // Use the first, discard others
-      const seriesInstanceUID = seriesInstanceUids && seriesInstanceUids[0];
+const _promoteStudyDisplaySet = (study, studyMetadata, filters) => {
+  let promoted = false;
+  const queryParamsLength = Object.keys(filters).length;
+  const shouldPromoteToFront = queryParamsLength > 0;

-      if (seriesInstanceUID) {
-        filters.seriesInstanceUID = seriesInstanceUID;
-      }
-
-      const studies = await retrieveStudiesMetadata(
-        server,
-        studyInstanceUids,
-        filters
-      );
-      this.validateFilters(studies, filters);
-      this.setStudies(studies);
-    } catch (e) {
-      this.setState({ error: true });
-      log.error(e);
-    }
-  }
-
-  /**
-   * Validate filters and promp user a message in case filter is unsuccessfully applied.
-   * In case of success, studies array contains, as the first element, the queried content (from filter)
-   * @param {Array} studies array of studies to be evaluated
-   * @param {Object} filters filters to test against
-   */
-  validateFilters(studies = [], filters = {}) {
+  if (shouldPromoteToFront) {
    const { seriesInstanceUID } = filters;

-    const { snackbarContext } = this.props;
-    // skip in case no filter or no toast manager
-    if (!seriesInstanceUID || !snackbarContext) {
-      return;
-    }
+    const _seriesLookup = (valueToCompare, displaySet) => {
+      return displaySet.seriesInstanceUid === valueToCompare;
+    };
+    const promotedResponse = _promoteToFront(
+      studyMetadata.getDisplaySets(),
+      seriesInstanceUID,
+      _seriesLookup
+    );

-    const firstStudy = studies[0] || {};
-    const { seriesList = [] } = firstStudy;
-    const firstSeries = seriesList[0];
-
-    if (!firstSeries || firstSeries.seriesInstanceUid !== seriesInstanceUID) {
-      snackbarContext.show({
-        message: 'No series for given filter: ' + seriesInstanceUID,
-      });
-    }
+    study.displaySets = promotedResponse.data;
+    promoted = promotedResponse.promoted;
  }

-  setStudies(givenStudies) {
-    if (Array.isArray(givenStudies) && givenStudies.length > 0) {
-      const sopClassHandlerModules =
-        extensionManager.modules['sopClassHandlerModule'];
+  return promoted;
+};
+
+/**
+ * Method to identify if query param (from url) was applied to given list
+ * @param {Object} study - study reference to promote series against
+ * @param {Object} [filters] - Object containing filters to be applied
+ * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+ * @param {boolean} isFilterStrategy - if filtering by query param strategy ON
+ */
+const _isQueryParamApplied = (study, filters = {}, isFilterStrategy) => {
+  const { seriesInstanceUID } = filters;
+  let applied = true;
+  // skip in case no filter or no toast manager
+  if (!seriesInstanceUID) {
+    return applied;
+  }
+
+  const { seriesList = [], displaySets = [] } = study;
+  const firstSeries = isFilterStrategy ? seriesList[0] : displaySets[0];
+
+  if (!firstSeries || firstSeries.seriesInstanceUid !== seriesInstanceUID) {
+    applied = false;
+  }
+
+  return applied;
+};
+const _showUserMessage = (queryParamApplied, message, dialog = {}) => {
+  if (queryParamApplied) {
+    return;
+  }
+
+  const { show: showUserMessage = () => { } } = dialog;
+  showUserMessage({
+    message,
+  });
+};
+
+const _addSeriesToStudy = (studyMetadata, series) => {
+  const sopClassHandlerModules =
+    extensionManager.modules['sopClassHandlerModule'];
+  const study = studyMetadata.getData();
+  const seriesMetadata = new OHIFSeriesMetadata(series, study);
+  studyMetadata.addSeries(seriesMetadata);
+  studyMetadata.createAndAddDisplaySetsForSeries(
+    sopClassHandlerModules,
+    seriesMetadata,
+    false
+  );
+  study.displaySets = studyMetadata.getDisplaySets();
+  _updateMetaDataManager(study, series.seriesInstanceUid);
+};
+
+const _updateMetaDataManager = (study, studyMetadata, series) => {
+  updateMetaDataManager(study, series);
+
+  const { studyInstanceUID } = study;
+
+  if (!studyMetadataManager.get(studyInstanceUID)) {
+    studyMetadataManager.add(studyMetadata);
+  }
+};
+
+const _updateStudyDisplaySets = (study, studyMetadata) => {
+  const sopClassHandlerModules =
+    extensionManager.modules['sopClassHandlerModule'];
+
+  if (!study.displaySets) {
+    study.displaySets = studyMetadata.createDisplaySets(sopClassHandlerModules);
+  }
+
+  studyMetadata.setDisplaySets(study.displaySets);
+};
+
+const _sortStudyDisplaySet = (study, studyMetadata) => {
+  studyMetadata.sortDisplaySets(study.displaySets);
+};
+const _loadRemainingSeries = studyMetadata => {
+  const { seriesLoader } = studyMetadata.getData();
+  if (!seriesLoader) {
+    return Promise.resolve();
+  }
+  const promisesLoaders = [];
+  while (seriesLoader.hasNext()) {
+    promisesLoaders.push(
+      seriesLoader
+        .next()
+        .then(
+          series => void _addSeriesToStudy(studyMetadata, series),
+          error => void log.error(error)
+        )
+    );
+  }
+
+  return Promise.all(promisesLoaders);
+};
+
+function ViewerRetrieveStudyData({
+  server,
+  studyInstanceUids,
+  seriesInstanceUids,
+  clearViewportSpecificData,
+}) {
+  // hooks
+  const [error, setError] = useState(false);
+  const [studies, setStudies] = useState([]);
+  const snackbarContext = useSnackbarContext();
+  const { appConfig = {} } = useContext(AppContext);
+  const { filterQueryParam: isFilterStrategy = false } = appConfig;
+
+  let cancelableSeriesPromises;
+  let cancelableStudiesPromises;
+  /**
+   * Callback method when study is totally loaded
+   * @param {object} study study loaded
+   * @param {object} studyMetadata studyMetadata for given study
+   * @param {Object} [filters] - Object containing filters to be applied
+   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+   */
+  const studyDidLoad = (study, studyMetadata, filters) => {
+    // User message
+    const promoted = _promoteList(
+      study,
+      studyMetadata,
+      filters,
+      isFilterStrategy
+    );
+
+    // Clear viewport to allow new promoted one to be displayed
+    if (promoted) {
+      clearViewportSpecificData(0);
+    }
+
+    const isQueryParamApplied = _isQueryParamApplied(
+      study,
+      filters,
+      isFilterStrategy
+    );
+    // Show message in case not promoted neither filtered but should to
+    _showUserMessage(
+      isQueryParamApplied,
+      'Query parameters were not applied. Using original series list for given study.',
+      snackbarContext
+    );
+
+    setStudies([...studies, study]);
+  };
+
+  /**
+   * Method to process studies. It will update displaySet, studyMetadata, load remaining series, ...
+   * @param {Array} studiesData Array of studies retrieved from server
+   * @param {Object} [filters] - Object containing filters to be applied
+   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
+   */
+  const processStudies = (studiesData, filters) => {
+    if (Array.isArray(studiesData) && studiesData.length > 0) {
      // Map studies to new format, update metadata manager?
-      const studies = givenStudies.map(study => {
+      const studies = studiesData.map(study => {
        const studyMetadata = new OHIFStudyMetadata(
          study,
          study.studyInstanceUid
        );
-        if (!study.displaySets) {
-          study.displaySets = studyMetadata.createDisplaySets(
-            sopClassHandlerModules
-          );
-        }
-        studyMetadata.setDisplaySets(study.displaySets);
-        // Updates WADO-RS metaDataManager
-        updateMetaDataManager(study);
-        studyMetadataManager.add(studyMetadata);
+
+        _updateStudyDisplaySets(study, studyMetadata);
+        _updateMetaDataManager(study, studyMetadata);
+
        // Attempt to load remaning series if any
-        this._attemptToLoadRemainingSeries(studyMetadata);
+        cancelableSeriesPromises[study.studyInstanceUid] = makeCancelable(
+          _loadRemainingSeries(studyMetadata)
+        )
+          .then(result => {
+            if (result && !result.isCanceled) {
+              studyDidLoad(study, studyMetadata, filters);
+            }
+          })
+          .catch(error => {
+            if (error && !error.isCanceled) {
+              setError(true);
+            }
+          });
+
        return study;
      });
-      this.setState({ studies });
-    }
-  }

-  _addSeriesToStudy(studyMetadata, series) {
-    const sopClassHandlerModules =
-      extensionManager.modules['sopClassHandlerModule'];
-    const study = studyMetadata.getData();
-    const seriesMetadata = new OHIFSeriesMetadata(series, study);
-    studyMetadata.addSeries(seriesMetadata);
-    studyMetadata.createAndAddDisplaySetsForSeries(
-      sopClassHandlerModules,
-      seriesMetadata
-    );
-    study.displaySets = studyMetadata.getDisplaySets();
-    updateMetaDataManager(study, series.seriesInstanceUid);
-    this.setState(function(state) {
-      return { studies: state.studies.slice() };
-    });
-  }
-
-  _handleSeriesLoadResult(error, studyMetadata, series) {
-    if (this.abortSeriesLoad) return;
-    const stats = this.seriesLoadStats[studyMetadata.getStudyInstanceUID()];
-    if (!stats) return;
-    stats.count--;
-    if (error || !series) {
-      stats.errors++;
-      log.error(error || 'Bad Series');
-      return;
+      setStudies(studies);
    }
-    this._addSeriesToStudy(studyMetadata, series);
-  }
+  };

-  _attemptToLoadRemainingSeries(studyMetadata) {
-    const { seriesLoader } = studyMetadata.getData();
-    if (!seriesLoader) {
-      return;
-    }
-    const stats = (this.seriesLoadStats[studyMetadata.getStudyInstanceUID()] = {
-      errors: 0,
-      count: 0,
-    });
-    while (seriesLoader.hasNext()) {
-      seriesLoader
-        .next()
-        .then(
-          series =>
-            void this._handleSeriesLoadResult(null, studyMetadata, series),
-          error => void this._handleSeriesLoadResult({ error }, null, null)
-        );
-      stats.count++;
-    }
-  }
+  const loadStudies = async () => {
+    try {
+      const filters = {};
+      // Use the first, discard others
+      const seriesInstanceUID = seriesInstanceUids && seriesInstanceUids[0];

-  componentWillUnmount() {
-    this.abortSeriesLoad = true;
-    for (const studyInstanceUid in this.seriesLoadStats) {
-      const stats = this.seriesLoadStats[studyInstanceUid];
-      if (stats && (stats.count > 0 || stats.errors > 0)) {
-        deleteStudyMetadataPromise(studyInstanceUid);
-        studyMetadataManager.remove(studyInstanceUid);
-        log.info(`Purging incomplete study data: ${studyInstanceUid}`);
+      const retrieveParams = [server, studyInstanceUids];
+
+      if (seriesInstanceUID) {
+        filters.seriesInstanceUID = seriesInstanceUID;
+        // Query param filtering controlled by appConfig property
+        if (isFilterStrategy) {
+          retrieveParams.push(filters);
+        }
+      }
+
+      cancelableStudiesPromises[studyInstanceUids] = makeCancelable(
+        retrieveStudiesMetadata(...retrieveParams)
+      )
+        .then(result => {
+          if (result && !result.isCanceled) {
+            processStudies(result, filters);
+          }
+        })
+        .catch(error => {
+          if (error && !error.isCanceled) {
+            setError(true);
+          }
+        });
+    } catch (error) {
+      if (error) {
+        setError(true);
      }
    }
-  }
+  };

-  componentDidMount() {
-    // TODO: CLEAR THIS SOMEWHERE ELSE
-    studyMetadataManager.purge();
-    this.loadStudies();
-  }
-
-  render() {
-    if (this.state.error) {
-      return <div>Error: {JSON.stringify(this.state.error)}</div>;
+  const purgeCancellablePromises = () => {
+    for (let studyInstanceUids in cancelableStudiesPromises) {
+      if ('cancel' in cancelableStudiesPromises[studyInstanceUids]) {
+        cancelableStudiesPromises[studyInstanceUids].cancel();
+      }
    }

-    return (
-      <ConnectedViewer
-        studies={this.state.studies}
-        studyInstanceUids={this.props.studyInstanceUids}
-      />
-    );
+    for (let studyInstanceUids in cancelableSeriesPromises) {
+      if ('cancel' in cancelableSeriesPromises[studyInstanceUids]) {
+        cancelableSeriesPromises[studyInstanceUids].cancel();
+        deleteStudyMetadataPromise(studyInstanceUids);
+        studyMetadataManager.remove(studyInstanceUids);
+      }
+    }
+  };
+
+  useEffect(() => {
+    studyMetadataManager.purge();
+    purgeCancellablePromises();
+  }, [studyInstanceUids]);
+
+  useEffect(() => {
+    cancelableSeriesPromises = {};
+    cancelableStudiesPromises = {};
+    loadStudies();
+
+    return () => {
+      purgeCancellablePromises();
+    };
+  }, []);
+
+  if (error) {
+    return <div>Error: {JSON.stringify(error)}</div>;
  }
+
+  return (
+    <ConnectedViewer studies={studies} studyInstanceUids={studyInstanceUids} />
+  );
 }

-export default withSnackbar(ViewerRetrieveStudyData);
+ViewerRetrieveStudyData.propTypes = {
+  studyInstanceUids: PropTypes.array.isRequired,
+  seriesInstanceUids: PropTypes.array,
+  server: PropTypes.object,
+  clearViewportSpecificData: PropTypes.func.isRequired,
+};
+
+export default ViewerRetrieveStudyData;
@@ -1,20 +1,20 @@
 .dicom-uploader .button {
-    float: left;
-    margin: 5px;
+  float: left;
+  margin: 5px;
 }

 .invisible-input {
-    position: absolute;
-    display: none;
-    z-index: -1000;
-    max-width: 0 !important;
-    max-height: 0 !important;
+  position: absolute;
+  display: none;
+  z-index: -1000;
+  max-width: 0 !important;
+  max-height: 0 !important;
 }

 .dicom-uploader .table-header {
-    color: #ffffff;
-    font-size: 16px;
-    font-weight: 28px;
-    text-align: left;
-    margin: 20px auto;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 28px;
+  text-align: left;
+  margin: 20px auto;
 }
@@ -58,7 +58,11 @@ function StudyListRoute(props) {
  const appContext = useContext(AppContext);
  // ~~ RESPONSIVE
  const displaySize = useMedia(
-    ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
+    [
+      '(min-width: 1750px)',
+      '(min-width: 1000px) and (max-width: 1749px)',
+      '(max-width: 999px)',
+    ],
    ['large', 'medium', 'small'],
    'small'
  );
@@ -257,6 +261,7 @@ function StudyListRoute(props) {
          filterValues={filterValues}
          onFilterChange={handleFilterChange}
          studyListDateFilterNumDays={appConfig.studyListDateFilterNumDays}
+          displaySize={displaySize}
        />
        {/* PAGINATION FOOTER */}
        <TablePagination
@@ -5972,10 +5972,10 @@ cornerstone-math@^0.1.8:
  resolved "https://registry.yarnpkg.com/cornerstone-math/-/cornerstone-math-0.1.8.tgz#68ab1f9e4fdcd7c5cb23a0d2eb4263f9f894f1c5"
  integrity sha512-x7NEQHBtVG7j1yeyj/aRoKTpXv1Vh2/H9zNLMyqYJDtJkNng8C4Q8M3CgZ1qer0Yr7eVq2x+Ynmj6kfOm5jXKw==

-cornerstone-tools@^4.0.9:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.6.2.tgz#f46eac15ac027ed8649eced46ab0ed6f71ada982"
-  integrity sha512-YlUBkMr0B1PPA/mKPgqyedvOYHNXXLyDmH3I59ipDRi2Huuw64hOxwxPiknibPHD9mBv6SpHN1ybD9i5KOTExQ==
+cornerstone-tools@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/cornerstone-tools/-/cornerstone-tools-4.8.0.tgz#1972546e13e9a09b8aa25a3541ffc345283eec01"
+  integrity sha512-PO7/jYbVwc+ddF9JW/o/JXqNPFZV7y1PUTzlRATC9FeXLXNKIkSFBCF5SA1EGJoyjzRYGDBgTZuTYhfm96AlAA==
  dependencies:
    "@babel/runtime" "7.1.2"
    cornerstone-math "0.1.7"
@@ -8074,6 +8074,11 @@ executable@4.1.1:
  dependencies:
    pify "^2.2.0"

+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exif-parser@^0.1.12, exif-parser@^0.1.9:
  version "0.1.12"
  resolved "https://registry.yarnpkg.com/exif-parser/-/exif-parser-0.1.12.tgz#58a9d2d72c02c1f6f02a0ef4a9166272b7760922"
@@ -16019,6 +16024,14 @@ react-dom@^16.8.6:
    prop-types "^15.6.2"
    scheduler "^0.17.0"

+react-draggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.1.0.tgz#e1c5b774001e32f0bff397254e1e9d5448ac92a4"
+  integrity sha512-Or/qe70cfymshqoC8Lsp0ukTzijJObehb7Vfl7tb5JRxoV+b6PDkOGoqYaWBzZ59k9dH/bwraLGsnlW78/3vrA==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-dropzone@^10.1.7:
  version "10.1.10"
  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.1.10.tgz#f340290dfc26ac09ad68abc020ab6232c23d6cf3"
@@ -16082,7 +16095,7 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
  integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==

-react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -16101,6 +16114,16 @@ react-live@2.0.1:
    react-simple-code-editor "^0.9.0"
    unescape "^0.2.0"

+react-modal@^3.11.1:
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.11.1.tgz#2a0d6877c9e98f123939ea92d2bb4ad7fa5a17f9"
+  integrity sha512-8uN744Yq0X2lbfSLxsEEc2UV3RjSRb4yDVxRQ1aGzPo86QjNOwhQSukDb8U8kR+636TRTvfMren10fgOjAy9eA==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-moment-proptypes@^1.6.0:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz#89881479840a76c13574a86e3bb214c4ba564e7a"
@@ -20041,6 +20064,13 @@ warning@^3.0.0:
  dependencies:
    loose-envify "^1.0.0"

+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
Author	SHA1	Message	Date
ohif-bot	27e02825a4	chore(release): publish [skip ci] - @ohif/extension-cornerstone@1.7.0 - @ohif/extension-vtk@0.54.0 - @ohif/core@1.13.0 - @ohif/ui@0.65.0 - @ohif/viewer@2.11.0	2019-11-25 22:16:35 +00:00
Igor Octaviano	8fd3af1e13	feat: Add new annotate tool using new dialog service (#1211 ) * Testing dialog * Refactor modal and add dialog component to simple dialog * Use existent dialog * Expect event from getText callback (annotation) * Bump cornerstone-tools version * Use simple dialog * bump cornersotne version * CR Update: Update dialgo method names and default values * CR Update: Bump overlay and show only if theres at least one overlay prop set to true * CR Update: Use percentage over view height in draggable area * Fix broken test vtk checks WWWC tool * Comment test (non-deterministic)	2019-11-25 17:13:42 -05:00
ohif-bot	1334ba8eb0	chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.13 - @ohif/ui@0.64.2 - @ohif/viewer@2.10.2	2019-11-25 15:50:36 +00:00
Danny Brown	a870b3cc60	fix: Issue branch from danny experimental changes pr 1128 (#1150 ) * fix: study list translations * Don't render until translations are ready * Try to wait for translations to load * Use null to render "nothing" * Try toggling useSuspense off up a layer * logging * Remove useSuspense false flags * DO NOT OPEN A PR WITH IT. Experimental changes only. Try to solve issues with useTranslation hooks #Please enter the commit message for your changes. Lines starting * Remove unecessary changes * feat: 🎸 useMedia hook to not use one more prop for upd state vl * docs: Add license scan report and status (#1161) Signed-off-by: fossabot <badges@fossa.io> * fix: 🐛 Fix for JS breaking on header (#1164) * feat: 🎸 Code review and refact Revised code based on PRs(variable alias,...). Changed hook for useMedia. Now, it provides two hooks: one to get displayMediaSize and other to get Entity(component, objects...) based on displayMediaSize. Implemented a similar solution for state manager to store mediaQueryList(s) and displaySize for app. * feat: 🎸 Fine tunning on mediaQuery value, fixed issue about it * chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.6 - @ohif/ui@0.62.1 - @ohif/viewer@2.8.2 * Add new modal service * Change serviceManager prop to servicesManager * CR Update: fix casing and add required proptypes to providers * CR Update: Improve ohifmodal proptypes * CR Update: Fix typo in extensionmanager * CR Update: add default props to service and check service in provider * Refactor modal provider to better use its own state * ci: don't build our master branch (#1177) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * Use modal instead of modal context * Ci/promotable builds (#1179) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Change modal children order * Ci/promotable builds (#1180) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * Ci/promotable builds (#1181) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * Ci/promotable builds (#1182) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Fix OHIFModal proptypes * Ci/promotable builds (#1183) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * Ci/promotable builds (#1184) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * ci: workaround for sudo limitations * ci: restore release workflow (#1185) * ci: don't build our master branch * Add netlify-cli as a dev dependency * ci: trying a sheltered merge flow for promotions * ci: try building with QUICK_BUILD flag * Try using ~/repo prefix in command * ci: make sure netlify command is available * ci: use sudo for global command * Inline personal access token w/ env var * ci: workaround for sudo limitations * ci: restore release workflow * Pass services to each module, improve tests * Add servicesManager test and registerServices method * Fix key warning of snackbar elements * Remove netlify-cli; we';ll install this on CI server * Update staging and prod netlify site IDs * Clean up NPM_PUBLISH step * Clean up DOCS_PUBLISH step * Clean up Deploy workflow * Custom executor to override cypress config * Spacing * Use an existing docker hub image * Switch to npx instead of digging into npm bin location * Remove e2e test before prod deploy * Add workflow images * docs: continous integrationn * Add default props to modal * chore(release): publish [skip ci] - @ohif/extension-cornerstone@1.5.1 - @ohif/extension-vtk@0.53.7 - @ohif/core@1.9.1 - @ohif/ui@0.62.2 - @ohif/viewer@2.8.3 * chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.8 - @ohif/core@1.10.0 - @ohif/ui@0.62.3 - @ohif/viewer@2.8.4 * ci: Redirect site traffic to index.html if file is not resolved * ci: fix typo * fix: 🐛 Code review. Remove 'global state' for displaySize * fix: 🐛 Code review. Ref back to useMedia and pass value down Code review. Ref back to useMedia and pass value down (components) instead of creating a specialized hook to tied any component on it * Merge from master. Missing files changes * feat: 🎸 Code review. Fix issues with DatePicker Fixed at least the minimum issue with datePicker and update some content on every translation changed	2019-11-25 10:45:37 -05:00
ohif-bot	52687a7113	chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.12 - @ohif/ui@0.64.1 - @ohif/viewer@2.10.1	2019-11-20 19:17:36 +00:00
Mirna Silva	421de23ba3	test: Test Cases for User Preferences (#1195 ) * Test Cases for User Preferences * CI fix * Fix for CI * Fix based on PR review comments * Fix for script-tag issue on CI * Fix for new selectors on Preferences Modal and CI failure	2019-11-20 14:15:10 -05:00
ohif-bot	adc8d9ea0f	chore(release): publish [skip ci] - @ohif/extension-cornerstone@1.6.0 - @ohif/extension-vtk@0.53.11 - @ohif/core@1.12.0 - @ohif/ui@0.64.0 - @ohif/viewer@2.10.0	2019-11-19 19:19:32 +00:00
Igor Octaviano	f65639c2b0	feat: New dialog service (#1202 ) * Add dialog provider boilerplate and improve provider imports * Add react-draggable dependency * Add dialog service boilerplate * Refactor modal to use react-modal and remove dependency on modal themed styles * Update cinedialog to use new dialog provider * Add multiple dialogs and refactor provider (dialogs) * Set app root (modal) * Add modal zindex bigger than tooltip * Block drag on buttons/svgs/paths/input and improve jsdoc * Use guid util to generate dialog ids * Explicit props in dialog provider * Improve jsdocs * Fix tests broken * Fix boundaries calculation * Remember last dialog position * Update providers location * Add scroll to modal * Add toggable button toolbar and fix css modal	2019-11-19 14:17:33 -05:00
Danny Brown	cdd75bda2a	docs: copy-paste of Erik's notes on PRs and releases At least until we can sneak some graphics, tables, and emojis in	2019-11-19 04:03:41 -05:00
Danny Brown	d92fe44d3c	chore: add triage flag label	2019-11-19 03:50:17 -05:00
Danny Brown	d90c2ac024	chore: add triage flag label	2019-11-19 03:49:57 -05:00
Danny Brown	7ce5e1d2d3	chore: add triage flag	2019-11-19 03:49:36 -05:00
Danny Brown	a3bf47f9bf	chore: attempt known good syntax	2019-11-19 03:48:32 -05:00
Danny Brown	81f79a26ad	chore: revert	2019-11-19 03:46:28 -05:00
Danny Brown	60b4b5d7cf	chore: lets try double quotes	2019-11-19 03:45:52 -05:00
Danny Brown	69c54d4f49	chore: labels format	2019-11-19 03:44:26 -05:00
Danny Brown	0f8868a232	chore: add triage to default bug report label	2019-11-19 03:39:09 -05:00
Danny Brown	1bbfee4087	chore: use github label syntax for triage flag	2019-11-19 03:38:33 -05:00
ohif-bot	33c7b59611	chore(release): publish [skip ci] - @ohif/extension-vtk@0.53.10 - @ohif/core@1.11.0 - @ohif/ui@0.63.0 - @ohif/viewer@2.9.0	2019-11-19 08:36:12 +00:00
ladeirarodolfo	b17f753e62	feat: Issue 879 viewer route query param not filtering but promoting (#1141 ) * feat: 🎸 Filter by url query param for seriesInstnaceUID * fix: Set SR viewport as active by interaction (#1118) * fix: Set SR viewport as active by interaction * quick fix * (eslint) add "before" as global variables * add data-cy * add data-cy * create E2E test * (E2E) create custom command to set layout size * remove .only e2e * remove throttle for onScroll * feat: 🎸 Code review in progress Code review. Move retrieveMEtadata load to separate folders. Some minor code clean up * feat: 🎸 Code review. Missing changes from previous commit * feat: 🎸 Code review missing changes from previous commit When sorting, Criteria for instance must use instanceNumber and not instancesNumber * feat: 🎸 Code review. Add more jsdoc info * feat: 🎸 Code review. Prettify changed code * feat: 🎸 Instead of filtering do promote. WIP * feat: 🎸 Fix minor issue. Allow promote or filter * feat: 🎸 Changing component to functional component * Merge from master Part1/2 Conflicts solved: both added: core/src/studies/services/wado/retrieveMetadataLoader.js both added: core/src/studies/services/wado/retrieveMetadataLoaderAsync.js both added: core/src/studies/services/wado/retrieveMetadataLoaderSync.js both modified: viewer/src/connectedComponents/ViewerRetrieveStudyData.js both modified: viewer/src/routes/ViewerRouting.js * Merge process from master Part 1/2 Missing files from previous commit * feat: 🎸 Add cancelable promises to cut async methods * feat: 🎸 Missing changes from previous merge process * feat: 🎸 Missing changes from previous merge process	2019-11-19 03:33:48 -05:00
Danny Brown	c77a2ef5c9	docs: fix broken links	2019-11-19 03:24:49 -05:00
Danny Brown	348edd4717	docs: Issue curation	2019-11-19 03:23:30 -05:00
Danny Brown	407060658a	docs: add "our process" to sidebar	2019-11-19 02:53:57 -05:00
Danny Brown	fc00f9d505	docs: clarify purpose of page and index links	2019-11-19 02:52:24 -05:00
Danny Brown	bc3d080672	docs: flush out issue triage	2019-11-19 02:46:04 -05:00
Danny Brown	09353354c3	docs: start "our process" docs	2019-11-19 02:08:46 -05:00