fix(viewport): Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings (#4037)

extensions/default/src/CustomizableContextMenu/defaultContextMenu.ts

@@ -12,6 +12,9 @@ const defaultContextMenu = {
           commands: [
             {
               commandName: 'deleteMeasurement',
+              // we only have support for cornerstoneTools context menu since
+              // they are svg based
+              context: 'CORNERSTONE',
             },
           ],
         },

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -227,7 +227,7 @@ export default function PanelMeasurementTable({
       </div>
       <div className="flex justify-center p-4">
         <ActionButtons
-          t={t('MeasurementTable')}
+          t={t}
           actions={[
             {
               label: 'Export',

extensions/default/src/Panels/getImageSrcFromImageId.js

@@ -5,13 +5,8 @@
 function getImageSrcFromImageId(cornerstone, imageId) {
   return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
-    // Note: the default width and height of the canvas is 300x150
-    // but we need to set the width and height to the same number since
-    // the thumbnails are usually square and we want to maintain the aspect ratio
-    canvas.width = 128 / window.devicePixelRatio;
-    canvas.height = 128 / window.devicePixelRatio;
     cornerstone.utilities
-      .loadImageToCanvas({ canvas, imageId })
+      .loadImageToCanvas({ canvas, imageId, thumbnail: true })
       .then(imageId => {
         resolve(canvas.toDataURL());
       })

extensions/default/src/SOPClassHandlers/chartSOPClassHandler.ts

@@ -68,7 +68,6 @@ function getSopClassUids(instances) {
 }
 
 function _getDisplaySetsFromSeries(instances) {
-  debugger;
   // If the series has no instances, stop here
   if (!instances || !instances.length) {
     throw new Error('No instances were provided');

extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx

@@ -34,19 +34,47 @@ const defaultCommonPresets = [
   },
 ];
 
-const generateAdvancedPresets = hangingProtocolService => {
+const _areSelectorsValid = (hp, displaySets, hangingProtocolService) => {
+  if (!hp.displaySetSelectors || Object.values(hp.displaySetSelectors).length === 0) {
+    return true;
+  }
+
+  return hangingProtocolService.areRequiredSelectorsValid(
+    Object.values(hp.displaySetSelectors),
+    displaySets[0]
+  );
+};
+
+const generateAdvancedPresets = ({ servicesManager }) => {
+  const { hangingProtocolService, viewportGridService, displaySetService } =
+    servicesManager.services;
+
   const hangingProtocols = Array.from(hangingProtocolService.protocols.values());
+
+  const viewportId = viewportGridService.getActiveViewportId();
+
+  if (!viewportId) {
+    return [];
+  }
+  const displaySetInsaneUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
+
+  const displaySets = displaySetInsaneUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
+
   return hangingProtocols
     .map(hp => {
       if (!hp.isPreset) {
         return null;
       }
+
+      const areValid = _areSelectorsValid(hp, displaySets, hangingProtocolService);
+
       return {
         icon: hp.icon,
         title: hp.name,
         commandOptions: {
           protocolId: hp.id,
         },
+        disabled: !areValid,
       };
     })
     .filter(preset => preset !== null);
@@ -100,10 +128,10 @@ function LayoutSelector({
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
-  const { customizationService, hangingProtocolService } = servicesManager.services;
+  const { customizationService } = servicesManager.services;
   const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
   const advancedPresets =
-    customizationService.get('advancedPresets') || generateAdvancedPresets(hangingProtocolService);
+    customizationService.get('advancedPresets') || generateAdvancedPresets({ servicesManager });
 
   const closeOnOutsideClick = () => {
     if (isOpen) {
@@ -161,6 +189,7 @@ function LayoutSelector({
                     classNames="hover:bg-primary-dark group flex gap-2 p-1 cursor-pointer"
                     icon={preset.icon}
                     title={preset.title}
+                    disabled={preset.disabled}
                     commandOptions={preset.commandOptions}
                     onSelection={onSelectionPreset}
                   />

extensions/default/src/commandsModule.ts

@@ -271,7 +271,7 @@ const commandsModule = ({
     /**
      * Changes the viewport grid layout in terms of the MxN layout.
      */
-    setViewportGridLayout: ({ numRows, numCols }) => {
+    setViewportGridLayout: ({ numRows, numCols, isHangingProtocolLayout = false }) => {
       const { protocol } = hangingProtocolService.getActiveProtocol();
       const onLayoutChange = protocol.callbacks?.onLayoutChange;
       if (commandsManager.run(onLayoutChange, { numRows, numCols }) === false) {
@@ -293,6 +293,7 @@ const commandsModule = ({
           numRows,
           numCols,
           findOrCreateViewport,
+          isHangingProtocolLayout,
         });
         stateSyncService.store(stateReduce);
       };
@@ -366,6 +367,7 @@ const commandsModule = ({
           activeViewportId: viewportIdToUpdate,
           layoutOptions,
           findOrCreateViewport,
+          isHangingProtocolLayout: true,
         });
       } else {
         // We are not in one-up, so toggle to one up.
@@ -390,6 +392,7 @@ const commandsModule = ({
           numRows: 1,
           numCols: 1,
           findOrCreateViewport,
+          isHangingProtocolLayout: true,
         });
 
         // Subscribe to ANY (i.e. manual and hanging protocol) layout changes so that