Enable non-thumbnail entries in thumbnail list.

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -18,7 +18,9 @@ function PanelStudyBrowser({
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const [{ StudyInstanceUIDs }, dispatch] = useImageViewer();
   const [activeTabName, setActiveTabName] = useState('primary');
-  const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([]);
+  const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState(
+    []
+  );
   const [studyDisplayList, setStudyDisplayList] = useState([]);
   const [displaySets, setDisplaySets] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
@@ -137,8 +139,12 @@ function PanelStudyBrowser({
       StudyInstanceUID
     );
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
-      // eslint-disable-next-line prettier/prettier
-      ? [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)]
+      ? // eslint-disable-next-line prettier/prettier
+        [
+          ...expandedStudyInstanceUIDs.filter(
+            stdyUid => stdyUid !== StudyInstanceUID
+          ),
+        ]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -202,27 +208,55 @@ function _mapDataSourceStudies(studies) {
 }
 
 function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
-  return displaySets.map(ds => {
+  const thumbnailDisplaySets = [];
+  const thumbnailNoImageDisplaySets = [];
+
+  displaySets.forEach(ds => {
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
-    return {
+    const componentType = _getComponentType(ds.Modality);
+
+    const array =
+      componentType === 'thumbnail'
+        ? thumbnailDisplaySets
+        : thumbnailNoImageDisplaySets;
+
+    array.push({
       displaySetInstanceUID: ds.displaySetInstanceUID,
       description: ds.SeriesDescription,
       seriesNumber: ds.SeriesNumber,
       modality: ds.Modality,
-      date: ds.SeriesDate,
+      seriesDate: ds.SeriesDate,
       numInstances: ds.numImageFrames,
       StudyInstanceUID: ds.StudyInstanceUID,
-      componentType: 'thumbnail', // 'thumbnailNoImage' || 'thumbnailTracked' // TODO: PUT THIS SOMEWHERE ELSE
+      componentType,
       imageSrc,
       dragData: {
         type: 'displayset',
         displaySetInstanceUID: ds.displaySetInstanceUID,
         // .. Any other data to pass
       },
-    };
+    });
   });
+
+  return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
 }
 
+const thumbnailNoImageModalities = [
+  'SR',
+  'SEG',
+  'RTSTRUCT',
+  'RTPLAN',
+  'RTDOSE',
+];
+
+function _getComponentType(Modality) {
+  if (thumbnailNoImageModalities.includes(Modality)) {
+    // TODO probably others.
+    return 'thumbnailNoImage';
+  }
+
+  return 'thumbnail';
+}
 
 /**
  *

extensions/dicom-sr/src/getSopClassHandlerModule.js

@@ -55,7 +55,14 @@ function _getDisplaySetsFromSeries(
 
   const instance = instances[0];
 
-  const { StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID } = instance;
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+  } = instance;
   const { ConceptNameCodeSequence, ContentSequence } = instance;
 
   if (
@@ -72,6 +79,9 @@ function _getDisplaySetsFromSeries(
     plugin: id,
     Modality: 'SR',
     displaySetInstanceUID: utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
     SOPInstanceUID,
     SeriesInstanceUID,
     StudyInstanceUID,

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

@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
 
-const ThumbnailList = ({
-  thumbnails,
-  thumbnailActive,
-  onThumbnailClick,
-}) => {
+const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
   return (
     <div className="py-3 bg-black">
       {thumbnails.map(

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

@@ -1,11 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useDrag } from 'react-dnd';
 
 import { Icon } from '@ohif/ui';
 
-const ThumbnailNoImage = ({ description, seriesDate, modality, onClick }) => {
+const ThumbnailNoImage = ({
+  description,
+  seriesDate,
+  modality,
+  onClick,
+  dragData,
+}) => {
+  const [collectedProps, drag, dragPreview] = useDrag({
+    item: { ...dragData },
+    canDrag: function(monitor) {
+      return Object.keys(dragData).length !== 0;
+    },
+  });
+
   return (
     <div
+      ref={drag}
       className="flex flex-row flex-1 px-4 py-3 cursor-pointer"
       onClick={onClick}
       onKeyDown={onClick}