fix(thumbnail): useCallback for thumbnail promise creation.

On the worklist page, indicate the number of studies with a colon for better localization.
OHIF · Oct 31, 2023 · ce2ba6e · ce2ba6e
1 parent c73a403
commit ce2ba6e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/extensions/default/src/Panels/WrappedPanelStudyBrowser.tsx b/extensions/default/src/Panels/WrappedPanelStudyBrowser.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 //
 import PanelStudyBrowser from './PanelStudyBrowser';
@@ -18,7 +18,10 @@ function WrappedPanelStudyBrowser({ commandsManager, extensionManager, servicesM
   // already determined our datasource
   const dataSource = extensionManager.getDataSources()[0];
   const _getStudiesForPatientByMRN = getStudiesForPatientByMRN.bind(null, dataSource);
-  const _getImageSrcFromImageId = _createGetImageSrcFromImageIdFn(extensionManager);
+  const _getImageSrcFromImageId = useCallback(
+    _createGetImageSrcFromImageIdFn(extensionManager),
+    []
+  );
   const _requestDisplaySetCreationForStudy = requestDisplaySetCreationForStudy.bind(
     null,
     dataSource

diff --git a/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/index.tsx b/extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 //
 import PanelStudyBrowserTracking from './PanelStudyBrowserTracking';
@@ -26,7 +26,10 @@ function WrappedPanelStudyBrowserTracking({ commandsManager, extensionManager, s
 
   const getStudiesForPatientByMRN = _getStudyForPatientUtility(extensionManager);
   const _getStudiesForPatientByMRN = getStudiesForPatientByMRN.bind(null, dataSource);
-  const _getImageSrcFromImageId = _createGetImageSrcFromImageIdFn(extensionManager);
+  const _getImageSrcFromImageId = useCallback(
+    _createGetImageSrcFromImageIdFn(extensionManager),
+    []
+  );
   const _requestDisplaySetCreationForStudy = requestDisplaySetCreationForStudy.bind(
     null,
     dataSource

diff --git a/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx b/platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
@@ -69,16 +69,16 @@ const StudyListFilter = ({
                 )}
                 <Typography
                   variant="h6"
-                  className="mr-2"
-                  data-cy={'num-studies'}
+                  className="text-primary-light"
                 >
-                  {numOfStudies > 100 ? '>100' : numOfStudies}
+                  {`${t('Studies')}:`}&nbsp;
                 </Typography>
                 <Typography
                   variant="h6"
                   className="text-primary-light"
+                  data-cy={'num-studies'}
                 >
-                  {t('Studies')}
+                  {numOfStudies > 100 ? '>100' : numOfStudies}
                 </Typography>
               </div>
             </div>