feat: Add CS3D WSI and Video Viewports and add annotation navigation for MPR (#4182)

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { utils } from '@ohif/core';
 
 import StudyItem from '../StudyItem';
 import LegacyButtonGroup from '../LegacyButtonGroup';
@@ -9,6 +10,8 @@ import ThumbnailList from '../ThumbnailList';
 import { StringNumber } from '../../types';
 import StudyBrowserSort from '../StudyBrowserSort';
 
+const { sortStudySeries } = utils;
+
 const getTrackedSeries = displaySets => {
   let trackedSeries = 0;
   displaySets.forEach(displaySet => {
@@ -20,7 +23,7 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 
-const noop = () => {};
+const noop = () => { };
 
 const StudyBrowser = ({
   tabs,
@@ -36,11 +39,14 @@ const StudyBrowser = ({
 }: withAppTypes) => {
   const { t } = useTranslation('StudyBrowser');
   const { customizationService } = servicesManager?.services || {};
-
+  const { experimentalStudyBrowserSort } = window.config;
   const getTabContent = () => {
     const tabData = tabs.find(tab => tab.name === activeTabName);
     return tabData.studies.map(
       ({ studyInstanceUid, date, description, numInstances, modalities, displaySets }) => {
+        if (!experimentalStudyBrowserSort) {
+          sortStudySeries(displaySets);
+        }
         const isExpanded = expandedStudyInstanceUIDs.includes(studyInstanceUid);
         return (
           <React.Fragment key={studyInstanceUid}>
@@ -112,9 +118,7 @@ const StudyBrowser = ({
             );
           })}
         </LegacyButtonGroup>
-        {window.config.experimentalStudyBrowserSort && (
-          <StudyBrowserSort servicesManager={servicesManager} />
-        )}
+        {experimentalStudyBrowserSort && <StudyBrowserSort servicesManager={servicesManager} />}
       </div>
       <div className="ohif-scrollbar invisible-scrollbar flex flex-1 flex-col overflow-auto">
         {getTabContent()}

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

@@ -101,14 +101,14 @@ const Thumbnail = ({
             {loadingProgress && loadingProgress === 1 && (
               <Icon
                 name={'database'}
-                className="w-3"
-              />
-            )}
-          </div>
-          <DisplaySetMessageListTooltip
-            messages={messages}
-            id={`display-set-tooltip-${displaySetInstanceUID}`}
-          />
+              className="w-3"
+            />
+          )}
+        </div>
+        <DisplaySetMessageListTooltip
+          messages={messages}
+          id={`display-set-tooltip-${displaySetInstanceUID}`}
+        />
         </div>
         <div className="break-all text-base text-white">{description}</div>
       </div>