fix(toolbar): allow customizable toolbar for active viewport and allow active tool to be deactivated via a click (#3608)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,19 +1,34 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import classnames from 'classnames';
+import { useViewportGrid } from '@ohif/ui';
 
-export default function Toolbar({ servicesManager }) {
+export default function Toolbar({
+  servicesManager,
+}: Types.Extensions.ExtensionParams): React.ReactElement {
   const { toolbarService } = servicesManager.services;
+
+  const [viewportGrid, viewportGridService] = useViewportGrid();
+
   const [toolbarButtons, setToolbarButtons] = useState([]);
 
   useEffect(() => {
-    const { unsubscribe } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, () =>
-      setToolbarButtons(toolbarService.getButtonSection('primary'))
+    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]);
+  }, [toolbarService, viewportGrid]);
 
   const onInteraction = useCallback(
     args => toolbarService.recordInteraction(args),

extensions/default/src/Toolbar/ToolbarButtonWithServices.tsx

@@ -65,7 +65,7 @@ ToolbarButtonWithServices.propTypes = {
         state: PropTypes.shape({
           primaryToolId: PropTypes.string,
           toggles: PropTypes.objectOf(PropTypes.bool),
-          groups: PropTypes.objectOf(PropTypes.object),
+          groups: PropTypes.objectOf(PropTypes.any),
         }).isRequired,
       }).isRequired,
     }).isRequired,