@ohif/app 3.7.0-beta.79 → 3.7.0-beta.80

package/dist/{90.bundle.1d113c4a201e850c98c0.js → 342.bundle.70da5239bd664aa5d41a.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[90],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[342],{
 
-/***/ 48090:
+/***/ 56342:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -11,6 +11,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   ContextMenuController: () => (/* reexport */ ContextMenuController),
   CustomizableContextMenuTypes: () => (/* reexport */ types_namespaceObject),
+  createReportAsync: () => (/* reexport */ Actions_createReportAsync),
+  createReportDialogPrompt: () => (/* reexport */ createReportDialogPrompt),
   "default": () => (/* binding */ default_src),
   dicomWebUtils: () => (/* reexport */ utils_namespaceObject),
   getStudiesForPatientByMRN: () => (/* reexport */ Panels_getStudiesForPatientByMRN)
@@ -1167,7 +1169,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           await wadoDicomWebClient.storeInstances(options);
         } else {
           const meta = {
-            FileMetaInformationVersion: dataset._meta.FileMetaInformationVersion.Value,
+            FileMetaInformationVersion: dataset._meta?.FileMetaInformationVersion?.Value,
             MediaStorageSOPClassUID: dataset.SOPClassUID,
             MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
             TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
@@ -1217,6 +1219,8 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           instance
         });
         instance.imageId = imageId;
+        instance.wadoRoot = dicomWebConfig.wadoRoot;
+        instance.wadoUri = dicomWebConfig.wadoUri;
         metadataProvider.addImageIdToUIDs(imageId, {
           StudyInstanceUID,
           SeriesInstanceUID: instance.SeriesInstanceUID,
@@ -1511,18 +1515,18 @@ function createDicomJSONApi(dicomJsonConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMJson QUERY processResults');
+          console.warn(' DICOMJson QUERY processResults not implemented');
         }
       },
       series: {
         // mapParams: mapParams.bind(),
         search: () => {
-          console.debug(' DICOMJson QUERY SERIES SEARCH');
+          console.warn(' DICOMJson QUERY SERIES SEARCH not implemented');
         }
       },
       instances: {
         search: () => {
-          console.debug(' DICOMJson QUERY instances SEARCH');
+          console.warn(' DICOMJson QUERY instances SEARCH not implemented');
         }
       }
     },
@@ -1602,7 +1606,7 @@ function createDicomJSONApi(dicomJsonConfig) {
     },
     store: {
       dicom: () => {
-        console.debug(' DICOMJson store dicom');
+        console.warn(' DICOMJson store dicom not implemented');
       }
     },
     getImageIdsForDisplaySet(displaySet) {
@@ -1744,7 +1748,7 @@ function createDicomLocalApi(dicomLocalConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMLocal QUERY processResults');
+          console.warn(' DICOMLocal QUERY processResults not implemented');
         }
       },
       series: {
@@ -1766,7 +1770,7 @@ function createDicomLocalApi(dicomLocalConfig) {
       },
       instances: {
         search: () => {
-          console.debug(' DICOMLocal QUERY instances SEARCH');
+          console.warn(' DICOMLocal QUERY instances SEARCH not implemented');
         }
       }
     },
@@ -2048,8 +2052,8 @@ var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
-var ui_src = __webpack_require__(88344);
+// EXTERNAL MODULE: ../../ui/src/index.js + 485 modules
+var ui_src = __webpack_require__(71783);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(62657);
 // EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
@@ -2058,8 +2062,8 @@ var dist = __webpack_require__(62474);
 var es = __webpack_require__(69190);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
 var react_router_dist = __webpack_require__(85066);
-// EXTERNAL MODULE: ../../i18n/src/index.js + 98 modules
-var i18n_src = __webpack_require__(43040);
+// EXTERNAL MODULE: ../../i18n/src/index.js + 99 modules
+var i18n_src = __webpack_require__(34708);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
 var classnames = __webpack_require__(44921);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
@@ -2075,48 +2079,21 @@ function Toolbar(_ref) {
     toolbarService
   } = servicesManager.services;
   const [toolbarButtons, setToolbarButtons] = (0,react.useState)([]);
-  const [buttonState, setButtonState] = (0,react.useState)({
-    primaryToolId: '',
-    toggles: {},
-    groups: {}
-  });
-
-  // Could track buttons and state separately...?
   (0,react.useEffect)(() => {
     const {
-      unsubscribe: unsub1
+      unsubscribe
     } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, () => setToolbarButtons(toolbarService.getButtonSection('primary')));
-    const {
-      unsubscribe: unsub2
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, () => setButtonState({
-      ...toolbarService.state
-    }));
     return () => {
-      unsub1();
-      unsub2();
+      unsubscribe();
     };
   }, [toolbarService]);
+  const onInteraction = (0,react.useCallback)(args => toolbarService.recordInteraction(args), [toolbarService]);
   return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map(toolDef => {
     const {
       id,
       Component,
       componentProps
     } = toolDef;
-    // TODO: ...
-
-    // isActive if:
-    // - id is primary?
-    // - id is in list of "toggled on"?
-    let isActive;
-    if (componentProps.type === 'toggle') {
-      isActive = buttonState.toggles[id];
-    }
-    // Also need... to filter list for splitButton, and set primary based on most recently clicked
-    // Also need to kill the radioGroup button's magic logic
-    // Everything should be reactive off these props, so commands can inform ToolbarService
-
-    // These can... Trigger toolbar events based on updates?
-    // Then sync using useEffect, or simply modify the state here?
     return (
       /*#__PURE__*/
       // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
@@ -2127,9 +2104,7 @@ function Toolbar(_ref) {
       }, /*#__PURE__*/react.createElement(Component, _extends({
         id: id
       }, componentProps, {
-        bState: buttonState,
-        isActive: isActive,
-        onInteraction: args => toolbarService.recordInteraction(args),
+        onInteraction: onInteraction,
         servicesManager: servicesManager
       })))
     );
@@ -2191,8 +2166,8 @@ function ViewerHeader(_ref) {
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.7.0-beta.79";
-  const commitHash = "2bd3b26a6aa54b211ef988f3ad64ef1fe5648bab";
+  const versionNumber = "3.7.0-beta.80";
+  const commitHash = "04ca10d8779dd15454920002f3d48afa8830de8a";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2260,6 +2235,49 @@ function ViewerHeader(_ref) {
   }))));
 }
 /* harmony default export */ const ViewerLayout_ViewerHeader = (ViewerHeader);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/SidePanelWithServices.tsx
+
+
+const SidePanelWithServices = _ref => {
+  let {
+    servicesManager,
+    side,
+    className,
+    activeTabIndex: activeTabIndexProp,
+    tabs
+  } = _ref;
+  const panelService = servicesManager?.services?.panelService;
+
+  // Tracks whether this SidePanel has been opened at least once since this SidePanel was inserted into the DOM.
+  // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
+  const [hasBeenOpened, setHasBeenOpened] = (0,react.useState)(false);
+  const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp);
+  (0,react.useEffect)(() => {
+    if (panelService) {
+      const activatePanelSubscription = panelService.subscribe(panelService.EVENTS.ACTIVATE_PANEL, activatePanelEvent => {
+        if (!hasBeenOpened || activatePanelEvent.forceActive) {
+          const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+          if (tabIndex !== -1) {
+            setActiveTabIndex(tabIndex);
+          }
+        }
+      });
+      return () => {
+        activatePanelSubscription.unsubscribe();
+      };
+    }
+  }, [tabs, hasBeenOpened, panelService]);
+  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+    side: side,
+    className: className,
+    activeTabIndex: activeTabIndex,
+    tabs: tabs,
+    onOpen: () => {
+      setHasBeenOpened(true);
+    }
+  });
+};
+/* harmony default export */ const Components_SidePanelWithServices = (SidePanelWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
 
 
@@ -2267,6 +2285,7 @@ function ViewerHeader(_ref) {
 
 
 
+
 function ViewerLayout(_ref) {
   let {
     // From Extension Module Params
@@ -2304,7 +2323,7 @@ function ViewerLayout(_ref) {
   const getComponent = id => {
     const entry = extensionManager.getModuleEntry(id);
     if (!entry) {
-      throw new Error(`${id} is not a valid entry for an extension module, please check your configuration or make sure the extension is registered.`);
+      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) {
@@ -2370,7 +2389,7 @@ function ViewerLayout(_ref) {
     className: "h-full w-full bg-black"
   }), leftPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Left Panel"
-  }, /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+  }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "left",
     activeTabIndex: leftPanelDefaultClosed ? null : 0,
     tabs: leftPanelComponents,
@@ -2387,7 +2406,7 @@ function ViewerLayout(_ref) {
     commandsManager: commandsManager
   })))), rightPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Right Panel"
-  }, /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+  }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "right",
     activeTabIndex: rightPanelDefaultClosed ? null : 0,
     tabs: rightPanelComponents,
@@ -2549,8 +2568,7 @@ function PanelStudyBrowser(_ref) {
       });
     }
     StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [StudyInstanceUIDs, getStudiesForPatientByMRN]);
+  }, [StudyInstanceUIDs, dataSource, getStudiesForPatientByMRN, navigate]);
 
   // // ~~ Initial Thumbnails
   (0,react.useEffect)(() => {
@@ -2562,24 +2580,25 @@ function PanelStudyBrowser(_ref) {
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
       // TODO: Is it okay that imageIds are not returned here for SR displaySets?
-      if (imageId && !displaySet?.unsupported) {
-        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
-        if (isMounted.current) {
-          setThumbnailImageSrcMap(prevState => {
-            return {
-              ...prevState,
-              ...newImageSrcEntry
-            };
-          });
-        }
+      if (!imageId || displaySet?.unsupported) {
+        return;
       }
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+      newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
+      if (!isMounted.current) {
+        return;
+      }
+      setThumbnailImageSrcMap(prevState => {
+        return {
+          ...prevState,
+          ...newImageSrcEntry
+        };
+      });
     });
     return () => {
       isMounted.current = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, dataSource, displaySetService, getImageSrc]);
 
   // ~~ displaySets
   (0,react.useEffect)(() => {
@@ -2588,40 +2607,44 @@ function PanelStudyBrowser(_ref) {
     const mappedDisplaySets = _mapDisplaySets(currentDisplaySets, thumbnailImageSrcMap);
     sortStudyInstances(mappedDisplaySets);
     setDisplaySets(mappedDisplaySets);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [thumbnailImageSrcMap]);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
 
   // ~~ subscriptions --> displaySets
   (0,react.useEffect)(() => {
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, data => {
       const {
-        displaySetsAdded
+        displaySetsAdded,
+        options
       } = data;
       displaySetsAdded.forEach(async dSet => {
         const newImageSrcEntry = {};
         const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
-        if (!displaySet?.unsupported) {
-          const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
-          const imageId = imageIds[Math.floor(imageIds.length / 2)];
-
-          // TODO: Is it okay that imageIds are not returned here for SR displaysets?
-          if (imageId) {
-            // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-            newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId, dSet.initialViewport);
-            if (isMounted.current) {
-              setThumbnailImageSrcMap(prevState => {
-                return {
-                  ...prevState,
-                  ...newImageSrcEntry
-                };
-              });
-            }
-          }
+        if (displaySet?.unsupported) {
+          return;
+        }
+        const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
+        const imageId = imageIds[Math.floor(imageIds.length / 2)];
+
+        // TODO: Is it okay that imageIds are not returned here for SR displaysets?
+        if (!imageId) {
+          return;
         }
+        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId, dSet.initialViewport);
+        setThumbnailImageSrcMap(prevState => {
+          return {
+            ...prevState,
+            ...newImageSrcEntry
+          };
+        });
       });
     });
-
+    return () => {
+      SubscriptionDisplaySetsAdded.unsubscribe();
+    };
+  }, [getImageSrc, dataSource, displaySetService]);
+  (0,react.useEffect)(() => {
     // TODO: Will this always hold _all_ the displaySets we care about?
     // DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
     const SubscriptionDisplaySetsChanged = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_CHANGED, changedDisplaySets => {
@@ -2633,12 +2656,10 @@ function PanelStudyBrowser(_ref) {
       setDisplaySets(mappedDisplaySets);
     });
     return () => {
-      SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
       SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
   const tabs = _createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
 
   // TODO: Should not fire this on "close"
@@ -2899,7 +2920,7 @@ function ActionButtons(_ref) {
   const {
     t
   } = (0,es/* useTranslation */.$G)('MeasurementTable');
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.hE, {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* LegacyButtonGroup */.HO, {
     color: "black",
     size: "inherit"
   }, /*#__PURE__*/react.createElement(ui_src/* LegacyButton */.mN, {
@@ -3007,11 +3028,11 @@ function createReportDialogPrompt(uiDialogService, _ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.U.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,
@@ -3074,12 +3095,13 @@ function createReportDialogPrompt(uiDialogService, _ref) {
 /**
  *
  * @param {*} servicesManager
- * @param {*} dataSource
- * @param {*} measurements
- * @param {*} options
- * @returns {string[]} displaySetInstanceUIDs
  */
-async function createReportAsync(servicesManager, commandsManager, dataSource, measurements, options) {
+async function createReportAsync(_ref) {
+  let {
+    servicesManager,
+    getReport,
+    reportType = 'measurement'
+  } = _ref;
   const {
     displaySetService,
     uiNotificationService,
@@ -3089,32 +3111,27 @@ async function createReportAsync(servicesManager, commandsManager, dataSource, m
     showOverlay: true,
     isDraggable: false,
     centralize: true,
-    // TODO: Create a loading indicator component + zeplin design?
     content: Loading
   });
   try {
-    const naturalizedReport = await commandsManager.runCommand('storeMeasurements', {
-      measurementData: measurements,
-      dataSource,
-      additionalFindingTypes: ['ArrowAnnotate'],
-      options
-    }, 'CORNERSTONE_STRUCTURED_REPORT');
+    const naturalizedReport = await getReport();
 
     // The "Mode" route listens for DicomMetadataStore changes
     // When a new instance is added, it listens and
     // automatically calls makeDisplaySets
     src.DicomMetadataStore.addInstances([naturalizedReport], true);
-    const displaySetInstanceUID = displaySetService.getMostRecentDisplaySet();
+    const displaySet = displaySetService.getMostRecentDisplaySet();
+    const displaySetInstanceUID = displaySet.displaySetInstanceUID;
     uiNotificationService.show({
       title: 'Create Report',
-      message: 'Measurements saved successfully',
+      message: `${reportType} saved successfully`,
       type: 'success'
     });
     return [displaySetInstanceUID];
   } catch (error) {
     uiNotificationService.show({
       title: 'Create Report',
-      message: error.message || 'Failed to store measurements',
+      message: error.message || `Failed to store ${reportType}`,
       type: 'error'
     });
   } finally {
@@ -3276,7 +3293,18 @@ function PanelMeasurementTable(_ref) {
       // Reuse an existing series having the same series description to avoid
       // creating too many series instances.
       const options = findSRWithSameSeriesDescription(SeriesDescription, displaySetService);
-      return Actions_createReportAsync(servicesManager, commandsManager, dataSource, trackedMeasurements, options);
+      const getReport = async () => {
+        return commandsManager.runCommand('storeMeasurements', {
+          measurementData: trackedMeasurements,
+          dataSource,
+          additionalFindingTypes: ['ArrowAnnotate'],
+          options
+        }, 'CORNERSTONE_STRUCTURED_REPORT');
+      };
+      return Actions_createReportAsync({
+        servicesManager,
+        getReport
+      });
     }
   }
   const jumpToImage = _ref2 => {
@@ -3366,11 +3394,11 @@ function PanelMeasurementTable(_ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.U.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler
       }
@@ -3463,6 +3491,7 @@ function _mapMeasurementToDisplay(measurement, index, types) {
 
 
 
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPanelModule.tsx
 
 
@@ -3487,7 +3516,7 @@ function getPanelModule(_ref) {
   };
   return [{
     name: 'seriesList',
-    iconName: 'group-layers',
+    iconName: 'tab-studies',
     iconLabel: 'Studies',
     label: 'Studies',
     component: Panels_WrappedPanelStudyBrowser.bind(null, {
@@ -3987,40 +4016,49 @@ function ToolbarDivider() {
   });
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
+function ToolbarLayoutSelector_extends() { ToolbarLayoutSelector_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 ToolbarLayoutSelector_extends.apply(this, arguments); }
 
 
 
 
-function LayoutSelector(_ref) {
+function ToolbarLayoutSelectorWithServices(_ref) {
   let {
-    rows,
-    columns,
-    className,
     servicesManager,
-    ...rest
+    ...props
   } = _ref;
-  const [isOpen, setIsOpen] = (0,react.useState)(false);
   const {
-    hangingProtocolService,
     toolbarService
   } = servicesManager.services;
+  const onSelection = (0,react.useCallback)(props => {
+    toolbarService.recordInteraction({
+      interactionType: 'action',
+      commands: [{
+        commandName: 'setViewportGridLayout',
+        commandOptions: {
+          ...props
+        },
+        context: 'DEFAULT'
+      }]
+    });
+  }, [toolbarService]);
+  return /*#__PURE__*/react.createElement(LayoutSelector, ToolbarLayoutSelector_extends({}, props, {
+    onSelection: onSelection
+  }));
+}
+function LayoutSelector(_ref2) {
+  let {
+    rows,
+    columns,
+    className,
+    onSelection,
+    ...rest
+  } = _ref2;
+  const [isOpen, setIsOpen] = (0,react.useState)(false);
   const closeOnOutsideClick = () => {
     if (isOpen) {
       setIsOpen(false);
     }
   };
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = hangingProtocolService.subscribe(hangingProtocolService.EVENTS.PROTOCOL_CHANGED, evt => {
-      const {
-        protocol
-      } = evt;
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [hangingProtocolService]);
   (0,react.useEffect)(() => {
     window.addEventListener('click', closeOnOutsideClick);
     return () => {
@@ -4029,18 +4067,6 @@ function LayoutSelector(_ref) {
   }, [isOpen]);
   const onInteractionHandler = () => setIsOpen(!isOpen);
   const DropdownContent = isOpen ? ui_src/* LayoutSelector */.OF : null;
-  const onSelectionHandler = props => {
-    toolbarService.recordInteraction({
-      interactionType: 'action',
-      commands: [{
-        commandName: 'setViewportGridLayout',
-        commandOptions: {
-          ...props
-        },
-        context: 'DEFAULT'
-      }]
-    });
-  };
   return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, {
     id: "Layout",
     label: "Grid Layout",
@@ -4051,7 +4077,7 @@ function LayoutSelector(_ref) {
     dropdownContent: DropdownContent !== null && /*#__PURE__*/react.createElement(DropdownContent, {
       rows: rows,
       columns: columns,
-      onSelection: onSelectionHandler
+      onSelection: onSelection
     }),
     isActive: isOpen,
     type: "toggle"
@@ -4068,10 +4094,238 @@ LayoutSelector.defaultProps = {
   columns: 3,
   onLayoutChange: () => {}
 };
-/* harmony default export */ const ToolbarLayoutSelector = (LayoutSelector);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarSplitButton.tsx
+/* harmony default export */ const ToolbarLayoutSelector = (ToolbarLayoutSelectorWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
+function ToolbarSplitButtonWithServices_extends() { ToolbarSplitButtonWithServices_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 ToolbarSplitButtonWithServices_extends.apply(this, arguments); }
+
 
-/* harmony default export */ const ToolbarSplitButton = (ui_src/* SplitButton */.aW);
+
+
+function ToolbarSplitButtonWithServices(_ref) {
+  let {
+    isRadio,
+    isAction,
+    groupId,
+    primary,
+    secondary,
+    items,
+    renderer,
+    onInteraction,
+    servicesManager
+  } = _ref;
+  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) => ({
+    ...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 */.hA;
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
+      setButtonState({
+        ...state
+      });
+    });
+    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 = _ref2 => {
+    let {
+      type,
+      icon,
+      label,
+      t,
+      id
+    } = _ref2;
+    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 */.JO, {
+      name: icon,
+      className: "h-5 w-5"
+    })), /*#__PURE__*/react.createElement("span", {
+      className: "mr-5"
+    }, t(label)));
+  };
+  const listItemRenderer = renderer || DefaultListItemRenderer;
+  return /*#__PURE__*/react.createElement(ui_src/* SplitButton */.aW, {
+    isRadio: isRadio,
+    isAction: isAction,
+    primary: state.primary,
+    secondary: secondary,
+    items: updatedItems,
+    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
+    }))
+  });
+}
+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({
+    id: (prop_types_default()).string,
+    icon: (prop_types_default()).string.isRequired,
+    label: (prop_types_default()).string,
+    tooltip: (prop_types_default()).string.isRequired,
+    isActive: (prop_types_default()).bool
+  }),
+  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
+  })),
+  renderer: (prop_types_default()).func,
+  onInteraction: (prop_types_default()).func.isRequired,
+  servicesManager: prop_types_default().shape({
+    services: prop_types_default().shape({
+      toolbarService: (prop_types_default()).object
+    })
+  })
+};
+ToolbarSplitButtonWithServices.defaultProps = {
+  isRadio: false,
+  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); }
+
+
+
+function ToolbarButtonWithServices(_ref) {
+  let {
+    id,
+    type,
+    commands,
+    onInteraction,
+    servicesManager,
+    ...props
+  } = _ref;
+  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
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, ToolbarButtonWithServices_extends({
+    commands: commands,
+    id: id,
+    type: type,
+    isActive: isActive,
+    onInteraction: onInteraction
+  }, props));
+}
+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()).object)
+        }).isRequired
+      }).isRequired
+    }).isRequired
+  }).isRequired
+};
+/* harmony default export */ const Toolbar_ToolbarButtonWithServices = (ToolbarButtonWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
@@ -4088,15 +4342,15 @@ function getToolbarModule(_ref) {
     clickHandler: () => {}
   }, {
     name: 'ohif.action',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.radioGroup',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.splitButton',
-    defaultComponent: ToolbarSplitButton,
+    defaultComponent: Toolbar_ToolbarSplitButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.layoutSelector',
@@ -4104,7 +4358,7 @@ function getToolbarModule(_ref) {
     clickHandler: (evt, clickedBtn, btnSectionName) => {}
   }, {
     name: 'ohif.toggle',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }];
 }
@@ -6327,7 +6581,7 @@ function DataSourceSelector() {
   }, /*#__PURE__*/react.createElement("h1", {
     className: "text-white"
   }, ds.configuration?.friendlyName || ds.friendlyName), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
-    type: ui_src/* ButtonEnums.type */.LZ.U.primary,
+    type: ui_src/* ButtonEnums.type */.LZ.dt.primary,
     className: classnames_default()('ml-2'),
     onClick: () => {
       navigate({
@@ -7101,6 +7355,8 @@ const handlePETImageMetadata = _ref2 => {
 
 
 
+
+
 const defaultExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.