chore(release): publish [skip ci]

- @ohif/viewer@2.3.6

extensions/vtk/CHANGELOG.md

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

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "0.52.25",
+  "version": "0.52.27",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.3.7"
   },
   "devDependencies": {
-    "@ohif/core": "^1.6.0",
-    "@ohif/ui": "^0.58.2",
+    "@ohif/core": "^1.6.1",
+    "@ohif/ui": "^0.58.4",
     "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,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "0.58.2",
+  "version": "0.58.4",
   "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"
   },

platform/ui/src/components/index.js

@@ -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';
@@ -44,9 +44,9 @@ export {
   StudyList,
   TableList,
   TableListItem,
+  Thumbnail,
   TableSearchFilter,
   TablePagination,
-  ThumbnailEntry,
   ToolbarSection,
   Tooltip,
   AboutModal,

platform/ui/src/components/quickSwitch/QuickSwitch.styl

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

platform/ui/src/components/quickSwitch/SeriesList.js

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

platform/ui/src/components/studyBrowser/DragPreview.js

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

platform/ui/src/components/studyBrowser/DragPreview.styl

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

platform/ui/src/components/studyBrowser/StudyBrowser.js

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

platform/ui/src/components/studyBrowser/StudyBrowser.styl

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

platform/ui/src/components/studyBrowser/Thumbnail.js

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

platform/ui/src/components/studyBrowser/Thumbnail.styl

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

platform/ui/src/components/studyBrowser/ThumbnailEntry.js

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

platform/ui/src/components/studyBrowser/ThumbnailEntryDragSource.js

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

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

@@ -1,2 +1,2 @@
 export { StudyBrowser } from './StudyBrowser.js';
-export { ThumbnailEntry } from './ThumbnailEntry.js';
+export { Thumbnail } from './Thumbnail.js';

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/index.js

@@ -17,9 +17,9 @@ import {
   StudyList,
   TableList,
   TableListItem,
+  Thumbnail,
   TableSearchFilter,
   TablePagination,
-  ThumbnailEntry,
   ToolbarSection,
   Tooltip,
   AboutModal,
@@ -86,9 +86,9 @@ export {
   StudyList,
   TableList,
   TableListItem,
+  Thumbnail,
   TableSearchFilter,
   TablePagination,
-  ThumbnailEntry,
   Toolbar,
   ToolbarButton,
   ToolbarSection,

platform/viewer/CHANGELOG.md

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

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/cypress/integration/common/ViewerRouting.spec.js

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

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "2.3.2",
+  "version": "2.3.6",
   "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.25",
+    "@ohif/extension-vtk": "^0.52.27",
     "@ohif/i18n": "^0.51.0",
-    "@ohif/ui": "^0.58.2",
+    "@ohif/ui": "^0.58.4",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

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

@@ -107,7 +107,7 @@ const ViewportGrid = function(props) {
 
 ViewportGrid.propTypes = {
   viewportData: PropTypes.array.isRequired,
-  supportsDragAndDrop: PropTypes.bool.isRequired,
+  supportsDrop: PropTypes.bool.isRequired,
   activeViewportIndex: PropTypes.number.isRequired,
   layout: PropTypes.object.isRequired,
   availablePlugins: PropTypes.object.isRequired,
@@ -127,7 +127,7 @@ ViewportGrid.defaultProps = {
     viewports: [{}],
   },
   activeViewportIndex: 0,
-  supportsDragAndDrop: true,
+  supportsDrop: true,
   availablePlugins: {
     DefaultViewport,
   },

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

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import OHIF from '@ohif/core';
 import { withRouter } from 'react-router-dom';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import {
   StudyList,
   PageToolbar,
@@ -26,7 +26,8 @@ import AppContext from '../context/AppContext';
 const { urlUtil: UrlUtil } = OHIF.utils;
 
 function StudyListRoute(props) {
-  const { history, server, t, user, studyListFunctionsEnabled } = props;
+  const { history, server, user, studyListFunctionsEnabled } = props;
+  const [t] = useTranslation('Common');
   // ~~ STATE
   const [sort, setSort] = useState({
     fieldName: 'patientName',
@@ -55,6 +56,7 @@ function StudyListRoute(props) {
   const [activeModalId, setActiveModalId] = useState(null);
   const [rowsPerPage, setRowsPerPage] = useState(25);
   const [pageNumber, setPageNumber] = useState(0);
+  const appContext = useContext(AppContext);
   // ~~ RESPONSIVE
   const displaySize = useMedia(
     ['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
@@ -66,39 +68,52 @@ function StudyListRoute(props) {
   const debouncedFilters = useDebounce(filterValues, 250);
 
   // Google Cloud Adapter for DICOM Store Picking
-  const { appConfig = {} } = AppContext;
+  const { appConfig = {} } = appContext;
   const isGoogleCHAIntegrationEnabled =
     !server && appConfig.enableGoogleCloudAdapter;
-  if (isGoogleCHAIntegrationEnabled) {
+  if (isGoogleCHAIntegrationEnabled && activeModalId !== 'DicomStorePicker') {
     setActiveModalId('DicomStorePicker');
   }
 
   // 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();
       }
-    };
-
-    fetchStudies();
-  }, [debouncedFilters, debouncedSort, rowsPerPage, pageNumber, displaySize]);
+    },
+    // 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) {
@@ -181,6 +196,13 @@ function StudyListRoute(props) {
 
   return (
     <>
+      {studyListFunctionsEnabled ? (
+        <ConnectedDicomFilesUploader
+          isOpen={activeModalId === 'DicomFilesUploader'}
+          onClose={() => setActiveModalId(null)}
+        />
+      ) : null}
+      {healthCareApiWindows}
       <WhiteLabellingContext.Consumer>
         {whiteLabelling => (
           <UserManagerContext.Consumer>
@@ -203,6 +225,7 @@ function StudyListRoute(props) {
           </h1>
         </div>
         <div className="actions">
+          {studyListFunctionsEnabled && healthCareApiButtons}
           {studyListFunctionsEnabled && (
             <PageToolbar
               onImport={() => setActiveModalId('DicomFilesUploader')}
@@ -232,17 +255,8 @@ function StudyListRoute(props) {
           filterValues={filterValues}
           onFilterChange={handleFilterChange}
           studyListDateFilterNumDays={appConfig.studyListDateFilterNumDays}
-        >
-          {studyListFunctionsEnabled ? (
-            <ConnectedDicomFilesUploader
-              isOpen={activeModalId === 'DicomFilesUploader'}
-              onClose={() => setActiveModalId(null)}
-            />
-          ) : null}
-          {healthCareApiButtons}
-          {healthCareApiWindows}
-        </StudyList>
-        }{/* PAGINATION FOOTER */}
+        />
+        {/* PAGINATION FOOTER */}
         <TablePagination
           currentPage={pageNumber}
           nextPageFunc={() => setPageNumber(pageNumber + 1)}
@@ -342,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"  ​​
@@ -349,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"
@@ -407,7 +424,7 @@ function _sortStudies(studies, field, order) {
   });
 
   // Sort by field
-  sortedStudies.sort(function (a, b) {
+  sortedStudies.sort(function(a, b) {
     let fieldA = a[field];
     let fieldB = b[field];
     if (field === 'studyDate') {
@@ -549,4 +566,4 @@ function _getQueryFiltersForValue(filters, fields, value) {
   return queryFilters;
 }
 
-export default withRouter(withTranslation('Common')(StudyListRoute));
+export default withRouter(StudyListRoute);