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

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

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

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

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

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,