From ca900f80e1ba3eba50a7f673d7f6a5bf29fa5222 Mon Sep 17 00:00:00 2001
From: Alireza <ar.sedghi@gmail.com>
Date: Thu, 19 Aug 2021 08:05:33 -0400
Subject: [PATCH] fix: hotkeys storage between studies and truncated patient
 names (#2516)

* fix: PatientName truncation in the worklist

* fix: hotkeys preferences
---
 platform/core/src/classes/HotkeysManager.js   |  1 +
 .../StudyListTable/StudyListTableRow.js       | 23 ++++++---
 platform/ui/src/utils/getGridWidthClass.js    | 48 +++++++++----------
 platform/viewer/src/routes/Mode/Mode.jsx      | 11 ++++-
 .../viewer/src/routes/WorkList/WorkList.jsx   |  4 +-
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/platform/core/src/classes/HotkeysManager.js b/platform/core/src/classes/HotkeysManager.js
index 3439c76ea..50a6dcdbc 100644
--- a/platform/core/src/classes/HotkeysManager.js
+++ b/platform/core/src/classes/HotkeysManager.js
@@ -63,6 +63,7 @@ export class HotkeysManager {
     try {
       const definitions = this.getValidDefinitions(hotkeyDefinitions);
       definitions.forEach(definition => this.registerHotkeys(definition));
+      localStorage.setItem('hotkey-definitions', JSON.stringify(definitions));
     } catch (error) {
       const { UINotificationService } = this._servicesManager.services;
       UINotificationService.show({
diff --git a/platform/ui/src/components/StudyListTable/StudyListTableRow.js b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
index ed900c7f7..67f16fe4c 100644
--- a/platform/ui/src/components/StudyListTable/StudyListTableRow.js
+++ b/platform/ui/src/components/StudyListTable/StudyListTableRow.js
@@ -50,13 +50,22 @@ const StudyListTableRow = props => {
                         }}
                         title={title}
                       >
-                        {index === 0 && (
-                          <Icon
-                            name={isExpanded ? 'chevron-down' : 'chevron-right'}
-                            className="mr-4 inline-flex"
-                          />
-                        )}
-                        {content}
+                        <div className="flex">
+                          {index === 0 && (
+                            <div>
+                              <Icon
+                                name={isExpanded ? 'chevron-down' : 'chevron-right'}
+                                className="mr-4 inline-flex"
+                              />
+                            </div>
+                          )}
+                          <div className={classnames(
+                            { 'overflow-hidden': true },
+                            { 'truncate': true }
+                          )}>
+                            {content}
+                          </div>
+                        </div>
                       </td>
                     );
                   })}
diff --git a/platform/ui/src/utils/getGridWidthClass.js b/platform/ui/src/utils/getGridWidthClass.js
index bc1e00c9a..b41ad06ed 100644
--- a/platform/ui/src/utils/getGridWidthClass.js
+++ b/platform/ui/src/utils/getGridWidthClass.js
@@ -5,30 +5,30 @@
 // https://tailwindcss.com/docs/optimizing-for-production
 export default function getGridWidthClass(gridCol) {
   const widthClasses = {
-    1: 'w-1-24',
-    2: 'w-2-24',
-    3: 'w-3-24',
-    4: 'w-4-24',
-    5: 'w-5-24',
-    6: 'w-6-24',
-    7: 'w-7-24',
-    8: 'w-8-24',
-    9: 'w-9-24',
-    10: 'w-10-24',
-    11: 'w-11-24',
-    12: 'w-12-24',
-    13: 'w-13-24',
-    14: 'w-14-24',
-    15: 'w-15-24',
-    16: 'w-16-24',
-    17: 'w-17-24',
-    18: 'w-18-24',
-    19: 'w-19-24',
-    20: 'w-20-24',
-    21: 'w-21-24',
-    22: 'w-22-24',
-    23: 'w-23-24',
-    24: 'w-24-24',
+    1: 'w-1/24',
+    2: 'w-2/24',
+    3: 'w-3/24',
+    4: 'w-4/24',
+    5: 'w-5/24',
+    6: 'w-6/24',
+    7: 'w-7/24',
+    8: 'w-8/24',
+    9: 'w-9/24',
+    10: 'w-10/24',
+    11: 'w-11/24',
+    12: 'w-12/24',
+    13: 'w-13/24',
+    14: 'w-14/24',
+    15: 'w-15/24',
+    16: 'w-16/24',
+    17: 'w-17/24',
+    18: 'w-18/24',
+    19: 'w-19/24',
+    20: 'w-20/24',
+    21: 'w-21/24',
+    22: 'w-22/24',
+    23: 'w-23/24',
+    24: 'w-24/24',
   };
 
   return widthClasses[gridCol];
diff --git a/platform/viewer/src/routes/Mode/Mode.jsx b/platform/viewer/src/routes/Mode/Mode.jsx
index 939650b90..0b3a85524 100644
--- a/platform/viewer/src/routes/Mode/Mode.jsx
+++ b/platform/viewer/src/routes/Mode/Mode.jsx
@@ -181,7 +181,16 @@ export default function ModeRoute({
     }
 
     hotkeysManager.setDefaultHotKeys(hotkeys);
-    hotkeysManager.setHotkeys(hotkeys);
+
+    const userPreferredHotkeys = JSON.parse(
+      localStorage.getItem('hotkey-definitions')
+    );
+
+    if (userPreferredHotkeys?.length) {
+      hotkeysManager.setHotkeys(userPreferredHotkeys);
+    } else {
+      hotkeysManager.setHotkeys(hotkeys);
+    }
 
     return () => {
       hotkeysManager.destroy();
diff --git a/platform/viewer/src/routes/WorkList/WorkList.jsx b/platform/viewer/src/routes/WorkList/WorkList.jsx
index f0c3d65fd..21ce6f10f 100644
--- a/platform/viewer/src/routes/WorkList/WorkList.jsx
+++ b/platform/viewer/src/routes/WorkList/WorkList.jsx
@@ -270,10 +270,10 @@ function WorkList({
         {
           key: 'studyDate',
           content: (
-            <div>
+            <>
               {studyDate && <span className="mr-4">{studyDate}</span>}
               {studyTime && <span>{studyTime}</span>}
-            </div>
+            </>
           ),
           title: `${studyDate || ''} ${studyTime || ''}`,
           gridCol: 5,