chore(release): publish [skip ci]

- @ohif/extension-vtk@0.52.30
 - @ohif/ui@0.59.0
 - @ohif/viewer@2.4.0

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.26",
+  "version": "0.52.30",
   "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.3",
+    "@ohif/core": "^1.6.1",
+    "@ohif/ui": "^0.59.0",
     "cornerstone-tools": "^4.0.9",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

platform/core/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/DICOMWeb/getModalities.js

@@ -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;
 }

platform/core/src/studies/services/qido/studies.js

@@ -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(',');
 

platform/ui/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.58.3",
+  "version": "0.59.0",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/components/index.js

@@ -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,
@@ -52,4 +53,5 @@ export {
   AboutModal,
   UserPreferences,
   UserPreferencesModal,
+  OHIFModal,
 };

platform/ui/src/components/measurementTable/MeasurementTableItem.styl

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

platform/ui/src/components/ohifModal/OHIFModal.js

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

platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx

@@ -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" />

platform/ui/src/components/ohifModal/index.js

@@ -0,0 +1,2 @@
+import OHIFModal from './OHIFModal';
+export { OHIFModal };

platform/ui/src/components/studyList/StudyList.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,

platform/ui/src/components/studyList/StudyList.styl

@@ -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

platform/ui/src/components/studyList/internal/bkdr-hash.js

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

platform/ui/src/components/studyList/internal/color-hash.js

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

platform/ui/src/components/tableList/TableListItem.styl

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

platform/ui/src/index.js

@@ -25,6 +25,7 @@ import {
   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
@@ -100,6 +106,11 @@ export {
   SnackbarProvider,
   useSnackbarContext,
   withSnackbar,
+  ModalProvider,
+  useModal,
+  ModalConsumer,
+  withModal,
+  OHIFModal,
   // Hooks
   useDebounce,
   useMedia,

platform/ui/src/utils/ModalProvider.js

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

platform/viewer/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

platform/viewer/cypress/integration/common/OHIFCornerstoneToolbar.spec.js

@@ -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();

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "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.1",
     "@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.26",
+    "@ohif/extension-vtk": "^0.52.30",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.58.3",
+    "@ohif/ui": "^0.59.0",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/src/App.js

@@ -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>

platform/viewer/src/appExtensions/MeasurementsPanel/ConnectedMeasurementTable.js

@@ -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;
 }

platform/viewer/src/appExtensions/MeasurementsPanel/labelingFlowCallbacks.js

@@ -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;
       }

platform/viewer/src/components/Labelling/LabellingFlow.js

@@ -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 });

platform/viewer/src/components/ViewportGrid/ViewportPane.js

@@ -35,6 +35,7 @@ const ViewportPane = function(props) {
         propClassName
       )}
       ref={drop}
+      data-cy={`viewport-container-${viewportIndex}`}
     >
       {children}
     </div>

platform/viewer/src/studylist/StudyListRoute.js

@@ -77,39 +77,43 @@ function StudyListRoute(props) {
 
   // Called when relevant state/props are updated
   // Watches filters and sort, debounced
-  useEffect(() => {
-    const fetchStudies = async () => {
-      try {
-        setSearchStatus({ error: null, isSearchingForStudies: true });
+  useEffect(
+    () => {
+      const fetchStudies = async () => {
+        try {
+          setSearchStatus({ error: null, isSearchingForStudies: true });
 
-        const response = await getStudyList(
-          server,
-          debouncedFilters,
-          debouncedSort,
-          rowsPerPage,
-          pageNumber,
-          displaySize
-        );
+          const response = await getStudyList(
+            server,
+            debouncedFilters,
+            debouncedSort,
+            rowsPerPage,
+            pageNumber,
+            displaySize
+          );
 
-        setStudies(response);
-        setSearchStatus({ error: null, isSearchingForStudies: false });
-      } catch (error) {
-        console.warn(error);
-        setSearchStatus({ error: true, isFetching: false });
+          setStudies(response);
+          setSearchStatus({ error: null, isSearchingForStudies: false });
+        } catch (error) {
+          console.warn(error);
+          setSearchStatus({ error: true, isFetching: false });
+        }
+      };
+
+      if (server) {
+        fetchStudies();
       }
-    };
-
-    if (server) {
-      fetchStudies();
-    }
-  }, [
-    debouncedFilters,
-    debouncedSort,
-    rowsPerPage,
-    pageNumber,
-    displaySize,
-    server,
-  ]);
+    },
+    // TODO: Can we update studies directly?
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      debouncedFilters,
+      debouncedSort,
+      rowsPerPage,
+      pageNumber,
+      displaySize,
+      server,
+    ]);
 
   // TODO: Update Server
   // if (this.props.server !== prevProps.server) {
@@ -352,6 +356,9 @@ async function getStudyList(
 
   // Only the fields we use
   const mappedStudies = studies.map(study => {
+    const patientName =
+      typeof study.patientName === 'string' ? study.patientName : undefined;
+
     return {
       accessionNumber: study.accessionNumber, // "1"
       modalities: study.modalities, // "SEG\\MR"  ​​
@@ -359,7 +366,7 @@ async function getStudyList(
       // numberOfStudyRelatedSeries: "3"
       // patientBirthdate: undefined
       patientId: study.patientId, // "NOID"
-      patientName: study.patientName, // "NAME^NONE"
+      patientName, // "NAME^NONE"
       // patientSex: "M"
       // referringPhysicianName: undefined
       studyDate: study.studyDate, // "Jun 28, 2002"

yarn.lock

@@ -6929,7 +6929,7 @@ direction@^1.0.1, direction@^1.0.2:
   resolved "https://registry.yarnpkg.com/direction/-/direction-1.0.3.tgz#5030e1e091e923904067d015dbaafd08f4d27d26"
   integrity sha512-8bHRqMt4w/kND19KBksE4NOJo+gIOPuiZfxQvbd6xikfKbuNBYBdLIw0hA/4lWzBaDpwpW+Olmg1BjD9+0LU2w==
 
-dnd-core@^9.3.4, dnd-core@^9.4.0:
+dnd-core@^9.4.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.4.0.tgz#ccf605d36887f18cdde8fd5576ca3145d2e69fa8"
   integrity sha512-Kg+8VwU8s7TgdR/BUYGUHrvFiS+5ePMZ0Q0XD7p+cFVJvgKqykBaeQDuaziuauFMPm8QxtnUy8Pncey9flXW3Q==
@@ -15920,14 +15920,14 @@ react-dev-utils@^9.0.1:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^9.3.4:
+react-dnd-html5-backend@^9.4.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.4.0.tgz#5b1d192f57d103298657cde1fe0eabdbf2726311"
   integrity sha512-gehPwLp505F6RoFkQiDX7Q4mbpbyfyT0TbIoZop/m4vkBw6yUE/QLrnxBQdNpDPSwL/9XkZxxd/PrbeMCQ+WrQ==
   dependencies:
     dnd-core "^9.4.0"
 
-react-dnd-touch-backend@^9.3.4:
+react-dnd-touch-backend@^9.4.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-9.4.0.tgz#6784e71fad0904723e33e6710caafe36c62192a4"
   integrity sha512-yJjFhgslriSTIEXQ/Q5MrLnETJaoyRct+AsJ//e96WOH2pUNMGSxkl8RIb/IMhNysVnMc8frLIyT8dQxXAcmGA==
@@ -15936,14 +15936,14 @@ react-dnd-touch-backend@^9.3.4:
     dnd-core "^9.4.0"
     invariant "^2.2.4"
 
-react-dnd@9.3.4:
-  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.3.4.tgz#ebab4b5b430b72f3580c058a29298054e1f9d2b8"
-  integrity sha512-UUtyoHFRrryMxVMEGYa3EdZIdibnys/ax7ZRs6CKpETHlnJQOFhHE3rpI+ManvKS0o3MFc1DZ+aoudAFtrOvFA==
+react-dnd@9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.4.0.tgz#eec87035c6360fb33a44932326b3369af011a41c"
+  integrity sha512-jnLF8qKowCKTqSddfCiLx5+sb+HxO1qgdiAgbBeL8yuo5tRYNtKxZYn7+wVwNoyZuWEuM1Gw/Wsdhr+yb2RELQ==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.1"
     "@types/shallowequal" "^1.1.1"
-    dnd-core "^9.3.4"
+    dnd-core "^9.4.0"
     hoist-non-react-statics "^3.3.0"
     shallowequal "^1.1.0"
 
@@ -16221,10 +16221,10 @@ react-transition-group@^4.1.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-vtkjs-viewport@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.3.7.tgz#a71eb09a88586b2b96c40f7e8fe2db56b693d613"
-  integrity sha512-hPaTIAJCgrdsegU96OdDRSKBDoRXbg0x72x/CCTR+6vMaXry4CnoMNMVtNJ3eCa29j6bKytiE7VkPBBEcoG+IQ==
+react-vtkjs-viewport@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/react-vtkjs-viewport/-/react-vtkjs-viewport-0.3.9.tgz#dc3dd5323c4cbaf5978cd64af2794b6b4ed61642"
+  integrity sha512-Sc3dRRz8tRSdUrdgL8tuYwVEl0CTjaZfDLqP5ufMXH2KjwBt3T5bjpk4xvzFyPc9CG6ywEX5MSa6eQ+NNjaUkw==
   dependencies:
     date-fns "^2.2.1"
     gl-matrix "^3.1.0"