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

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,