feat: state sync service and hanging protocol updates to preserve state (#3131)

* feat: Add state sync and use it to remember viewport grid info

fix: Version updates

Fixes for toggling MPR mode

Fix the display when the interleaved load module fails

Fix the memory of the state to restore correctly

PR fixes for the state sync service

PR fixes

PR fixes

PR fixes

Added a hack warning to remove volumeDeactivate

Fixes for TMTV colormap setting

Fix the casing

Missed renames

fix: tests not running due to variance in ordering

Reverting some fixes to change case

PR changes - mostly comments and minor improvements

fix: All display sets were being updated on drag and drop

PR fixes - mostly renames

PR fixes

Test support for OHIF, for HP branch

test: Add at least a minimal set of automated tests for hanging protocols

Docs

PR fixes

Merge fixes

DOCS updates

Add an example of the mn hanging protocol

PR fixes

PR fixes

PR fixes

* Fix the drag and drop

PR fixes

* PR changes - update default keys for next/previous stage

* fix: Was storing the custom viewport grid too aggressively

Caused by a PR change misspelling a variable

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -168,9 +168,11 @@ const SplitButton = ({
             : 'text-common-bright hover:bg-primary-dark hover:text-primary-light'
         )}
       >
-        <span className="mr-4">
-          <Icon name={icon} className="w-5 h-5" />
-        </span>
+        {icon && (
+          <span className="mr-4">
+            <Icon name={icon} className="w-5 h-5" />
+          </span>
+        )}
         <span className="mr-5">{t(label)}</span>
       </div>
     );

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

@@ -6,7 +6,7 @@ import { Icon } from '../';
 import { StringNumber } from '../../types';
 
 /**
- *
+ * Display a thumbnail for a display set.
  */
 const Thumbnail = ({
   displaySetInstanceUID,
@@ -16,11 +16,12 @@ const Thumbnail = ({
   description,
   seriesNumber,
   numInstances,
+  countIcon,
   dragData,
   isActive,
   onClick,
   onDoubleClick,
-}) => {
+}): React.ReactNode => {
   // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
   // this will still allow for "drag", even if there is no drop target for the
   // specified item.
@@ -73,7 +74,8 @@ const Thumbnail = ({
             {seriesNumber}
           </div>
           <div className="flex flex-row items-center flex-1">
-            <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
+            <Icon name={countIcon || 'group-layers'} className="w-3 mr-2" />
+            {` ${numInstances}`}
           </div>
         </div>
         <div className="text-base text-white break-all">{description}</div>

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

@@ -23,6 +23,7 @@ const ThumbnailList = ({
           modality,
           componentType,
           seriesDate,
+          countIcon,
           viewportIdentificator,
           isTracked,
           canReject,
@@ -33,7 +34,6 @@ const ThumbnailList = ({
           const isActive = activeDisplaySetInstanceUIDs.includes(
             displaySetInstanceUID
           );
-
           switch (componentType) {
             case 'thumbnail':
               return (
@@ -44,6 +44,7 @@ const ThumbnailList = ({
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
+                  countIcon={countIcon}
                   imageSrc={imageSrc}
                   imageAltText={imageAltText}
                   viewportIdentificator={viewportIdentificator}
@@ -63,6 +64,7 @@ const ThumbnailList = ({
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
+                  countIcon={countIcon}
                   imageSrc={imageSrc}
                   imageAltText={imageAltText}
                   viewportIdentificator={viewportIdentificator}

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

@@ -13,6 +13,7 @@ const ThumbnailTracked = ({
   description,
   seriesNumber,
   numInstances,
+  countIcon,
   dragData,
   onClick,
   onDoubleClick,
@@ -117,6 +118,7 @@ const ThumbnailTracked = ({
         description={description}
         seriesNumber={seriesNumber}
         numInstances={numInstances}
+        countIcon={countIcon}
         isActive={isActive}
         onClick={onClick}
         onDoubleClick={onDoubleClick}

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -39,6 +39,11 @@ const ToolbarButton = ({
 
   const activeClass = isActive ? 'active' : '';
   const shouldShowDropdown = !!isActive && !!dropdownContent;
+  const iconEl = icon ? (
+    <Icon name={icon} />
+  ) : (
+    <div>{label || 'Missing icon and label'}</div>
+  );
 
   return (
     <div key={id}>
@@ -64,7 +69,7 @@ const ToolbarButton = ({
           id={id}
           {...rest}
         >
-          <Icon name={icon} />
+          {iconEl}
         </IconButton>
       </Tooltip>
     </div>

platform/ui/src/components/Viewport/Viewport.tsx

@@ -2,7 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { LegacyViewportActionBar, Notification } from '../';
 
-const Viewport = ({ viewportIndex, onArrowsClick, studyData, children }) => {
+const Viewport = ({
+  viewportId,
+  viewportIndex,
+  onArrowsClick,
+  studyData,
+  children,
+}) => {
+  if (!viewportId) {
+    viewportId = `viewport-${viewportIndex}`;
+  }
   return (
     <div className="relative flex flex-col h-full">
       <div className="absolute top-0 left-0 w-full">
@@ -39,7 +48,7 @@ const Viewport = ({ viewportIndex, onArrowsClick, studyData, children }) => {
       </div>
 
       {/* STUDY IMAGE */}
-      <div className="w-full h-full" id={`viewport-${viewportIndex}`}>
+      <div className="w-full h-full" id={viewportId}>
         {children}
       </div>
     </div>