[OHIF-309] - Users should be able to delete an SR from the side panel when the behavior is supported by the data source (#1952)

* Remove trailing zeroes from patient age

* WIP reject + remove displaySet.

* ohif-316: Update DICOM SR thumbnail design to include a delete action (#1948)

* add "supportsReject" to netlify config

Co-authored-by: Igor Octaviano <igoroctaviano@gmail.com>
Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/core/src/DataSources/IWebApiDataSource.js

@@ -16,6 +16,7 @@ function create({
   query,
   retrieve,
   store,
+  reject,
   retrieveSeriesMetadata,
   deleteStudyMetadataPromise,
   getImageIdsForDisplaySet,
@@ -54,9 +55,12 @@ function create({
     },
   };
 
+  const defaultReject = {};
+
   return {
     query: query || defaultQuery,
     retrieve: retrieve || defaultRetrieve,
+    reject: reject || defaultReject,
     store: store || defaultStore,
     getImageIdsForDisplaySet,
     retrieveSeriesMetadata,

platform/core/src/services/DisplaySetService/DisplaySetService.js

@@ -64,6 +64,26 @@ export default class DisplaySetService {
     return displaySet;
   }
 
+  deleteDisplaySet(displaySetInstanceUID) {
+    const { activeDisplaySets } = this;
+
+    const displaySetCacheIndex = displaySetCache.findIndex(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    const activeDisplaySetsIndex = activeDisplaySets.findIndex(
+      ds => ds.displaySetInstanceUID === displaySetInstanceUID
+    );
+
+    displaySetCache.splice(displaySetCacheIndex, 1);
+    activeDisplaySets.splice(activeDisplaySetsIndex, 1);
+
+    this._broadcastEvent(EVENTS.DISPLAY_SETS_CHANGED, this.activeDisplaySets);
+    this._broadcastEvent(EVENTS.DISPLAY_SETS_REMOVED, {
+      displaySetInstanceUIDs: [displaySetInstanceUID],
+    });
+  }
+
   /**
    * @param {string} displaySetInstanceUID
    * @returns {object} displaySet

platform/core/src/services/DisplaySetService/EVENTS.js

@@ -1,6 +1,7 @@
 const EVENTS = {
   DISPLAY_SETS_ADDED: 'event::displaySetService:displaySetsAdded',
   DISPLAY_SETS_CHANGED: 'event::displaySetService:displaySetsChanged',
+  DISPLAY_SETS_REMOVED: 'event::displaySetService:displaySetsRemoved',
 };
 
 export default EVENTS;

platform/ui/src/components/Dialog/Header.js

@@ -5,14 +5,13 @@ import PropTypes from 'prop-types';
 import { Typography, Icon } from '..';
 
 const CloseButton = ({ onClick }) => {
-  const theme = 'bg-transparent fill-primary-active';
-  const outline = 'outline-none focus:outline-none';
-  const flex = 'flex h-full';
-
   return (
-    <button className={classNames(flex, theme, 'border-0')} onClick={onClick}>
-      <Icon name="close" className={classNames(theme, outline, 'h-3 w-3')} />
-    </button>
+    <Icon
+      data-cy="close-button"
+      onClick={onClick}
+      name="close"
+      className="cursor-pointer text-primary-active w-6 h-6"
+    />
   );
 };
 

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -24,6 +24,8 @@ const ThumbnailList = ({
           seriesDate,
           viewportIdentificator,
           isTracked,
+          canReject,
+          onReject,
           imageSrc,
           imageAltText,
         }) => {
@@ -82,6 +84,8 @@ const ThumbnailList = ({
                   modalityTooltip={_getModalityTooltip(modality)}
                   seriesDate={seriesDate}
                   description={description}
+                  canReject={canReject}
+                  onReject={onReject}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
                   onDoubleClick={() =>
                     onThumbnailDoubleClick(displaySetInstanceUID)
@@ -113,7 +117,10 @@ ThumbnailList.propTypes = {
         'thumbnailTracked',
         'thumbnailNoImage',
       ]).isRequired,
-      viewportIdentificator: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+      viewportIdentificator: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array,
+      ]),
       isTracked: PropTypes.bool,
       /**
        * Data the thumbnail should expose to a receiving drop target. Use a matching

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx

@@ -12,12 +12,14 @@ const ThumbnailNoImage = ({
   modalityTooltip,
   onClick,
   onDoubleClick,
+  canReject,
+  onReject,
   dragData,
   isActive,
 }) => {
   const [collectedProps, drag, dragPreview] = useDrag({
     item: { ...dragData },
-    canDrag: function(monitor) {
+    canDrag: function (monitor) {
       return Object.keys(dragData).length !== 0;
     },
   });
@@ -51,8 +53,11 @@ const ThumbnailNoImage = ({
             </Tooltip>
             <span className="ml-4 text-base text-blue-300">{seriesDate}</span>
           </div>
-          <div className="ml-12 text-base text-white break-all">
-            {description}
+          <div className="flex flex-row">
+            {canReject && <Icon name="old-trash" className="ml-4 w-3 text-red-500" onClick={onReject} />}
+            <div className="ml-4 text-base text-white break-all">
+              {description}
+            </div>
           </div>
         </div>
       </div>

platform/viewer/public/config/default.js

@@ -16,11 +16,12 @@ window.config = {
         qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
         wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
         qidoSupportsIncludeField: true,
+        supportsReject: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
         enableStudyLazyLoad: true,
         supportsFuzzyMatching: true,
-        supportsWildcard: true
+        supportsWildcard: true,
       },
     },
   ],

platform/viewer/public/config/netlify.js

@@ -16,11 +16,12 @@ window.config = {
         qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
         wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
         qidoSupportsIncludeField: true,
+        supportsReject: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
         enableStudyLazyLoad: true,
         supportsFuzzyMatching: true,
-        supportsWildcard: true
+        supportsWildcard: true,
       },
     },
   ],