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

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}
                   />