chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.31 - @ohif/core@1.6.2 - @ohif/ui@0.59.1 - @ohif/viewer@2.4.1
fix: #1075 Returning to the Study List before all series have finishe… (#1090 )
2019-11-05 20:01:36 +00:00 · 2019-11-05 16:47:54 -03:00 · 2019-11-04 16:06:44 +00:00 · 2019-11-04 10:55:05 -05:00 · 2019-11-04 09:55:56 +00:00 · 2019-11-04 10:45:53 +01:00
107 changed files with 2457 additions and 939 deletions
@@ -1,8 +1,5 @@
 {
-  "editor.rulers": [
-    80,
-    120
-  ],
+  "editor.rulers": [80, 120],
  // ===
  // Spacing
  // ===
@@ -29,7 +26,7 @@
      "autoFix": true
    }
  ],
-  "prettier.disableLanguages": [],
+  "prettier.disableLanguages": ["html"],
  "prettier.endOfLine": "lf",
  "workbench.colorCustomizations": {}
 }
@@ -3,6 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.52.31](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.30...@ohif/extension-vtk@0.52.31) (2019-11-05)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.30](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.29...@ohif/extension-vtk@0.52.30) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.29](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.28...@ohif/extension-vtk@0.52.29) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Upgrade react-vtkjs-viewport to fix volume orientation ([#1143](https://github.com/OHIF/Viewers/issues/1143)) ([1d86b1a](https://github.com/OHIF/Viewers/commit/1d86b1a102fc422053cff103de8c12ca6f437354))
+
+
+
+
+
+## [0.52.28](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.27...@ohif/extension-vtk@0.52.28) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.27](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.26...@ohif/extension-vtk@0.52.27) (2019-10-31)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.26](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.25...@ohif/extension-vtk@0.52.26) (2019-10-30)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [0.52.25](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.24...@ohif/extension-vtk@0.52.25) (2019-10-29)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 ## [0.52.24](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.23...@ohif/extension-vtk@0.52.24) (2019-10-29)

 **Note:** Version bump only for package @ohif/extension-vtk
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/extension-vtk",
-  "version": "0.52.24",
+  "version": "0.52.31",
  "description": "OHIF extension for VTK.js",
  "author": "OHIF",
  "license": "MIT",
@@ -49,11 +49,11 @@
  "dependencies": {
    "@babel/runtime": "^7.5.5",
    "lodash.throttle": "^4.1.1",
-    "react-vtkjs-viewport": "^0.3.7"
+    "react-vtkjs-viewport": "^0.3.9"
  },
  "devDependencies": {
-    "@ohif/core": "^1.6.0",
-    "@ohif/ui": "^0.58.1",
+    "@ohif/core": "^1.6.2",
+    "@ohif/ui": "^0.59.1",
    "cornerstone-tools": "^4.0.9",
    "cornerstone-wado-image-loader": "^3.0.0",
    "dcmjs": "^0.6.1",
@@ -38,7 +38,8 @@
 [context.deploy-preview]
  base = ""
  publish = ".netlify/www/"
-  command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  command = "chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"
+  # command = "yarn config set workspaces-experimental true && chmod +x .netlify/build-deploy-preview.sh && .netlify/build-deploy-preview.sh"

 [[headers]]
  # Define which paths this specific [[headers]] block will cover.
@@ -72,6 +72,7 @@
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-hooks": "1.5.0",
    "extract-css-chunks-webpack-plugin": "^4.5.4",
+    "favicons-webpack-plugin": "^1.0.2",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^3.0.0",
    "jest": "^24.8.0",
@@ -102,7 +103,7 @@
    "webpack-dev-server": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.1",
-    "workbox-webpack-plugin": "^4.3.1",
+    "workbox-webpack-plugin": "^5.0.0-beta.1",
    "worker-loader": "^2.0.0"
  },
  "husky": {
@@ -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.6.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.1...@ohif/core@1.6.2) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.6.0...@ohif/core@1.6.1) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
 # [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.5.2...@ohif/core@1.6.0) (2019-10-26)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/core",
-  "version": "1.6.0",
+  "version": "1.6.2",
  "description": "Generic business logic for web-based medical imaging applications",
  "author": "OHIF Core Team",
  "license": "MIT",
@@ -1,11 +1,14 @@
 export default function getModalities(modality, modalitiesInStudy) {
-  let modalities = {};
-  if (modality) {
-    modalities = modality;
+  if (!modality && !modalitiesInStudy) {
+    return {};
  }

+  const modalities = modality || {
+    vr: 'CS',
+    Value: [],
+  };
+
  if (modalitiesInStudy) {
-    // Find vr in modalities
    if (modalities.vr && modalities.vr === modalitiesInStudy.vr) {
      for (let i = 0; i < modalitiesInStudy.Value.length; i++) {
        const value = modalitiesInStudy.Value[i];
@@ -14,8 +17,9 @@ export default function getModalities(modality, modalitiesInStudy) {
        }
      }
    } else {
-      modalities = modalitiesInStudy;
+      return modalitiesInStudy;
    }
  }
+
  return modalities;
 }
@@ -30,7 +30,7 @@ function dateToString(date) {
 function getQIDOQueryParams(filter, serverSupportsQIDOIncludeField) {
  const commaSeparatedFields = [
    '00081030', // Study Description
-    '00080060', //Modality
+    '00080060', // Modality
    // Add more fields here if you want them in the result
  ].join(',');

@@ -11,6 +11,7 @@ import writeScript from './writeScript.js';
 import DicomLoaderService from './dicomLoaderService.js';
 import b64toBlob from './b64toBlob.js';
 import * as urlUtil from './urlUtil';
+import makeCancelable from './makeCancelable';

 const utils = {
  guid,
@@ -27,6 +28,7 @@ const utils = {
  DICOMTagDescriptions,
  DicomLoaderService,
  urlUtil,
+  makeCancelable,
 };

 export {
@@ -44,6 +46,7 @@ export {
  DICOMTagDescriptions,
  DicomLoaderService,
  urlUtil,
+  makeCancelable,
 };

 export default utils;
@@ -17,6 +17,7 @@ describe('Top level exports', () => {
      'DICOMTagDescriptions',
      'DicomLoaderService',
      'urlUtil',
+      'makeCancelable',
    ].sort();

    const exports = Object.keys(utils.default).sort();
@@ -0,0 +1,19 @@
+export default function makeCancelable(thenable) {
+  let isCanceled = false;
+  const promise = Promise.resolve(thenable).then(
+    function(result) {
+      if (isCanceled) throw Object.freeze({ isCanceled });
+      return result;
+    },
+    function(error) {
+      if (isCanceled) throw Object.freeze({ isCanceled, error });
+      throw error;
+    }
+  );
+  return Object.assign(Object.create(promise), {
+    then: promise.then.bind(promise),
+    cancel() {
+      isCanceled = true;
+    },
+  });
+}
@@ -3,6 +3,72 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [0.59.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.0...@ohif/ui@0.59.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+# [0.59.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.5...@ohif/ui@0.59.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [0.58.5](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.4...@ohif/ui@0.58.5) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
+## [0.58.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.3...@ohif/ui@0.58.4) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [0.58.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.2...@ohif/ui@0.58.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [0.58.2](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.1...@ohif/ui@0.58.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
 ## [0.58.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.0...@ohif/ui@0.58.1) (2019-10-29)


@@ -1,6 +1,6 @@
 {
  "name": "@ohif/ui",
-  "version": "0.58.1",
+  "version": "0.59.1",
  "description": "A set of React components for Medical Imaging Viewers",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -49,9 +49,9 @@
    "prop-types": "15.6.2",
    "react-bootstrap-modal": "4.2.0",
    "react-dates": "21.2.1",
-    "react-dnd": "9.3.4",
-    "react-dnd-html5-backend": "^9.3.4",
-    "react-dnd-touch-backend": "^9.3.4",
+    "react-dnd": "9.4.0",
+    "react-dnd-html5-backend": "^9.4.0",
+    "react-dnd-touch-backend": "^9.4.0",
    "react-i18next": "^10.11.0",
    "react-with-direction": "1.3.0"
  },
@@ -32,6 +32,7 @@ const DownloadDialog = ({
  downloadBlob,
  defaultSize,
  minimumSize,
+  maximumSize,
  canvasClass,
 }) => {
  const [filename, setFilename] = useState(DEFAULT_FILENAME);
@@ -75,24 +76,24 @@ const DownloadDialog = ({
  }, [defaultSize, disableViewport, enableViewport, viewportElement]);

  useEffect(() => {
+    const validSize = value => (value >= minimumSize ? value : minimumSize);
    const loadAndUpdateViewports = async () => {
      const {
        image,
        width: scaledWidth,
        height: scaledHeight,
      } = await loadImage(activeViewport, viewportElement, width, height);
-
      setLastImage(image);

      toggleAnnotations(showAnnotations, viewportElement);

-      setViewportElementHeight(scaledHeight);
-      setViewportElementWidth(scaledWidth);
+      setViewportElementHeight(validSize(scaledHeight));
+      setViewportElementWidth(validSize(scaledWidth));

      setDownloadCanvas(state => ({
        ...state,
-        height: scaledHeight,
-        width: scaledWidth,
+        height: validSize(scaledHeight),
+        width: validSize(scaledWidth),
      }));

      const {
@@ -108,8 +109,8 @@ const DownloadDialog = ({
      setViewportPreview(state => ({
        ...state,
        src: dataUrl,
-        width: viewportElementWidth,
-        height: viewportElementHeight,
+        width: validSize(viewportElementWidth),
+        height: validSize(viewportElementHeight),
      }));
    };

@@ -125,10 +126,12 @@ const DownloadDialog = ({
    updateViewportPreview,
    fileType,
    downloadCanvas.ref,
+    minimumSize,
+    maximumSize,
  ]);

-  const onHeightChange = () => {
-    const newHeight = event.target.value;
+  const onHeightChange = event => {
+    const newHeight = Math.min(event.target.value, maximumSize);
    setHeight(newHeight);

    setViewportElementHeight(newHeight);
@@ -153,7 +156,7 @@ const DownloadDialog = ({
  };

  const onWidthChange = event => {
-    const newWidth = event.target.value;
+    const newWidth = Math.min(event.target.value, maximumSize);
    setWidth(newWidth);

    setViewportElementWidth(newWidth);
@@ -212,6 +215,7 @@ const DownloadDialog = ({
              <TextInput
                type="number"
                min={minimumSize}
+                max={maximumSize}
                value={width}
                label={t('Image width (px)')}
                onChange={onWidthChange}
@@ -221,6 +225,7 @@ const DownloadDialog = ({
              <TextInput
                type="number"
                min={minimumSize}
+                max={maximumSize}
                value={height}
                label={t('Image height (px)')}
                onChange={onHeightChange}
@@ -329,6 +334,7 @@ DownloadDialog.propTypes = {
  downloadBlob: PropTypes.func.isRequired,
  defaultSize: PropTypes.number.isRequired,
  minimumSize: PropTypes.number.isRequired,
+  maximumSize: PropTypes.number.isRequired,
  canvasClass: PropTypes.string.isRequired,
 };

@@ -1,4 +1,4 @@
-import { StudyBrowser, ThumbnailEntry } from './studyBrowser';
+import { StudyBrowser, Thumbnail } from './studyBrowser';
 import { LayoutButton, LayoutChooser } from './layoutButton';
 import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
@@ -16,6 +16,7 @@ import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
 import { SimpleDialog } from './simpleDialog';
+import { OHIFModal } from './ohifModal';
 import {
  PageToolbar,
  StudyList,
@@ -44,12 +45,13 @@ export {
  StudyList,
  TableList,
  TableListItem,
+  Thumbnail,
  TableSearchFilter,
  TablePagination,
-  ThumbnailEntry,
  ToolbarSection,
  Tooltip,
  AboutModal,
  UserPreferences,
  UserPreferencesModal,
+  OHIFModal,
 };
@@ -30,6 +30,11 @@
  .measurementLocation
    margin-left: 9px;
    margin-top: 9px;
+    overflow: hidden;
+    max-width: calc(100% - 50px);
+    text-overflow: ellipsis;
+    overflow-wrap: normal;
+    white-space: nowrap;

  .measurementDisplayText
    display: inline-block;
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactBootstrapModal from 'react-bootstrap-modal';
+import classNames from 'classnames';
+
+const OHIFModal = ({
+  className,
+  closeButton,
+  backdrop,
+  keyboard,
+  show,
+  title,
+  onHide,
+  footer: Footer,
+  header: Header,
+  children: Component,
+}) => (
+  <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>
+      {Component && <Component hide={onHide} />}
+    </ReactBootstrapModal.Body>
+    {Footer && (
+      <ReactBootstrapModal.Footer>
+        {' '}
+        <Footer hide={onHide} />
+      </ReactBootstrapModal.Footer>
+    )}
+  </ReactBootstrapModal>
+);
+
+OHIFModal.propTypes = {
+  className: PropTypes.string,
+  closeButton: PropTypes.bool,
+  backdrop: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  show: PropTypes.bool,
+  title: PropTypes.string,
+  onHide: PropTypes.func,
+  footer: PropTypes.node,
+  header: PropTypes.node,
+  children: PropTypes.node,
+};
+
+export default OHIFModal;
@@ -0,0 +1,39 @@
+---
+name: OHIFModal
+menu: Components
+route: /components/ohif-modal
+---
+
+import { Playground, Props } from 'docz'
+import { State } from 'react-powerplug'
+import { OHIFModal } from './../index'
+import NameSpace from '../../../__docs__/NameSpace'
+
+# OHIF Modal
+
+## Basic usage
+
+<Playground>
+  <State
+    initial={{}}
+  >
+    {({ state, setState }) => (
+      <React.Fragment>
+        <div>
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </div>
+        <div style={{ maxWidth: '400px', margin: '0 auto' }}>
+          <OHIFModal />
+        </div>
+      </React.Fragment>
+    )}
+  </State>
+</Playground>
+
+## API
+
+<Props of={OHIFModal} />
+
+## Translation Namespace
+
+<NameSpace name="OHIFModal" />
@@ -0,0 +1,2 @@
+import OHIFModal from './OHIFModal';
+export { OHIFModal };
@@ -45,7 +45,7 @@
      .thumbnails-wrapper
        transform-origin: 0% 0%

-      .ThumbnailEntry
+      .thumbnail
        float: left

    .series-item
@@ -98,7 +98,7 @@
      transition: transform 0.3s ease
      transform-origin: 100% 0%

-    .ThumbnailEntry
+    .thumbnail
      float: right

      .series-details
@@ -179,7 +179,7 @@
    .thumbnails-wrapper
      transform: scale(1) translateY(0)

-    .ThumbnailEntry .series-details
+    .thumbnail .series-details
      opacity: 1
      transform: translateY(0)
      transition-delay: 0.3s
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';

-import { ThumbnailEntry } from './../studyBrowser';
+import { Thumbnail } from './../studyBrowser';
 import './SeriesList.styl';

 export class SeriesList extends Component {
@@ -24,7 +24,7 @@ export class SeriesList extends Component {
  getSeriesItems = () => {
    return this.props.seriesItems.map((seriesData, index) => {
      return (
-        <ThumbnailEntry
+        <Thumbnail
          key={seriesData.displaySetInstanceUid}
          id={`series_thumb_${index}`}
          {...seriesData}
@@ -1,85 +0,0 @@
-import React, { PureComponent, memo } from 'react';
-import { DragLayer } from 'react-dnd';
-import PropTypes from 'prop-types';
-import { ThumbnailEntry } from './ThumbnailEntry';
-import './DragPreview.styl';
-
-let subscribedToOffsetChange = false;
-let dragPreviewRef = null;
-
-const collector = monitor => {
-  if (!subscribedToOffsetChange) {
-    monitor.subscribeToOffsetChange(onOffsetChange(monitor));
-    subscribedToOffsetChange = true;
-  }
-
-  if (dragPreviewRef) {
-    const offset =
-      monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
-
-    if (offset) {
-      const transform = `translate(${offset.x}px, ${offset.y}px)`;
-      dragPreviewRef.style['transform'] = transform;
-      dragPreviewRef.style['-webkit-transform'] = transform;
-    }
-  }
-
-  const item = monitor.getItem();
-  let newItem = {};
-  if (item) {
-    newItem = {
-      active: item.active,
-      altImageText: item.altImageText,
-      id: item.id,
-      imageSrc: item.imageSrc,
-      imageId: item.imageId,
-      instanceNumber: item.instanceNumber,
-      error: item.error,
-      numImageFrames: item.numImageFrames,
-      seriesDescription: item.seriesDescription,
-      seriesNumber: item.seriesNumber,
-      stackPercentComplete: item.stackPercentComplete,
-    };
-  }
-
-  return {
-    ...newItem,
-    isDragging: monitor.isDragging(),
-  };
-};
-
-const onOffsetChange = monitor => () => {
-  if (!dragPreviewRef) return;
-
-  const offset =
-    monitor.getSourceClientOffset() || monitor.getInitialSourceClientOffset();
-  if (!offset) return;
-
-  const transform = `translate(${offset.x}px, ${offset.y}px)`;
-  dragPreviewRef.style['transform'] = transform;
-  dragPreviewRef.style['-webkit-transform'] = transform;
-};
-
-const updateRef = ref => {
-  dragPreviewRef = ref;
-};
-
-class DragPreview extends PureComponent {
-  render() {
-    const { isDragging } = this.props;
-    if (!isDragging) return null;
-    return (
-      <div className="DragPreview">
-        <div className="source-preview" ref={updateRef}>
-          <ThumbnailEntry {...this.props} />
-        </div>
-      </div>
-    );
-  }
-}
-
-DragPreview.propTypes = {
-  isDragging: PropTypes.bool,
-};
-
-export default DragLayer(collector)(memo(DragPreview));
@@ -1,14 +0,0 @@
-.DragPreview
-
-  .source-preview {
-    border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    opacity: 0.5;
-    z-index: 9999;
-    left: 0;
-    top: 0;
-    transition: none;
-    pointer-events: none;
-    -webkit-touch-callout: none;
-  }
@@ -1,6 +1,7 @@
 /* global cornerstone */
 import './ImageThumbnail.styl';

+import { utils } from '@ohif/core';
 import React, { PureComponent } from 'react';

 import PropTypes from 'prop-types';
@@ -32,7 +33,7 @@ export default class ImageThumbnail extends PureComponent {

  constructor(props) {
    super(props);
-
+    this.cancelablePromises = [];
    this.canvas = React.createRef();
    this.state = {
      loading: this.shouldRenderToCanvas(),
@@ -43,10 +44,17 @@ export default class ImageThumbnail extends PureComponent {
    return this.props.imageId && !this.props.imageSrc;
  }

+  fetchImage() {
+    const cancelablePromise = utils.makeCancelable(
+      cornerstone.loadAndCacheImage(this.props.imageId)
+    );
+    this.cancelablePromises.push(cancelablePromise);
+    return cancelablePromise;
+  }
+
  componentDidMount() {
    if (this.shouldRenderToCanvas()) {
-      cornerstone
-        .loadAndCacheImage(this.props.imageId)
+      this.fetchImage()
        .then(image => {
          cornerstone.renderToCanvas(this.canvas.current, image);
          this.setState({
@@ -54,6 +62,7 @@ export default class ImageThumbnail extends PureComponent {
          });
        })
        .catch(error => {
+          if (error.isCanceled) return;
          this.setState({
            loading: false,
            error: true,
@@ -63,6 +72,12 @@ export default class ImageThumbnail extends PureComponent {
    }
  }

+  componentWillUnmount() {
+    while (this.cancelablePromises.length > 0) {
+      this.cancelablePromises.pop().cancel();
+    }
+  }
+
  render() {
    let loadingOrError;
    if (this.props.error) {
@@ -1,62 +1,103 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { ThumbnailEntry } from './ThumbnailEntry';
-import ThumbnailEntryDragSource from './ThumbnailEntryDragSource.js';
+import { Thumbnail } from './Thumbnail.js';
 import './StudyBrowser.styl';

-class StudyBrowser extends Component {
-  static defaultProps = {
-    studies: [],
-    supportsDragAndDrop: true,
-  };
+function StudyBrowser(props) {
+  const {
+    studies,
+    onThumbnailClick,
+    onThumbnailDoubleClick,
+    supportsDrag,
+  } = props;

-  static propTypes = {
-    studies: PropTypes.array.isRequired,
-    supportsDragAndDrop: PropTypes.bool.isRequired,
-    onThumbnailClick: PropTypes.func,
-    onThumbnailDoubleClick: PropTypes.func,
-  };
+  return (
+    <div className="study-browser">
+      <div className="scrollable-study-thumbnails">
+        {studies
+          .map((study, studyIndex) => {
+            const { studyInstanceUid } = study;
+            return study.thumbnails.map((thumb, thumbIndex) => {
+              // TODO: Thumb has more props than we care about?
+              const {
+                altImageText,
+                displaySetInstanceUid,
+                imageId,
+                instanceNumber,
+                numImageFrames,
+                seriesDescription,
+                seriesNumber,
+                stackPercentComplete,
+              } = thumb;

-  render() {
-    const studies = this.props.studies;
-
-    const thumbnails = studies.map((study, studyIndex) => {
-      return study.thumbnails.map((thumb, thumbIndex) => {
-        if (this.props.supportsDragAndDrop) {
-          return (
-            <ThumbnailEntryDragSource
-              key={thumb.displaySetInstanceUid}
-              {...study}
-              {...thumb}
-              id={`${studyIndex}_${thumbIndex}`}
-              onClick={this.props.onThumbnailClick}
-              onDoubleClick={this.props.onThumbnailDoubleClick}
-            />
-          );
-        } else {
-          return (
-            <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
-              <ThumbnailEntry
-                key={thumb.displaySetInstanceUid}
-                {...study}
-                {...thumb}
-                id={`${studyIndex}_${thumbIndex}`}
-                onClick={this.props.onThumbnailClick}
-                onDoubleClick={this.props.onThumbnailDoubleClick}
-              />
-            </div>
-          );
-        }
-      });
-    });
-
-    const components = thumbnails.flat();
-    return (
-      <div className="StudyBrowser">
-        <div className="scrollable-study-thumbnails">{components}</div>
+              return (
+                <div
+                  key={`container_${studyIndex}_${thumbIndex}`}
+                  className="thumbnail-container"
+                  data-cy="thumbnail-list"
+                >
+                  <Thumbnail
+                    supportsDrag={supportsDrag}
+                    key={`${studyIndex}_${thumbIndex}`}
+                    id={`${studyIndex}_${thumbIndex}`} // Unused?
+                    // Study
+                    studyInstanceUid={studyInstanceUid} // used by drop
+                    // Thumb
+                    altImageText={altImageText}
+                    imageId={imageId}
+                    instanceNumber={instanceNumber}
+                    displaySetInstanceUid={displaySetInstanceUid} // used by drop
+                    numImageFrames={numImageFrames}
+                    seriesDescription={seriesDescription}
+                    seriesNumber={seriesNumber}
+                    stackPercentComplete={stackPercentComplete}
+                    // Events
+                    onClick={onThumbnailClick.bind(
+                      undefined,
+                      displaySetInstanceUid
+                    )}
+                    onDoubleClick={onThumbnailDoubleClick}
+                  />
+                </div>
+              );
+            });
+          })
+          .flat()}
      </div>
-    );
-  }
+    </div>
+  );
 }

+const noop = () => {};
+
+StudyBrowser.propTypes = {
+  studies: PropTypes.arrayOf(
+    PropTypes.shape({
+      studyInstanceUid: PropTypes.string.isRequired,
+      thumbnails: PropTypes.arrayOf(
+        PropTypes.shape({
+          altImageText: PropTypes.string,
+          displaySetInstanceUid: PropTypes.string.isRequired,
+          imageId: PropTypes.string,
+          instanceNumber: PropTypes.number,
+          numImageFrames: PropTypes.number,
+          seriesDescription: PropTypes.string,
+          seriesNumber: PropTypes.number,
+          stackPercentComplete: PropTypes.number,
+        })
+      ),
+    })
+  ).isRequired,
+  supportsDrag: PropTypes.bool,
+  onThumbnailClick: PropTypes.func,
+  onThumbnailDoubleClick: PropTypes.func,
+};
+
+StudyBrowser.defaultProps = {
+  studies: [],
+  supportsDrag: true,
+  onThumbnailClick: noop,
+  onThumbnailDoubleClick: noop,
+};
+
 export { StudyBrowser };
@@ -1,4 +1,4 @@
-.StudyBrowser
+.study-browser
  float: left
  height: 100%
  width: 100%
@@ -22,7 +22,7 @@
    &::-webkit-scrollbar
      display: none

-    .ThumbnailEntryContainer
+    .thumbnail-container
      margin: 0 auto;
      padding-bottom: 1.5rem;

@@ -0,0 +1,152 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDrag } from 'react-dnd';
+import ImageThumbnail from './ImageThumbnail';
+import classNames from 'classnames';
+
+import './Thumbnail.styl';
+
+function ThumbnailFooter({
+  seriesDescription,
+  seriesNumber,
+  instanceNumber,
+  numImageFrames,
+}) {
+  const infoOnly = !seriesDescription;
+
+  const getInfo = (value, icon, className = '') => {
+    return (
+      <div className={classNames('item item-series', className)}>
+        <div className="icon">{icon}</div>
+        <div className="value">{value}</div>
+      </div>
+    );
+  };
+  const getSeriesInformation = (
+    seriesNumber,
+    instanceNumber,
+    numImageFrames
+  ) => {
+    if (!seriesNumber && !instanceNumber && !numImageFrames) {
+      return;
+    }
+
+    return (
+      <div className="series-information">
+        {getInfo(seriesNumber, 'S:')}
+        {getInfo(instanceNumber, 'I:')}
+        {getInfo(numImageFrames, '', 'image-frames')}
+      </div>
+    );
+  };
+
+  return (
+    <div className={classNames('series-details', { 'info-only': infoOnly })}>
+      <div className="series-description">{seriesDescription}</div>
+      {getSeriesInformation(seriesNumber, instanceNumber, numImageFrames)}
+    </div>
+  );
+}
+
+function Thumbnail(props) {
+  const {
+    active,
+    altImageText,
+    error,
+    displaySetInstanceUid,
+    imageId,
+    imageSrc,
+    instanceNumber,
+    numImageFrames,
+    seriesDescription,
+    seriesNumber,
+    stackPercentComplete,
+    studyInstanceUid,
+    onClick,
+    onDoubleClick,
+    onMouseDown,
+    supportsDrag,
+  } = props;
+
+  const [collectedProps, drag, dragPreview] = useDrag({
+    // `droppedItem` in `dropTarget`
+    // The only data it will have access to
+    item: {
+      studyInstanceUid,
+      displaySetInstanceUid,
+      type: 'thumbnail', // Has to match `dropTarget`'s type
+    },
+    canDrag: function(monitor) {
+      return supportsDrag;
+    },
+  });
+
+  const hasImage = imageSrc || imageId;
+  const hasAltText = altImageText !== undefined;
+
+  return (
+    <div
+      ref={drag}
+      className={classNames('thumbnail', { active: active })}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseDown={onMouseDown}
+    >
+      {/* SHOW IMAGE */}
+      {hasImage && (
+        <ImageThumbnail
+          imageSrc={imageSrc}
+          imageId={imageId}
+          error={error}
+          stackPercentComplete={stackPercentComplete}
+        />
+      )}
+      {/* SHOW TEXT ALTERNATIVE */}
+      {!hasImage && hasAltText && (
+        <div className={'alt-image-text p-x-1'}>
+          <h1>{altImageText}</h1>
+        </div>
+      )}
+      {ThumbnailFooter(props)}
+    </div>
+  );
+}
+
+const noop = () => {};
+
+Thumbnail.propTypes = {
+  supportsDrag: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  displaySetInstanceUid: PropTypes.string.isRequired,
+  studyInstanceUid: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  imageId: PropTypes.string,
+  error: PropTypes.bool,
+  active: PropTypes.bool,
+  stackPercentComplete: PropTypes.number,
+  /**
+  altImageText will be used when no imageId or imageSrc is provided.
+It will be displayed inside the <div>. This is useful when it is difficult
+  to make a preview for a type of DICOM series (e.g. DICOM-SR)
+  */
+  altImageText: PropTypes.string,
+  seriesDescription: PropTypes.string,
+  seriesNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  numImageFrames: PropTypes.number,
+  onDoubleClick: PropTypes.func,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+};
+
+Thumbnail.defaultProps = {
+  supportsDrag: false,
+  active: false,
+  error: false,
+  stackPercentComplete: 0,
+  onDoubleClick: noop,
+  onClick: noop,
+  onMouseDown: noop,
+};
+
+export { Thumbnail };
@@ -4,12 +4,12 @@
  --series-count-background-color: #678696;
 }

-.ThumbnailEntry
+.thumbnail
  cursor: pointer
  display: table
-
-  .p-x-1
-    padding: 0 1rem
+  margin: 0 auto;
+  min-width: 90%;
+  padding-bottom: 1.5rem;

  .alt-image-text
    align-items: center;
@@ -31,6 +31,8 @@
      color: var(--text-primary-color);

  .series-details
+    display: flex;
+    flex-direction: column
    color: var(--text-primary-color);
    font-size: 14px
    line-height: 1.3em
@@ -38,64 +40,30 @@
    margin-left: 1rem
    margin-right: 0.5rem
    max-width: 217px
-    min-height: 36px
    position: relative
    word-wrap: break-word

-    &.info-only
-      .series-description
-        display: none
-
-      .series-information
-        display: flex
-        flex-grow: 1
-        float: none
-        max-width: none
-        padding-right: 0
-
-        .item
-          flex: 1
-          text-align: center
-
-          .icon, .value
-            display: inline
-            float: none
-            line-height: 25px
+    .series-description
+      flex-grow: 1

+    &.info-only .series-description
+      display: none

  .series-information
    display: flex
    flex-direction: row
-    align-items: center
-
-    .item
-      flex: 1
-      text-align: center
+    justify-content: space-between

    .item-frames .icon
      height: 18px

-    .value
-      color: var(--text-secondary-color);
-      display: inline
-      font-size: 12px
-      margin-left: 4px
-      text-overflow: ellipsis
-      white-space: nowrap
-
-    .icon
-      color: var(--active-color);
-      display: inline
-      font-size: 10px
-      font-weight: 900
-      text-align: right
-
-      div
+    .item-series.image-frames .icon
        background-color: var(--series-count-background-color);
        margin-top: 6px
        position: relative

        &:after
+          content: ''
          background-color: var(--active-color);
          box-shadow: 1px 1px rgba(0, 0, 0, .115)
          left: -4px
@@ -104,16 +72,27 @@

        &
        &:after
-          border: 0px solid var(--series-count-background-color)
          content: ''
+          border: 0px solid var(--series-count-background-color)
          display: inline-block
          height: 11px
          width: 11px

-.image-thumbnail-clone
-  z-index: 100000
-  pointer-events: none
+    .value
+      color: var(--text-secondary-color);
+      display: inline-block
+      font-size: 12px
+      margin-left: 4px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+      width: calc(100% - 15px)
+      vertical-align: middle

-  &:hover
-    border-color: var(--hover-color);
-    box-shadow: none
+    .icon
+      color: var(--active-color);
+      display: inline-block
+      font-size: 10px
+      font-weight: 900
+      text-align: right
+      width: 11px
@@ -1,114 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ImageThumbnail from './ImageThumbnail';
-import './ThumbnailEntry.styl';
-import classnames from 'classnames';
-
-class ThumbnailEntry extends Component {
-  static defaultProps = {
-    active: false,
-    error: false,
-    stackPercentComplete: 0,
-  };
-
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    imageSrc: PropTypes.string,
-    imageId: PropTypes.string,
-    error: PropTypes.bool.isRequired,
-    active: PropTypes.bool.isRequired,
-    stackPercentComplete: PropTypes.number,
-    /**
-    altImageText will be used when no imageId or imageSrc is provided.
-    It will be displayed inside the <div>. This is useful when it is difficult
-    to make a preview for a type of DICOM series (e.g. DICOM-SR)
-    */
-    altImageText: PropTypes.string,
-    seriesDescription: PropTypes.string,
-    seriesNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    instanceNumber: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    numImageFrames: PropTypes.number,
-    onDoubleClick: PropTypes.func,
-    onClick: PropTypes.func,
-  };
-
-  render() {
-    const hasInstanceNumber = this.props.instanceNumber !== undefined;
-
-    let className = classnames('ThumbnailEntry noselect', {
-      active: this.props.active,
-    });
-
-    let contents = null;
-    if (this.props.imageSrc || this.props.imageId) {
-      contents = (
-        <div className="p-x-1">
-          <ImageThumbnail
-            imageSrc={this.props.imageSrc}
-            imageId={this.props.imageId}
-            error={this.props.error}
-            stackPercentComplete={this.props.stackPercentComplete}
-          />
-        </div>
-      );
-    } else if (this.props.altImageText) {
-      contents = (
-        <div className="p-x-1">
-          <div className="alt-image-text">
-            <h1>{this.props.altImageText}</h1>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={className}
-        onClick={this.onClick}
-        onDoubleClick={this.onDoubleClick}
-        onMouseDown={this.onMouseDown}
-      >
-        {contents}
-        <div
-          className="series-details"
-        >
-          <div className="series-description">
-            {this.props.seriesDescription}
-          </div>
-          <div className="series-information">
-            <div className="item item-series">
-              <div className="icon">S:</div>
-              <div className="value">{this.props.seriesNumber}</div>
-            </div>
-            {hasInstanceNumber && (
-              <div className="item item-series">
-                <div className="icon">I:</div>
-                <div className="value">{this.props.instanceNumber}</div>
-              </div>
-            )}
-            <div className="item item-frames">
-              <div className="icon">
-                <div />
-              </div>
-              <div className="value">{this.props.numImageFrames}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onClick = () => {
-    if (this.props.onClick) {
-      this.props.onClick(this.props.displaySetInstanceUid);
-    }
-  };
-
-  onDoubleClick = () => {
-    if (this.props.onDoubleClick) {
-      this.props.onDoubleClick(this.props.displaySetInstanceUid);
-    }
-  };
-}
-
-export { ThumbnailEntry };
@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { DragSource } from 'react-dnd';
-import DragPreview from './DragPreview';
-import { ThumbnailEntry } from './ThumbnailEntry.js';
-
-// Drag sources and drop targets only interact
-// if they have the same string type.
-const Types = {
-  THUMBNAIL: 'thumbnail',
-};
-
-const thumbnailSource = {
-  /*canDrag(props) {
-    return props.error === false;
-  },*/
-
-  beginDrag(props) {
-    return props;
-  },
-
-  endDrag(props, monitor) {
-    //const item = monitor.getItem();
-    const dropResult = monitor.getDropResult();
-
-    if (dropResult) {
-      //console.log(`You dropped ${item.id} into ${dropResult.id}!`);
-      //console.log(item);
-    }
-  },
-};
-
-class ThumbnailEntryDragSource extends Component {
-  static propTypes = {
-    connectDragSource: PropTypes.func.isRequired,
-    isDragging: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    isDragging: false,
-  };
-
-  render() {
-    const { connectDragSource } = this.props;
-    const dropEffect = 'copy';
-
-    return connectDragSource(
-      <div className="ThumbnailEntryContainer" data-cy="thumbnail-list">
-        <DragPreview {...this.props} />
-        <ThumbnailEntry {...this.props} />
-      </div>,
-      { dropEffect }
-    );
-  }
-}
-
-const collect = (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-});
-
-export default DragSource(Types.THUMBNAIL, thumbnailSource, collect)(
-  ThumbnailEntryDragSource
-);
@@ -1,2 +1,2 @@
 export { StudyBrowser } from './StudyBrowser.js';
-export { ThumbnailEntry } from './ThumbnailEntry.js';
+export { Thumbnail } from './Thumbnail.js';
@@ -5,12 +5,9 @@ import classNames from 'classnames';
 import TableSearchFilter from './TableSearchFilter.js';
 import useMedia from '../../hooks/useMedia.js';
 import PropTypes from 'prop-types';
-import ColorHash from './internal/color-hash.js';
 import { StudyListLoadingText } from './StudyListLoadingText.js';
 import { withTranslation } from '../../utils/LanguageProvider';

-const colorHash = new ColorHash();
-
 /**
 *
 *
@@ -236,13 +233,15 @@ function TableRow(props) {
      onClick={() => handleClick(studyInstanceUid)}
      className={classNames({ active: isHighlighted })}
    >
-      <td className={classNames({ emptyCell: !patientName })}>
+      <td className={classNames({ 'empty-value': !patientName })}>
        {patientName || `(${t('Empty')})`}
      </td>
      <td>{patientId}</td>
      <td>{accessionNumber}</td>
      <td>{studyDate}</td>
-      <td>{modalities}</td>
+      <td className={classNames({ 'empty-value': !modalities })}>
+        {modalities || `(${t('Empty')})`}
+      </td>
      <td>{studyDescription}</td>
    </tr>
  );
@@ -252,7 +251,7 @@ function TableRow(props) {
      onClick={() => handleClick(studyInstanceUid)}
      className={classNames({ active: isHighlighted })}
    >
-      <td className={classNames({ emptyCell: !patientName })}>
+      <td className={classNames({ 'empty-value': !patientName })}>
        {patientName || `(${t('Empty')})`}
        <div style={{ color: '#60656f' }}>{patientId}</div>
      </td>
@@ -274,25 +273,19 @@ function TableRow(props) {
            style={{
              display: 'flex',
              flexDirection: 'column',
-              minWidth: '80px',
-              maxWidth: '100px',
+              maxWidth: '80px',
+              width: '80px',
            }}
          >
            <div
-              style={{
-                backgroundColor: colorHash.hex(modalities),
-                borderRadius: '16px',
-                padding: '2px 8px 0px 8px',
-                fontWeight: 500,
-                marginBottom: '4px',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-              }}
+              className={classNames({
+                modalities: modalities,
+                'empty-value': !modalities,
+              })}
              aria-label={modalities}
              title={modalities}
            >
-              {modalities}
+              {modalities || `(${t('Empty')})`}
            </div>
            <div
              style={{
@@ -322,7 +315,7 @@ function TableRow(props) {
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          {/* NAME AND ID */}
          <div
-            className={classNames({ emptyCell: !patientName })}
+            className={classNames({ 'empty-value': !patientName })}
            style={{ width: '150px', minWidth: '150px' }}
          >
            <div style={{ fontWeight: 500, paddingTop: '3px' }}>
@@ -348,19 +341,19 @@ function TableRow(props) {
            style={{
              display: 'flex',
              flexDirection: 'column',
-              minWidth: '80px',
+              maxWidth: '80px',
+              width: '80px',
            }}
          >
            <div
-              style={{
-                backgroundColor: colorHash.hex(modalities),
-                borderRadius: '16px',
-                padding: '2px 8px 0px 8px',
-                fontWeight: 500,
-                marginBottom: '4px',
-              }}
+              className={classNames({
+                modalities: modalities,
+                'empty-value': !modalities,
+              })}
+              aria-label={modalities}
+              title={modalities}
            >
-              {modalities}
+              {modalities || `(${t('Empty')})`}
            </div>
            <div>{studyDate}</div>
          </div>
@@ -381,7 +374,7 @@ function TableRow(props) {
 TableRow.propTypes = {
  accessionNumber: PropTypes.string.isRequired,
  isHighlighted: PropTypes.bool,
-  modalities: PropTypes.string.isRequired,
+  modalities: PropTypes.string,
  patientId: PropTypes.string.isRequired,
  patientName: PropTypes.string.isRequired,
  studyDate: PropTypes.string.isRequired,
@@ -113,11 +113,18 @@ table.table
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
+  color: var(--table-text-primary-color)
+  font-weight: 300

  > tbody tr
    padding: 5px
    background-color: black

+  > tbody td
+    padding: $body-cell-top-bottom-padding 8px;
+    height: $body-cell-height
+    word-wrap: break-word;
+
  /* Striped Variant */
  &.table--striped > tbody tr:nth-child(even)
    background-color: var(--ui-gray-darker)
@@ -130,6 +137,9 @@ table.table
      &:hover, &:active, &.active
        background-color: var(--ui-gray-darker)

+  .empty-value
+    color: var(--ui-gray-light)
+
 .study-list-container > table.table > tr
  height: 20px

@@ -146,18 +156,14 @@ table.table
  text-align: left;
  border-top: 0;

-.study-list-container > table.table > tbody > tr > td
-  padding: $body-cell-top-bottom-padding 8px;
-  height: $body-cell-height
-  color: var(--table-text-primary-color)
-  font-weight: 300
-  word-wrap: break-word;
-
-  &.emptyCell
-    color: var(--ui-gray-light)
-
 .study-list-container > table.table > thead > tr > th.studyDate
  min-width: 230px
+.study-list-container > table.table .modalities
+  font-weight: 500;
+  min-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;

 .study-list-container
  .filters
@@ -1,24 +0,0 @@
-/**
- * BKDR Hash (modified version)
- *
- * @param {String} str string to hash
- * @returns {Number}
- */
-function BKDRHash(str) {
-  const seed = 131;
-  const seed2 = 137;
-  let hash = 0;
-  // make hash more sensitive for short string like 'a', 'b', 'c'
-  str += 'x';
-  // Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
-  var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
-  for (var i = 0; i < str.length; i++) {
-    if (hash > MAX_SAFE_INTEGER) {
-      hash = parseInt(hash / seed2);
-    }
-    hash = hash * seed + str.charCodeAt(i);
-  }
-  return hash;
-}
-
-export default BKDRHash;
@@ -1,145 +0,0 @@
-import BKDRHash from './bkdr-hash';
-
-/**
- * Convert RGB Array to HEX
- *
- * @param {Array} RGBArray - [R, G, B]
- * @returns {String} 6 digits hex starting with #
- */
-function RGB2HEX(RGBArray) {
-  let hex = '#';
-  RGBArray.forEach(function(value) {
-    if (value < 16) {
-      hex += 0;
-    }
-    hex += value.toString(16);
-  });
-  return hex;
-}
-
-/**
- * Convert HSL to RGB
- *
- * @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information.
- * @param {Number} H Hue ∈ [0, 360)
- * @param {Number} S Saturation ∈ [0, 1]
- * @param {Number} L Lightness ∈ [0, 1]
- * @returns {Array} R, G, B ∈ [0, 255]
- */
-function HSL2RGB(H, S, L) {
-  H /= 360;
-
-  const q = L < 0.5 ? L * (1 + S) : L + S - L * S;
-  const p = 2 * L - q;
-
-  return [H + 1 / 3, H, H - 1 / 3].map(function(color) {
-    if (color < 0) {
-      color++;
-    }
-    if (color > 1) {
-      color--;
-    }
-    if (color < 1 / 6) {
-      color = p + (q - p) * 6 * color;
-    } else if (color < 0.5) {
-      color = q;
-    } else if (color < 2 / 3) {
-      color = p + (q - p) * 6 * (2 / 3 - color);
-    } else {
-      color = p;
-    }
-    return Math.round(color * 255);
-  });
-}
-
-function isArray(o) {
-  return Object.prototype.toString.call(o) === '[object Array]';
-}
-
-/**
- * Color Hash Class
- *
- * @class
- */
-const ColorHash = function(options = {}) {
-  const LS = [options.lightness, options.saturation].map(function(param) {
-    param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
-    return isArray(param) ? param.concat() : [param];
-  });
-
-  this.L = LS[0];
-  this.S = LS[1];
-
-  if (typeof options.hue === 'number') {
-    options.hue = { min: options.hue, max: options.hue };
-  }
-  if (typeof options.hue === 'object' && !isArray(options.hue)) {
-    options.hue = [options.hue];
-  }
-  if (typeof options.hue === 'undefined') {
-    options.hue = [];
-  }
-  this.hueRanges = options.hue.map(function(range) {
-    return {
-      min: typeof range.min === 'undefined' ? 0 : range.min,
-      max: typeof range.max === 'undefined' ? 360 : range.max,
-    };
-  });
-
-  this.hash = options.hash || BKDRHash;
-};
-
-/**
- * Returns the hash in [h, s, l].
- * Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
- *
- * @param {String} str string to hash
- * @returns {Array} [h, s, l]
- */
-ColorHash.prototype.hsl = function(str) {
-  var H, S, L;
-  var hash = this.hash(str);
-
-  if (this.hueRanges.length) {
-    var range = this.hueRanges[hash % this.hueRanges.length];
-    var hueResolution = 727; // note that 727 is a prime
-    H =
-      (((hash / this.hueRanges.length) % hueResolution) *
-        (range.max - range.min)) /
-        hueResolution +
-      range.min;
-  } else {
-    H = hash % 359; // note that 359 is a prime
-  }
-  hash = parseInt(hash / 360);
-  S = this.S[hash % this.S.length];
-  hash = parseInt(hash / this.S.length);
-  L = this.L[hash % this.L.length];
-
-  return [H, S, L];
-};
-
-/**
- * Returns the hash in [r, g, b].
- * Note that R, G, B ∈ [0, 255]
- *
- * @param {String} str string to hash
- * @returns {Array} [r, g, b]
- */
-ColorHash.prototype.rgb = function(str) {
-  var hsl = this.hsl(str);
-  return HSL2RGB.apply(this, hsl);
-};
-
-/**
- * Returns the hash in hex
- *
- * @param {String} str string to hash
- * @returns {String} hex with #
- */
-ColorHash.prototype.hex = function(str) {
-  var rgb = this.rgb(str);
-  return RGB2HEX(rgb);
-};
-
-export default ColorHash;
@@ -38,6 +38,7 @@
  .itemContent
    flex: 1
    color: var(--text-secondary-color)
+    width: calc(100% - 30px);
    font-weight: 400
    margin-left: 9px;
    margin-top: 9px;
@@ -17,14 +17,15 @@ import {
  StudyList,
  TableList,
  TableListItem,
+  Thumbnail,
  TableSearchFilter,
  TablePagination,
-  ThumbnailEntry,
  ToolbarSection,
  Tooltip,
  AboutModal,
  UserPreferences,
  UserPreferencesModal,
+  OHIFModal,
 } from './components';
 import { useDebounce, useMedia } from './hooks';

@@ -52,6 +53,11 @@ import SnackbarProvider, {
  useSnackbarContext,
  withSnackbar,
 } from './utils/SnackbarProvider';
+import ModalProvider, {
+  useModal,
+  withModal,
+  ModalConsumer,
+} from './utils/ModalProvider';

 export {
  // Elements
@@ -86,9 +92,9 @@ export {
  StudyList,
  TableList,
  TableListItem,
+  Thumbnail,
  TableSearchFilter,
  TablePagination,
-  ThumbnailEntry,
  Toolbar,
  ToolbarButton,
  ToolbarSection,
@@ -100,6 +106,11 @@ export {
  SnackbarProvider,
  useSnackbarContext,
  withSnackbar,
+  ModalProvider,
+  useModal,
+  ModalConsumer,
+  withModal,
+  OHIFModal,
  // Hooks
  useDebounce,
  useMedia,
@@ -0,0 +1,83 @@
+import React, { useState, createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const ModalContext = createContext(null);
+const { Provider, Consumer } = ModalContext;
+
+export const useModal = () => useContext(ModalContext);
+
+const ModalProvider = ({ children, modal: Modal }) => {
+  const DEFAULT_OPTIONS = {
+    component: null /* The component instance inside the modal. */,
+    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. */,
+  };
+
+  const [options, setOptions] = useState(DEFAULT_OPTIONS);
+
+  /**
+   * Show the modal and override its configuration props.
+   *
+   * @returns void
+   */
+  const show = (component, props = {}) =>
+    setOptions(Object.assign({}, options, props, { component }));
+
+  /**
+   * Hide the modal and set its properties to default.
+   *
+   * @returns void
+   */
+  const hide = () => setOptions(DEFAULT_OPTIONS);
+
+  return (
+    <Provider value={{ ...options, show, hide }}>
+      <Consumer>
+        {props => {
+          const { component, footer, header, customClassName } = props;
+          return component ? (
+            <Modal
+              className={classNames(customClassName, component.className)}
+              backdrop={options.backdrop}
+              keyboard={options.keyboard}
+              show={options.show}
+              title={options.title}
+              closeButton={options.closeButton}
+              onHide={hide}
+              footer={footer}
+              header={header}
+            >
+              {component}
+            </Modal>
+          ) : null;
+        }}
+      </Consumer>
+      {children}
+    </Provider>
+  );
+};
+
+ModalProvider.propTypes = {
+  children: PropTypes.node,
+  modal: PropTypes.node,
+};
+
+/**
+ * Higher Order Component to use the modal methods through a Class Component.
+ *
+ * @returns
+ */
+export const withModal = Component => {
+  return function WrappedComponent(props) {
+    return <Component {...props} modalContext={{ ...useModal() }} />;
+  };
+};
+
+export default ModalProvider;
+
+export const ModalConsumer = ModalContext.Consumer;
@@ -1,3 +1,4 @@
+// https://developers.google.com/web/tools/workbox/guides/codelabs/webpack
 // ~~ WebPack
 const path = require('path');
 const merge = require('webpack-merge');
@@ -9,8 +10,9 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
+// const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
+const { InjectManifest } = require('workbox-webpack-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 // ~~ Rules
@@ -80,12 +82,14 @@ module.exports = (env, argv) => {
        templateParameters: {
          PUBLIC_URL: PUBLIC_URL,
        },
-        // favicon: `${PUBLIC_DIR}/favicon.ico`,
      }),
-      new WorkboxPlugin.GenerateSW({
+      // No longer maintained; but good for generating icons + manifest
+      // new FaviconsWebpackPlugin( path.join(PUBLIC_DIR, 'assets', 'icons-512.png')),
+      new InjectManifest({
        swDest: 'sw.js',
-        clientsClaim: true,
-        skipWaiting: true,
+        swSrc: path.join(SRC_DIR, 'service-worker.js'),
+        // Increase the limit to 4mb:
+        // maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
      }),
    ],
    // https://webpack.js.org/configuration/dev-server/
@@ -3,6 +3,121 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [2.4.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.0...@ohif/viewer@2.4.1) (2019-11-05)
+
+
+### Bug Fixes
+
+* [#1075](https://github.com/OHIF/Viewers/issues/1075) Returning to the Study List before all series have finishe… ([#1090](https://github.com/OHIF/Viewers/issues/1090)) ([ecaf578](https://github.com/OHIF/Viewers/commit/ecaf578f92dc40294cec7ff9b272fb432dec4125))
+
+
+
+
+
+# [2.4.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.8...@ohif/viewer@2.4.0) (2019-11-04)
+
+
+### Features
+
+* 🎸 New modal provider ([#1110](https://github.com/OHIF/Viewers/issues/1110)) ([5ee832b](https://github.com/OHIF/Viewers/commit/5ee832b19505a4e8e5756660ce6ed03a7f18dec3)), closes [#1086](https://github.com/OHIF/Viewers/issues/1086) [#1116](https://github.com/OHIF/Viewers/issues/1116)
+
+
+
+
+
+## [2.3.8](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.7...@ohif/viewer@2.3.8) (2019-11-04)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.3.7](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.6...@ohif/viewer@2.3.7) (2019-11-04)
+
+
+### Bug Fixes
+
+* 🐛 Minor issues measurement panel related to description ([#1142](https://github.com/OHIF/Viewers/issues/1142)) ([681384b](https://github.com/OHIF/Viewers/commit/681384b7425c83b02a0ed83371ca92d78ca7838c))
+
+
+
+
+
+## [2.3.6](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.5...@ohif/viewer@2.3.6) (2019-11-02)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [2.3.5](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.4...@ohif/viewer@2.3.5) (2019-10-31)
+
+
+### Bug Fixes
+
+* application crash if patientName is an object ([#1138](https://github.com/OHIF/Viewers/issues/1138)) ([64cf3b3](https://github.com/OHIF/Viewers/commit/64cf3b324da2383a927af1df2d46db2fca5318aa))
+
+
+
+
+
+## [2.3.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.3...@ohif/viewer@2.3.4) (2019-10-30)
+
+
+### Bug Fixes
+
+* 🐛 Fix ghost shadow on thumb ([#1113](https://github.com/OHIF/Viewers/issues/1113)) ([caaa032](https://github.com/OHIF/Viewers/commit/caaa032c4bc24fd69fdb01a15a8feb2721c321db))
+
+
+
+
+
+## [2.3.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.2...@ohif/viewer@2.3.3) (2019-10-30)
+
+
+### Bug Fixes
+
+* get adapter store picker to show ([#1134](https://github.com/OHIF/Viewers/issues/1134)) ([50ca2bd](https://github.com/OHIF/Viewers/commit/50ca2bde971e1e67b73ece96369052dd1a35ac68))
+
+
+
+
+
+## [2.3.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.1...@ohif/viewer@2.3.2) (2019-10-29)
+
+
+### Bug Fixes
+
+* 🐛 Limit image download size to avoid browser issues ([#1112](https://github.com/OHIF/Viewers/issues/1112)) ([5716b71](https://github.com/OHIF/Viewers/commit/5716b71d409ee1c6f13393c8cb7f50222415e198)), closes [#1099](https://github.com/OHIF/Viewers/issues/1099)
+
+
+
+
+
+## [2.3.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.3.0...@ohif/viewer@2.3.1) (2019-10-29)
+
+
+### Bug Fixes
+
+* rollbar template needs PUBLIC_URL defined ([#1127](https://github.com/OHIF/Viewers/issues/1127)) ([352407c](https://github.com/OHIF/Viewers/commit/352407c71ae93946e9ebad41446d6086cfbc237b))
+
+
+
+
+
+# [2.3.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.2...@ohif/viewer@2.3.0) (2019-10-29)
+
+
+### Features
+
+* service worker ([#1045](https://github.com/OHIF/Viewers/issues/1045)) ([cf51368](https://github.com/OHIF/Viewers/commit/cf5136899eac08300ec4f15474a6440129ef7a9a))
+
+
+
+
+
 ## [2.2.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.2.1...@ohif/viewer@2.2.2) (2019-10-29)


@@ -393,6 +393,20 @@ describe('OHIF Cornerstone Toolbar', () => {
    });
  });

+  it('checks if the available viewport was set to active when layout is decreased', () => {
+    cy.setLayout(3, 3);
+
+    // activate the ninth viewport
+    cy.get('[data-cy=viewport-container-8]')
+      .click()
+      .should('have.class', 'active');
+
+    cy.setLayout(1, 1);
+
+    // first viewport should be active
+    cy.get('[data-cy=viewport-container-0]').should('have.class', 'active');
+  });
+
  it('checks if Clear tool will delete all measurements added in the viewport', () => {
    //Add measurements in the viewport
    cy.addLengthMeasurement();
@@ -8,7 +8,7 @@ describe('ViewerRouting', () => {
  });

  // it('thumbnails list has more than 2 items', () => {
-  //   cy.get('.scrollable-study-thumbnails div.ThumbnailEntryContainer')
+  //   cy.get('.scrollable-study-thumbnails div.thumbnail-container')
  //     .its('length')
  //     .should('be.gte', 2);
  // });
@@ -1,6 +1,6 @@
 {
  "name": "@ohif/viewer",
-  "version": "2.2.2",
+  "version": "2.4.1",
  "description": "OHIF Viewer",
  "author": "OHIF Contributors",
  "license": "MIT",
@@ -45,14 +45,14 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^1.6.0",
+    "@ohif/core": "^1.6.2",
    "@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.52.24",
+    "@ohif/extension-vtk": "^0.52.31",
    "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.58.1",
+    "@ohif/ui": "^0.59.1",
    "@tanem/react-nprogress": "^1.1.25",
    "classnames": "^2.2.6",
    "core-js": "^3.2.1",
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/assets/mstile-70x70.png"/>
+            <square150x150logo src="/assets/mstile-150x150.png"/>
+            <wide310x150logo src="/assets/mstile-310x150.png"/>
+            <square310x310logo src="/assets/mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
@@ -0,0 +1,14 @@
+{
+  "version": "2.2.1",
+  "name": "OHIF Viewer",
+  "description": "OHIF Viewer",
+  "icons": {
+    "60": "/assets/firefox_app_60x60.png",
+    "128": "/assets/firefox_app_128x128.png",
+    "512": "/assets/firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "OHIF Contributors",
+    "url": "https://github.com/ohif/viewers"
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "version": "2.2.1",
+  "api_version": 1,
+  "layout": {
+    "logo": "/assets/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}
@@ -1,35 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">

-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">

-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
-  <script
-    src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
-  <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
+    <script type="text/javascript">
+      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+    </script>
+    <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>

-  <title>OHIF Viewer</title>
+    <title>OHIF Viewer</title>

-  <!-- WEB FONTS -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
+    <!-- WEB FONTS -->
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap"
+      rel="stylesheet"
+    />

-  <!-- EXTENSIONS -->
-  <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
+    <!-- EXTENSIONS -->
+    <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>

    <script>
      window.config.extensions = [SomeExtension];
    </script> -->
-</head>
+  </head>

-<body>
-  <noscript> You need to enable JavaScript to run this app. </noscript>
-
-  <div id="root"></div>
-</body>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>

+    <div id="root"></div>
+  </body>
 </html>
@@ -1,50 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="OHIF Viewer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="@ohif/viewer">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-TileImage" content="<%= PUBLIC_URL %>assets/mstile-144x144.png">
+    <meta name="msapplication-config" content="<%= PUBLIC_URL %>assets/browserconfig.xml">
+    <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json">

-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" href="<%= PUBLIC_URL %>assets/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= PUBLIC_URL %>assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= PUBLIC_URL %>assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="<%= PUBLIC_URL %>assets/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="<%= PUBLIC_URL %>assets/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="<%= PUBLIC_URL %>assets/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="<%= PUBLIC_URL %>assets/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="<%= PUBLIC_URL %>assets/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="<%= PUBLIC_URL %>assets/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="<%= PUBLIC_URL %>assets/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= PUBLIC_URL %>assets/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= PUBLIC_URL %>assets/apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= PUBLIC_URL %>assets/apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="<%= PUBLIC_URL %>assets/apple-touch-icon-1024x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-320x460.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x920.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-640x1096.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-750x1294.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1182x2208.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1242x2148.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-748x1024.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-768x1004.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1496x2048.png">
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="<%= PUBLIC_URL %>assets/apple-touch-startup-image-1536x2008.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="<%= PUBLIC_URL %>assets/coast-228x228.png">
+    <link rel="yandex-tableau-widget" href="<%= PUBLIC_URL %>assets/yandex-browser-manifest.json">

-  <link rel="manifest" href="<%= PUBLIC_URL %>manifest.json" />
-  <!-- Built with: https://polyfill.io/v3/url-builder/ -->
-  <!-- Targets IE11 -->
-  <script
-    src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
-  <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <!-- Built with: https://polyfill.io/v3/url-builder/ -->
+    <!-- Targets IE11 -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
+    <script type="text/javascript">
+      window.PUBLIC_URL = '<%= PUBLIC_URL %>';
+    </script>
+    <script type="text/javascript" src="<%= PUBLIC_URL %>app-config.js"></script>
+    <script type="module" src="<%= PUBLIC_URL %>init-service-worker.js"></script>

-  <title>OHIF Viewer</title>
+    <title>OHIF Viewer</title>

-  <!-- WEB FONTS -->
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />
+    <!-- WEB FONTS -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet" />

-  <!-- EXTENSIONS -->
-  <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
+    <!-- EXTENSIONS -->
+    <!-- <script type="text/javascript" src="path/to/some-extension.js"></script>
+
+      <script>
+        window.config.extensions = [SomeExtension];
+      </script> -->
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+
+    <div id="root"></div>

    <script>
-      window.config.extensions = [SomeExtension];
-    </script> -->
-</head>
-
-<body>
-  <noscript> You need to enable JavaScript to run this app. </noscript>
-
-  <div id="root"></div>
-
-  <script>
-    // Note: This is a client access token so there is no issue with having it publicly available
-    var _rollbarConfig = {
-      accessToken: "739c64cd39e84592ba062bc29aac9769",
-      captureUncaught: true,
-      captureUnhandledRejections: true,
-      payload: {
-        environment: "viewer.ohif.org"
-      }
-    };
-    // Rollbar Snippet
-    !function (r) { var e = {}; function o(n) { if (e[n]) return e[n].exports; var t = e[n] = { i: n, l: !1, exports: {} }; return r[n].call(t.exports, t, t.exports, o), t.l = !0, t.exports } o.m = r, o.c = e, o.d = function (r, e, n) { o.o(r, e) || Object.defineProperty(r, e, { enumerable: !0, get: n }) }, o.r = function (r) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(r, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(r, "__esModule", { value: !0 }) }, o.t = function (r, e) { if (1 & e && (r = o(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var n = Object.create(null); if (o.r(n), Object.defineProperty(n, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var t in r) o.d(n, t, function (e) { return r[e] }.bind(null, t)); return n }, o.n = function (r) { var e = r && r.__esModule ? function () { return r.default } : function () { return r }; return o.d(e, "a", e), e }, o.o = function (r, e) { return Object.prototype.hasOwnProperty.call(r, e) }, o.p = "", o(o.s = 0) }([function (r, e, o) { var n = o(1), t = o(4); _rollbarConfig = _rollbarConfig || {}, _rollbarConfig.rollbarJsUrl = _rollbarConfig.rollbarJsUrl || "https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.7.1/rollbar.min.js", _rollbarConfig.async = void 0 === _rollbarConfig.async || _rollbarConfig.async; var a = n.setupShim(window, _rollbarConfig), l = t(_rollbarConfig); window.rollbar = n.Rollbar, a.loadFull(window, document, !_rollbarConfig.async, _rollbarConfig, l) }, function (r, e, o) { var n = o(2); function t(r) { return function () { try { return r.apply(this, arguments) } catch (r) { try { console.error("[Rollbar]: Internal error", r) } catch (r) { } } } } var a = 0; function l(r, e) { this.options = r, this._rollbarOldOnError = null; var o = a++; this.shimId = function () { return o }, "undefined" != typeof window && window._rollbarShims && (window._rollbarShims[o] = { handler: e, messages: [] }) } var i = o(3), d = function (r, e) { return new l(r, e) }, c = function (r) { return new i(d, r) }; function s(r) { return t(function () { var e = Array.prototype.slice.call(arguments, 0), o = { shim: this, method: r, args: e, ts: new Date }; window._rollbarShims[this.shimId()].messages.push(o) }) } l.prototype.loadFull = function (r, e, o, n, a) { var l = !1, i = e.createElement("script"), d = e.getElementsByTagName("script")[0], c = d.parentNode; i.crossOrigin = "", i.src = n.rollbarJsUrl, o || (i.async = !0), i.onload = i.onreadystatechange = t(function () { if (!(l || this.readyState && "loaded" !== this.readyState && "complete" !== this.readyState)) { i.onload = i.onreadystatechange = null; try { c.removeChild(i) } catch (r) { } l = !0, function () { var e; if (void 0 === r._rollbarDidLoad) { e = new Error("rollbar.js did not load"); for (var o, n, t, l, i = 0; o = r._rollbarShims[i++];)for (o = o.messages || []; n = o.shift();)for (t = n.args || [], i = 0; i < t.length; ++i)if ("function" == typeof (l = t[i])) { l(e); break } } "function" == typeof a && a(e) }() } }), c.insertBefore(i, d) }, l.prototype.wrap = function (r, e, o) { try { var n; if (n = "function" == typeof e ? e : function () { return e || {} }, "function" != typeof r) return r; if (r._isWrap) return r; if (!r._rollbar_wrapped && (r._rollbar_wrapped = function () { o && "function" == typeof o && o.apply(this, arguments); try { return r.apply(this, arguments) } catch (o) { var e = o; throw e && ("string" == typeof e && (e = new String(e)), e._rollbarContext = n() || {}, e._rollbarContext._wrappedSource = r.toString(), window._rollbarWrappedError = e), e } }, r._rollbar_wrapped._isWrap = !0, r.hasOwnProperty)) for (var t in r) r.hasOwnProperty(t) && (r._rollbar_wrapped[t] = r[t]); return r._rollbar_wrapped } catch (e) { return r } }; for (var p = "log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","), u = 0; u < p.length; ++u)l.prototype[p[u]] = s(p[u]); r.exports = { setupShim: function (r, e) { if (r) { var o = e.globalAlias || "Rollbar"; if ("object" == typeof r[o]) return r[o]; r._rollbarShims = {}, r._rollbarWrappedError = null; var a = new c(e); return t(function () { e.captureUncaught && (a._rollbarOldOnError = r.onerror, n.captureUncaughtExceptions(r, a, !0), n.wrapGlobals(r, a, !0)), e.captureUnhandledRejections && n.captureUnhandledRejections(r, a, !0); var t = e.autoInstrument; return !1 !== e.enabled && (void 0 === t || !0 === t || "object" == typeof t && t.network) && r.addEventListener && (r.addEventListener("load", a.captureLoad.bind(a)), r.addEventListener("DOMContentLoaded", a.captureDomContentLoaded.bind(a))), r[o] = a, a })() } }, Rollbar: c } }, function (r, e) { function o(r, e, o) { if (e.hasOwnProperty && e.hasOwnProperty("addEventListener")) { for (var n = e.addEventListener; n._rollbarOldAdd && n.belongsToShim;)n = n._rolLine truncated
-      // End Rollbar Snippet
-  </script>
-</body>
+      // Note: This is a client access token so there is no issue with having it publicly available
+      var _rollbarConfig = {
+        accessToken: "739c64cd39e84592ba062bc29aac9769",
+        captureUncaught: true,
+        captureUnhandledRejections: true,
+        payload: {
+          environment: "viewer.ohif.org"
+        }
+      };
+      // Rollbar Snippet
+      !function (r) { var e = {}; function o(n) { if (e[n]) return e[n].exports; var t = e[n] = { i: n, l: !1, exports: {} }; return r[n].call(t.exports, t, t.exports, o), t.l = !0, t.exports } o.m = r, o.c = e, o.d = function (r, e, n) { o.o(r, e) || Object.defineProperty(r, e, { enumerable: !0, get: n }) }, o.r = function (r) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(r, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(r, "__esModule", { value: !0 }) }, o.t = function (r, e) { if (1 & e && (r = o(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var n = Object.create(null); if (o.r(n), Object.defineProperty(n, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var t in r) o.d(n, t, function (e) { return r[e] }.bind(null, t)); return n }, o.n = function (r) { var e = r && r.__esModule ? function () { return r.default } : function () { return r }; return o.d(e, "a", e), e }, o.o = function (r, e) { return Object.prototype.hasOwnProperty.call(r, e) }, o.p = "", o(o.s = 0) }([function (r, e, o) { var n = o(1), t = o(4); _rollbarConfig = _rollbarConfig || {}, _rollbarConfig.rollbarJsUrl = _rollbarConfig.rollbarJsUrl || "https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.7.1/rollbar.min.js", _rollbarConfig.async = void 0 === _rollbarConfig.async || _rollbarConfig.async; var a = n.setupShim(window, _rollbarConfig), l = t(_rollbarConfig); window.rollbar = n.Rollbar, a.loadFull(window, document, !_rollbarConfig.async, _rollbarConfig, l) }, function (r, e, o) { var n = o(2); function t(r) { return function () { try { return r.apply(this, arguments) } catch (r) { try { console.error("[Rollbar]: Internal error", r) } catch (r) { } } } } var a = 0; function l(r, e) { this.options = r, this._rollbarOldOnError = null; var o = a++; this.shimId = function () { return o }, "undefined" != typeof window && window._rollbarShims && (window._rollbarShims[o] = { handler: e, messages: [] }) } var i = o(3), d = function (r, e) { return new l(r, e) }, c = function (r) { return new i(d, r) }; function s(r) { return t(function () { var e = Array.prototype.slice.call(arguments, 0), o = { shim: this, method: r, args: e, ts: new Date }; window._rollbarShims[this.shimId()].messages.push(o) }) } l.prototype.loadFull = function (r, e, o, n, a) { var l = !1, i = e.createElement("script"), d = e.getElementsByTagName("script")[0], c = d.parentNode; i.crossOrigin = "", i.src = n.rollbarJsUrl, o || (i.async = !0), i.onload = i.onreadystatechange = t(function () { if (!(l || this.readyState && "loaded" !== this.readyState && "complete" !== this.readyState)) { i.onload = i.onreadystatechange = null; try { c.removeChild(i) } catch (r) { } l = !0, function () { var e; if (void 0 === r._rollbarDidLoad) { e = new Error("rollbar.js did not load"); for (var o, n, t, l, i = 0; o = r._rollbarShims[i++];)for (o = o.messages || []; n = o.shift();)for (t = n.args || [], i = 0; i < t.length; ++i)if ("function" == typeof (l = t[i])) { l(e); break } } "function" == typeof a && a(e) }() } }), c.insertBefore(i, d) }, l.prototype.wrap = function (r, e, o) { try { var n; if (n = "function" == typeof e ? e : function () { return e || {} }, "function" != typeof r) return r; if (r._isWrap) return r; if (!r._rollbar_wrapped && (r._rollbar_wrapped = function () { o && "function" == typeof o && o.apply(this, arguments); try { return r.apply(this, arguments) } catch (o) { var e = o; throw e && ("string" == typeof e && (e = new String(e)), e._rollbarContext = n() || {}, e._rollbarContext._wrappedSource = r.toString(), window._rollbarWrappedError = e), e } }, r._rollbar_wrapped._isWrap = !0, r.hasOwnProperty)) for (var t in r) r.hasOwnProperty(t) && (r._rollbar_wrapped[t] = r[t]); return r._rollbar_wrapped } catch (e) { return r } }; for (var p = "log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","), u = 0; u < p.length; ++u)l.prototype[p[u]] = s(p[u]); r.exports = { setupShim: function (r, e) { if (r) { var o = e.globalAlias || "Rollbar"; if ("object" == typeof r[o]) return r[o]; r._rollbarShims = {}, r._rollbarWrappedError = null; var a = new c(e); return t(function () { e.captureUncaught && (a._rollbarOldOnError = r.onerror, n.captureUncaughtExceptions(r, a, !0), n.wrapGlobals(r, a, !0)), e.captureUnhandledRejections && n.captureUnhandledRejections(r, a, !0); var t = e.autoInstrument; return !1 !== e.enabled && (void 0 === t || !0 === t || "object" == typeof t && t.network) && r.addEventListener && (r.addEventListener("load", a.captureLoad.bind(a)), r.addEventListener("DOMContentLoaded", a.captureDomContentLoaded.bind(a))), r[o] = a, a })() } }, Rollbar: c } }, function (r, e) { function o(r, e, o) { if (e.hasOwnProperty && e.hasOwnProperty("addEventListener")) { for (var n = e.addEventListener; n._rollbarOldAdd && n.belongsToShim;)n = n._rLine truncated
+        // End Rollbar Snippet
+    </script>
+  </body>

 </html>
@@ -0,0 +1,52 @@
+// https://developers.google.com/web/tools/workbox/modules/workbox-window
+// All major browsers that support service worker also support native JavaScript
+// modules, so it's perfectly fine to serve this code to any browsers
+// (older browsers will just ignore it)
+//
+import { Workbox } from 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-window.prod.mjs';
+
+var supportsServiceWorker = 'serviceWorker' in navigator;
+var isNotLocalDevelopment =
+  ['localhost', '127'].indexOf(location.hostname) === -1;
+
+if (supportsServiceWorker && isNotLocalDevelopment) {
+  const swFileLocation = (window.PUBLIC_URL || '/') + 'sw.js';
+  const wb = new Workbox(swFileLocation);
+
+  // Add an event listener to detect when the registered
+  // service worker has installed but is waiting to activate.
+  wb.addEventListener('waiting', event => {
+    // customize the UI prompt accordingly.
+    const isFirstTimeUpdatedServiceWorkerIsWaiting =
+      event.wasWaitingBeforeRegister === false;
+    console.log(
+      'isFirstTimeUpdatedServiceWorkerIsWaiting',
+      isFirstTimeUpdatedServiceWorkerIsWaiting
+    );
+
+    // Assumes your app has some sort of prompt UI element
+    // that a user can either accept or reject.
+    // const prompt = createUIPrompt({
+    //  onAccept: async () => {
+    // Assuming the user accepted the update, set up a listener
+    // that will reload the page as soon as the previously waiting
+    // service worker has taken control.
+    wb.addEventListener('controlling', event => {
+      window.location.reload();
+    });
+
+    // Send a message telling the service worker to skip waiting.
+    // This will trigger the `controlling` event handler above.
+    // Note: for this to work, you have to add a message
+    // listener in your service worker. See below.
+    wb.messageSW({ type: 'SKIP_WAITING' });
+    // },
+
+    // onReject: () => {
+    //   prompt.dismiss();
+    // },
+    // });
+  });
+
+  wb.register();
+}
@@ -1,8 +1,59 @@
 {
-  "short_name": "react-cornerstone-viewport",
-  "name": "react-cornerstone-viewport",
+  "name": "OHIF Viewer",
+  "short_name": "Viewer",
+  "description": "OHIF Viewer",
+  "dir": "auto",
+  "lang": "en-US",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/assets/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
  "start_url": "./index.html",
+  "background_color": "#000000",
  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#20a5d6"
 }
@@ -28,7 +28,7 @@ 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 } from '@ohif/ui';
+import { SnackbarProvider, ModalProvider, OHIFModal } from '@ohif/ui';

 // Contexts
 import WhiteLabellingContext from './context/WhiteLabellingContext';
@@ -85,6 +85,7 @@ class App extends Component {
  }

  render() {
+    const { whiteLabelling, routerBasename } = this.props;
    const userManager = this._userManager;
    const config = {
      appConfig: this._appConfig,
@@ -97,12 +98,12 @@ class App extends Component {
            <I18nextProvider i18n={i18n}>
              <OidcProvider store={store} userManager={userManager}>
                <UserManagerContext.Provider value={userManager}>
-                  <Router basename={this.props.routerBasename}>
-                    <WhiteLabellingContext.Provider
-                      value={this.props.whiteLabelling}
-                    >
+                  <Router basename={routerBasename}>
+                    <WhiteLabellingContext.Provider value={whiteLabelling}>
                      <SnackbarProvider>
-                        <OHIFStandaloneViewer userManager={userManager} />
+                        <ModalProvider modal={OHIFModal}>
+                          <OHIFStandaloneViewer userManager={userManager} />
+                        </ModalProvider>
                      </SnackbarProvider>
                    </WhiteLabellingContext.Provider>
                  </Router>
@@ -118,10 +119,12 @@ class App extends Component {
      <AppContext.Provider value={config}>
        <Provider store={store}>
          <I18nextProvider i18n={i18n}>
-            <Router basename={this.props.routerBasename}>
-              <WhiteLabellingContext.Provider value={this.props.whiteLabelling}>
+            <Router basename={routerBasename}>
+              <WhiteLabellingContext.Provider value={whiteLabelling}>
                <SnackbarProvider>
-                  <OHIFStandaloneViewer />
+                  <ModalProvider modal={OHIFModal}>
+                    <OHIFStandaloneViewer />
+                  </ModalProvider>
                </SnackbarProvider>
              </WhiteLabellingContext.Provider>
            </Router>
@@ -31,7 +31,7 @@ function getAllTools() {
 function getMeasurementText(measurementData = {}) {
  const defaultText = '...';
  const { location = '', description = '' } = measurementData;
-  const result = location + (description ? `(${description})` : '');
+  const result = location + (description ? ` (${description})` : '');

  return result || defaultText;
 }
@@ -105,9 +105,9 @@ function getToolLabellingFlowCallback(store) {
      if (location) {
        measurementData.location = location;
      }
-      if (description) {
-        measurementData.description = description;
-      }
+
+      measurementData.description = description || '';
+
      if (response) {
        measurementData.response = response;
      }
@@ -152,6 +152,7 @@ export default class LabellingFlow extends Component {
                  ref={this.descriptionInput}
                  defaultValue={description || ''}
                  autoComplete="off"
+                  onKeyPress={this.handleKeyPress}
                />
              </div>
            </div>
@@ -223,6 +224,12 @@ export default class LabellingFlow extends Component {
    });
  };

+  handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      this.descriptionSave();
+    }
+  };
+
  descriptionSave = () => {
    const description = this.descriptionInput.current.value;
    this.props.updateLabelling({ description });
Author	SHA1	Message	Date
ohif-bot	9c1a3c3183	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.31 - @ohif/core@1.6.2 - @ohif/ui@0.59.1 - @ohif/viewer@2.4.1	2019-11-05 20:01:36 +00:00
Emanuel Fiuza de Oliveira	ecaf578f92	fix: #1075 Returning to the Study List before all series have finishe… (#1090 ) * fix: #1075 Returning to the Study List before all series have finished loading throws multiple errors in console * fix: 🐛 Addressing review feedback from issue #1075 Adding support for cancelable pattern Closes: #1075 * fix: 🐛 update unit test for exports Closes: #1075	2019-11-05 16:47:54 -03:00
ohif-bot	d26adf92bd	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.30 - @ohif/ui@0.59.0 - @ohif/viewer@2.4.0	2019-11-04 16:06:44 +00:00
Igor Octaviano	5ee832b195	feat: 🎸 New modal provider (#1110 ) * feat: 🎸 New modal provider A new modal provider/context component to unify modal related code and simplify modal use Closes: #1086 * refactor(ModalContext): Keep current modal lib * Update modal provider version according to PR #1116 * Update modal provider props to use inner props * Add custom class prop * CR Update: Refactor provider to extract specific modal * Fix modal import * CR Update: Move from spread to object assign * CR Update: Add proptypes, use classnames dependency over interpolation and rename modal	2019-11-04 10:55:05 -05:00
ohif-bot	8baba22a2e	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.29 - @ohif/viewer@2.3.8	2019-11-04 09:55:56 +00:00
James Petts	1d86b1a102	fix: 🐛 Upgrade react-vtkjs-viewport to fix volume orientation (#1143 )	2019-11-04 10:45:53 +01:00
ohif-bot	25e6817248	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.28 - @ohif/ui@0.58.5 - @ohif/viewer@2.3.7	2019-11-04 04:07:09 +00:00
ladeirarodolfo	681384b742	fix: 🐛 Minor issues measurement panel related to description (#1142 )	2019-11-03 22:53:24 -05:00
ohif-bot	54e07c281f	chore(release): publish [skip ci] - @ohif/viewer@2.3.6	2019-11-02 11:39:36 +00:00
Rodrigo Antinarelli	9dedccc7f9	test: set right viewport when layout is decreased (#1146 )	2019-11-02 07:26:24 -04:00
ohif-bot	621e63b3e1	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.27 - @ohif/core@1.6.1 - @ohif/ui@0.58.4 - @ohif/viewer@2.3.5	2019-10-31 18:51:34 +00:00
Danny Brown	64cf3b324d	fix: application crash if patientName is an object (#1138 ) * fix: get adapter store picker to show * fix: error caused by DICOMWeb "empty object" for patientName * formatting * refactor: kill the pills * Indicate modalities is missing if not provided * Consistent modality display * Make sure modalities styles are applied * revert config	2019-10-31 14:41:08 -04:00
ohif-bot	b7f315ca47	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.26 - @ohif/ui@0.58.3 - @ohif/viewer@2.3.4	2019-10-30 20:03:51 +00:00
ladeirarodolfo	caaa032c4b	fix: 🐛 Fix ghost shadow on thumb (#1113 ) * fix: 🐛 Fix ghost shadow on thumb Updated react-dnd package for the lates. Refactored thumbnail component Closes: 1087 * feat: 🎸 Code review Set flex instead of float. Add cypress tag to thumb container * feat: 🎸 Code review. Revised style when no description	2019-10-30 15:53:58 -04:00
ohif-bot	22127a8f59	chore(release): publish [skip ci] - @ohif/viewer@2.3.3	2019-10-30 15:25:05 +00:00
Danny Brown	50ca2bde97	fix: get adapter store picker to show (#1134 )	2019-10-30 11:15:51 -04:00
ohif-bot	c73cfbc110	chore(release): publish [skip ci] - @ohif/extension-vtk@0.52.25 - @ohif/ui@0.58.2 - @ohif/viewer@2.3.2	2019-10-29 20:47:05 +00:00
Igor Octaviano	5716b71d40	fix: 🐛 Limit image download size to avoid browser issues (#1112 ) * fix: 🐛 Limit image download size to avoid browser issues This fix adjusts the max texture size to allow browser compatibility (blob size limit) Closes: #1099 * CR Updates: Clamp values using math.min, remove unnecessary onBlur event and small adjustments	2019-10-29 16:36:34 -04:00
ohif-bot	a3028ad1f6	chore(release): publish [skip ci] - @ohif/viewer@2.3.1	2019-10-29 20:17:36 +00:00
Danny Brown	352407c71a	fix: rollbar template needs PUBLIC_URL defined (#1127 )	2019-10-29 16:04:53 -04:00
ohif-bot	1b5a5a2963	chore(release): publish [skip ci] - @ohif/viewer@2.3.0	2019-10-29 19:02:49 +00:00
Danny Brown	cf5136899e	feat: service worker (#1045 ) * init * use workbox-window * Try to accomodate SW hosted at non root url * v5 updated namespaces * Test w/ no prompt * add icons to manifest * remove scope for now * add icon tile information to entrypoint * See if we can skirt by without a duplicate install * shift client claims to skip waiting message * Remove prepended slash * comment out cache handler for now * Simplify service-worker to skip waiting and install when a new worker is detected * Use generated icons * Update rollbar config	2019-10-29 14:51:40 -04:00