Migration Guide

There are two main things that need to be taken care of.

New Toolbar Button definitions

Update Active Tool Handling

The concept of activeTool and its associated getter and setter has been removed. The active tool should now be derived from the toolGroup and the viewport.

Action Needed

Remove any code that sets the default tool using toolbarService.setDefaultTool() and activates the tool using toolbarService.recordInteraction(). For example, the following code should be removed:

let unsubscribe;
toolbarService.setDefaultTool({
  groupId: "WindowLevel",
  itemId: "WindowLevel",
  interactionType: "tool",
  commands: [
    {
      commandName: "setToolActive",
      commandOptions: {
        toolName: "WindowLevel",
      },
      context: "CORNERSTONE",
    },
  ],
});

const activateTool = () => {
  toolbarService.recordInteraction(toolbarService.getDefaultTool());

  unsubscribe();
};

({ unsubscribe } = toolGroupService.subscribe(
  toolGroupService.EVENTS.VIEWPORT_ADDED,
  activateTool
));

Instead, focus on defining the buttons and their placement in the toolbar using toolbarService.addButtons() and toolbarService.createButtonSection(). For example:

toolbarService.addButtons([...toolbarButtons, ...moreTools]);
toolbarService.createButtonSection("primary", [
  "MeasurementTools",
  "Zoom",
  "WindowLevel",
  "Pan",
  "Capture",
  "Layout",
  "MPR",
  "Crosshairs",
  "MoreTools",
]);

Update Button Definitions

The concept of button types (toggle, action, tool) has been removed. Buttons are now defined using a simplified object-based definition.

Action Needed

Update your button definitions to use the new object-based format and remove the type property. Use the uiType property for the top-level UI type definition. For example:

// Old Implementation
{
  id: 'Capture',
  type: 'ohif.action',
  props: {
    icon: 'tool-capture',
    label: 'Capture',
    type: 'action',
    commands: [
      {
        commandName: 'showDownloadViewportModal',
        commandOptions: {},
        context: 'CORNERSTONE',
      },
    ],
  },
},

is now

// New Implementation
{
  id: 'Capture',
  uiType: 'ohif.radioGroup',
  props: {
    icon: 'tool-capture',
    label: 'Capture',
    commands: [
      {
        commandName: 'showDownloadViewportModal',
        context: 'CORNERSTONE',
      },
    ],
    evaluate: 'evaluate.action',
  },
},

Add Evaluators to Button Definitions

Introduce the evaluate property in your button definitions to determine the state of the button based on the app context.

Action Needed

Add the appropriate evaluate property to each button definition. For example:

• Use evaluate.cornerstoneTool if the button should be highlighted only when it is the active primary tool (left mouse).
• Use evaluate.cornerstoneTool.toggle if the tool is a toggle tool (like reference lines or image overlay).

Refer to the modes/longitudinal/src/toolbarButtons.ts file for examples of using the evaluate property.

Additional Resources

• For more information on the new toolbar module and its usage, refer to the Toolbar documentation.
• Consult the updated button definitions in modes/longitudinal/src/toolbarButtons.ts for examples of the new object-based button definition format and the usage of evaluators.

leftPanelDefaultClosed and rightPanelDefaultClosed

Now they are renamed to leftPanelClosed and rightPanelClosed respectively.

StudyInstanceUID in the URL param

Previously there were two params that you could choose: seriesInstanceUID and seriesInstanceUIDs, they have been replaced with seriesInstanceUIDs so even if you would like to filter one series use `seriesInstanceUIDs