feat(studyPrefetcher): Study Prefetcher (#4206)

platform/ui/package.json

@@ -33,7 +33,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/react": "^13.1.0",
     "browser-detect": "^0.2.28",
     "classnames": "^2.3.2",
     "d3-array": "3",
@@ -56,7 +56,7 @@
     "react-modal": "3.11.2",
     "react-outside-click-handler": "^1.3.0",
     "react-select": "5.7.4",
-    "react-test-renderer": "^16.12.0",
+    "react-test-renderer": "^18.3.1",
     "react-window": "^1.8.9",
     "react-with-direction": "^1.3.1",
     "swiper": "^8.4.2",

platform/ui/src/assets/icons/database.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19" height="19" viewBox="0 0 19 19" version="1.1"  xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0.84873874,0,0,0.84873874,0.13586772,0.14249413)">
+    <ellipse cx="11" cy="4" rx="9" ry="3"/>
+    <path d="m 2,4 v 14 a 9,3 0 0 0 18,0 V 4" />
+    <path d="m 2,11 a 9,3 0 0 0 18,0" />
+  </g>
+</svg>

platform/ui/src/components/Icon/getIcon.js

@@ -9,6 +9,7 @@ import { ReactComponent as calendar } from './../../assets/icons/calendar.svg';
 import { ReactComponent as cancel } from './../../assets/icons/cancel.svg';
 import { ReactComponent as clipboard } from './../../assets/icons/clipboard.svg';
 import { ReactComponent as close } from './../../assets/icons/closeIcon.svg';
+import { ReactComponent as database } from './../../assets/icons/database.svg';
 import { ReactComponent as dottedCircle } from './../../assets/icons/dotted-circle.svg';
 import { ReactComponent as circledCheckmark } from './../../assets/icons/circled-checkmark.svg';
 import { ReactComponent as chevronDown } from './../../assets/icons/chevron-down.svg';
@@ -214,6 +215,7 @@ const ICONS = {
   cancel: cancel,
   clipboard: clipboard,
   close: close,
+  database: database,
   'dotted-circle': dottedCircle,
   'circled-checkmark': circledCheckmark,
   'chevron-down': chevronDown,

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -17,6 +17,7 @@ const Thumbnail = ({
   description,
   seriesNumber,
   numInstances,
+  loadingProgress,
   countIcon,
   messages,
   dragData = {},
@@ -94,6 +95,17 @@ const Thumbnail = ({
             />
             {` ${numInstances}`}
           </div>
+          <div className="flex mr-2 last:mr-0">
+            {loadingProgress && loadingProgress < 1 && (
+              <>{Math.round(loadingProgress * 100)}%</>
+            )}
+            {loadingProgress && loadingProgress === 1 && (
+              <Icon
+                name={'database'}
+                className="w-3"
+              />
+            )}
+          </div>
           <DisplaySetMessageListTooltip
             messages={messages}
             id={`display-set-tooltip-${displaySetInstanceUID}`}
@@ -124,6 +136,7 @@ Thumbnail.propTypes = {
   description: PropTypes.string.isRequired,
   seriesNumber: StringNumber.isRequired,
   numInstances: PropTypes.number.isRequired,
+  loadingProgress: PropTypes.number,
   messages: PropTypes.object,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -25,6 +25,7 @@ const ThumbnailList = ({
           dragData,
           seriesNumber,
           numInstances,
+          loadingProgress,
           modality,
           componentType,
           seriesDate,
@@ -66,6 +67,7 @@ const ThumbnailList = ({
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
+                  loadingProgress={loadingProgress}
                   countIcon={countIcon}
                   imageSrc={imageSrc}
                   imageAltText={imageAltText}

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -18,6 +18,7 @@ function ThumbnailTracked({
   description,
   seriesNumber,
   numInstances,
+  loadingProgress,
   countIcon,
   messages,
   dragData,
@@ -87,6 +88,7 @@ function ThumbnailTracked({
         messages={messages}
         numInstances={numInstances}
         countIcon={countIcon}
+        loadingProgress={loadingProgress}
         isActive={isActive}
         onClick={onClick}
         onDoubleClick={onDoubleClick}
@@ -114,6 +116,7 @@ ThumbnailTracked.propTypes = {
   description: PropTypes.string.isRequired,
   seriesNumber: StringNumber.isRequired,
   numInstances: PropTypes.number.isRequired,
+  loadingProgress: PropTypes.number,
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,
   onClickUntrack: PropTypes.func.isRequired,

platform/ui/src/hooks/useSessionStorage.test.js

@@ -1,4 +1,5 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { act } from 'react';
+import { renderHook } from '@testing-library/react';
 import useSessionStorage from './useSessionStorage';
 
 const SESSION_STORAGE_KEY = 'test';