@ohif/app 3.8.0-beta.62 → 3.8.0-beta.64

package/dist/{704.bundle.242ba4e0b0be7d1fec94.js → 90.bundle.7a9258532111121b5ee3.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[704],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[90],{
 
-/***/ 49704:
+/***/ 54090:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -31,8 +31,8 @@ __webpack_require__.d(utils_namespaceObject, {
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
 var dicomweb_client_es = __webpack_require__(36922);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var src = __webpack_require__(14283);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var src = __webpack_require__(78198);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
 var sortStudy = __webpack_require__(45476);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
@@ -2484,8 +2484,8 @@ var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 487 modules
-var ui_src = __webpack_require__(55395);
+// EXTERNAL MODULE: ../../ui/src/index.js + 495 modules
+var ui_src = __webpack_require__(65967);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(15575);
 // EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
@@ -2504,48 +2504,49 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 function Toolbar({
   servicesManager
 }) {
   const {
-    toolbarService
-  } = servicesManager.services;
-  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
-  const [toolbarButtons, setToolbarButtons] = (0,react.useState)([]);
-  (0,react.useEffect)(() => {
-    const updateToolbar = () => {
-      const toolGroupId = viewportGridService.getActiveViewportOptionByKey('toolGroupId') ?? 'default';
-      setToolbarButtons(toolbarService.getButtonSection(toolGroupId));
-    };
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, updateToolbar);
-    updateToolbar();
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService, viewportGrid]);
-  const onInteraction = (0,react.useCallback)(args => toolbarService.recordInteraction(args), [toolbarService]);
+    toolbarButtons,
+    onInteraction
+  } = (0,src/* useToolbar */.tR)({
+    servicesManager,
+    buttonSection: 'primary'
+  });
+  if (!toolbarButtons.length) {
+    return null;
+  }
   return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map(toolDef => {
+    if (!toolDef) {
+      return null;
+    }
     const {
       id,
       Component,
       componentProps
     } = toolDef;
-    return (
-      /*#__PURE__*/
-      // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
-      // This allows for the individual items to be included in other UI components where perhaps alternative margins are desired.
-      react.createElement("div", {
-        key: id,
-        className: classnames_default()('mr-1')
-      }, /*#__PURE__*/react.createElement(Component, _extends({
-        id: id
-      }, componentProps, {
-        onInteraction: onInteraction,
-        servicesManager: servicesManager
-      })))
-    );
+    const {
+      disabled
+    } = componentProps;
+    const tool = /*#__PURE__*/react.createElement(Component, _extends({
+      key: id,
+      id: id,
+      onInteraction: onInteraction,
+      servicesManager: servicesManager
+    }, componentProps));
+    return disabled ? /*#__PURE__*/react.createElement(ui_src/* Tooltip */.m_, {
+      key: id,
+      position: "bottom",
+      content: componentProps.label,
+      secondaryContent: 'Not available on the current viewport'
+    }, /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('mr-1')
+    }, tool)) : /*#__PURE__*/react.createElement("div", {
+      key: id,
+      className: "mr-1"
+    }, tool);
   }));
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/ViewerHeader.tsx
@@ -2603,8 +2604,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.8.0-beta.62";
-  const commitHash = "9bcd1ae6f51d61786cc1e99624f396b56a47cd69";
+  const versionNumber = "3.8.0-beta.64";
+  const commitHash = "566b25a54425399096864bd263193646556011a5";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2758,18 +2759,12 @@ function ViewerLayout({
   }, []);
   const getComponent = id => {
     const entry = extensionManager.getModuleEntry(id);
-    if (!entry) {
-      throw new Error(`${id} is not valid for an extension module. Please verify your configuration or ensure that the extension is properly registered. It's also possible that your mode is utilizing a module from an extension that hasn't been included in its dependencies (add the extension to the "extensionDependencies" array in your mode's index.js file)`);
-    }
-    let content;
-    if (entry && entry.component) {
-      content = entry.component;
-    } else {
-      throw new Error(`No component found from extension ${id}. Check the reference string to the extension in your Mode configuration`);
+    if (!entry || !entry.component) {
+      throw new Error(`${id} is not valid for an extension module or no component found from extension ${id}. Please verify your configuration or ensure that the extension is properly registered. It's also possible that your mode is utilizing a module from an extension that hasn't been included in its dependencies (add the extension to the "extensionDependencies" array in your mode's index.js file). Check the reference string to the extension in your Mode configuration`);
     }
     return {
       entry,
-      content
+      content: entry.component
     };
   };
   const getPanelData = id => {
@@ -2783,7 +2778,8 @@ function ViewerLayout({
       iconLabel: entry.iconLabel,
       label: entry.label,
       name: entry.name,
-      content
+      content,
+      contexts: entry.contexts
     };
   };
   (0,react.useEffect)(() => {
@@ -2847,7 +2843,9 @@ function ViewerLayout({
     activeTabIndex: rightPanelDefaultClosed ? null : 0,
     tabs: rightPanelComponents,
     servicesManager: servicesManager
-  })) : null)));
+  })) : null)), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.j, {
+    dialogConfiguration: appConfig?.investigationalUseDialog
+  }));
 }
 ViewerLayout.propTypes = {
   // From extension module params
@@ -3238,6 +3236,11 @@ function _createStudyBrowserTabs(primaryStudyInstanceUIDs, studyDisplayList, dis
 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
@@ -4451,32 +4454,37 @@ function ToolbarLayoutSelector_extends() { ToolbarLayoutSelector_extends = Objec
 
 function ToolbarLayoutSelectorWithServices({
   servicesManager,
+  commands,
   ...props
 }) {
   const {
-    toolbarService
+    toolbarService,
+    viewportGridService
   } = servicesManager.services;
-  const onSelection = (0,react.useCallback)(props => {
+  const onInteraction = (0,react.useCallback)(args => {
+    const viewportId = viewportGridService.getActiveViewportId();
+    const refreshProps = {
+      viewportId
+    };
+    if (props.onLayoutChange) {
+      props.onLayoutChange(args);
+    }
     toolbarService.recordInteraction({
-      interactionType: 'action',
-      commands: [{
-        commandName: 'setViewportGridLayout',
-        commandOptions: {
-          ...props
-        },
-        context: 'DEFAULT'
-      }]
+      commands
+    }, {
+      ...args,
+      refreshProps
     });
   }, [toolbarService]);
   return /*#__PURE__*/react.createElement(LayoutSelector, ToolbarLayoutSelector_extends({}, props, {
-    onSelection: onSelection
+    onInteraction: onInteraction
   }));
 }
 function LayoutSelector({
   rows,
   columns,
   className,
-  onSelection,
+  onInteraction,
   ...rest
 }) {
   const [isOpen, setIsOpen] = (0,react.useState)(false);
@@ -4503,7 +4511,7 @@ function LayoutSelector({
     dropdownContent: DropdownContent !== null && /*#__PURE__*/react.createElement(DropdownContent, {
       rows: rows,
       columns: columns,
-      onSelection: onSelection
+      onSelection: onInteraction
     }),
     isActive: isOpen,
     type: "toggle"
@@ -4526,10 +4534,7 @@ function ToolbarSplitButtonWithServices_extends() { ToolbarSplitButtonWithServic
 
 
 
-
 function ToolbarSplitButtonWithServices({
-  isRadio,
-  isAction,
   groupId,
   primary,
   secondary,
@@ -4541,105 +4546,27 @@ function ToolbarSplitButtonWithServices({
   const {
     toolbarService
   } = servicesManager?.services;
-  const handleItemClick = (item, index) => {
-    const {
-      id,
-      type,
-      commands
-    } = item;
-    onInteraction({
-      groupId,
-      itemId: id,
-      interactionType: type,
-      commands
-    });
-    setState(state => ({
-      ...state,
-      primary: !isAction && isRadio ? {
-        ...item,
-        index
-      } : state.primary,
-      isExpanded: false,
-      items: getSplitButtonItems(items).filter(item => isRadio && !isAction ? item.index !== index : true)
-    }));
-  };
 
   /* Bubbles up individual item clicks */
-  const getSplitButtonItems = items => items.map((item, index) => ({
+  const getSplitButtonItems = (0,react.useCallback)(items => items.map((item, index) => ({
     ...item,
     index,
-    onClick: () => handleItemClick(item, index)
-  }));
-  const [buttonsState, setButtonState] = (0,react.useState)({
-    primaryToolId: '',
-    toggles: {},
-    groups: {}
-  });
-  const [state, setState] = (0,react.useState)({
-    primary,
-    items: getSplitButtonItems(items).filter(item => isRadio && !isAction ? item.id !== primary.id : true)
-  });
-  const {
-    primaryToolId,
-    toggles
-  } = buttonsState;
-  const isPrimaryToggle = state.primary.type === 'toggle';
-  const isPrimaryActive = state.primary.type === 'tool' && primaryToolId === state.primary.id || isPrimaryToggle && toggles[state.primary.id] === true;
-  const PrimaryButtonComponent = toolbarService?.getButtonComponentForUIType(state.primary.uiType) ?? ui_src/* ToolbarButton */.IB;
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
-      setButtonState({
-        ...state
+    onClick: () => {
+      onInteraction({
+        groupId,
+        itemId: item.id,
+        commands: item.commands
       });
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
-  const updatedItems = state.items.map(item => {
-    const isActive = item.type === 'tool' && primaryToolId === item.id;
-
-    // We could have added the
-    // item.type === 'toggle' && toggles[item.id] === true
-    // too but that makes the button active when the toggle is active under it
-    // which feels weird
-    return {
-      ...item,
-      isActive
-    };
-  });
-  const DefaultListItemRenderer = ({
-    type,
-    icon,
-    label,
-    t,
-    id
-  }) => {
-    const isActive = type === 'toggle' && toggles[id] === true;
-    return /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()('hover:bg-primary-dark flex h-8 w-full flex-row items-center p-3', 'whitespace-pre text-base', isActive && 'bg-primary-dark', isActive ? 'text-[#348CFD]' : 'text-common-bright hover:bg-primary-dark hover:text-primary-light')
-    }, icon && /*#__PURE__*/react.createElement("span", {
-      className: "mr-4"
-    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
-      name: icon,
-      className: "h-5 w-5"
-    })), /*#__PURE__*/react.createElement("span", {
-      className: "mr-5"
-    }, t(label)));
-  };
-  const listItemRenderer = renderer || DefaultListItemRenderer;
+    }
+  })), []);
+  const PrimaryButtonComponent = toolbarService?.getButtonComponentForUIType(primary.uiType) ?? ui_src/* ToolbarButton */.IB;
+  const listItemRenderer = renderer;
   return /*#__PURE__*/react.createElement(ui_src/* SplitButton */.fk, {
-    isRadio: isRadio,
-    isAction: isAction,
-    primary: state.primary,
+    primary: primary,
     secondary: secondary,
-    items: updatedItems,
+    items: getSplitButtonItems(items),
     groupId: groupId,
     renderer: listItemRenderer,
-    isActive: isPrimaryActive || updatedItems.some(item => item.isActive),
-    isToggle: isPrimaryToggle,
     onInteraction: onInteraction,
     Component: props => /*#__PURE__*/react.createElement(PrimaryButtonComponent, ToolbarSplitButtonWithServices_extends({}, props, {
       servicesManager: servicesManager
@@ -4648,11 +4575,9 @@ function ToolbarSplitButtonWithServices({
 }
 ToolbarSplitButtonWithServices.propTypes = {
   isRadio: (prop_types_default()).bool,
-  isAction: (prop_types_default()).bool,
   groupId: (prop_types_default()).string,
   primary: prop_types_default().shape({
     id: (prop_types_default()).string.isRequired,
-    type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
     uiType: (prop_types_default()).string
   }),
   secondary: prop_types_default().shape({
@@ -4660,14 +4585,16 @@ ToolbarSplitButtonWithServices.propTypes = {
     icon: (prop_types_default()).string.isRequired,
     label: (prop_types_default()).string,
     tooltip: (prop_types_default()).string.isRequired,
-    isActive: (prop_types_default()).bool
+    disabled: (prop_types_default()).bool,
+    className: (prop_types_default()).string
   }),
   items: prop_types_default().arrayOf(prop_types_default().shape({
     id: (prop_types_default()).string.isRequired,
-    type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
     icon: (prop_types_default()).string,
     label: (prop_types_default()).string,
-    tooltip: (prop_types_default()).string
+    tooltip: (prop_types_default()).string,
+    disabled: (prop_types_default()).bool,
+    className: (prop_types_default()).string
   })),
   renderer: (prop_types_default()).func,
   onInteraction: (prop_types_default()).func.isRequired,
@@ -4682,106 +4609,102 @@ ToolbarSplitButtonWithServices.defaultProps = {
   isAction: false
 };
 /* harmony default export */ const Toolbar_ToolbarSplitButtonWithServices = (ToolbarSplitButtonWithServices);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarButtonWithServices.tsx
-function ToolbarButtonWithServices_extends() { ToolbarButtonWithServices_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarButtonWithServices_extends.apply(this, arguments); }
-
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarButtonGroupWithServices.tsx
 
 
-function ToolbarButtonWithServices({
-  id,
-  type,
-  commands,
+function ToolbarButtonGroupWithServices({
+  groupId,
+  items,
   onInteraction,
-  servicesManager,
-  ...props
+  size
 }) {
-  const {
-    toolbarService
-  } = servicesManager?.services || {};
-  const [buttonsState, setButtonState] = (0,react.useState)({
-    primaryToolId: '',
-    toggles: {},
-    groups: {}
-  });
-  const {
-    primaryToolId
-  } = buttonsState;
-  const isActive = type === 'tool' && id === primaryToolId || type === 'toggle' && buttonsState.toggles[id] === true;
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
-      setButtonState({
-        ...state
+  const getSplitButtonItems = (0,react.useCallback)(items => items.map((item, index) => /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.IB, {
+    key: item.id,
+    icon: item.icon,
+    label: item.label,
+    disabled: item.disabled,
+    className: item.className,
+    id: item.id,
+    size: size,
+    onClick: () => {
+      onInteraction({
+        groupId,
+        itemId: item.id,
+        commands: item.commands
       });
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService]);
-  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.IB, ToolbarButtonWithServices_extends({
-    commands: commands,
-    id: id,
-    type: type,
-    isActive: isActive,
-    onInteraction: onInteraction
-  }, props));
+    }
+    // Note: this is necessary since tooltip will add
+    // default styles to the tooltip container which
+    // we don't want for groups
+    ,
+    toolTipClassName: ""
+  })), [onInteraction, groupId]);
+  return /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, null, getSplitButtonItems(items));
 }
-ToolbarButtonWithServices.propTypes = {
-  id: (prop_types_default()).string.isRequired,
-  type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
-  commands: prop_types_default().arrayOf(prop_types_default().shape({
-    commandName: (prop_types_default()).string.isRequired,
-    context: (prop_types_default()).string
-  })),
-  onInteraction: (prop_types_default()).func.isRequired,
-  servicesManager: prop_types_default().shape({
-    services: prop_types_default().shape({
-      toolbarService: prop_types_default().shape({
-        subscribe: (prop_types_default()).func.isRequired,
-        state: prop_types_default().shape({
-          primaryToolId: (prop_types_default()).string,
-          toggles: prop_types_default().objectOf((prop_types_default()).bool),
-          groups: prop_types_default().objectOf((prop_types_default()).any)
-        }).isRequired
-      }).isRequired
-    }).isRequired
-  }).isRequired
-};
-/* harmony default export */ const Toolbar_ToolbarButtonWithServices = (ToolbarButtonWithServices);
+/* harmony default export */ const Toolbar_ToolbarButtonGroupWithServices = (ToolbarButtonGroupWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
 
 
+
+const getClassName = isToggled => {
+  return {
+    className: isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
+  };
+};
 function getToolbarModule({
   commandsManager,
   servicesManager
 }) {
+  const {
+    cineService
+  } = servicesManager.services;
   return [{
-    name: 'ohif.divider',
-    defaultComponent: ToolbarDivider,
-    clickHandler: () => {}
-  }, {
-    name: 'ohif.action',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
-  }, {
     name: 'ohif.radioGroup',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
+    defaultComponent: ui_src/* ToolbarButton */.IB
+  }, {
+    name: 'ohif.divider',
+    defaultComponent: ToolbarDivider
   }, {
     name: 'ohif.splitButton',
-    defaultComponent: Toolbar_ToolbarSplitButtonWithServices,
-    clickHandler: () => {}
+    defaultComponent: Toolbar_ToolbarSplitButtonWithServices
   }, {
     name: 'ohif.layoutSelector',
-    defaultComponent: ToolbarLayoutSelector,
-    clickHandler: (evt, clickedBtn, btnSectionName) => {}
+    defaultComponent: ToolbarLayoutSelector
+  }, {
+    name: 'ohif.buttonGroup',
+    defaultComponent: Toolbar_ToolbarButtonGroupWithServices
+  }, {
+    name: 'evaluate.group.promoteToPrimary',
+    evaluate: ({
+      viewportId,
+      button,
+      itemId
+    }) => {
+      const {
+        items
+      } = button.props;
+      if (!itemId) {
+        return {
+          primary: button.props.primary,
+          items
+        };
+      }
+
+      // other wise we can move the clicked tool to the primary button
+      const clickedItemProps = items.find(item => item.id === itemId || item.itemId === itemId);
+      return {
+        primary: clickedItemProps,
+        items
+      };
+    }
   }, {
-    name: 'ohif.toggle',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
+    name: 'evaluate.cine',
+    evaluate: () => {
+      const isToggled = cineService.getState().isCineEnabled;
+      return getClassName(isToggled);
+    }
   }];
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/ContextMenuItemsBuilder.ts
@@ -4847,7 +4770,6 @@ function findMenu(menus, props, menuIdFilter) {
     }
     current = findIt.next();
   }
-  console.log('Menu chosen', menu?.id || 'NONE');
   return menu;
 }
 
@@ -5012,7 +4934,6 @@ class ContextMenuController {
       console.warn('Annotation is locked.');
       return;
     }
-    console.log('Getting items from', menus);
     const items = getMenuItems(selectorProps || contextMenuProps, event, menus, menuId);
     this.services.uiDialogService.dismiss({
       id: 'context-menu'
@@ -5831,8 +5752,8 @@ const findViewportsByPosition = (state, {
   };
 };
 /* harmony default export */ const src_findViewportsByPosition = (findViewportsByPosition);
-// EXTERNAL MODULE: ./index.js + 33 modules
-var index = __webpack_require__(45573);
+// EXTERNAL MODULE: ./index.js + 35 modules
+var index = __webpack_require__(68870);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/commandsModule.ts
 
 
@@ -5921,45 +5842,6 @@ const commandsModule = ({
     clearMeasurements: () => {
       measurementService.clear();
     },
-    /**
-     * Toggles off all tools which contain a commandName of setHangingProtocol
-     * or toggleHangingProtocol, and which match/don't match the protocol id/stage
-     */
-    toggleHpTools: () => {
-      const {
-        protocol,
-        stageIndex: toggleStageIndex,
-        stage
-      } = hangingProtocolService.getActiveProtocol();
-      const enableListener = button => {
-        if (!button.id) {
-          return;
-        }
-        const {
-          commands,
-          items,
-          primary
-        } = button.props || button;
-        if (primary) {
-          enableListener(primary);
-        }
-        if (items) {
-          items.forEach(enableListener);
-        }
-        const hpCommand = commands?.find?.(isHangingProtocolCommand);
-        if (!hpCommand) {
-          return;
-        }
-        const {
-          protocolId,
-          stageIndex,
-          stageId
-        } = hpCommand.commandOptions;
-        const isActive = (!protocolId || protocolId === protocol.id) && (stageIndex === undefined || stageIndex === toggleStageIndex) && (!stageId || stageId === stage.id);
-        toolbarService.setToggled(button.id, isActive);
-      };
-      Object.values(toolbarService.getButtons()).forEach(enableListener);
-    },
     /**
      *  Sets the specified protocol
      *    1. Records any existing state using the viewport grid service
@@ -5991,16 +5873,12 @@ const commandsModule = ({
       stageIndex,
       reset = false
     }) => {
-      const primaryToolBeforeHPChange = toolbarService.getActivePrimaryTool();
       try {
         // Stores in the state the display set selector id to displaySetUID mapping
         // Pass in viewportId for the active viewport.  This item will get set as
         // the activeViewportId
         const state = viewportGridService.getState();
         const hpInfo = hangingProtocolService.getState();
-        const {
-          protocol: oldProtocol
-        } = hangingProtocolService.getActiveProtocol();
         const stateSyncReduce = reuseCachedLayouts(state, hangingProtocolService, stateSyncService);
         const {
           hangingProtocolStageIndexMap,
@@ -6050,31 +5928,9 @@ const commandsModule = ({
         // multi-study display.
         delete displaySetSelectorMap[`${activeStudyUID || hpInfo.activeStudyUID}:activeDisplaySet:0`];
         stateSyncService.store(stateSyncReduce);
-        // This is a default action applied
-        actions.toggleHpTools();
-
-        // try to use the same tool in the new hanging protocol stage
-        const primaryButton = toolbarService.getButton(primaryToolBeforeHPChange);
-        if (primaryButton) {
-          // is there any type of interaction on this button, if not it might be in the
-          // items. This is a bit of a hack, but it works for now.
-
-          let interactionType = primaryButton.props?.interactionType;
-          if (!interactionType && primaryButton.props?.items) {
-            const firstItem = primaryButton.props.items[0];
-            interactionType = firstItem.props?.interactionType || firstItem.props?.type;
-          }
-          if (interactionType) {
-            toolbarService.recordInteraction({
-              interactionType,
-              ...primaryButton.props
-            });
-          }
-        }
         return true;
       } catch (e) {
         console.error(e);
-        actions.toggleHpTools();
         uiNotificationService.show({
           title: 'Apply Hanging Protocol',
           message: 'The hanging protocol could not be applied.',
@@ -6416,61 +6272,43 @@ const commandsModule = ({
       commandFn: actions.closeContextMenu
     },
     clearMeasurements: {
-      commandFn: actions.clearMeasurements,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.clearMeasurements
     },
     displayNotification: {
-      commandFn: actions.displayNotification,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.displayNotification
     },
     setHangingProtocol: {
-      commandFn: actions.setHangingProtocol,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.setHangingProtocol
     },
     toggleHangingProtocol: {
-      commandFn: actions.toggleHangingProtocol,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.toggleHangingProtocol
     },
     navigateHistory: {
-      commandFn: actions.navigateHistory,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.navigateHistory
     },
     nextStage: {
       commandFn: actions.deltaStage,
-      storeContexts: [],
       options: {
         direction: 1
       }
     },
     previousStage: {
       commandFn: actions.deltaStage,
-      storeContexts: [],
       options: {
         direction: -1
       }
     },
     setViewportGridLayout: {
-      commandFn: actions.setViewportGridLayout,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.setViewportGridLayout
     },
     toggleOneUp: {
-      commandFn: actions.toggleOneUp,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.toggleOneUp
     },
     openDICOMTagViewer: {
       commandFn: actions.openDICOMTagViewer
     },
     updateViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.updateViewportDisplaySet
     }
   };
   return {
@@ -7673,11 +7511,16 @@ const init_metadataProvider = src.classes.MetadataProvider;
  */
 function init({
   servicesManager,
-  configuration = {}
+  configuration = {},
+  commandsManager
 }) {
   const {
-    stateSyncService
+    stateSyncService,
+    toolbarService,
+    cineService,
+    viewportGridService
   } = servicesManager.services;
+  toolbarService.registerEventForToolbarUpdate(cineService, [cineService.EVENTS.CINE_STATE_CHANGED]);
   // Add
   src.DicomMetadataStore.subscribe(src.DicomMetadataStore.EVENTS.INSTANCES_ADDED, handlePETImageMetadata);
 
@@ -7692,6 +7535,12 @@ function init({
     clearOnModeExit: true
   });
 
+  // uiStateStore is a sync state which stores the relevant
+  // UI state for the viewer
+  stateSyncService.register('uiStateStore', {
+    clearOnModeExit: true
+  });
+
   // displaySetSelectorMap stores a map from
   // `<activeStudyUID>:<displaySetSelectorId>:<matchOffset>` to
   // a displaySetInstanceUID, used to display named display sets in
@@ -7708,7 +7557,7 @@ function init({
   });
 
   // Stores a map from the to be applied hanging protocols `<activeStudyUID>:<protocolId>`
-  // to the previously applied hanging protolStageIndexMap key, in order to toggle
+  // to the previously applied hanging protocolStageIndexMap key, in order to toggle
   // off the applied protocol and remember the old state.
   stateSyncService.register('toggleHangingProtocol', {
     clearOnModeExit: true
@@ -7720,6 +7569,47 @@ function init({
   stateSyncService.register('viewportsByPosition', {
     clearOnModeExit: true
   });
+
+  // Function to process and subscribe to events for a given set of commands and listeners
+  const subscribeToEvents = listeners => {
+    Object.entries(listeners).forEach(([event, commands]) => {
+      const supportedEvents = [viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, viewportGridService.EVENTS.VIEWPORTS_READY];
+      if (supportedEvents.includes(event)) {
+        viewportGridService.subscribe(event, eventData => {
+          const viewportId = eventData?.viewportId ?? viewportGridService.getActiveViewportId();
+          commandsManager.run(commands, {
+            viewportId
+          });
+        });
+      }
+    });
+  };
+  toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, state => {
+    const {
+      buttons
+    } = state;
+    for (const [id, button] of Object.entries(buttons)) {
+      const {
+        groupId,
+        items,
+        listeners
+      } = button.props;
+
+      // Handle group items' listeners
+      if (groupId && items) {
+        items.forEach(item => {
+          if (item.listeners) {
+            subscribeToEvents(item.listeners);
+          }
+        });
+      }
+
+      // Handle button listeners
+      if (listeners) {
+        subscribeToEvents(listeners);
+      }
+    }
+  });
 }
 const handlePETImageMetadata = ({
   SeriesInstanceUID,