fix: various type issues and error handlings (#2831)

* fix(error):Fix a few error conditions, mostly around seriesNumber

* apply few fixes

platform/ui/src/Types.ts

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+
+/**
+ * StringNumber often comes back from DICOMweb for integer valued items.
+ */
+const StringNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
+/**
+ * StringArray often comes back from dcmjs for single valued strings that
+ * might have multiple values such as window level descriptions.
+ */
+const StringArray = PropTypes.oneOfType([PropTypes.string, PropTypes.array]);
+
+const ThumbnailType = PropTypes.oneOf([
+  'thumbnail',
+  'thumbnailTracked',
+  'thumbnailNoImage',
+]);
+
+export { StringNumber, StringArray, ThumbnailType };

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
+import { StringNumber } from '../../Types';
 
 const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';
@@ -140,7 +141,7 @@ StudyBrowser.propTypes = {
               imageSrc: PropTypes.string,
               imageAltText: PropTypes.string,
               seriesDate: PropTypes.string,
-              seriesNumber: PropTypes.string,
+              seriesNumber: StringNumber,
               numInstances: PropTypes.number,
               description: PropTypes.string,
               componentType: PropTypes.oneOf([

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 import { Icon } from '../';
+import { StringNumber } from '../../Types';
 
 /**
  *
@@ -98,7 +99,7 @@ Thumbnail.propTypes = {
   }),
   imageAltText: PropTypes.string,
   description: PropTypes.string.isRequired,
-  seriesNumber: PropTypes.string.isRequired,
+  seriesNumber: StringNumber.isRequired,
   numInstances: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../';
+import * as Types from '../../Types';
 
 const ThumbnailList = ({
   thumbnails,
@@ -110,18 +111,11 @@ ThumbnailList.propTypes = {
       imageSrc: PropTypes.string,
       imageAltText: PropTypes.string,
       seriesDate: PropTypes.string,
-      seriesNumber: PropTypes.string,
+      seriesNumber: Types.StringNumber,
       numInstances: PropTypes.number,
       description: PropTypes.string,
-      componentType: PropTypes.oneOf([
-        'thumbnail',
-        'thumbnailTracked',
-        'thumbnailNoImage',
-      ]).isRequired,
-      viewportIdentificator: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array,
-      ]),
+      componentType: Types.ThumbnailType.isRequired,
+      viewportIdentificator: Types.StringArray,
       isTracked: PropTypes.bool,
       /**
        * Data the thumbnail should expose to a receiving drop target. Use a matching

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { Icon, Thumbnail, Tooltip } from '../';
+import { StringNumber } from '../../Types';
 
 const ThumbnailTracked = ({
   displaySetInstanceUID,
@@ -137,7 +138,7 @@ ThumbnailTracked.propTypes = {
   imageSrc: PropTypes.string,
   imageAltText: PropTypes.string,
   description: PropTypes.string.isRequired,
-  seriesNumber: PropTypes.string.isRequired,
+  seriesNumber: StringNumber.isRequired,
   numInstances: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { Icon, ButtonGroup, Button, Tooltip, CinePlayer } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';
 import { useTranslation } from 'react-i18next';
+import { StringNumber } from '../../Types';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
@@ -336,7 +337,7 @@ ViewportActionBar.propTypes = {
     isTracked: PropTypes.bool.isRequired,
     isRehydratable: PropTypes.bool.isRequired,
     studyDate: PropTypes.string.isRequired,
-    currentSeries: PropTypes.string.isRequired,
+    currentSeries: StringNumber.isRequired,
     seriesDescription: PropTypes.string.isRequired,
     modality: PropTypes.string.isRequired,
     patientInformation: PropTypes.shape({

platform/ui/src/index.js

@@ -3,6 +3,9 @@
 //export { utils };
 
 /** CONTEXT/HOOKS */
+// Export types - need to do as two lines due to a bug in babel
+import * as Types from './Types';
+
 export {
   useCine,
   CineProvider,
@@ -104,3 +107,4 @@ export {
 export { getIcon, ICONS } from './components/Icon/getIcon';
 export { BackgroundColor } from './pages/Colors/BackgroundColor';
 export { ModalComponent } from './contextProviders/ModalComponent';
+export { Types };