feat(WorkListUINext): New Study List (WorkListUINext)

extensions/default/src/Components/DataSourceConfigurationComponent.tsx

@@ -1,6 +1,17 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icons, useModal } from '@ohif/ui-next';
+import {
+  Icons,
+  useModal,
+  Button,
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  Card,
+  CardHeader,
+  CardDescription,
+  CardContent,
+} from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 import DataSourceConfigurationModalComponent from './DataSourceConfigurationModalComponent';
 
@@ -18,6 +29,8 @@ function DataSourceConfigurationComponent({
   const [configuredItems, setConfiguredItems] =
     useState<Array<Types.BaseDataSourceConfigurationAPIItem>>();
 
+  const [itemLabels, setItemLabels] = useState<Array<string>>([]);
+
   useEffect(() => {
     let shouldUpdate = true;
 
@@ -38,6 +51,7 @@ function DataSourceConfigurationComponent({
 
       const configAPI = configurationAPIFactory(activeDataSourceDef.sourceName);
       setConfigurationAPI(configAPI);
+      setItemLabels(configAPI.getItemLabels());
 
       // New configuration API means that the existing configured items must be cleared.
       setConfiguredItems(null);
@@ -87,31 +101,42 @@ function DataSourceConfigurationComponent({
   }, [configurationAPI, configuredItems, showConfigurationModal]);
 
   return configuredItems ? (
-    <div className="text-muted-foreground flex items-center overflow-hidden">
-      <Icons.Settings
-        className="mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer"
-        onClick={showConfigurationModal}
-      />
-      {configuredItems.map((item, itemIndex) => {
-        return (
-          <div
-            key={itemIndex}
-            className="flex overflow-hidden"
-          >
-            <div
-              key={itemIndex}
-              className="overflow-hidden text-ellipsis whitespace-nowrap"
-            >
-              {item.name}
-            </div>
-            {itemIndex !== configuredItems.length - 1 && <div className="px-2.5">|</div>}
-          </div>
-        );
-      })}
-    </div>
-  ) : (
-    <></>
-  );
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="gap-1 text-sm"
+          onClick={showConfigurationModal}
+        >
+          <Icons.CloudSettings className="h-5 w-5" />
+          Source
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent
+        align="center"
+        className="w-72 p-0"
+      >
+        <Card className="border-0 shadow-none">
+          <CardHeader className="p-3 pb-1">
+            <CardDescription className="text-sm">
+              <span className="text-foreground font-semibold">{t('Data Source')}:</span>{' '}
+              {t('Configure the server connection and storage settings')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 p-3 pt-0 text-sm">
+            <div className="bg-input col-span-2 my-2 h-px" />
+            {itemLabels.map((label, index) => (
+              <React.Fragment key={label}>
+                <span className="text-muted-foreground">{t(label)}</span>
+                <span>{configuredItems[index]?.name ?? '—'}</span>
+              </React.Fragment>
+            ))}
+          </CardContent>
+        </Card>
+      </HoverCardContent>
+    </HoverCard>
+  ) : null;
 }
 
 export default DataSourceConfigurationComponent;

extensions/default/src/DicomWebDataSource/index.ts

@@ -16,7 +16,8 @@ import { retrieveStudyMetadata, deleteStudyMetadataPromise } from './retrieveStu
 import StaticWadoClient from './utils/StaticWadoClient';
 import getDirectURL from '../utils/getDirectURL';
 import { fixBulkDataURI } from './utils/fixBulkDataURI';
-import {HeadersInterface} from '@ohif/core/src/types/RequestHeaders';
+import { HeadersInterface } from '@ohif/core/src/types/RequestHeaders';
+import { getGetThumbnailSrc, ThumbnailContext } from './retrieveThumbnail';
 
 const { DicomMetaDictionary, DicomDict } = dcmjs.data;
 
@@ -47,6 +48,15 @@ export type DicomWebConfig = {
    thumbnail - render using the thumbnail endpoint on wadors using bulkDataURI, passing authentication params  to the url.
     rendered - should use the rendered endpoint instead of the thumbnail endpoint
 */
+  thumbnailRequestStrategy?: 'bulkDataRetrieve' | 'fetch';
+  /**
+   * Thumbnail data request strategy when `thumbnailRendering` is `thumbnail`/`rendered`; ignored for `wadors`/`thumbnailDirect`.
+   *
+   * - `bulkDataRetrieve` (default): Uses the DICOMweb client's bulk data retrieve API (`retrieveBulkData`)
+   * - `fetch`: `GET` the WADO-RS thumbnail or rendered resource URL with auth headers and use the
+   *          response body as a JPEG blob URL. For series-level context, if that `GET` fails, a single
+   *          QIDO instances query (`limit=1`) is used to obtain `SOPInstanceUID` and the fetch is retried once.
+   */
   /** Whether the server supports reject calls (i.e. DCM4CHEE) */
   supportsReject?: boolean;
   /** indicates if the retrieves can fetch singlepart. Options are bulkdata, video, image, or  true */
@@ -98,6 +108,7 @@ export type BulkDataURIConfig = {
   relativeResolution?: 'studies' | 'series';
 };
 
+
 /**
  * The header options are the options passed into the generateWadoHeader
  * command.  This takes an extensible set of attributes to allow future enhancements.
@@ -158,7 +169,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
        */
       generateWadoHeader = (options: HeaderOptions): HeadersInterface => {
         const authorizationHeader = getAuthorizationHeader();
-        if (options?.includeTransferSyntax!==false) {
+        if (options?.includeTransferSyntax !== false) {
           //Generate accept header depending on config params
           const formattedAcceptHeader = utils.generateAcceptHeader(
             dicomWebConfig.acceptHeader,
@@ -175,7 +186,7 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
           // which the server expects Accept: application/dicom+json will still include that in the
           // header.
           return {
-            ...authorizationHeader
+            ...authorizationHeader,
           };
         }
       };
@@ -261,70 +272,16 @@ function createDicomWebApi(dicomWebConfig: DicomWebConfig, servicesManager) {
        *    or is already retrieved, or a promise to a URL for such use if a BulkDataURI
        */
 
-      getGetThumbnailSrc: function (instance, imageId) {
-        if (dicomWebConfig.thumbnailRendering === 'wadors') {
-          return function getThumbnailSrc(options) {
-            if (!imageId) {
-              return null;
-            }
-            if (!options?.getImageSrc) {
-              return null;
-            }
-            return options.getImageSrc(imageId);
-          };
-        }
-        if (dicomWebConfig.thumbnailRendering === 'thumbnailDirect') {
-          return function getThumbnailSrc() {
-            return this.directURL({
-              instance: instance,
-              defaultPath: '/thumbnail',
-              defaultType: 'image/jpeg',
-              singlepart: true,
-              tag: 'Absent',
-            });
-          }.bind(this);
-        }
-
-        if (dicomWebConfig.thumbnailRendering === 'thumbnail') {
-          return async function getThumbnailSrc() {
-            const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = instance;
-            const bulkDataURI = `${dicomWebConfig.wadoRoot}/studies/${StudyInstanceUID}/series/${SeriesInstanceUID}/instances/${SOPInstanceUID}/thumbnail?accept=image/jpeg`;
-            return URL.createObjectURL(
-              new Blob(
-                [
-                  await this.bulkDataURI({
-                    BulkDataURI: bulkDataURI.replace('wadors:', ''),
-                    defaultType: 'image/jpeg',
-                    mediaTypes: ['image/jpeg'],
-                    thumbnail: true,
-                  }),
-                ],
-                { type: 'image/jpeg' }
-              )
-            );
-          }.bind(this);
-        }
-        if (dicomWebConfig.thumbnailRendering === 'rendered') {
-          return async function getThumbnailSrc() {
-            const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = instance;
-            const bulkDataURI = `${dicomWebConfig.wadoRoot}/studies/${StudyInstanceUID}/series/${SeriesInstanceUID}/instances/${SOPInstanceUID}/rendered?accept=image/jpeg`;
-            return URL.createObjectURL(
-              new Blob(
-                [
-                  await this.bulkDataURI({
-                    BulkDataURI: bulkDataURI.replace('wadors:', ''),
-                    defaultType: 'image/jpeg',
-                    mediaTypes: ['image/jpeg'],
-                    thumbnail: true,
-                  }),
-                ],
-                { type: 'image/jpeg' }
-              )
-            );
-          }.bind(this);
-        }
+      getGetThumbnailSrc: function (thumbnailContext: ThumbnailContext, imageId) {
+        return getGetThumbnailSrc({
+          thumbnailContext,
+          imageId,
+          config: dicomWebConfig,
+          getAuthorizationHeader,
+          qidoDicomWebClient,
+          retrieve: this,
+        });
       },
-
       directURL: params => {
         return getDirectURL(
           {

extensions/default/src/DicomWebDataSource/qido.js

@@ -55,6 +55,7 @@ function processResults(qidoStudies) {
       instances: Number(getString(qidoStudy['00201208'])) || 0, // number
       description: getString(qidoStudy['00081030']) || '',
       modalities: getString(getModalities(qidoStudy['00080060'], qidoStudy['00080061'])) || '',
+      referringPhysicianName: utils.formatPN(getName(qidoStudy['00080090'])) || '', // Referring Physician's Name
     })
   );
 
@@ -151,6 +152,7 @@ function mapParams(params, options = {}) {
   const commaSeparatedFields = [
     '00081030', // Study Description
     '00080060', // Modality
+    '00080090', // Referring Physician's Name
     // Add more fields here if you want them in the result
   ].join(',');