feat(actions): simplify action corner api through the toolbarService (#5033)

extensions/default/src/Components/ProgressDropdownWithService.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useCallback, ReactElement } from 'react';
 import { ProgressDropdown } from '@ohif/ui-next';
+import { useSystem } from '@ohif/core';
 
 const workflowStepsToDropdownOptions = (steps = []) =>
   steps.map(step => ({
@@ -10,7 +11,8 @@ const workflowStepsToDropdownOptions = (steps = []) =>
     completed: false,
   }));
 
-export function ProgressDropdownWithService({ servicesManager }: withAppTypes): ReactElement {
+export function ProgressDropdownWithService(): ReactElement {
+  const { servicesManager } = useSystem();
   const { workflowStepsService } = servicesManager.services;
   const [activeStepId, setActiveStepId] = useState(workflowStepsService.activeWorkflowStep?.id);
 

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useImageViewer } from '@ohif/ui-next';
 import { useSystem, utils } from '@ohif/core';
 import { useNavigate } from 'react-router-dom';
@@ -31,6 +31,7 @@ function PanelStudyBrowser({
 
   const internalImageViewer = useImageViewer();
   const StudyInstanceUIDs = internalImageViewer.StudyInstanceUIDs;
+  const fetchedStudiesRef = useRef(new Set());
 
   const [{ activeViewportId, viewports, isHangingProtocolLayout }] = useViewportGrid();
   const [activeTabName, setActiveTabName] = useState(studyMode);
@@ -105,6 +106,13 @@ function PanelStudyBrowser({
   useEffect(() => {
     // Fetch all studies for the patient in each primary study
     async function fetchStudiesForPatient(StudyInstanceUID) {
+      // Skip fetching if we've already fetched this study
+      if (fetchedStudiesRef.current.has(StudyInstanceUID)) {
+        return;
+      }
+
+      fetchedStudiesRef.current.add(StudyInstanceUID);
+
       // current study qido
       const qidoForStudyUID = await dataSource.query.studies.search({
         studyInstanceUid: StudyInstanceUID,

extensions/default/src/Toolbar/ToolBoxWrapper.tsx

@@ -8,12 +8,12 @@ import { useToolbar } from '@ohif/core/src/hooks/useToolbar';
  * @param props - Component props
  * @returns Component
  */
-export function ToolBoxButtonGroupWrapper({ groupId, buttonSection, ...props }) {
+export function ToolBoxButtonGroupWrapper({ buttonSection, id }) {
   const { onInteraction, toolbarButtons } = useToolbar({
     buttonSection,
   });
 
-  if (!groupId) {
+  if (!buttonSection) {
     return null;
   }
 
@@ -30,7 +30,7 @@ export function ToolBoxButtonGroupWrapper({ groupId, buttonSection, ...props })
           onInteraction={event => {
             onInteraction?.({
               event,
-              groupId,
+              id,
               commands: item.commands,
               itemId: item.id,
               item,

extensions/default/src/Toolbar/ToolButtonListWrapper.tsx

@@ -10,13 +10,9 @@ import {
 import { useToolbar } from '@ohif/core/src';
 
 interface ToolButtonListWrapperProps {
-  groupId: string;
   buttonSection: string;
-  onInteraction?: (details: {
-    groupId: string;
-    itemId: string;
-    commands?: Record<string, unknown>;
-  }) => void;
+  onInteraction?: (details: { itemId: string; commands?: Record<string, unknown> }) => void;
+  id: string;
 }
 
 /**
@@ -25,10 +21,7 @@ interface ToolButtonListWrapperProps {
  * @returns Component
  * // test
  */
-export default function ToolButtonListWrapper({
-  groupId,
-  buttonSection,
-}: ToolButtonListWrapperProps) {
+export default function ToolButtonListWrapper({ buttonSection, id }: ToolButtonListWrapperProps) {
   const { onInteraction, toolbarButtons } = useToolbar({
     buttonSection,
   });
@@ -47,21 +40,21 @@ export default function ToolButtonListWrapper({
     <ToolButtonList>
       <ToolButtonListDefault>
         <div
-          data-cy={`${groupId}-split-button-primary`}
+          data-cy={`${id}-split-button-primary`}
           data-tool={primary.id}
           data-active={primary.isActive}
         >
           <ToolButton
             {...primary}
             onInteraction={({ itemId }) =>
-              onInteraction?.({ groupId, itemId, commands: primary.commands })
+              onInteraction?.({ id, itemId, commands: primary.commands })
             }
             className={primary.className}
           />
         </div>
       </ToolButtonListDefault>
       <ToolButtonListDivider className={primary.isActive ? 'opacity-0' : 'opacity-100'} />
-      <div data-cy={`${groupId}-split-button-secondary`}>
+      <div data-cy={`${id}-split-button-secondary`}>
         <ToolButtonListDropDown>
           {items.map(item => {
             return (
@@ -71,9 +64,7 @@ export default function ToolButtonListWrapper({
                 data-cy={item.id}
                 data-tool={item.id}
                 data-active={item.isActive}
-                onSelect={() =>
-                  onInteraction?.({ groupId, itemId: item.id, commands: item.commands })
-                }
+                onSelect={() => onInteraction?.({ id, itemId: item.id, commands: item.commands })}
               >
                 <span className="pl-1">{item.label || item.tooltip || item.id}</span>
               </ToolButtonListItem>

extensions/default/src/Toolbar/ToolButtonWrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIconPresentation, Icons, Button } from '@ohif/ui-next';
+
+export default function ToolButtonWrapper(props) {
+  const { IconContainer, containerProps } = useIconPresentation();
+
+  const Icon = <Icons.ByName name={props.icon} />;
+
+  return (
+    <div>
+      {IconContainer ? (
+        <IconContainer
+          disabled={props.disabled}
+          {...props}
+          {...containerProps}
+        >
+          {Icon}
+        </IconContainer>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={props.disabled}
+        >
+          {Icon}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export { ToolButtonWrapper };

extensions/default/src/Toolbar/ToolRowWrapper.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useToolbar, ButtonLocation } from '@ohif/core';
+
+interface ToolRowWrapperProps {
+  buttonSection: string;
+  className?: string;
+  show?: boolean;
+}
+
+function ToolRowWrapper({ buttonSection, className = '', show = true }: ToolRowWrapperProps) {
+  const { onInteraction, toolbarButtons } = useToolbar({
+    buttonSection,
+  });
+
+  // No need for debugger statement
+  if (!toolbarButtons?.length) {
+    return null;
+  }
+
+  return (
+    <div className={`space-x-1} flex flex-row items-center ${className}`}>
+      {toolbarButtons.map((button, index) => {
+        const { id, Component, componentProps } = button;
+        return (
+          <div
+            key={id || index}
+            className="flex-shrink-0"
+          >
+            <Component
+              {...componentProps}
+              onInteraction={onInteraction}
+              location={componentProps.location || buttonSection}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default ToolRowWrapper;

extensions/default/src/Toolbar/Toolbar.tsx

@@ -1,9 +1,22 @@
 import React from 'react';
 import { useToolbar } from '@ohif/core';
 
-export function Toolbar({ servicesManager, buttonSection = 'primary' }) {
-  const { toolbarButtons, onInteraction } = useToolbar({
-    servicesManager,
+interface ToolbarProps {
+  buttonSection?: string;
+  viewportId?: string;
+  location?: number;
+}
+
+export function Toolbar({ buttonSection = 'primary', viewportId, location }: ToolbarProps) {
+  const {
+    toolbarButtons,
+    onInteraction,
+    isItemOpen,
+    isItemLocked,
+    openItem,
+    closeItem,
+    toggleLock,
+  } = useToolbar({
     buttonSection,
   });
 
@@ -19,13 +32,31 @@ export function Toolbar({ servicesManager, buttonSection = 'primary' }) {
         }
 
         const { id, Component, componentProps } = toolDef;
+
+        // Enhanced props with state and actions - respecting viewport specificity
+        const enhancedProps = {
+          ...componentProps,
+          isOpen: isItemOpen(id, viewportId),
+          isLocked: isItemLocked(id, viewportId),
+          onOpen: () => openItem(id, viewportId),
+          onClose: () => closeItem(id, viewportId),
+          onToggleLock: () => toggleLock(id, viewportId),
+          viewportId,
+        };
+
         const tool = (
           <Component
             key={id}
             id={id}
-            onInteraction={onInteraction}
-            servicesManager={servicesManager}
-            {...componentProps}
+            location={location}
+            onInteraction={args => {
+              onInteraction({
+                ...args,
+                itemId: id,
+                viewportId,
+              });
+            }}
+            {...enhancedProps}
           />
         );
 

extensions/default/src/Toolbar/ToolbarButtonGroupWithServices.tsx

@@ -1,37 +0,0 @@
-import React, { useCallback } from 'react';
-import { ToolbarButton, ButtonGroup } from '@ohif/ui';
-
-function ToolbarButtonGroupWithServices({ groupId, items, onInteraction, size }) {
-  const getSplitButtonItems = useCallback(
-    items =>
-      items.map((item, index) => (
-        <ToolbarButton
-          key={item.id}
-          icon={item.icon}
-          label={item.label}
-          disabled={item.disabled}
-          className={item.className}
-          disabledText={item.disabledText}
-          id={item.id}
-          size={size}
-          onClick={() => {
-            onInteraction({
-              groupId,
-              itemId: item.id,
-              commands: item.commands,
-              item,
-            });
-          }}
-          // 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 <ButtonGroup>{getSplitButtonItems(items)}</ButtonGroup>;
-}
-
-export default ToolbarButtonGroupWithServices;

extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx

@@ -1,89 +0,0 @@
-import { SplitButton, ToolbarButton } from '@ohif/ui';
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-
-function ToolbarSplitButtonWithServices({
-  groupId,
-  primary,
-  secondary,
-  items,
-  renderer,
-  onInteraction,
-  servicesManager,
-}: withAppTypes) {
-  const { toolbarService } = servicesManager?.services;
-
-  /* Bubbles up individual item clicks */
-  const getSplitButtonItems = useCallback(
-    items =>
-      items.map((item, index) => ({
-        ...item,
-        index,
-        onClick: () => {
-          onInteraction({
-            groupId,
-            itemId: item.id,
-            item,
-          });
-        },
-      })),
-    [groupId, onInteraction]
-  );
-
-  const PrimaryButtonComponent =
-    toolbarService?.getButtonComponentForUIType(primary.uiType) ?? ToolbarButton;
-
-  const listItemRenderer = renderer;
-
-  return (
-    <SplitButton
-      primary={primary}
-      secondary={secondary}
-      items={getSplitButtonItems(items)}
-      groupId={groupId}
-      renderer={listItemRenderer}
-      onInteraction={onInteraction}
-      Component={props => (
-        <PrimaryButtonComponent
-          {...props}
-          servicesManager={servicesManager}
-        />
-      )}
-    />
-  );
-}
-
-ToolbarSplitButtonWithServices.propTypes = {
-  groupId: PropTypes.string,
-  primary: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    uiType: PropTypes.string,
-  }),
-  secondary: PropTypes.shape({
-    id: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    tooltip: PropTypes.string.isRequired,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-  }),
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      icon: PropTypes.string,
-      label: PropTypes.string,
-      tooltip: PropTypes.string,
-      disabled: PropTypes.bool,
-      className: PropTypes.string,
-    })
-  ),
-  renderer: PropTypes.func,
-  onInteraction: PropTypes.func.isRequired,
-  servicesManager: PropTypes.shape({
-    services: PropTypes.shape({
-      toolbarService: PropTypes.object,
-    }),
-  }),
-};
-
-export default ToolbarSplitButtonWithServices;

extensions/default/src/Toolbar/index.ts

@@ -0,0 +1,7 @@
+export * from './Toolbar';
+export * from './ToolButtonWrapper';
+export * from './ToolButtonListWrapper';
+export * from './ToolRowWrapper';
+export * from './ToolBoxWrapper';
+export * from './ToolbarDivider';
+export * from './ToolbarLayoutSelector';

extensions/default/src/ViewerLayout/ViewerHeader.tsx

@@ -87,12 +87,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
       isReturnEnabled={!!appConfig.showStudyList}
       onClickReturnButton={onClickReturnButton}
       WhiteLabeling={appConfig.whiteLabeling}
-      Secondary={
-        <Toolbar
-          servicesManager={servicesManager}
-          buttonSection="secondary"
-        />
-      }
+      Secondary={<Toolbar buttonSection="secondary" />}
       PatientInfo={
         appConfig.showPatientInfo !== PatientInfoVisibility.DISABLED && (
           <HeaderPatientInfo
@@ -125,7 +120,7 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
       }
     >
       <div className="relative flex justify-center gap-[4px]">
-        <Toolbar servicesManager={servicesManager} />
+        <Toolbar buttonSection="primary" />
       </div>
     </Header>
   );

extensions/default/src/getToolbarModule.tsx

@@ -1,16 +1,15 @@
-import { ToolButton, utils } from '@ohif/ui-next';
+import { utils } from '@ohif/ui-next';
 
 import ToolbarLayoutSelectorWithServices from './Toolbar/ToolbarLayoutSelector';
 
 // legacy
-import ToolbarDividerLegacy from './Toolbar/ToolbarDivider';
-import ToolbarSplitButtonWithServicesLegacy from './Toolbar/ToolbarSplitButtonWithServices';
-import ToolbarButtonGroupWithServicesLegacy from './Toolbar/ToolbarButtonGroupWithServices';
 import { ProgressDropdownWithService } from './Components/ProgressDropdownWithService';
 
 // new
 import ToolButtonListWrapper from './Toolbar/ToolButtonListWrapper';
+import ToolRowWrapper from './Toolbar/ToolRowWrapper';
 import { ToolBoxButtonGroupWrapper, ToolBoxButtonWrapper } from './Toolbar/ToolBoxWrapper';
+import { ToolButtonWrapper } from './Toolbar/ToolButtonWrapper';
 
 export default function getToolbarModule({ commandsManager, servicesManager }: withAppTypes) {
   const { cineService } = servicesManager.services;
@@ -18,12 +17,16 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
     // new
     {
       name: 'ohif.toolButton',
-      defaultComponent: ToolButton,
+      defaultComponent: ToolButtonWrapper,
     },
     {
       name: 'ohif.toolButtonList',
       defaultComponent: ToolButtonListWrapper,
     },
+    {
+      name: 'ohif.row',
+      defaultComponent: ToolRowWrapper,
+    },
     {
       name: 'ohif.toolBoxButtonGroup',
       defaultComponent: ToolBoxButtonGroupWrapper,

extensions/default/src/hooks/usePatientInfo.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { utils } from '@ohif/core';
+import { utils, useSystem } from '@ohif/core';
 
 const { formatPN, formatDate } = utils;
 
-function usePatientInfo(servicesManager: AppTypes.ServicesManager) {
+function usePatientInfo() {
+  const { servicesManager } = useSystem();
   const { displaySetService } = servicesManager.services;
 
   const [patientInfo, setPatientInfo] = useState({

extensions/default/src/init.ts

@@ -11,16 +11,13 @@ const metadataProvider = classes.MetadataProvider;
  * @param {Object} servicesManager
  * @param {Object} configuration
  */
-export default function init({
-  servicesManager,
-  configuration = {},
-  commandsManager,
-}: withAppTypes): void {
+export default function init({ servicesManager, commandsManager }: withAppTypes): void {
   const { toolbarService, cineService, viewportGridService } = servicesManager.services;
 
   toolbarService.registerEventForToolbarUpdate(cineService, [
     cineService.EVENTS.CINE_STATE_CHANGED,
   ]);
+
   // Add
   DicomMetadataStore.subscribe(DicomMetadataStore.EVENTS.INSTANCES_ADDED, handleScalingModules);
 
@@ -52,10 +49,10 @@ export default function init({
   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 || {};
+      const { buttonSection, items, listeners } = button.props || {};
 
       // Handle group items' listeners
-      if (groupId && items) {
+      if (buttonSection && items) {
         items.forEach(item => {
           if (item.listeners) {
             subscribeToEvents(item.listeners);

extensions/default/src/utils/Toolbox.tsx

@@ -27,7 +27,6 @@ export function Toolbox({ buttonSectionId, title }: { buttonSectionId: string; t
   const [showConfig, setShowConfig] = useState(false);
 
   const { toolbarButtons: toolboxSections, onInteraction } = useToolbar({
-    servicesManager,
     buttonSection: buttonSectionId,
   });