From 36bc73579d00ebf6e0542d0e386a30864039fb76 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Mon, 11 May 2020 21:36:51 -0400
Subject: [PATCH] Title hover for truncated text

---
 .../src/components/StudyListTable/StudyListTableRow.js | 10 +++++-----
 .../routes/StudyListContainer/StudyListContainer.jsx   |  7 +++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/platform/ui/src/components/StudyListTable/StudyListTableRow.js b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
index 120241b48..6d7b2e586 100644
--- a/platform/ui/src/components/StudyListTable/StudyListTableRow.js
+++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
@@ -35,22 +35,20 @@ const StudyListTableRow = props => {
                   onClick={onClickRow}
                 >
                   {row.map((cell, index) => {
-                    const { content, gridCol, name } = cell;
+                    const { content, title, gridCol, name } = cell;
 
                     return (
                       <td
                         key={name}
                         className={classnames(
-                          'px-4 py-2 text-base',
+                          'px-4 py-2 text-base truncate',
                           { 'border-b border-secondary-light': !isExpanded },
                           `w-${gridCol}/24` || ''
                         )}
                         style={{
                           maxWidth: 0,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
                         }}
+                        title={title}
                       >
                         {index === 0 && (
                           <Icon
@@ -83,6 +81,8 @@ StudyListTableRow.propTypes = {
       PropTypes.shape({
         key: PropTypes.string.isRequired,
         content: PropTypes.node.isRequired,
+        /** Title attribute to use for provided content */
+        title: PropTypes.string,
         gridCol: PropTypes.number.isRequired,
       })
     ).isRequired,
diff --git a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
index 44b224ade..b1e86e774 100644
--- a/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
+++ b/platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx
@@ -165,11 +165,13 @@ function StudyListContainer({ history, data: studies }) {
         {
           key: 'patientName',
           content: patientName,
+          title: patientName,
           gridCol: 4,
         },
         {
           key: 'mrn',
           content: patientId,
+          title: patientId,
           gridCol: 2,
         },
         {
@@ -182,21 +184,25 @@ function StudyListContainer({ history, data: studies }) {
               <span>{moment(studyTime).format('hh:mm A')}</span>
             </div>
           ),
+          title: 'time',
           gridCol: 5,
         },
         {
           key: 'description',
           content: studyDescription,
+          title: studyDescription,
           gridCol: 4,
         },
         {
           key: 'modality',
           content: modalities,
+          title: modalities,
           gridCol: 3,
         },
         {
           key: 'accession',
           content: accessionNumber,
+          title: accessionNumber,
           gridCol: 4,
         },
         {
@@ -213,6 +219,7 @@ function StudyListContainer({ history, data: studies }) {
               {instances}
             </>
           ),
+          title: instances,
           gridCol: 4,
         },
       ],